Hero image for the IxDF article "What is a Sitemap in UX Design"

What is a Sitemap in UX Design?

by Mads Soegaard | | 77 min read
661 shares

A UX sitemap is a visual tool that’s a handy aid for you as a user experience (UX) designer. It doesn’t just organize a website's content and structure—in how it displays how web pages connect and relate—but identifies gaps and prioritizes content, too. From that, it’s a great aid to nurture a good, solid, cohesive design, so users navigate websites easily with a clear, logical flow. Read on and we’ll explore how to create sitemaps, tools, and best practices—a prime chance to get your content set out for success.

First of all, imagine that you’re navigating through a complex maze that’s loaded with treasures—plenty of which you might well miss if you don’t have a map, and that’s like building a website without a UX sitemap, since you can look on your website like a kind of digital maze. Site organization is a big deal, since in this “maze,” you’re going to have pages, blog posts, product descriptions, and contact details and you’re always going to need to have a clear structure for it.

Cue the blueprint powers a sitemap bestows when you learn to organize your website's content—and content strategy—effectively, and discover how it visually represents the structure and hierarchy of your website pages and provides a hierarchical overview of how web pages and sections interconnect.

Learn from Priscilla Esser, Ph.D., who discusses the importance of visual frameworks and hierarchy in web design—and see how you can apply these concepts.

