Web Design: Como estabelecer um projeto do estilo
Após o design de um site for aprovado, ele é uma boa idéia para estabelecer um guia de estilo visual que governa a paleta de cores, o uso da fonte e tratamentos gráficos. Desenvolver um guia de estilo em primeiro lugar - ou iniciar um e refiná-lo como você vai - vai ajudar você a ficar consistente ao longo do desenvolvimento de suas composições. Além disso, os estilos de gráficos e texto que você definir agora acabará por ser traduzido em CSS (C
ascading Style Sheets) estilos por desenvolvedores durante a fase de construção fora.estilo gráfico guias para sites
Há tantos elementos que você pode visualmente definem apenas com um simples código CSS sozinho. elementos visuais, como bordas, cores de preenchimento, cores capotamento, cores dos links, cores de fundo e linhas de regra devem ser definidos pelo designer. Perguntas como estas devem ser documentadas: Qual a espessura são linhas de regra? Quando você rolar uma área de conteúdo, faz a sua mudança de cor de fundo, e em caso afirmativo, qual a cor?
Para outros elementos comuns na página - como personalizados texturizados fundos, botões de fantasia, e tratamentos de fronteira que não precisam de suporte gráfico - você pode criar uma biblioteca de tais itens. Esta biblioteca, criado em um programa como o Adobe Fireworks ou Adobe Photoshop, seria além da página de Compensações você já criou. Todos os arquivos de produção e composições devem ser salvos como arquivos em camadas em formato nativo do software (PNG e PSD, respectivamente). As camadas e conjuntos de camadas deve ser claramente organizada e chamado assim qualquer designer pode pegar de onde parou.
estilos de botão em web design
Uma coisa muitas vezes esquecido no planejamento de web-design é uma hierarquia de estilos para os botões e links. Você deve ter um plano para diferentes tipos de botões e links: um botão importante, menos importante botão- um link de texto importante e um link de texto menos importante (ou um link encontrado em linha com outra cópia do corpo). Muitas vezes, links e botões de uma página são colocadas em fundos de cores diferentes. Se o mesmo estilo não funciona em ambos os fundos, têm um estilo diferente para cada fundo.
No exemplo, os dois botões de nível superior trabalhar bem em ambos uma luz e um fundo de cor escura. As cores de acento verde eo laranja para o Nível 3 e Nível 4 links, no entanto, não funcionam bem em ambos os fundos. Neste caso, tanto o verde eo laranja eram # 147 enganado # 148- a ser mais leves e mais brilhante para uso no fundo escuro e mais escuro para trabalhar em fundos claros.
estilos de tipo de web design
Hoje em dia é raro para utilizar gráfico texto - texto que é simplesmente uma imagem gráfica - na web e sites móveis. Há várias razões para evitar o uso de texto gráfico. Em primeiro lugar, texto gráfico é difícil de manter: É muito mais fácil de digitar novamente ou traduzir palavras em HTML ou em um banco de dados e ter CSS aplicar o estilo apropriado do que para refazer uma imagem. Em segundo lugar, texto gráfico não é pesquisável, a menos que você aplicar tags alt com palavras-chave.
No passado, os designers usaram texto gráfico porque as fontes foram um problema na web: Apenas um número limitado de fontes (um pouco chato) estavam disponíveis no sistema de cada usuário. Agora é possível embutir fontes - tem seu site link para a fonte arquivos - através de vários serviços e tecnologias.
Tal como acontece com botões, você tem que definir estilos de design para todos os tipos de fontes e as situações em que você usá-los - a partir de cópia de corpo de títulos, subtítulos e legendas. Estes estilos de fonte acabará por se tornar uma série de estilos CSS aplicados ao texto dinâmico. Como designer, você não precisa escrever o CSS classes: você pode simplesmente criar uma folha de estilo que mostra todos os seus estilos de fonte em Photoshop. Os desenvolvedores podem recolher o que eles precisam do arquivo de Photoshop em camadas. CSS é surpreendentemente confortáveis - você pode obter uma série de efeitos interessantes.
