Dez principais regras de design de front-end para desenvolvedores

Como desenvolvedores front-end, nosso trabalho é, essencialmente, transformar projetos em realidade via código. Compreender e ser competente em design é um componente importante disso. Infelizmente, entender verdadeiramente o design de front-end é mais fácil falar do que fazer. A codificação e o design estético exigem alguns conjuntos de habilidades bem diferentes. Por causa disso, alguns desenvolvedores de front-end não são tão proficientes no aspecto de design quanto deveriam e, como resultado, seu trabalho é prejudicado.

Meu objetivo é fornecer algumas regras e conceitos fáceis de seguir, de um desenvolvedor de front-end para outro, que ajudarão você a ir do início ao fim de um projeto sem estragar o que seus designers trabalharam tanto (ou possivelmente até mesmo permitindo que você crie seus próprios projetos com resultados decentes).

É claro que essas regras não o levarão de ruim a magnífico no tempo necessário para ler um artigo, mas se você as aplicar ao seu trabalho, elas devem fazer uma grande diferença.

Faça coisas em um programa gráfico

É realmente raro você concluir um projeto e ir do início ao fim, mantendo todas as mutações estéticas nos arquivos de design. E, infelizmente, os designers nem sempre estão por perto para uma solução rápida.

Portanto, sempre chega um ponto em qualquer trabalho de front-end em que você acaba tendo que fazer alguns ajustes relacionados à estética. Seja fazendo a marca de seleção que aparece quando você marca a caixa de seleção ou fazendo um layout de página que o PSD perdeu, os front-enders geralmente acabam lidando com essas tarefas aparentemente menores. Naturalmente, em um mundo perfeito este não seria o caso, mas ainda não encontrei um mundo perfeito, portanto, precisamos ser flexíveis.

Para essas situações, você deve sempre usar um programa gráfico para maquetes. Não importa qual ferramenta você escolha: Photoshop, Illustrator, Fireworks, GIMP, o que for. Apenas não tente projetar a partir do seu código. Passe um minuto lançando um programa gráfico real e descobrindo como ele deve ficar, então vá para o código e faça acontecer. Você pode não ser um designer especialista, mas ainda assim terá melhores resultados.

Combine o design, não tente vencê-lo

Seu trabalho não é impressionar com o quão única é sua marca de seleção; seu trabalho é combiná-lo com o resto do design.

Aqueles sem muita experiência em design podem facilmente ser tentados a deixar sua marca no projeto com detalhes aparentemente menores. Por favor, deixe isso para os designers.

Em vez de perguntar “Minha marca de seleção parece incrível?” você deve estar se perguntando: "Quão bem minha marca de seleção corresponde ao design?"

Seu foco deve estar sempre em trabalhar com o design, não em tentar superá-lo.

Tipografia faz toda a diferença

Você ficaria surpreso ao saber o quanto a aparência final de um design é influenciada pela tipografia. Você ficaria surpreso ao saber quanto tempo os designers gastam com isso. Este não é um empreendimento “pegue e vá”, algum tempo e esforço sérios são necessários.

Se você acabar em uma situação em que realmente precisa escolher a tipografia, deve gastar um bom tempo fazendo isso. Fique online e pesquise bons pares de fontes. Passe algumas horas experimentando esses pares e certificando-se de que você tenha a melhor tipografia para o projeto.

Se você estiver trabalhando com um design, certifique-se de seguir as escolhas de tipografia do designer. Isso não significa apenas escolher a fonte. Preste atenção ao espaçamento entre linhas, espaçamento entre letras e assim por diante. Não negligencie a importância de combinar a tipografia do design.

Além disso, certifique-se de usar as fontes certas no local correto. Se o designer usa Georgia apenas para cabeçalhos e Open Sans para corpo, então você não deveria usar Georgia para corpo e Open Sans para cabeçalhos. A tipografia pode fazer ou quebrar a estética facilmente. Gaste bastante tempo certificando-se de que você está combinando com a tipografia do seu designer. Será tempo bem gasto.

O design front-end não tolera a visão de túnel

Você provavelmente estará fazendo pequenas partes do design geral.

Um exemplo que tenho usado é marcar um design que inclui caixas de seleção personalizadas, sem mostrá-las marcadas. É importante lembrar que as peças que você está fazendo são pequenas partes de um projeto geral. Faça suas verificações tão importantes quanto uma marca de seleção em uma página deve parecer, nem mais, nem menos. Não tenha visão de túnel sobre sua pequena parte e faça dela algo que não deveria ser.

Na verdade, uma boa técnica para fazer isso é fazer uma captura de tela do programa até agora, ou dos arquivos de design, e projetar dentro dele, no contexto em que será usado. Dessa forma, você realmente vê como isso afeta outros elementos de design na página e se ele se encaixa em sua função corretamente.

