I recently consulted the archives of some web design blogs and I am still stunned by how far the web design evolved. If you are not convinced about that, then I recommend checking some articles from spring and summer last year. I am pretty sure you will find hot debates about the pros and cons of responsive web design – even some authors considered responsive design not being the best solution.

Well, nowadays the situation is different, we don’t have arguments about responsive design or other solutions to build mobile friendly websites; instead, we are exchanging opinions and ideas about how to build more responsive websites. Definitely, the front is moved from “is responsive design good?” to “how to improve responsive web pages.” Willing or not, web design entered (or is entering…) into a new era, a responsive one! Few years ago, the Internet was social, now it is mobile!

This important transformation involves other modifications and it’s quite normal to reevaluate the rules of beautiful design. It’s clear, if these pass the exam of responsive design then, undoubtedly, these are ageless and any designer should respect them. In the actual state, it seems that what was beautiful and useful on a desktop is the same on the screen of a smartphone. However, responsive design brought tons of new issues that truly test the validity of some web design rules and principles.

In this article we will debate the matter of visual hierarchy in the new era; are the same ideas valuable or are there changes that should be implemented? The web design community doesn’t have an “official” answer but the huge majority of designers agree with the idea that the principle of visual hierarchy doesn’t suffer any modifications in creating responsive websites. More exactly, the principle remains the same; the websites are created and structured according to it!

You might want to take a look at the following related articles:

Dont forget to subscribe to our RSS-feed and follow us on Twitter – for recent updates.

1. What is Visual Hierarchy?

Even if visual hierarchy sounds a little bit cultured, the idea behind this concept is simple. Visual hierarchy helps in creating a working relationship between the elements of a webpage. Every website has very important items as sign up, call-to-action buttons, contact forms, etc. and other elements that are less important (it doesn’t mean that these are ignorable!). The placement, the color, the size of the most important elements must be suitable to their role. It’s obvious that a “Buy it now” button must be prominent, bold and eventually red (it stimulates to take actions); in this way, the visual hierarchy helps a lot in transmitting a message.

2. The Components of Visual Hierarchy

It’s not exactly delimited which elements help in achieving a visual hierarchy, but there are few that are worldwide accepted:

  • The size. A bigger element has more visual weight than a smaller one.
  • The color. Some colors are considered by the human brain heavier than others (red is the heaviest while yellow is the lightest).
  • The alignment. By creating a structured and aligned webpage, the elements seem to be ranked and the navigation and the effective information gathering of the user is made easier.
  • The contrast. There is a very simple and efficient method of highlighting the most important aspects of a website.
  • The spacing (including proximity and repetition). A wise manipulation of space is vital in creating a useful hierarchy. As an example, by adding many elements closer together these have a bigger chance of being considered similar. It’s enough to check some blogs to see the placement of blog posts to fully understand the idea.

3. Create a Working Visual Hierarchy in the Responsive Era

As I previously stated, web is moving very fast and it’s no wonder that in 2014 this article would be considered old-fashioned. The designers are still in beta phase of testing new and newer ideas and techniques. Anyway, there are enough methods to create a good and most important, working, visual hierarchy.

The size
It’s no rocket science to notice that a bigger element is considered as being more important. The real matter is that the screen will never have enough room for all the items and here the difference is made by the talent & experience of the designer. The interfaces below perfectly exemplify the “size power” in achieving a visual hierarchy. The red cross lets the user know that there is something related to a critical situation (you observed, the app creator used color red- the most heaviest one). The size of it emphasizes the message, and encourages taking action.
Visual Hierarchy in Responsive Era: Rapid Rescue
Visual Hierarchy in Responsive Era: Snapguide
The color
It’s redundant to say that the colors don’t differ even if these are displayed on a smartphone or a desktop (yep, there are some sensible differences but the user, in the most cases, won’t notice the differences). By sure, colors won’t ever lose their role and meaning!
Visual Hierarchy in Responsive Era: SoundCloud
Visual Hierarchy in Responsive Era: Nike+ Running
The alignment
Alignment and placing are separated by a fine line, and many times it is difficult to see the separation. Personally, I don’t see a huge difference between alignment and placing…somehow, in my mind, alignment is just a distinct type of placing. Anyway, the examples below are eloquent.
Visual Hierarchy in Responsive Era: Moves
Visual Hierarchy in Responsive Era: Voodoo Skies
In both cases it’s about the “Settings” page. As you may see, the options are added in a list, but in order to make a clearer difference between the various types of items, the lines have different heights. Apparently, not a big deal but it’s a very smart alignment, helping users.

The contrast
The examples below are sufficient to see that contrast is never old-fashioned. Much more, due to high resolution of the screens the contrast and colors will play even a bigger role in the new manner of creating websites.
Visual Hierarchy in Responsive Era: Nike + FuelBand
Visual Hierarchy in Responsive Era: Kount.ly
The placement
The reduced space of the mobile screens puts designers in difficulty, but a creative mind may easily overcome these disadvantages. Another important aspect of the placement is the subjectivity. The placement is wonderful as long as the users appreciate it; else it is in vain…
Visual Hierarchy in Responsive Era: Recollect
I really hope that this article is useful and helped other designers to successfully handle the visual hierarchy. Do you have any additional ideas? How do you manage to achieve visual hierarchy in your projects? Please use the comment form to let the readers know your secret best practices.

Microsoft PowerPoint Presentation Templates