Princípios de design

Na semana passada, publicamos um artigo sobre os estilos de design (conteúdo do nosso workshop de UI — Construindo Interfaces Centradas nos Usuários) e essa semana, vamos falar um pouco sobre os princípios de design, quais são e para que eles servem.


ELEMENTOS DE DESIGN

Antes de começarmos a falar sobre os princípios de design, vamos nos lembrar um pouco de velhos conhecidos do design, mas não menos importantes, os elementos do design. Sim, porque elementos de design podem (e vão) transportar uma ampla variedade de mensagens aos seus receptores, são eles: linha, forma, formato, cor, textura, espaço e valor.

Elementos do design

Os elementos do design, fazem parte dos princípios do design, ou seja, um complementa o outro. E, para tornar essa associação entre elementos e princípios em algo mais simples, vamos imaginar que você precisa fazer um bolo e como você sabe nada sobre fazer bolos, você faz o que? Dá um Google, pega a primeira receita de bolo que aparece e verifica os ingredientes que você vai precisar, para fazer o bolo e o modo de preparo, o modo de fazer esse bolo, certo?

A essa altura, você deve estar se perguntando: mas o que uma receita de bolo tem a ver com design? Calma, eu explico. A receita de bolo é apenas uma analogia do assunto que estamos tratando, então, o que acontece é que os elementos do design estão para os ingredientes do bolo, assim como o modo de preparo está para os princípios de design.

Resumindo, para que o nosso bolo fique macio e gostoso, precisamos ter os ingredientes e misturá-los conforme orienta o modo de preparo. Caso contrário, o bolo desanda, não cresce, não fica fofinho, etc… Ok, mas e a interface? Bem, quando criamos uma interface, usamos os elementos do design (ingredientes) seguindo as orientações dos princípios do design (modo de preparo), para garantir que a nossa interface (bolo) fique mais consistente.

PRINCÍPIOS DE DESIGN

Os princípios de design que vamos ver agora, foram criados pela product designer do Dropbox, Melissa Mandelbaum. Melissa precisou projetar e codificar um site como projeto final de um curso de desenvolvimento web que ela fez em Nova York e, por conta disso, ela pensou em criar um recurso para nós designers. Legal essa Melissa, não?! Rs

Sem mais delongas (sempre quis falar isso rs) vamos aprender agora os 4 princípios de design: Eixo, Simetria, Hierarquia e Ritmo.

EIXO

O eixo é o princípio mais básico e comum de todos, ele é usado para organizar os elementos gráficos do seu produto e dentro dele, nós encontramos os seus subprincípios: Alinhamento, Reforço, Movimento e Continuidade.

ALINHAMENTO

Alinhamento GIF

Como em quase tudo na vida, nós (usuários) nos sentimos mais atraídos por coisas que nos transmitem a sensação de estabilidade, conforto, etc. Por isso, fazer uso do eixo, para manter seus elementos sempre alinhados vai fazer com que o seu usuário se sinta bem ao interagir com o seu produto. Ninguém gosta de navegar no caos, concordam?

REFORÇO

Reforço GIF

REFORÇO

Este é um princípio que, como o próprio nome já diz, serve para reforçar a disposição dos elementos e torná-los mais aparentes. Por exemplo, quando você está caminhando por uma rua na cidade, a rua é um eixo que é reforçado pelos edifícios de ambos os lados. Se em uma parte da rua estiver faltando algum prédio, o eixo da rua não seria tão forte, não seria reforçado, pois veríamos um vazio de repente.

Movimento GIF

MOVIMENTO

CONTÍNUO

Continuidade GIF

CONTÍNUO

SIMETRIA

SIMETRIA

Esse é o meu princípio favorito, a Simetria e sabe por quê? Porque eu como uma pessoa super metódica e organizadinha, gosto de tudo distribuído de maneira uniforme em ambos os lados. Para você que ainda não sacou o que a simetria faz, é muito simples, basta manter os elementos lado a lado exatamente na mesma posição, como se tivesse vendo um reflexo no espelho. E a simetria também traz subprincípios que são: Equilíbrio e Assimetria

Equilíbrio GIF

EQUILÍBRIO

ASSIMETRIA

Assimetria GIF

ASSIMETRIA

Já a assimetria, usa outro tipo de artifício. Ela rompe com o padrão da simetria, de tudo muito certo e equilibrado e revela interfaces com estruturas que são lidas (e quando digo lidas, quero dizer aquela leitura visual que fazemos quando “varremos” uma interface com os olhos) em zig zag. Esse tipo de estrutura é legal (eu mesma sempre quero testar algo diferente da simetria), mas nem sempre aconselhável, porque exige uma curva de aprendizagem maior do seu usuário.

HIERARQUIA

Como diria o Chaves ao Prof. Girafales, essa é muito fácil, manda uma mais difícil… hehe A hierarquia nada mais é do que o princípio de hierarquização das coisas ou em português coloquial, qual elemento é mais importante que outro. E nós podemos hierarquizar as coisas usando os subprincípios de: Tamanho, Forma e Posição.

Tamanho GIF

TAMANHO

FORMA

Forma GIF

FORMA

POSIÇÃO

Posição GIF

POSIÇÃO

Por último, mas não menos importante, temos o princípio da posição. Esse princípio de hierarquização não é tão utilizado (pelo menos eu não vi muito) quanto o tamanho e a forma, mas serve também para chamar a atenção do seu usuário. E como faz? Simples. Escolha um elemento para ser o ponto de partida, posicione-o no eixo e vá posicionando os demais elementos após o ponto de partida. Isso fará com que o seu usuário leia a primeira informação, o ponto de partida.

RITMO

Por fim, o ritmo é um princípio relativamente simples. Tudo o que você precisa saber sobre ele é que é um movimento criado por um padrão repetido de formas. Como todos os outros, serve para nortear a experiência que queremos transmitir aos nossos usuários e dentro do ritmo temos: Padrão e Quebras.

Padrão GIF

PADRÃO

“Precisamos padronizar essas informações”, “Essa monografia não está dentro dos padrões”. Quem nunca ouviu falar de padrão, não é mesmo? Em interface digital, nós estabelecemos padrões visuais, para facilitar a vida dos usuários. E como fazemos isso? Utilizamos elementos padronizados na nossa interface, para que o usuário se acostume muito rápido com aquilo e faça uma leitura da interface bem rapidinho, sem maiores dificuldades.

Quebras GIF

QUEBRAS

Bom pessoal, estamos chegando ao fim de mais um artigo e, para finalizar, vale dizer que essas informações foram escritas com base no site Design Principles (em inglês).

Se você gostou, curte, compartilha, segue a gente! Se não gostou… não conta pra ninguém! hehe

E se a sua startup está precisando de uma forcinha pra dar vida ou mesmo para refinar um produto, entre em contato com a gente. Ficaremos muito felizes em poder ajudar!

Já as quebras fazem o oposto do padrão, elas rompem com a regra do certinho, padronizado, para também, chamar a atenção do usuário para um elemento, uma área específica. Por exemplo as sugestões de friends no Instragam ou Facebook, você está lá rolando sua telinha numa boa, tudo padrãozinho, de repente, surge uma área diferente daquele padrão, as sugestões de friends e isso quebra a sua interação propositalmente, para que você preste atenção em outra coisa.