Let's talk of sitemaps and flowcharts. Sitemaps and flowcharts are different things. 100% they are different things. We talk about a site map and the traditional sitemap when talking about the web could mean two things. One, like an XML sitemap which is just a list of all the pages that your website has. So you say sitemap.XML that's what that is. And actually is the same thing as the other option, which is option two. Which is a overall or top view of all of the pages that are in your website and how some of their connections work. Sitemaps are really useful tools when you have a lot of pages on your website. How do we go and create these things, that's one.
The second thing here I want to talk about is flowcharts. Flowcharts show a flow between things and normally have conditional logic meaning a user can either sign up or they can log in. That's sort of a break. Now you can use something like a sitemap to illustrate that but it's not really the same. And I think of flowcharts more as an engineering diagram. Where there is a logic and where there is paths and there are a clear sort of breakdown. A flow of where the user is going versus the sitemap is just the pages. Let's go and create some of these. There's two tools that when I work with clients and I share with my students, and there's mindmap and cargo. And I like these because they're really, really fast and easy.
They're not the most beautiful. And they sort of look like these spider diagrams, but I like it because it's super fast and I don't want the tools to get in the way. When I say tools I don't mean just software, I mean these processes and methodologies, don't let them get in the way of your thinking. Get your thinking out, get your words out as fast as possible. So I just downloaded the latest version of mind map, which is mind map two, I believe, but it's actually mine maps six. I don't really know what they're doing there. So on this computer I have a 14 day trial for this, and it's pretty simple. You'll start out with something like this. And you could either say homepage, or you could say your name of your thing. So I'd say fitness website. And then I have a little plus here and I just click on that plus and it opens up an input field and I can go in there and write the next thing. So I know I'm going to have a homepage, so I would type homepage and I drag it over here.
Some of these like you can turn off the auto. This whole has auto so to auto line these things, but you can turn off that feature if you don't want it. I probably going to need an about page. And I am going to need a contact page. And I'm going to need probably a support page. And from there, I'm going to need of course a log-in page, and I'm going to need a register page and I'm going to need a forgot password page. And I'm going to need a user dashboard. And I'm going to need a user profile page. I'm going to need a exercises page. And I'm going to need a user's page where I can see all my users. Of course, I'll need some legal stuff like terms of use and that's terms of use not terms of user and privacy policy. Maybe even have a copyright notice. And so as I go through this, you could see like [inaudible 00:04:15] rapidly and within about 30 seconds or so I have a lot of pages and users and user profile page. This is probably going to be something like that.
The user needs To be able to edit their account so they probably need an edit account. And inside of that page, they'll probably have something like settings and another page that says delete account. And then we add just a page that says edit. And I'll just say that this is account. And then the support is probably going to be inside of the account page. So you can see how that already immediately starts to work in that flow. Now, this is me just listing out these things right, under exercises, I would have a singular exercise. So I click in here and make that singular. And that gives me a sense of all of the different things that, pages that I'm going to have. Again, these are page-specific and it's a fast tool to do this. Now, again, not like a flowchart and make the very clear distinction between a sitemap and a flowchart here is this login here and register here are on the same level as all of these pages.
It's not showing like, Oh, you have to log in. And then that'll take you over to this user dashboard. Where did I put, user dashboard? So I could something like this. And then on that user dashboard, you would click onto account. And then also from the user dashboard, you could see users that's a little bit more like a flow chart, but it's really not the same thing. And so this is really all at that same level. Though they might be some of these pages you might need to be authenticated in mean you've logged in and other pages you might not, it's all really here. The idea of this is to get an overview of all the physical pages that you are going to have to create. I know I need to get a terms of use. I know I'm going to need an exercise page. One other thing to do is these are all just random colors and you can go in and change these colors of course, you have some options up here.
So you can change some of the styles here for example, the branch, you can change the style of that. And of course you can change the color of these. And I'll just start out with, by making all of these black and why I do that is for example, an exercise. These are all pages like literally I'd be able to go to /bower /register /exercises, and then /exercise a singular exercise. But then under this exercise I might have actual fields, like what are the fields that I can type in when I create an exercise? So that might be something like a title. And then here I'd have another one, which is a description. And each exercise might have... it's got to have a category because I wanted to search by those.
So I would say categories, and it might have an image or multiple images. So I'll say images and it might have the possibility to have multiple videos. And so now I can start to see these types of content, but with images and videos, those probably have content inside of them. Meaning like a video has a title, an image might have a title or description that goes along with it. Now imagine someone's trying to tell you how to do like child's pose in yoga. How do you go and do that? What do you visually need to see in order to understand that is an image going to be enough? Do I need to see a video of it? Do I need to see a description of that image? Not just the description of the overall exercise, which might be multiple exercises. If that's the case, then we could break this down into a subsection, say something like a block.
And then a block has the possibility of having an image or a possibility of having a video. It can also have a title, let me duplicate this and paste it on there. So this has a title and a description. And again, I just clicked it, copied it and then click over here and I pasted it on there. So a block would be this thing that this repeating block. So imagine that I had a block, I can add an image, a video, a title, a description, and then I can add another block right underneath it. And so I can start to go through this and again, you can start to, to define all of these fields and then field I could identify as something like blue. And then I know that these are the fields that I'm going to create. And these are the pages that I'm going to go and create.
Same, goes with setting here and edit. So remember if we go back to our sheet here, where we listed out all of the fields the user is going to have, if I copy over those and jump back to MindNode, I could then click on this and paste them and make sure to click on the parent there and then paste them. And then I could say, these are all going to be fields and so those are blue. As you can start to see very quickly, I get a better understanding of all of the content and the fields and the pages that my website has. Again, this is different than a flowchart, which is going to show the flow of something. Now I'm going to jump over to another tool. This is MindNode and this is for Mac I think, it's also an iPad, but it's really the iOS, MacOS Apple ecosystem.
There's another tool a lot of my students like to use, which is called Coggle. And Coggle is just like MindNode, really it's the same kind of thing. You create a diagram and you'll see this and you'll be like, wait that's the same thing. Looks a little bit different, but here's our fitness website. And I do the same thing I click the plus and I'll say homepage. And I can click the plus and I can say About page. And of course, these can be linked off of there and all of that as well so just click the plus and you get another one sample just so you can see how this works. You got a little bit more complicated options here where you can change some like colors and things like that. They're going to want you to pay for those things. I tend to stick with MindNode it's a one-time payment. I pay that and it's set up. It's good to go.
So I have an old version of MindNode on my other computer. So again, both really easy tools to create sitemaps, Coggle and MindNode. And the next episode, I want to talk about what flowcharts are, and you'll see that difference of creating a flowchart versus a site map. Wait, one second, before I go and do that, let's talk about Adobe XD for a second. You could manually go and do this, and this is the like really old school way I think of doing this. It's the slowest probably way of doing it, but you get most control of visually what it's going to look like. If I said fitness website, and I just put that in a box I mean a Adobe XD, and you can check out the series here on code time on Adobe XD, and I can group this together and then hold my option key and drag it down here.
I can come down and say something like About, and then I'll take this and so it's auto centered. Great. And so now I have this and then I could literally take a line and I could draw a line from there to there and I'll put it behind by using command Shift, curly bracket. And now it's back there. Then I could draw another one and I could draw another line and take this and put it back there command Shift, curly bracket. And I have what is a basic site map. Okay, so next episode let's talk about flowcharts.