Image for post
Image for post

Os princípios do design em User Interface

Mark Claus Nunes
Nov 16, 2015 · 6 min read

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 aplicativo SoundCloud. 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.

Continuidade

Se um ponto final é indefinido, você vai seguir o movimento do eixo até chegar a algo de interesse ou, caso não encontrar nada, seu ponto final será gerado por desinteresse na continuação do movimento de busca.

Um exemplo de deslocamento infinito é a principal alimentação no app Instagram. O eixo vertical começa na parte superior do ecrã e continua para baixo sem nenhum ponto final. Isso incentiva você a rolar a página para baixo enquanto você estiver interessado em ver mais fotos.


Simetria

É quando os elementos são dispostos da mesma maneira em ambos os lados de um eixo.

Equilíbrio

A simetria de objetos proporciona visualmente equilíbrio, estabilidade e, consequentemente, harmonia.

Um exemplo de simetria é o arranjo das categorias de música no app Spotify. Os elementos em ambos os lados da tela têm o mesmo formato, facilitando a leitura de cima para baixo.

Assimetria

Uma disposição assimétrica é identificada pela formação de elementos diferentes em ambos os lados do eixo, Se a assimetria for mal construída poderá proporcionar visualmente a sensação de desconforto e desequilíbrio. Um design assimétrico é o feed no app Pinterest. Embora as colunas da esquerda e da direita tem a mesma proporção. A altura dos elementos variam dependendo da informação de cada um deles. As variações dificultam deslizar da esquerda para direita e gera a leitura em Z e isso retarda o tempo de leitura.


Hierarquia

Hierarquia é a ordem que existe de forma a priorizar um elemento dentre outros no design.

Tamanho

A diferença de tamanho é um dos elementos mais fortes da hierarquia. Nós naturalmente olhamos primeiro para o maior elemento visível.

Um exemplo de hierarquia por tamanho é a lista NOTES no app Evernote. A seção NOTES se destaca no centro com uma dimensão maior. Devido ao seu tamanho ele chama a nossa atenção em primeiro lugar.

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.


Ritmo

O ritmo é o movimento criado por um padrão repetido de formas.

Padrão

O padrão de formas contínuas servem para definir uma unidade e a partir disso gera referência para outras normas. Isso é importante para o design pois facilita ao usuário familiarizar-se com os elementos e saber como interagir com eles.

Um exemplo de ritmo é a forma usada no Top Charts da App Store. Nesta área cada item é exibido com uma imagem, preço e outras informações. Ao percorrer a tela, você começa a se familiarizar-se com o ritmo e sabe exatamente onde procurar elementos no padrão.

Quebras

A quebra do padrão se destaca pois, consequentemente, proporciona o choque visual com algo diferente ao que você estava familiarizado, estabelecendo mais atenção a esse elemento distinto.

No aplicativo do Twitter, o feed do perfil tem um ritmo e é dividido por uma seção com sugestões de pessoas para seguir. Esta ruptura parece mais hierárquica e é uma boa maneira de chamar a sua atenção.


Pra quem quiser conhecer mais sobre essa assunto eu indico esse site: http://learndesignprinciples.com/

Thank you for your reading!


Assine a newsletter do UI Lab e receba artigos exclusivos como esse em primeira mão.

Assinar.

UI Lab

O melhor lugar para ser um UI Designer melhor 🦄

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store