Como desenvolvedores front-end, nosso trabalho é, essencialmente, transformar projetos em realidade por meio de código. Compreender e ser competente em design é um componente importante disso. Infelizmente, é mais fácil falar do que fazer realmente entender o design do front-end. Codificação e design estético requerem 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 como deveriam ser e, como resultado, seu trabalho sofre.

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

Claro, essas regras não vão levá-lo de ruim a excelente no tempo que leva para ler um artigo, mas se você aplicá-las ao seu trabalho, elas farão uma grande diferença.

Faça coisas em um programa gráfico

É realmente raro que você conclua um projeto e vá do início ao fim, mantendo cada mutação estética nos arquivos de design. E, infelizmente, os designers nem sempre estão por perto para procurar 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 muitas vezes acabam lidando com essas tarefas aparentemente menores. Naturalmente, em um mundo perfeito, esse não seria o caso, mas ainda não encontrei um mundo perfeito, portanto, precisamos ser flexíveis.

Um bom desenvolvedor front-end deve usar ferramentas gráficas profissionais. Não aceite substituto. Tweet

Para essas situações, você deve sempre usar um programa gráfico para maquetes. Eu não me importo qual ferramenta você escolhe: Photoshop, Illustrator, Fireworks, GIMP , tanto faz. 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 deveria ser, depois vá para o código e faça acontecer. Você pode não ser um designer especialista , mas você ainda assim obterá 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.

Os desenvolvedores devem corresponder ao design do front-end original o máximo possível. Tweet

Em vez de perguntar 'Minha marca de seleção parece incrível?' você deve estar se perguntando: 'O 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.

A tipografia faz toda a diferença

Você ficaria surpreso em saber quanto da aparência final de um design é influenciada pela tipografia. Você ficaria tão surpreso ao saber quanto tempo os designers gastam nisso. Este não é um empreendimento “pick-it-and-go”, é preciso muito tempo e esforço.

Se você acabar em uma situação em que realmente tem que escolher a tipografia, você deve gastar uma quantidade razoável de tempo fazendo isso. Fique online e pesquise bem pares de fontes . Passe algumas horas tentando esses pares e certificando-se de que você acabou com a melhor tipografia para o projeto.

Esta fonte é certa para o seu projeto? Em caso de dúvida, consulte um designer. Tweet

Se você estiver trabalhando com um design, certifique-se de seguir as opções de tipografia do designer. Isso não significa apenas escolher a fonte. Preste atenção ao espaçamento de linha, espaçamento de letra e assim por diante. Não se esqueça de como é importante combinar a tipografia do design.

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

Design de front-end não tolera visão de túnel

Você provavelmente fará pequenas partes do design geral.

A visão de túnel é uma armadilha comum para desenvolvedores de front-end. Não se concentre em um único detalhe, sempre olhe para o quadro geral. Tweet

Um exemplo que tenho feito é 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 design geral. Faça suas verificações tão importantes quanto uma marca 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 algo que não deveria ser.

Na verdade, uma boa técnica para fazer isso é tirar 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 verá como isso afeta outros elementos de design na página e se ele se encaixa corretamente em sua função.

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 indicar quais elementos / títulos / corpos de texto estão relacionados e quais não estão? Eles costumam fazer essas coisas encaixotando conteúdo relacionado, usando espaços em branco variáveis ​​para indicar relacionamentos, usando cores semelhantes ou contrastantes para indicar conteúdo relacionado / não relacionado e assim por diante.

Um bom desenvolvedor front-end respeitará os relacionamentos e a hierarquia do projeto. Um grande desenvolvedor irá entendê-los. Tweet

É seu trabalho certificar-se de reconhecer as maneiras pelas quais o design realiza relacionamentos e hierarquia e garantir que esses conceitos sejam refletidos no produto final (incluindo para conteúdo que não foi especificamente projetado e / ou conteúdo dinâmico). Esta é outra área (como a tipografia) onde vale a pena dedicar um tempo extra para ter certeza de que você está fazendo um bom trabalho.

este tipo de equilíbrio apresenta elementos que vêm de um ponto central ou criam um foco central.

Seja exigente com relação a espaços em branco e alinhamento

Esta é uma ótima dica para melhorar seus designs e / ou implementar melhor os designs de outros: se o design parecer 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 simples de alguém sem olho para a estética fazer uma melhoria significativa rapidamente. Certifique-se de que seus elementos estejam alinhados ao pixel e que o espaçamento ao redor de cada borda de cada elemento seja o mais uniforme possível. Onde você não puder fazer isso (como lugares onde você precisa de espaço extra para indicar hierarquia), faça-os múltiplos exatos do espaçamento que você está usando em outro lugar, por exemplo, duas vezes o seu padrão para criar alguma separação, três vezes para criar mais , e assim por diante.

