So far, we've just been working with code.

But, before we move any further, we should explore the design of our website.

[SOUND] Just to serve as a reminder,

this is what our project will look like when it's done.

When you're creating projects on your own, the design won't be done for

you like it is in this case.

So it's important that we walk through some of the design decisions here and

understand them.

The design process from one site to another will always vary, but

for our purposes we can break things down like this.

First we're going to decide on goals, then we'll list out the page elements,

and finally we'll lay out the pages with shapes.

I'm going to work through the design on paper and

I strongly encourage you to follow along.

First we should decide on an overall goal for our site.

In these lessons this website will be a design portfolio

with the goal of booking new work.

However there will be many opportunities along the way for

you to customize this website for your own needs.

For example, your site's goal might be to showcase your arts and crafts.

Or perhaps you want to create a gallery of photos to share with your family and

friends.

Once you've decided on your own goal,

we should list out the page elements we'll need.

For this website we'll need an Image Gallery, an About Page, and

a Contact Page.

We'll also need a simple header with a title and navigation.

Often this site wide header is called Top Level Navigation.

We'll also need a site footer.

This Image Gallery will showcase our work.

The About Page will provide some contacts for the website as a whole and

tell the visitor more information.

And then the Contact Page will give the visitor a way to get in touch.

This is especially important for

a design portfolio where we're trying to get new work.

With our list in hand, let's quickly lay out our three page website.

We're going to use a technique called Wire Framing to layout the shapes and

visual structure of our site.

This is a much faster way to experiment with site layout

before you spend lots of time writing code.

We're also going to design the mobile version of the site, and

then work our way up to more complex layouts.

These wire frames will be neatly laid out so that you can follow along.

But when wire framing, pen and paper will work just fine.

If you prefer to use software tools for

wire framing, you can find some resources in the notes associated with this video.

I'm going to lay out our gallery as a grid with two images in each row.

Underneath each image will be a short caption that gives the image some context.

This layout will allow us enough room to make the images large so

they command a lot of attention.

Now, let's layout the Contact page and About page.

Both of these pages are pretty simple, so they can follow the same basic layout.

We'll create a single column and stack everything because mobile sites don't

really have enough room for too many columns but they're great at scrolling.

In the case of our About page, we'll add a photo and a paragraph about ourselves.

For the Contact page, we'll write a paragraph describing how best to reach us.

Along with details like an email address, phone number and Twitter account.

That's about it for the mobile site.

Now let's take these same pages and make them work for tablets and desktops.

We have a lot more width to work with here,

so I'm going to spread apart the logo tags and the navigation and the header.

Then on the gallery page,

I'm going to break up my two columns into three columns.

Finally, on our about page and contact page, I'm going to create two columns,

and give our page elements a little bit more room to breath.

Looks good.

Our quick wire frames are pretty much done.

If we were building a more complex website we might wanna take things further and

build high fidelity mock-ups in an image editing tool, like Photoshop.

However, this is a simple web site, and as we build it in HTML and

CSS, we can fill in the details along the way.