4 princípios de design CRAP para um melhor UX

Publicados: 2022-10-11

Uma boa experiência do usuário é a chave para o sucesso de qualquer site ou aplicativo. Se você deseja melhorá-lo, deve dominar os princípios básicos de design do CRAP. Ele permitirá que você crie uma experiência de usuário mais intuitiva e satisfatória para seus clientes e tenha sucesso no mercado competitivo de hoje.

De acordo com as estatísticas , 88% das pessoas que compram online dizem que não voltariam a um site se tivessem uma experiência de usuário ruim. Além disso, apenas 55% das empresas testam UX para fins comerciais. E em vão, porque o UX pode não apenas aumentar o tráfego do seu site, mas também sua renda mensal.

Muitos fatores diferentes entram na criação de um bom UX, mas um dos mais importantes é usar os princípios de design corretos. Vamos dar uma olhada no que são os princípios de design do CRAP e como usá-los para fornecer uma melhor experiência de usuário para seus visitantes.

Índice

O que significam os princípios de design do CRAP?

Não existe um design perfeito, mas existem maneiras de torná-los melhores. Por exemplo, para melhorar a qualidade do texto, pode-se visitar sites de revisão de ensaios, como Best Writers Online . Para melhorar o layout do design em si, você também pode consultar profissionais ou tentar resolver o problema usando os princípios de design do CRAP.

CRAP é um acrônimo cunhado por Robin Patricia Williams, representando quatro princípios de design gráfico: Contraste, Repetição, Alinhamento e Proximidade. Ao utilizar os princípios de design do CRAP, você pode fornecer consistentemente designs atraentes para um site, um banner, um anúncio de mídia social, um pôster, um e-book, etc.

Os princípios de design do CRAP funcionam como um conjunto de diretrizes que você pode usar para melhorar a usabilidade do seu site . Os designers devem usar esses princípios em todo e qualquer design que criarem. Vamos dar uma olhada em cada um dos quatro princípios de design do CRAP:

1. Contraste

bom vs mau contraste
Contraste – o primeiro dos 4 princípios de design do CRAP. Fonte da imagem: https://www.lrswebsolutions.com/

Este princípio afirma que os elementos em uma página devem ter contraste suficiente para que sejam facilmente distinguíveis uns dos outros. É essencial por razões de usabilidade e acessibilidade.

O baixo contraste pode dificultar a leitura de texto ou clicar em links, além de causar problemas para usuários com deficiência visual. Ao garantir que haja contraste suficiente entre os elementos em seu site ou produto, você pode tornar muito mais fácil para todos os usuários navegar e usar seu site ou produto.

Além disso, existem muitos tipos diferentes de contraste, não limitados apenas ao contraste de cores.

Você pode criar contraste tornando elementos específicos maiores ou talvez menores. É possível destacar elementos de design aumentando a distância de outros elementos, ajustando o espaço em branco ao redor deles ou alterando sua forma para que se destaque do restante do design. Mesmo aplicar uma textura diferente pode ser uma forma de criar contraste visual.

Diferentes tipos de contraste
Diferentes tipos de contraste. Fonte da imagem: www.duarte.com

O contraste tem tudo a ver com garantir que os diferentes elementos da sua página se destaquem uns dos outros. Use o contraste para criar interesse visual e destacar informações importantes.

Experimente e tente usar uma mistura de cores claras e escuras, texturas diferentes, formas diferentes, proximidade alternada e fontes contrastantes enquanto tenta dominar o primeiro dos 4 princípios de design CRAP.

Lembre-se, desde que haja uma distinção clara entre os vários elementos e você não esteja sacrificando outros princípios de design CRAP, então você está fazendo certo.

2. Repetição

princípio de design de repetição
Repetição – o segundo dos 4 princípios de design do CRAP. Fonte da imagem: ux360.design

