Initiating the process of website discovery involves comprehending the goals and objectives of your client. It is crucial to ascertain the functions of the website and identify the most critical elements. To achieve this, establishing a hierarchy is essential.A hierarchy essentially represents an ordered structure of items, goals, ideas, and/or needs. In web design, hierarchy is central to influencing users to understand and embrace a website’s primary goals and interact with content in an ideal sequence to ensure a smooth and enjoyable experience.Whether you’ve studied business theory, played a video game, ordered from a menu, or engaged with businesses, hierarchies are already a significant part of your general knowledge. Hierarchies are pivotal in conveying value, importance, and order.A hierarchy does not require an actual chart or diagram to explain the position, relationships, importance, and relative value of its contents, but it can certainly be a helpful exercise.The actual structure of a hierarchy is known as the power structure — a fitting name. To create a hierarchy for a website, most designers begin with a site map or flow document. A site map serves as a roadmap to the site’s architecture.This inherent structure constructs and drives the website. Without a plan, the website lacks direction and purpose. Just as a site map guides content structure decisions, a power structure acts as a guide and reference point for the visual hierarchy.Below is a basic power structure for websites. This covers many common setups but may have exceptions (such as resource sites and enterprise-level structures). 
In any hierarchy, no element is superior to itself and must be assigned a rank and level.Furthermore, a hierarchy must have an absolute superior element, or a hierarch. I would like to provide you with a basic template and roadmap for building your own power structures.The HierarchIt goes without saying that a website needs to have a primary goal or objective. While a website can have multiple goals and objectives, there is one crucial objective for measuring the website’s success.Whether the hierarch is achieving X amount of page views, a 2% conversion rate to the contact page, or encouraging every customer to call the client, it must be clear what you are aiming for. No one succeeds without a clear target.The RankingUnder the hierarch, the objects of interest must be ranked based on conversion and importance. This can be a bit challenging. You might assume that higher-level elements are instantly more important than lower-level ones, correct?Incorrect. There is a subtle but important distinction between priority and importance. While superior elements are indeed more important, this means they rely heavily on their subordinate elements for success and exposure.The Skim: Power Level 1There is a fundamental design concept: I’ll call it “The Skim.” Even if you’ve never heard this term, you likely understand its meaning. Common sense, heat map studies tracking eye movement and activity, and the human mind will inform us that we have shorter attention spans than we think. We skim first and read later.It’s likely that you skimmed over this article for words and images of interest before deciding to read it. Despite being at the bottom power level, addressing “The Skim” is still crucial. You cannot direct your user to a branch, call to action, or conversion goal if they have left the website.So, how do you address this “Skim”? It’s not as difficult as you might think, but it requires some planning and organization. Fortunately, HTML has a built-in structure for this.Heading tags (e.g., , , ) are an essential part of markup, not just for search engine optimization but also for your hierarchy. This concept directly correlates with visual hierarchy.Simply put, make your most essential points large, bold, and clear. In the following example, we can see that the “Skim” layer has been addressed with a value statement and a few simple feature listings. It is clear what the site is for, why you are there, and what you can do. 
Branches: Power Level 2Now that we’ve cleared the “Skim” hurdle and kept the user on the site, we have established a basic structure in the user’s mind.This is similar to walking into a McDonald’s and thinking, “Hey, they have tasty burgers.” The next power level of a hierarchy is setting up and handling branches. A branch is a fancy way of saying that not everyone will click on the same thing. A branch should address broad topics, general points of interest, or important points.Branches typically fall into common items such as specific services or areas of the website and guide the user toward different subjects. Always remember that you don’t have to have a lot of branches — often, simplicity is smarter. When a user chooses a branch, the hierarchy should remain in mind.On the web, repetition is your friend. In the example of Barley’s, the branch is bold and clear: Menu or Beer. Many users feel good about having choices.But not too many choices — just enough to assist them in making informed decisions. 
Call to Action: Power Level 3The call to action is something most designers are familiar with. It is clear how this fits into the hierarchy.This is because a call to action must stand out and grab attention. 
However, there is something you may not know. Sometimes a call to action is more powerful when it’s not a button, or more specifically, not a call to direct action.Just like people don’t like being upsold at a restaurant or an electronics store, they will react similarly online. Users believe they know what they want. If super big, loud, in-your-face call to action buttons worked well, then by the same logic, flashing online web banners would be more popular.A gentle but still commanding call to action can be more effective. In this example, “Read On” is loud and draws your attention, but it doesn’t ask for a commitment like “Register Now!” or “Buy Now!” 
It commands attention but in a less abrasive manner. I’ve heard from many designers that I should make my buttons as garish and in-your-face as possible.What are we? Used car salesman? No one likes that kind of marketing, and website users are no different.The basic idea is clarity and respect. Use calls to action to make your users aware of primary points and focus on supporting ideas to the hierarchy, but don’t shove it in their face.Facilitation: Power Level 4The facilitation level of hierarchy is the last object the user interacts with before reaching the hierarch. A common mistake many designers make when formulating their power structure and strategy is combining facilitation with the hierarchy.That is to say, landing on the contact page does not equal an email or a phone call. Just because you have gotten the user to the conversation point, it doesn’t mean the battle is over — you still need to make the conversion. For this piece to work within the hierarchy, the facilitation page must reinforce all previous objects and entice the user to continue to the finish line.How do we do that? Easy! Make sure that labels are easy to skim, include the core pieces of information you need, ask for minimal commitments, and remember to be friendly and commanding but not unpleasant or abrasive.In this example, we are looking at a contact page for a web design company. On “The Skim,” we can quickly determine what each section is. 
The formatting is clean, attractive, and non-threatening.The contact form asks a few questions, but they are straightforward and mostly utilize dropdowns, so providing responses require little time and brainpower commitment. Notice that the language used is still commanding but friendly and approachable. Finally, we come to the “Submit” button, which is the hierarch on this page.Power It Up!This covers the basics of power structure.I encourage you to run through the exercise of creating a structure for any current websites you have and then compare it to your analytics reports to see if your goals and hierarchy actually align. There are actually more types of hierarchy situations going on than you might think. Now that you have a feel for how to build a hierarchy, let’s talk about what battles we are fighting on each website.Let’s take a break from hierarchy and look at the psychological side of it all.We have just reviewed the elements of building a hierarchy. Let’s take it one step further and delve into the psychological aspects of hierarchy.Understanding the Whole PictureGestalt, which roughly translates to “Unified Whole” in English (from German), is a school of psychology that addresses visual perception in humans. I highly recommend checking out this overview of Gestalt application in design for a broader discussion of Gestalt.Gestalt seeks specifically to explain how humans organize visual elements into groups or whole pieces of information based on a number of factors and organizational paradigms. Gestalt helps us understand how it’s possible that you can just read this section even though every word is misspelled. What does this mean?A design is the sum of its parts — but those parts have to fit and address the problems. We can’t hope to attack problems head-on if we don’t understand how the pieces will fit together. Many designers will make important decisions about hierarchy, usability, or design based on how they personally perceive something.This can be dangerous when objectively trying to understand how a user will see the same thing. Spending some time learning about general facets of visual perception will help you move your design approach outside of your own perception and create more effective designs. We want to attack how to build your power structure and use a handful of Gestalt principles in tandem with other methodologies and techniques.Hierarchy is as much about ordering information as it is about how the entire design fits together. The usage of hierarchy is like a good strategy for a sports team: While the team may have some star athletes, they cannot run the play alone. The team is only as effective as their teamwork and overall approach; they must function as a unified whole to most effectively leverage the strategy.ContinuationContinuation is a principle that is demonstrated when the eye is propelled from one object to another by implied movement.The appropriate application of continuation in web design is undeniable. A designer should seek to build a design that guides the user’s eye from one object to the next. The most simple example of continuation is a well-placed arrow towards the next item, but finely crafted flourishes or smooth curves can be just as effective.
Let’s look at some examples. 
Don’t see it? I gotcha covered.
In this example, the bomb grabs our attention first because it is a strong form. The
