{"id":2255,"date":"2020-08-26T02:57:09","date_gmt":"2020-08-26T05:57:09","guid":{"rendered":"https:\/\/ember.com.br\/?p=2255"},"modified":"2024-06-22T05:16:42","modified_gmt":"2024-06-22T08:16:42","slug":"6-principios-de-design-que-ux-designers-devem-conhecer","status":"publish","type":"post","link":"https:\/\/ember.com.br\/en\/6-principios-de-design-que-ux-designers-devem-conhecer\/","title":{"rendered":"6 princ\u00edpios de design visual"},"content":{"rendered":"

<\/p>\n

<\/div>\n

<\/amp-ad><\/p>\n

1. Gravidade<\/h1>\n

A gravidade se aplica a objetos e formas, at\u00e9 mesmo na comunica\u00e7\u00e3o visual.\u00a0<\/strong>Pode parecer estranho – n\u00e3o \u00e9 como se a gravidade fosse uma for\u00e7a real puxando objetos 2-d para baixo, como acontece na vida real.<\/p>\n

Mas a gravidade est\u00e1 t\u00e3o arraigada em nossa percep\u00e7\u00e3o da realidade que se traduz at\u00e9 mesmo em objetos 2-d em uma p\u00e1gina.\u00a0Veja a imagem abaixo como exemplo.\u00a0Deve ser um pouco desconfort\u00e1vel, como se voc\u00ea estivesse esperando o c\u00edrculo no topo cair a qualquer momento.<\/p>\n

\n
\n
\n
\n
<\/div>\n

\"Imagem<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/figure>\n

Agora olhe para esta imagem abaixo – o reverso.<\/p>\n

\n
\n
\n
\n
<\/div>\n

\"Imagem<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/figure>\n

Esta composi\u00e7\u00e3o deve parecer menos com uma bola prestes a cair – e mais como um objeto simplesmente descansando na parte inferior da p\u00e1gina.\u00a0Aterrado.\u00a0Pac\u00edfica.<\/p>\n

Li\u00e7\u00e3o?\u00a0Seja intencional e consciente ao projetar que objetos visualmente pesados \u200b\u200bno topo podem parecer desconfort\u00e1veis \u200b\u200be ficar ansiosos (a menos, \u00e9 claro, que seja esse o sentimento que voc\u00ea est\u00e1 tentando transmitir).<\/p>\n

2. Dire\u00e7\u00e3o de leitura<\/strong><\/h1>\n

Na sociedade ocidental (inverter o contr\u00e1rio), lemos da esquerda para a direita, de cima para baixo.\u00a0Por causa disso,os objetos \u00e0 esquerda s\u00e3o percebidos como entrando e os objetos \u00e0 direita s\u00e3o percebidos como saindo.<\/strong><\/mark><\/p>\n

\n
\n
\n
\n
<\/div>\n

\"Imagem<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/figure>\n

Aqui est\u00e1 um c\u00edrculo \u00e0 esquerda.\u00a0Novamente, porque lemos da esquerda para a direita, o c\u00edrculo parece que est\u00e1 entrando na composi\u00e7\u00e3o.\u00a0Abaixo, o c\u00edrculo parece estar saindo.<\/p>\n

\n
\n
\n
\n
<\/div>\n

\"Imagem<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/figure>\n

Voc\u00ea tamb\u00e9m pode usar isso para transmitir certas emo\u00e7\u00f5es.\u00a0Por exemplo, quer fazer com que um objeto pare\u00e7a estar espiando?\u00a0Voc\u00ea pode criar uma composi\u00e7\u00e3o como a abaixo:<\/p>\n

\n
\n
\n
\n
<\/div>\n

\"Imagem<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/figure>\n

Ou, inversamente, quer transmitir um objeto (ou personagem) fugindo?<\/p>\n

\n
\n
\n
\n
<\/div>\n

\"Imagem<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/figure>\n

3. Prioridade de leitura<\/strong><\/h1>\n

Como lemos da esquerda para a direita, de cima para baixo, naturalmente vemos os objetos no canto superior esquerdo primeiro, e ent\u00e3o nossos olhos se mover\u00e3o naturalmente para o canto inferior direito e ver\u00e3o as coisas ali depois.<\/p>\n

Isso \u00e9 importante porque se voc\u00ea est\u00e1 tentando criar uma hierarquia visual (talvez voc\u00ea queira que seus usu\u00e1rios vejam o\u00a0t\u00edtulo<\/strong>\u00a0primeiro e depois o\u00a0conte\u00fado<\/strong>\u00a0) onde voc\u00ea coloca as coisas, mesmo que sejam da mesma forma \/ cor \/ tamanho, faz uma diferen\u00e7a.<\/p>\n

Veja este exemplo abaixo:<\/p>\n

\n
\n
\n
\n
<\/div>\n

\"Imagem<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/figure>\n

Provavelmente, se voc\u00ea cresceu lendo livros em ingl\u00eas do canto superior esquerdo ao canto inferior direito, voc\u00ea teria olhado primeiro para o c\u00edrculo superior esquerdo, antes do canto inferior direito.<\/p>\n

4. Tens\u00e3o Visual<\/strong><\/h1>\n

Certa vez, isso foi descrito para mim como tens\u00e3o f\u00edsica traduzida e amplificada.\u00a0\u00c9 a sensa\u00e7\u00e3o que voc\u00ea tem quando v\u00ea um copo cheio de l\u00edquido na beira de uma mesa.<\/strong><\/p>\n

Freq\u00fcentemente, a tens\u00e3o visual \u00e9 apenas n\u00e3o intencionalidade – os designers n\u00e3o percebem que colocaram acidentalmente formas adjacentes umas \u00e0s outras que criam tens\u00e3o sem saber.\u00a0Isso pode parecer desleixado.\u00a0D\u00ea uma olhada na imagem abaixo:<\/p>\n

<\/p>\n

<\/div>\n

<\/amp-ad><\/p>\n

\n
\n
\n
\n
<\/div>\n

\"Imagem<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/figure>\n

Ainda se sente desconfort\u00e1vel?\u00a0Aqui est\u00e3o todos os pontos de tens\u00e3o destacados abaixo.<\/p>\n

\n
\n
\n
\n
<\/div>\n

\"Imagem<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/figure>\n

Voc\u00ea pode, se for intencional, usar a tens\u00e3o visual para atrair a aten\u00e7\u00e3o do usu\u00e1rio e criar uma sensa\u00e7\u00e3o de ansiedade.\u00a0Talvez voc\u00ea esteja desenhando um p\u00f4ster para um protesto ou queira chamar a aten\u00e7\u00e3o de algu\u00e9m para algo.\u00a0Nesses casos, certifique-se de que sua tens\u00e3o seja intencional e n\u00e3o pare\u00e7a um erro.<\/p>\n

Aqui est\u00e1 a mesma composi\u00e7\u00e3o com a tens\u00e3o focada e intencional em um local espec\u00edfico.<\/p>\n

\n
\n
\n
\n
<\/div>\n

\"Imagem<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/figure>\n

5. Din\u00e2mico vs Est\u00e1tico<\/strong><\/h1>\n

As composi\u00e7\u00f5es est\u00e1ticas geralmente podem parecer enfadonhas.\u00a0Uma maneira f\u00e1cil de apiment\u00e1-lo e torn\u00e1-lo mais emocionante \u00e9 simplesmente inclinar o horizonte.\u00a0Aqui est\u00e1 um exemplo de uma imagem est\u00e1tica que parece obsoleta.<\/p>\n

\n
\n
\n
\n
\n
<\/div>\n

\"Imagem<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/figure>\n

Agora incline o horizonte e, de repente, a paisagem urbana parece muito mais emocionante.<\/p>\n

\n
\n
\n
\n
\n
<\/div>\n

\"Imagem<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/figure>\n

Para tornar a composi\u00e7\u00e3o ainda mais din\u00e2mica e emocionante, voc\u00ea pode envolver as bordas e deixar que as formas escapem delas.\u00a0Confira esta composi\u00e7\u00e3o de perspectiva de 3 pontos:<\/p>\n

\n
\n
\n
\n
<\/div>\n

\"Imagem<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/figure>\n

6. Ativando Espa\u00e7o Negativo<\/strong><\/p>\n

Voc\u00ea pode usar formas direcionais para ativar o espa\u00e7o negativo – para um ponto.\u00a0Muito pequena de uma for\u00e7a direcional e o espa\u00e7o negativo permanece inativo.\u00a0Aqui est\u00e1 uma forma que chama sua aten\u00e7\u00e3o e depois move seus olhos para cima e para a direita.<\/p>\n

\n
\n
\n
\n
<\/div>\n

\"Imagem<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/figure>\n

O problema \u00e9 que sua aten\u00e7\u00e3o provavelmente j\u00e1 est\u00e1 morta no momento em que voc\u00ea chega ao canto superior direito da p\u00e1gina.\u00a0Seu olho se move al\u00e9m do objeto, mas h\u00e1 simplesmente muito espa\u00e7o l\u00e1 e pouca for\u00e7a direcional do objeto para que seu olho caia.\u00a0O espa\u00e7o permanece inativo.\u00a0No entanto, com um pouco de corte \/ dimensionamento:<\/p>\n

\n
\n
\n
\n
<\/div>\n

\"Imagem<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/figure>\n

De repente, o espa\u00e7o ao redor da forma parece intencional e ativo.\u00a0Leve embora?\u00a0Se voc\u00ea est\u00e1 tentando mover os olhos de algu\u00e9m, esteja ciente do espa\u00e7o negativo inativo.\u00a0Um truque f\u00e1cil \u00e9 apenas apontar para o objeto com o dedo, mover-se na dire\u00e7\u00e3o em que seus olhos se movem naturalmente e observar o local onde sua aten\u00e7\u00e3o se desvia naturalmente.\u00a0Se isso for muito antes do que voc\u00ea deseja, voc\u00ea precisar\u00e1 ajustar seu layout – seja a forma ou as bordas – para manter o espa\u00e7o negativo ativo.<\/p>\n

<\/p>\n

<\/div>\n

<\/amp-ad><\/p>","protected":false},"excerpt":{"rendered":"

1. Gravidade A gravidade se aplica a objetos e formas, at\u00e9 mesmo na comunica\u00e7\u00e3o visual.\u00a0Pode parecer estranho – n\u00e3o \u00e9 como se a gravidade fosse uma for\u00e7a real puxando objetos 2-d para baixo, como acontece na vida real. Mas a gravidade est\u00e1 t\u00e3o arraigada em nossa percep\u00e7\u00e3o da realidade que se traduz at\u00e9 mesmo em […]<\/p>\n<\/p>

Continue Reading<\/span><\/i><\/a><\/div>","protected":false},"author":1,"featured_media":2256,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[474,268],"tags":[461,560,139],"yst_prominent_words":[558,547,540,545,543,552,559,550,556,541,553,544,548,542,557,551,554,546,555,549],"class_list":["post-2255","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","category-ux","tag-design","tag-principios-de-ux-design","tag-ux"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/ember.com.br\/wp-content\/uploads\/2020\/08\/principios-de-design.jpeg","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/ember.com.br\/en\/wp-json\/wp\/v2\/posts\/2255","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ember.com.br\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ember.com.br\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ember.com.br\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ember.com.br\/en\/wp-json\/wp\/v2\/comments?post=2255"}],"version-history":[{"count":4,"href":"https:\/\/ember.com.br\/en\/wp-json\/wp\/v2\/posts\/2255\/revisions"}],"predecessor-version":[{"id":2308,"href":"https:\/\/ember.com.br\/en\/wp-json\/wp\/v2\/posts\/2255\/revisions\/2308"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ember.com.br\/en\/wp-json\/wp\/v2\/media\/2256"}],"wp:attachment":[{"href":"https:\/\/ember.com.br\/en\/wp-json\/wp\/v2\/media?parent=2255"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ember.com.br\/en\/wp-json\/wp\/v2\/categories?post=2255"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ember.com.br\/en\/wp-json\/wp\/v2\/tags?post=2255"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/ember.com.br\/en\/wp-json\/wp\/v2\/yst_prominent_words?post=2255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}