Repetição é a recorrência intencional de um elemento específico em um projeto. A repetição ajuda a criar um senso de unidade em sua página. Ele une tudo e faz parecer que pertence um ao outro. Pode lembrá-lo de escrever um ensaio no qual todas as palavras são organizadas logicamente para expressar uma ideia.

Embora as tarefas de redação possam ser delegadas a profissionais do Writing Judge , dominar os princípios de design do CRAP é um assunto que você deve aprender se quiser produzir designs incríveis no futuro.

Usar as mesmas cores, fontes ou formas em todo o design ajuda a criar uma aparência coesa e fácil de entender para os usuários. É muito mais fácil pesquisar e encontrar informações relevantes quando os parágrafos são dispostos de maneira semelhante em páginas diferentes. Além disso, a navegação fica muito mais fácil quando os elementos de navegação são previsíveis e repetitivos.

Quando usada corretamente, a repetição também pode ajudar a enfatizar certos elementos e tornar o design mais memorável. Por exemplo, alguns atributos de marca na forma de cor, forma, logotipo ou slogan podem ser repetidos continuamente nos designs, mesmo em diferentes mídias.

Você pode usá-lo não apenas no contexto de um design individual, mas também conectar todos os seus designs relacionados. É por isso que de todos os princípios de design do CRAP, este princípio pode ser usado mais amplamente.

3. Alinhamento

princípio de design de alinhamento
Alinhamento – o terceiro dos 4 princípios de design do CRAP. Fonte da imagem: www.dribbble.com/MelTaube

Alinhamento é o processo de organizar os elementos em sua página da web de maneira organizada. Inclui tudo, desde o alinhamento do texto em uma página até a colocação de imagens e outros elementos visuais.

Alinhamento não é apenas alinhar elementos ao centro, à direita ou à esquerda. Também envolve o alinhamento entre objetos separados, blocos de texto e todos os outros elementos de design. As grades podem ser empregadas para garantir alinhamento e ordem precisos.

De todos os princípios de projeto do CRAP, é provavelmente o mais fácil detectar uma violação do princípio de projeto de alinhamento. Nossos cérebros detectam imediatamente até mesmo inconsistências visuais mínimas. Essa sensibilidade a anomalias minúsculas obriga os projetistas a prestar muita atenção ao alinhamento adequado de tudo no projeto. Por outro lado, o design cuidadosamente alinhado transmite uma sensação de ordem e conforto.

Um site bem alinhado parecerá mais profissional e será mais fácil para os usuários digitalizarem em questão de minutos, enquanto um alinhamento ruim pode torná-lo caótico e chocante. Esse caos e essas inconsistências podem até desviar a atenção dos elementos mais importantes.

Pelo contrário, quando os elementos são meticulosamente organizados, não damos conta de tudo, e nossa atenção vai para o que mais importa – a mensagem principal.

Ao prestar atenção a este princípio, você pode criar designs agradáveis ​​à vista e que funcionem bem em um nível prático.

4. Proximidade

princípio de design de proximidade
Proximidade – o quarto dos 4 princípios de design do CRAP. Fonte da imagem: www.uxplanet.org

O princípio da proximidade afirma que os elementos relacionados devem estar próximos uns dos outros para que os usuários possam ver facilmente a relação entre eles. Vice-versa, você pode distinguir itens não relacionados criando distância entre eles.

A aplicação correta desse princípio ajuda a reduzir a confusão em uma página e torna mais fácil para os usuários encontrarem o que procuram. A proximidade pode ser alcançada agrupando itens relacionados usando espaço em branco, listas e outros elementos de design.

No entanto, tenha cuidado com as consequências não intencionais ao tentar aplicar esse princípio de design. A proximidade tem um lugar especial entre os princípios de design do CRAP porque tem o poder de dominar os três princípios de design do CRAP restantes. A proximidade está tão arraigada em nossa percepção que tem um efeito muito mais forte do que outras características visuais como cor, forma, brilho, etc.

