Aviso: Este será um guia longo, mas garanto que valerá a pena ler

Você já se viu diante de uma tela em branco, sem saber por onde começar? Já se sentiu preso em uma chamada com stakeholders quando lhe perguntaram: “Por que você fez essa escolha de design?”.
Já teve dificuldade para alcançar aquela sensação perfeita, parecida com a do Dribbble, na sua interface?

Se a resposta for SIM para alguma dessas perguntas, você está no lugar certo. Este guia é para você. Pode ser longo, mas abordará aspectos essenciais para ajudar você em sua jornada de design visual.

Por que é importante aprender design de UI?

O design de UI é um subconjunto da área de UX e uma etapa crucial na qual nossas ideias ganham vida, demonstrando a visão completa e o comportamento do produto. No design de UI, cada decisão e posicionamento de objeto deve ter um raciocínio claro e subjetivo. É essencial entender por que certas decisões foram tomadas.

O design é uma linguagem poderosa; designs esteticamente agradáveis evocam uma sensação de segurança e confiança nos usuários. Este guia tem como objetivo explicar os principais conceitos que ajudarão você a criar interfaces visualmente atraentes e eficazes.

1. Não comece pela casca

Ao começar a trabalhar em uma nova ideia interessante, adote uma abordagem que priorize a funcionalidade em vez do design. Isso ajudará você a se concentrar nos detalhes principais e deixar de lado os detalhes extras.

Por exemplo, digamos que você esteja criando um serviço de reserva de voos. Você poderia começar com um recurso como “buscar um voo”. Sua interface precisará de: um campo para a cidade de partida, cidade de destino, data de partida, data de retorno e um botão para realizar a busca.

2. Não se apegue a decisões de baixo nível

Ao trabalhar em um recurso, tente primeiro mantê-lo como uma versão de baixa fidelidade para que você possa se concentrar em outros cenários significativos em vez de se prender a sombras, ícones, cores, etc.

Esses detalhes sempre podem vir depois; o objetivo é primeiro acertar a ideia . Ao projetar em tons de cinza, você é forçado a usar espaçamento, contraste e tamanho para fazer todo o trabalho pesado. É um pouco mais desafiador, mas você terminará com uma interface mais clara, com uma hierarquia forte, fácil de aprimorar com detalhes posteriormente.

3. Escolha uma personalidade

Em termos de design, cada layout tem uma personalidade única. Por exemplo, um site bancário normalmente busca um tom seguro e profissional, enquanto uma startup emergente pode optar por uma estética lúdica e convidativa.

Abaixo estão algumas das principais coisas a considerar ao definir a personalidade certa:

• Escolha da fonte: A tipografia é crucial para a sensação de um design. Para elegância, experimente uma fonte serifada. Para um toque divertido, opte por uma fonte sem serifa arredondada. Uma fonte sem serifa neutra combina com um visual mais simples.
• Cores: Entender a psicologia das cores pode ser bastante benéfico. Embora confiar apenas na psicologia nem sempre seja prático, visto que a estética pessoal desempenha um papel significativo, é útil para justificar suas escolhas. Por exemplo, o azul frequentemente evoca sentimentos de segurança e familiaridade, o dourado transmite luxo e sofisticação, e o rosa traz uma vibração lúdica e suave.
• Raio da borda: Pode parecer um detalhe minúsculo, mas tem um impacto enorme na sensação geral. Um raio de borda pequeno é bastante neutro e não transmite muita personalidade por si só. Um raio de borda grande começa a parecer mais divertido, enquanto nenhum raio de borda passa uma sensação muito mais séria ou formal. Seja qual for a sua escolha, é importante manter a consistência.
• Linguagem: Embora não seja uma técnica de design visual em si, as palavras que você usa em uma interface têm uma enorme influência na personalidade geral. Usar um tom menos pessoal pode parecer mais formal ou profissional, enquanto usar uma linguagem mais amigável e informal torna o design mais amigável.

4. Limite suas escolhas

Quanto mais opções você tiver para decidir, mais angustiante o processo se tornará. Quando você projeta sem restrições, a tomada de decisões é uma tortura, pois sempre haverá mais de uma escolha certa.
Portanto, para evitar essa situação, defina sistemas com antecedência . Sistematize tudo: quanto mais sistemas você tiver, mais rápido poderá trabalhar.
Você precisará de sistemas para coisas como tamanho da fonte , espessura da fonte, altura da linha, cor, margem, preenchimento, largura, altura, sombras, raio da borda, largura da borda, opacidade, espaçamento… e qualquer outra coisa que economize seu tempo.

5. Enfatize com menos ênfase

Às vezes, você se depara com uma situação em que o elemento principal de uma interface não se destaca o suficiente, mas não há nada que você possa adicionar para dar a ele a ênfase necessária. Quando se deparar com situações como essa, em vez de tentar enfatizar ainda mais o elemento que deseja chamar a atenção, descubra como pode minimizar os elementos que estão competindo com ele.

6. Identifique o espaçamento em branco correto

