Visual hierarchy describes which elements dominate your user's attention and draw their eyes most. However, there's no one right way to build a concrete hierarchy and competitive designers must perfect different methods or invent new ones to stay on top.
The first principle of visual hierarchy is size. The bigger the size the more noticeable but not always better. The simplest way to define it is that your most important elements should be the biggest but it's when we get into the details that it becomes more complicated. Objects with a bigger size, specifically clickable rang, are easier to engage with. The user puts less effort to click bigger items. This holds especially true for calls-to-action, where you want to leave no question as to where the user should go.
The large, clickable and interactive products are the main attraction. No copy will be required to tell users to engage with the product. the image functions as a subtle call-to-action because of its contrasting color and size. Least attention is demanded by the four icons around it which actually expand in size to give product descriptions.
Size is still an important component of the sit's overall visuals. Larger elements can dominate even our hand-weird left-to-right, up-to-down site patterns depending on the degree. It's based on perspective and size can also be conditionalized with contrast. Same advantages can be reached by making other elements smaller instead of one element larger.
The second principle of visual hierarchy is color. Colors themselves have their own hierarchy where blacks and reds will draw attention more readily, while soft yellows and creams don't draw attention as much as blacks and reds.
Those effects can be even reversed by the use of contrast. Contrasting colors against their natural opposite draws greater attention to both. Placing a yellow call-to-action against a blue background may produce better results that a red CTA.
The third principle of visual hierarchy is layout. Any website interface's layout is one of the most direct ways to control visual hierarchy as you can literally place an element at the top of the visual hierarchy by placing it front and center. The stagnant clickable links remain easily accessible in the corner and at the bottom. Scrolling up and down changes what's displayed in the middle but the site logo and social media links stay firmly in their prime locations. Rows and columns aside from supporting an organized structure to keep the chaos at bay also create some prime real estat when they end.
The fourth principle of visual hierarchy is spacing. The spacing within the interface guides the eye and under the right circumstances explains or suggests function. It impacts visual hierarchy in two distinct ways, which are proximity and negative space.
Proximity is a powerful tool for a web designer as it can suggest an element's meaning and functionality using only visuals. Another aspect is negative space which is commonly known as white space. It is bad to treat white space as an empty canvas rather than a design tool.
The fifth principle of visual hierarchy is style. Personal style, such as the use of textures, graphics and the type of imagery, all effect the visual hierarchy and allow you to express an individual design persona.
One of the most powerful stylistic tools is texture. When used properly, texture enjoys the same advantages of size and color while adding depth and atmosphere. Displacement gives just a single element texture will make it stand out, while having a textures background will make non-textured objects in the foreground stand out. The types of graphics and imagery are used also to effect visual hierarchy.
Cao, J. (2015). The 5 Building Blocks of Visual Hierarchy in Web Design. [online] The Next Web. Available at: http://thenextweb.com/dd/2015/04/30/the-5-pillars-of-visual-hierarchy-in-web-design/ [Accessed 18 Oct. 2016].
No comments:
Post a Comment