Alda "mjcoffeeholick" Rocha
UX Designer e Diretora de arte digital
São Paulo - SP

Making off de trabalhos, dicas, imagens, textos e tutoriais.

O peso das palavras em uma imagem

Certa vez estava avaliando uma arte de cartão pessoal de um amigo que pediu opiniões a respeito da arte. Percebi que não havia destaque, nem peso nas letras ou textos, não havia profundidade.

Em termos de tipografia, o cartão era RETO e não tinha atrativo algum. Com isso a pessoa que pegava o cartão na mão ficava perdida com os olhos, sem saber o que ler primeiro. As informações chegavam aos olhos com o mesmo peso.

Existe usabilidade tb em cartão pessoal (existe usabilidade pra qualquer coisa) , afinal vc precisa ordenar o que quer informar e qual dessas informações você quer quem pege o cartão na mão leia primeiro. Influenciar pessoas é uma usabilidade, com truques você acaba guiando da forma que for melhor os olhos de quem lê e passa a informação exata .

Image Hosted by ImageShack.us

You can influence what people see, or think they see, by the use of shapes and colors. …color can draw attention to one message over another. Colors and shapes can influence what people see.Image Hosted by ImageShack.us

Como fazer isso ?
Como dar peso as coisas e influenciar quem lê só com cores e formas ?

Vou citar um exemplo simples com um tutorial passo a passo de como usar o texto a seu favor.

Peso pq?
Assim como na linguagem html + CSS criamos hierarquia com h1 , h2 , h3 … visualmente falando podemos recriar essa importância, essa escada que faz com que vejamos em sequência o texto escrito.
ex.
Image Hosted by ImageShack.us
vamos imaginar que recebemos um pedido para que na frente do cartão tenha um título de importância 1 , o nome da pessoa de importância 2 e o nickname dela com importância 3. Image Hosted by ImageShack.us
Se só escrevemos as informações, mesmo que com uma fonte diferente, você pode notar que fica confuso, e nos obriga a ficar olhando uns segundos pra entender e separar o que é titulo , o que é nome e o que é nickname.

Esses segundo são como aqueles silêncios mórbidos que acontecem quando uma conversa não vai bem ou o papo com aquela pessoa não é tão interessante… chato né? Então como afinal fazer com que o caos fique organizado e que consigamos ler por ordem de importância as informações ? Image Hosted by ImageShack.usImage Hosted by ImageShack.usImage Hosted by ImageShack.us
Podemos usar o recurso mais básico que é jogar cor no texto.
Se pintarmos cada linha, já podemos observar que o texto se destaca. Image Hosted by ImageShack.us
E se cada linha tiver uma cor diferente conseguimos dar destaque na hierarquia que buscamos. Image Hosted by ImageShack.us
Note que seus olhos passam pelas palavras uma de cada vez e buscam a cor que mais chama a atencão pra iniciar a leitura. Image Hosted by ImageShack.us
Pensando nisso, vamos colocar a cor que mais se destaca onde queremos que a pessoa começe a ler, nesse caso o título. Image Hosted by ImageShack.us
Você pode notar que mesmo com a cor em destaque o texto ainda continua confuso. Isso é pq as fontes tem a mesma família e o mesmo tamanho, fazendo com que a hierarquia não exista.
Se são todas do mesmo tamanho, todas estão com mesmo grau de importância. Resolvemos isso criando uma distância entre os textos, diminuindo o tamanho das fontes e trocando a família de alguns textos.

Image Hosted by ImageShack.us 
Com a distância damos um respiro visual entre um texto e outro que deixa claro que primeiro lemos o titulo ( a cor forte ajuda ) e depois lemos o autor e nickname( peso , 1 , 2 e 3 ) . Image Hosted by ImageShack.us
Podemos completar esse ajuste alinhando ao centro , esse tipo de ajuste funciona pra imagens pequenas ( ex. cartão de visitas, banners pequenos … ) pois ai aproveitamos melhor o espaço.
Image Hosted by ImageShack.us
Fiz uma pequena linha ( 1px cinza ) pra acentuar ainda mais a quebra e dar força a pausa entre um conteúdo e outro.

