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

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

É claro que essas regras não levarão você de ruim a ótimo no tempo que leva para ler um artigo, mas se você aplicar o trabalho delas, isso fará uma grande diferença.

Faça as coisas no programa gráfico

É realmente raro você terminar um projeto e ir do início ao fim, mantendo cada mutação estética única nos arquivos de design. Infelizmente, os designers nem sempre estão perto de executar uma correção rápida.

Portanto, sempre chega um ponto em qualquer trabalho de front-end em que você acaba tendo que fazer alguns ajustes cosméticos relacionados. Ou você tenta fazer a marca de seleção que aparece quando a caixa de seleção está marcada ou você faz um layout de página que o PSD perdeu, Front-Enders muitas vezes acabam cuidando dessas tarefas aparentemente secundárias. 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 um substituto. Tweet

Para essas situações, você deve sempre usar um programa gráfico para o Maquetes . Não importa qual ferramenta você escolher: Photoshop, Illustrator, Fireworks, GIMP , o que seja. Apenas não tente projetar com seu próprio código. Gaste um minuto lançando um programa gráfico real e descubra como ele deveria se parecer, então vá para o código e faça acontecer. Você pode não ser um designer especialista mas você ainda obterá melhores resultados.

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

Seu trabalho não é impressionar com a única coisa que é sua marca de verificação; seu trabalho é combinar 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 se perguntar: 'Até que ponto 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 com o quanto da aparência final de um design é influenciada pela tipografia. Você ficaria muito surpreso em saber quanto tempo os designers gastam nisso. Este não é um esforço de “escolha e vá”; Leva muito tempo e esforço sério.

Se você acabar em uma situação em que realmente precisa escolher a fonte, você deve gastar uma quantidade razoável de tempo fazendo isso. Fique online e pesquise bem pares de fontes . Passe algumas horas testando essas fontes e certifique-se de que elas acabem com a melhor fonte para o projeto.

Esta fonte é adequada 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, etc. Não se esqueça de como é importante combinar a tipografia do design.

Além disso, certifique-se de usar as fontes corretas no lugar correto. Se o designer usa Georgia apenas para cabeçalhos e Aberto sem para o corpo, então você não deve usar Georgia para o corpo e Aberto sem para cabeçalhos. A tipografia pode facilmente fazer ou quebrar a estética. Gaste tempo suficiente certificando-se de que corresponde ao tipo de letra do seu designer. Será tempo bem gasto.

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

Provavelmente, você está fazendo pequenas partes do design geral.

A visão de túnel é uma armadilha comum para desenvolvedores de front-end. Eles não se concentram em um único detalhe, mas sempre olham para o quadro geral. Tweet