O espaçamento também é um aspecto crucial de uma interface de usuário, que determina a aparência geral. Pouco espaçamento pode parecer desorganizado, e muito espaçamento pode parecer desequilibrado. Para alcançar esse equilíbrio perfeito, use sistemas de espaçamento que nem sempre calcule o número correto de margens e preenchimentos. As variáveis do Figma são úteis para alcançar essa consistência .

Uma abordagem melhor é começar dando espaço demais a algo e, em seguida, removê-lo até ficar satisfeito com o resultado. Se quiser facilitar as decisões de dimensionamento, certifique-se de que nenhum valor na sua escala esteja mais próximo do que cerca de 25%. Aqui está um exemplo de uma escala bastante prática construída com essa abordagem:

7. A proximidade é importante

Evite espaçamentos ambíguos. Quando grupos de elementos são separados por uma borda ou cor de fundo, fica óbvio quais elementos pertencem um ao outro. Sem separadores visíveis, a distinção fica mais difícil. Por exemplo, em um formulário com rótulos e entradas empilhados, se a margem abaixo do rótulo corresponder à margem abaixo da entrada, os elementos não parecerão conectados. Isso força o usuário a se esforçar mais para interpretar a interface do usuário e aumenta o risco de erros de entrada. A solução é aumentar o espaçamento entre cada grupo de formulários para esclarecer qual rótulo pertence a qual entrada.

Esse problema também surge no design de artigos com espaço insuficiente acima dos títulos das seções e em listas com marcadores, onde o espaço entre os marcadores corresponde à altura da linha de um único marcador. Não se trata apenas do espaçamento vertical; layouts horizontais também podem apresentar esse problema.

Sempre que você depender do espaçamento para conectar um grupo de elementos, certifique-se de que haja mais espaço ao redor do grupo do que dentro dele — interfaces difíceis de entender sempre parecem piores.

8. Mantenha o comprimento da sua linha sob controle

Ao estilizar parágrafos, é fácil cometer o erro de ajustar o texto ao layout em vez de tentar criar a melhor experiência de leitura. Geralmente, isso resulta em linhas muito longas, dificultando a leitura do texto.Para uma melhor experiência de leitura, faça seus parágrafos largos o suficiente para caber entre 45 e 75 caracteres por linha.

9. Use sombras para transmitir elevação

Sombras são mais do que apenas um efeito chamativo. Elas posicionam elementos em um eixo z virtual para criar profundidade. Sombras pequenas com um raio de desfoque estreito fazem com que um elemento pareça ligeiramente elevado, enquanto sombras maiores com um raio de desfoque maior fazem com que um elemento pareça mais próximo, atraindo mais atenção.

Assim como a cor, a tipografia, o espaçamento e o tamanho, definir um conjunto fixo de sombras acelera seu fluxo de trabalho e garante consistência. Você não precisa de muitas sombras — cinco opções geralmente são suficientes. Use sombras para transmitir elevação: comece com as sombras menores e maiores e, em seguida, preencha o meio com sombras progressivamente maiores.

À medida que um objeto se afasta de uma superfície, a pequena sombra escura criada pela falta de luz ambiente desaparece lentamente. As sombras podem ter duas partes, portanto, se você for usar a técnica de duas sombras em seus projetos, certifique-se de torná-la mais sutil para sombras que representem uma elevação mais alta.

10. Não aumente a escala dos ícones

Tudo tem um tamanho ideal. Se você estiver projetando algo que exija ícones grandes, como uma seção de “recursos” em uma landing page, você pode instintivamente aumentar seus ícones SVG. Enquanto imagens vetoriais mantêm a qualidade quando redimensionadas, ícones projetados para 16 a 24 pixels parecerão pouco profissionais quando ampliados para 3 a 4 vezes o tamanho ideal, parecendo sem detalhes e desproporcionalmente grandes.

Se você só tiver ícones pequenos, tente envolvê-los em uma forma com uma cor de fundo. Isso mantém o ícone mais próximo do tamanho pretendido, mas ainda preenche o espaço maior.

11. Use menos bordas

Quando precisar criar uma separação entre dois elementos, evite imediatamente usar bordas. Embora bordas sejam uma ótima maneira de distinguir dois elementos, elas não são a única, e usar muitas delas pode fazer com que seu design pareça confuso e sobrecarregado.

12. Pense fora da caixa

A maioria das pessoas tem noções preconcebidas sobre a aparência de certos componentes. No entanto, só porque fomos condicionados a acreditar que existe apenas uma maneira de projetar algo não significa que isso seja verdade.

Por exemplo, um menu suspenso: você pode imaginar uma caixa branca com uma sombra sutil e uma lista de links empilhados dentro. Mas quem disse que um menu suspenso precisa ser uma lista de links sem graça? É apenas uma caixa flutuante na tela — você pode fazer o que quiser com ela. Divida-a em seções, use várias colunas e adicione texto de apoio ou ícones coloridos. Faça algo divertido com ele! As possibilidades são ilimitadas.