Princípios e processos de Design Visual para Desenvolvedores

Por Júlio Felipe

 - 

23 de novembro de 2020

 - 

Tempo de leitura13 min leitura

Princípios e processos de Design Visual para Desenvolvedores

No processo de desenvolvimento de uma aplicação, seja desktop, web ou mobile, é importante pensarmos, antes de tudo, na usabilidade e aparência dessa aplicação, como algo agradável de se ver e fácil de usar. Tudo isso deve ser definido na fase de levantamento de dados, isso é, nas conversas iniciais com o cliente.

Pode acontecer de o seu cliente já ter a parte visual toda definida e até já construída por um designer. Porém, existem situações em que você deverá desenvolver tudo desde o design até a codificação da aplicação. Não estou querendo transformar você em um "Severino", ou o faz tudo. Mas na realidade quando estamos começando nossa carreira, geralmente a equipe que temos é somente nós mesmos.

E não é somente isso, precisamos saber o porquê da estruturação utilizada. Para te ajudar a construir tudo isso, nesse artigo vou abordar algumas técnicas para construção de um bom design para seu sistema.

Noções básicas de design visual

Para criar uma boa experiência do usuário e um ótimo design visual para nossa aplicação, precisaremos combinar diferentes elementos que darão uma forma melhor ao sistema que estamos projetando.

O design visual cobre os dois lados das categorias de design, o lado do design gráfico e o lado da interface do usuário. Ele se concentra mais na estética do design da nossa aplicação e outros elementos relacionados, como cores, imagens, tipografia e formas.

Para exemplificar, considere que estamos indo a um supermercado onde todo o layout é diferente do que estamos acostumados a frequentar. Geralmente os caixas estão na frente, padaria e açougue no fundo e os demais produtos ao centro. Agora imagine uma situação onde essas posições estivessem invertidas. Os caixas na lateral, açougue na frente, padaria ao centro, assim seria mais difícil encontrar o que queríamos. Normalmente, iriamos começar pela leitura de placas e setas.

A comunicação é uma parte essencial da nossa vida; e aqui começamos a usar os sinais para encontrar o que queríamos. Em nosso exemplo foi utilizado o princípio do design visual. Nós nos comunicamos visualmente. Para obter instruções, usamos setas criadas por linhas; para áreas importantes ou de perigo, usamos cores; e projetamos diferentes blocos para ajudar os usuários a entender nosso design e outros elementos. Então, aqui, vamos explicar os elementos básicos que usamos durante o design para que possamos nos comunicar visualmente.

Em nosso caso não estamos trabalhando com design visual para um supermercado, mas sim para nossos sistemas. Quantas vezes você desistiu ou pensou em desistir de continuar navegando em uma página ou site por não encontrar a informação que você queria, ou não encontrou aquele botão para finalizar uma compra, e deixou o produto no carrinho e foi buscar um concorrente?

Quando prestamos atenção a esses pequenos detalhes durante o design da nossa aplicação, criamos uma mudança significativa na experiência do usuário em nosso sistema.

Os elementos básicos do design visual que iremos ver nesse artigo são os seguintes:

  • Linhas
  • Formas
  • Cores
  • Fonte / tipografia

Usando linhas

Usando linhas

Linhas são usadas para separar partes específicas de nosso design ou até mesmo direcionar a atenção de alguém para uma área específica. Nesse exemplo a linha é usada para fazer a separação entre os links do site e das redes sociais.

Usando formas

Usando formas

As formas podem ser criadas por uma combinação de uma ou mais linhas; também, elas podem ser criadas usando diferentes cores ou texturas.

As formas podem ser regulares ou irregulares, angulares ou redondas, grandes ou pequenas, abertas ou fechadas, e até bidimensionais ou tridimensionais.

Ícones, símbolos, texturas e espaços coloridos são exemplos de formas.

Para compor elementos de nossa página utilizamos os retângulos arredondados para os campos dos formulários, seguindo nossa logo que é composta de formas com esse estilo. Abusamos da utilização de ícones para ajudar na comunicação com o usuário, isso facilita para quem tem dificuldade na leitura, ou até mesmo para uma leitura visual rápida.

Usando cores

Usando cores

Todos os dias, estamos cercados por diferentes tipos de cores. Usando cores em nosso design visual, geramos emoções e orientamos nossos usuários para suas próximas ações com base nas cores que usamos em nosso sistema.

