Design pra quem não é designer. E nem quer ser…
O drama de quem ouve dia após dia que "é só a minha percepção, mas eu não sou designer".
Há algum tempo na minha carreira eu lido com desenvolvedores. Já trabalhei com gente que desenvolvia o HTML puro com CSS, já vi gente programando orientado a objeto em Action Script 3, já trabalhei com gente que escrevia suas linhas em Python, Java, usando Kotlin, usando Bootstrap, Javascript e mais recentemente, Angular. Mas se tem uma coisa que eu ouvi desde o dia 1 do "povo de tecnologia" é que eles não são designers. Tô aqui pra provar o contrário. (drop the mic)
O cargo não vale nada, o que vale é o olhar
Rapaz, ninguém acorda de manhã, olha pro teto do quarto e diz: Putz, agora sou designer. Foda…
O povo estuda, aprende, erra, aprende mais, faz coisa errada, faz coisa feia pra caramba (visualmente falando, né?) e aí depois de um tempão aprendendo e estudando se considera um designer. É igualzinho programar. Você não aparece programador do dia pra noite. Você aprende, erra, se inspira nos outros.
Então de certo modo, todo mundo pode ser designer, ou melhor dizendo, ter o olhar de um designer, se quiser ter.
E esse - na falta de uma palavra melhor - guia, é pra plantar a semente na cabeça de você que está lendo e incentivar que você abra os olhos para essas características.
Uma pessoa não precisa fazer design para ser designer, é ter o olhar de um designer que conta. Vamos lá, vai, chega de papo!
Os princípios básicos
Padrões. Padrões em todos os cantos!
Uma das responsabilidades de um designer é organizar informações de forma clara, objetiva e com uma estética coerente (estética é interpretativa, então não vou entrar no mérito de se algo é bonito ou não, porque isso é um gosto pessoal).
Para dar um conforto visual em seus materiais (também chamado de ergonomia visual), um designer utiliza padrões visuais. Esses padrões são características que as informações devem possuir para que a pessoa que recebe a mensagem consiga separar, perceber e entender uma mensagem com facilidade.
No design, de modo geral, esses são alguns dos mais valiosos princípios ao criar esses padrões:
1. Hierarquia
O que é mais importante deve vir primeiro. Deve ter mais destaque e deve ser mais fácil de ser reconhecido e encontrado. First things first.
2. Contraste
Qualquer pessoa deve ser capaz de distinguir as informações que está recebendo. Elas devem poder ser separadas sem dificuldades pelo usuário.
Quando pensamos em contraste, já pensamos nos dois polos: preto e branco. Mas não é exatamente isso, ou melhor, não é só isso.
Contraste é a característica que mostra o quão longe algo está do seu oposto. Por exemplo, existe o contraste de tamanho, quando uma informação é grande e outra é pequena, por exemplo. Em campanhas de publicidade e escolhas de imagem para materiais e layouts, o contraste pode ser utilizado de um jeito mais subjetivo, como, por exemplo, alguém feliz vs. alguém triste.
Essa diferenciação — esse contraste — ajuda a pessoa que está recebendo a mensagem a conseguir criar mentalmente uma separação e assim categorizar algo como mais, ou menos importante.
Já o contraste visual de cores é fácil de ser compreendido. E até pouco tempo atrás (nem tão pouco) era interpretativo, mas hoje em dia você pode verificar o nível de contraste das cores do seu projeto utilizando plugins em ferramentas gráficas ou então inserindo as duas cores em um site como esse, que dá uma nota ao contraste e já diz se tudo está de acordo com o WCAG, que rege as regras de acessibilidade nos conteúdos web.
3. Alinhamento
Aqui é que os meninos são separados dos homens. Um designer macaco véio bate o olho em um layout e vê tudo que está desalinhado. Não tem jeito, esse olhar é puro treino. Inclusive, tenho amigos desenvolvedores que ficaram tão bons nessa habilidade que muitas vezes eles pegam meus deslizes nas telas (desculpa, pessoal!).
O alinhamento é o que faz as informações parecerem organizadas em um determinado espaço. Nós aprendemos a alinhar as coisas desde criança, isso porque essa informação nos ajuda a criar padrões e os padrões ajudam no entendimento, memorização e aprendizado. Elas também ditam o ritmo e importância das informações, o que é muito curioso. Veja por exemplo os alfabetos ocidentais e orientais. O sentido de leitura de uma pessoa alfabetizada em português é da esquerda para a direita, de cima para baixo. Já no hebraico, o sentido de leitura é da direita para a esquerda, de cima para baixo. Essa característica da alfabetização faz com que pessoas alfabetizadas com português percebam as informações da esquerda superior como de maior importância, já alguém alfabetizado em hebraico achará que a informação mais relevante é a da direita superior.
4. Proximidade
Aqui o que vale é colocar as informações relevantes próximas o suficiente para que elas sejam percebidas de maneira única. O foco não é na proximidade em distância — tipo, não é deixar 0 pixels entre um elemento e outro — mas sim deixar elas agrupadas de uma maneira que o seu cérebro perceba elas como um único elemento, ao invés de vários separados, se liga no exemplo:
No exemplo acima, no primeiro caso os elementos organizados um abaixo do outro passa a sensação de que eles formam uma coluna. Já no segundo caso, os mesmos elementos organizados voltados à um ponto central criam a ilusão de um triângulo no espaço vazio no centro. Já no terceiro caso os elementos não organizados passam a sensação de individualidade, o que pode ser o intuito em alguns casos.
5. Ritmo e repetição
A repetição serve para criar consistência. Tanto visual como hierárquica.
Nesse quesito posso afirmar, com toda certeza, que todo desenvolvedor que eu trabalhei era bom.
Sempre que eu tentava colocar um botão diferente no layout alguém me chamava pra perguntar se não podia usar o outro botão que já estava feito. E quer saber? O desenvolvedor estava certo.
Observe os dois exemplos abaixo, ambos possuem os mesmos elementos e as mesmas cores no layout. No primeiro, os objetos estão organizados de uma forma onde não há um ritmo nem repetição. Essa organização faz com que eles pareçam informações diferentes, o que pode até ser a intenção do designer.
Na segunda imagem os elementos estão organizados da mesma forma e com as mesmas cores, essas características repetidas fazem com que o nosso cérebro perceba elas como um conjunto, isso faz com que o conforto visual maior.
Se um objeto existe e tem uma função, sempre que for necessária aquela função, o mesmo objeto deve ser utilizado. O aprendizado muitas vezes acontece por repetição. Os padrões que um designer procura criar são uma maneira de diminuir a dificuldade de alguém em entender um dado ou mensagem.
Essas habilidades de design, mesmo que de um jeito mais simples, são importantes mesmo em campos que não são exatamente onde você atua no seu dia-a-dia. Você pode utilizá-las em um design critique com o time de design, ou então para construir uma apresentação de resultados para a gestão. Ou seja, qualquer lugar onde um olhar crítico seja necessário.
Espero que com esses 5 passos você esteja mais perto de se tornar um designer melhor. Mesmo que antes você não fosse designer!
Too Long: Didn't Read
Aqui vai um resumão pra quem deu scroll pro final e pulou todo o texto só olhando pras imagens maravilhosas (sem crise, eu te entendo):
- Treine seu olhar para entender o design das soluções, não se preocupe com a ferramenta ou recursos visuais.
- Entenda o motivo dos elementos estarem organizados do jeito que estão. Se não entender, pergunte! É assim que se aprende.
- Preste atenção na hierarquia (o que é mais importante?), contraste (eu consigo distinguir uma informação da outra?), alinhamento (essa solução parece organizada?), proximidade (eu percebo os elementos como um ou como vários? Isso é bom ou ruim?)e repetição (existem vários estilos para o mesmo objeto ou eles estão padronizados?)
- Esse olhar pode ser utilizado em outras áreas também, como na produção e análise de reports, apresentações ou críticas de design melhor embasadas.