On Visual Hierarchy

What is Visual Hierarchy and why it's important?

Designer’s job is not only making something beautiful but also arranging the content clearly and making an interface work well so the user never get lost. And that is possible by creating visual hierarchy.

Visual hierarchy is the organization of items on an interface. It is so important, because it helps people recognizes the most important elements first and in the right order on the given interface.

Especially on mobile app interfaces, the users have a very low attention span. They need to understand the interface within an instant, without reading labels or content - even more so than on the computer. Why -? Because they are looking at the screen on a mobile device: They are usually multi-tasking, or outside, walking even.

When a user looks at a interface they don't read, they scan. That means they will not stop until something interesting catches their eye. Visual hierarchy make the interface easier to be scanned and lets the user focus on the important information. It is like an invisible hand to lead them to notice the things that matter most and lets them take action confidently.

4 basic components of visual hierarchy

Use contrast, size, color and proximity to organize elements on a page to create a sense of visual importance. Actually there are many other things which can affect the visual hierarchy such as shape or prominence. However, those four above are basics to create hierarchy.


Contrast shows relative importance. you want to give important things higher contrast like the square in the middle. The rest of the image is light, so a dark square is more noticeable. People would click the dark one than if all the squares were the same colour.



This one is simple. We all know the larger text is more important than the smaller text - News headline is bigger than other less important article for instance. Bigger grabs our attention first and so comes across as more important. Size guides your eyes from the biggest to the smallest elements. If everything is the same size, nothing looks more or less important.



You can use a bold color to make something stand out. Applying a bright, bold color to a feature will draw eye to it, making it a main item within the design.


Like in this example blue is quite, red is loud. More people will click a colour that comes forward like red. Colours that stand back are good for something like a menu that is always on the screen. If it is as strong as red, it steals focus from more important things.

4.Spacing & Grouping

The closeness or distance between two objects creates a feeling of those objects being related or unrelated.


In the image you see 6 squares which are not aligned horizontally or vertically, but we see two groups of squares and the squares in each group seem together.

To create this perception put related elements closer together and unrelated elements farther apart in your design.

Reference Article

Create Visual hierarchy : 3steps


1. Create a version without hierarchy, spread the content out and read each item’s hierarchical level.

2. Place the items (Spacing) and give different weight(Contrast, Size) on them to achieve a solid foundation of Visual hierarchy without using colour.

3. After nail down the purpose of each items then dress the design up using colour to take the visual hierarchy even further.

4. Last but not least, always do user-testing. Get your design and VH choices validated by potential users by asking them what elements on the screen they are drawn to first, second, and so on.

To sum up, Prioritize your interface based on thoughtful consideration of the content and goals of the design. Then, apply contrast, size, and spacing. For the last step, figure out where to add colour to use for increase the visual importance.

>Reference Article

Here are some good articles to check out if you want to know more about Visual hierarchy!


Awwwards : Understanding Web UI Visual Hierarchy

Creativebloq : 4 key ways to create visual hierarchy


Plans are worthless, but planning is everything

In any software project, a plan is out-of-date the moment it is written.

Imagine: we plan out what features we want to implement for SuperAwesomeProduct for the next 6 months. But then: requirements change, new technical challenges emerge, Bob is sick, the new iPhone 7HD is launched, we decide to remove an entire module, our user testing shows us that our initial assumptions were wrong.

Creating time estimates is also fraught with difficulty. Designers and developers dislike doing them, they are often wildly inaccurate, and clients assume that a rough estimate means a firm promise.

So, if we know that plans and estimates are likely completely wrong, does this mean that spending time planning the future progress of a project, or estimating how much time or money it will cost, is worthless?

Not at all. US President Eisenhower once quoted an old Army saying, “Plans are worthless, but planning is everything.”

The process of sitting down to write a plan, and regularly updating the plan, helps promote discussions that will help a project succeed.

When arguing about whether a particular section of SuperAwesomeProduct will take 2 or 6 weeks, perhaps it will emerge that there’s a misunderstanding about what this feature actually does.

When figuring out if Bob or Fred should work on the module, perhaps it will become obvious that we need to hire another developer.

And so on. After three hours of discussion, we have a plan for SuperAwesome Product for the next 6 months. And we file it in a drawer and never look at it again.

ReignDesign attending TechCrunch Shanghai


Matt, Jason and Andreas will be attending TechCrunch Shanghai on Monday 8th and Tuesday 9th June, and guest-blogging for Technode!

As a global entrepreneur gala, TechCrunch Shanghai 2015 aims to build up an opened platform to gather together the most talented startups, medias, venture capitalists and those who have passion on Internet Industry & Startup Innovation.

You can read updates from the event on Technode or follow ReignDesign on Twitter for live updates and photos.

The most interesting parts of Google I/O for developers

Google is currently hosting their Google I/O conference in San Francisco, and have just announced a whole range of improvements to Android and other Google products. In a seven-hour keynote (really? did they stop for drinks?) we got to hear about the new version of Android "M".

With more than 50 new products and initiatives, it can be hard to filter out the noise, so here are some of the announcements that have made us sit up and take notice so far: the ones which will have the most practical impact in the short-term.

  • - A new permissions system, apps will ask for permissions when they need them, instead of requesting all permissions when an app is installed or updated. Like on iOS.
  • - "Doze" should help battery life. It will automatically shut down apps in the background to save power. Like on iOS.
  • - Android Pay will let you pay for physical goods using NFC. Sounds similar to Apple Pay. Like on iOS.

Indeed it seems that over time, Android is becoming iOS and iOS is becoming Android. Rumours about what's coming in iOS9 include a new "Proactive" screen which sounds exactly like Google Now.

It's good for consumers - any "must have feature" in iOS is copied in the next version of Android, and vice versa.

There were some interesting improvements to Google Play too:

  • - You can run A/B tests for your app description and photos
  • - Cloud Test Lab - automatically test your app on hundreds of physical Android devices
  • - Customise your Developer page with text and images to match your brand

We're looking forward to getting our hands on the new tools!

The 21 best Mac tools for developers

At the most recent CocoaHeads meetup in Shanghai, I presented 21 of my favorite tools which I use on my Mac. These are not necessarily specific to iOS development, but they are all tried and tested tools which save me a few seconds, a few minutes or a few hours of my time.

Bartender ($15, http://www.macbartender.com/) keeps your Mac's menu bar tidy, by hiding lesser used icons in a separate menu.
Continue reading...