9 Pro Dicas para Website Design Todo mundo deve ler

1. Precedência (a arte de controlar o Eye)
Bom Web design, talvez até mais do que outro tipo de design, é toda sobre a informação. Uma das principais ferramentas em seu arsenal de fazer isso é prioridade. Ao navegar em um bom design, o usuário deve ser conduzido ao redor da tela pelo designer. Eu chamo isso de precedência, e ele &';. S sobre quanto peso visuais diferentes partes do seu projeto tem
Um exemplo simples de precedência é que na maioria dos locais, a primeira coisa que você vê é o logotipo. Isso é muitas vezes porque ele &'; s grande e definir o que foi demonstrado em estudos para ser o primeiro lugar as pessoas olham (canto superior esquerdo). Isso é uma coisa boa, pois você provavelmente quer um usuário saber imediatamente o que local é que eles estão vendo.
Mas precedência deve ir muito mais longe. Você deve direcionar o usuário &'; s olhos através de uma sequência de passos. Por exemplo, você pode querer o seu usuário para ir de logo /marca a uma declaração de posicionamento primário, ao lado de uma imagem gorducho (para dar a personalidade local), em seguida, para o texto do corpo principal, com navegação e uma barra lateral de tomar uma posição secundária em .. a sequência
que o usuário deve olhar é com você, o designer Web, para descobrir
Para conseguir o que eu chamo precedência você tem muitas ferramentas à sua disposição:
1. Posição — onde algo está em uma página influencia claramente em que ordem o usuário vê-lo.
2. &Mdash de cor; usando cores fortes e sutis é uma maneira simples de dizer ao seu usuário para onde olhar. Sims 3. Contraste — ser diferente faz coisas se destacam, sendo o mesmo torna secundário.
4. Tamanho — grande tem precedência sobre pouco (a menos que tudo é grande, caso em que pouco pode se destacar graças ao contraste)
5. Design Elements — se houver uma seta apontando para algo gigantesco, adivinhar onde o usuário vai olhar?
2. Espaçamento
Quando eu comecei a desenhar, eu queria preencher cada espaço disponível com coisas. Eu pensei que o espaço vazio parecia um desperdício. No entanto, eu encontrei o oposto é verdadeiro.
Espaçamento torna as coisas mais claras. Na Web design há três aspectos de espaço que você deve estar pensando:
espaçamento entre linhas: Quando você coloca para fora texto, o espaço entre as linhas afeta diretamente a forma como ele aparece legível. Muito pouco espaço torna mais fácil para o olho a se espalhar de uma linha para a próxima; muito espaço significa que quando você terminar uma linha de texto e ir para a próxima seu olho pode se perder. Então, você precisa encontrar um meio termo entre os dois. Você pode controlar o espaçamento entre linhas em CSS com o &'; line-height &'; selector. Geralmente I encontrar o valor padrão é geralmente muito pouco espaçamento para o meu gosto. Espaçamento entre linhas é tecnicamente chamado de líder, que deriva do processo que as impressoras costumava usar para separar linhas de texto nos velhos tempos — colocando barras de chumbo entre as linhas
Padding:. De um modo geral o texto nunca deve tocar outros elementos. Imagens, por exemplo, não deve ser um texto tocante, também não deveria fronteiras ou tabelas.
Preenchimento é o espaço entre os elementos e texto. A regra simples é que você deve sempre ter espaço lá. Há exceções, é claro, em particular se o texto for algum tipo de cabeçalho /grapic. Mas, como regra geral, colocando espaço entre o texto eo resto do mundo torna infinitamente mais legível e agradável
White Space:. Primeiro de tudo, espaço em branco doesn &'; t precisa ser branco. O termo refere-se simplesmente um espaço vazio em uma página (ou espaço negativo, uma vez que &'; s vezes chamado). O espaço em branco é usado para dar equilíbrio, proporção e contraste para uma página. Um monte de espaço em branco tende a tornar as coisas parecem mais elegante e sofisticado, por exemplo, se você vai para um site arquiteto caro, você &'; ll quase sempre ver um monte de espaço. Se você quiser aprender a usar espaços em branco efetivamente, passar por uma revista e olhar como anúncios são colocados para fora. Os anúncios de grandes marcas de relógios e carros, eles tendem a ter um monte de espaço vazio utilizado como um elemento de design. Sims 3. Navegação
Uma das experiências mais frustrantes que você pode ter em qualquer site está sendo incapaz de descobrir para onde ir ou onde você está. I &'; d gosta de pensar que para a maioria dos web designers, a navegação é um conceito que &'; ve conseguiu mestre, no entanto, há sempre um que prove que estou errado. Há dois aspectos de navegação para manter em mente:
Navigation:? Onde você pode ir
Existem algumas regras de senso comum para se lembrar aqui. Botões para viajar em torno de um site deve ser fácil de encontrar – em direcção ao topo da página e fáceis de identificar. Eles devem olhar como botões de navegação e ser bem descrito. O texto de um botão deve ser muito claro quanto ao local onde ele &'; s levá-lo. Além do senso comum, que &'; s também importante para tornar a navegação utilizável. Por exemplo, se você tiver um sub-menu de rolagem, garantindo que uma pessoa pode obter para os itens do sub-menu sem perder a rolagem é importante. Da mesma forma mudando a cor ou a imagem no rollover é excelente feedback para um usuário
Orientação:. Onde está você agora
Há muitas maneiras que você pode orientar um utilizador por isso não há desculpa para não?. Em sites pequenos, que poderia ser apenas uma questão de um grande título ou a &'; o &'; versão do botão apropriado no seu menu. Em um local maior, você pode fazer uso de trilhas de migalhas de pão, sub-títulos e um mapa do site para a página 4 verdadeiramente perdido.. Projeto para construir
vida ficou muito mais fácil desde que os Web designers a transição para layouts CSS, mas mesmo agora &'; s ainda importante pensar sobre como você está indo para construir um site quando você &'; re ainda em Photoshop. Considerar as coisas como: Como pode isso realmente ser feito
Você pode ter escolhido uma fonte incrível para sua cópia de corpo, mas é na verdade um tipo de letra padrão HTML? Você pode ter um design que parece bonito, mas é 1100px de largura e irá resultar em uma scrollng horizontal para a maioria dos usuários de internet. It &'; s importante saber o que pode e pode &'; t ser feito, o que é por isso que eu acredito que todos os Web designers também deve construir locais, pelo menos algumas vezes
O que acontece quando uma tela é redimensiona Descontos: você precisa repetir.? fundos? Como eles vão trabalhar? É o design centrado ou alinhado à esquerda?
Você está fazendo tudo o que é tecnicamente difícil?
Mesmo com posicionamento CSS, algumas coisas como alinhamento vertical ainda estão um pouco doloroso e às vezes melhor evitar inteiramente.
Poderia pequeno mudanças em seu projeto simplificam muito como você construí-lo?
Às vezes mover um objeto em torno de um projeto pode fazer uma grande diferença na forma como você tem que codificar o seu CSS mais tarde. Em particular, quando os elementos de um cruzeiro design uns sobre os outros, ele adiciona um pouco de complexidade para a compilação. Portanto, se seu projeto tem, digamos, quatro elementos e cada elemento é completamente separados uns dos outros, seria muito fácil de construir. Por outro lado, se todos os quatro sobrepõem uns aos outros, ele ainda pode ser fácil, mas provavelmente será um pouco mais complicado. Você deve encontrar um equilíbrio entre o que parece ser bom e pequenas mudanças que podem simplificar a sua construção.
Para grandes sites, em particular, você pode simplificar as coisas?
Houve um tempo em que eu costumava fazer botões de imagem para os meus sites. Portanto, se havia um botão de download, por exemplo, gostaria de fazer o download de uma imagem de pouco. No último ano ou assim, eu &'; ve passou a usar CSS para fazer meus botões e nunca olhou para trás. Claro, isso significa que o meu botões don &'; t sempre tem a flexibilidade que eu poderia desejar, mas a poupança em tempo de compilação de não ter que fazer dezenas de pequenas imagens de botão são enormes
5.. Tipografia
texto é o elemento mais comum de design, assim que &'; s não surpreende que um monte de pensamento tem ido para ele. It &'; s importante considerar as coisas como:
escolhas da pia batismal: Diferentes tipos de fontes dizem coisas diferentes sobre um projeto. Alguns parecem modernos, alguns olhar retro. Certifique-se de que você está usando a ferramenta certa para o trabalho
Tamanhos de fonte:. Anos atrás, era moda ter realmente pequeno texto. Felizmente, hoje em dia as pessoas começaram a perceber que o texto é feito para ser lido, não apenas olhou. Certifique-se de seus tamanhos de texto são consistentes, grande o suficiente para ser lido, e proporcionado para que as rubricas e sub-rubricas destacam-se Espaçamento adequadamente
:. Como discutido acima, o espaçamento entre linhas e de distância de outros objetos é importante a considerar. Você também deve estar pensando em espaçamento entre as letras, embora na Web este é de menor importância, como você don &'; t tem muito controle
Linha Comprimento: Não há nenhuma regra dura e rápida, mas geralmente suas linhas de texto. devia o &'; t ser demasiado longo. Quanto mais tempo eles são, mais difícil que eles estão a ler. Pequenas colunas de texto trabalho muito melhor (pense em como um jornal estabelece texto)
Cor:. Um dos meus piores hábitos é fazer o texto de baixo contraste. Parece bom, mas doesn &'; t ler tão bem, infelizmente
Paragrafando: Antes de começar a projetar, eu gostava de justificar o texto em tudo.. É feito para bordas agradáveis ​​em ambos os lados dos meus parágrafos. Infelizmente, texto justificado tende a criar lacunas estranhas entre as palavras onde eles têm sido auto-espaçada. Este isn &'; t agradável para seu olho durante a leitura, de modo a manter alinhado à esquerda, a menos que você acontecer para ter um corpo magia do texto que acontece ao espaço perfeitamente
6.. Usabilidade
Web design isn &'; t apenas sobre imagens bonitas. Com tanta informação e interação deve ser efectuada em um Web site, ele &'; s importante que você, o designer, prever tudo. Isso significa fazer o design do site Web utilizável
Nós &';. Ve já discutiram alguns aspectos de usabilidade – navegação, precedência e texto. Aqui estão três mais importantes:
aderindo aos padrões: Há certas coisas que as pessoas esperam, e não dando-lhes causa confusão. Por exemplo, se o texto tem um sublinhado, você espera que ele seja um link. Fazer de outra maneira não é uma boa prática a usabilidade. Claro, você pode quebrar algumas convenções, mas a maioria do seu Web site deve fazer exatamente o que as pessoas esperam que ele faça
Pense sobre o que os usuários vão realmente fazer: Prototipagem é uma ferramenta comum usada no projeto para realmente &'; tentar &';! um design. Isso é feito porque muitas vezes quando você realmente usar um desenho, você percebe pequenas coisas que fazem uma grande diferença. ALA tinha um artigo um tempo atrás chamado Nunca use um aviso quando você quer dizer Undo, que é um excelente exemplo de uma decisão de design pequena interface que pode tornar a vida sugar para um usuário
Pense sobre as tarefas do usuário:. Quando um usuário chega a seu site o que eles estão realmente tentando fazer? Listar os diferentes tipos de tarefas que as pessoas podem fazer em um site, como eles vão alcançá-los, e como é fácil você quiser fazer isso por eles. Isso pode significar ter tarefas muito comuns em sua página inicial (por exemplo, &'; &' começar a fazer compras ;, &'; aprender sobre o que fazemos, &'; etc.) ou pode significar garantir algo como ter uma caixa de busca sempre de fácil acesso. No final do dia, seu projeto Web é uma ferramenta para as pessoas usarem, e as pessoas don &';! T como o uso de ferramentas irritantes
7. Alinhamento
Manter as coisas alinhadas é tão importante em Web design como no design de impressão. Que &'; s não quer dizer que tudo deve estar em uma linha reta, mas sim que você deve passar por e tenta manter as coisas de forma consistente colocadas em uma página. Alinhando faz a seu projeto mais ordenada e digestível, bem como tornando-se parece mais polido.
8. Clarity (Nitidez)
Mantendo o seu projeto nítidas e claras é super importante em Web design. E quando se trata de clareza, &';. É tudo sobre os pixels Online em seu CSS, tudo será perfeito de pixels para que haja &'; s nada para se preocupar, no entanto, em Photoshop, não é assim. Para conseguir um design afiado você tem que:
mantenha arestas da forma estalou para pixels. Isso pode envolver manualmente a limpeza de formas, linhas e caixas, se você &';. Re criá-los no Photoshop Ganhe certeza que qualquer texto é criado usando a configuração de anti-aliasing apropriado. Eu uso o &'; Sharp &'; muito.
 Assegurar que o contraste é elevado para que as fronteiras estão claramente definidos.
 Over-fronteiras enfatizando apenas ligeiramente a exagerar o contraste.
9.
Consistência Consistência significa fazer tudo o jogo. Rubrica tamanhos escolhas da pia batismal, colorir, estilos de botões, espaçamento, elementos de design, ilustração estilos, opções de fotografias, etc. Tudo deve ser temáticos para fazer seu projeto coerente entre páginas e na mesma página.
Mantendo o seu design consistente é de cerca de ser profissional. Inconsistências em um projeto são como erros de ortografia em um ensaio. Eles só diminuir a percepção de qualidade. Seja qual for seu projeto parece, mantendo-o consistente sempre trazê-lo acima de um entalhe. Mesmo que &';. Sa design ruim, pelo menos, fazê-lo, um projeto consistente ruim
A maneira mais simples para manter a consistência é tomar decisões iniciais e cumpri-los. Com uma realmente grande site, no entanto, as coisas podem mudar no processo de design.
Ter um bom conjunto de folhas de estilo CSS também pode percorrer um longo caminho para fazer um projeto consistente. Tente definir tags básicas como e

de tal forma a tornar os seus padrões de corresponder adequadamente e evitar ter que se lembrar de nomes específicos de classe o tempo todo Restaurant  .;