Web Design For Dummies

Ao projetar páginas da web, você precisa pensar visualmente. Um Web site concebido com um bom equilíbrio de gráficos e texto é agradável aos olhos, atrai a atenção do espectador, e prende-lo. Bom web design depende da artista - neste caso, você - seguindo certos princípios de design:

  • Projetar a interface página web para caber dentro dos primeiros 800 x 600 pixels para que o conteúdo importante é visível quando a página é carregada pela primeira vez. Embora a maioria dos monitores modernos são muito maiores do que isso, muitas pessoas navegar na Internet através de laptops e dispositivos.

  • Obter um layout equilibrado através da concepção de não mais que três pontos focais: Use a estratégia de "grande, médio, pequeno".

  • Evite usar fontes menores que 10 pontos (dependendo da fonte).

  • Use fontes de sistema de computador padrão para todo o texto HTML, ou seja certo incorporar uma fonte especialidade usando CSS ou outra tecnologia.

A figura a seguir coloca estes princípios à prática:

image0.jpg

Web Design Dicas para gráficos

Os gráficos são uma enorme parte de web design. Conhecer e utilizar os padrões e formatos para diferentes tipos de gráficos web pode significar a diferença entre uma página web que chama a atenção e que navegadores olhar passado. Use essas dicas para se certificar de seus elementos visuais são visualmente interessante:

  • Construir todos os gráficos web em 72 dpi, a resolução da tela padrão da web.

  • Para um melhor desempenho download, salvar os gráficos que têm uma mistura de texto, gráficos lisos de cor, e fotos, como a mostrada aqui, como arquivos GIF paleta adaptativa que usam o mínimo de cores possível.

    Salve todas as imagens fotográficas puramente como arquivos JPEG. (Arquivos PNG funciona tão bem, mas são geralmente maiores em tamanho do arquivo.)

  • Sempre exibir gráficos anti-aliasing que usam transparência única cor (como GIFs) no fundo correta cor- de outra forma, você vê um halo de feio em torno deles.

  • Para conseguir uma transição suave de uma imagem de um fundo transparente, use o formato PNG. O formato PNG suporta transparência canal alfa.

    image0.jpg

Web Design Dicas para apresentação de informações

Como você criar páginas web, pense graficamente mesmo quando tudo o que você está apresentando é informação pura. Bom design da página web significa que você apresentar informações, organizando-se logicamente e torná-lo visualmente atraente. Use as seguintes dicas para manter os olhos navegador em suas páginas de informação:

  • Para sites grandes, priorizar e navegação grupo em um conjunto primário, secundário e superior, cada um contendo não mais do que cinco a sete opções de nível superior.

  • Idealmente, construir o seu contorno site com não mais de três níveis: principal ideia, tópico e subtópico.

  • Escolha um conjunto padrão de símbolos para o mapa do site. Use caixas para representar páginas, cilindros para representar bancos de dados, e depois conectar tudo junto com linhas e setas.

  • Criar wireframes para cada layout de página única em seu site para detalhar o design de interação e visualização de conteúdo. É importante que eles não transmitem qualquer coisa que possa ser interpretado como um olhar design visual ea sensação. Eles devem ficar bonito e chato. Wireframes actuar meramente como uma exibição de diagrama de layout da página e interação, como a mostrada aqui:

    image0.jpg

Dicas de Design Web para ferramentas de navegação

Em web design, considere o visual quando você incluir as ferramentas de navegação que levam os visitantes de uma página para. Ao projetar ferramentas de navegação de páginas web, você precisa torná-los atraentes, bem como funcional. Estas dicas podem ajudá-lo a fazer isso:

  • Diferenciar o design visual de elementos não-clicáveis ​​e clicáveis. Por exemplo, não use o mesmo gráfico como um botão em uma página e um título em outro. Ou, não sublinhar manchetes e colori-los como links se eles são apenas manchetes.

    Use design visual e feedback para melhorar a interação e usabilidade. Por exemplo, você pode mudar de um item de cor, tamanho ou forma após capotamento. (A imagem a seguir mostra como uma mudança de cor ficaria.)

  • Sempre coloque a navegação no mesmo local na página e não alterar sua aparência.

  • Sempre rotular ícones. Ilustrações por si só nem sempre são claras quanto à sua função.

    image0.jpg

menu