Os princípios do design em User Interface

Se você é um designer provavelmente deve estar cansado de saber quais são os princípios. Mas você já parou pra pensar como eles funcionam dentro do design de interfaces?

Pois bem, como diria o Jack: “vamos por partes”. Antes de falarmos sobre princípios de design é importante esclarecermos basicamente quais são os elementos do design. Estes são componentes que na estrutura do design podem transportar uma ampla variedade de mensagens e os detalhes podem ser diferenciados por pesquisadores como sendo:

Princípios do Design

De uma maneira simples, isso seria como cozinhar um bolo. Você tem todos os ingredientes na mão (elementos do design) e os Princípios do Design seriam como a receita desse bolo. Então misturar a quantidade certa de ingredientes e deixar no forno durante o tempo aconselhável garantirá um bolo mais gostoso.

Esses princípios são basicamente: Eixo, Simetria, Hierarquia e Ritmo. São eles quem criarão um posicionamento estético dos elementos e que irão produzir um bom design.

Eixo

Este elemento pode ser representado como uma linha imaginária responsável pela divisão de um corpo em segmentos proporcionais, simétricos e de mesmo peso. Dentro do design este é o princípio mais básico e comum para a organização de elementos. Nos diagramas, o eixo é identificado como uma linha vermelha.

Alinhamento

O alinhamento entre eixos é uma necessidade indiscutível para o equilíbrio visual. Trata-se basicamente em utilizar o eixo dos elementos para dispor em linha reta.

Um exemplo simples de eixo alinhado é a lista de álbuns de fotos do iPhone. Nele, um eixo vertical alinha capas de álbuns no lado esquerdo da tela.

Reforçar

O eixo também pode ser usado para reforçar a divisão de elementos, apesar do eixo ser uma linha imaginária, você pode torná-lo mais aparente se as bordas dos itens estão bem definidas.

Um exemplo disso em UI é a linha do tempo no News app do iPhone. Nele, um eixo vertical ajuda a separar uma coluna de fotos entre uma de conteúdo.

Movimento

Além de alinhamento o eixo também exerce o conceito de movimento representando uma linha reta seguindo em alguma direção.

A direção do movimento depende dos pontos iniciais ou finais que seguem a dimensão que irão percorrer.

Um eixo que incentiva movimento é a onda de música no aplicativoSoundCloud. Nele você reconhece o eixo na onda com sentido da esquerda para direita e naturalmente move o controle até chegar ao final da canção.

Forma

A diferença dos formatos também gera a hierarquia visual e sempre direciona o olhar para aquele elemento que possui uma forma diferenciada.

Um exemplo de hierarquia por forma é a página de perfil no aplicativo Instagram. A imagem de perfil circular é distintamente diferente dos outros elementos formados por quadrados, que nos faz reconhecer a imagem de perfil como algo único e mais importante.

Posição

Outro fator importante para a hierarquia é a posição dos elementos. Temos como exemplo o perfil no app do Facebook que é composto por um quadrado no centro e tem o nível de importância maior que os outros elementos no design.

[g1_button size=”l” link=”https://medium.com/ui-lab-school”]Continue lendo no UiLabs[/g1_button]