Bem-vindo! Sou Sparsh Malhotra e hoje estou animado para compartilhar com vocês um tópico que é muito importante para mim - design de interface do usuário. Como desenvolvedor de front-end, sempre me interessei em criar interfaces de usuário impressionantes, mas, sejamos honestos, nem sempre foi fácil.

Eu costumava desejar poder fazer minhas ideias parecerem incríveis sem depender de um designer, mas toda vez que tentava projetar algo sozinho, ficava frustrado e desistia. Você pode relatar? Se assim for, você não está sozinho.

É por isso que estou aqui para dizer que projetar interfaces de usuário bonitas não precisa ser uma luta tão grande. Você pode aproveitar seu ponto de vista exclusivo como desenvolvedor sobre como os consumidores se envolvem com o software para criar melhores interfaces de usuário. E seguindo as últimas tendências e técnicas de design de interface do usuário, você pode ser menos dependente do designer real da equipe.

Nesta série, “Como usar a interface do usuário em 2023”, discutirei as estratégias e os conselhos que aprendi e que me permitiram criar interfaces de usuário bonitas que os usuários adoram. Fornecerei dicas e exemplos úteis para você começar em qualquer coisa, desde paletas de cores até tipografia, design de layout e muito mais.

Então, se você é um desenvolvedor experiente ou está apenas começando, prepare-se para levar suas habilidades de design de interface do usuário para o próximo nível. Você está pronto para embarcar nessa jornada comigo? Ótimo! Vamos!

PARTE 1 — Vamos começar do zero

A primeira etapa é importante: escolher recursos em vez de layout

O que você projeta primeiro ao iniciar o design de um novo aplicativo? Se for a barra de navegação no topo da página, você está cometendo um erro.

Projetar o shell do aplicativo, que inclui determinar o layout da página, como onde colocar os itens de navegação, se deve ter uma navegação superior ou uma barra lateral, se deve usar um contêiner ou largura total para o conteúdo da página e onde colocar o logotipo, não é o melhor ponto de partida. Essa abordagem pode levar a ficar preso no processo de design e negligenciar outros aspectos essenciais do design.

Um aplicativo é essencialmente um grupo de recursos.

Sem ter uma ideia clara dos recursos do aplicativo e de como eles funcionam juntos, é difícil tomar decisões informadas sobre os elementos de design que funcionarão melhor. Portanto, é essencial focar primeiro nos recursos do aplicativo e coletar informações sobre como eles irão interagir antes de tomar qualquer decisão sobre o design do aplicativo.

Detalhes podem esperar

Nos estágios iniciais do design de recursos, é fácil ficar atolado em detalhes menores, como tipos de letra e sombras. Embora esses elementos sejam importantes, é mais importante focar no objetivo mais amplo do recurso e como ele se encaixa no design geral. Somente quando os elementos principais estiverem no lugar, você deve começar a refinar os detalhes para garantir que eles se alinhem com os objetivos mais amplos do projeto. Ao priorizar os aspectos principais primeiro, você pode criar um design mais coeso e eficaz, que atenda melhor às necessidades do usuário.

Os projetos de baixa fidelidade permitem um processo de projeto rápido, permitindo que você avance rapidamente para a construção do produto final. Use esboços e wireframes para ideias e, em seguida, refine o design escolhido em formatos de maior fidelidade. Ao priorizar a velocidade e usar maquetes de baixa fidelidade para explorar ideias, você pode desenvolver rapidamente um design final mais eficaz.

Escolha sua voz de design

Os designs são como personalidades – eles comunicam certas características e valores. Um site de banco pode ter como objetivo uma aparência profissional e segura, enquanto uma startup da moda pode ter uma vibe lúdica e divertida. É importante escolher uma personalidade de design que se alinhe com a mensagem da marca e o público-alvo.

Embora possa parecer abstrato, atribuir uma personalidade a um design é, na verdade, fundamentado em fatores sólidos e concretos:

Escolha da Fonte

A tipografia desempenha um papel importante na determinação de como um design se sente.

• Se você deseja uma aparência elegante ou clássica, pode incorporar uma fonte serifada em seu design:

• Para uma aparência divertida, você pode usar uma sans serif arredondada:

• Se você deseja um visual mais simples ou deseja contar com outros elementos para fornecer personalidade, um sem serifa neutro funciona muito bem:

Os designers não precisam ser especialistas em psicologia da cor para usá-la com eficiência. Prestar atenção em como as cores fazem você se sentir e selecionar aquelas que se alinham com a personalidade e a mensagem do design pode criar um impacto visual poderoso.

• O azul é seguro e familiar – ninguém reclama do azul:

• O ouro pode dizer “caro” e “sofisticado”
• Rosa é um pouco mais divertido e não tão sério

Arredondar os cantos em um design pode parecer um detalhe menor, mas pode afetar significativamente a sensação e a estética geral.

• Um pequeno raio de borda é bastante neutro e não comunica muito de uma personalidade por conta própria
• Um grande raio de borda começa a parecer mais divertido
• Nenhum raio de borda parece muito mais sério ou formal

Use sistemas de design predefinidos

É fácil cair na armadilha de pensar que ter infinitas opções de cores, fontes e outros elementos de design é bom. Afinal, ter mais opções significa mais possibilidades de criar algo verdadeiramente único, certo? Bem, não exatamente.

Na realidade, ter muitas opções pode atrapalhar seu processo de design. Quando você tem tantas decisões a tomar, cada uma parece mais assustadora do que a anterior. Você se vê angustiado até mesmo com os menores detalhes, como se deve usar tamanho de fonte 12px ou 13px ou se uma caixa de sombra deve ter 10% ou 15% de opacidade. Com tantas possibilidades, é fácil se sentir sobrecarregado e ficar preso em um estado de indecisão.

• Definir sistemas com antecedência

Não use o seletor de cores toda vez que precisar escolher um novo tom de roxo - escolha entre um conjunto de 8 a 10 tons escolhidos com antecedência.

Da mesma forma, não ajuste o tamanho da fonte um pixel por vez até que pareça perfeito. Defina uma escala de tipo restritiva com antecedência e use-a para tomar decisões futuras sobre o tamanho da fonte.

• Projete eliminando

Comece adivinhando qual tamanho funcionaria melhor, talvez 16px. Em seguida, compare-o com as opções de ambos os lados, como 12px e 24px. Normalmente, duas das três opções parecerão claramente inferiores. Se as opções inferiores são aquelas nas extremidades externas, a opção do meio provavelmente é a melhor escolha.

Este método é eficaz para qualquer elemento de design que tenha um sistema definido de opções. Ao restringir suas escolhas àquelas que apresentam diferenças perceptíveis, selecionar a melhor é uma tarefa simples.