Considere os semáforos. Temos apenas três cores, mas já estamos acostumados, porque cada uma delas nos comunica algo.

O vermelho nos diz para parar e o verde nos diz para irmos, e às vezes nem pensamos mais neles porque nos habituamos a eles, então apenas tomamos as medidas cabíveis.

Então, quando estamos projetando um sistema ou um site como em nosso exemplo, sempre precisamos escolher as cores com cuidado, e quando as usamos, precisamos ter certeza de que cada cor representará o mesmo significado para os usuários.

Esteja atento ao escolher as cores, pois as cores podem realmente afetar e ditar o clima de um design, já que cada cor tem seu próprio significado e comunica algo diferente aos usuários.

Outra razão pela qual as cores são tão importantes para o design é porque elas têm uma porcentagem maior de destaque e podem ser facilmente lembradas. No hero de nosso site percebe-se um botão magenta claro destacando o botão "Quero começar gratuitamente agora". Na seção de notificação vemos a cor violeta azul contrastando com o fundo magenta claro para destacar o botão de "Cadastrar e-mail".

O uso das cores não são por acaso, elas tem o seu significado, verde representa natureza, energia, vida e outras coisas relacionadas, enquanto vermelho representa algo tempestuoso, perigo e raiva. Azul representa calma e mais paixão , enquanto amarelo representa sentimentos calorosos e felicidade. Nosso tema se baseia no nosso perfil casaldev, composto por mim Julio e minha esposa Helena. A cor Violeta Azul traz vários significados dentre eles destacamos para nossa logo e tema o conhecimento e sabedoria do violeta, unidade e tecnologia do azul e o amor do rosa.

O que é mais importante saber sobre as cores é que as pessoas percebem e veem as luzes e as cores de maneira um pouco diferente. Por exemplo, como vejo a cor azul pode variar e ser diferente de como você a vê, mas no final nós dois a chamamos de azul.

Também podemos ser afetados de maneira diferente pelas cores. Posso reagir de certa maneira a cores específicas, enquanto você pode reagir de maneira diferente às mesmas, porque as cores são relativas.

Geralmente nosso cliente tem uma identidade visual no seu negócio, devemos seguir esses padrões na criação do seu sistema.

Fonte/Tipografia

Fonte/Tipografia

Chegamos a um ponto muito importante para o design visual, que é a tipografia .

A tipografia é usada para dar uma linguagem adequada ao design do nosso sistema. Ao usá-lo corretamente, podemos criar um bom fluxo para que os usuários sigam e entendam a informação que queremos passar. Nosso título é destacando pela beleza da fonte Montserrat, Negrito, com tamanho 56, continuando o resumo com a mesma fonte, porém com tamanho 20 e regular. Imagina se colocarmos todas do mesmo tamanho, ficaria como um texto normal sem destaque.

Princípios de design

Em comparação com os conceitos básicos de design visual, princípios de design são mais sobre o grupo de leis ou diretrizes que precisam ser seguidas para que possamos criar projetos adequados que possam resolver os problemas dos usuários.

Quando seguimos as leis dos princípios de design, somos capazes de projetar coisas que terão significado para os usuários; por exemplo, se adicionarmos texto em um blog por exemplo, ele deve ser projetado de forma adequada para que os usuários possam lê-lo facilmente ou, se projetarmos uma interface de usuário para um sistema bancário, essa interface de usuário deve ser fácil de usar.

Então, para ter um design de produto de sucesso, os elementos de design visual devem ser combinados com as diretrizes do princípio de design. Então, quando esses dois são misturados de maneira adequada, o design final fará sentido para os usuários.

Aqui, vamos cobrir sete elementos, que são conhecidos como princípios de design, e que precisamos considerar antes de iniciar nosso processo de design visual. Os elementos são os seguintes:

  • Alinhamento
  • Hierarquia
  • Contraste
  • Repetição
  • Proximidade
  • Equilibrio
  • Espaço

Alinhamento

Alinhamento

O alinhamento é considerado o mais importante e o elemento mais fundamental ou básico que você deve saber quando for lidar com design visual.

Usando o alinhamento da maneira certa, podemos ordenar e equilibrar os elementos que estão incluídos em nosso design e, como resultado, podemos obter um design mais nítido e claro.