Faça o seu melhor para entender como o designer usou os espaços em branco e siga esses conceitos em sua construção de front-end. Tweet

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 ir por toda parte porque eles não entendiam verdadeiramente 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 nisso. Depois de pensar que seu trabalho está concluído, volte e meça o espaçamento para garantir que você alinhado e uniformemente espaçado tudo o máximo possível, então experimente o código com muito conteúdo variado para ter certeza é flexível .

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

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.

Menos é mais. Se o seu designer fez um bom trabalho para começar, você deve evitar injetar suas próprias ideias de design. Tweet

O designer cuidou das coisas principais; você só precisa fazer pequenos enchimentos. Se você não for muito bom em design, 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 menos possível.

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

O tempo torna todos nós tolos

Vou lhe contar um segredo sobre designers: 90 por cento (ou mais) do que eles realmente colocam no papel, ou 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 alterações em um projeto para chegar ao ponto em que eles até mesmo deixem o cara no cubículo ao lado ver seu trabalho, não importa o cliente real. Você geralmente não passa de uma tela em branco para um bom design em uma única etapa; há várias iterações entre eles. As pessoas raramente fazem um bom trabalho antes de entender isso e permitir isso em seu processo.

Se você acha que o design pode ser melhorado, consulte o seu designer. É possível que eles já tenham tentado uma abordagem semelhante e tenham decidido contra ela. Tweet

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

Na verdade, um dos melhores designers que conheci leva essa ideia muito mais longe. Ele começaria fazendo três designs diferentes. Então, ele esperaria pelo menos 24 horas, olharia para eles novamente e jogaria todos fora e começaria do zero em um quarto. Em seguida, ele permitiria um dia entre cada iteração à medida que ficava melhor e melhor. Só quando ele o abria uma manhã, e estava totalmente feliz, ou pelo menos, o mais perto que um designer chega de totalmente feliz, ele o mandava para o cliente. Este foi o processo que ele usou para cada projeto que fez, e serviu muito bem para ele.

Eu não espero que você pegue este 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 Importam

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

Os desenvolvedores de front-end devem tentar combinar o design original até o último pixel. Tweet

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. Isso pode fazer uma grande diferença no resultado final. Um pixel aqui e ali não parece muito, mas acrescenta e afeta a estética geral muito mais do que você imagina. Portanto, fique de olho nisso.

Existem várias [ferramentas] que ajudam você a comparar designs originais com os resultados finais, ou você pode simplesmente tirar capturas de tela e colá-las 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 precisa fazer para acertar no ponto.

Obter feedback

É difícil ganhar um 'olho para o design'. É ainda mais difícil fazer isso sozinho. Você deve procurar o entrada de outros para realmente ver como você pode fazer melhorias.

qual é a segunda etapa do orçamento de capital?

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

Deixe os designers criticarem seu trabalho. Faça bom uso de suas críticas e não os antagonize. Tweet

É necessário um pouco de coragem para fazer isso, mas no final é uma das coisas mais poderosas que você pode fazer para melhorar o projeto a curto prazo e para melhorar seu nível de habilidade a longo prazo.

Mesmo que tudo o que você precise fazer 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.

Construa um relacionamento produtivo e duradouro com seus designers. É vital para um feedback útil, qualidade e execução. Tweet

Pode parecer demorado e pode causar atrito entre você e seus designers, mas no grande esquema das coisas, vale a pena. Bons desenvolvedores 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, para obter o melhores resultados possíveis você tem que colaborar e comunicar cada etapa do caminho. O investimento na construção de laços com seus designers vale a pena, pois ajudará a 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:

• Projete em um programa gráfico. Não crie a partir do código, nem mesmo as pequenas coisas.
• Combine com o design. Esteja ciente do design original e não tente melhorá-lo, apenas combine-o.
• 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: compreender Como eles funcionam no design para que você possa implementá-los corretamente.
• Espaços em branco e alinhamento são importantes. Torne-os precisos em pixels e uniformemente em tudo o 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 perfeita de pixels é importante sempre que possível.
• Seja corajoso. Procure designers experientes para criticar seu trabalho.

Nem todo desenvolvedor de front-end será um designer fantástico, mas todo desenvolvedor de 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 oculta se tiver um designer completo (e se você for orientado para os detalhes o suficiente para realmente copiar 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 a aparência do design, você precisa saber por que parece do jeito que é , e dessa forma você pode estar ciente das limitações técnicas e estéticas que afetarão seu trabalho.

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

Relacionado: Princípios de design: introdução à hierarquia