Website Structure: 7 Visual Examples to Illustrate Site Structure For Designers

The structure of your site determines how easy it is for users to navigate your site and find the information that they are looking for. This article will explain why site structure is important for designers and how designers can create effective site structures. 

What is website structure? 

Your site’s structure is how the different pages on your site are interlinked and their hierarchy. It is how the information on your site is organized and presented. Good website structure facilitates easy navigation for both users and crawlers which improve the SEO ranking of your website.

Why is website structure important for designers? 

The role of a designer is to create a website that has a great UX and is easy to use. A great website structure improves the usability or user-friendliness of your website by making it easy for users to find what they are looking for. To create a website structure, you need to map out how you will organize the content on your site (homepage, categories, individual page, blog posts). 

This is why website structuring should be the first step in any web design project. 

How to choose the best structure for your website

The underlying principle in great website structure is Information Architecture (IA). IA ensures that content is organized, structured, and labeled effectively and consistently. For you to create the best information architecture for your website, you need to consider the following factors:

  • User journey: Since websites are created to serve users, it is important to consider how they might experience or interact with your site and their expectations of how your website should work. You can determine the journey of your users through interviewing them or doing a card sorting exercise
  • Content: The structure of your website will also be largely determined by the type and volume of content on your site. The structure of an e-commerce site will be different from the structure of an academic site. 
  • Context: The context of a website is determined by its business goals, the cultural context that it exists in, and the resources available. It is important to consider this fact as you structure your website.

Elements of good website structure (plus visual examples)

The most common website structure is a hierarchical one that is based on one parent page (main page) and child pages(categories and sub-categories) that flow from the main page. 

Hierarchical website structure 

Let’s look at each of these elements and how you can optimize them during your design process:

Homepage 

Your homepage is the top page in your website hierarchy and the central place where users navigate your website from. Ensure that all the important pages on your website are linked from this page. The relationship between your homepage and the main category pages is represented by your website’s menu or main navigation.

Here’s how to design a useful navigation/menu for your website:

Navigation/menu 

Your site visitors will use the navigation to understand how information is structured on a website and to find what they are looking for. Ensure that all your main category pages are represented on your menu or main navigation. Additionally, use the following rules when creating your navigation:

  • Use short phrases or even one word for each element.
  • Use simple language that your users can understand. 
  • Don’t clutter your navigation. 

Apple’s main navigation follows these rules to create a simple but super-useful menu. 

Main navigation/menu (Source

If your site has some subcategories that are useful for users such as their account information, you can create a secondary vertical menu like the one the Asos has. 

Secondary vertical menu (Source)

Other useful categories such as utility pages (privacy policies, disclaimers and legal information) can be placed on the footer of the website. 

Categories and subcategories 

Use categories to group website pages that have similar content which makes it easy for users to access the content. Blog posts can be grouped into categories such as ‘marketing’ and then be further subdivided into subcategories such as ‘landing pages’ and ‘email marketing.’

If you are designing an e-commerce website, you can group your products into categories such as ‘men’ and ‘women.’ If your categories are too many you can further subdivide them into subcategories. Continuing with our example of an e-commerce store example, the women category can have subcategories such as ‘clothes’, ‘shoes’, and ‘handbags’. 

A great example of this is the Asos Marketplace website where their clothing category has a subcategory that shows the types of clothing available in the marketplace such as swimwear, sweatshirts, tracksuits, and hoodies. 

Categories and subcategories (Source)

Individual Pages/Posts

It is important to structure your individual website pages or blog posts in a way that makes it easy for users to find what they are looking for, find similar content and understand where they are on your website. Breadcrumb trails, tags, and contextual links are used to structure information on individual pages.

Breadcrumb trails

You can add navigation on your pages or posts in the form of a breadcrumb trail. A breadcrumb trail is made up of clickable links that show users exactly where they are on your site plus your site structure. Breadcrumb trails like the one used by Mailchimp improve usability and user experience. 

Breadcrumb trail (Source)

Tags 

Tags are another useful way of grouping similar content on a specific page. The difference between tags and categories is that categories have a hierarchy and can be further subdivided into subcategories but tags have no hierarchy. They simply group similar content. 

For example, Grammarly’s blog uses tags such as ‘how to,’ ‘product’ and ‘inspiration’ to group blog content.

Blog tags (Source)

The usefulness of these tags is displayed when a user clicks on one of the posts tagged ‘how to’ and they are shown other posts that are also tagged ‘how to’ at the end of the blog post. This is a great example of how website structure makes it easy for users to find information.  

Related tags (Source)

Tags can also be used in e-commerce websites to group products according to brand and direct users to similar products. 

Here are the best practices for creating tags:

  • Don’t create too many tags or a new tag for every post.
  • Place tags in a place where site visitors can easily see them such as your sidebar or at the end of your blog posts/product pages. 

Contextual links 

These are links on webpages or blog posts that point to other relevant content on other webpages. Contextual links are useful in showing users related content. In the context of a blog post, contextual links can be used to point users to other blog posts that have similar content. Grammarly does this in their blog post as shown below. 

Contextual links (Source)

Contextual links can also be used in e-commerce pages to link to pages that have related items, what other people have bought, or which products are often bought together. 

Easily Incorporate Website Structure In Your Designs 

Web structure is how information is organized and interconnected on a website. An effective site structure improves usability and user experience which makes web structuring an important step in the web design process. The UXPin platform makes it easy for you to design, prototype and structure your website as you collaborate with other team members and designers.

Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you