Mobile app version of vmapp.org
Login or Join
Murray976

: Visual hierarchy properties priority? I know that size, color, proximity, etc. are the building blocks of visual hierarchy but I'm wondering, which properties have priority over others? For example

@Murray976

Posted in: #DesignPrinciples

I know that size, color, proximity, etc. are the building blocks of visual hierarchy but I'm wondering, which properties have priority over others?

For example in this video it is shown that when you add color to a bunch of circles the eye is drawn to it. However in that same example there is a circle with bigger proportions than the others. So, why wouldn't the eye be taken to the size first and then the color? Does color have a higher priority than size?

Also, I don't really agree with his demonstration of visual hierarchy on a previous version of the apple site. I think the image is visually more powerful than the big-sized bold headline. What do you think? Do images have a higher priority in the visual hierarchy than other properties?

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Murray976

1 Comments

Sorted by latest first Latest Oldest Best

 

@Nimeshi706

There is no way to definitely say that one property of visual hierarchy always takes precedence over another. It depends on the exact implementation.

For example, a button that takes up 99% of the screen that is a feint gray make take precedence over a bright red button that takes up 1% of the screen. But if we have a regularly sized button that is bright orange over a fully gray background then it takes visual precedence, even though the size is still much larger for the grey section.




We can't just say "size always take precedence over color" or the opposite. It also varies from person to person to some degree.

As such, you should keep the visual hierarchy principles in mind when designing and do testing as you go to make sure that people are being lead as you want them to be.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme