2011O 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 .
“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.” 
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. 
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. 
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 ? 
Podemos usar o recurso mais básico que é jogar cor no texto.
Se pintarmos cada linha, já podemos observar que o texto se destaca. 
E se cada linha tiver uma cor diferente conseguimos dar destaque na hierarquia que buscamos. 
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. 
Pensando nisso, vamos colocar a cor que mais se destaca onde queremos que a pessoa começe a ler, nesse caso o título. 
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. 
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 ) . 
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.
Fiz uma pequena linha ( 1px cinza ) pra acentuar ainda mais a quebra e dar força a pausa entre um conteúdo e outro.
“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.”
O resultado é esse 
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. 
Agora vamos comparar o texto que ajustamos com o que texto que começamos esse tutorial. 
Da pra perceber o peso que colocamos em cada frase e palavra?
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
@mjcoffeeholick