O alinhamento eliminará as distrações e a confusão de nosso design e alinhará os objetos da maneira adequada para que os usuários vejam um design limpo. Como cada elemento que incluiremos em nosso design visual tem seu próprio peso, não alinhá-los corretamente pode resultar em um design ruim.

Quando discutimos elementos que devem seguir o princípio de alinhamento, não estamos falando apenas sobre um específico, mas sobre todos os elementos de design visual, como cores, tamanhos, fontes e formas. Mais importante, o alinhamento pode fornecer um design agradável para os usuários e manter seu interesse positivo em continuar usando o nosso site ou sistema, porque cada elemento criará uma conexão visual entre si e será mais fácil para os usuários seguirem o fluxo do design visual.

Hierarquia

Hierarquia

Quando fazemos o design visual para um sistema, geralmente, teremos muitos elementos diferentes incluídos no design, e precisamos ter certeza de mostrar melhor as áreas mais importantes no design e dar-lhes uma melhor visibilidade para que os usuários possam receber o mensagem corretamente. A melhor maneira de fazer isso é seguindo o princípio da hierarquia.

Usando a hierarquia, podemos realizar bom design de diferentes maneiras, por exemplo, usando as cores adequadas em áreas específicas para as quais queremos chamar a atenção do usuário, ou tornando os títulos ou o texto mais ousados quando é algo importante, ou mesmo colocando elementos importantes em um nível superior no conteúdo do design e colocando os menos importantes embaixo.

A diferença de hierarquia pode ser definida como um princípio de design que coloca os elementos mais importantes em primeiro plano e os menos importantes em segundo plano.

Nesse exemplo, estamos no blog com um post aberto. Percebe-se a hierarquia de cima para baixo, trazendo em primeiro lugar o título bem destacado. E apesar do conteúdo do post ser mais importante, o autor, a data de postagem e o tempo de leitura foram colocados logo após mas de maneira menos destacada, com uma fonte bem menor.

Uma imagem para comunicar o assunto do blog, eliminando a necessidade até mesmo de um início de leitura para saber sobre o conteúdo, e por fim o post. Do lado direito, de maneira mais estreita estão itens complementares, enfatizando que eles estão ai apenas para auxiliar, nesse caso a pesquisa, novos tópicos e tags.

Contraste

Contraste

O contraste é um elemento importante do princípio de design porque podemos extrair elementos mais importantes do design e adicionar ênfase a ele usando-o.

O contraste geralmente acontece quando estamos lidando com dois elementos opostos no design; por exemplo, quando se trata de cores, o contraste pode ocorrer entre o preto e o branco. Quando estamos lidando com formas ou tipografia, o contraste aqui é espesso e tênue.

A principal razão pela qual usamos o contraste em nosso processo de design visual é para chamar a atenção do usuário e criar um foco em uma área específica do elemento de design que o usuário está olhando.

Aqui não precisa nem ficar procurando o botão para enviar o e-mail, o contraste de cor o destaca.

Repetição

Repetição

Quando queremos criar um design visual forte e consistente para nosso produto, usamos o princípio da repetição. Usando este princípio, podemos até amarrar ou conectar dois elementos diferentes e melhorar a consistência do design geral.

A consistência é uma das coisas mais importantes quando temos que lidar com o princípio da marca e da repetição. Isso nos ajuda mais a combinar diferentes elementos de design para serem vinculados uns aos outros e serem instantaneamente reconhecidos por nossos usuários.

Nossos links para as redes sociais, são dispostos repetidamente mesmo sendo de redes diferentes trazendo uma consistência no design e no assunto do bloco.

Proximidade

Proximidade

 A proximidade é uma parte importante dos princípios de design porque nos ajuda a criar um design visual organizado.

A proximidade lida principalmente com o agrupamento de elementos de design semelhantes e a criação de um relacionamento entre esses elementos de design. Quando lidamos com proximidade, sempre forneça um ponto focal para o usuário para que ele saiba onde nosso projeto começa e termina.

A proximidade nem sempre significa que colocamos os elementos de design juntos, mas fornecem algumas conexões visuais entre eles.

Nossa imagem de destaque traz a importância da proximidade na composição de nossa página. Os retângulos arredondados de destaques, mesmo estando distante traz uma conexão entre eles. A disposição dos posts recentes, tópicos e tags ajuda o usuário a encontrar com facilidade o que procura.