Show Hide video transcript
  1. 00:00:00 --> 00:00:34

    Hello and welcome to this UX Daily video in which we'll be discovering a design pattern that is very useful when you're creating the page structure for your project – the *visual framework*. My name is Priscilla Esser, and I will be discussing the tricks of the trade from WordPress template developers and other seasoned interface designers. And I will show you how they create consistency in page layouts. One of the essential elements of creating the best results for visual frameworks is something called *visual hierarchy*.

  2. 00:00:34 --> 00:01:01

    In this video, I will help you understand what visual hierarchy is and how to use that to create a proper visual framework. The visual framework is all about creating visual consistency throughout the user experience. To illustrate the importance of this consistency, just think about the simple task of finding your way back to the homepage of a website. We're all used to having the company logo in the top navigation bar to be the homepage link. Just have a look at this example from the Interaction Design Foundation website.

  3. 00:01:01 --> 00:01:32

    But what if you designed a website with multiple pages that all have this link at another location? How would it impact your experience if the logo was placed in the *footer* of the website, for example? Probably not that positive, right? You would have to scan each page separately for visual cues that indicate this functionality, adding to your mental burden. The solution is creating a consistent visual framework for all pages of your website or application. It's a framework of visual elements, colors and typography that forms a basic layout.

  4. 00:01:32 --> 00:02:03

    This layout gives you sufficient structure to create consistent pages. But it also offers enough flexibility to handle different content types. In this example, you can see how the two pages of the garden supply website are consistent in the placement of the logo, headers, menu items, and search boxes. At the same time, the pages differ in the type of content they provide. The page on the left is clearly intended to inspire people with a large image and top categories, whereas the page on the right is giving an overview of available products in the online store.

  5. 00:02:03 --> 00:02:34

    Notice how the consistent elements of the visual framework seem to be more in the *background* but the content itself appears to be more in the *foreground*. This is what a good visual framework can do for your design. It can help let your content stand out and shine. A great example of a visual framework in practice is a WordPress theme. These themes allow you to add any content you desire to create your own website based on the chosen visual framework. As most people aren't designers, this is a great way of making sure a website has good consistency

  6. 00:02:34 --> 00:03:04

    and visual appeal. But since you are a designer, we'll use this example to see how it's done. So, let's have a look at the WordPress theme we see in this example. The visual elements that have been predetermined by the theme developers are the header size, placement of menu items and search box. Also, the structure of the blog post has given us a three-column layout with white blocks on a grayish background. The typography is set, as is color use, the way images are shown, etc.

  7. 00:03:04 --> 00:03:32

    Naturally, everyone wants to personalize their website, so most elements are customizable. However, the theme developers do present a good visual framework that you can take as a starting point. Now, if we have a further look at this example, we see that the theme developers have also provided alternative ways to present different types of content while keeping the visual framework intact. The screenshot here shows how a side menu bar can be combined with a wider content block for blog posts. The user does not get confused by this change

  8. 00:03:32 --> 00:04:01

    as the visual framework ensures that the major elements can be found at the same place and the overall look and feel is consistent. To create a visual framework, these are the steps that you should take. First, determine what types of content you need to place on different pages of your interface and what tasks a user will most likely want to perform often. Then, based on type of content and task, determine what user interface design patterns will be present across all pages

  9. 00:04:01 --> 00:04:33

    – for example, a top-left navigation bar, a search box, a list or a dropdown menu of categories. Next, you should organize all returning visual elements on the page and indicate where content should go. Think about what element should go into the header area – most important – what, if anything, could be made accessible in sidebar, and what is more suitable for a footer area. Also, depending on the types of content, determine if you want to use multiple columns or not. Ensure that content has sufficient space to attract attention. When all elements have found a place on your page, you can decide on a more detailed level what colors and

  10. 00:04:33 --> 00:05:04

    fonts you want to use. This is where the framework becomes personalized to the brand or company you're designing for. You can have some fun here, but you can also use color and fonts to guide people in the right direction, as we will see in a few minutes when we dive into the topic of visual hierarchy. But let's first finish the topic of implementation of the visual framework. While you're taking the first couple of steps in creating this framework, it's very useful to make wireframes to position the various elements in a consistent layout.

  11. 00:05:04 --> 00:05:31

    Without emphasizing the visual appeal of color and images at first, it's much easier to shuffle design elements such as blocks of content and other design patterns around to create a good overview and focus on usability. In wireframes, you simply create placeholders for pieces of content and visual elements. It's a great way to do some early user testing by creating a paper prototype or creating a clickable prototype with wireframing software such as Balsamiq.

  12. 00:05:31 --> 00:06:03

    The example you see here is actually created in Balsamiq, but many other wireframing applications are available. Of course, you might just prefer the old-fashioned paper-and-pencil way to get the creative juices flowing, which is perfectly OK. After creating the wireframes in the first couple of steps of implementing a visual framework and focusing on more graphic design elements such as color and typography, you may want to consider creating a style guide to report the design decisions you made here. Style guides give all the visual elements and rules for implementing them. It increases the uniformity and consistency you're looking for with a visual framework,

  13. 00:06:03 --> 00:06:36

    but enables future extensions of your framework by others. This way, you ensure that when a client will not hire you five years from now to add to the website you designed for them, your efforts will not have been in vain and the new additions will remain consistent with your original intentions. As you can see here, major companies like Yelp provide their style guide as a resource for designers, product managers and developers. It serves as a common language to create brand consistency and a good user experience.

  14. 00:06:36 --> 00:07:03

    Now, the main problem with visual frameworks is that when the initial design isn't very good, it will continue to bite you in the behind throughout all of the pages. So, how do you get the initial framework just right? Let's start by deciding what we consider a good page layout. Here's what I think: First of all, a page should invite and enable the user to accomplish the task they want in a way that doesn't take too much effort. Secondly, it should allow the page owner to effectively communicate what they want

  15. 00:07:03 --> 00:07:31

    whether it is who they are or what the latest addition to the collection is. So, there's two sides of the coin, but they both revolve around seeing what you need to see to achieve a goal. Let's take a look at an example of a page that *doesn't* use visual hierarchy to achieve these results. It's actually a newspaper page from many years ago. Notice how all visual elements seem to be *equally important*. This was very common back in the day. But now, we're used to having things displayed in a much more *supportive* way.

  16. 00:07:31 --> 00:08:01

    Now, take this example. Here, some blocks of content instantly stand out to you and some seem to be more in the background. I imagine that if you're looking for a specific piece of information, this newspaper will help you do that much faster than the previous one. The designers of this page have played with visual elements to make some bits stand out more than others. Can you identify what design decisions they've made to achieve this? First, they've played with *size*.

  17. 00:08:01 --> 00:08:33

    Take a moment to see all of the different sizes they used to create hierarchy in the content. They also used *color* to make some text stand out more than others. Do you see how they did that? Let's have a closer look at how this works in the next slide. Visual hierarchy is all about *setting priorities*. What do you want people to see first, while they're merely glancing over your design? And then, when they *like* what they see, people will start *skimming*. This will make another level of the hierarchy stand out to them. This is often a bit smaller with less energizing colors or less contrast in the background

  18. 00:08:33 --> 00:09:01

    like the second line of gray text you see in this image. Only when people *consciously* take the time to start reading the text will text that is thinner, smaller and less contrasted be noticed. Now, where it becomes fun for you as a designer is when you start playing with these visual elements to attract attention to the right places. Using an *anomaly* to the standard visual hierarchy of a page layout, like the bullet text in this example, will give you control over the users' path of attention. It really draws the eye of the user to this text.

  19. 00:09:01 --> 00:09:36

    In this case, we say that the bold text has more *visual weight* than the regular text. Generally speaking, more visual weight attracts more attention when combined with less heavy elements. Let's have a look at some examples of visual frameworks to see if we can recognize how the designers have used visual hierarchy. Here, we're looking at a screenshot from the Dropbox website. Some visual hierarchy is achieved by making the heading bigger or bolder than the remaining text and by using blue as a contrast color. But all in all, I think this is rather a flat design without big differences in visual weight.

  20. 00:09:36 --> 00:10:00

    When we turn to this example, which is comparable in that it shows a pricing scheme for cloud-based storage subscriptions, we see that a stronger visual hierarchy is used. The most popular pricing option stands out more, not just because it's labeled "most popular", but also because the most popular option seems to burst out of the visual structure that the others abide by. To achieve this, the designs have used brighter colors and they allow the best option to take up more space in the layout of the page.

  21. 00:10:00 --> 00:10:30

    And as you can see, they do this *consistently* as it's not just the boxed area at the top of the page but also the features description which seems to grow heavier for each step it takes. The previous examples were both based on visual frameworks that depend heavily on a white background and fairly minimalist text options. Here, we take a different turn and show you an example that uses many more images and colors to present the content. A visual framework is implemented with a top navigation bar, a large area to showcase highlighted talks

  22. 00:10:30 --> 00:11:02

    and a row system with room for six talks per category. The visual hierarchy that is used to support this framework uses *size* – so, the biggest talk is perceived as the most important, especially since the title of this talk has the biggest font size – and *contrast*. The two other talks in the talk area really stand out from the background, making it look quite important as well. Since most users will visit this website to browse for interesting talks to watch and to get inspired, it's perfectly fine to have size and contrast *competing* with each other.

  23. 00:11:02 --> 00:11:33

    When users would visit a website with a *single purpose*, you might want to combine size and contrast to give a certain element *all* of the visual weight. Now, let's analyze this example together. Which element is the highest in the visual hierarchy and what stands out to you first? In this case, it's a combination of contrast and color. The block of content on the top-left side has the most visual weight. So, what is then the element *lowest* in the hierarchy in the screenshot and what has the lowest visual weight is in that respect the absolute opposite of the heavy black-and-yellow box

  24. 00:11:33 --> 00:12:01

    in my opinion is the category bar that says "Entertainment, Products, People, Fashion, Music" and so on. It has a small font size and is grey on a white background. It attracts the least attention. In this video, we had a look at a very powerful way to create consistency in your designs: the visual framework. We've seen that consistency helps users to find their way on a website or application and increases the usability. To create a good visual framework, you need to determine all of the elements that you need to place on the page and find the right location for them.

  25. 00:12:01 --> 00:12:32

    You can start out by drawing wireframes that focus on the placement before continuing with the style guide, which also describes the colors and fonts that need to be used consistently. When a visual framework is well documented, it helps future designers to continue the look and feel in new pages or products. A good visual framework also takes into account the visual hierarchy of a page. By using colors and sizes, you can give certain elements on a page more visual weight than others – which makes them attract more attention and appear more important.

  26. 00:12:32 --> 00:12:45

    The visual framework and visual hierarchy give you as a designer great input to play around and have some fun with visual elements while ensuring that you create high-quality designs.

