This course will be retired on March 24, 2020. We recommend "Introduction to HTML and CSS" for up-to-date content.
Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Design is almost always the first step in any web project. Using a technique called wireframing, we can create a basic page layout before we start coding.
Vocabulary
- Wireframes - Drawing technique used to create the shapes and visual structure of a website.
Resources
- To learn more about design, check out Design Foundations on Treehouse.
- Balsamiq Mockups is a wireframing app that uses a hand-drawn look to emulate pen and paper wireframes.
- Sketch is an app that can be used to create full color mockups for apps and websites.
-
0:00
So far, we've just been working with code.
-
0:02
But, before we move any further, we should explore the design of our website.
-
0:06
[SOUND] Just to serve as a reminder,
-
0:08
this is what our project will look like when it's done.
-
0:12
When you're creating projects on your own, the design won't be done for
-
0:16
you like it is in this case.
-
0:18
So it's important that we walk through some of the design decisions here and
-
0:22
understand them.
-
0:23
The design process from one site to another will always vary, but
-
0:27
for our purposes we can break things down like this.
-
0:31
First we're going to decide on goals, then we'll list out the page elements,
-
0:36
and finally we'll lay out the pages with shapes.
-
0:40
I'm going to work through the design on paper and
-
0:42
I strongly encourage you to follow along.
-
0:45
First we should decide on an overall goal for our site.
-
0:49
In these lessons this website will be a design portfolio
-
0:53
with the goal of booking new work.
-
0:55
However there will be many opportunities along the way for
-
0:59
you to customize this website for your own needs.
-
1:02
For example, your site's goal might be to showcase your arts and crafts.
-
1:06
Or perhaps you want to create a gallery of photos to share with your family and
-
1:11
friends.
-
1:12
Once you've decided on your own goal,
-
1:14
we should list out the page elements we'll need.
-
1:17
For this website we'll need an Image Gallery, an About Page, and
-
1:21
a Contact Page.
-
1:23
We'll also need a simple header with a title and navigation.
-
1:26
Often this site wide header is called Top Level Navigation.
-
1:30
We'll also need a site footer.
-
1:33
This Image Gallery will showcase our work.
-
1:36
The About Page will provide some contacts for the website as a whole and
-
1:40
tell the visitor more information.
-
1:42
And then the Contact Page will give the visitor a way to get in touch.
-
1:47
This is especially important for
-
1:49
a design portfolio where we're trying to get new work.
-
1:53
With our list in hand, let's quickly lay out our three page website.
-
1:58
We're going to use a technique called Wire Framing to layout the shapes and
-
2:03
visual structure of our site.
-
2:05
This is a much faster way to experiment with site layout
-
2:09
before you spend lots of time writing code.
-
2:12
We're also going to design the mobile version of the site, and
-
2:16
then work our way up to more complex layouts.
-
2:20
These wire frames will be neatly laid out so that you can follow along.
-
2:24
But when wire framing, pen and paper will work just fine.
-
2:28
If you prefer to use software tools for
-
2:30
wire framing, you can find some resources in the notes associated with this video.
-
2:35
I'm going to lay out our gallery as a grid with two images in each row.
-
2:41
Underneath each image will be a short caption that gives the image some context.
-
2:46
This layout will allow us enough room to make the images large so
-
2:50
they command a lot of attention.
-
2:52
Now, let's layout the Contact page and About page.
-
2:56
Both of these pages are pretty simple, so they can follow the same basic layout.
-
3:01
We'll create a single column and stack everything because mobile sites don't
-
3:06
really have enough room for too many columns but they're great at scrolling.
-
3:10
In the case of our About page, we'll add a photo and a paragraph about ourselves.
-
3:16
For the Contact page, we'll write a paragraph describing how best to reach us.
-
3:21
Along with details like an email address, phone number and Twitter account.
-
3:27
That's about it for the mobile site.
-
3:29
Now let's take these same pages and make them work for tablets and desktops.
-
3:34
We have a lot more width to work with here,
-
3:37
so I'm going to spread apart the logo tags and the navigation and the header.
-
3:43
Then on the gallery page,
-
3:45
I'm going to break up my two columns into three columns.
-
3:49
Finally, on our about page and contact page, I'm going to create two columns,
-
3:55
and give our page elements a little bit more room to breath.
-
3:59
Looks good.
-
4:01
Our quick wire frames are pretty much done.
-
4:04
If we were building a more complex website we might wanna take things further and
-
4:08
build high fidelity mock-ups in an image editing tool, like Photoshop.
-
4:13
However, this is a simple web site, and as we build it in HTML and
-
4:17
CSS, we can fill in the details along the way.
You need to sign up for Treehouse in order to download course files.
Sign up