Princípio de Gutenberg

As vezes a gente já está tão acostumado com um padrão que a gente sem se dá conta de onde vem e do porquê estão sendo aplicados. E fazendo um trabalho para um cliente acabei parando um pouco para escrever e elaborar um pouco sobre um conceito que estudei na faculdade com a aulas dos incríveis Diogo Duarte Rodrigues e Rafael Rizzaro

Então vamos falar um pouco do Princípio de Gutenberg, ou Gutenberg Diagram

O Princípio de Gutenberg surgiu de estudos de como o olho humano percorre a página em culturas ocidentais. Ele não estipula um conjunto de procedimentos obrigatórios, mas sim descreve prováveis rotas de leitura. 

Diagrama mostrando um percurso visual em forma de Z, partindo do Logo no topo esquerdo (1), passando pelo botão ‘Sign Up’ no topo direito (2), descendo para o texto no canto inferior esquerdo (3) e chegando ao botão de Call-to-Action no canto inferior direito (4).

Hoje em dia, em sites, aplicativos e materiais impressos, o design mistura de tudo um pouco. Os profissionais acabam adaptando o Princípio de Gutenberg e unem suas ideias a outros conceitos de usabilidade, Gestalt e experiência do usuário (UX). Não existe uma fórmula engessada.

O “fluxo visual”se baseia em leitura da esquerda para a direita. Em culturas que leem da direita para a esquerda, essa lógica se inverte, então o diagrama também muda.

 

Na prática

O Princípio de Gutenberg serve como ponto de partida. Por exemplo, você costuma colocar o título no canto superior esquerdo (onde o olhar chega primeiro) e o botão de ação (CTA) no canto inferior direito (onde o leitor termina de ler).

Ele é muito usado, mas não é uma regra absoluta. Se a gente vai aplicar bem ou não depende do que a gente quer destacar, de qual é o público, da cultura e de outros princípios de design.

Ou seja, a ideia não é seguir uma fórmula pronta, mas sim entender como as pessoas leem para usar isso a favor do seu layout.

Duas interfaces lado a lado: a da esquerda marcada como incorreta, com botões e textos posicionados de forma confusa; a da direita marcada como correta, destacando o fluxo de leitura numerado e terminando em um botão de ação no canto inferior direito.
Comparação de dois layouts exemplificando a aplicação do Princípio de Gutenberg em um layout de website.

administrator

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

plugins premium WordPress