Veja na imagem abaixo que percebemos objetos que estão próximos como grupos, apesar de terem características visuais muito distintas.

a proximidade supera outros recursos
Proximidade – o quarto dos 4 princípios de design do CRAP. Fonte da imagem: www.uxmisfit.com

Você pode comunicar com eficácia as relações entre diferentes partes da informação, incorporando um senso de proximidade em seus projetos. Isso pode ajudar a organizar e entender melhor seus designs.

Ao entender e aplicar esses princípios de design CRAP, os designers podem criar composições atraentes.

Por que usar princípios de design CRAP?

Os princípios de design do CRAP são importantes porque fornecem orientação sobre como criar designs visuais eficazes e agradáveis ​​aos olhos:

  • O contraste é importante porque ajuda a criar interesse visual e a destacar elementos importantes;
  • A repetição ajuda a criar um senso de unidade e a reforçar a mensagem geral;
  • O alinhamento garante que os elementos sejam colocados de maneira lógica e coesa;
  • A proximidade ajuda a agrupar elementos relacionados e enfatizar as relações entre eles.

Ao usar esses princípios de design CRAP, você pode garantir que seus designs sejam visualmente atraentes e fáceis de entender para o consumidor final.

Valide seus conceitos de desempenho durante o estágio de design com análise de atenção gerada por IA

Experimente grátis por 7 dias Agende uma chamada de demonstração

Como usar os princípios de design do CRAP corretamente

Usando os princípios de design do CRAP, você pode criar um site mais amigável, fácil de navegar e com aparência mais profissional. Esses princípios podem ser aplicados a qualquer tipo de página da Web, seja uma página de destino ou um site de comércio eletrônico.

Lembre-se de que contraste, repetição, alinhamento e proximidade são fatores importantes na criação de um design eficaz. Portanto, tente usar todos os quatro princípios de design do CRAP em todos os aspectos do design do seu site. Vamos dar uma olhada em como você pode usá-los para criar um UX melhor para o seu site:

1. Crie um design de alto contraste

contraste bom e ruim do botão cta
Fonte da imagem: www.admiral.digital

Usar cores de alto contraste é uma das maneiras mais fáceis de garantir que seu site seja fácil de ler. O texto preto sobre um fundo branco é o padrão para a maioria dos sites, mas você também pode experimentar outras combinações de cores para ver o que funciona melhor para o seu site. Apenas certifique-se de que haja contraste suficiente entre as cores para que os usuários possam ler facilmente seu texto.

Por exemplo, se você deseja destacar um botão de chamada para ação, use uma cor que contraste fortemente com a cor de fundo do seu site. Ao usar o contraste, você pode direcionar os olhos dos usuários para os elementos mais importantes da sua página, criando ênfase e ajudando-os a entender melhor o seu conteúdo.

Uma maneira de criar ênfase de cores pode ser usando cores de diferentes temperaturas. Você pode criar um efeito bastante dramático contrastando vermelhos, laranjas ou amarelos de temperatura quente com azuis e verdes frios. Essa técnica é usada no design da imagem abaixo.

exemplo de contraste de temperatura de cor botão cta
exemplo de contraste de temperatura de cor visualização de mapa de calor do botão cta

Web design e seu mapa de calor de atenção. Fonte da imagem: www.dribbble.com/NpaulFlavius

O bom espaçamento do texto e o contraste do tamanho garantem que até mesmo o menor texto seja visto (consulte a visualização do mapa de calor de atenção), e o alto contraste da cor do botão CTA torna difícil de perder. Pontos de acesso sobre esses elementos no mapa de calor de atenção, que mostram onde as pessoas olharão primeiro, confirmam isso. A cor amarela brilhante realmente se destaca naquele fundo azulado mais frio e direciona nossa atenção não apenas para o botão CTA, mas também para a imagem.

