Os 3 Cs das interfaces do usuário: cor, contraste e conteúdo

Há um modelo de negócios antigo pelo qual muitos estrategistas de negócios vivem - os 3 Cs. É um lembrete para focar na empresa, clientes e concorrentes . Muitas pequenas empresas e sites também usam esse modelo. Mas para os designers, os três Cs são um pouco diferentes.

Ao criar interfaces de usuário, você deve se concentrar em cores, contraste e conteúdo. Esses três elementos são a base do bom design. Mas cada um é um pouco mais complexo do que parece da superfície. Veja como pensar - e incorporar - os três Cs das interfaces de usuário em seus projetos de design.

Explorar recursos de design

Cor

A cor é um dos elementos visuais mais óbvios para a maioria dos usuários. Tanto designers quanto não designers podem falar sobre cores e se um certo tom ou paleta lhes agrada.

A cor pode criar conexões emocionais distintas completamente por si só, sem outros efeitos. Você pode entregar uma amostra ou chip de cor a quase qualquer pessoa e obter uma reação sobre qualquer cor visível. Também é um elemento de design engraçado, pois as preferências pessoais e de design tendem a mudar com o tempo quase universalmente.

A cor pode criar ou quebrar um design por várias razões, mas basicamente faz muitas coisas e fornece tantas dicas visuais ao usuário simultaneamente que você não pode ignorá-lo.

Impactos de cores:

• Usabilidade e legibilidade
• Reconhecimento e conscientização da marca
• Onde os usuários olham e interagem
• Organização e fluxo de usuários
• Sucesso geral do design

Use cores para criar:

• Navegação clara e compreensível
• Interações intuitivas
• Um clima para o projeto
• Crie fortes apelos à ação ou elementos utilizáveis
• Estabeleça uma noção do que é o design, como realidade versus fantasia

Tudo isso pode parecer uma tarefa difícil para algo tão simples quanto uma mistura de vermelho, verde e azul.

Então, por onde você começa? Indiscutivelmente, as variáveis ​​mais importantes quando se trata de cores é criar uma paleta atraente para os usuários e falar sobre o que é o design (como branding e humor). Por exemplo, um site da Coca-Cola que usasse o azul como cor dominante em vez do vermelho seria chocante para os usuários.

Uma paleta de cores sólidas está enraizada nos princípios da teoria das cores.

Uma paleta de cores sólidas está enraizada nos princípios da teoria das cores. Você não precisa de mais do que duas cores para fazê-lo funcionar. Duas a três cores e uma boa biblioteca de variações mais claras e escuras são suficientes. A Mockplus recomenda a regra 6: 3: 1: escolha três cores para uma paleta, incluindo uma cor dominante que é usada 60% das vezes, uma cor secundária usada 30% das vezes e uma cor de destaque que pode estar nas demais 10% do design. A regra está enraizada na proporção áurea, um dos pilares da teoria do design e pode ser um ótimo ponto de partida.

Aqui está mais uma regra para criar paletas de cores nas interfaces do usuário: comece com preto e branco. Se o design for utilizável sem cor, provavelmente funcionará assim que a cor for adicionada. O contorno em preto e branco também fornece uma boa idéia de como escolher cores com contraste suficiente (o segundo C) para aprimorar a usabilidade.

Contraste

O contraste cria uma distinção entre elementos. Ajuda a criar hierarquia visual, digitalização e contribui para a facilidade de compreensão de algo. Elementos com forte contraste facilitam a visualização de um item para outro, criando um padrão visual natural e um fluxo do usuário.

A razão pela qual o contraste é tão importante para o design da interface do usuário é que ele faz parte de tudo que você faz. A maneira como você cria o contraste varia de acordo com o tipo de elemento de efeito visual envolvido.

Você pode estabelecer um contraste com:

• Cor
• Tamanho
• Direção
• Espaço
• Forma

Um elemento-chave das diretrizes de acessibilidade é o contraste, pois garante que os usuários possam discernir um elemento de outro no design. O Projeto A11Y, que tem como objetivo facilitar a acessibilidade da Web, tem esta recomendação: comece com o contraste de cores usando cores de diferentes segmentos da roda de cores ou cores contrastantes. Lembre-se de que cores complementares - opostas na roda de cores - proporcionam o máximo contraste.

O mesmo conceito se aplica à criação de contraste entre outros elementos também. Escolha tipos de letra de famílias diferentes ou use tamanhos dramaticamente diferentes para ajudar os usuários a ler as palavras rapidamente.

Em resumo, a idéia por trás do contraste é que os opostos se atraem.

Use sinais direcionais, setas ou imagens com movimento para ajudar a forçar o usuário a olhar em uma determinada direção; depois, gire a sugestão direcional para obter ainda mais contraste.

A diferença entre espaço apertado e aberto cria muito contraste. Se você deseja garantir que seu texto seja fácil de ver e ler, dê um pouco mais de espaço para chamar a atenção.

Em resumo, a idéia por trás do contraste é que os opostos se atraem. Elementos aparentemente diferentes podem realmente trabalhar juntos para facilitar a visualização de ambos.

Para saber se o contraste está funcionando da maneira que você pretende, pense em alguns fatores ao observar os elementos na tela:

• Legibilidade: Todas as palavras e imagens são fáceis de ver e ler?
• Clareza: É fácil distinguir um elemento de outro?
• Acessibilidade: Funciona para o maior número possível de pessoas?
• Ambiente: os usuários podem ver e entender o design nos locais onde será usado?

Conteúdo

O último dos três Cs é o conteúdo. O design da interface do usuário pode ser tão bom quanto as informações nele contidas. O conteúdo inclui tudo, desde imagens a textos, ilustrações e ícones, logotipos e marcas de marca. O conteúdo também inclui vídeo e toda a cópia, desde a mensagem completa ou a narrativa, até as postagens do blog, até pequenos pedaços de microcópia.

Apenas ter conteúdo não é suficiente. Você precisa ter um conteúdo estelar.

Todos esses elementos se reúnem para contar a história do que torna seu design e interface de usuário especiais. Por que os usuários devem dedicar seu tempo, em vez de fazer outra coisa?

E apenas ter conteúdo não é suficiente. Você precisa ter um conteúdo estelar. Conteúdo de alta resolução. Conteúdo de alto valor. Seu conteúdo deve ser melhor / maior / mais especial que o conteúdo semelhante, competindo pela atenção dos usuários.

Isso pode ser uma tarefa difícil, mas a maioria dos designers pode criar esse conteúdo sendo fiel a eles mesmos, à marca e às mensagens. Atenha-se ao que você é e ao que você sabe. Os usuários verão essa autenticidade e esperam valorizá-la gastando tempo com seu design.

Conclusão

Agora que você está armado com os três Cs antigos dos negócios - empresa, clientes e concorrentes - e os três Cs do design da interface do usuário - cor, contraste e conteúdo - você tem as ferramentas e o conhecimento para criar um projeto de design fora do mundo Boa. (Ou pelo menos altamente utilizável.)

Ao trabalhar as duas estratégias em projetos de design, você é forçado a pensar em como criar algo que beneficiará o proprietário e o usuário do site. Você está criando não apenas para que o design seja bonito, mas também funcional.

Nota: Todos os exemplos neste artigo são da Design Shack Gallery. Certifique-se de dar uma olhada ao redor; está cheio de ótimos trabalhos e inspiração.