Learn the basics of wireframing in this course. Sketch out website layouts using simple tools and techniques, and get feedback from clients before proceeding with the design process.
00:00
- [Instructor] So in this part of the course, what we're gonna talk about is wireframing. So wireframing needs two things, it needs some pens and some paper. Now optional things include a hipster coffee, hipster cactus it's the thing, whatever that is, I don't know. But what we need to kind of do is actually sketch out what we think the website should look like. Now, why the website and why not the logo, for instance? Well, for this, what we wanna do is sketch out the most complex part of the site, which is the website itself.
00:27
Now the logo will be a tiny component of this website. So we just wanna focus on the general thing that we were actually trying to create for Aria. So how do we do a wireframe? Now we're gonna keep this very, very simple. We don't need to use all of these colors, I'm just gonna use mainly black and the black is for kind of sketching out the general layout. I'm just gonna use red for general notation. So the first thing that we gonna do is actually sketch out the homepage.
00:53
What should this actually look like? Well, what I'm gonna do is just quickly draw a page now a page in a wireframe unsurprisingly, just looks like a big box, I'm just gonna quickly draw a big box. Now we can do this in a different kind of design program, for instance, now I let's keep this as sketches, it's quicker, and it doesn't look as, the color doesn't look as professional. So what we kind of want to show Aria is like, the simplicity of this, like this isn't a final design.
01:24
It's just getting out what is in our head to show her. So here, what we want to do is kind of show what's gonna be on the header of the page. What is gonna be on header of each page? Well, we need a logo and maybe some links. Now what should the layout look like? Should it be logo here, links up here, logo here, links underneath. Well, for now, what we're gonna say is a logo is gonna be up here in this corner, and the navigation links are gonna be over here.
01:50
Now what does the logo look like? We don't know yet. So what we're gonna do is replace it with a kind of box. Now the box in wireframe technology looks something like this I'm gonna draw a quick box, it looks like that. And we're just gonna kind of cross it out. Now the reason for that is we wanna show that this is an image. And this is gonna be replaced later on with what the actual image is gonna be but at the moment, we don't care.
02:15
Now, similarly, we wanna kind of show the navigation and we know roughly what is gonna be in navigation, something like Work, About and Contact. So instead of writing Work, About, Contacts, we don't know the art of these just yet. And we don't wanna make it too confusing with feedback, we wanna keep it nice and simple. So for now, I'm just gonna add in three lines up here, one, two, three that's basically gonna be the navigation. Now one thing that we wanna kind of put on this page is some kind of tagline because we know from the folder that we were given, there is a tagline.
02:48
Now this is gonna be quite a big title on this page. So I'm gonna keep this quite big. Now generally with text I'm gonna just gonna either do it as kind of like written words like that. So lets assume there's gonna be maybe around three lines of text that looks like this. So this is our general tagline. Now, people do this in different ways. Some people like to do it as a kind of box. So maybe kind of like a sketched out box, which kind of shows copy, it's kind of up to you, as long as you kind of let them know roughly what you're kind of thinking.
03:21
Now here, of course, what I've done is kind of centralized this. And this might be a bit of a design decision later on, it might not work, we might think it works for now but we might not work later on. So for now, we're just gonna keep it centered. We could align it to the left, we could change it later on. For now, let's keep it as is. Now the main thing on this homepage. And just again, I wanna kind of label this as the homepage by just literally writing it in red.
03:46
So maybe I just wanna write home in this corner and maybe give it some kind of little signifies about what this stuff is. Navigation is up here, this is gonna be the tagline for instance. So for now, we're just gonna keep it like that. Now in the kind of main section of the site, we wanna show the work. So here, what we might want to say is, well, how do you wanna lay this out? We don't know at the moment, we kind of wanna see roughly what Aria thinks.
04:15
So for now, what I'm gonna do is have my image over here and maybe some description next to it, I could maybe do it asa grid, later on, we'll see what she thinks maybe you just don't know for now. So we'll keep it as generic as possible. So for now, I'm just gonna say, maybe that's gonna be one of her images here, which is pretty big. And because there's an image, we wanna kind of put a cross out, we don't know which image it's gonna be for now. So I'm just gonna cross it out with some kind of description and maybe some kind of more description.
04:49
So this is kind of like the image title with some information about the image. Now, again, I might run out of space here. So I might just wanna kind of keep going down the page. Might wanna go on the second part, but what's this next section gonna look like? I could have the image here with the text here as well. But I might wanna swap this over and say, well this one, and this one are kind of the other way around here. So maybe I wanna do that next. So maybe if I run out of space, I'm gonna put it down here, we're gonna cross this off.
05:19
So it's not quite off the page, kind of getting the idea that this is going further and further down the page. But I kind of wanna use the same concept here, doesn't want it to be right aligned or left aligned? Well, maybe for now we'll just say left aligned and it has a title and some kind of description underneath. And just like before, I'm just gonna annotate these. So this is gonna be some kind of artwork with a title, title and description. And again, this is the title, artwork and description. So this is a very basic way to do a wireframe but we don't need to put too much time into this.
05:58
And I can do this for pretty much every single page. Now because this is going off the page, I might want to say like home to, or Home for to for instance. So I'm just gonna quickly add another page in here, there we go. And we're gonna do the same thing again. So again, I'm gonna do the second 1/2 of this. And don't worry if we kind of make a real mess of this, it doesn't really matter too much. So what do I wanna do here, I have my image going, which way do I have my image going? Let's just double check, I have my image going off the page there.
06:33
So I want to kind of get it off the edge of the page here, so number two, for instance. And again, there's definitely more artwork on here. I'm gonna do the same thing again and some title. Now the reason I'm doing more of this is because I kind of wanna show the layout. So it's not just like one, two, three, four, five for instance, like a featured one is this kind of alternating one that goes down the page. So maybe there's four on this page. And here's the title and so on.
07:03
Now at the bottom one thing that she asked for is something to do with her email and Instagram. So maybe at the bottom of the page here is like two extra links. So here is the footer. So here, I'm just gonna write the words, footer. I'm not gonna say which one is Instagram and which one is her email address just yet. And the reason for that is, it doesn't really matter too much. So here, what we have is something very, very basic for the Homepage, what I'm gonna quickly do is do the other two pages, which are About and Contact.
07:31
So I'm gonna use the same kind of idea. So same kind of concept here. I'm gonna go on this next page and draw the About page, just gonna have a big old page that looks like this. Now, obviously, what I want to do is make the footer and header the same, so the footer is gonna stay the same, and the header is gonna stay the same. It's gonna have one, two, three same layout here. Now what does this About section look like? Well, let's just make sure she knows it's about the About page, there we go.
08:06
There might be something like her image, a headshot that she sent to us. And then something about her, so that bio that she sent us before there we go. Something very, very basic for the About page. And again, for the Contact page, kind of happy with that, let's add in one extra thing, which is unsurprisingly, Contact. So what is on the Contact page? Now, this could be a few things, it could be a map for instance of where her art gallery is, or where her studio is, it could be just a big email address, it could be a few things, maybe it's a contact form.
08:42
So maybe it's a kind of like a title up here with some kind of form. So maybe we'll kind of have like an email address, just gonna do this as boxes. So maybe a few fields, and then maybe a big field like a message with some kind of box and I'm gonna just make that obvious it's something to click and again, you just need the footer in here as well and I just need to signify it is a certain page. So this one is the Contact.
09:11
So now that we've done this, what we can actually do is take a picture of these pages and actually send it over to Aria. So I'm just gonna quickly grab my phone. And what we can do is just take a quick picture of these, like that there we go, perfect. And what we can do is just attach these to an email and just say, hey, we wanna kind of make sure that these are okay, what do these look like? Are you happy with them? Does it make sense? And hopefully, if she approves this, this was quite a quick test to do and hopefully if she approves, we can actually start making the website.
A place for you to post notes about anything on this page. Only you can view your notes.
Want some ambient music in the background? Play our radio station!