Equilíbrio

Equilíbrio

O princípio do projeto de equilíbrio é usado para dar forma e estabilidade ao nosso design visual. Isso significa que os elementos que temos em nosso design visual deve ser do mesmo tamanho, cor e forma, e eles precisam ser distribuídos de forma adequada e uniforme em todo o design visual que estamos criando.

O equilíbrio pode ser dividido em três grupos: simétrico, assimétrico e radial.

Equilíbrio simétrico significa que precisamos pesar os elementos em nosso design visual de maneira uniforme. Portanto, cada lado do design deve ter o mesmo peso dos elementos.

Com equilíbrio assimétrico, podemos usar contraste até mesmo nosso design elementos, por exemplo, se tivermos elementos escuros em nosso design, eles devem ser equilibrados por elementos claros.

Nesse exemplo a imagem está simetrica com nosso texto gerando assim um equilibrio e uniformização no design visual.

Espaço

Espaço

O espaço é uma parte realmente interessante e importante, que muitos designers esquecem de pensar no início. Tanto quanto nos preocupamos com o tipo de elementos estamos preenchendo nosso design visual, devemos também considerar suas partes em branco.

O espaço negativo (também conhecido como espaço em branco e espaço em branco) pode nos ajudar a destacar componentes importantes de nosso design visual da maneira certa para que ele possa se comunicar visualmente com nossos usuários.

Então, sempre precisamos considerar a importância do espaço negativo e positivo espaço. Por espaço positivo, refiro-me aos elementos de design que colocamos em nosso design visual, e por espaço negativo, refiro-me ao espaço vazio ou o espaço em branco de nosso design.

O uso dos espaços em branco nos traz leveza na leitura, no exemplo acima a composição com poucas palavras já traz a idéia do que se trata o site.

Ferramentas de Design Visual

Ferramentas de Design Visual

Agora que você entende claramente os elementos de design visual e os princípios de design, você precisa combinar todos esses elementos e princípios para chegar a uma ótima solução para seu design visual.

Além dos conceitos que abordamos até agora, para criar excelentes designs visuais de qualquer tipo, seja criando recursos gráficos ou interfaces de usuário, você precisará usar ferramentas de design e software para produzir o design final.

Antes de passar a ferramentas que mais utilizo dentre tantas que existem vamos discutir o que podemos fazer para nos inspirar. Para criar um design visual atraente e utilizável, precisamos nos manter inspirados e ser criativos. Se fosse tão fácil apenas usar as ferramentas e começar a fazer os designs, então todos fariam isso, certo?

Eu sugiro fortemente que se você deseja se concentrar em fazer seus próprios layout, você precisa se inspirar diariamente, e a melhor maneira de fazer isso é olhando o que os designers estão fazendo

Duas plataformas de inspiração de design, que sugiro que você use, são Behance e Dribbble. Eles têm uma grande e incrível comunidade de designers e agências de design, e você pode se inspirar em milhares de novos trabalhos enviados diariamente. A coisa boa sobre essas duas plataformas é que elas não estão focadas em apenas uma área de design - você pode se inspirar no trabalho designs de interface de usuário para web ou aplicativos móveis.

Ficar inspirado tornará seu trabalho de design visual muito mais fácil e o ajudará em todo o processo de design, resultando em designs visuais muito melhores e mais ideias exclusivas.

Depois de se inspirar e ter uma ideia melhor do que deseja projetar, é hora de escolher a ferramenta certa para criar seu design.

Em nosso curso de Fundamentos de UI no Figma, disponível explico mais detalhadamente e na prática o processo de como criar designs de interface de usuário excelentes. Aqui, vou apenas mencionar a ferramenta de design que utilizo para criação dos layouts. Essa ferramenta, como o próprio nome do curso já diz, se chama Figma, que é uma ferramenta online, com versão gratuita e que além de possuir excelentes recursos para desenvolvimento do layout, ela permite prototipar o sistema antes de partir para o código em si, permitindo assim uma interação com o usuário no desenvolvimento da parte visual. Além de você poder colaborar entre equipes.

Para finalizar recomendo fortemente que você coloque como prioridade a criação de design melhores. Lembre-se da máxima "a primeira impressão é a que fica".

Comentários

Faça o login para comentar e ver os comentários!

Login