by Os desenvolvedores também podem fazer design? Essa é uma pergunta um tanto difícil de responder. Hoje em dia, com a forma como as equipes são estruturadas e os projetos são liderados, é comum ver desenvolvedores deixando o trabalho de design para os designers e focando apenas nas tarefas de desenvolvimento. Mas não precisa ser assim.
Nem todo desenvolvedor é de fato um designer, mas isso não significa que os desenvolvedores não possam aprender o básico de design e aplicar esse conhecimento ao seu trabalho.
Entender os fundamentos que constroem interfaces de usuário é essencial para qualquer desenvolvedor que queira criar produtos excelentes. De cores a hierarquia visual, estes princípios vão te ajudar a criar melhores experiências de usuário mesmo sem ser um designer.
Para quem pensa que você precisa ter talento artístico para ser um designer, vou mostrar 5 conceitos fundamentais em design que vão melhorar qualquer interface que você criar.
1. Cor
A cor é o primeiro fundamento de design de UI que muda a primeira impressão de uma experiência de usuário. Quando você visita um site ou usa um app, seu olho é exposto à cor. Todo design tem algum tipo de personalidade que é expressa através da cor. Ela pode comunicar segurança e profissionalismo como um site bancário, ou diversão e brincadeira como um app de jogo, sem nenhuma palavra.
Teoria das cores
A teoria das cores é um conjunto de princípios usados para criar combinações harmoniosas de cores. É baseada no círculo cromático, que é um diagrama circular que mostra as relações entre as cores.
Mas como sabemos quais cores funcionam bem juntas? Bem, alguns esquemas de cores podem nos ajudar a combinar visuais de forma eficaz usando o círculo cromático.
Monocromática: Usa uma cor em diferentes tons e matizes.
Complementar: Usa duas cores que são opostas uma à outra no círculo cromático.
Tríade: Usa três cores que estão uniformemente espaçadas ao redor do círculo cromático, que juntas formam um triângulo.
Análoga: Usa cores que estão próximas umas das outras no círculo cromático.
Aplicando cor à UI
Aplicar cor em interfaces de usuário é sobre colorir quadrados baseado em uma paleta de cores. Uma paleta de cores é um conjunto de cores que são usadas em um design para criar uma aparência e sensação coesa.
80-20 e 60-30-10 são regras comuns usadas para escolher como suas cores vão ser aplicadas em um design. A regra 60-30-10, por exemplo, é uma diretriz onde você aplica 60% do seu design em uma cor primária, 30% em uma secundária e 10% em uma cor de destaque.
Se você não está pronto para escolher uma paleta de cores, pode começar seu design com uma paleta de cores neutra, meio que uma escala de cinza, e depois adicionar cores mais tarde, dê uma olhada no site coolors para inspiração. Você não precisa focar em todos os aspectos de um design de uma vez.
Dicas gerais para Cores
- Menos é mais
- Considere a saturação das cores ao criar variações de uma cor
- Seja consistente onde cada cor está sendo usada
- Considere o contraste das cores com o texto ao misturá-las
2. Tipografia
Tipografia é a arte e técnica de organizar tipos para tornar a linguagem escrita legível, lível e atrativa quando exibida. É mais do que apenas escolher a fonte mais estética. Uma boa tipografia pode contar uma história como qualquer um poderia, tornar o texto agradável de ler e ajudar a estabelecer uma identidade de marca.
Pegue qualquer tipo de design gráfico que não está terminado e escolha a fonte e cor apropriadas, e você verá uma mudança completamente drástica no resultado. Estes dois fundamentos são ingredientes poderosos para começar.
Escolhendo tipos de letra
Escolher um tipo de letra é tão complicado quanto tentar estimar um ticket em uma sprint. Designers frequentemente passam muito tempo misturando e combinando diferentes pares de fontes para encontrar a combinação perfeita. Existem algumas regras gerais que podem te ajudar a escolher o tipo de letra certo para o seu projeto.
Serif: Fontes com pequenas linhas ou traços anexados ao final do caractere. Fontes serif são frequentemente usadas em mídia impressa, como livros, pois são consideradas mais legíveis em longos trechos de texto e mais tradicionais, ex. Merriweather, Times New Roman, Georgia.
Sans-serif: Fontes sem as pequenas linhas ou traços no final dos caracteres. Fontes sans-serif são frequentemente usadas em mídia digital, pois são consideradas mais legíveis em telas e têm uma aparência mais moderna, ex. Raleway, Roboto, Open Sans.
Monoespaçada: Fontes onde cada caractere ocupa a mesma quantidade de espaço horizontal. Fontes monoespaçadas são frequentemente usadas em ambientes de programação, pois facilitam a leitura e alinhamento do código, ex. Source Code Pro, Fira Code, Courier New.
Isso não quer dizer que você não pode usar fontes serif em mídia digital ou fontes sans-serif em mídia impressa. Tudo depende do contexto e da mensagem que você quer transmitir. Use o fontpair para descobrir mais sobre combinações de fontes.
Altura de linha e espaçamento entre letras
Passamos muito tempo em nossas telas lendo texto, então é importante garantir que o texto seja fácil de ler e visualmente atrativo. Fontes são projetadas para ter uma certa quantidade de espaço entre as letras, conhecido como espaçamento entre letras. A regra geral é sempre manter um espaçamento estreito entre letras no texto principal da UI e espaçamento maior entre letras em títulos e assim por diante.
Para uma experiência de leitura ainda melhor, certifique-se de que seus parágrafos não sejam muito largos (entre 45 e 75 caracteres por linha) e que o espaçamento entre as linhas do parágrafo, chamado de altura da linha, seja suficiente. Porque se as linhas forem muito longas, fica mais difícil para as pessoas medirem onde a linha começa e termina.
Dicas gerais para Tipografia
- Os opostos se atraem: serif com sans-serif, pequeno com alto, decorativo com simples
- Use um número fixo de pesos de fonte como normal (400/500) e negrito (700/800)
- Limite o número de tipos de letra a 2 ou 3, ex. uma para o texto do corpo e uma para títulos
- Use uma escala tipográfica para criar uma hierarquia consistente
- Use uma altura de linha maior para texto pequeno (1.5) e uma menor para texto grande (1.3)
- Não centralize texto longo, sempre ficará melhor alinhado à esquerda
3. Hierarquia visual
Hierarquia visual é a organização de elementos de uma forma que implica importância. Usamos hierarquia visual para guiar o usuário através de um produto. Por exemplo, em um site, queremos que os usuários vejam primeiro o logo, depois o título principal, chamada para ação, e então o resto do conteúdo, e isso é feito dando pistas visuais como tamanho, cor, contraste e espaçamento para diferentes elementos.
Como podemos estabelecer hierarquia visual?
Culturalmente, humanos normalmente olham para uma página escaneando rapidamente com nossos olhos de cima para baixo, da esquerda para a direita, meio que em um padrão zigue-zague.
Então designers digitais frequentemente brincam com algumas pistas visuais para guiar usuários a diferentes elementos dentro de uma interface de usuário para ajudar os usuários a entender o conteúdo e realizar seus objetivos.
Tamanho e peso da fonte
Quando falamos sobre legibilidade de texto e hierarquia, tamanho da fonte e peso da fonte são os fatores mais importantes. São as primeiras uma ou duas sentenças que chamam nossa atenção na página principal de um site de notícias.
Da mesma forma que grandes manchetes em jornais chamam nossa atenção, fontes grandes e em negrito ajudam a se destacar e podem enfatizar informações importantes e chamadas para ação.
Cor e contraste
Somos visualmente atraídos por cores brilhantes e áreas de alto contraste, especialmente quando elas estão cercadas por cores mais suaves ou fundos. A estratégia é simples: brinque com cor para direcionar usuários a elementos-chave na tela.
Espaçamento (espaço em branco)
Espaço em branco, ou apenas espaçamento, é o espaço entre elementos em um design. É uma parte vital de designs de UI e ajuda a criar uma sensação de organização e estrutura. Espaçamento pensado entre elementos cria interesse visual e mostra aos usuários como diferentes elementos de UI estão relacionados.
Como sempre, é importante notar que quando tudo está competindo por atenção, queremos tentar reduzir o número de elementos visíveis de uma vez ou diminuir a ênfase de alguns elementos na UI para que possamos ter mais harmonia e evitar ambientes caóticos.
4. Contraste
Contraste é a diferença entre dois ou mais elementos que os faz se destacar um do outro. É a razão pela qual podemos ver e distinguir objetos em nosso ambiente. Todo elemento em uma interface de usuário, por natureza, tem uma certa quantidade de contraste baseada no fundo.
Contraste é ótimo para UX e pode ser usado para priorizar áreas de um design e chamar atenção para certas áreas. Quando você usa texto em negrito para enfatizar um elemento de texto, você está chamando atenção para ele aumentando o contraste entre o texto em negrito e o texto normal, que é essencialmente mais pixels usados para renderização de texto.
Como com qualquer coisa que se destaca, também pode distrair se usado em excesso. Quando você se encontra em uma situação onde o elemento principal de uma interface não está se destacando o suficiente, ao invés de tentar enfatizar ainda mais o elemento para o qual você quer chamar atenção, descubra como você pode diminuir a ênfase dos elementos ao redor dele. Isso pode ser feito reduzindo o tamanho, peso ou intensidade da cor dos elementos circundantes.
Acessibilidade e Contraste
Um aspecto-chave do contraste é a acessibilidade.
Para garantir que seus designs sejam acessíveis, as Diretrizes de Acessibilidade para Conteúdo Web (WCAG) recomendam uma proporção mínima de contraste de 4.5:1 para texto normal (parágrafos, links, etc), e 3:1 para texto grande, como títulos. Isso garante que o texto seja legível para usuários com deficiências visuais, incluindo aqueles com daltonismo.
Eu pessoalmente aconselho evitar usar cores com um valor alto de luminosidade, como amarelo ou cinza claro, para texto. Essas cores podem ser difíceis de ler e facilmente violam a proporção de contraste WCAG. Ao invés disso, tente técnicas como girar o matiz para uma cor ou fundo ligeiramente diferente, por exemplo, um branco suave ao invés de branco puro ou um tom diferente de escuro ao invés de preto puro. De qualquer forma, dê uma olhada na ferramenta de verificação de contraste para garantir que seu texto seja legível.
5. Alinhamento
Alinhamento é o processo de design de garantir que cada elemento esteja posicionado corretamente em relação a outros elementos. É um aspecto do design que nos dá uma sensação de ordem e equilíbrio. Na verdade, vemos alinhamento na natureza o tempo todo que pode ser observado no alinhamento biológico e astronômico, desde celular até órbitas planetárias. Se algo está fora de alinhamento, será muito perceptível como o design pode ser inconsistente.
Alinhamento de texto é essencial para legibilidade, pois texto mal alinhado pode ser difícil de ler e entender. Em geral, devemos alinhar texto à esquerda para usuários que falam inglês. Texto centralizado pode ser usado para blocos curtos de texto como títulos ou cabeçalhos, mas deve ser evitado para parágrafos longos.
No caso de números em layouts de tabela, devemos alinhar números à direita para melhor legibilidade e comparação. Isso porque números são lidos da esquerda para a direita, e alinhamento à direita permite que os pontos decimais se alinhem verticalmente, tornando mais fácil comparar valores.
Ao usar ferramentas de design como Figma ou Penpot, podemos usar as ferramentas de alinhamento integradas para garantir que elementos estejam propriamente alinhados. Também podemos usar grades e guias para nos ajudar a manter espaçamento e alinhamento consistentes ao longo de nossos designs.
Conclusão
Em resumo, desenvolvedores também podem fazer design! Ao entender e aplicar estes 5 conceitos fundamentais de design de UI: cor, tipografia, hierarquia visual, contraste e alinhamento, desenvolvedores podem criar e entregar interfaces mais visualmente atrativas e amigáveis ao usuário.
Eu aconselho você a começar com cor e tipografia (escolha ótimas fontes!) e então construir sobre cada fundamento com iterações e feedback da sua equipe de design e produto.
Procure por inspiração em sites como dribbble.com e lembre-se de sempre praticar!
We want to work with you. Check out our Services page!