Além disso, por causa desse equilíbrio entre o amarelo na imagem e o botão, e o fato de ambas as cores se desviarem ligeiramente para o lado mais frio, o design ainda consegue parecer harmonioso e coeso.

Outra maneira de criar contraste de cor é ajustar a saturação de cor. A cor com 100% de saturação está em seu estado mais brilhante e intenso. Combinar cores muito saturadas com cores esmaecidas e menos saturadas pode ser uma ótima maneira de chamar a atenção para elementos essenciais. Este web design na imagem abaixo mostra um exemplo brilhante disso.

Exemplo de design de contraste de saturação de cor
mapa de calor do web design fanfarrão selvagem

Web design e seu mapa de calor de atenção. Fonte da imagem: www.dribbble.com/greenchameleon

Ele apresenta um título avermelhado muito vívido e saturado no cenário verde pálido de uma floresta. Um efeito duplo está ocorrendo neste exemplo de contraste de cores. O fato de essas duas cores serem complementares por si só as torna muito contrastantes. Além disso, o aumento da saturação de vermelho e verde suave aumenta o efeito dramático.

Como podemos ver no mapa de calor de atenção, há um grande ponto de acesso vermelho sobre as letras vermelhas. Isso significa que o título captura bastante a atenção dos espectadores como foi planejado. O contraste de cores usando saturação faz o trabalho de enfatizar elementos específicos perfeitamente.

Existem ainda mais maneiras de criar contraste. Você também pode usar cores claras e escuras, diferentes formas e texturas, orientação, tipografia, escala, nível de complexidade e outros recursos para criar o contraste desejado entre os elementos.

Para ter certeza de que você está do lado seguro em relação ao contraste do seu design, experimente a ferramenta Taxa de contraste . Experimente cores diferentes e verifique se o contraste de suas combinações de cores não fica abaixo da taxa de contraste recomendada , que é de pelo menos 4,5:1 .

Se você gosta de design baseado em dados , pode verificar novamente se o contraste criado tem algum efeito na atenção dos espectadores. Você pode fazer isso sem esforço em segundos com a ferramenta AI heatmap que produz mapas de calor de atenção semelhantes aos que você viu acima. Quando você tenta criar um ponto focal no design usando contraste, os mapas de calor de atenção podem revelar se seus esforços são suficientes ou se você precisa aumentar ainda mais o contraste.

2. Use os mesmos elementos em todo o site

Repetir elementos específicos em um design ajuda a dar ao seu site uma aparência unificada. Por exemplo, se você usar a mesma fonte para todos os seus títulos, todos os seus designs parecerão conectados e os usuários começarão a associar essa fonte à sua marca.

Na verdade, princípios como hierarquia visual, ritmo e unidade dependem muito da repetição. Sem a repetição consistente de elementos de mesmo tamanho e estruturas semelhantes, seria muito difícil estabelecer uma hierarquia visual em sua web ou em qualquer outro design. Os espectadores terão dificuldade em perceber a estrutura hierárquica se todos os elementos forem diferentes e únicos.

A repetição de elementos ajuda a criar uma aparência consistente para o seu site e facilita a navegação dos usuários. Você pode repetir elementos como fontes, ícones, logotipo, imagens, cores, padrões e layouts de página. É importante não exagerar na repetição, mas usá-lo com moderação pode ajudar a unir todos os diferentes elementos do seu site.

Vejamos alguns exemplos. No infográfico abaixo, você pode ver o uso bastante sutil da repetição. Diferentes seções têm os mesmos gráficos de fita para conter seus títulos. Os títulos mantêm a mesma tipografia e cor de fonte.

infográfico de previsão de realizações
Fonte da imagem: www.venngage.com

Além disso, as mesmas cores se repetem em todo o infográfico. Como resultado, embora cada seção pareça muito diferente, essas semelhanças amarram tudo de forma unificada. Toda essa variedade de layouts, formas e tamanhos parece funcionar harmoniosamente.