A well-crafted UX sitemap guides users nice and effortlessly through a website—but there’s a bonus effect in that in website development, it also serves as a collaborative tool, so people from other teams, including stakeholders with non-design backgrounds, can refer to it to make sure the website’s layout is in line with user needs and business goals. What’s more, a good site map means teams can spot gaps that they might otherwise miss, and prioritize essential content that’s better in tune with true user-centric design.

An example of a UX Sitemap of an eCommerce website.

© Interaction Design Foundation, CC BY-SA 4.0

Table of contents

How to Create an Effective UX Sitemap

Seven steps of creating an effective UX sitemap.

© Interaction Design Foundation, CC BY-SA 4.0

1. Compile and Organize Your Content

First of all, get all your website content together, and be sure to list every page, URL, or title for future pages—and use a tool like Excel or some such to make this list, and it’ll show you what you’ve got currently and what needs development.

Next, you’ll want to look at each page and decide how relevant it is to the sitemap—and you may only find some pages that are truly essential for the primary navigation structure, so pick out key pages that users frequently visit or ones that are more crucial to your business objectives.

You’re going to have to group similar pages to streamline the structure, cut down on the clutter, and—of course—make user navigation nice and simple, and you can consolidate multiple “Contact Us” pages with different access paths under one main menu, for instance.

