Como abordar o design para desenvolvedores

Mesmo que possam estar trabalhando nos mesmos projetos e produtos, desenvolvedores e designers geralmente trabalham separados uns dos outros em silos. O design é muitas vezes considerado pelos desenvolvedores como algo secundário, sem importância quando comparado com a funcionalidade de um produto.

Esse tipo de pensamento pode ser prejudicial para a relação desenvolvedor-designer. Não ter uma compreensão básica de design pode atrasar os desenvolvedores em suas carreiras ou impedi-los de buscar projetos apenas porque não têm um designer a bordo.

Por que os desenvolvedores devem aprender design

Embora o design e o desenvolvimento sejam muitas vezes considerados disciplinas separadas, existem pessoas por aí que dominam ambos. Mesmo que alguém esteja interessado apenas em ser designer ou desenvolvedor – não ambos – é valioso aprender pelo menos o básico da outra disciplina.

Existem algumas razões pelas quais os desenvolvedores podem querer aprender design, ou pelo menos desenvolver uma base básica de conhecimento de design.

Em primeiro lugar, equipes pequenas podem não ter um designer dedicado. Além disso, existem desenvolvedores por aí que querem lidar com projetos inteiramente por conta própria, que não podem se dar ao luxo de contratar um designer (ou querem gastar o dinheiro em outro lugar). Aprender a projetar seus próprios produtos, pelo menos bem o suficiente para sobreviver até que um designer possa ser contratado, é um recurso inestimável.

A outra grande razão para os desenvolvedores aprenderem design é para que possam trabalhar de forma mais eficaz com os designers. É incrivelmente frustrante para um designer entregar um arquivo totalmente projetado para um site ou aplicativo que eles esperam que seja perfeito em pixels no produto final, apenas para descobrir que seu design foi alterado significativamente pelo desenvolvedor que o codifica.

Se os desenvolvedores não entendem o básico do design, eles podem ignorar pequenos detalhes que tornam uma interface do usuário particularmente amigável e sabotam involuntariamente a experiência do usuário do projeto. Quando os designers enviam de volta toneladas de correções, isso pode prejudicar a relação desenvolvedor-designer, sem mencionar a desaceleração da conclusão de um projeto.

A fim de melhorar os relacionamentos e o trabalho em equipe entre equipes interdisciplinares, os desenvolvedores fariam um favor a si mesmos aprendendo a ver os designs pelos “olhos de um designer” em vez de olhá-los apenas de uma perspectiva de desenvolvimento – dominar essa habilidade melhorará muito seus projetos.

Criando uma mentalidade de design

Com muita frequência, os desenvolvedores que estão aprendendo a projetar se concentram muito na estética dos designs que gostam e desejam imitar, em vez dos princípios subjacentes que suportam esses designs. Eles veem coisas como a cor e o tamanho de um botão, uma fonte específica ou a maneira como as bordas são usadas sem entender as razões por trás dessas escolhas.

Eles começam a borrifar tinta nas paredes e decorar o espaço sem entender o propósito dos espaços que estão decorando (ou mesmo certificando-se de que coisas como encanamento e eletricidade estão terminadas), por assim dizer.

É importante entender e respeitar os princípios por trás do motivo pelo qual os designers tomam as decisões que tomam. Qualquer pessoa nova em design precisa de uma compreensão firme dos princípios e teorias que compõem um bom design - coisas como Princípios da Gestalt e hierarquia visual básica - antes de mergulhar e começar a pulverizar tinta em todos os lugares.

Dito isso, também é comum que novos designers, tenham ou não experiência em desenvolvimento, fiquem atolados na teoria. Eles passam tanto tempo aprendendo e pensando sobre as coisas que nunca chegam a aplicar o que estão aprendendo.

Tanto designers quanto desenvolvedores tendem a ser perfeccionistas. Mas lançar projetos antes que eles sejam perfeitos (já que provavelmente nunca serão) é importante para o processo. Especialmente os novos designers precisam superar suas inseguranças, colocar seu trabalho lá fora e aprender com o feedback que recebem.

