2.3: Sitemap and wireframe

Last updated
Save as PDF

Page ID: 93884

\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)\(\newcommand{\AA}{\unicode[.8,0]{x212B}}\)

Sitemaps

Once we have determined the goals and the scope of a project, we need to create a sitemap and a wireframe. If we simply start on a project with only a general idea of the project's direction it will complicate the process. The sitemap and wireframe will give you a guide to your website’s organization and a targeted outline for creating content.

A sitemap for a website acts like a blueprint, listing all its pages, images, and videos. Not only does a sitemap help organize the website, but it also benefits your search engine optimization (SEO) efforts.

That is because web crawlers use sitemaps to discover all pages on the site, speeding up the indexing process and consequently boosting the site’s visibility in search results.

If you’re not sure where to start, we will guide you through the entire process of making a sitemap and submitting it to major search engines.

What Is a Sitemap?

A sitemap is a file that contains the website’s structure, it provides:

provides a diagram of the site’s hierarchy and shows where each page fits into this hierarchy
helps the creators and the client understand the connection between web pages, identifying the most important pages

What Does a Successful Sitemap Accomplish?

A website’s sitemap will provide a picture for both the web development team and the website owner:

The page hierarchy is defined, which shows which pages are the most important and where other pages and content need to live.
A sitemap improves the user experience, as it is created with the specific site’s goals and objectives in mind.
All the pages that need to be created are be clearly shown for both the developer and the website owner to see.
A sitemap gives a visual representation of all the pages that need to be created.

Visual Sitemap

When making a website from scratch, web designers use visual sitemaps to show the proposed page hierarchy and navigation flow. This process helps them deliver better user experience (UX) design to their client.

Figure \(\PageIndex{1}\): Example of a Website Sitemap page.

Creating a sitemap

The design of a sitemap can be approached in several different ways. Whatever method is choosen should based on two qualities:

Ability to capture the information you need to capture
Ability to convey the information you need to convey

In other words, it needs to be capable of conveying the info you want to convey in a manner that’s clear to your audience.

The horizontal diagram more clearly indicates paths between pages/experiences, as can be seen in Figure \(\PageIndex{1}\) above.

The Advantages of a Web Sitemap

Now that we have an understanding of what a sitemap is for, what are the benefits we expect to see from creating the sitemap?

Improve the website’s search engine optimization
Fewer mistakes are made with the structure of the website
Create navigation that is easy for users to follow
Confidence that the correct web pages are being created
Clarity for the team on the scope of the site
Builds a roadmap to show what new pages might be added in the future

Wireframe

Imagine you’re building a house. Do you go straight to constructing the building without any preparation? No! You start by going to the drawing boards and designing a house plan. By creating a layout that defines the construction of the building.

The same can be said about a wireframe. It helps keep you grounded and craft your layouts and design according to a properly laid out plan.

Figure \(\PageIndex{1}\): Example of a hand-drawn wirefame. (Copyright; author via source)

There are many different types of wireframe. In user interface design, wireframe are used to create layouts for websites, web apps, mobile apps, and more. Wireframe are even used in print designs such as posters and infographics to help improve the user experience.

Why Wireframe Are Important

When it comes to user interface design, most designers often neglect the importance of wire framing. They go straight to the building process because they’re already familiar with the usual structure of a design.

When you’ve seen enough website designs and apps to know where the header, menu, and buttons are, you can go straight to designing without a wireframe. And that’s what gives birth to disastrous websites and apps that generate very low user interactions by ruining the user experience.

Wireframes help prevent this by allowing you to understand the outline or the frame of the design beforehand.

There is a really good article that discusses many thoughts about wireframes....you really should read this article.