2. Define Website Goals and User Needs

For the next step, it’ll take a clear understanding of what your website’s purpose is and what the target audience’s needs are—and once you know what your users expect from your website, it’ll guide how you make the sitemap, so ask yourself:

  • “What specific challenges do my users face?”

  • “What aspects of my website or product need enhancement?”

To get insights into these and understand your user needs and preferences, that’s where user personas come in, and you can use these personas based on interviews with current—or past—users or hypothetical profiles of your target audience for new sites.

Watch Alan Dix, Professor and Expert in Human-computer Interaction, discuss how important and helpful personas are for understanding user characteristics.

Show Hide video transcript
  1. Transcript loading…

You’re going to need to make sure you tailor your sitemap so you can address problems effectively and make sure that your site includes a well-organized and user-centric structure—and content—and that’s why you’ll need to ask users questions like these:

  • “In what situations do you typically visit our site?”

  • “How frequently do you find yourself using our site?”

  • “What motivates you to use our site?”

  • “What changes or improvements would enhance your experience on our site?”

3. Decide on Flat or Deep Sitemap Design

You’ve got two options for how you go about creating your UX sitemap—it’ll depend on the type of websites, so think carefully about the size of your website, the amount of content, and how you want users to interact with your site:

Flat sitemap design: A flat sitemap design has got a limited number of hierarchical levels—usually up to four—and it’s better for smaller websites that have got fewer pages. This makes for quick and easy access to any page with just a minimal number of clicks. More precisely, it’s:

  • Suitable for smaller websites with about 10 pages.

  • Got up to four hierarchical levels.

  • Got any page being easily reachable in four clicks or fewer.

  • Ideal for straightforward and easy navigation.

Deep sitemap design: A deep sitemap design has got many hierarchical levels, and it’s more apt for larger websites that have got extensive content and need something to handle numerous pages and categories, something that can give the site detailed and comprehensive structuring. More precisely, it’s:

  • Best for larger sites—like e-commerce platforms—with 100 or more pages.

  • Got deeper levels of hierarchy.

  • Good to accommodate extensive content.

  • Going to call for features like breadcrumbs—for easy navigation of deeper content.

4. Organize Primary and Secondary Pages

It’s a good idea to start with the homepage—or landing page—not least since it’s the central hub or the primary page. Then, from there, branch out to other main category pages—and they’ll work as your primary pages, and examples of these pages often include major sections like Products, Services, About Us, or Blog.

Secondary pages are the subcategories inside of these primary pages—like under Products, you might have different product categories like Electronics, Clothing, Books, etc.—and you can represent each one as 1.1, 1.2, 1.3, and so on in your numbering system. When you’ve got this methodical categorization in place, it’ll help you keep a clear and intuitive website structure, and you’ll be able to take things to finer-tuned levels past the primary level of a product page—whatever’s appropriate for your site’s pages.

What’s more, look what the footer does in your website's architecture, the space you use for subsidiary—but essential—links like Contact, Privacy Policy, and Terms of Service, and the footer acts as a separate navigation area for users to access important information no matter where they are on your site.

Last—but not least here—make sure you’ve got an “Error 404” page to redirect users who land on a nonexistent page inside of your site to relevant sections instead.

Once you’ve got your primary and secondary pages all organized, it’s time to do this:

  • Link all primary pages from the homepage, and make sure the links are all visible and accessible to make a nice and intuitive navigation path for your users.

  • Connect secondary pages to respective primary pages next, and as you’re doing this internal linking, make sure the hierarchy is clear and logical so users get to enjoy easy navigation.

  • Focus on the user journey, and plan links so you lead users to the relevant, expected content they’ll be after.

What’s more, update the sitemap regularly and add new pages and integrate them into the existing structure, so you’ll keep the UX sitemap good and relevant—and efficient.

6. Test the UX Sitemap with Scenarios and Gather Feedback 

Once you’ve organized your sitemap, go on and test it through various user scenarios—and imagine how different personas—as in, ones that represent your target audience—would navigate your site. It’ll show how user-friendly your sitemap is, plus potential navigation issues which users may run into, too.

