Join Ray Villalobos for an in-depth discussion in this video Planning your site with mind maps, part of Bootstrap 3: Advanced Web Development.
- View Offline
Any website project can become an overwhelming task with mountains of content that needs to be organized into a website. And so I usually begin every project by analyzing the content I'm going to need for the specific site, that way you can determine how that content needs to be structured within the confines of a typical website. There's a lot of tools that you can use to do this. You can use everything from napkins. I've seen people use sticky notes on a board. Or just pencil on paper. Now I like to use something called a mind mapping application to do this, because I think it's a really flexible way to visualize and reorganize the content in your website while you're brainstorming.
There is a bunch of different mind mapping tools available and if you're looking for a free online tool, you should check out bubbl.us, it's at bubbl.us now, it's really easy to use and it also let's you export your maps as PDF's or PNG's. This is going to use the flash plug-in so make sure that you have that installed. The nice thing about these mine-mapping applications is that they work pretty much the same way. So you usually start with some sort of master note and you click on that and you can rename that. So I'm going to call this, website. And you can see by the hints that if you hit Tab, it'll add another note to the right-hand side.
And if I hit Cmd+Enter, you're going to add a node underneath. So here I could do something with pages. And if I hit Tab, I can do something like navigation. And start brainstorming on the navigation and my pages. Maybe hit another one for content. And if I hit Cmd+Enter, it goes down. And then I can brainstorm on the different types of content. So. About artists or something like that. So they all pretty much have the same interface. They may look a little bit different. You can also usually reorganize these things by just clicking and dragging them. So if I click and drag the node, you can see that I can move them around. And they all kind of work like this.
You usually can also redirect a node into another node just by clicking and dragging on top. So now, this node belongs. To this parent. I you're looking for an HTML file solution you should try something called mindmeister. It's pretty cool because it integrates very well with Google docs. Again it works in pretty much the same way, you start up and you get a sample node and I'm going to double-click on that select this text and all this Roux Website. And if I hit the Tab, it will start a new node. I can do pages, content, and I'm hitting just Return a couple of times.
And navigation. And if I hit Tab again, it goes into one of the nodes, so I could say Home, Return, Return, About us. Now if you drag any of the nodes just like with any other mind map in application, you can reorganize them into another parent. One of the nice things about mindmeister is that it does integrate well with Google docs and that can be a really cool advantage, because you can collaborate with people in different locations. On the same document. Now I'm on a Mac and I like to use an app called MindNode. It's pretty much the same as the other applications. And it ultimately doesn't matter which solution you use the point is that at the beginning of building a website your first task is to organize the content into different areas. So let me walk you through a typical workflow that I follow for organizing my content.
Usually I start by dividing my content into a few different sections. I'm going to rename this Roux website and I'm going to hit the Tab. And I'm going to separate this into content. And I'll hit Return twice and then I'll do pages and then I'll do features. And I'm going to move Pages over here, because that's going to be something that I'm going to do opposite of Content and Features. So Content is really where I start brainstorming about all the different types of things I want to add to my website. This is sort of my first step. So I'm going to hit the Tab key to organize a new section. And in here, I just start brainstorming about the type of things that I want on my website.
And then from here, you maybe start talking about the other types of content you may have. You may want to have a carousel, maybe a promo for the mobile app. So Mobile Promo and some promos for some other pages. So usually when you go to a website you have a main area of content and then perhaps some secondary type of content so I'm going to put in here a few promos. So Artist promo and Artwork promo and then something about the schedules. So on some pages that are not the page with the schedule, I may want to say hey, here's where the schedule is probably on the home page. And photos, and once you've got a good list going you can start separating the main content from the sidebar content, and that's what I put into features. So this photos is going to be a Photos Promo, and let me capitalize this. I really want to move all this secondary type of content into this Features' section.
So, now you can see that I have sort of primary content. This is where probably most of my pages are going to come from and then I also have secondary content that I may add into different pages. So now, I can pretty much decide which of these are going to be main pages. So, I'll come over here to this left side and I'll hit this plus sign and I'll start planning out the pages that I want to have. I know every website is going to have some sort of homepage. So I'll type that in and then I'm going to have probably from looking at the content on the left. I probably need some sort of page for the artist. And definitely a page with the schedule. And also maybe everybody wants to know where the event is going to be, so something about venue and travel, and perhaps at registration forms, so I'll do register, and these are going to be my main pages. Now I also probably want to talk about what my navigation is going to end up being, so I'll start that right now.
I'll make a new node, I'll call it navigation because I see that there's some pages that I don't necessarily want to be main pages, so about the Roux Academy probably doesn't need to be a page, maybe that's secondary navigation, so I can start talking about that right now. So I'll say Main nav and Secondary nav. And in here, I can probably move some of these into this section right here. So the secondary nav is probably something that's going to go at the bottom. And I can copy, actually, this. And paste with copy and paste commands.
This is the part where you start thinking about, which of this content do you want on the individual pages? So the next thing that I would do is I would take maybe the home page and start brainstorming on the types of things I want on that. So, on the home page I definitely want to have a carousel. And probably you want to immediately give information out about the event. That's sort of the introduction. Then maybe, talk about the featured artists. People like to know who's going to be speaking, to see if they're interesting coming. And then definitely, you want to, add something about the venues. So Venue, Intro. Or just info about the venue, this is already a lot of main content, so I usually start another section here I'm going to call a side or sort of sidebar content, and then in here you may have something like scheduled promo and maybe something with my mobile.
Information so the mobile information is going to be something to direct people if they come to the main website into a mobile application. And then finally I may also have Registration, something about registration within the sidebar that so that the people know that when they come to the main page immediately if they're interested where to go for registration. I know it's part of the main navigation but it's nice to have as a promo probably in other pages. And from here on out I would just really go through and flesh out everything in the remainder of my pages. Now don't worry that you're going to get everything perfectly right at this point.
This is really a brainstorming tool. It makes it super easy to move things around and, push one of these nodes into another node. Or take, whole sub-nodes and place them somewhere else. That's what's cool about a mind mapping application. It gives you the flexibility, to reorganize your content and rethink how you're going to work on things. It's really better than using anything physical because it's so easy to move things around. From here you can also say start another node so a new main node and start something like maybe Content and from here you can say okay I know I'm going to need some photos for different sections. And maybe some articles that people need to write. So, from here, you can start brainstorming about, okay. Out of this content that I have right here, what do I need to write and assign to somebody to write for me? So, in here, you may put, well, I definitely need, the schedule needs to be written out. So somebody's going to work on that.
And you can make an assignment here to, to a person so, instead of just articles, maybe you can divide this into sub people, so maybe like Eric, Donna, and whoever else you have on your team, and then you can kind of just drag and assign them different parts of content. And then for photos, Peter, Sheila. And then you could just make assignments. So say, okay. Peter is going to find all the photos for the carousel. And Sheila is going to have the photos for the slide show. And this makes it just a lot easier to start planning things out.
- Prototyping the site
- Working with a local web server
- Creating a baseline template with Git
- Scaffolding the main columns
- Making the site modular with PHP includes
- Adding basic navigation
- Adding a carousel
- Working with buttons
- Creating and activating tabs
- Adding page and structure LESS styles