Once we figure out the site structure through something like a mind map, youneed 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 itsspecific 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 answeredwhile 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 likePhotoshop, or any number of specialized tools.One tool that has a lot of respect in the design community is called Balsamiq, andit'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, andthen you can choose different control types.So these kind of things right here. You just click on them, and drag them ontothe 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 thatwe 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 youevery single control type. That's a lot of stuff.

So you can hit, for example, the Common button, that shows you the most commoncontrol items. Or go into specifically just Text Elementsand drag. Text Element just like labels or any othertype 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 cansee that, in the Browser Window Contact Sensitive panel, I have stuff like theSize, 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 ofthe scrollbar. That's sort of a little bit fancy, youdon'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 pixelsand hit Enter. And you can see I can scroll down and Ican 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, youcan go to the View menu. And select Zoom Out and Zoom In, or selectZoom 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 oflayout 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 PCand then click and drag a copy. Once you have that, then you can say, I'mgoing to design something for maybe tall mobile devices.

So, I'll do 768. Which is sort of the traditional size fora 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 actuallya 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 youwant to move something over and you want to constrain horizontal or verticalmovement, you can hold down the Shift key while you're dragging and that constrainsthat movement. And if you want to, you can reorganizethese so that this one goes actually after this one which is a little bit wider andyou 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 justwant to work out the problem of my website.

So another thing that you can do that's useful is log the existing element, so ofyou click on this you can see there's a row of icons right here and if you scrollover them you can see what they do. As well as the Cmd key, which sometimes issort of useful to learn. I'm going to hit this Lock button righthere and that locks this element. I can no longer choose it, which is greatfor a layout. You'll find that a lot of times thingsthat you drag onto the page will automatically lock to the edge if you movethem 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 superfast, 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 Formcontrols 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 directionof the button. So I can click on this button right hereto 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, acircular 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 timesit's enough to indicate that people are going to be able to hit these littleControl 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 programpretty easily, but here's the icon for it. So you can click on that and that justmakes it an item. A little bit easier to move around thatway, 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 theseother elements. So, I'll click on media.And I'm going to drag over an image. Just to show that, somewhere in here, I'mgoing 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 lockedup right now. So let's go into.

Text element. So under text elements, I can drag a Link bar.Which is something that you might use for the bottom of a menu.And I know that looking right here at my plan, I know that I have some bottom navigation.And that's going to have three elements about the Roux Academy, privacy policy,and visit our website. So the nice thing about this perm is I canactually type those in here. And with commas and I'm going to hit Enter.Notice that they show up with the right links.And I can scroll down and kind of place that where I think they are going to go.

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 wantsome 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 fewtimes, just to make it look different. I'll sort of delete a piece of this andhave three paragraphs instead of just one. And it's kind of cool, because what itdoes 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 mylayout, 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, andthe venues. So let me go back here and so I'll type inabout the event, hit Enter, there you go. I'm not sure why they chose something likeComic 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 Ican use to click and drag another section. And this other section is going to befeatured 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'sUnlock 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, andI'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 tocome in a little bit and for my Featured Artists I don't really want there to bejust text. I maybe want a little bit of anintroduction 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 alsoholding 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 samedistance as before. So now here's where I can make a decisionabout, whether or not I want the feature artist to just be sort of a row ofartists, or if I want to bring these in as some sort of grid, and this is the kind ofstuff that you want to do at this point. Do you want to make a grid here or do youwant 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 oflike these. So I'm just going to grab a copy of thesetwo elements. Option click and drag, just kind of putthem 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 youwant to you can get more detail maybe put a sub headline here for each day that youhave the conference otherwise just kind of leave them like that and so I'm going tograb 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 alittle picture of an iPhone. So I can put it more or less how it'sgoing 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 sectionfor the venue. because, think of the things that peoplewant 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 youhave a mobile app. Also you definitely want to show them somesort of version of the schedule, perhaps a registration area.

But in this section down here, I want to make this a venue intro because peoplewant 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 andI 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 aroundwith 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 cleaningthis 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 justkind of scoot it over. So, I know that I want to have a littlebreathing 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 ofnavigation so I can pull up this button bar right here and kind of drag it andonce 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 outhowever I want to. So here I could make a decision as to, doI want this navigation to be sort of the top, which a lot of times is a traditionalbootstrap way, or do I want it to be some sort of tab layout right here so this iswhere you can make those kind of decisions about, where things should go withouthaving to write any code. And that can sometimes be a really greatplace to do it. There's a lot of stuff in here, but I'veshown 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 ofwhat 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 thenselect everything in it. I can do edit and then select all orCmd+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 cansay, 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 withthose kind of ideas. So a Prototyping tool is just a great wayof 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, andmake decisions before you start coding. It's much easier to change your mind andmove things around at this point. So the time you spend here is going tosave you some time when you code your pages.

Resume Transcript Auto-Scroll

Author

Released

8/13/2013

Generate your own interactive website from scratch with Bootstrap, the mobile-friendly framework from Twitter, in this start-to-finish course with developer and author Ray Villalobos. First, you'll plan and prototype the interface with MindMaps and Balsamiq Mockups. Next, download Bootstrap and dive into organizing your site structure with its scaffolding feature—adding PHP includes to break your code into reusable modules and building in the core navigation. Ray then shows you how to build interactive carousels, modal features, and forms, and control these features with JavaScript. Finally, learn to style it all with LESS and prepare to publish the results online.

Topics include:

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

Skill Level Intermediate

3h 28m

Duration

574,670

Views

Show MoreShow Less

Q: Why can't I activate items automatically through JavaScript?

A: In some instances
simply adding a class of navbar to your navigation elements may not be
enough. If you're having trouble activating elements through JavaScript
try adding both the navbar and navbar-default classes to the navigation
element.