“Este blog é uma tentativa de entender por que algumas práticas comuns de design são seguidas, ajudando-nos a entender e aplicar melhor esses princípios em nossos próprios designs.”

Tínhamos acabado de enviar nossa primeira tarefa e estávamos relaxando no canal de voz do Discord do 10kdesigners, compartilhando nossas experiências e insights. Durante a conversa, Yug , um dos mentores do setor, nos perguntou: “O que você aprendeu com sua primeira tarefa?”

Enquanto eu compartilhava meus pensamentos, Yug nos deu uma ótima dica: embora seguir as melhores práticas seja crucial, é igualmente importante entender o porquê dessas práticas. Ele explicou que essa compreensão mais profunda nos ajuda a pensar em camadas e a tomar decisões de design mais informadas.

Naturalmente, sendo curioso por natureza, fiquei fascinado. Rapidamente anotei algumas lições importantes e comecei a pesquisar online para descobrir as razões por trás dessas práticas de design. Meu objetivo era entrar em detalhes o máximo possível e realmente entender o porquê desses princípios aparentemente simples.

❓ Certifique-se de que o preenchimento seja consistente nas direções x e y

Por que?

• O preenchimento consistente nas direções x e y contribui para a harmonia visual e a sensação de ordem no design. Ele cria um layout equilibrado que facilita a leitura e a compreensão mental dos usuários, aprimorando a experiência do usuário.
• Essa prática está enraizada na psicologia do design, especificamente nos princípios da Gestalt.

Os princípios da Gestalt se baseiam em como nosso cérebro prefere ver as coisas como um todo, em vez de apenas partes separadas. Portanto, mesmo que haja muitos blocos ou elementos, nosso cérebro tende a agrupá-los como uma coisa unificada.

Casos em que preenchimento inconsistente é usado intencionalmente:

• Espaçamento óptico:
  É mais ou menos o lado “artístico” do sistema de espaçamento.
  O preenchimento inconsistente é usado aqui para criar uma hierarquia visual que resulta em um layout visualmente equilibrado e harmonioso, levando em consideração as formas dos personagens e suas interações.

• Foco assimétrico:
  para chamar a atenção para conteúdo ou seções específicas, podemos aplicar diferentes valores de preenchimento nas direções x e y. Essa técnica pode guiar o foco do usuário e destacar informações importantes na interface.

Conclusão

• Na maioria dos casos, mantenha o preenchimento consistente nas direções x e y. Para casos em que imagens ou vetores precisam ser alinhados opticamente, deve-se usar um preenchimento inconsistente.
• Se você quiser usar preenchimento inconsistente para focar qualquer elemento, certifique-se de que ele não atrapalhe o fluxo geral do design.

❓ Mantenha o preenchimento e as lacunas em múltiplos de 8 ou 4

Por que?

• A maioria dos monitores e resoluções de tela modernos são divisíveis por 4 ou 8. Portanto, seguir isso resulta em uma aparência mais coesa e polida.
• Tanto o Google quanto a Apple recomendam o sistema de 8pt. Se a Apple usa uma grade de 8pt em seu Sistema de Design (Interface Humana) e o Google também no seu (Design de Materiais), para nós, designers de produto, isso tem muita importância.
• Isso também facilita o dimensionamento do design. Seja aumentando o tamanho dos elementos ou de todo o layout, ter uma grade base divisível por 8 ou 4 permite um dimensionamento perfeito sem perder a harmonia do design.
• O uso de múltiplos de 8 ou 4 contribui para um design visualmente mais atraente, organizado e consistente, facilitando a navegação e o consumo do conteúdo pelos usuários.

É necessário seguir sempre isso? Quais são os exemplos?

Não, nem sempre é necessário seguir esta prática. O objetivo principal é equilibrar estrutura e criatividade para alcançar designs eficazes e fáceis de usar.

Exemplos:1. Portfólios artísticos ou criativos: sites pessoais ou de portfólio podem intencionalmente se distanciar da grade para mostrar criatividade e individualidade.
2. Sites de branding: marcas que buscam estabelecer uma presença online única e memorável podem usar layouts não convencionais que não seguem estritamente uma grade tradicional.

Conclusão

Recomenda-se usar um sistema de grade de 8pt ou 4pt (para maior granularidade). Mas não é necessário que isso seja praticado sempre; o principal é equilibrar a estrutura e a ordem do design com criatividade.

❓ Evite decimais

Por que?

