Grandes sites sempre parecem combinar um ótimo design com um ótimo código. Como construir um site é uma tarefa bem simples, você descobre que muitas pessoas aprendem HTML e CSS e, se puderem aprender, podem projetar qualquer site que desejarem. Embora tecnicamente eles possam descobrir que há alguns erros importantes que eles cometem porque não desejam dedicar tempo para realmente aprender sobre o design.

Os programadores são designers por direito próprio, mas projetam códigos e sistemas maravilhosamente arquitetados. Para projetar algo visual é completamente diferente e só porque você tem um bom olho para o design não significa que você tenha uma boa idéia para aplicá-lo.

Como muitos programadores têm projetos pessoais, isso geralmente significa que eles precisam criar seus próprios sites. Se você é um programador freelancer, um dos maiores recursos que você pode ter é conhecer todo o processo de desenvolvimento web do começo ao fim, e isso inclui design.

Aqui estão oito erros que muitas vezes vejo desenvolvedores fazendo ao aplicar o design a um site.

1. Eu sei o que bom design parece

Pode ser difícil separar um olho para design com a capacidade de projetar. É muito parecido com as pessoas que podem olhar para a moda e dizer o que parece ser bom, mas não podem se vestir da mesma maneira.

Grandes designers simplesmente sabem o que é um bom design. Eles sabem o que vai funcionar e o que não funciona muitas vezes antes mesmo de pegar um lápis ou abrir o Photoshop. Muitas vezes é esse o caso, porque eles passaram anos passando por diferentes projetos e experimentando os próprios projetos. Assim como nenhum artista pode pegar um lápis e desenhar algo grande pela primeira vez, nenhum desenvolvedor deve acreditar que pode derrubar seu primeiro desenho do parque.

Da mesma forma que um programador pode estudar o código de outra pessoa, qualquer pessoa pode estudar um projeto e começar a entender por que ele funciona.

Dando uma olhada no belo Punchfork você pode ver o que torna o design tão bom.

  • Um ótimo uso de imagens. As imagens são sempre úteis para apimentar um design, mas muitas vezes os designers podem se deixar levar por elas. As imagens usadas no Punchfork são úteis para transmitir a mensagem.
  • Uma grade sólida. O grande uso de um layout de grade ajuda o olho a entrar em um fluxo.
  • Tipografia simples. Existem fontes que devem ser usadas na web e existem fontes que devem ser usadas com muita moderação na web (Papyrus, Comic Sans, etc.). Não há nada de errado em ficar com a Geórgia e a Helvetica por um design porque elas funcionam quando feitas corretamente.

Há muitas outras partes do design que o tornam tão maravilhoso. Quando você se deparar com um projeto que você gosta de tomar o tempo para estudar os elementos individuais, mas também reconhecer como eles se encaixam no todo. Um grande elemento de um design não torna todo o design excelente.

2. Seleção de cor

Seleção de cores pode ser uma dor. Eu odeio ter que escolher cores porque há tantas para escolher. Por alguma razão, a maioria dos desenvolvedores tende a manter uma paleta azul e branca. Talvez porque é usado em todos os lugares ou esses são os padrões do navegador, mas um ótimo design pode envolver uma gama de cores. Felizmente para nós pessoas com problemas de cor, há uma tonelada de ferramentas por aí que podem nos ajudar a montar algumas combinações de cores maravilhosas.

COLOURlovers é uma ótima comunidade onde as pessoas criam suas paletas de cores favoritas e as compartilham. Você pode navegar, salvar e votar nas suas paletas e cores favoritas. Em mais de uma ocasião, recorri a COLOURlovers para passar e salvar o dia com a seleção de cores.

Ao escolher uma paleta de cores, certifique-se de ficar com uma que se ajuste ao clima do seu site e seu conteúdo. Não escolha uma paleta simplesmente porque você a ama. Laranja e preto podem não ser as melhores cores para um site em torno do conceito de amor, por exemplo.

Raramente você precisará usar mais de 3-4 cores diferentes e, se decidir, precisará justificar sua escolha.

3. Centralize

Pode ser muito tentador centralizar um título. Parece ótimo em jornais, mas raramente funcionará bem na web, a menos que tudo esteja centrado. Sabemos que o texto alinhado à esquerda parece profissional e funciona com o fluxo natural dos olhos, então por que ir além das linhas?