Uma das melhores maneiras de realmente aprender design é tentar recriar os designs dos outros. Separar o que funciona e o que não funciona e descobrir por que um design específico é atraente é uma das habilidades mais valiosas que um novo designer ou desenvolvedor pode aprender. Colocar um toque único em um design existente é comum na indústria (evidenciado pelo recurso “Rebound” do Dribbble).

Projetando no navegador

Muitos designers resistem a projetar diretamente no navegador, pois geralmente significa que eles precisam se sentir confortáveis ​​escrevendo pelo menos código HTML e CSS básico. Essa é a razão exata pela qual muitas vezes é uma ótima opção para desenvolvedores entrarem no design - eles já se sentem à vontade para escrever código.

Existem ferramentas que podem ajudar no design no navegador e podem facilitar a vida de designers e desenvolvedores. Plugins de navegador simples estão disponíveis para tudo, desde a seleção de paletas de cores até a exploração do código CSS e HTML de outro site.

Existem também ferramentas mais complexas, como o Figma, que agem como uma ferramenta de design com todos os recursos diretamente no navegador. O Figma permite que os designers colaborem, enviem recursos para as partes interessadas (e até mesmo que façam alterações no conteúdo e na cópia dos designs) e permite que os desenvolvedores tenham acesso aos designs reais em tempo real. É uma ótima opção para desenvolvedores-designers que desejam criar designs e sistemas de design que podem ser dimensionados ao longo do tempo.

O Webflow é outra opção de design no navegador que os desenvolvedores podem adorar. Enquanto a interface de design é visual, o código exportado é limpo, semântico CSS e HTML que os desenvolvedores irão apreciar (nem todas as ferramentas de design visual exportam código limpo). O Webflow inclui ferramentas para design e layout, além de ferramentas de CMS e comércio eletrônico integradas, além de opções de hospedagem.

Uso de cor, tipografia e layout

Antes de mergulhar nos princípios visuais de cor, tipografia e layout, é importante falar sobre usabilidade básica. O design mais esteticamente agradável do mundo é inútil se não for utilizável.

Um dos princípios de usabilidade mais importantes é a ideia de consistência ou previsibilidade. Os designs devem ser previsíveis o suficiente para que os usuários possam entender intuitivamente como usá-los. Por exemplo, texto sublinhado em azul para links clicáveis, menus de navegação completos e bem rotulados etc. O espaçamento entre elementos, tipografia e esquema de cores também deve ser consistente.

Outros princípios de usabilidade que devem ser considerados em todos os projetos de design incluem coisas como prevenção de erros (e mensagens de erro informativas quando ocorrem), linguagem familiar (use a linguagem com a qual as pessoas estão acostumadas, em vez de alternativas “bonitinhas” ou criativas que podem não ser claras ), flexibilidade e eficiência e ajuda facilmente disponível. O Nielsen Norman Group possui heurísticas de usabilidade adicionais que também devem ser lembradas.

As avaliações de usabilidade devem ser conduzidas durante todo o processo de design e desenvolvimento para garantir que o produto funcione da maneira que a equipe de design e desenvolvimento pretendia e que os usuários não fiquem confusos. As avaliações heurísticas envolvem a comparação de uma lista de princípios de design predefinidos que um produto deve seguir com o produto real para ver onde ocorrem os desvios (e depois corrigir esses desvios).

Uma vez que a usabilidade tenha sido completamente compreendida em relação ao produto em questão, os designers-desenvolvedores podem passar para os aspectos mais visuais do design.

Teoria básica de cores

A teoria das cores é um dos aspectos mais complexos do design visual. Mudar ligeiramente os tons pode alterar completamente o impacto visual e o efeito emocional de uma cor. É uma razão pela qual muitos designers que estão na indústria há anos ainda lutam com cores.

Embora muitos livros tenham sido escritos sobre a teoria das cores, existem alguns princípios básicos que designers-desenvolvedores podem aprender para começar. Combine-os com qualquer uma das inúmeras ferramentas de design de cores disponíveis e uma paleta de cores agradável pode ser criada com bastante facilidade.

Primeiro, a diferença entre cores quentes, cores frias e neutras. As cores quentes incluem vermelho, laranja e amarelo. As cores quentes geralmente serão vibrantes e energizantes. Cores frias incluem verde, azul e roxo. Essas cores costumam ser mais calmas e relaxantes.