Image Hosted by ImageShack.us
"linhas são usadas quando queremos separar uma coisa da outra ou demarcar onde elas dão ínicio e terminam. É uma forma simples e rápida de passar a mensagem que queremos pro usuário - Apartir daqui começa outro conteúdo - Cuidado pra não usar linhas em tudo que é lugar, pois seu layout tende a ficar desmembrado e confuso.”Image Hosted by ImageShack.us

O resultado é esse Image Hosted by ImageShack.us
Pode perceber que lemos com calma cada parte do conteúdo, nossos olhos sabem pra onde olhar primeiro e depois segue naturalmente a hierarquia que criamos com a ajuda de cores + tamanho de fonte.
Não devemos esquecer que respeitamos nesse caso o modelo mental de leitura ( esquerda pra direita, de cima pra baixo ) , o que também colabora pra funcionar a hierarquia dos títulos. Image Hosted by ImageShack.usImage Hosted by ImageShack.usImage Hosted by ImageShack.us
Agora vamos comparar o texto que ajustamos com o que texto que começamos esse tutorial. Image Hosted by ImageShack.us
Da pra perceber o peso que colocamos em cada frase e palavra?

Image Hosted by ImageShack.us
ps: coloque a informação importante, sua intenção de foco, no centro do objeto ( em caso de imagens pequenas e em alguns casos específicos de layout [ futuramente vai ser um post ] )

ps 2: use o padrão de leitura a seu favor

ps 3: use as cores a seu favor

ps 4: evite enganar as pessoas.
ex. Na web, evite sublinhar texto se ele não for um link. Pessoas tem modelo mental de navegação e leitura pra internet. Se vc sublinha algo corre o risco de 70% das pessoas acharem que aquilo é um link, clicar e se frustrarem por não ser.

Dica de leitura: 100 Things: Every Designer Needs to Know About People Image Hosted by ImageShack.us

@mjcoffeeholick

Comments

O boticario tumblr

proposta de layout de TUMBLR pra campanha secrets collection do O’boticário pela @polvora

- o layout aprovado foi o com background mais claro

@mjcoffeeholick

Comments
um dia eu consigo ter TEMPO pra terminar essa ilustração =~

um dia eu consigo ter TEMPO pra terminar essa ilustração =~

Comments
logo que fiz pra um projeto junto com videolog e polvora comunicação durante a campus party de 2010

logo que fiz pra um projeto junto com videolog e polvora comunicação durante a campus party de 2010

Comments
layout que fiz pra o site da Plataformatec em 2009
html + CSS + Ruby on Rails
@mjcoffeeholick

layout que fiz pra o site da Plataformatec em 2009

html + CSS + Ruby on Rails

@mjcoffeeholick

Comments
layout que fiz pro blog Cidadão do planeta da rede Blog Content .
@mjcoffeeholick

layout que fiz pro blog Cidadão do planeta da rede Blog Content .

@mjcoffeeholick

Comments
logo que fiz pro blog Luxo básico da rede Interney blogs .
@mjcoffeeholick

logo que fiz pro blog Luxo básico da rede Interney blogs .

@mjcoffeeholick

Comments
Logo feito para o site www.fariaeveloso.com.br quando trabalhava na Aquarela Design - www.aquereladesign.com.br em 2008
Da uma olhada no layout que fui eu que fiz tb
@mjcoffeeholick

Logo feito para o site www.fariaeveloso.com.br quando trabalhava na Aquarela Design - www.aquereladesign.com.br em 2008

Da uma olhada no layout que fui eu que fiz tb

@mjcoffeeholick

Comments
Icones que fiz para o tumblr da fundação o Boticário pela Polvora! Comunicação em 2010.
@mjcoffeeholick

Icones que fiz para o tumblr da fundação o Boticário pela Polvora! Comunicação em 2010.

@mjcoffeeholick

Comments
Ideia de logo para hotel 2
Illustrator + wacom
versão mais complexa com gravetos
feito em 2008
@mjcoffeeholick

Ideia de logo para hotel 2

Illustrator + wacom

versão mais complexa com gravetos

feito em 2008

@mjcoffeeholick

Comments