Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
An iteration is one version of your project, and there will likely be several versions between the start and the final product. When creating a design, your first idea is almost never your best idea.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Generally speaking, it's a good idea to
think in terms of iterations or passes.
0:00
An iteration is one version
of your project, and
0:06
there will likely be several versions
between the start and the final product.
0:10
When creating a design, your first
idea is almost never your best idea.
0:15
There are always things
that can be improved or
0:20
changed, to better suit
the goals of the project.
0:22
For example, the arrangement of page
elements we created on a mobile device,
0:26
probably isn't the best way to communicate
with the audience, on a desktop computer.
0:31
Or perhaps after stakeholders see
the first version of the site,
0:37
they might ask for changes.
0:41
After the product launches,
you might get feedback from customers,
0:43
or information that comes
from analytics data.
0:47
In almost every case, your first try
isn't going to be your best work.
0:52
So you should embrace all
the feedback you can, and
0:57
use it to make the project better.
1:01
We've done a first pass on
the mobile version of the site.
1:03
But there might be some
ways we can make it better.
1:07
We've created this free floating design,
but
1:11
we should wrap it in
a mobile phone container.
1:15
Let's drop in an iPhone container.
1:19
So I'll go to containers, and you can
drag in either iPhone or smartphone.
1:21
I'll just pick iPhone here, and
let's drag that onto the canvass.
1:29
And these containers will
be scaled appropriately.
1:34
And if we zoom out even further,
we can see that this
1:39
website doesn't quite
fit into this container.
1:44
And you'll also notice that it's
going behind the container.
1:49
So to fix that we can just
click on the container, and
1:53
then right-click or secondary click,
and choose send to back.
1:57
And then the other thing we should do,
is actually lock this layer.
2:03
So let's move this over to the upper left,
right click on it, and choose lock iPhone.
2:07
And that will lock the layer in place
until we right-click on it again, and
2:16
choose unlock.
2:20
And that way we won't
select it accidentally.
2:21
So now let's try to put this
website inside of this iPhone.
2:24
And you can see it doesn't quite fit.
2:29
So we need to make some adjustments, so
2:31
that this site is proportional
to this particular device.
2:33
So let's zoom back in, and
let's start working on these adjustments.
2:40
So first, I'm going to make
2:48
this image a bit more narrow.
2:53
I'll move Coming this Summer in a bit.
2:59
We can make this Pre-Order
button a little bit smaller.
3:02
And we'll decrease the font size a bit,
maybe to 16.
3:07
And I think that looks pretty good.
3:17
Up here, we need to reduce
the size of this tagline.
3:21
So let's maybe try 18 point font.
3:26
That works!
3:30
And we'll bring in this logo and
the hamburger menu.
3:32
And that's looking good.
3:39
Now, we just need to
adjust some of this copy.
3:40
And it's okay if this ends
up scrolling further down
3:46
the page once the final copy is in place.
3:50
It's not a big deal, we just want
to align everything right now.
3:54
And then we'll put the social
buttons back in place,
3:58
and center them on the page.
4:03
Okay, great.
4:10
Now, we can zoom out and
take a look what this looks like.
4:11
I'm generally pretty happy with this.
4:15
I'm gonna move these elements down,
just a little more.
4:17
To give each one of these things some
room to breathe, and give it some space.
4:24
And I think that looks pretty good.
4:33
This feels a bit cleaner than
the free-floating page we had previously.
4:35
Elements are properly scaled to
fit the context of the phone,
4:40
and they're aligned with one another,
along an imaginary grid.
4:44
However, it's still a smart
idea to design without
4:48
putting a box around
your work at the start.
4:51
Keeping the space open will
allow you to think freely, and
4:54
come up with the best way of
presenting the information,
4:57
rather than trying to cram
it into an arbitrary area.
5:01
Now, let's keep this design on the side,
and
5:06
we're going to select
all of these elements.
5:10
And we'll copy them by
hitting Ctrl+C on Windows, or
5:15
Command C on Mac, and
then click in any blank area.
5:19
And we'll paste them by hitting Ctrl+V
on Windows, or Command V on Mac.
5:24
And that will duplicate the items, and
5:32
we can just drag these
over to the right here.
5:35
This is what's going to
become our desktop layout.
5:39
So first,
let's make this headline a lot bigger so
5:42
that it stretches across a wider area.
5:46
I'm gonna zoom out just a bit,
To give us some room to work.
5:49
So we'll bring this font size back up,
maybe say, something like 40,
5:55
or we can probably go even higher here,
to something like 60.
6:01
I think that looks good.
6:05
Move these items out of the way here.
6:08
Now let's make the area for
our images bigger to match.
6:12
So I don't think they need to stretch all
the way across the horizontal width of
6:17
the page, like on a phone layout but,
we'll make them still pretty large here.
6:21
And maybe take up a bit
chunk of the left side.
6:27
Next, let's put this pre-order
button to the right side here.
6:31
We want the images to capture their
attention, but we don't want to shove
6:38
the button all the way out of the way,
because that's the call-to-action.
6:43
So we want that up high on the page,
kinda front and center.
6:47
So let's make this button a little larger.
6:53
I think that's good.
6:59
And we'll make the font sizes larger here,
maybe say, 20 or even 24 on that.
7:01
And let's do something similar for
7:09
the coming this summer,
say 20, maybe even like 28.
7:14
That's pretty good, and
we'll center that along the button.
7:21
So let's zoom in a little bit,
get a better look at this.
7:24
This looks like it's
coming together nicely.
7:29
Move this up a bit.
7:31
We still want to include the marketing
copy down here to educate the customer,
7:34
but stretching it all the way
across the full width of the page,
7:39
will make long lines difficult to read.
7:43
So let's just stretch it across
the width of the product images.
7:45
So we'll say that's kinda the space for
this copy.
7:51
And of course, in our final design,
we would adjust things like font sizes,
7:55
and so forth, to make it fill
the space a little bit more neatly.
8:01
And this does leave the right
side a little bit bare.
8:06
But this type of thing can
be changed later when you
8:09
further iterate on the design.
8:12
And this could be resolved with higher
fidelity design details, like a square box
8:14
around the preorder area,
to separate the page into two columns.
8:19
Or the page could be tweaked with
different fonts, sizes, line heights, and
8:25
so forth.
8:28
This wireframe is just meant to get
all the elements into one place.
8:29
Now, let's stretch out
the logo a little bit.
8:34
Because on the desktop
version of the site,
8:39
we'll probably have the full
logo lockup with the image and
8:42
then the company name,
rather than just a small icon.
8:47
And we can do the same
with the navigation.
8:53
So let's delete this small menu here.
8:56
And I'm gonna go to text, and
I'll grab this menu bar here.
9:01
And typically, this is meant for
an actual desktop application,
9:07
but we can use it for this website too.
9:11
And we can separate each
element with a comma, so
9:14
we'll say Home, Products,
Support and the About page.
9:18
So we'll stretch these out.
9:26
And let's bump up that font size as well.
9:30
Maybe something like 16.
9:34
And we'll align that with the right side
of the page and the middle of this logo.
9:40
And we're almost done, let's just
move these social icons around a bit,
9:47
maybe change them to be extra large icons.
9:54
That's good.
9:58
And let's try to find the center there.
10:00
I think that's pretty good.
10:06
And finally, let's put all of these
elements inside of a browser window,
10:08
so that we can clean
things up a bit further.
10:14
So I'm gonna go to containers,
and instead of an iPhone,
10:17
I'm going to drag a browser
window into place here.
10:22
And we'll right-click on that,
say Sent to Back, and
10:26
we'll zoom out a bit further here.
10:31
And we can just kind of wrap all
these page elements, just like this.
10:35
And of course a browser window can be
resized, however the user might like.
10:43
So we'll just wrap these elements
just like this, and zoom back in.
10:48
And I think this looks pretty good.
10:56
I'm gonna lock this browser into place.
10:58
Maybe move some of these
elements down here,
11:02
to give them a little
bit more vertical space,
11:06
give that tagline some room
to stand out on its own.
11:10
And now that we have two different screen
sizes side by side, we can compare the two
11:15
to make sure that we're delivering
a good experience on both.
11:21
And the desktop size we designed,
11:27
will likely fit smaller screens and
possibly tablets.
11:29
If you wanted to take things further, you
could create an even larger layout, and
11:33
have one more size up for particularly
large screens, but we'll stop there.
11:38
We just iterated a bit on
the design we already created.
11:46
But if you want to do more exploration,
you should take some of the same
11:49
elements and come up with
a completely different design.
11:54
Perhaps there are other
approaches that do a better job
11:58
of communicating to the audience,
that you could iterate on even further.
12:01
I hope you enjoyed this
overview of designing websites.
12:07
Like I said at the beginning,
there's no standardized approach, and
12:10
this is just one way of
tackling the problem.
12:14
You should feel free to be flexible, and
12:16
experiment with different techniques
to find the one that works for you.
12:19
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up