Os neutros incluem branco, preto, cinza, marrom e bege. Adicionar branco, preto ou cinza a cores quentes ou frias altera seu significado e impacto. O branco clareia as cores e geralmente torna seu efeito menos intenso ou mais positivo (por exemplo, o roxo é considerado uma cor misteriosa e real, enquanto o lilás é frequentemente associado à primavera e à felicidade). O cinza silenciará as cores e poderá diminuir seu impacto. O preto escurece as cores e pode fazê-las parecer mais conservadoras (considere o impacto diferente de uma cor como azul brilhante versus azul marinho).

Uma vez que um designer tenha uma compreensão básica dos significados das cores, ele pode usar ferramentas como Coolors, Design Seeds ou Colormind para criar uma paleta final e coordenada para seu design.

Usando a cor HSL

Quando um designer pensa em cores da web, geralmente pensa em valores hexadecimais. Embora isso tenha se tornado o padrão do setor em termos de cores da Web, os desenvolvedores podem achar que trabalhar com valores de cores HSL faz mais sentido.

Para a maioria das pessoas (incluindo designers), os valores hexadecimais aparentemente não têm correlação entre si. Duas cores que parecem muito semelhantes podem ter valores hexadecimais completamente diferentes. Por exemplo, #68B4D4 e #92C8E0 são tons de azul bastante semelhantes (um é simplesmente um pouco mais brilhante e mais claro que o outro) e, no entanto, seus valores hexadecimais não têm correlação aparente.

Seus valores de HSL, no entanto, mostram como eles estão intimamente relacionados: #68B4D4 torna-se HSL (198, 58%, 62%) e #92C8E0 torna-se HSL (198, 56%, 73%). O primeiro número na sequência (198 neste caso) indica a tonalidade específica. O segundo número é a porcentagem de saturação (quão brilhante ou vibrante é a cor). O terceiro número é a porcentagem de luminosidade (ou branco adicionado) da cor.

Como as correlações entre os valores de cores são facilmente vistas com HSL versus hex, os desenvolvedores geralmente descobrem que a manipulação de cores via código com HSL é significativamente mais fácil.

Princípios de tipografia

A tipografia é outra área que pode atrapalhar até designers experientes. Mas, como a teoria das cores, existem algumas ótimas ferramentas que podem ajudar.

A hierarquia tipográfica é uma das primeiras coisas que um designer-desenvolvedor deve aprender. A relação entre os diferentes elementos de tipo em um design é vital para tornar esse design mais utilizável.

No mínimo, um design deve ter três níveis de hierarquia tipográfica: títulos, subtítulos e fontes do corpo. O título deve ser o mais visualmente proeminente, as legendas vêm em seguida e, em seguida, a fonte do corpo, que deve ser altamente legível.

Muitos novos designers se concentram demais no tamanho da fonte ao criar sua hierarquia e não o suficiente no estilo da fonte. Às vezes, em vez de tornar um título significativamente maior do que uma legenda, por exemplo, um título pode ser colocado em negrito ou capitalizado, enquanto a legenda é deixada em maiúsculas e com peso normal. A cor também pode ser usada para diferenciar entre legendas e títulos e entre esses elementos e o corpo do texto.

Combinar fontes diferentes também pode confundir muitos designers e, no entanto, é uma maneira comum de criar uma hierarquia visual. Eles incluem a escolha de fontes complementares (os opostos geralmente se atraem, mas até certo ponto, quão bem as fontes combinam deve ser determinada com base na intuição que é aprimorada ao longo do tempo), escolhendo fontes apropriadas (não use Comic Sans em um documento legal, por exemplo exemplo, ou uma fonte de exibição para o tipo de corpo que não será legível em tamanhos menores) e criar contraste entre os tipos de letra (não use dois que sejam muito semelhantes).

Outra maneira simples de combinar fontes é escolher fontes de famílias de fontes grandes. Existem até famílias por aí que incluem versões de exibição, serifa e sem serifa que funcionam bem juntas (como Mrs Eaves e Mr Eaves, Fedra ou Museo e Museo Sans). Essa pode ser a maneira mais fácil de começar a realmente experimentar a combinação de fontes, pois elas foram projetadas para ficarem bem juntas.

