{"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 principles of visual design"},"content":{"rendered":"

<\/p>\n

<\/div>\n

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

1. Gravity<\/h1>\n

Gravity applies to objects and shapes, even in visual communication.\u00a0<\/strong>It might seem strange \u2013 it's not as if gravity is a real force pulling 2-D objects down, as it is in real life.<\/p>\n

But gravity is so ingrained in our perception of reality that it even translates to 2-D objects on a page. See the image below as an example. It must be a little unsettling, as if you were expecting the circle at the top to fall off at any moment.<\/p>\n

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

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

Now look at this image below \u2013 the reverse.<\/p>\n

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

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

This composition should look less like a ball about to fall \u2013 and more like an object simply resting at the bottom of the page. Grounded. Peaceful.<\/p>\n

Lesson? Be intentional and mindful when designing, as visually heavy objects on top can feel uncomfortable and anxious (unless, of course, that's the feeling you're trying to convey).<\/p>\n

2. Reading direction<\/strong><\/h1>\n

In Western society (reverse the opposite), we read from left to right, from top to bottom. Because of this,Objects on the left are perceived as entering, and objects on the right are perceived as exiting.<\/strong><\/mark><\/p>\n

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

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

Here is a circle on the left. Again, because we read from left to right, the circle appears to be entering the composition. Below, the circle appears to be exiting.<\/p>\n

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

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

You can also use this to convey certain emotions. For example, want to make an object appear to be peeking? You can create a composition like the one below:<\/p>\n

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

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

Or, conversely, do you want to convey an object (or character) running away?<\/p>\n

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

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

3. Reading priority<\/strong><\/h1>\n

Since we read from left to right, top to bottom, we naturally see the objects in the upper left corner first, and then our eyes will naturally move to the lower right corner and see the things there afterward.<\/p>\n

This is important because if you're trying to create a visual hierarchy (maybe you want your users to see the\u00a0title<\/strong>\u00a0first and then\u00a0content<\/strong>\u00a0Where you place things, even if they are the same shape\/color\/size, makes a difference.<\/p>\n

See this example below:<\/p>\n

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

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

If you grew up reading English books from the top left corner to the bottom right corner, you would probably have looked at the top left circle first, before the bottom right corner.<\/p>\n

4. Visual Strain<\/strong><\/h1>\n

This was once described to me as physical tension that was translated and amplified.\u00a0It's the feeling you get when you see a glass full of liquid on the edge of a table.<\/strong><\/p>\n

Often, visual tension is simply unintentional \u2013 designers don't realize they've accidentally placed shapes adjacent to each other, creating tension without knowing it. This can appear sloppy. Take a look at the image below:<\/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

Still feeling uncomfortable? Here are all the highlighted stress points below.<\/p>\n

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

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

You can, if intentionally, use visual tension to grab the user's attention and create a sense of anticipation. Perhaps you're designing a poster for a protest or want to draw someone's attention to something. In these cases, make sure your tension is intentional and doesn't look like a mistake.<\/p>\n

Here is the same composition with the tension focused and intentional on a specific location.<\/p>\n

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

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

5. Dynamic vs. Static<\/strong><\/h1>\n

Static compositions can often seem boring. An easy way to spice it up and make it more exciting is simply to tilt the horizon. Here's an example of a static image that looks outdated.<\/p>\n

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

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

Now tilt your gaze, and suddenly the cityscape seems much more exciting.<\/p>\n

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

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

To make the composition even more dynamic and exciting, you can wrap around the edges and let the shapes escape from them. Check out this 3-point perspective composition:<\/p>\n

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

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

6. Activating Negative Space<\/strong><\/p>\n

You can use directional shapes to activate negative space \u2013 to a point. Too little directional force and the negative space remains inactive. Here's a shape that catches your attention and then moves your eyes up and to the right.<\/p>\n

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

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

The problem is that your attention is probably already dead by the time you reach the top right corner of the page. Your eye moves past the object, but there's simply too much space there and too little directional force from the object for your eye to fall. The space remains inactive. However, with a little cropping\/scaling:<\/p>\n

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

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

Suddenly, the space around the shape seems intentional and active. Take it away? If you're trying to move someone's eyes, be aware of inactive negative space. An easy trick is to simply point at the object with your finger, move in the direction their eyes naturally move, and observe where their attention naturally drifts. If this happens much sooner than you'd like, you'll need to adjust your layout\u2014whether the shape or the edges\u2014to keep the negative space active.<\/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_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ember.com.br\/wp-content\/uploads\/2020\/08\/principios-de-design.jpeg","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}]}}