Relacionamentos e hierarquia

Preste atenção especial em como o design funciona com hierarquia. Quão próximos estão os títulos do corpo do texto? A que distância eles estão do texto acima deles? Como o designer parece estar indicando quais elementos/títulos/corpos de texto estão relacionados e quais não estão? Eles geralmente fazem essas coisas agrupando conteúdo relacionado, usando espaços em branco variados para indicar relacionamentos, usando cores semelhantes ou contrastantes para indicar conteúdo relacionado/não relacionado e assim por diante.

É seu trabalho garantir que você reconheça as maneiras pelas quais o design realiza relacionamentos e hierarquia e garantir que esses conceitos sejam refletidos no produto final (inclusive para conteúdo que não foi especificamente projetado e/ou conteúdo dinâmico). Essa é outra área (como a tipografia) em que vale a pena dedicar um tempo extra para garantir que você esteja fazendo um bom trabalho.

Seja exigente com espaços em branco e alinhamento

Esta é uma ótima dica para melhorar seus projetos e/ou implementar melhor os projetos de outros: Se o projeto parece estar usando espaçamentos de 20 unidades, 40 unidades, etc., certifique-se de que cada espaçamento seja um múltiplo de 20 unidades.

Esta é uma maneira realmente simples para alguém sem olho para a estética fazer uma melhoria significativa rapidamente. Certifique-se de que seus elementos estejam alinhados até o pixel e que o espaçamento em torno de cada borda de cada elemento seja o mais uniforme possível. Onde você não pode fazer isso (como lugares onde você precisa de espaço extra para indicar hierarquia), torne-os múltiplos exatos do espaçamento que você está usando em outro lugar, por exemplo, duas vezes o padrão para criar alguma separação, três vezes para criar mais , e assim por diante.

Muitos desenvolvedores conseguem isso para conteúdo específico nos arquivos de design, mas quando se trata de adicionar/editar conteúdo ou implementar conteúdo dinâmico, o espaçamento pode variar porque eles não entenderam realmente o que estavam implementando.

Faça o seu melhor para entender como o designer usou o espaço em branco e siga esses conceitos em sua construção. E sim, gaste tempo com isso. Quando você achar que seu trabalho está concluído, volte e meça o espaçamento para garantir que tenha alinhado e espaçado uniformemente o máximo possível e, em seguida, experimente o código com vários conteúdos variados para garantir que seja flexível .

Se você não sabe o que está fazendo, faça menos

Eu não sou uma daquelas pessoas que acha que todo projeto deve usar design minimalista, mas se você não está confiante em suas habilidades de design e precisa adicionar algo, menos é mais.

O designer cuidou das coisas principais; você só precisa fazer pequenos enchimentos. Se você não é muito bom em design, então uma boa aposta é fazer o mínimo possível para que esse elemento funcione. Dessa forma, você está injetando menos do seu próprio design no trabalho do designer e afetando-o o mínimo possível.

Deixe o trabalho do designer ocupar o centro do palco e deixe o seu trabalho ficar em segundo plano.

O tempo nos faz de tolos

Vou lhe contar um segredo sobre designers: 90% (ou mais) do que eles realmente colocam no papel, ou em uma tela do Photoshop, não é tão bom.

Eles descartam muito mais do que você já viu. Muitas vezes são necessárias muitas revisões e ajustes em um projeto para chegar ao ponto em que eles até deixariam o cara no cubículo ao lado ver seu trabalho, não importa o cliente real. Você geralmente não vai de uma tela em branco para um bom design em uma única etapa; há um monte de iterações no meio. As pessoas raramente fazem um bom trabalho até entenderem isso e permitirem isso em seu processo.

Então, como você implementa isso? Um método importante é levar tempo entre as versões. Trabalhe até que se pareça com algo que você gosta, em seguida, guarde-o. Dê algumas horas (deixá-lo durante a noite é ainda melhor), depois abra novamente e dê uma olhada. Você ficará surpreso com o quão diferente parece com novos olhos. Você identificará rapidamente as áreas de melhoria. Eles serão tão claros que você vai se perguntar como você os perdeu em primeiro lugar.

Na verdade, um dos melhores designers que conheci leva essa ideia muito além. Ele começaria fazendo três designs diferentes. Então, ele esperaria pelo menos 24 horas, olharia para eles novamente e jogaria tudo fora e começaria do zero na quarta. Em seguida, ele permitiria um dia entre cada iteração à medida que ficasse cada vez melhor. Somente quando ele abria uma manhã, e estava totalmente feliz, ou pelo menos, o mais próximo que um designer chega de totalmente feliz, ele a enviava para o cliente. Este foi o processo que ele usou para cada design que ele fez, e serviu muito bem para ele.