Ao trabalhar com hierarquias tipográficas maiores (como adicionar H1, H2, H3, H4, etc.), é importante seguir algum tipo de razão na escala tipográfica. A sequência de Fibonacci é uma escala possível para começar, embora existam outras escalas tipográficas estabelecidas.

Uma escala comum que é usada em ambas as tipografias (e geralmente em layouts de design) consiste em 4, 8, 16, 24, 36, 48, 72, 108, etc. Essas figuras podem ser combinadas de várias maneiras para criar um design com visual agradável proporções (por exemplo, uma fonte de 24 pixels combinada com uma altura de linha de 36 pixels).

Princípios Básicos de Layout

Desde o início da web, existem certos padrões de layout que surgiram como “padrões”. Os exemplos incluem a navegação principal na barra lateral superior, esquerda ou direita com informações adicionais ou opções de navegação e o conteúdo do corpo ocupando o restante do espaço.

Embora existam desvios definitivos desse layout básico (não navegação superior, sem barra lateral, duas barras laterais, etc.), isso geralmente é uma aposta bastante segura ao criar um novo layout. O desvio desse padrão básico só deve ser feito com um propósito, especialmente por designers-desenvolvedores novos e inexperientes.

Criar um design que seja previsível – isso geralmente significa consistente – faz muito pela usabilidade de um produto. O desvio do que um usuário espera ver ao usar um produto só deve ser feito quando os ganhos de usabilidade forem maiores que as perdas.

É melhor não usar títulos azuis em negrito de 72 pixels em uma página e títulos vermelhos de 36 pixels em outra para o mesmo tipo de conteúdo, pois a consistência do layout é fundamental. Da mesma forma, o espaçamento (preenchimento) entre o título e o corpo do texto de 36 pixels em uma seção e 32 pixels em outra criará inconsistência visual. Embora uma pessoa possa não entender imediatamente por que a diferença é chocante, ela a sentirá.

Semelhante à escala tipográfica mencionada acima, elementos de espaçamento em uma escala de 4, 8, 16, 24, 36, 48, 72 ou 108 pixels criarão um design visualmente agradável. É uma boa ideia usar espaço suficiente entre os elementos, dar-lhes espaço para respirar; designers mais novos geralmente evitam espaços em branco e podem acabar com designs que parecem confusos e esmagadores.

Alguns podem questionar por que a escala está espaçada do jeito que está. Por que há apenas uma diferença de 4 pixels entre os dois primeiros números, mas um salto de 36 pixels entre os dois últimos? A razão é simples: em pequenas escalas, um aumento de 4 pixels é facilmente identificável (8 pixels é duas vezes maior que 4, o que pode ser facilmente discernido). Mas com números maiores, a diferença entre 72 pixels e 76 pixels não é facilmente vista. Diferenças maiores são mais fáceis de ver à medida que os tamanhos aumentam.

O espaçamento consistente é uma das razões pelas quais as abordagens de design baseadas em grade se tornaram tão populares. Começar com uma grade (geralmente 12, 16 ou 24 colunas) oferece aos designers uma estrutura para trabalhar que manterá tudo consistente. As calhas embutidas entre as colunas também ajudam a garantir que os diferentes elementos de design e o conteúdo dentro deles tenham algum espaço para respirar.

Conclusão

Designers e desenvolvedores devem se concentrar em expandir seu conjunto de habilidades para promover suas carreiras. O tempo que os desenvolvedores gastam aprendendo os princípios básicos do design economizará tempo no futuro quando estiverem trabalhando com designers ou criando seus próprios produtos.

Uma compreensão dos princípios básicos do design – princípios de usabilidade, teoria das cores, tipografia, layout e UX – também tornará os desenvolvedores melhores no desenvolvimento . Quando eles podem ver por que os designers fazem as escolhas que fazem, os desenvolvedores podem trabalhar melhor com os designers para criar produtos verdadeiramente estelares.

Leia mais no Blog Toptal Design:

• Os princípios do design e sua importância
• Quanta codificação os designers devem saber?
• Um espectro de possibilidades: o guia de cores da interface do usuário Go-To
• Impulsione seu UX com estes princípios de design de interação bem-sucedidos
• Fundamentos do Design – Um Guia para a Hierarquia Visual (com Infográfico)