One big ally you’ve got when you’re doing UX sitemap testing is tree testing, and it lets you evaluate your sitemap on its own—what you do is you create a list of objectives and then ask users to navigate to where they think the required content would be. Tree testing services such as Treejack just call for the details of your sitemap, and they maintain statistics on user success rates and details about where navigation seems to fail.

Always be sure to get your team and stakeholders involved in this testing phase, and that’s because their diverse perspectives can provide valuable insights—as long as they give honest feedback on the sitemap's layout, usability, and effectiveness.

Feedback and testing are vital forces to help you shape the product as you work in iterative refinements so it ends up better meeting user needs and enhancing UX design and usability—and it’s impossible to overstate how precious these are, especially when you get them in context among the various steps and elements UX design involves, as this video shows:

Show Hide video transcript
  1. Transcript loading…

7. Finalize and Document the Sitemap

Once you’ve tested and refined the sitemap based on feedback, it’s time to finalize it. Document the sitemap for the current website structure and any future modifications—and it’s particularly important to ensure that all team members can easily access the final sitemap both for reference and for implementation.

Toolkit for Visual Sitemaps

Visual sitemaps give several advantages when you’re working with website development—and, when you create a sitemap, it’s particularly good when you’ve got the right tools, so let’s look at some now.

Top 6 tools to create visual sitemaps.

© Interaction Design Foundation, CC BY-SA 4.0

1. Lucidchart

The user interface of Lucidchart

© Interaction Design Foundation, CC BY-SA 4.0

Lucidchart specializes in complex diagrams like UX sitemaps, it’s got a user-friendly interface, and it includes a variety of templates and shapes. Its drag-and-drop functionality makes diagramming fast, while the real-time collaboration it gives team members lets them work together from various locations.

2. Miro

The user interface of Miro

© Miro, Fair Use

Miro acts as a digital whiteboard, and it’s great for easy brainstorming and team design, and—what’s more—teams get to work smoothly together, wherever they’re located, plus Miro includes features that help you create UX sitemaps, journey maps, and wireframes.

3. Figma

A sitemap on Figma

© Figma, Fair Use

Figma provides strong design and prototyping tools, so you can create interactive prototypes to test your website flows, and Figma lets many users work on a sitemap at the same time.

4. DYNO Mapper

A sitemap on DYNO Mapper

© DYNO Mapper, Fair Use

DYNO Mapper is great for you to create, customize, edit, and share interactive sitemaps, it integrates with Google Analytics for content inventory, audit, and keyword tracking, and the tool lets you enjoy easy collaboration and website accessibility testing.

5. PowerMapper

A sitemap on PowerMapper

© PowerMapper, Fair Use

PowerMapper maps, tests, and analyzes websites—and companies like IBM and NASA use this UX sitemap generator—and it scans websites to capture thumbnails and metadata, and it creates visual sitemaps, which you can check for various website issues.

6. Pencil and paper

A person drawing a UX sitemap using pen and paper

© WordPress, Fair Use

Last—but certainly not least—let’s get to the low-tech, or perhaps even “no-tech,” section with good old-fashioned pencil and paper, which give you a simple yet effective way to plan sitemaps as you can group content items easily on the page; plus, it’s a good method to help you optimize information architecture. Still, you can use whiteboards, chalkboards, or easels for planning, too—whatever works best here.

Practical Aspects of UX Sitemaps

1. Visual Clarity

A UX sitemap has got to have straightforward visual elements working for it so there’s no confusion and everyone can understand the site’s structure at a glance, and that’s why clean lines, easily readable fonts, and a straightforward layout are essentials.

2. Intuitive Structure

The structure of a UX sitemap really needs to mirror the user's thought process, and logically group related content so users get to have that natural browsing experience that helps them navigate the site well, with related pages all nicely linked in a way that feels nice and natural and coherent.

3. User-Centric Design

As they do elsewhere, user needs take priority in a UX sitemap, and the hierarchy has got to make important pages easy to find and access.

User-centered design is about getting that focus on tailoring the product to create a better user experience, and that’s why it’s good to know what elements make up the user experience. Check out this closer look at the five elements of user experience outlined by Jesse James Garrett in "The Elements of User Experience."

Show Hide video transcript
  1. Transcript loading…

4. Scalability

Flexibility for growth characterizes a well-designed UX sitemap—and it’s that ability to build and append that’s another big plus, accommodating new pages or sections as the site evolves so there’ll be no need for major redesigns.

UX Sitemap Best Practices and Examples

