Web Design #BTS: A Look at the Sitemap Process

Y'all want to see behind the scenes come on!

What's going on y'all, John D Saunders here! You know the vibes. If you want to see behind the scenes on how we develop a sitemap using tools like a brand guideline from a client, competitive analysis and more, let's dive into my computer and I'm going to show you in real time how we get it done.

All right y'all, sitemap action let's do this!

The Process

So first things first we actually use a tool called Relume for creating our stemaps initially, so I will show you what that looks like. Sorry I can't spell today y'all. This is the tool, it's amazing! I recommend it to anyone who's interested in creating websites or designing site Maps or wireframes or anything that you're working on. Highly recommend it, I talked about it in my last videos but I won't focus on that here. I'm going to focus on the main sitemap process, so this is behind the scenes.

So as you can see here, I've got my site map here, I'm going to move this a bit so you can see that we've done three versions of this sitemap. So initially, we'll send the client the main sitemap and here's how we structure it. First thing we do is we have a navbar, which is the main nav these are all of the different pages that will be featured on that main navbar. And then of course we have the footer, which will all be all the links in the footer.

Then on the homepage we have the main homepage and in all of the sections following that. What we usually do for the client if we're sharing it in figma, we'll give them a quick little intro video saying something like “Hey, welcome to the sitemap, you can navigate this pretty easily by holding command pushing plus and minus to zoom in and out. Click and hold the spacebar and click your mouse around to be able to navigate around the sitemap and then you can click here and leave comments here with any questions that you might have”.

As you can see we have probably quite a few comments here, let me zoom in here a little bit, I'm going to hit comments and then I'm going to hit show resolved and I think most of these were pretty much resolved on the back end. But ultimately, the client will leave a list of comments for us to reconcile here in the sitemap. So we usually put the site map here, we have the homepage here and then we have the main nav subpages right here.

So this is the main podcast page and then we'll have CMS pages below that. So anything that's like a subpage this will live in the content management system, like webflow. we have the episodes and then we have the individual episode pages. And then we usually put like template page or something like that to specify that those are part of the CMS that we're going to build out, so we can pass that on to our design and development team.

And of course you can see all the subpages here, as well for clients to be able to review, take a look at and make sure it's online. Now what we do is we do this, we do a sitemap and once this piece is approved we go straight into development. We don't do low fidelity, mid fidelity none of that, this sitemap is really great because it shows the sections of each page.

So it's really great for the client to be able to understand what we're going to have on that website and it's also great for our designers to understand what's needed for them to design in high fidelity. I wanted to keep this quick, to the point and brief y'all, As you can see we went from V1 to V2 and then the approved version which is version three.

‍

If you have any questions y'all, drop the comments below. Again I'll drop in the description the name of the tool that we use to build out these sitemaps and if you have questions, let me know. Thank you all for checking out the video content, make sure you subscribe, drop a comment if you have questions and I will see y'all next week, peace.