Como programadores podem criar bons layouts?
Imagino que você como programador já passou por algum dilema relacionado ao design de sua aplicação quando tentou realizar algum projeto pessoal ou com a ausência de um designer na empresa que trabalha.
Eu sempre estive ligado ao mundo do design de forma geral (trabalhando diretamente com design desde 2012/2013), e quase sempre em meus projetos focava mais no design do que na programação (Back-end então nem chegava perto), atuei principalmente com UI/UX mas também como front-end (o básico HTML, CSS e JavaScript ) o clássico “Web Designer”.
Porém esse cenário mudou desde o final de 2020, quando comecei a desenvolver apps utilizando Flutter e logo consegui assumir um cargo de dev Flutter e nesse cenário atuando principalmente como dev e longe do design que percebi o quanto os “programadores raiz” não possuem ou tem quase nenhuma noção básica de design, e o quanto isso os prejudica no dia-a-dia.
Pensando em ajudar nesse processo, resolvi reunir algumas dicas e conceitos básicos de UI e UX design que julgo ser fundamental e que quando aplicados podem fazer uma grande diferença em seus layouts, pensando principalmente nos devs que estão com algum projeto pessoal e não tem condições de contratar um designer.
Essas dicas podem ser aplicadas em qualquer tipo de projeto, nenhuma delas são regras, apenas recomendações e boas práticas, e não tem o propósito de transformá-los em designer, mas com certeza aplicá-las trarão bons resultados em suas criações de layout quando não houver um designer para isso.
Nesse artigo iremos abordar a primeira dica, referente a composição de layouts.
Dica 1: Composição
A composição é uma das principais se não a principal etapa quando pensamos em nosso layout, essa etapa irá definir o “corpo” e toda a estrutura do layout, é onde e como os elementos do nosso layout irão ficar organizados.
A principal característica que devemos levar em consideração nesta etapa é o conceito de equilíbrio.
Equilíbrio
Equilíbrio é fundamental em praticamente tudo em nossa vida, e aqui não seria diferente, porém se tratando de design o equilíbrio garante a distribuição do peso visual entre os elementos evitando um colapso do nosso layout. Existem alguns conceitos de equilíbrio que você pode aplicar de acordo com sua intenção, iremos abordar três tipos muito utilizado:
Simétrico
O equilíbrio simétrico é basicamente um “espelho” onde distribuímos nossos elementos de forma igualitária no layout, assim como vemos em um corpo de um violão ( aquele mais tradicional) ou uma borboleta, e também vários outros elementos da natureza, e desde que a humanidade vem observando a beleza ao seu redor a simetria é um dos pontos que mais nos chama atenção, pois desperta uma sensação de consistência e estabilidade.
Um bom exemplo a aplicação da simetria é esse layout:
Portanto, se você deseja transmitir essas características em seu projeto, aposte na simetria!
Assimétrico
O equilíbrio assimétrico é caracterizado por dispor os elementos de forma desigual porém mantendo o “peso visual”, tente imaginar uma balança com uma pedra muito grande de um lado e do outro lado muitas pedras pequenas, é um princípio muito utilizado e valoriza muito nossa composição e transmite uma ideia de modernidade, espontaneidade e movimento.
Segue um bom exemplo de aplicação da assimetria em um layout web:
Então se você deseja criar um layout com uma “pegada” mais moderna, tente aplicar esse conceito!
Radial
Diferente dos outros tipos de equilíbrio onde podemos traçar uma linha para aplicá-los, o equilíbrio radial utiliza um ponto central e a partir desse ponto distribuímos os elementos em nosso layout, tente imaginar algo como um “funil gigante” onde tudo que jogarmos ali irá girar em direção ao centro. Este tipo de equilíbrio desperta uma sensação de vida, dinamismo e profundidade.
Os exemplos abaixo mostram aplicações muito comum do equilíbrio radial, que é aplicado geralmente em "controles e menus" sendo muito visto em apps e jogos
Exemplo de aplicação em uma UI de um jogo
Caso você deseja destacar algum elemento em seu layout você pode direcionar a visão do usuário para esse elemento utilizando o conceito do equilíbrio radial
Considerações sobre equilíbrio na composição
Além desses três tipos de equilíbrios existem outras formas de criarmos composição, vou citar algumas aqui porém não iremos entrar em detalhes pois essas três que citei acima são mais que o suficiente para cumprir o propósito dessa série de artigos.
E as menções honrosas vão para: Regra dos Terços , Seção Dourada, e Espiral Dourada (uma das mais utilizadas para criação de logotipos)
Contraste
Aposto que quando você pensa em contraste logo lhe vem à cabeça o contraste entre as cores, porém vamos esmiuçar um pouco mais esse conceito para além das cores, podemos causar contraste utilizando formas geométricas, como por exemplo usando formas com arestas bem definidas e formas redondas, ou através do espaço negativo e positivo, texturas, e basicamente qualquer elemento que seja inerentemente opostos um a outro. Este tipo de composição cria um entusiasmo e desperta a atenção
O contraste é uma poderosa ferramenta de expressão, e que alinhado com um pouco de criatividade pode fazer uma “baita” diferença em seus layouts
E como podemos aplicar?
Criar experiências que fogem da monotonia e que despertam a atenção do usuário é essencial para todo projeto, e para isso você pode utilizar não apenas das cores, mas de formas e outros elementos que mencionamos acima.
Mas não faça isso aleatoriamente, pense cuidadosamente quais elementos você pretende destacar e sempre busque manter o equilíbrio. Lembre-se, o equilíbrio é a chave!
Apesar de tudo, a cor acabará sendo uma das principais formas de criarmos esses contrastes em nosso layout, e para tomar as melhores decisões podemos recorrer ao nosso melhor amigo nesse quesito, o círculo cromático.
O círculo cromático é composto por tons frios e quentes, então para gerarmos contraste entre uma cor ou outra podemos recorrer a cor oposta no círculo cromático
Não irei entrar em detalhes da teoria da cor nesse momento, porém posso indicar uma ferramenta que irá ajudar a tomar melhores decisões, essa ferramenta é o Adobe Color, com ela você irá conseguir criar ótimas paletas de cores, além de se inspirar e utilizar paletas de cores criadas por outros usuários.
Ênfase
A ênfase tem como objetivo chamar a atenção do usuário para um elemento, conteúdo ou composição específica. Conseguimos atingir esse objetivo através do uso do conceito do contraste, porém existem outras formas de darmos ênfase para determinado elemento em nosso layout.
Como por exemplo, podemos dar ênfase através do isolamento de um elemento, o elemento isolado irá chamar mais atenção do que os elementos que estão agrupados. Conseguimos isso também através de um posicionamento inusitado ou através de qualquer “elemento surpresa”
Devemos utilizar com cautela a ênfase, pois quando exageramos isso pode causar uma sensação de desconforto visual e confusão, então usem moderadamente!
Hierarquia
Podemos aplicar a hierarquia em nossos elementos pensando em "grau de importância", e você que irá determinar o quão importante é um elemento em sua composição, a partir dai você pode classificar seus elementos de acordo com sua "importância", vamos pegar como exemplo as tags HMTL como h1,h2,h3… esses elementos estão estruturados de forma hierárquica e sabemos qual terá mais destaque entre eles, o h1 terá mais destaque que o h2, o h2 terá mais destaque que o h3 e assim por diante. Pensando dessa forma podemos olhar para nossos elementos e atribuir um grau de importância para cada um deles, e aplica-los com maior precisão em nosso layout.
Como podemos aplicar?
Bom a hierarquia tem a intenção de priorizar conteúdos mais importantes, portanto devemos pensar cuidadosamente e categorizar nossos conteúdos de acordo com sua importância para que nossa comunicação com o usuário flua conforme desejarmos, e você também pode aplicar os conceito que vimos anteriormente, como o contraste e a ênfase.
Repetição
A repetição tem a intenção de gerar uma "rotina"e isso passa uma sensação de estabilidade e previsibilidade, com a repetição podemos deixar nossos usuários mais "a vontade"e familiarizado com a estrutura de nosso layout, a ideia aqui é gerar consistência, que é um fator muito importante para gerar uma "unidade " em nossa composição.
O Exemplo acima apesar de um pouco exagerado ilustra bem essa ideia da unidade e consistência, veja como a figura á direita possuí um "ar melhor"que a do lado esquerdo.
A repetição também pode ser aplicada fora do contexto de um layout, pode ser usado em diversos materiais de comunicação para gerar uma “unidade”, uma identidade visual, a ideia é compartilhar características similares entre um material e outro, isso não é uma regra porém se você quer ter uma consistência na comunicação de uma olhada em outros materiais gráficos que a empresa que está prestando serviço já possui, como por exemplo, imagens de media social, materiais impressos, se houver uma característica comum entre eles vale a pena você pensar em aderir essas características em seu layout
Harmonia
A harmonia é o principio onde buscamos encontrar o equilíbrio entre os elementos de nossa composição, e para alcançar esse objetivos devemos analisar cuidadosamente os elementos da nossa composição e certificar-se que cada um está no lugar certo e desempenha um papel específico, nada deve ser aleatório ou não ter importância em nossa composição.
E como resultado desse esforço temos a unidade! Que é a junção dos elementos e princípios funcionando juntos harmoniosamente o que torna a harmonia uma dica de ouro!
Como podemos atingir a harmonia em nosso layout?
A resposta pode não ser clara, mas basicamente precisamos passar por todos os outros princípios, tomar uma decisão em relação ao equilíbrio, definir uma boa paleta de cores, ordenar nossos elementos de forma hierárquica depois desse trabalho todo se você aplicou bem esses princípios já terá um bom resultado, e dando uma olhada geral em seu layout você será capaz de perceber inconsistências caso houver, e com isso fazer um ultimo refinamento para que toda sua composição se torna uma unidade.
Caso seu projeto seja um site, é bem provável que você irá subir algumas imagens posteriormente, sempre pense com cuidado nessas imagens para que elas não quebrem a harmonia do seu site.
Considerações finais
Devs, o que vimos até o momento já é uma boa base de como podemos começar a pensar de forma mais eficiente em nossos layouts, você já não estará mais no "escuro" quando for pensar em como iniciar um layout e o que deve ser feito.
No próximo artigo iremos falar sobre Cores e Tipografia, que são assuntos que gosto muito e imagino que muitos de vocês podem ter dificuldade em como escolher e definir uma boa paleta de cores e também a tipografia para nosso projeto.
Até a próxima!