E quanto a apenas repetição de cores? O que poderia parecer? Dê uma olhada em como a Coca-Cola repete sua cor vermelha básica em sua página.

coca cola web design eua
Uma captura de tela de uma parte do site da Coca-Cola abaixo da seção dobrada.

A cor vermelha aparece em banners, textos, botões e rótulos de garrafas. Esse uso repetitivo da mesma cor primária da marca cria a unidade da marca em todos os seus designs. Tal estratégia inconscientemente faz com que você associe cada vez mais a cor vermelha à sua marca a cada exposição de seus designs.

A repetição de cores também pode ser feita de forma mais sutil. Para ilustrar, vejamos abaixo o web design da organização sem fins lucrativos Heroines . Como esquema de cores para o site, eles escolheram a mesma paleta de tons femininos associados à marca.

Site das heroínas acima da captura de tela da dobra
Captura de tela da seção acima da dobra do site da Heroine.

Essa consistência de cores suaves permite que sua página tome decisões de design ousadas, como forte assimetria e banners de rolagem. No final, chama a atenção e é gentil com uma aparência profissional.

Existem muitas outras maneiras de usar a repetição. Experimente para descobrir qual se encaixa mais no seu design. Além disso, não se esqueça de outros princípios de design CRAP.

3. Mantenha seu site organizado

alinhamento do site
Fonte da imagem: www.uxengineer.com

Certificar-se de que tudo em seu site está alinhado corretamente cria uma sensação de ordem, o que ajuda os usuários a se sentirem mais confortáveis ​​enquanto navegam em seu site. Ninguém gosta de se sentir perdido ou confuso quando está tentando encontrar algo em um site, então gastar algum tempo alinhando tudo corretamente pode compensar em termos de experiência do usuário.

O alinhamento adequado do texto em um site permite que o leitor o examine muito mais rapidamente e, por sua vez, encontre as informações de que precisa mais rapidamente. Por outro lado, um alinhamento inadequado dificulta essa tarefa para o visitante. Vamos dar uma olhada neste exemplo de alinhamento amador.

página da web com alinhamento de texto amador
Exemplo de página da Web com alinhamento de texto amador. Fonte da imagem: www.vanseodesign.com

Não é tão fácil digitalizar rapidamente a página. O alinhamento centralizado não é a escolha certa quando você tem blocos de texto maiores. Cada linha do texto começa em um lugar diferente. Essa inconsistência espacial faz com que nossos olhos vaguem mais e cria uma carga cognitiva maior para nossos cérebros que estão tentando encontrar o ponto de partida de cada linha, parágrafo ou seção em um lugar diferente.

Quando você alinha o texto à esquerda e organiza cuidadosamente todas as seções para ficarem alinhadas umas com as outras, nosso cérebro tem menos trabalho a fazer.

página da web com texto alinhado corretamente
Exemplo de página da Web com um alinhamento de texto adequado. Fonte da imagem: www.vanseodesign.com

Agora nossos olhos precisam cobrir uma distância menor por causa de um início muito mais previsível de cada linha – o início de cada linha é alinhado à esquerda. Além disso, nossos cérebros têm muito mais facilidade, permitindo que não desperdicemos energia adicional nessa tarefa desnecessária. Isso, por sua vez, cria uma sensação de experiência mais confortável ao digitalizar e ler este site.

Os mesmos princípios também se aplicam a detalhes menores. Nosso próximo exemplo abaixo provará isso. A opção à esquerda não é terrível ou muito ruim, mas algo não parece certo.

alinhamento de depoimento - bom e ruim
Um bom e um mau exemplo de alinhamento de testemunho. Fonte da imagem: www.balsamiq.com

É porque o texto está alinhado com aspas e hífen. Na opção certa, o texto fica alinhado com o texto e não com outros símbolos. Esse pequeno ajuste o torna um pouco mais legível para os espectadores e também um pouco mais bonito.

