Hierarquia visual em Wireframes

O uso da cor é uma das melhores maneiras de se comunicar a hierarquia visual de um projeto. Mas em um wireframe, é um dos piores. Se você estiver usando cores para mostrar o peso visual, o seu projeto final pode perder a clareza.

Cor hierárquica

É fácil de ver o peso de um elemento colorido em um wireframe porque tudo é preto e branco. Mas não há nenhuma maneira de saber se esse elemento terá a mesma clareza quando você traduzir esse wireframe para um maquete .

Isto é porque um mockup terá muitas outras cores que competem com ele. Qualquer elemento de cor no seu wireframe não aparecerá mais tão claro. O peso visual que você deu diminui quanto aos outros elementos da página que também têm cor.

hierarquia de clareza

Outro perigo de usar a cor é que muitos designers acabam contando com ele como a principal forma de mostrar hierarquia visual. É fácil de fazer elementos que destacam-se com cor em um wireframe. Mas como é a sua Classe de hierarquia visual sem ele?

Cor torna-se uma muleta para uma maior clareza, quando os designers negligenciam outros atributos hierárquicos. Não use cores para compensar a falta de design. Seu projeto deve ter uma hierarquia clara sem ele.

Seu projeto precisa incluir outros atributos para fazer o peso de elementos claros para todos os usuários.

Outros atributos de Hierarquia Visual

Adicionando cor ao seu wireframe torna difícil avaliar o quão forte sua hierarquia visual é. Isto é porque a cor ofusca outros atributos hierárquicos. Quando você evita a cor, você permiti que esses atributos pare de se destacar. O peso visual da cor se perde em um mockup, mas esses atributos permanecem intactos.

Tamanho

Nem todos os elementos devem ter o mesmo tamanho. Ele precisa ser olhado com maior relação aos outros elementos em torno dele, sempre de maneira proporcional.

hierarquia de tamanho

Forma

Você pode ter o conteúdo em uma página que você deseja destacar. Você não está limitado a apenas cor e tamanho. Você também pode usar a forma. Colocar uma caixa ao redor do conteúdo ou corta-la com uma linha mostra que a área é importante.

hierarquia de forma

localização

Usuários digitalizam as páginas em um padrão particular. Há áreas da página que com certeza vai receber mais atenção do que outros. Você pode colocar conteúdos importantes nessas áreas consideradas de atenção. Acima da dobra e ao longo da parte superior esquerda, são onde os olhos do usuário se fixar mais.

hierarquia de colocação

Cor Inversa

A maioria dos wireframes usam cores escuras em um fundo claro. Isso ocorre porque a maioria dos sites geralmente usam uma cor de fundo neutro.

Mas quando você inverter as cores, você estará aplicando uma cor clara sobre um fundo escuro. Esta é uma forma eficaz de comunicar a cor sem sugerir uma cor específica.

hierarquia inversa-coloração

Sugerindo uma cor específica, fará com que os espectadores se perguntem de que forma essa cor vai afetar o resto do design. Não é isso que você quer em um wireframe. Você quer que eles se concentrar sobre a estrutura e layout.

Você deve usar coloração inversa em elementos de interface que precisam de um forte preenchimento de cor. Botões, menus e notificações muitas vezes precisam dessa clareza visual, para que os usuários interagem-se com eles.

Use Ferramentas

Existem ferramentas que podem ajudá-lo a comunicar a hierarquia visual em seus wireframes de forma fácil. Utilizar essas ferramentas podem te ajudar muito no seu projeto, tanto para uma maior clareza visual, quanto hierárquica.

Compartilhe: