As diferenças são a forma mais eficaz de chamar a atenção e ser lembrado pelo usuário. Através do contraste, os designers podem destacar elementos e informações essenciais, criar um layout elegante e envolver o usuário com detalhes incomuns.
Veja aqui dicas e exemplos sobre como usar o contraste no design de UI para atrair a atenção dos usuários.
Tamanho e pontos na composição
Objetos maiores no layout são percebidos melhor pelos usuários. Eles contrastam e chamam mais atenção do que os pequenos. Um exemplo de uso de contraste de tamanho são fontes diferentes. Informações mais importantes são destacadas em uma fonte maior.
Por exemplo — o título deve estar em uma fonte maior. É mais visível e legível do que o resto do texto. Aqui você pode ver outro exemplo de contraste de tamanho. A ação de destino é implementada com um botão “sim” mais proeminente. Isso aumenta o desejo de clicar nele. É mais correto tornar as opções de falha menos contrastantes, inclusive devido ao tamanho menor.
Contraste de cor e fundo
O contraste de cores é a diferença entre o brilho das cores. O contraste impressionante mostra quão clara ou escura é uma cor. Uma cor contrastante no design é usada para destacar a ação principal da composição.
Elementos criativos
Outro contraste incomum é a diferença entre elementos de interface do usuário criativos e interessantes e detalhes de layout familiares. Podem ser ilustrações incomuns, formas interessantes, pop-ups, animações e muito mais.
Tais elementos se destacam entre os detalhes familiares ao usuário — botões, formulários web e outros blocos comuns ao site. Assim, o designer chama a atenção para as informações necessárias, um banner com uma promoção e uma chamada para ação, podendo estimular o visitante do site a realizar uma ação direcionada.
Movimento principal
Objetos em movimento atraem mais a atenção dos usuários e nunca passam despercebidos. É eficaz usar animação para controlar a atenção do usuário.
Um exemplo dessa composição é o tubo de retorno de chamada “pulando”, que você provavelmente conheceu em sites comerciais. Ele incentiva os usuários a clicar nele.
Texturas
Com a ajuda de diferentes texturas e padrões, você também pode criar contraste entre os blocos do seu desenho, chamando a atenção do usuário para detalhes específicos. Além disso, as texturas costumam ser usadas como fundo para objetos que podem ser usados como contraste. Por exemplo, um elemento claro em uma textura escura não é apenas um contraste de cor, mas também um contraste de “materiais”.
Composição
Outra abordagem baseada no contraste são os recursos de composição da interface do usuário. Os elementos podem ser dispostos de forma a chamar a atenção dos usuários devido ao espaçamento entre eles. Esta abordagem é caracterizada pela presença de espaço em branco no site.
Os designers usam muito espaço em branco e, assim, chamam a atenção para os objetos: imagem do produto, título, menu e call to action.
Além disso, outra forma de chamar a atenção do usuário para um objeto é torná-lo um elemento “âncora”. São elementos que estão localizados de forma que, desde os primeiros segundos de visualização do layout, “prendem” o olhar do usuário. O papel de tais objetos é tanto gráficos (imagens, gráficos, etc.), quanto títulos, formas geométricas, chamadas para ação e assim por diante.
Formulários
A forma de um elemento é outra forma de destacá-lo no layout e chamar a atenção do usuário. Esta técnica pode ser ilustrada com figuras geométricas simples. Se colocarmos quatro figuras do mesmo tamanho e cor seguidas, mas uma delas tiver uma forma diferente, isso chamará a atenção imediatamente.
No design, tudo funciona com o mesmo princípio. Freqüentemente, os elementos são moldados em formas geométricas ou simplesmente colocados em blocos de várias formas. Ao mesmo tempo, é importante manter o equilíbrio na composição e não destacar elementos se isso não for necessário. Você também precisa monitorar a harmonia e coincidência da forma com o estilo do projeto. Claro, combinações inusitadas também são possíveis, mas neste caso a composição e o estilo devem estar em harmonia.
Tipografia
Você também pode criar contraste com a tipografia. Isso é visto claramente em artigos e outros tipos de conteúdo de texto. Ao criar um design, não apenas grafias diferentes são usadas, mas também fontes. Por exemplo, se você precisa chamar a atenção do usuário para uma informação específica, pode destacá-la em uma fonte diferente do conteúdo principal ou aumentar o tamanho da inscrição. É importante seguir os princípios básicos da tipografia:
não use mais do que 2–3 fontes no layout
não use fontes que não correspondam ao estilo do site (por exemplo, fontes manuscritas para tendências modernas, como “design plano”)
observe o espaçamento entre linhas, separe o texto em parágrafos e assim por diante.
Botão
A cor de um botão é apenas um aspecto, também existe a cor e o volume de seu rótulo ou de sua borda (se houver). Tudo isso, como a composição, é capaz de informar as pessoas sobre seu estado atual. Quando o contraste é claro, também fica claro se um determinado elemento é interativo, ativo ou desativado e que tipo de ação ele denota: primário ou secundário.
Se você não quiser que as combinações de cores sejam desconfortáveis, evite usar duas cores muito brilhantes ou muito semelhantes. Pense nas tonalidades e sombras que você está usando. Não combine duas cores muito brilhantes, pois isso será um desafio visual para os espectadores.