O texto centralizado é melhor usado para títulos e linhas curtas de texto. Os usuários podem lê-los com facilidade porque as linhas são curtas, podem ser digitalizadas e não precisam de movimentos oculares repetidos. O texto centralizado também pode dar ao seu layout uma aparência estética com seu formato simétrico. Isso funciona para o texto que acompanha as imagens centralizadas. Se as imagens estiverem alinhadas à esquerda ou à direita, você deve alinhar à esquerda o texto para mantê-lo consistente com o layout.

Manchetes centralizadas funcionam nos jornais porque o texto é dividido em colunas, de modo que o título flui sobre toda a história. Se você está lidando apenas com uma coluna de texto, você deve ficar com um título alinhado à esquerda.

4. fonte smorgasbord

Quando você não está imerso no mundo da tipografia, Arial parece com Helvetica e Georgia se parece com o Times New Roman. Você sabe que existem outras fontes lá fora, como Comic Sans, mas você não vê a importância de ter que pagar por uma fonte quando você pode facilmente usar o que está disponível para você.

Com recursos como Typekit no entanto, a seleção de fontes tornou-se estranhamente semelhante à seleção de cores. Pode levar dias de pesquisa para encontrar a combinação certa quando você poderia facilmente ter usado uma fonte básica e terminar com o resto.

Não exagere com fontes. Como as cores, uma seleção limitada geralmente funciona melhor. Quando se trata de fontes, uma ou duas fontes diferentes podem ser suficientes para produzir um design bonito. Lembre-se de que você pode fazer muitas coisas diferentes com fontes. Você pode colocar em itálico, negrito, sublinhar, maiúscula ou minúscula.

5. Embale na informação

Quando você é um desenvolvedor, quanto mais informações você tiver em uma página, melhor. Quando codifico, gosto de fazê-lo em vários ecrãs, porque me permite ter tudo à minha frente. Infelizmente isso não funciona no design. Você não deve enfiar tanta informação em um espaço apertado quanto achar melhor, porque então o design se torna disfuncional.

O olho só pode absorver tanta informação de cada vez e se o propósito da maioria dos projetos é concluir uma tarefa, então escondê-la dentro de um milhão de outras informações não ajudará.

Enquanto sites ocupados podem ser eficazes, mais vezes do que não eles não são. Espaço em branco deve ser seu melhor amigo. Você precisa de partes vazias em seu design para dar ênfase às partes do design que são importantes.

6. Nenhuma pergunta feita

Nós todos sabemos que maravilhosa sensação de criar algo e ver no mundo real. Porque nós criamos, tende a haver um viés por trás disso que nos faz pensar que é melhor do que realmente é. Você precisa obter as opiniões dos outros para saber se o seu design é eficaz e se não for, você pode encontrar maneiras de melhorá-lo. Em vez disso, os desenvolvedores acham que não precisam pedir a opinião dos outros porque sabem como o design funciona para que tudo faça sentido para eles.

Você também descobrirá que, quando as pessoas pedem uma opinião sobre um projeto, elas não estão pedindo uma crítica, mas aprovação. Eles querem uma justificativa para as decisões que tomaram e essa não é a abordagem correta. Fazer perguntas realmente ajuda a encontrar problemas de usabilidade dos quais você talvez não tivesse conhecimento antes. Muitas vezes você fica tão preso em seu próprio projeto que tudo faz sentido para você, mas para uma nova pessoa seu projeto pode ser mais complicado do que um Cubo de Rubik.

7. Detalhes perder tempo

Com grandes designs, pode ser difícil perceber os pequenos detalhes que realmente fazem isso. Eles podem ser tão sutis que o observador casual olha além deles e continua. Para um desenvolvedor, os pequenos detalhes podem ser um desperdício de tempo porque não entendem o impacto geral que uma sombra pode ter em um elemento.

Pequenos detalhes por si só impactam apenas um elemento específico de um projeto, mas quando todos se juntam, você tem um design maravilhoso que flui. Sites como Dribbble Exponha como os pequenos detalhes podem funcionar em um design maior. No entanto, se você não é um designer por profissão, se concentrar muito nos detalhes pode atrasar o processo mais do que gostaria. No entanto, isso não significa que você não deve estar ciente de como os detalhes podem afetar um design.

Que outros erros comuns os desenvolvedores fazem quando se trata de design? Por favor, compartilhe nos comentários!