Uma ferramenta útil para essa tarefa de organizar tudo visualmente pode ser uma grade. Você pode encontrá-los em aplicativos de design como um recurso que facilita o processo de alinhamento. Um dos mais populares é a grade de 12 colunas.

Página inicial da WeWork
Página inicial do WeWork com grade

Página inicial do WeWork sem grade (à esquerda) e com grade e limites destacados de elementos e seções (à direita). Fonte da imagem: www.uxdesign.cc

No exemplo acima, você pode ver duas capturas de tela da página inicial do WeWork – uma sem grade e outra com grade sobreposta e limites de elementos e seções.

Você pode notar que esta página foi projetada usando esta grade de 12 colunas. Tudo parece bonito e organizado e cria uma sensação harmoniosa. Este é o efeito do alinhamento adequado em um projeto.

4. Agrupar itens semelhantes

Quando você agrupa os itens corretamente, torna muito mais fácil para os usuários encontrarem o que procuram de forma rápida e fácil. É especialmente importante para sites de comércio eletrônico, onde os usuários precisam encontrar produtos de forma rápida e eficiente sem ficarem frustrados.

exemplo de princípio de proximidade em e-commerce
Exemplo de como a proximidade pode ser aplicada a uma grade de produtos. Fonte da imagem: www.uxmisfit.com

Na imagem acima, à esquerda, você pode ver um wireframe de página de comércio eletrônico com miniaturas, títulos e tudo o mais amontoado sem espaços em branco entre eles. É um desafio para os olhos discernir quais botões se relacionam com qual miniatura.

Porém, à direita, quando o princípio da proximidade é aplicado corretamente, tudo fica muito mais claro. Cada miniatura com elementos pertencentes é separada de outras miniaturas usando espaços em branco.

Agora, cada miniatura com título, descrição e botões relacionados funciona como um grupo separado. Nossos cérebros podem reconhecer muito mais rapidamente que os elementos desses grupos estão relacionados. Ele remove o atrito mental desnecessário e torna a experiência do usuário muito mais suave.

No entanto, não apenas os sites de comércio eletrônico se beneficiam do princípio do design de proximidade. O princípio de proximidade bem aplicado é valioso em cada tipo de projeto.

Agrupar itens semelhantes é uma ótima maneira de reduzir a confusão em seu site e torná-lo mais atraente visualmente. Ele pode reduzir a complexidade e facilitar o processamento de páginas da Web mais longas e complexas.

Por exemplo, se você tiver muitos tipos diferentes de conteúdo em seu site, agrupe-os por categoria em vez de distribuí-los aleatoriamente pela página. Você pode observar um exemplo do princípio de proximidade aplicado corretamente nos dois wireframes a seguir (imagem abaixo).

princípio de proximidade em um wireframe
Dois wireframes de página da web representando o uso do princípio de proximidade. Fonte da imagem: www.medium.muz.li

Estas são duas opções possíveis de como diferentes tipos de conteúdo podem ser organizados em uma página, agrupando itens semelhantes. Os objetos relacionados são posicionados mais próximos, formando seções distintas, e essas seções são separadas por espaços em branco.

Os olhos são capazes de navegar nesta página com facilidade. Imagine que bagunça seria se todos os elementos estivessem espalhados sem essa estrutura e sem nenhum espaço em branco entre eles. Os princípios de design do CRAP permitem que você evite tais resultados.

Princípios de design do CRAP resumidos

Os princípios de design do CRAP são uma ótima maneira de melhorar a usabilidade do seu site e criar uma melhor experiência geral do usuário. Ao usar cores de alto contraste, repetir determinados elementos em todo o site, manter tudo alinhado corretamente e agrupar itens semelhantes, você pode ajudar a garantir que os usuários tenham uma experiência positiva ao navegar pelo site, o que levará a mais conversões no longo prazo.