Princípios de design - Saiba como implementá-los na sua interface
Para entender UI precisamos nos aprofundar de vários aspetos fundamentais em torno dos quais cada design deve ser construído: consistência, acessibilidade, usabilidade e simplicidade. Independentemente do produto digital que se esteja a criar, é necessário tratar este conjunto de princípios a sério.
Mas primeiro, precisamos entender algumas ideias e conceitos que precisas de ter em conta. Aqui ficam os principais fundamentos a ter em conta quando crias qualquer projeto de UI, Web ou Gráfico.
1. Hierarquia
Cria hierarquia visual através de coisas como escala (o tamanho relativo dos
elementos) e cor. A hierarquia tipográfica pode ser criada utilizando diferentes tipos de letra, tamanhos, e weights de fontes. O objetivo é assegurar que o elemento mais importante da página se destaque dos restantes.
2. Equilíbrio
Qualquer que seja o tipo de técnica de equilíbrio que utilizes, o resultado deverá ser o que provoca um sentimento agradável.
- Equilíbrio simétrico: os elementos de ambos os lados da linha central têm o mesmo peso.
- Equilíbrio assimétrico: os lados têm pesos opostos, mas ainda assim parecem equilibrados.
- Equilíbrio radial: os elementos estão dispostos à volta do ponto central do teu design.
3. Alinhamento
O alinhamento mantém as proporções entre as margens e o espaço, permite organizar o conteúdo num formato específico com o objetivo de melhorar a visualização do trabalho. Nós, seres humanos, temos a tendência de ver logo o que está mal, algo desalinhado seria algo que iríamos ver de imediato em vez de vermos o que está bem e o que está em destaque no website.
Na parte ocidental do mundo, somos habituados a escrever e a ler da esquerda para a direita, de cima para baixo. Quando criamos um projecto, devemos ter em conta esta ordem, e pensar que se alinharmos tudo à direita isso será ignorado pelo leitor, dado que o lado esquerdo é aquele para o qual ele olha primeiro.
É necessário também pensarmos que as informações não devem estar espalhadas pela página, mas sim terem pontos de alinhamento em comum, mesmo que queiramos dar um aspecto mais disruptivo ao nosso interface devemos procurar aquelas “linhas invisíveis” que falámos de modo a encontrar pontos em comum de alinhamento. Estes alinhamentos entende-se que sejam não só horizontais, mas também verticais, para haver um equilíbrio visual.
4. Escala (ou Proporção)
Os elementos que são maiores em relação a outros vão destacar-se mais e parecer que têm mais importância para os utilizadores. Os elementos mais pequenos terão uma menor importância.
Usa a proporção para criar interesse visual atraindo o olhar do utilizador para
elementos visuais específicos dentro dos teus desenhos.
5. Movimento
Movimento refere-se à forma como os olhos de um utilizador se movem através do teu design. UIs dinâmicos encorajam bastante o movimento dos olhos, enquanto os estáticos encorajam menos.
6. Espaço Negativo
O espaço branco ou espaço negativo é o espaço vazio entre os elementos do teu design. É muitas vezes negligenciado e ignorado pelos designers — afinal, é fácil pensar que não desenhas o espaço branco ou que é a única coisa sobre o ecrã que não é desenhado. No entanto, é muito importante que consigas dominar a tua aplicação em qualquer interface.
O espaço branco faz com que o utilizador se concentre no que é importante. Quanto menos elementos estiverem no ecrã, mais o utilizador se concentra e faz as tarefas necessárias sem qualquer fricção.
Dá uma vista de olhos a estes dois cartões. Qual deles tem melhor aspeto, na tua opinião?
Tenho quase a certeza de que pensas que a segunda versão é melhor. Repara como todos os elementos são exatamente os mesmos. Todos os estilos de letra, cores e imagens são exatamente os mesmos. A única coisa que mudou foi o espaço branco — o espaçamento entre todos estes elementos.
Mas esta pequena diferença de espaçamento que acaba por também nos dar mais conforto ocular que é muito importante dado que estamos cada vez mais com algum interface á nossa frente e é também este elemento que vai distinguir os nossos projectos dos restantes.
O espaço branco não deve ser preenchido sem uma boa razão. É melhor deixar partes do ecrã vazias do que preenchê-lo com elementos desnecessários e sem sentido.
Para aplicar corretamente o espaço branco, começa com muito e depois vai reduzindo, passo a passo até haver a quantidade perfeita (na tua opinião). Desenvolver um olho para dominares a aplicação de “white space” leva tempo. No entanto, não existem regras rigorosas no que diz respeito à sua aplicação, por isso, concentra-te apenas na prática, e irás melhorar. Nem tanto nem tão pouco é a única regra que se aplica ao espaço branco.
E tal como vimos no exemplo em cima do cartão, este white space pode ser aplicado entre componentes e dentro dum próprio componente como por exemplo um botão, que é algo que desenhamos bastante e também devemos deixá-lo respirar e ter espaço suficiente interior.
No caso dos botões podemos aplicar o sistema de grelha de 8 pt que se baseia na ideia de que se utilizam múltiplos de 8 para definir margens e padding. Este sistema pode ser aplicado em todo projecto, pois vai trazer uma consistência brutal!
7. Contraste
O contraste precisa de ser usado com muito cuidado, um exemplo é colocar um fundo amarelo na imagem e a letra em branco, as duas cores são muito parecidas por serem claras, ou seja, não há uma diferenciação de cores na imagem. Ou seja se queremos dar contrate com cor, não te esqueças dos primeiros capítulos onde falamos sobre a psicologia da cor. É claro que como também vimos podemos dar contraste com a tipografia. Ou seja tudo o que falamos anteriormente para dar destaque e contraste é aplicado neste momento.
O contraste é o responsável por dar relevância visual/destaque a algumas áreas no layout, definindo assim o que tem mais importância. A hierarquização permite que o leitor perceba as diferenças no layout e entenda que ele tem um princípio, um meio e um fim. Esse princípio pode ser aplicado de diversas formas : estilos de texto, tamanho. O importante é colocar em evidência o que é relevante para nós e consequentemente que queremos que o utilizador veja e interaja primeiro, mas atenção que contraste não é conflito.
8. Repetição
Com repetição não se entende a repetição do conteúdo mas sim a forma como a utilização dos mesmos elementos visuais, ou seja o alinhamento, o contraste e a proximidade devem ser iguais ao longo de todo o interface.
Tal como prezamos por nos mantermos fiel á identidade que criamos no website devemos também preservar esta repetição de regras que nós mesmos criamos.
Mesmo dentro de informações semelhantes podemos querer dar destaque a algum tipo de conteúdo, por isso o próximo princípio vai-os ser muito útil.
Este princípio atribui consistência ao design através da repetição de elementos. O ato de repetir um elemento no layout faz com que o observador siga um fluxo de leitura. E ausentar a repetição de elementos pode deixar a “arte” sem uma conexão visual, fazendo com que o utilizador se sinta perdido. Devemos utilizar a repetição de modo a organizar a informação da composição e não torná-la ruidosa e confusa. A repetição funciona como um reforço para salientar um elemento importante.
9. Proximidade
Este conceito anda par a par com o do alinhamento e espaçamento, ao trabalharmos um não somos indiferentes aos restantes. Neste princípio temos em base que informações semelhantes devem estar próximas, ou seja, manter o título do componente próximo das informações secundárias a que corresponde. Queremos que o nosso utilizador tenha confiança no que lhe estamos a apresentar e que haja fiabilidade no conteúdo exposto, não queremos que ele se questione se aquela informação pertence aquele artigo ou ao seguinte.
Quando aproximamos ou formamos grupos com elementos que se relacionam conseguimos dar pistas para o observador de qual a ordem de leitura ele deve seguir, pois o nosso cérebro vê o layout como um todo e depois e apenas depois as partes que o formam. Agrupar informações facilita a leitura, organiza os elementos do design, ajuda o utilizador e ter um caminho por onde deve seguir e permite um maior descanso visual.
10. Cor
A cor é um forte princípio de design porque ajuda a comunicar a um nível emocional e subconsciente. A compreensão dos princípios básicos da teoria da cor pode ajudar-te a usar a cor da melhor maneira.
Aprender e seguir os princípios de design estabelecidos no design gráfico permite-te criar designs mais consistentes que satisfazem os utilizadores e oferecem experiências de utilização excelentes.
Desconsiderar estes princípios deve ser feito com cuidado, e só depois de se
teres um conhecimento profundo dos mesmos e dos finalidades que servem.
O que deves fazer agora?
1 — Segue o nosso perfil no Medium para receberes artigos novos todos os meses.
2 — Junta-te à nossa comunidade no LinkedIn e no Slack, e participa nos vários workshops e concursos que temos para oferecer.
3 — Acede ao nosso repositório de desafios, e prepara-te para uma experiência única 100% prática.
Sobre a TheStarter
A TheStarter é uma edtech nascida em 2021, focada no ensino personalizado de tecnologias digitais, como Research, UX Design, UI Design e Marketing Digital, através de programas 100% práticos e de ensino progressivo. A TheStarter, ao contrário do formato expositivo de aulas atuais noutras escolas, faz da prática o motor principal do seu método, e não apenas um detalhe extra. Separado em desafios, como em fases de jogos, os alunos da TheStarter aprendem em microturmas através da construção de projetos, tendo contacto simultâneo com a teoria e com a sua aplicação prática.
Influenciados também pelo panorama atual da indústria do UX/UI Design em Portugal, uma área em crescimento mas pouco desenvolvida, o projeto foi moldado para trazer uma maior especialização ao ecossistema do Design, com a introdução de cursos especializados, pioneiros em Portugal, e a criação de programas de carreira com ligação direta ao mercado de trabalho. A missão é ajudar a nova geração de iniciantes a vingar no mercado e aumentar a maturidade das empresas nos processos de pesquisa, design e desenvolvimento de produtos digitais.
Segue-nos nas redes sociais em TheStarter e Clube de UI, e junta-te à nossa comunidade aberta no Slack.
