How to Create Hierarchy on a Webpage

No matter the content of your webpage, creating hierarchy is extremely important. Hierarchy is used to guide visitors and help them to differentiate between page elements. It is created by using contrast, repetition, alignment, and proximity. When used correctly, these principles work together to create a well organized and functional piece of work that benefits not only the creator but also the visitor.


Contrast is a way to draw the visitor’s eye to a particular area on a page. To create contrast, try different combinations of font types, sizes, colors, and weights. Elements such as titles and headings should stand out from the body text so it is clear to the visitor the order in which they should be reading content.

As seen in this Jeanie's Junie graphic, you can also create contrast by using graphics and background colors. The background is bright orange and the text is white. This makes the text stand out so it can easily be read and interpreted. The designer also used a mixture of fonts which creates visual interest.


Repetition can also be referred to as consistency. It is used to unify a web page and helps make relationships clear. When it comes to creating a webpage, repeat elements that are meaningful. Repetitive elements can be anything that can be repeated deliberately.

This image showcases all the the different spices used in Jeanie's Junie. They are all the same shape, size, and distance apart from one another. It is immediately clear they all play an equal role in the product and are related.

This principle is also important for branding. If you always use the same color scheme and font customers will be able to distinguish your work from others.


Alignment deals with placement, position, and orientation of elements on a page. The four main types of alignment are left, right, centered, and justified. Many design programs use grids to make aligning elements simple. Before you get started, visit some popular web pages and think about the areas on the page where your eye is immediately drawn.

Using this post as an example, when viewed in desktop mode all of the text is aligned to the left and all of the images are aligned to the right. This keeps the information organized.


Proximity refers to how close or far apart elements are from each other. Things that are related should be close together while things that are not related should remain separate. This helps visitors to easily find the information they need.

In this example, text appears next to an image. Visitors know the text is describing the image and if they follow the instructions given their finished product should resemble the image.

Ready to get started? For more information visit our website If you’re ready to take your business to the next level send us an email at or give us a call at 856-221-2164 . We’d love to talk about your business!

Maggie Montalto Social Media & Marketing

Email: // Facebook: Phone: 856-221-2164