Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video, we'll create low fidelity mockups using a wireframing tool. This will allow us to quickly explore different layouts for various screen resolutions.
[?music?]
0:00
[Low Fidelity Mockup]
0:02
[Nick Pettit] Overall, this presents a very interesting design challenge
0:05
because we need pixel-accurate values to calculate our fluid grid.
0:09
This means we need to create a high fidelity mockup.
0:15
However, we should also spend some time creating a low-fi wireframe
0:18
for each responsive stage of our design.
0:23
We're now at the point where we're ready to go ahead and start mocking up
0:27
and designing our site.
0:31
Now, of course, we've already taken a look at the finished site,
0:33
but mocking up a website is an important step that you should take
0:36
whenever you start a new project, so let's go ahead and pretend
0:40
that we're not really sure how we're going to design this.
0:43
Now, another question to keep in mind is how exactly do you design a site
0:47
that's supposed to respond to all different resolutions?
0:51
Do you start with the smallest resolution and work your way up,
0:54
or do you start with the largest resolution and then cut it down?
0:58
Well, there's a lot of different approaches that you could take,
1:02
so we're going to go ahead and start with the largest resolution possible
1:06
and work our way down.
1:10
I'll go ahead and drag out an iPhone element here.
1:12
Now, this could, of course, be any mobile phone,
1:18
but we'll go ahead and put that there.
1:21
And then, we're going to drag out some text, and I want to use some big header text
1:25
for our title, and the name of our app is GeoNotation,
1:31
so I'll go ahead and type that in and hit Enter.
1:39
I'll put that there, and then we need a subtitle right under our large logo there,
1:43
and our subtitle will be Take Notes Anywhere,
1:50
because with this app, you can actually take a note
1:55
and it will mark it with GeoLocation information.
1:59
This subtitle is a little bit large, so I'm going to go ahead and cut it down--
2:02
that looks pretty good.
2:08
I'll go ahead and line that up there.
2:09
And now, we need to add in some paragraph text,
2:11
so I'll go ahead and drag that out and place it here.
2:15
That looks pretty good.
2:22
And it doesn't really matter what text is in here, necessarily.
2:25
That will be more important when we get to Photoshop mockups,
2:30
but for now, we'll just go ahead and copy some text in there
2:34
just so it takes up some space and gives some texture to the overall look.
2:37
And then, we need to add in a button over on the right side here,
2:42
so we'll go ahead and go to our buttons and drag out a button,
2:49
and this button is going to be a call to actions
2:53
so that people can actually start using the application that we're advertising.
2:56
So we'll type in some text that says Start Taking Notes
3:01
and I want that to be a little bit larger, so we'll go ahead and drag that out.
3:07
And also, the text size should be a little bigger.
3:13
That's a little bit too much--down to 18, that looks pretty good.
3:17
And then, right below our button here, we want to have some testimonials
3:22
from people that have used this application and think it's really great.
3:27
So we'll go ahead and go back to our text
3:31
and we'll drag out some text here,
3:34
and Ryan Carson said, "Holy heck, it's awesome!"
3:36
And then, of course, we need to say who this quote is from,
3:44
so just below this, we'll go ahead and say - Ryan Carson.
3:48
That looks good.
3:54
And then finally, we'll go ahead and increase the font size of this quote
3:56
and drag it there--that looks pretty good.
4:02
And then, we need to make another one of these
4:05
from myself, and I'll say, This changes everything.
4:09
We went ahead and picked 18 on this other quote, so we'll do the same for this one.
4:16
Say 18 and line that up, and then we need to say who this is from
4:22
and I'll say it's from me - Nick Pettit
4:29
and I'll drag that there.
4:33
That looks pretty good.
4:36
Of course, we'll have some more stuff below here.
4:38
We want the overall impression of the app to be this nice large phone
4:41
and we want to have our logo and some quotes over here,
4:46
and a big call to action.
4:51
So that looks pretty good, I would say.
4:53
It takes up the page and that should look really nice at a very large size.
4:55
So we'll go ahead and save that out,
4:59
and now, we need to move on to our iPad or notebook-sized screen.
5:02
So we'll go ahead and clone this as a new mockup
5:08
and here, we're going to do a couple of things differently.
5:13
The first thing that we're going to do is get rid of these quotes,
5:17
because while they are nice to have, they're taking up space
5:21
that could be used for making the phone larger
5:24
and making this text a little bit more readable, and also, making our logo larger.
5:27
So we'll go ahead and get rid of these quotes
5:32
because they're not super important.
5:35
And then, the next thing we're going to do is move this phone over to the right,
5:38
and we will move our call to action down below.
5:44
So that's pretty close to what we're going to want.
5:48
We just need to increase the size of this logo a little bit
5:50
so it fills out the space, and we'll move our subtext there.
5:54
Then, we need to just resize this paragraph and let it expand to fill this area.
6:01
And then, we're going to actually expand out this button a little bit
6:09
and make it take up more space.
6:13
Now remember, we're going to be using a fluid grid layout,
6:15
so this will resize a little bit and essentially, we're moving from a three-column layout--
6:19
where we have column one, the phone in the middle, and then the call to action on the right--
6:25
down to a two-column layout where we have combined our call to action and the text
6:32
into a single column, and then we have our second column,
6:37
which is the actual demonstration of the application.
6:41
So that looks pretty good for the tablet and notebook size,
6:44
so we'll go ahead and save that out
6:48
and i'll call it notebook size.
6:51
And then, we're going to clone this as a new mockup yet again,
6:54
and now, we're ready to go ahead and design our mobile layout.
7:00
Now, of course, we have much less screen real estate to work with here,
7:04
so we're going to have to make some cuts.
7:08
Now, of course, we have much less screen real estate to work with here,
7:11
so we're going to have rearrange our layout a little bit.
7:14
The first thing I'm going to do is make this logo smaller again;
7:17
maybe down to 32 pixels--actually, it's going to have to be even smaller,
7:22
down to maybe 28--and we'll move that up to the top.
7:27
And we will move our tagline with it, and we'll make that smaller as well.
7:32
That looks pretty good.
7:40
And then we'll have our paragraph text
7:42
right below that area, so we'll go ahead and squeeze that in
7:45
and make it a little bit taller there.
7:50
We're going to decrease the font size on that as well.
7:54
That looks pretty good.
7:59
And then, we need to make our call to action much smaller,
8:01
and we're going to move that down here.
8:07
And then, we need to just stick this phone right in between,
8:09
because while we are at a small mobile size,
8:14
it's still nice to show at least a screen shot of the app--
8:16
if not a video--to go ahead and show what this app is actually going to look like
8:20
should they choose to click on the Start Taking Notes button.
8:25
So let's go ahead and save this out
8:30
and I'll call this Mobile, and let's review these three layouts.
8:33
Here's our full-size layout, which will take up the entire screen
8:37
on a large 27" monitor or even a 24" monitor.
8:41
And then, we'll go to our notebook size or iPad size,
8:46
or just a smaller computer screen, and that's what that looks like.
8:51
And then we'll take a look at our mobile size,
8:54
and that will, of course, be squeezed down to a phone
8:58
where we can kind of scroll up and down and look at the design.
9:03
Now again, I want to mention that we will have other elements below here
9:07
highlighting various features of the app, but this is the overall impression
9:11
that we want to capture at all three sizes.
9:15
So again, there's the full size, the notebook size,
9:18
and the mobile size.
9:21
This low fidelity mockup will help serve as a guideline
9:23
when we move on to high-fidelity mockups next.
9:27
You need to sign up for Treehouse in order to download course files.
Sign up