[?music?]

[Low Fidelity Mockup]

[Nick Pettit] Overall, this presents a very interesting design challenge

because we need pixel-accurate values to calculate our fluid grid.

This means we need to create a high fidelity mockup.

However, we should also spend some time creating a low-fi wireframe

for each responsive stage of our design.

We're now at the point where we're ready to go ahead and start mocking up

and designing our site.

Now, of course, we've already taken a look at the finished site,

but mocking up a website is an important step that you should take

whenever you start a new project, so let's go ahead and pretend

that we're not really sure how we're going to design this.

Now, another question to keep in mind is how exactly do you design a site

that's supposed to respond to all different resolutions?

Do you start with the smallest resolution and work your way up,

or do you start with the largest resolution and then cut it down?

Well, there's a lot of different approaches that you could take,

so we're going to go ahead and start with the largest resolution possible

and work our way down.

I'll go ahead and drag out an iPhone element here.

Now, this could, of course, be any mobile phone,

but we'll go ahead and put that there.

And then, we're going to drag out some text, and I want to use some big header text

for our title, and the name of our app is GeoNotation,

so I'll go ahead and type that in and hit Enter.

I'll put that there, and then we need a subtitle right under our large logo there,

and our subtitle will be Take Notes Anywhere,

because with this app, you can actually take a note

and it will mark it with GeoLocation information.

This subtitle is a little bit large, so I'm going to go ahead and cut it down--

that looks pretty good.

I'll go ahead and line that up there.

And now, we need to add in some paragraph text,

so I'll go ahead and drag that out and place it here.

That looks pretty good.

And it doesn't really matter what text is in here, necessarily.

That will be more important when we get to Photoshop mockups,

but for now, we'll just go ahead and copy some text in there

just so it takes up some space and gives some texture to the overall look.

And then, we need to add in a button over on the right side here,

so we'll go ahead and go to our buttons and drag out a button,

and this button is going to be a call to actions

so that people can actually start using the application that we're advertising.

So we'll type in some text that says Start Taking Notes

and I want that to be a little bit larger, so we'll go ahead and drag that out.

And also, the text size should be a little bigger.

That's a little bit too much--down to 18, that looks pretty good.

And then, right below our button here, we want to have some testimonials

from people that have used this application and think it's really great.

So we'll go ahead and go back to our text

and we'll drag out some text here,

and Ryan Carson said, "Holy heck, it's awesome!"

And then, of course, we need to say who this quote is from,

so just below this, we'll go ahead and say - Ryan Carson.

That looks good.

And then finally, we'll go ahead and increase the font size of this quote

and drag it there--that looks pretty good.

And then, we need to make another one of these

from myself, and I'll say, This changes everything.

We went ahead and picked 18 on this other quote, so we'll do the same for this one.

Say 18 and line that up, and then we need to say who this is from

and I'll say it's from me - Nick Pettit

and I'll drag that there.

That looks pretty good.

Of course, we'll have some more stuff below here.

We want the overall impression of the app to be this nice large phone

and we want to have our logo and some quotes over here,

and a big call to action.

So that looks pretty good, I would say.

It takes up the page and that should look really nice at a very large size.

So we'll go ahead and save that out,

and now, we need to move on to our iPad or notebook-sized screen.

So we'll go ahead and clone this as a new mockup

and here, we're going to do a couple of things differently.

The first thing that we're going to do is get rid of these quotes,

because while they are nice to have, they're taking up space

that could be used for making the phone larger

and making this text a little bit more readable, and also, making our logo larger.

So we'll go ahead and get rid of these quotes

because they're not super important.

And then, the next thing we're going to do is move this phone over to the right,

and we will move our call to action down below.

So that's pretty close to what we're going to want.

We just need to increase the size of this logo a little bit

so it fills out the space, and we'll move our subtext there.

Then, we need to just resize this paragraph and let it expand to fill this area.

And then, we're going to actually expand out this button a little bit

and make it take up more space.

Now remember, we're going to be using a fluid grid layout,

so this will resize a little bit and essentially, we're moving from a three-column layout--

where we have column one, the phone in the middle, and then the call to action on the right--

down to a two-column layout where we have combined our call to action and the text

into a single column, and then we have our second column,

which is the actual demonstration of the application.

So that looks pretty good for the tablet and notebook size,

so we'll go ahead and save that out

and i'll call it notebook size.

And then, we're going to clone this as a new mockup yet again,

and now, we're ready to go ahead and design our mobile layout.

Now, of course, we have much less screen real estate to work with here,

so we're going to have to make some cuts.

Now, of course, we have much less screen real estate to work with here,

so we're going to have rearrange our layout a little bit.

The first thing I'm going to do is make this logo smaller again;

maybe down to 32 pixels--actually, it's going to have to be even smaller,

down to maybe 28--and we'll move that up to the top.

And we will move our tagline with it, and we'll make that smaller as well.

That looks pretty good.

And then we'll have our paragraph text

right below that area, so we'll go ahead and squeeze that in

and make it a little bit taller there.

We're going to decrease the font size on that as well.

That looks pretty good.

And then, we need to make our call to action much smaller,

and we're going to move that down here.

And then, we need to just stick this phone right in between,

because while we are at a small mobile size,

it's still nice to show at least a screen shot of the app--

if not a video--to go ahead and show what this app is actually going to look like

should they choose to click on the Start Taking Notes button.

So let's go ahead and save this out

and I'll call this Mobile, and let's review these three layouts.

Here's our full-size layout, which will take up the entire screen

on a large 27" monitor or even a 24" monitor.

And then, we'll go to our notebook size or iPad size,

or just a smaller computer screen, and that's what that looks like.

And then we'll take a look at our mobile size,

and that will, of course, be squeezed down to a phone

where we can kind of scroll up and down and look at the design.

Now again, I want to mention that we will have other elements below here

highlighting various features of the app, but this is the overall impression

that we want to capture at all three sizes.

So again, there's the full size, the notebook size,

and the mobile size.

This low fidelity mockup will help serve as a guideline

when we move on to high-fidelity mockups next.