Why Design Hierarchy Really Matters



Why Design Hierarchy Really Matters


When potential clients come to your website, what do they find? Your site is usually the first interaction they have with you, but if your website is not properly designed, it could be their last.

Quality web design really matters because it represents who you are and what your clients can expect if they want to work with you. When a website is not properly navigated, your clients do not know where to begin when they come to your site or where they should go after they click a few links. There are many elements to a proper web design, but let me focus on the role of design hierarchy.

“A hierarchy is an organization of items into different levels of relative importance. Visual hierarchy is naturally enough creating this organization and prioritization visually. Through basic design principles you emphasize one element over another so more important content looks more important. You design related elements to provide visual cues that those elements are on the same level in the hierarchy. You organize everything on the page to create a sense of order. Visual hierarchies create centers of interest on your page, communicate additional meaning through convention and repetition, highlight actions you want your visitors to take, and establish patterns of movement and flow. (Credit: Vanseo Design)”

When you create a website for your business, begin with the end in mind. What is the call to action you want your viewers to take? If your goal is for clients to contact you for a consultation or click “Buy Now” on some item, then you design everything on your website around that call to action. Let’s demonstrate this with the

School of the Apostolic Church’s website:

This website is for a new school of theology and Christian education beginning in the Fall of 2011. The perspective “client” coming to this website is someone who’s heard about the school and wants to learn more about it. When they come to the website, their goal is to find out what “SOAC” is all about. SOAC’s desire is that they download an application packet or click “contact us,” with the end goal being a student for the Fall of 2011. So, what’s the first thing viewers will be? A homepage with a clean welcome screen and three simple options: About, Academics, and Admissions. Where do you think someone is going to begin?

Hopefully you chose the About page, as most anyone who wants to know what this site is all about will begin there. Click the About page or “Read More” and what do we find? All the relevant information about the school, its vision, and why it was created. If you go to the navigation bar at the top right, you can see a sub-navigation menu with options to read their mission statement and core distinctive. Remembering that their end goal is getting students to download an admission pack, they have that option instantly available on the right-hand column. Some people may not need any more information, so why make them scroll through any more pages?

The next step in their design hierarchy is answering the second question most people will be asking, “What classes will be offered?” Being this is a college, there are a lot of classes. So instead of overwhelming the viewer with too many options, they organized them according to what’s required and what’s optional. While this does require the viewer to go back and forth to see the class offerings, it keeps the page clean and simplified.

And finally they wanna know how much it costs to enroll in this school and where one ought to begin. Their Admissions page answers all these questions and continues to offer the perspective student the ability to download the application form at any moment they so desire.

If you still have questions or you just want to talk to somebody before you send in an application, then their contact page gives you three options, all clearly labeled.

SOAC’s website has a very systematic and organized design hierarchy. It doesn’t take a degree in rocket science to figure out where to go to get your questions answered or where you should go next. With a well labeled navigation bar and a simple page layout, people get exactly what they suspect.

Don’t lose customers because of poor web design. When you create your website or redesign it, write out a road map you want your viewers to follow to reach your goal.

For more information on this topic and some more examples, check out Smashing Magazine’s write-up on this topic called Designing for a Hierarchy of Needs.



Branding & Design Web Design



10 responses to “Why Design Hierarchy Really Matters”

  1. oktalBlizzard says:

    First of all, great design of YOUR website, enjoyed browsing every part of it!

    Realy useful message… I have seen wonderful website content, but ugly designs. I am sure those websites could do much better if they paid more attention to the visual design of the site. Unique designs catch the eye instantly. They make people more aware, hence stimulating the brain and making them more active. This would obviously result in them staying longer and actually appreciating the content itself to a greater extent.

  2. kylewillis says:

    Thank you for your kind words! You make a great point: poor quality trumps great content. Great quality makes even mediocre content worthwhile.

  3. Michael says:

    Your website is very clear and well organized! I understand eveything you wrote here and appreciate the message and ideas. My question is: what about those people that CLICK the main graphic on the main landing page? In your opinion, where should that go by default?

    Thanks again for this GREAT resource!

  4. kylewillis says:

    Hey Michael, thanks for your comment and great question. Think of the landing page as being the first clue to hidden treasure. If “X marks the spot” for your website, how will your visitor get to X?

    For this website, my X is that potential clients would schedule a free consultation with me or knowledge seekers would read my blog. So on my home page, you will see at the bottom it tells you what the next step is with “Where to Go Next.”

    So, whatever the purpose of your website is will determine what that second step is. Think in the mind of the visitor and think backwards–from the end goal to the homepage.

  5. Thomas says:

    Kyle and Micheal, I had a very similar question and stumbled across your site today. Great tool. Not sure how I landed here, but I will be back! Thanks guys!!!

  6. Bill B. says:

    Really great idea: “When you create a website for your business, begin with the end in mind.”.
    I have been making some websites recently, not for business, just small community sites, but then I used to just sit down and start building the website without much planning, and definately not concentrating on the end goal.
    Instead of creating and molding the website to suit the end goal, I used to first build the basic website and only then mold and modify my end goal a bit so that it would fit in to the overal website design and structure.

    Now I always think and visualise my final goal and purpose of the website, and only then do I start building the actual site.

    Anyway, thanks for the article! It was easy to read and understand.

  7. Bell says:

    great post man ! I came to know that design really matters !

  8. asfitoday.com says:

    Hmm is anyone else having problems with the pictures on this blog loading?

    I’m trying to find out if its a problem on my end or if it’s the blog.

    Any feed-back would be greatly appreciated.

    • kylewillis says:

      Hey! Sorry to hear you are having problems! We’ve checked it out on our end and everything seems to be loading fine here on IE, Safari, Chrome and FF.

      Anyone else having issues?

  9. Cathyrn Bolinger says:

    I constantly spend a half an hour to an hour a week to read your blog posts. It’s how I enjoy my cup of coffee.

Leave a Reply

Your email address will not be published.