UI Design - Organização dos elementos

Como sabemos o UI design é responsável por criar interfaces de fácil entendimento, eficiente e atraente, pensando nisso resolvi falar alguns pontos que tornam o projeto mais atrativo e com personalidade.

Cores

As cores passam mensagens, influenciam no contraste, carregam adjetivos e significados culturais que devem ser consideradas na hora da implementação.

Quando for escolher a paleta de cores para o seu projeto, lembre a mensagem que quer passar, além das cores que for escolher leve em consideração os fatores de sombras e tons, brilho, contraste, saturação e intensidade.

As sombras tem a função de enaltecer os elementos da interface, elas auxiliam os usuários a terem uma melhor percepção dos detalhes.

Para fazer a combinação de cores podem ser usadas os principais padrões:

análogas: uso de três cores localizadas próxima uma das outras no círculo cromático.

monocromático: esquema de cores e tons criados a partir de uma matriz única.

complementar: esquema que une cores de lados opostos do círculo cromático.

DICA: costumo escolher a paleta de cores com a ajuda do site Adobe Color, e indico bastante.

Para criar a sua paleta de cores, escolha uma cor dominante de acordo com a personalidade da marca ou projeto, depois aplique uma cor secundária e uma de apoio seguindo a regra 60/30/10. Esta regra determina uma proporção equilibrada das cores na interface. 60% do espaço da interface deve conter a cor primária, 30% da cor secundária e 10% a cor restante.

Grids

Tem como principal objetivo auxiliar no alinhamento, melhorando a organização do site, a agradabilidade dos usuários, melhoramos a legibilidade, mantemos a padronização e a hierarquia.

principais tipos:

grid coluna: muito utilizado para textos corridos, relatórios e livros. Possui uma estrutura simples, formada apenas por um bloco de texto.

grid modular: mais utilizado para projetos de jornais, utilizando colunas verticais com múltiplas guias horizontais, controlando o conteúdo e os espaços na tela.

grid hierárquico: Modelo mais utilizado para construção de sites devido a sua estrutura usual, pois possui colunas horizontais com larguras diferentes.

DICA: para manter a construção do projeto sem atrasos o  mais indicado é escolher qual grid usar no início do desenvolvimento e considere adaptar o grid utilizado no projeto para tamanhos diferentes de telas.

imagens

As imagens presentes no projeto naturalmente chamam mais atenção, seja ela foto, ilustrações ou até mesmo os ícones presentes no site/app. As imagens também tem a função de passar confiança aos usuários, pois passa a mensagem de veracidade em um projeto profissional.

Os ícones também possui uma função, de comunicação, sua utilização deve ser sempre direta e de fácil associação.

tipografia

Na aplicação das fontes escolhidas para o projeto, o indicado é incluir duas fontes diferentes, em contrastes ou combinações. Muitas fontes diferentes no projeto acaba tirando a atenção dos textos mais destacados

Princípios do design

Os pontos que deve ser levados em consideração são:

contraste: é a diferença entre dois ou mais elementos por cor, saturação e tamanho que tem o objetivo de ampliar a legibilidade. As cores do layout, o posicionamento das fontes e dos botões geram melhor entendimento.

ênfase: diferenciação de um item no design em comparação aos demais, para ter mais destaque. Seja ele uma imagem, a cor de um botão ou ícone.

proporção: A relação do tamanho dos elementos entre si. como por exemplo em sites de notícias, imagens maiores têm mais destaque que as menores.

Hierarquia: define a ordenação de elementos, com o objetivo de mostrar o texto mais relevante, o que deve ser lido primeiro.

referências: (Cores em UI) aela school, 2024. Disponível em: https://aelaschool.com/pt/designvisual/cores-em-ui-um-guia-rapido-para-usar-em-seus-projetos/

( O que é Grid?) futura express, 2024. Disponível em: https://www.futuraexpress.com.br/blog/o-que-egrid/#:~:text=O%20grid%20tem%20como%20principal,a%20harmonia%20visual%20do%20layout.