Não espero que você vá tão longe, mas destaca como o tempo sem “olhos no design” pode ser útil. É parte integrante do processo de design e pode fazer melhorias aos trancos e barrancos.

Pixels são importantes

Você deve fazer tudo ao seu alcance para corresponder ao design original em seu programa finalizado, até o último pixel.

Em algumas áreas você não pode ser perfeito. Por exemplo, seu controle sobre o espaçamento entre letras pode não ser tão preciso quanto o do designer, e uma sombra CSS pode não corresponder exatamente a uma sombra do Photoshop, mas você ainda deve tentar chegar o mais próximo possível. Para muitos aspectos do design, você realmente pode obter uma precisão de pixel perfeita. Fazer isso pode fazer uma grande diferença no resultado final. Um pixel aqui e ali não parece muito, mas aumenta e afeta a estética geral muito mais do que você imagina. Então fique de olho.

Existem várias [ferramentas] que ajudam a comparar designs originais com os resultados finais, ou você pode simplesmente tirar screenshots e colá-los no arquivo de design para comparar cada elemento o mais próximo possível. Basta colocar a captura de tela sobre o design e torná-la semitransparente para que você possa ver as diferenças. Então você sabe quanto ajuste você tem que fazer para acertar.

Obter feedback

É difícil ganhar um “olho para o design”. É ainda mais difícil fazer isso sozinho. Você deve buscar a opinião de outras pessoas para realmente ver como você pode fazer melhorias.

Não estou sugerindo que você pegue seu vizinho e peça conselhos, quero dizer que você deve consultar designers reais e deixá-los criticar seu trabalho e oferecer sugestões.

É preciso alguma coragem para fazê-lo, mas no final é uma das coisas mais poderosas que você pode fazer para melhorar o projeto a curto prazo e melhorar seu nível de habilidade a longo prazo.

Mesmo que tudo o que você precise ajustar seja uma simples marca de seleção, há muitas pessoas dispostas a ajudá-lo. Seja um amigo designer ou um fórum online, procure pessoas qualificadas e obtenha seus comentários.

Pode parecer demorado e pode causar atrito entre você e seus designers, mas no grande esquema das coisas, vale a pena. Bons desenvolvedores de front-end contam com informações valiosas de designers, mesmo quando não é algo que eles gostam de ouvir.

Portanto, é vital construir e manter um relacionamento construtivo com seus designers. Vocês estão todos no mesmo barco, então, para obter os melhores resultados possíveis, você precisa colaborar e comunicar cada passo do caminho. O investimento na construção de vínculos com seus designers vale a pena, pois ajudará todos a fazer um trabalho melhor e executar tudo no prazo.

Conclusão

Para resumir, aqui está uma pequena lista de dicas de design para desenvolvedores front-end:

• Design em um programa gráfico. Não projete a partir do código, nem mesmo das pequenas coisas.
• Combine o desenho. Esteja consciente do design original e não tente melhorá-lo, apenas combiná-lo.
• A tipografia é enorme. O tempo que você gasta certificando-se de que está certo deve refletir sua importância.
• Evite a visão de túnel. Certifique-se de que suas adições se destaquem apenas o quanto deveriam. Eles não são mais importantes apenas porque você os projetou.
• Relacionamentos e hierarquia: entenda como eles funcionam no design para que você possa implementá-los adequadamente.
• Espaço em branco e alinhamento são importantes. Torná-los precisos para o pixel e torná-los uniformemente em qualquer coisa que você adicionar.
• Se você não está confiante em suas habilidades, faça suas adições com o mínimo de estilo possível.
• Reserve um tempo entre as revisões. Volte mais tarde para ver seu trabalho de design com novos olhos.
• A implementação de pixels perfeitos é importante sempre que possível.
• Seja corajoso. Procure designers experientes para criticar seu trabalho.

Nem todo desenvolvedor front-end será um designer fantástico, mas todo desenvolvedor front-end deve pelo menos ser competente em termos de design.

Você precisa entender o suficiente sobre os conceitos de design para identificar o que está acontecendo e aplicar adequadamente o design ao seu produto final. Às vezes, você pode se safar com a cópia cega se tiver um designer completo (e se for detalhista o suficiente para realmente copiá-lo pixel por pixel).

No entanto, para fazer grandes projetos brilharem em muitas variações de conteúdo, você precisa entender o que está passando pela cabeça do designer. Você não precisa apenas ver como é o design, você precisa saber por que ele tem essa aparência e, dessa forma, você pode estar atento às limitações técnicas e estéticas que afetarão seu trabalho.

Portanto, mesmo como desenvolvedor front-end, parte de seu auto-aperfeiçoamento regular deve sempre incluir aprender mais sobre design.