Sitemap vs. Wireframe Explained

Daniel Walter Scott
A free video tutorial from Daniel Walter Scott
Adobe Certified Instructor & Adobe Certified Expert
4.7 instructor rating • 28 courses • 386,841 students

Lecture description

A sitemap is similar to a flowchart which visually displays where the sites pages will go on your website. A wireframe is a simple mockup using placeholders to lay out the general look and feel of the page. The aim of the wireframe is to give an idea of where things will go rather than detailing what colors, fonts and images will be used.

Learn more from the full course

UI & Web Design using Adobe Illustrator CC

Build professional web & app designs using Adobe Illustrator CC

04:05:34 of on-demand video • Updated July 2019

  • Work as a UI designer building web design & app designs.
  • Use Illustrator to a professional level.
  • Know how to build wireframes.
  • Know how to build site maps.
  • Know how to design for a responsive website.
  • Professional workflows and shortcuts.
English In this video we're going to quickly talk about what a Sitemap is versus a Wireframe. Those two kind of get mixed up when I'm talking to people so it's very easy just to show you. This, my friends is a Sitemap, it’s like a flow chart showing you what pages go where on your website. And Wireframe is a mockup of your page by just using kind of really basic graphics. So place holders for images, place holders for text. We're not actually including the logo, just writing it there. So it's just to get a kind of idea in some sort of order... where things might go rather than working on designs, and colors, and fonts straight away. So this is what's called a Wireframe, and this is what's called a Sitemap. Alright, let's go on to the next video.