Wireframing for Website Design for Beginners

1. Introduction: welcome the wire framing for designers in this class, you're going to learn the basics of wire framing on. We're going to explore analog, low fi and hi fi styles. You're going to be able to work on paper, pencil and sketch books, posted notes, illustrator photo shop and online Web browser acts. You're going to see the variety tools that you can use and how this style of working can actually benefit and enhance your design skills. Wire framing allows you to deal with skeletal structure of your website design rather than getting bogged down by the details right off the bat, which I know sometimes we're apt to dio. So in this class you're going to learn the basics of how tow wire frame, when to use it and how to use it as usual with my class, I want you to explore and have fun 2. Course Supplies: All right, let's go ahead and take a look at what supplies you're going to need for wire framing For one type of wire framing, you just need some sort of paper. This could just be, you know, basic drawling tablet computer paper, post it notes and some sort of pen pencil marker. A writing utensil. If you are more of a digital worker, you can use the computer for this class as well. Either illustrator or Photoshopped will work perfectly for this. If you like in design, you can substitute that in a swell, but I'll be showing illustrator and photo shopped for this, and I've provided templates for each of them for you, for this class project as well. You can use online wire frame sites such as Besame IQ. They work great. That one has a one month trial. Some of them are free. Some of them are not eso. Just figure out which ones you went experiment within which one if it's your economic needs and see what they dio. But the free ones are pretty decent. So I would say Start there. All right, let's go ahead and get started 3. The Project!: all right. Time for the class project. In this project, you're going to design websites wire frames. Now, this could be one that you just make up. This could be your own website. Or it could be a redesign of a site that you feel needs just a little bit of love for this . We're going to design three of its pages. That way we can see it's consistency and its unity throughout all three pages. What you're going to do is green the choose which style you seem most interested in. Do you like the analog? Sketch it. Grab your paper, grab your pencils, grab your sketchbook and see what your pages can look like. With that You like post it notes. Go for it. You have a chalkboard or a whiteboard? Sketch it on there. Do you like the lo fi system? We're not quite worrying about too many of the grids yet. Then try illustrator or photo shop and see what happens there. Maybe you were interested in learning half. Build it on the online browser style at that, Explore a couple of those and see which one works best for you. As usual, exploration is always key. Maybe at this stage, you don't even know what you like. If that's the case, try a little bit of all of them. Remember, we're not getting that bogged down by the colors. We're not getting bogged down by the type. We're not getting bogged down by finite details. We're just worrying about the skeletal system. And how does this framework interact and get the message across on your page? So we're not put an actual text, we're gonna use her. Lauren, it's in. If you're drawling it, it could just be the box with some scribbles in it. So don't worry about the meat and potatoes when you're worrying about just what the plate actually is. So for this, relax and have fun. Experiment and see which style works best for you. Whenever you have your three pages complete and whatever style you were interested in, go ahead and upload it to the class project. You can also show some of the steps that you've taken for it. I always find that seeing the process always helps, and what's great with skill share is when you see what everyone's doing, you get a broader idea of the options that are out there so share. Share your project and share your process. And then in the course projects below, we can see your work and see what your designs look like. As usual, have fun. 4. What is a Wireframe?: All right. So what exactly is why you're framing? You Might be asking a good question, and that's why we're here. Wire framing is an amazing tool for design. And for Web designers, it gets us the time that we need to think our thoughts and to figure out our plan of action , so to speak. I know there's this temptation that always you know, it has to be this tight face. It has to be this color who I would love to have X, y and Z all of that push it to the side. We're not worrying about the details on this one. We're worried about the functionality of it. So think of it as a blueprint. So if you're building a house, chances are you're not gonna is gonna jump right in and say, This is the ball. This is the other wall there. Oh, it's gonna be pink and yellow signing. Oh, it's gonna be gorgeous. Don't worry about the details. Don't worry about the actual structure of just let's make it look pretty well, that is not how it works. You have to have the blueprints so that you know how to function and map everything out. What's its size? What's its content, etcetera. So instead of worrying about the paint color of the house, let's worry about the actual foundation and substructure of it. So this is our skeletal system. We have to build up upon it eventually. But this is the first part. This is the part that's going to give it its spine and its structure. So for this, think of it as what I'm going to lovingly call is the fancy sketch. You might start with a couple thumbnail lee doodles just to get your initial ideas going. But to get into the actual wire frame in stage, you're going to work with the basic details so that you can build the structure around this . So no color, no type. I will be saying this a lot, so don't worry about the details. Worry about the shell. So for this, there's a couple ways that you can, of course, go about this the analog style where you just sit on drawl, undrafted out. You can do it the lo fi, which is Photoshopped illustrator sketch ups and as well you can go Hi fi, which is a little bit fancier for illustrator and Photoshopped. This is where we're dealing more with columns and grids and as well. They're online tools for wire framing. I'm gonna go into each of these in depth in their own sections in the next couple chapters . But now think of wire framing as that sketch the initial sketch that's going to allow you to see how is everything going to flow? What connects to what? Where are you heading? How's the view were going to be manipulated through the site house? Its flow? Is it easy to use? Is it obvious an intuitive design? Or are there hiccups? This is the stage that you can pre work this out so that when you actually get into the coding part of this, those hiccups, for the most part, should already be worked out. So instead of going sketched code, maybe it's nice to have a step in between there, which is the wire frame. So for this, we're going to explore a variety of options and working style so you can find the one that is right for you. 5. Types of Wireframes: Let's take a look at the different types of wire frame options that you have. One of them is going to suit your best. And as ever, if you've taken my other classes, you know what I'm going to say next. As ever experiment, trying each of them and figure out which one does actually sink the best for you and your working style. The 1st 1 that we're going to deal with is the analog for analog. You can use a variety of materials for this, and this is all going to be hands on style so you can go with the classic paper and pencil . It doesn't get much more simple than that. I always enjoy starting with some post it notes or the sticky notes so that I can sort of rearranged and shuffle things around. Chalkboards work great. You can also use paper cutouts that sort of akin to the sticky notes. Some people like to use stencils. This is more for if you get into the U. S. U X wire framing so mobile design, etcetera on as well. White boarding, which is, you know, like the chop boarding. But, you know, just getting it up there and you know, it's a little bit more interactive than you can work with your team on that one. Eso is gonna depend on your work style, the paper and pencil. Typically, that's going to be you. So low, sticky notes the chop towards the white boards, etcetera. That's probably be more team based work after analog, we're going to deal with low Fi on. This is just a little bit, I'll say fancier version of analog. But we are still keeping it loose, rough and somewhat gestural for this. Ah, you can use Illustrator. You can also use photo shop for this. And if you or your company has sketch, you can use sketch as well for this class. I'm just going to be demo ing illustrator and photo shopped for this. Uh, if you're doing this in the more lo fi sort of point of view, you're not gonna get bogged down with grids on this. You're just sort of arranging the elements of the page and seeing how they function. Uh, when we get into the high five, that's when you started dealing with the grips and now time for the high fine while you're framing. Uh, this one. You are going, Teoh, Deal with the grids. You're gonna have ah sort column modular system that you're gonna be basing it off of. I have built a template for you one versions and Illustrator One's going to be in photo shop so that you want to try the hi fi. The shell will already exist for you. So what we're going to be dealing with course with hi, fi. I just gave those two away. We are still going to be dealing with it through illustrator and photo shop. Uh, you can also use some online web maps for this. Um and I'm going to demonstrate that as well. In a section that is worth coming that way, you can see how certain you know APS work for this versus building it and Photoshopped an illustrator as well. This paid for wire frame software for that. I would recommend if you were going really beginning into this. That's when you're going to make the commitment for that. Ah, one. Nice thing I am going to add, um Adobe Creative Cloud just launched out of the beta, the x d, which is a I'm gonna call it more of a mock up rather than a wire framing, because you are dealing more with the details on that one. But if you already have the creative cloud, do track out that app so that you can sort of see how you could use that for rough mock ups as well. But for the hi fi, we are going to deal with a little bit more grid construction and getting the elements in the place out, getting bogged down by the details, like color typefaces, etcetera. All right, so when do you actually wire frame or, you know, when do you use your wire frames? Uh, typically, if I was going to go through, you know, the workflow. You know, you would start with a quick sketch and then you're gonna think of this is that blueprint? You're building a house, but you have to have that blueprint first. You wouldn't just jump right in because many were walls and match up and everything would be crooked. We need to rough it out so we know where the doors are in the footers, etcetera. So before we can build it before we can decide on, you know if this was a house before we decide on what color it is, what carpet? So you know, how are we gonna paint, tramp? You You need to figure out, you know, where is it actually going to be any know, how is the skeletal framework functioning? Uh, also, something to keep in mind is just have good team communication. If you are working on a team, um, if everyone sees the blueprint, you know you can rearrange parts, you can figure out what goes where, and it's still in that flexible stage. Once you get into the code stage, you're going to be a little bit more locked in. So if you aren't working alone, you know, if you're working alone, it's just you and your client s o the stage. You don't have to worry as much about communication with a team. There is still a team nonetheless, but with a team of couple people, you know this stage a super helpful because it gets everyone on the same page and remember all things and design communication is going to be key 6. Wireframe Methods of Working: as with all things and design, we need to figure out what system works best for you, which is going to be the one that is the most time efficient and the one that's going to give you the best results. So what we need to do is figure out which system works best and experiment so we can figure that out. The most basic would be to just start with a simple sketch. Just get your idea roughed out. You can think of this like a drawling class. It would be considered the gestural drawling. From there, you could just go ahead and hop into the code. This would be the most simple and straightforward version of idea generating for your work . That step would be to start with the actual wire framing, whether e high def for low def, and then start flushing in some of those visual elements just to give a little bit more consistency. What is the images? Whether the text, what is the headers? Once you have that figured out, then you can go ahead and hop into the coding portion of your project. All right, for our third version, you guessed it. We're going to start with that sketch. Maybe Also add some list to this list. Making could be a great way to have idea generating for your projects. After that, hop in tow. Wire frame, high def Low. Def. Either way, whichever works best for you and then add some of those visual elements. What are the images? What are the text portions for your site? Once you have that flushed out a little bit, you guessed it. You can hop in and get that code started. I just wanted to touch briefly upon the visual elements thes air, the details that are going to come into play once we start getting a little bit more involved in our process. One of these details that we need to pay special consideration to when we get to the detail oriented stage is the typography of the site. What will you be using for the header? What are you gonna be using for the body, etcetera? Do you have any Web fonts that you need to track down? How does this tie back into the branding? These little details are going to come into play after your wire framing is finished as well don't get bogged down by the color. The color is gonna come after the wire framing as well. Are you going to use a color scheme generator for this? Do they already have a preexisting brand color identity that they already associate their brand with? And what type of images are you going to be dealing with for your website or they're gonna be larger? Are they gonna more squared in a sort of blawg style? You know? Do they tie into the article or are they know linked to other sources? These air, the details that you have to think about when it comes to the images? Maybe part of the images is you're going to have to deal with creating all your buttons and radios and all the bits and bobs that goes into this. I'm just gonna put this into the nice little etcetera pile, you know? Is it gonna have video? Do you have social media links, etcetera? The contacts, the subscribes. This is going to go into that little, you know, crock pot of miscellany. I So the details you will be worrying about but do not worry about the sort of finite detail of them because with wire framing, you're just looking for the bare bones. You're looking for the skeletal. After you get through that stage, then you can start getting fussy with your design. 7. Website Design Considerations: before we get started on any design project, we have a couple considerations that we need to pay attention to before we jump in. What you need to think about is the who what? Why and how of your design project. The 1st 1 the who Who is your target audience? Who's going to be coming to that website and who is the focus? The next area to concentrate on is the what? What is the goal of the site and what are you going to do to accomplish this task? The why why is an element on the page we're not designing randomly and we're not dumping elements down just for giggles. Why? Why is it on the page? Why air you anchoring it in that spot? What purpose is it serving? We deliver it with your decision making this section is allowing you to figure that portion out. And last but not least, how how are all the elements on your page and on your site? Unified. How are you going to tie everything together? How are you going to use those elements and principles? What that end goal of unity? This is the time to dissect this portion and figure out how are you going to actually do this task 8. Element Considerations: once you have the who, what, why and how figured out. Now it's time to dig even deeper. So what are the site considerations that you need to be thinking of first? What's your navigation going toe look like? What's your header? What's your footer? What is the actual content going to be on the page? Where is it coming from? And what deadlines do you need to set for that images? Are you providing the images? Is your client providing the images? You're going to have a sidebar? A search? Far. What about interactive elements? So whenever you're breaking this down to your wire framing, keep these parts in mind also and think about where will they be at? How are they going to connect to each other and how are they going to be unified throughout the site? So if you were quite sure what elements you needed to deal with first, this is a good starter list for you. For those of you who are new to Web design used, these is a guy to figure out what part to do you need to create your whole 9. Lo Fi (Analog) Wireframe Techniques: all right. Time to get started for this section. We're gonna deal with what I call the analog. So the paper, the post, it notes the markers. Whatever you have hands on that you can use, you can use the chalkboards and you can use the white boards. Also, if they're it, you're available for my demo. I'm going to just deal with the paper because it's right here in front of us. All right, so we'll grab my handy dandy Sharpie marker so that it's easier to see. But you can have your pencils. You can have topic markers, the flare markers. Anything that makes a mark is going to do the job. So typically, anything that revolves around the world, drawling tends to scare people. So what we need to do is take some of that sort of myth away. When you're doing a sketch, your sketches not based around the concept of perfection. What you're going to be working on is just dealing with it from get the idea from here onto here. So do not worry about having everything perfect and lined up. Remember, this is why you're framing. We're just getting the ideas down to see if they're going to flow and if they're going to work. So for the 1st 1 in drawling, you can do what's called the gesture sketch. So gesture drawling is just, you know, you're not worrying necessarily about everything being nice, neat and perfect. You're worrying about getting the idea down and just capturing that rough moment in time. So if these are our three pages, this would be say, for example, the home page they made about in the contact. So let's just start with what I will lovingly refer to as the three Basics. So if for your class project when we're doing our three pages and then you're not sure which ones to work on, do the home about in contact because they're pretty much standard and steady throughout any Web page home page. This is the one that they're going to see first, that's gonna be the one right off the bat. So for our in this case, gestural style, maybe I'm gonna have my header at the top, and I'm going to have the scrolling stories here. Maybe maybe a picture and another story, and there'd be a little scroll bar and then we'd have maybe social media links here videos . Or let's just put a video here because we're advertising something or what have you? And this feels pretty good, cause you're like, OK, I know where you know. I'm thinking this needs to go in that, you know, maybe our menu. Maybe we'll put our menu right under our header bar. And so for our about page, we know we have that part that needs to translate down to it. So our image header and then our menu. Okay, so for the about, we sort of won echo the same sort of stance because we wanted to look like it's unified eso for this. I'm gonna have the text telling the story of the about. And maybe this would be a photo. Here's a beautiful photo. And maybe this is an image of their products, whatever it would be. So I'm not being exact. I'm not being, you know, deliberate with my mark making. I'm just simply getting the idea down so I can see, you know. Okay, maybe I'm not liking how these photos air working. You know what? If instead I flip it around or I make this part two column. So it's a little bit easier to read. It gives you the chance to see it and start working around it. And you get for the contact page. There's our big banner, and there's our menu. And then for the contact page will probably have a headline. One here. We're like, we're happy to help you. And then we're gonna have our fields of entry. So name, address, you know, check. Yes. If you want to subscribe in a submit button and then maybe for this I'm just gonna leave it blank because we want to see some of the white, the page, so it's not too overwhelming with the design you're gonna notice right off the bat. There's something I'm not worrying about. Not worried about the color. I don't care quite what's happening there yet. We're not in that stage yet. Um, I'm not worrying about the details. Like, what does this header actually look like? What do my No buttons, Airmen. You actually look like and I'm not worried about my typefaces. We're not doing the details. Were just thinking about it in a quick, skeletal framework. Point of view. All right, so this is our gestural style is gonna toss him to the side. And if you want to get a little bit more precise, you can grab our friend the ruler. Now, I also have tracing papers and drawing tablets. I do actually like toe work on tracing paper as well, because it will give you the ability to do layers on top of it. So if you want to try tracing paper, that's also really good, and it's useful. All right, so for this next part, let's get a little bit more precise. So this will be for those of you who you know, like a little bit more oven exacting style when you work. And I'm just going Teoh, make a box, it's gonna serve as my page. I'm just gonna one on each page, so I'm gonna dio a nice little mark so I could basically get my framework the same, which would be the same on all of them, and I'll just dio maybe an inch over. So then, that way I have uniformity. So for this one, I'm just going to demo with one, but it'll be the same for all three pages. So whenever you have this one shell set up a kingdom. Photocopy it if you want or build the box in photo shop are illustrated and just print them out. And just use it as a template ID guide that this works great also. So build those lines for the box. And for this we are going to get a little bit more, you know, exacting versus you know, just the rough freehand style of the gesture. This one, we're going to be more sort of draftsman, like with our style of working. All right, heading it This. All right. So now we have our show, and this is going tol this right home page so that I can keep track of you know, where I'm at with this. Do it for however many, many pages that you're looking for with it. I'm going to stick with the same concepts that you can see it in this, you know, different working styles. But for this one, let's get that. We're just gonna have the image header at the top of some sort. So let's go ahead and build that. So I'm gonna go for mine, and I think I just go like half inch. I'm sorry quarter Greenwich and then 3/4 an inch just to keep a nice proportion and again echo with what we were doing over there. And I'm just gonna for this one, have it arc side to side. So is going to fill the page whenever I am going to do my design work. Now, whenever I'm saying hatter space so whatever my banner is or whatever is happening up here like the home page name or the site name, what have you? Um, it doesn't necessarily have to take up all of this graphically. It's just going to live in this container. This is the space at which it's making its home for this. We want to show that this is an image of some sort. So we need to make an X over. The X is showing and you're going to notice. This is also an illustrator and in design, Whenever we were working with an image box, it has this X through it, it's showing the container is holding something, and that something is, in this case, an image. All right, So from our other one, then we had our menu, and I'm just going to make a line for that also. Now, that should be enough. And then the menu, of course, would stay consistent throughout each of our pages. And you know, you can shade this part in if you want, cause it does get pretty close to that. Or you can make your ex. Some people here will shift the colors of it. That's why I have the coptics out. Also, that's going to be up to you. You can, you know, maybe navigations air going to be one color. Images are going to be another and Texas another, so it's going to depend on what system you're working with. I'm just gonna fill it in, since time is sort of of the essence here. But again, it depends on your work style. All right, so we know this is going to be in the menu and on our other one. What we had was our headline one and I'm just going to use the corner of my ruler for this part. All right, here's our headline. One on this is maybe this is going to be a blawg page. So for our blawg, you know, we want our articles to be the leader into our page for our viewers, for audience, for readers. So for this may be out this type have mine one, because for our higher we know H one is the highest. It we need a choose the next. So on and so forth eso then that way I know for that space that's going to be whatever the headline is, and then we're going to have our actual article. So let's go ahead and draft that in here. All right, go ahead and remember this one was going to be our sort of scrolling one. So I'm just going Teoh make it look like it's bleeding off of what would be considered the fold of the web page The fold meaning like like a newspaper where you flip it over. But in this case, the first scroll through. So then the second scroll through taking to the rest of it. And I'm just gonna freehand this for time, and this would be our scroll bar. There we go. So for text, you have a couple different options with this, you can dio another stood down here the sort scribbling lines like you would see in comics for cartoons so that looks like it's implying the line for you can just do straight lines to imply that the text would be there. And I think we decided we try the two column for this one. So our container is going to have two columns of text. So for mine, I'm just going to do the straight and repeat it. One. The Second column. We're not worrying about the details. We know about the color. We're not worried about the type, but we do want to sort of see how is this going to flow? And then I'll just put in the one image bucks that we had going on. We had a video over here, so let's go ahead and rough that in. And you can use grated paper for this. Also, this does work great for that. That way you can get everything you know a little bit straighter than what I'm more in with it. This portion, this portion of the game and just like before, with whatever's happening of our image Header, we're going to make the X so the X is gonna show image or video placement. What have you So for this one, if we're making a box that has a picture of some sort in it. It's the box and you make your ex if it's text scribbling lined or just straight lines. So for this, you know, markers, paper, anything that you're comfortable with. I even have of my favorite yellow note pads that I like to work with also, so that whenever I am working, So let's say I'm just gonna gesture this one out again. Same shelves. There's our header. There's our its menu, and I'm just gonna scribble over that because I'm not gonna take the time for this demo to do the whole detail. Very So there's our video or headline one and then our actual article with our two column of text. So what's nice with it when you're working on just like a sketchbook or note pad? Then you can start making notes like Okay, so maybe Unit One is going to be a YouTube video on this is going to be the Blawg. Blawg posts articles, and they're going to be chronological, etcetera. So you can chronological. Sorry, chronological. There we go. Then we can start making notes on it and building it to that next sort of layer of detail. So we have the shell and then we can start taking track of you know what we're thinking for . So we can start saying Okay, maybe for the background, you know, they want their The client wants the client hex code number. Whatever it is for that for the color in the background. This gives you a way to start filling in those details around it without getting to bottom down into the detail of the sketch. And then everyone can sort of see it if you're working in a team and add their bits and bobs to it. Also, another system that is good to work with is post it notes. So are sticking. Notes are really nice for this also, because you could break it down into the systems that you're looking for. All right, so we have a home page now, just put page on there so we can see and then what? We need to go on the home page menu. And then whatever items are on the menu and just, you know, the about contact articles, baby, a portfolio links, I don't know. Whatever. Whatever it is that your project is going to entail. You can write that on your post it Note. Also, let's put it down a little bit so they don't overlap. Headline one. So this would be for the main article. What? And then you can start get into details like, What are those articles that your client are looking for? New? I can't even think of any offhand like holiday shopping savings coupon codes, etcetera. Put the next post it note down the YouTube video that we're talking about, and this could have been the one intro video so that you didn't know exactly which one it is, and that's going to go next to here. Now, when I am working with Post it notes, I tend to like toe work on a wall so I can to sort of lay everything out and have rearrange herbal moving parts with this on. And then also someone's like Well, you know, I like the YouTube video, but what I think needs to happen is it needs to go here, and the article is going to be on the other side so you can shuffle things around and then maybe do a loose sketch afterwards. Once you have all the moving parts figured out as a group. Supposed notes are amazing with groups. I always have piles of post it notes in my classrooms. And then whenever we come to this stage, just take a whole pot of them and go to town and like and helps you figure out what parts you need. How many articles, Where are they going to be positioned? What goes in the portfolio page? What images do you need to take or do you already have? So it helps you organize posted that system is really nice, because then the team can work together, and then you can see it all laid out in front of you and rearrange as needed, so this one probably will come first. This is more than I'll say, that idea generating stage of what parts do we actually need and then you could go in and just work on sketch portion of it. So if you're using the chalkboard or the white board method, it's just going to depend which you have at you know you're ready in my house, in my home office, I have one of the walls painted with the chalkboard paint and Then whenever I'm working, I can just sit and write or draw whatever it is I need and then erase it when that projects done and then at work in the classroom, I have the white board and the chalkboard. So the students, depending on which one they're more comfortable with, they can use either. And a lot of our projects are group oriented for the web design. So this is a lot easier when they're working on teams. So what I'm gonna recommend is, like always, which one do you think you're going to like the best? Which one do you have the tools already you know, to experiment with. So start there. So if you feel comfortable with sketching, go ahead and sketch. If you have you no curiosity about what the White board is like and you want to try listing and drawing on their try that also, no matter what you do, what I am going to recommend it, take photos of whatever process it is you're working on and share in our class projects below, so we can see what you have experimented with. And you can also tell us which one you feel works the best and which one you think you might go forward with in the future for your projects. So as ever, share so we can see what's going on. And then that way you can explore all the methods of analog wire framing so you can figure out which one works best for you and your work efficiency. 10. Hi Fi Wireframing with Illustrator & Photoshop: all right. Now it's time to explore the high def website wire framing options. And for this, we're going to pop into illustrator, and we're also going to check out photo shop on. And for this, I've made you templates, and they're going to be in our class project area. So if you wanted to use a pre existing shell, one will be ready for you. All right? So high def is going to be a little bit more involved than our low def, where we're trying to just get the basics, you know, figured out. But we're going to be using our columns and using more of a system of organization for it, just like our analog time. I'm going to be using the same concept that we were doing there. So that's not rewrite in the wheel. All right, So for mine, we were starting with our header. Um, So whether this be the website, name a banner. This is the space where the main info for your website is actually going to go now for this , what I'm going to recommend is get a system Ah, pretty early on. Similar to our analog. So an analog, we talked about our markers. So maybe one color was going to be, you know, representative headlines. One was going to be the type one was going to be image boxes, etcetera. So you had some sort of system to it. The same thing here, you know, What would your system be? Um, maybe in this case, I don't want an outline. I just want to be able to see the color of box. And then maybe my boxes, Uh, maybe I'll do dark gray hair like a mid range gray. And then that would be my image boxes. And then my type will be another. So I'll say this color is going to be our image. I'm going to switch back to my regular select and how we had it. Waas We had our menu underneath, so I'm just going to copy, and I'm going to paste it. All right, Free transform. I'm gonna hit my letter e. And in that way, I could get you know, the scale a little bit more in proportion to this and again, you know, Is this going to be a bar? The holy crosses left? Is it right? You know, maybe your naff when you're doing it is going to be left now, um, So if this is the case, this is where we're sort of playing around with it, seeing what looks good, what feels good on the page to us and for our design. We had a lot of coffee and paste an image over here, so let's go ahead and get that in its spot and we had another one underneath of it. I'm just gonna let that little bit go over the bottom. So I'm not gonna worry about that little detail since it's going over just that little bit . So not worrying about that. All right, so there's our images, and if we want to turn off our guys so we can sort of see what's happening, this is what we have. We have our image boxes in place. Now we need to start thinking about our type. So I'm going to use the same amount space for the most part over here, and this one's going to be for our type, slide it down just a little bit so that they're in alignment. If you want to get a little fussy here, you can It's going to be up to you. All right. And then for this we don't want this to be the same color, because this is going to get really confusing. So maybe for my type, I'm going to have a little bit of a lighter. Grey. All right, so this is going to be my H one. So the H one, as we know, is going to be the highest form of our hierarchy, size wise, and then our article or sub header is going to go there and then our article, and then we just keep building from here. So that waas the image that was going to our YouTube, so I'm not going to actually connect it to that grid line. But then the next article we had would be coming underneath here, and then we had another article under it. And the nice thing with photo shop and illustrator is you can, you know, build your concepts pretty quickly with these eso that you know where they're going, right off the bat. You zoom out just a little bit. So probably him right now is we're working in a sense, right up against the edge. Maybe I don't want that So I'm going to select all of these, and I'm going to push them over. And also, I wanted to have room for our scroll bar, and this feels better right off the bat. So this is our playtime. What spatially Looks good. How is the view? We're going to be float, You know, what's the flow for the viewer? Um, what's going to make it easiest for them to navigate through? All right, so for these, I'm just gonna hide that the guide again so we can see what's happening. We do have some sort of strange space there in the middle. So what I would do is spend a limit more time fiddling between, you know, maybe instead off this, I would want to have to up top, or this one would be subdivided. And maybe this is an image. But over here is going to be ah, live feed from our instagrams. And that way people can see what our newest post waas. Um then that's going to help that structure right off the bat already looks better. So, with grids, this is the basics. What? I'll say of any design with grid. So in this case, the columns, but it is a grid like system. It's giving us this sense of order, and through this we can actually dio the dance on the page and see what looks good structurally to us and for our viewers. So this gives us that play time that we typically need to figure out what's going on. And how can we make this a site that's really nice and usable for whoever is going to come visit for our illustrator if you're gonna do the high death or photo shop, we're looking at three pages. So this one was representative of our home page and I would go ahead. And like I said, that the contact and about the defaults, if you're not quite sure which ones to build of you don't even have to have header up this far. Um, just play around and see what spaces work best for you and the site that you have in mind. This is a really simplistic design. You can go all sorts of crazy with this one, So play around with illustrator Um, if you want to, you can go in, and maybe at a couple nomenclature is to it. So that we know this is the headline. Maybe we could have one that says, you know the article, and I'm just gonna duplicate that Oops. Not duplicated the wrong one. Um, And then that way, you know, if you're looking ahead later, especially when we've had the changes to over here. So this was now our instagram feed. Um What? Yeah, I think I will change that. I'll keep that as the darker grey since to feed. And maybe this is adverts or something like that. So we'll put advertisements here and the top one YouTube intro. So that way we can sort of remember where we were with everything. You too, in the true and our menu. So for the high def one, you can get a little bit more label lee and structure oriented, but the boxes are going to give us a sort of pre form to start with. Makes it a little bit easier for this s o play around with it and see what works for you. And I'm also gonna briefly pop in and show you what this looks like and further shop as well. Before we hop into Feder shop, though I wanted to show you a couple examples of some student projects s O that you could get an idea of where this could lead for your own projects. Each of these that I'm going to show we're done in one of our methods. This 1st 1 was actually going to be done in that boasts Tomic, which we're going to get to with our online section. Uh, this one does have a more sort of draftsman doodle like appearance to it. This one as well was done online using online wire framing tools so you can see you can get a wide variety with the actual outcome and output. With this, it's going to depend on your work style. So as usual, make sure you experiment and see which one you like best for this one. We were working in Illustrator. So you can see you know, the this one has the fellow Texans. We're gonna show you how to do that next, So it gives you an idea of what it might look like once it actually has something on the page. And that's for this one. This one was done in photo shops that this is going to Segway us into our demo again. It's using the filler text. We have our boxes, this student, but the exes on them instead of using, uh, the great out boxes so you can see there's a variety of ways to do this. Experiments see which one works best for you. You went, you know, color coded boxes. Do you want to use filler, text and images to be the excess? Find out which one works best for you. So now let's hop into getting filler text and see what we can do in a photo shop. All right, so now we're going to do another version of Ah, hi fi. Ah, wire frame technique. With this time, we're going to go into a photo shop. But first I want to grab some learn ipsum text. So for this, go ahead. Type in Lauren Epsom and under the first search, you're probably going to have the same thing come up. You want the lips of generator, go ahead and click on this, and to scroll down just a little bit. Seeing teaching of C says how many paragraphs you want or words or bites or lists, and do you want it to start with the Lauren. It's, um so I am going to say two paragraphs should be enough and then go ahead, generate and then select it and copy it that way. It's in your art board for whenever I'm sorry, Not your art board your clipboard for whenever you're ready to use it. All right, so now we're ready to hop into photo shop, just like an illustrator. I have a template already set up for you. This one's 1200 by thousands. It's just a slightly different size. That way you have different options to work with, so you can also see how your design works at different scales, right? So it's going to be basically the same thing. I'm going to use the same style as that we were doing over in, um, are analog version. So let's go ahead and build a mock up here. We're going to need are shaped builders. So I'm going to grab my rectangle tool and gonna go ahead, and this is going to be that space to which, um, we're going to take up for our whatever our site name is, or is it going to be, you know, an image is gonna be centered. Is it going to be left? Is it right? We're not quite sure. But this is the container in which it is going toe live. I'm going toe. Also change the color. Let's go with maybe a dark blue and this is going to be representative of, You know, whatever images we're going to use is going to be that blue. All right, We also going to need our menu, and we have that sitting right under wherever our website name is going to be. And then that way it's consistent throughout all of them. And so remember for doing our three pages for a project, pretty much the navigation and our site name at the top is going to maintain steady position because we do want to have unity within our design. Okay, so from there, what we're going to need to dio is figure out where that I think we had our YouTube, so let's put our YouTube video in. Maybe maybe it's going to live here, and I'm just going to switch to my regular select and I'm gonna hold down and want a Mac. I'm gonna use my option key. Ah, This might be a feed for, um Instagram. So that way we could have our social media in here as well. Uh, from here, let's go ahead. Go back into our rectangle tool. Uh, maybe for this one, I'm gonna break it up just a little bits. We do have a lot of space. So I think for this one, what we're gonna dio is our headline one, and I'm gonna change the color. So are blue was going to be our images. And let's make it a light blue for text that way, it's kind of similar, but a little bit different also. Um, then that way, you know, our headlines are going to have a nice consistency through it and you'll be able to tell the difference between the two gonna hold down the option key because thes air going to be side by side reading articles and let's go ahead and make the box for our text. So that's where the container for our text is going to be duplicating it over Beautiful. So we're getting our articles placed into it. Um, maybe down here, I'm not going to go through all of it, but maybe down there we're going to keep going and figure out, you know, like, because they're gonna be more articles, photos, you know? Is it just the one page spread or we're going to keep scrolling. These are all things that you're gonna be thinking about when you're in that design process . All right, so we did have our filler text, So let's go ahead. I'm going to grab my type tools. I'm going to make a new layer on top, so I don't go on any of that, and it's going to make a text box, and I'm gonna put my Lauren ipsum text in there so that we can see sort of what it looks like once text is actually on there and I'm just going to duplicate it over and did this one also, uh, when I scroll back through my layers and I turned off our guides and I'm just gonna make a plain box on top of that. That way we're going to be able to see it. So let's just make a fill of white. All right, there we go. That way we can sort of get a sense of where it's going now. We do have a little bit of weird space here, so I'm not liking that, so I wouldn't want to figure that out. The text boxes themselves are looking actually pretty decent. So using just your shapes and dumping in some filler text, you're getting an idea of what this site could feel like for whoever is visiting it. Eso If you're comfortable with photo shop, try aversion and photo shop if you like. Illustrator, go ahead and create a version and illustrator as usual, Go ahead and save your files and upload those J pegs to our class project so we can see what you're working on. 11. Wireframe Online Options: as well as our photo shop and illustrator options. There are some free websites that will allow you to do mock ups on there. Also, I'm just going to pop through a couple of them so that you can see them. And then, if you want, try the mount. See which one works best for you again. These air, the freeze or the free demos. Some of them will have costs, but the ones that I'm going to show do not have costs. The 1st 1 of the show is mock flow. This one is on the basic plan. So there are, of course, some limitations to it. But if you wanted, you could have hand drawn you. I webbing. See, the bootstraps, apples, APS, etcetera, or just blanks can depend on what needs you have. Um, if you want, just go ahead and get started on one and just gonna call this one test so that whenever re pop into it, we can see what happens. No, for the most part, all of these are ah, intuitive. So what you see is what you get with these. So, as ever, I would just recommend playing around with it and seeing, you know, how would this work for you and doing your wire framing it was going to save it, pop through the next element. Maybe I'm gonna add a button there. And what's nice with these is with the pre existing elements. You can, you know, just sort of play around and not have to worry about the build stage, because for the most part, you know they are going to be there for you. Let's put some text and just play around with it. So maybe this is going to be like a gallery page, etcetera. So I'm just gonna pop into the elements. You can see. We have browser frames, text circles, images, buttons, banners, scroll bars, the radio buttons, brackets so on and so forth. Different pages adding your images, you can see your flow. Um, and just as ever, play around and see where all of this takes you again. This is just the basic version, all right. Our next freebie site that I'm going to just sort of quickly go through those mock ups. Um, and again, all the links will be in our sheets in our class project area on this one is a freebie one also. So you can see you have new pages outlines. You could start with templates, images, icons, uh, etcetera. And it functions pretty similarly to the last one. You can see it has the headers, the labels, the paragraphs, buttons, checks, radios, texts. I'm not going to show this, you know, the actual functioning detail. But just that you can see what elements exist in there. There was some drawn shape elements now of parts, um, spectacles, drop downs, buttons, lots and lots and lots and lots of options to choose from this one as well. And just like the last one, just play around and see what it does. All right, Another one is go mockingbird dot com and you're going to notice a trend. There is, for the most part, a lot of similarities between all of these. You're going to have your workspace and your dragon drops that you can pull out from the left side s so that you can get your page in a nice need sketch, so to speak. It's a buttons. We got the buttons here on, then that way you could have some of the elements out on the page so you can figure out How do they all linked together? - Another one is wire frame dot cc, and you can see the free version. You just get a single page wire frame, Uh, but you're going to have the same tools that the others have. This one that you can pop between mobile devices for the regular browser windows. And it's just going to depend. What is your project and what is your project needs? So it's nice, but this one is You can pick and choose. You know which base you want to start with. From there, it's pretty much the same rinse and repeat style. Uh, you know, you have your shape may gain tools. Uh, you have your type fillers. You can adjust accordingly. I'm just gonna leave everything at the default for this demonstration. You can put your images in. You can put your buttons etcetera. It just depends on your work style. The next one is glitzy dot com. You can tell right off the bat. We already have similarities. You know, we have different shapes in this case, so him are shaped builders into the relationships. Basic shapes. Um, they're going to function. Exactly. You know, the same. This one. You can choose between it being a shape or the text box. Or you can add a label on it. Also, uh, reposition resize, Um, depending on your needs. Nice thing with this is it does have, uh, the ruler guides with its taken sees sort of smart guys with it on, and you're gonna have the same functionality that you're used to. If you're comfortable with the creative suite, you can do your duplicates. You can do your copies and paste. It has a lot of commands that you can use and navigate with. Um, so for this, I'm just going to make a couple boxes on repeat so that you can see that process. I do like the guides on this one. And how you could work with them here has good adjust ability with it. Um, you can tell all sorts of tools, shapes, containers, forms, buttons, radio, you name it. They are going to have it. The last one I'm going to demo is Masonic. Both so meek. Effort. Both, Um, forward this. I'm just gonna let it sort of speed, plague background. Why talk about it? Because at this stage, you're figuring it out. They all have a sort of repetitive pattern to it. This was got nice because it does have a more sort of, or you can give it the option of having at a more sketchy sort of look to its It looks more gestural in hand drawn, which is a nice sort of aesthetic with it. They do have a free trial off this one, and then they also have paid for version eso. This one's a little different. It's not browser based, like the other ones. This one, you're going to have to do a download first and then open it just like regular software. But I believe it's one month free trial, and then you pay by the month, similar to the creative cloud. So for this one is just the fun one to play around. What's so for sure, I would say Go ahead and do the one month trial just to see what it looks like, and it does have a lot of options with it. Beyond just, you know, the Web page you can see at the top and all the assets they have buttons the containers forms icon, which, uh, I o s are you functioning with mark ups? And that portion of it's nice that you can communicate with the team with this one? You could see a heads, no charts, etcetera. So there are a lot of options and this one that aren't in the other ones. So, um, take advantage of that free one month trial so you can sort of see what all it has to offer . And if this is something you get into, um, keep it on the back burner with your memories so that you can come back to it or if you're working on a team and you're looking for that sort of solution, it has a lot of options toe work with versus the other ones. 12. Wireframe Conclusion: I really hope you've enjoyed your exploration in the analog, the lo fi, the high five versions of wire framing. Why're framing could be such a great tool for the initial stages of your website? Design will help you get your thoughts organized. See what you need. See what you have. Doesn't see what you're missing. So just with basic pencil, your paper post it notes, photo shop or illustrator. Even our online tools You can build a framework to a really successful website. I hope you've enjoyed this class. I can't wait to see what you've designed in the projects below. And I'll see you next time. Bye.