Join Ray Villalobos for an in-depth discussion in this video Prototyping your site using mockups, part of Bootstrap 3: Advanced Web Development.
- View Offline
Once we figure out the site structure through something like a mind map, you need to start thinking about how your content is going to translate into pages. What you need to do here is look at your content plant and figure out how its specific elements will translate in the page layout. So, you need to answer questions like. Where should the navigation go? Do I need one or two sidebars? And where should they be? Should they be on each side or off to the left? And then what happens when somebody views my site on a tablet? What do I do with those sidebars? A lot of those questions can't be answered while you are laying out the site with HTML.
But it's sometimes a good idea and a lot faster to work them out in a prototyping tool. Now just like with my Mapping tools, there's a lot of them out there. People use anything from napkins and papers, professional software like Photoshop, or any number of specialized tools. One tool that has a lot of respect in the design community is called Balsamiq, and it's what I'm going to use, but feel free to use whatever you're comfortable with. So if you love something like Photoshop, that may be the perfect prototyping tool. Whatever you're fast with is what's going to make a difference when you're prototyping. Balsamiq is an Adobe Air application which means it runs on Macs, PC's, or Linux workstations.
And it has a pretty simple interface. You start out with a single document, and then you can choose different control types. So these kind of things right here. You just click on them, and drag them onto the screen, and they usually get some sort of text option. Now if I click that off, when I click on any one of these elements, you'll see that we get a contact senstive window that let's us choose different options for that control. Let me go ahead and delete that. There's a few buttons right here. That lets you constrain the amount of stuff you're going to see. So, when you have the first button selected, it says All, and it shows you every single control type. That's a lot of stuff.
So you can hit, for example, the Common button, that shows you the most common control items. Or go into specifically just Text Elements and drag. Text Element just like labels or any other type of text element that you would use in your document. So, I'm going to go to the Container section. And I'll start off by dragging a browser window. So, I'll just pull one up by clicking and dragging. And if you want to, you can put a title. You can put the URL right here. I don't really need it, so I'm just going to click off, and over here you can see that, in the Browser Window Contact Sensitive panel, I have stuff like the Size, Color of the page, and whether or not it gets a scrollbar.
If I click the Scrollbar on, you can see that I can also determine the position of the scrollbar. That's sort of a little bit fancy, you don't really usually need to worry about that. But it might be a good starting place for some of your other layouts. Now, usually when I'm designing for the web, I start off with a 1,200 pixel wide layout. So I'll do 1,200 right here and hit Return or Enter and that makes my window 1200 pixels. I'll go ahead and change the height to something really tall, like 1000 pixels and hit Enter. And you can see I can scroll down and I can see my window a lot bigger. Now I'm going to zoom out of this view, because I can't see everything onscreen. Just like with any other application, you can go to the View menu. And select Zoom Out and Zoom In, or select Zoom to Fit, which is what I'll do right now.
I can see kind of my whole page right here at a glance. Now if I want to I can start working with the different sizes for different devices. So if I want to take this page and make a copy of it I can hit the Duplicate button, which is right here. Or I can also, just like with a lot of layout programs. Let me go ahead and delete this. I can just click on this element and then hold down the Option or Alt key on a PC and then click and drag a copy. Once you have that, then you can say, I'm going to design something for maybe tall mobile devices.
So, I'll do 768. Which is sort of the traditional size for a tall mobile device. And maybe I'll make another copy. And I'll do something like 1024. And that's a slightly wider mobile device. And when you do stuff on a tall mobile device, you may have to make this actually a lot taller. You may want to go to something like 1,500. And perhaps you want to do one more for a very small mobile device. So I'm hitting Option click and drag. And just do something like 320 or 360.
So it's a very thin mobile device in vertical orientation. And I can scoot that over if I want to. just like with other Layout tools, if you want to move something over and you want to constrain horizontal or vertical movement, you can hold down the Shift key while you're dragging and that constrains that movement. And if you want to, you can reorganize these so that this one goes actually after this one which is a little bit wider and you kind of. And get your responsive designs started. Now I'm just going to work with a single one right now. I'm not going to worry about responsiveness right now because I just want to work out the problem of my website.
So another thing that you can do that's useful is log the existing element, so of you click on this you can see there's a row of icons right here and if you scroll over them you can see what they do. As well as the Cmd key, which sometimes is sort of useful to learn. I'm going to hit this Lock button right here and that locks this element. I can no longer choose it, which is great for a layout. You'll find that a lot of times things that you drag onto the page will automatically lock to the edge if you move them close enough to the edge, so if I click and drag something like this. Then when I get very close to the edge, it's just going to log into place.
And that's very useful. I think the rule is if you're going super fast, it doesn't lock. So I go super fast and it doesn't lock. But if I go kind of slow, it locks into place. So this may be the area that I want to use for a carousel and I can go into my Form controls and get something like a Radio button or just a regular button. Let me grab one of these buttons. And I'll take out the text right here. So what I want to do is layout a carousel. And then I'll put this one on this side. And I'll make a copy of this. I'm a little bit too zoomed out right now, so I'm going to hit Cmd+ to, kind of, go in a little closer.
And then, Option-click and drag, to make a copy. And, notice that over here, in the Contact Sensitive panel, I can chose the direction of the button. So I can click on this button right here to work with the other side. And I'll also copy a Radio button. And I'll again take off text. That just gives me a kind of a dot, a circular dot that I can use to indicate where the Page panels are going to go. So I'm going to hit Cmd+ a few times. And option click and drag just three times it's enough to indicate that people are going to be able to hit these little Control buttons, and move them over sort of to the center.
Plus I'm also going to group them. You can also group things in this program pretty easily, but here's the icon for it. So you can click on that and that just makes it an item. A little bit easier to move around that way, so you're moving all three items at one time, which is good for this right here. So Cmd- a few times. And I can start playing around with these other elements. So, I'll click on media. And I'm going to drag over an image. Just to show that, somewhere in here, I'm going to create an area that's going to have my logo. And let me go ahead and move this down. It's nice that I have that window locked up right now. So let's go into.
Maybe this could be inside a little bit more. And then I'm going to just. Grab. I want some paragraph text. So I know I'm going to need some of those. So I'll grab one of those for this. And this is pretty cool. If you type the word lorem in, it automatically knows that you probably want some Greek text. And I'm going to actually copy that a few times. So actually I can just type lorem again and it's going to do it again. And it's going to do it again, so I'm going to use this same text box a few times, just to make it look different. I'll sort of delete a piece of this and have three paragraphs instead of just one. And it's kind of cool, because what it does is, if you make the window smaller, it just hides some of that text.
So that makes it really, really flexible for you to lay something out how you would. So, maybe something like that for my introductory text. So I'll drag this, it's a subtitle. Let's go ahead and put a big title. So we'll drag that in here and I know that on my homepage again, if I go back into my layout, on my home page, I'm going to want the carousel, which I kind of drew up top. And then I'm going to want stuff, like about the event, the feature artists, and the venues. So let me go back here and so I'll type in about the event, hit Enter, there you go. I'm not sure why they chose something like Comic Sans for the text, but it shouldn't really matter.
Even though it bothers me a little bit (LAUGH), because this is just a mock up. It's not supposed to be anything close to high fidelity. But, at least I can come in here and change the font size. So, I think that's may be a little big and move this text underneath. And once I have one of those elements then I can just select both of them. And hold on the Option key. And that give me that double icon that I can use to click and drag another section. And this other section is going to be featured artist. And then I'm going to do one more. Looks like I need to make my windows bigger, so I need to unlock it. To unlock, you have to hit Cmd+3 or up here under Edit, you can see that it's Unlock All. Remember the Cmd key, it's Cmd+3, or Ctrl+3.
Unlock All shows me this window again, and I'll click on this background window, and I'll make it 1500 pixels tall. So I need to move my navigation now to the bottom. Just click under Agdat somewhere around here. Okay so I'm kind of getting a feel for how I need to lay this application out. I know I want to sort of a bigger picture but maybe some of this content needs to come in a little bit and for my Featured Artists I don't really want there to be just text. I maybe want a little bit of an introduction here and then maybe some photos of the artists.
So I'm going to go back to Media and drag in an image. Leave that right there. I don't really need any text. And so, I'll start kind of laying out some photos. So, again, if I click and drag this while holding down the Option key, I'm also holding down the Shift key to constrain. So, I made one copy right here. If I want to make multiple copies, you can just hit Cmd+D again. Notice that's it's actually giving you some, hints, when you put the text over, this. So if I hit Cmd+D, or Alt+D on a PC, I can just get, another copy at the same distance as before. So now here's where I can make a decision about, whether or not I want the feature artist to just be sort of a row of artists, or if I want to bring these in as some sort of grid, and this is the kind of stuff that you want to do at this point. Do you want to make a grid here or do you want to make just a row, and then how is it sort of going to look on the page? So that when you start implementing this, you have a guide to go by.
So let's work on our asides. I think they're going to begin sort of like these. So I'm just going to grab a copy of these two elements. Option click and drag, just kind of put them in here. And my asides are going to be a scheduled promo. Which is probably just going to be text with maybe part of the schedule if you want to you can get more detail maybe put a sub headline here for each day that you have the conference otherwise just kind of leave them like that and so I'm going to grab this again I don't like clicking on this background so clicking on this. And then I'll lock it once again. There, so I can't touch it any more.
So now I'm going to do a promo for my mobile device. Mobile promo, and then I'm actually going to go to iPhone and bring in a little picture of an iPhone. So I can put it more or less how it's going to appear on the site. And, maybe make it a little smaller, because it doesn't need to be that big. And then finally, maybe, we add a section for the venue. because, think of the things that people want to see when they come to your website. They want to know what the conference is about. Who the artists are going to be and where can they stay. And if they come to the site with a mobile device, maybe they want to see that you have a mobile app. Also you definitely want to show them some sort of version of the schedule, perhaps a registration area.
But in this section down here, I want to make this a venue intro because people want to know where they're going to stay when they come to a conference. So just keep that Greek text, maybe make this a little less tall. And then maybe something around here, maybe this mobile promo can come down and I can do a registration promo. So, see how this is so easy to do? You don't have to make a lot of decisions yet, but you can, kind of, play around with where things are going to go, how wide, comparatively, they're going to be, and the order maybe. You can modify the order.
This is sometimes a better tool to play around with, than the simple outline. This will be register promo. Maybe we'll throw a button in there. So that's like register now. Make this, this doesn't need to be that tall. Again we're not dealing with actual content. We're just dealing with porportions. What's going to go in which spot. Where your main elements are going to go so I could spend a lot more time cleaning this up and making it look exactly like I want to. This is probably a little bit too much to the left.
So, I'm going to click and drag. Make a long selection and then just kind of scoot it over. So, I know that I want to have a little breathing room maybe on each side. And then the content's going to go, kind of in the middle. And I'm probably missing some sort of navigation so I can pull up this button bar right here and kind of drag it and once again I can put in the sections that I know I'm going to have so home, artists, schedule, menu, travel. Register and these are my main sections, so it's just going to give me those buttons, and I can kind of lay them out however I want to. So here I could make a decision as to, do I want this navigation to be sort of the top, which a lot of times is a traditional bootstrap way, or do I want it to be some sort of tab layout right here so this is where you can make those kind of decisions about, where things should go without having to write any code. And that can sometimes be a really great place to do it. There's a lot of stuff in here, but I've shown you, sort of, the basics of working with this.
One thing that you may want to do right now, if you've got the basic layout of what you want on the page. I'm going to zoom out and I'm hitting Cmd- a few times. You may want to take this page and then select everything in it. I can do edit and then select all or Cmd+A, Ctrl+A on a PC. And then just, actually I want to unlock everything. So I'm going to hit Cmd+3 to unlock everything. Select everything now and then make it duplicate. Of everything. And then once you're here, then you can say, okay well now let's work on a tall tablet layout.
So 768 and now you need to start making different kinds of decisions. So what happens when somebody's looking at this on a vertical tablet. Obviously, some of these things are just going to need to be smaller. But then, what do you do with these sidebars? Do you still have them? Do you have them underneath? You may need to make your page physically bigger just so you can play around with those kind of ideas. So a Prototyping tool is just a great way of laying things out without having to code. And sometimes it's a great way to work out your responsive issues. If you're working with a team, it's also a good way to collaborate with others, and make decisions before you start coding. It's much easier to change your mind and move things around at this point. So the time you spend here is going to save you some time when you code your pages.
- 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