Um exemplo que tenho feito é sinalizar 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 de seleção em uma página de pesquisa, 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é o momento, ou dos arquivos de design e do layout 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 layout funciona com hierarquia . Quão próximos estão os títulos do corpo do texto? A que distância estão do texto sobre eles? Como parece que o designer está indicando quais elementos / títulos / corpos de texto estão relacionados e quais não estão? Eles geralmente farão essas coisas encadeando conteúdo relacionado, usando espaço em branco para indicar relações entre variáveis, 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 cumpre relações e hierarquia, e também garantir que esses conceitos sejam refletidos no produto final (mesmo 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.

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

Isso é excelente para melhorar seus projetos e / ou melhorar a execução de projetos de outros: se o projeto parecer usar espaçamento de 20 unidades, 40 unidades, etc., certifique-se de que cada espaçamento seja um múltiplo de 20 unidades.

Esta é uma maneira simples para 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. Donde no puedas hacer eso (como en lugares donde necesitas espacio adicional para indicar la jerarquía), haz que sean múltiplos exactos del espaciado que estás usando en otro lugar, por ejemplo dos veces tu predeterminado para crear una separación, tres veces para crear más , e assim.

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

Muitos desenvolvedores conseguem isso para conteúdo específico em 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 realmente não entendiam 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 estrutura. E sim, você gasta muito tempo nisso. Quando achar que seu trabalho está concluído, volte e meça o espaçamento para ter certeza de que alinhou e espaçou o máximo possível e, em seguida, teste seu código com muito conteúdo misto para ter certeza de que é flexível.

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

Não sou daquelas pessoas que pensam que todo projeto deve usar design minimalista, mas se você não tem certeza do seu design e precisa adicionar algo, menos é mais.

Menos é mais. Se o seu designer fez um bom trabalho no início, você deve evitar injetar suas próprias ideias de design. Tweet

O designer cuidou das coisas principais; você só precisa cuidar de questões menores. Se você não for muito bom em design, é melhor 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 das atenções e deixe o seu trabalho ficar em segundo plano.

O tempo zomba de nós

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

Eles descartam muito mais do que jamais viram. Eles costumam fazer muitas revisões e mexer em um projeto para chegar ao ponto em que deixam o cara no cubículo ao lado ver seu trabalho, não importa o cliente real. Geralmente, você não passa de uma tela em branco para um bom design em uma única etapa; há muitas iterações entre eles. As pessoas raramente fazem um bom trabalho até entenderem isso e permitirem isso em seu processo.

Se você acha que o design pode ser melhorado, verifique com seu designer. Eles podem já ter tentado uma abordagem semelhante e decidido ir 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 salve-o. Espere algumas horas (deixar durante a noite é ainda melhor), abra-o novamente e dê uma olhada. Você ficará surpreso com o quão diferente fica com olhos novos. Selecione rapidamente as áreas para melhoria. Eles serão tão claros que você se perguntará por que não os viu em primeiro lugar.

Na verdade, um dos melhores designers que já conheci leva essa ideia muito mais longe. Eu começaria fazendo três designs diferentes. Então, eu esperava pelo menos 24 horas, olhava para eles novamente e jogava tudo fora e começava do zero em uma sala. Em seguida, você permitiria um dia entre cada iteração à medida que ficava melhor e melhor. Somente quando ele o abrisse uma manhã e estivesse totalmente feliz, ou pelo menos o mais perto que um designer chega de ser totalmente feliz, ele o despachava para o cliente. Esse foi o processo que ele usou para cada projeto que fez e serviu muito bem para ele.

Eu não espero que você use então de longe, mas destaca como o tempo é útil sem 'olhos no design'. É parte integrante do processo de design e você 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 das letras pode não ser tão preciso quanto o do designer, e uma sombra CSS pode não corresponder exatamente a um de Photoshop , mas você ainda deve tentar chegar o mais perto possível. Para muitos aspectos do design, você pode realmente obter uma precisão de pixel perfeita. Fazer isso pode fazer uma grande diferença nos resultados financeiros. Um pixel daqui e dali 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ários Ferramentas que ajudam a comparar os 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 você precisa para fazer com que pareça ótimo.

Obter feedback

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

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

Permita que designers critiquem seu trabalho. Faça bom uso de suas críticas e não as antagonize.

Permita que designers critiquem seu trabalho. Faça bom uso de suas críticas e não as antagonize. Tweet

É preciso 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 o seu nível de habilidade a longo prazo.

Mesmo que tudo o que você precise fazer é uma simples marca de seleção, há muitas pessoas dispostas a ajudá-lo. Se for um amigo do designer ou um fórum online, procure pessoas qualificadas e obtenha seu feedback.

Construa um relacionamento produtivo e duradouro com seus designers. É vital para feedback, qualidade e execuções úteis. Tweet

Pode parecer demorado e causar atrito entre você e seus designers, mas 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 uma relação construtiva com seus designers. Vocês estão todos no mesmo barco, para obter os melhores resultados possíveis eles devem colaborar e comunicar todas as etapas do caminho. Vale a pena investir na construção de vínculos com seus designers, 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 atento ao design original e não tente melhorá-lo, apenas combine-o.
• A tipografia é enorme. O tempo que você gasta certificando-se de que está correto deve refletir sua importância.
• Evite a visão de túnel. Certifique-se de que suas adições se destacam da maneira que deveriam. Eles não são mais importantes apenas porque você os projetou.
• Relacionamentos e hierarquia - entenda como eles funcionam em seu design para que você possa implementá-los corretamente.
• O espaço em branco e o alinhamento são importantes. Torne-os precisos em pixels e uniformize-os em tudo que você adicionar.
• Se você não está confiante em suas habilidades, faça as adições tão minimamente projetadas quanto possível.
• Aproveite o tempo entre as avaliaçõ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 valente. 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 ser pelo menos competitivo em termos de design.

Você precisa entender o suficiente sobre os conceitos de design para identificar o que está acontecendo e aplicar corretamente o design ao seu produto final. Às vezes, você pode se safar com cópias ocultas se tiver um designer completo (e se ele for detalhado o suficiente para copiar em pixel).

No entanto, para fazer grandes projetos brilharem através de muitas variações de conteúdo, você precisa entender o que está passando pela cabeça do designer. Você não só precisa ver como o design se parece, mas também saber por que ele se parece com isso 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.