UX Sitemap Best Practices

8 UX Sitemap Best Practices

© Interaction Design Foundation, CC BY-SA 4.0

  1. Keep it user-centric: Design the sitemap with the user's journey firmly in mind, and keep a tight focus going on how users search for—and navigate through—information on your site.

  2. Maintain simplicity: Even if you’ve got a really complex site, go for a sitemap that’s as simple as possible, since a structure that’s too, too involved (as in, overly complicated) will likely end up confusing whoever gets to see (and try to use) it.

  3. Use clear labeling: Use clear, descriptive names and labels for categories and pages so an “average user” can make sense of it, and don’t have any technical jargon in there unless it's common in your industry.

  4. Be sure there’s good consistency: Keep consistent categorization and naming conventions going throughout your sitemap.

  5. Prioritize key content: Put the most important, most-frequently-accessed web pages in prominent locations.

  6. Allow for scalability: Think ahead—and design your sitemap for future expansion, so you (or others involved in it) can add new pages or categories without messing up the current structure in any way.

  7. Regularly update the sitemap: As your site evolves, so should your sitemap, too.

  8. Test and iterate: Continuously test the sitemap with real users—and use their feedback to make changes that bring results and prove good iteration.

UX Sitemap Examples

Example 1: Home Decor Website

UX sitemap example of an e-commerce website

© Medium, Fair Use

The sitemap has got a well-organized breakdown of a website's content going across several key categories—like 'Shop,' 'About,' 'Blog,' and more—with each branching neatly into subcategories, and those get further detailed into individual pages or topics.

The sitemap uses color coding and shapes to distinguish between different types of pages—and a hierarchical, tree-like structure helps you visualize the relationships between sections and pages.

Example 2: SaaS Application

UX sitemap example of a website

© Miro, Fair Use

On this one, we’ve got a different approach on show to organizing the web pages, with this sitemap’s clear top-level view that starts from the “Home” page and then branches into main categories like Tour, Cases, Examples, etc. It’s got a clean, grid-based layout that’s easy to understand the site’s structure at a glance with, and consistent color coding for all items.

Notes such as "add 3d level of cards" suggest that this sitemap still needs a little work, and it shows how the sitemap can work as a living document, one that evolves with the project.

The Take Away

A UX sitemap is a great tool that works as a blueprint both for organizing website content and for establishing a user-friendly structure and visual hierarchy—and it’s something that helps you guide users through a website and meet business objectives of your brand. So:

  • Design sitemaps with a focus on user navigation.

  • Keep the sitemap structure clear and simple.

  • Update the sitemap to reflect the content and structural changes.

References and Where to Learn More

Get started with UX Design in our course, User Experience: The Beginner’s Guide. 

Access Miro’s UX sitemap template that helps you create UX sitemaps in different layouts and structures. 

Read Monica Maye Pitts, founder of MayeCreate, talk about the difference between XML and UX sitemaps in detail. 

Get Weekly Design Insights

Join 315,873 designers who get useful UX / UI Design tips from our newsletter.
A valid email address is required.
661 shares

Open Access—Link to us!

We believe in Open Access and the democratization of knowledge. Unfortunately, world-class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.

If you want this to change, , link to us, or join us to help us democratize design knowledge!

Privacy Settings
By using this site, you accept our Cookie Policy and Terms of Use.

Share Knowledge, Get Respect!

Share on:

or copy link

Cite according to academic standards

Simply copy and paste the text below into your bibliographic reference list, onto your blog, or anywhere else. You can also just hyperlink to this article.

Soegaard, M. (2024, November 29). What is a Sitemap in UX Design?. Interaction Design Foundation - IxDF.

New to UX Design? We're Giving You a Free eBook!

The Basics of User Experience Design

Download our free ebook “The Basics of User Experience Design” to learn about core concepts of UX design.

In 9 chapters, we'll cover: conducting user interviews, design thinking, interaction design, mobile UX design, usability, UX research, and many more!

A valid email address is required.
315,873 designers enjoy our newsletter—sure you don't want to receive it?

New to UX Design? We're Giving You a Free eBook!

The Basics of User Experience Design

Download our free ebook “The Basics of User Experience Design” to learn about core concepts of UX design.

In 9 chapters, we'll cover: conducting user interviews, design thinking, interaction design, mobile UX design, usability, UX research, and many more!

A valid email address is required.
315,873 designers enjoy our newsletter—sure you don't want to receive it?