Hi. Today, we're going to talk about wireframes and as we talk about them I have to admit the way in which I teach web design doesn't really mimic the way you should really do it in the real world, in that I tend to talk about the coding aspects first. The things you can do to create something real right away. But this lecture should have really come earlier in the course, because your layout is one of the first things you should think about. So if you're going off to be a web designer, you're going to need to realize that coding comes after your design. And wireframes provide a visual representation of your layout. This is what you're going to use when you decide it's time to start coding. So what do I mean by a wireframe? Let me show you a few examples. Right here, I'm at a site called wireframeshowcase.com. And If you scroll through the page, kind of up and down, you can see that you see a little bit of a few different pages. Real pages but also you see some graphical sketches underneath them. So let's go back up to the first one. Up here I'm going to go ahead and go in and kind of show you what it means when we click on the view details. When I hover over the page you can see what the site's going to look like when it's set out on the screen. But when I've come off just a little bit, you can see that all those visual representations are actually based on very plain, very unstyled little documents. That's what we're going to talk about today. So before you can start drawing, you need to decide what you need to have on your page. This includes both text and graphics. If it really needs to be there, you need to know at the beginning. What is going to be the best layout for this material? Once you know what you need to have, you can start thinking about different things such as, on a mobile view, we might want a different type of navigation bar. We want all the same material just a different layout. When we're on a laptop view you might decide you want to add a little bit of extras but first you need to figure out how you're going to lay out those necessities. Again, as always I'm going to remind you that the mobile view is the most important view in web design. If you don't think about the mobile view first, it's very simple for you to start coming up with a clear idea, and then as you shrink it down, throwing things out. No. At the beginning you decided this was important. So if it is important, make sure you design it for that mobile view. Lets give an example. You might know that you want to have header, a section, inside that section you're going to have an article and maybe an aside, and you're also going to have a footer. Because you're on a mobile view, things tend to go right from the top down to the bottom and very few things side to side. We just don't have the space. Once you've decided on that mobile view and you've sketched it out, you can go on to what you might want it to look like on the larger view. In this case the header and the footer are the same but we have more flexibility with where we want to put that other content. You also want to think about functionality when you're doing your wireframes. The design should be about more than just the layout. You can use these wireframes to test out the interaction that your page might go through as well. Navigation, form inputs, different things like that. If you don't think about that at the beginning, you run into a lot more problems when it's time to code. Did you want it to be a drop-down menu, a hover actions, we need to think about this functionality from the beginning. Many people refer to sketches and wireframes and kind of wonder what the difference is. I always recommend starting with a sketch. With this idea with a sketch, is that you're just kind of drawing with your hand and it's very free-form. One of the reasons to do this is that I know when someone hands me a very nicely typed paper, or some nice computer print out, I'm more hesitant to give back feedback. Well, if you give me a nice kind of hand drawn piece of paper, you can really dive into it and say, no, what if you do this. You don't mind marking up their stuff as much. So when you do a sketch, when you do it by hand, you get less, I would say, attached to it. You're more likely to be willing to make changes because you didn't spend five hours getting the perfect border or putting things in just the right spot. So let's take a look at another place where I'm not going to cover myself, but there are places where you can figure out these kind of best design practices as you start sketching out your page and eventually moving on. One of the reasons I like this site is well because I agree with many of the things they're talking about and they agree with me. But as you look around you're going to see that most articles talk about best practices. These aren't rules, these are just ideas and suggestions for you to think about. So for instance, one suggestion is don't use color. Again, this goes back to the idea that wireframes and sketches are about content. It's about figuring out how you want to lay it out and use it. Once you start throwing in color, things start taking on more meaning when maybe they weren't supposed to. You want to be very consistent when you're doing your side. Don't worry about other things such as padding and spacing and certain little elements that might be different on a single page. Think about your over line sketch. The next one is always a problem for people because when you're designing you actually tend to get really into it. It's important that you use actual content in your page because when you do this it really helps you visually look at the page and realize, this part's getting lost or this section is really too big. Maybe I should be breaking it up in to more sections. This last one I'm going to talk about and then you can kind of do the page alone if you like, is this idea that you never wire a loan. This, I hope, is an underline concept you're getting from all of the courses that you're taking with me. It's never good to code a loan, design a loan, it should really be a give and take as much as possible. As we're together starting off this class, or even as you're ending it up, it can be really difficult to come up with sketches, because we tend to make really small pages because we're just getting started. Plus, we don't have official clients who are giving us feedback. We really only have maybe your friends and family and if you get on the message board and show people your sketches. So don't be discouraged or feel like you're doing something wrong if you have a hard time coming up with sketches at the beginning. The other challenge I find that when you're doing something like this is you really want to keep things simple and changeable. Like I said, it's really impressive to give somebody a print out with everything you've placed. But it's not always the best way to get feedback. Also, it sometimes feels like, I can do so much more! Simple design is always going to be the best design. The other thing I'd really like to just mention to you is that, if the design is where you're at, this is the part you've really taken this course for, it's still important to understand the basics of coding. That's going to help you understand how you can convey your ideas to the programmers and let them make something really great out of your design.