• Telas de alta densidade podem lidar com decimais, mas telas de baixa densidade podem exibir designs desfocados devido à falta de pixels “extras” para renderizar o design com precisão.
• Isso pode levar a problemas como inconsistências visuais e complicações na renderização em telas de baixa densidade. Isso também pode levar a problemas de design indesejados.

Conclusão

A melhor prática é evitar decimais.

❓ Mantenha a altura da linha do texto em ‘Automático’

Por que?

• Isso garante que o espaçamento entre as linhas se ajuste dinamicamente, mantendo um layout visualmente agradável.
• Isso também está relacionado ao problema na transferência entre designer e desenvolvedor, e manter a altura da linha automática pode ajudar a mitigar esse problema.
• Isso permite que o Figma distribua a altura das linhas da mesma forma que a web. Quando a altura da linha está definida como automática, o Figma calcula a altura da linha com base no tamanho da fonte, o que pode simplificar a manutenção dos estilos de texto e simplificar todo o processo de design.

Devemos sempre manter a altura da linha em Automático? Quais são os casos extremos?

Não, não é necessário seguir sempre isso. A altura da linha normalmente deve ficar entre 120% e 145% do tamanho da fonte, tornando o texto mais legível. Mas isso pode variar de acordo com a fonte.

Casos extremos:1. Alinhamento visual: em alguns casos, podemos precisar alinhar elementos de texto visualmente usando uma altura de linha fixa consistente, mesmo que o conteúdo varie.
2. Acessibilidade: para melhorar a legibilidade para usuários com deficiência visual, uma altura de linha fixa ajustada conforme as necessidades pode ser benéfica nesses casos.
3. Fonte incomum: se estivermos trabalhando com uma fonte que tenha uma altura de linha intrínseca incomum, podemos precisar ajustar a altura da linha manualmente para garantir que o texto seja legível e bem espaçado.

Conclusão

• Na maioria dos cenários, manter a altura da linha em Automático é a melhor abordagem. Para facilitar a leitura, a altura da linha deve estar entre 120% e 145% do tamanho da fonte.
• Podemos usar diferentes alturas de linha, mas isso não deve atrapalhar o fluxo do design visual e também garantir que não crie conflitos durante a transferência.

❓ Mantenha os ícones em um quadro de 24px

Por que?

• Os ícones são projetados para funcionar melhor em tamanhos específicos, e 24px é um dos tamanhos padrão para ícones. Ao usar um tamanho de quadro consistente e exportar ícones nesse tamanho, os designers podem garantir a consistência visual e simplificar o processo de design.
• Normalmente, em dispositivos móveis, a área tocável é de 40 px, portanto, a maioria dos botões de CTA em aplicativos bem projetados são grandes e medem entre 32 e 40 px, sendo 24 px o tamanho mínimo padrão. Devemos evitar que um botão de CTA tenha menos de 24 px.

Existem casos em que precisamos de quadros menores que 24px?

• Sim. Ao projetar para telas pequenas ou áreas de conteúdo denso, um tamanho de quadro menor pode ser necessário para criar um ícone ou para se adequar a um layout específico.
• Além disso, ao criar um conjunto de ícones, é recomendável escolher um tamanho comum para todos os ícones, como 16px, 24px ou 32px, e permitir o dimensionamento para outros tamanhos, conforme necessário. Isso ajuda a manter a consistência visual e a eficiência no processo de design.

Conclusão

Os ícones devem seguir algumas diretrizes básicas de tamanho ao serem criados. Manter um ícone de 24×24 pixels é um ótimo tamanho intermediário para começar. Mas, se necessário para aplicações específicas, também podemos usar quadros menores de 16px ou 20px.

❓ Botões fantasmas 👻

O que são botões Ghost?

• Botões fantasmas são basicamente botões secundários ou terciários, usados normalmente como botões de chamada para ação (CTA), que ajudam a criar uma hierarquia visual de botões, permitindo que o botão mais importante seja promovido.
• Geralmente são botões transparentes e vazios, com um formato básico, muitas vezes contornados por uma linha bem fina com um sutil contraste de cor entre o traço e o fundo. Os botões fantasmas oferecem um visual limpo e minimalista.
• Alguns casos de uso em que o botão fantasma pode ser usado são: “Saiba mais”, “Inscreva-se”, “Comece”, “Voltar”.

Conclusão

• Os botões fantasmas melhoram a estética de um aplicativo ao mesmo tempo em que fornecem uma maneira sutil e fácil de usar para guiar os visitantes em direção a ações importantes.
• Em última análise, a escolha de usar botões fantasmas deve estar alinhada à estratégia geral de design e às preferências do público-alvo.