“Webpage Wireframes and Templates”–Will Mahoney-Watson, CAS/OS Faculty


My name is will Mahoney Watson. I am a
PCC instructor in the CAS Department. And today we’re going to talk about
wireframes. And what is a wireframe? A wireframe is basically a structural
outline of all the elements that are going to go into your web page designs. And we’re today we’re going to create a wireframe for the smartphone tablet and desktop layouts. Now the most important thing about wireframes is the content. Content is key. So we’ve talked to our client. And in this case we’re going to use the CAS 206 client, Portland Historical Tours. We’ve talked to the client and client has indicated to us that these are the most important issues for them. So we’re going to try to make sure that these are displayed roughly in this order. So obviously the first thing you need is a logo that says the name of your client. Second thing is some kind of navigation obviously The client has created a video and he thinks that this video displays the content of their tours in a very professional manner. So they really want to emphasize this video. Right underneath the video should
come to schedule so viewers can see the upcoming schedule and then clearly they
want to sign up for that upcoming tour. On the side they’re willing to have some
facts about Portland to kind of draw the viewer into the interesting things that
they’re going to see on these tours and of course they also want to have some
social media icons and at the bottom a footer with some basic information. So these are the content references that we want to have in our wireframe. Now what we’re going to do is lay them into HTML structural elements . So obviously with the logo, we’re going to put that in the header. The nav obviously goes in
the nav. And we start our main content. And then we’re going to have our an
article for the video and an article for the schedule. And we can keep this article scheduled and sign up together in one article. And then we’re going to put the facts and a side or a sidebar. And we can include our social media in the sidebar as well. And finally we’re going to have a footer. So those are the structural elements we’re going to layout. So for the purpose of this class we’re going to set breakpoints. And we’re going to say that anything under 481 pixels is a smart phone. So we’re going to use
progressive enhancement by laying out our design. First for the smart phone in
a mobile-first environment then we’re going to lay out the tablet and then
find the desktop. And you may think that a smart phone screen is limited to this tiny little box. But in reality we always scroll with smart phones so this bottom box border isn’t really here. I’d like to think of it more as a long scrolling layout. And it’s very difficult to put two columns in a smart phone and make them large enough to be usable. So pretty much we have to layout everything as
100% content. So we’re going to start up with our header. And then under that we’ll have our little nav section. And we might use a little hamburger here to create that compressed menu for our smartphone. Then we can start our main here. And then we’ll have our first article with the video here. Our second article with the schedule and sign up here. Then we have to put our side at the bottom. And then finally you can have our footer at the bottom. So that’s the basic layout for our smart phone. Now for the purposes of
this class we’re also going to say that a tablet is anything between 1,024
pixels and 481 pixels. So this is part of that progressive enhancement. Where now we can take what we’ve laid out in the smartphone and lay it out in a tablet. And so again we’re also in the same way
not limited to just the size of the tablet, because we can scroll in a tablet as well. But we can now break out our columns into the wider sections. So we can have a full width header. And we can have have a full width nap too with the individual buttons there. And now we can bring in an aside. We can have our content for the aside structured on one side of the page. And then we can have articles here. So we have article, article, aside, and footer. So that’s a tablet. There al fun gets to the desktop then, when we start laying out a much larger grid. And for the most part, people now days use the 12-point grid system. And what that means is that, I can take my grid and lay it out into twelve equally divisible cubes. And then I can use any combination of those twelve cubes. And we use 12 because 12 is divisible by two, three, four, and six that gives us the most combinations possible to provide some real interesting layouts. So we could still start with our full page header and our full page nav. But now we can start structuring things in different sized grids. So for example I could split this grid evenly into two even sized six grid sections. I could put it into three evenly sized sections. I could use four evenly sized sections. Or I could use any combination of those. So I can have three, six, three. Or even twelve tiny little things if I
wanted. Generally that’s not going to be too effective. But if I need a lot of little pictures I can use them. So you can see how using the 12-point grid can allow you to create all kinds of interesting layouts using the structural elements that we first started with in the smartphone enhanced in the tablet and then can really expand on in the desktop. So the trick is now taking these
templates these, I’m sorry, these wireframes and creating them into
templates. And what is a template? A template is the HTML and CSS and any
other code you might need to create a working web page that uses this design. And then when that template is created we can then use that template to duplicate and create the rest of the pages for our website So that’s how you take content into a wireframe into a template.

Add a Comment

Your email address will not be published. Required fields are marked *