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