Trying to get away from design defaults, simplicity & minimalism for a while.
A little Sunday warm-up before starting actual conceptual work.

Related posts:

1. Alternate Frequency ! New wallpaper.

Related posts brought to you by Yet Another Related Posts Plugin.

Why ?
Because it maintains the order and makes the whole system organize, which is directly related to the its efficiency & effectiveness.

Similarly, in a layout, which is a process of manipulating user’s attention on the artwork to communicate with a logic, sequence,comfort and impact, Visual hierarchy is one of the most important tools to make it more functional and communicate in a better way.

The concept of visual hierarchy is simple , the more important content should look like more important, and the less important should look like less important. And the user should be able to divide and retrieve the data in chunks.

Lets understand this with a simple example.

So, here we have our information in a liner continuous text presentation. Acceptable, if it comes as a mobile text message or something, but in a layout this arrangement fails to guide and help the user getting information.

Lets try using the White-space. The spacing divides the information into chunks and provides a better visual hierarchy. Now reader can at least focus on reading one part of the information at one time.

One way to establish Visual Hierarchy is Typographic variations. The level of attention on an specific element can be decided with the type scale, weight, and alignment. Now user automatically builds visual relationship between elements and we can make sure what should they read first and what later.

The further detailing can be done using color, texture, shape and even by layering the elements.
Having such hierarchy in layout  supports the message, concept and justifies the importance of design details. It sets the fundamental for the reader’s experience and helps in setting the priorities right.

On web, visual hierarchy becomes extremely important when it comes to grouping and arranging different elements like navigation, headlines, forms and action buttons etc.

Few websites with great visual hierarchy using type.
http://www.alistapart.com/
http://informationarchitects.jp/
http://www.rikcatindustries.com/

Have anything more to share or Resources & site-links which can be great example for visual hierarchy.
Drop them as comments.

Related posts:

1. Visual Newsreader-Spectra
2. Interface Guidelines and consistency.

Related posts brought to you by Yet Another Related Posts Plugin.