Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Web Design Process!
You have completed Web Design Process!
Preview
While it might be tempting to think about what the site might look like on a desktop, we're going to start with the mobile version first.
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
So far, we've just added a button.
0:00
We're going to add a lot more and while
it might be tempting to think about what
0:02
the site might look like
on a desktop browser,
0:07
we're going to start with
the mobile version first.
0:09
A desktop or a laptop screen has a lot
more space than a handheld smart phone.
0:12
When you create a desktop website and
work your way back to a mobile design,
0:20
there's a temptation to fill
in all the available space.
0:25
Then it's hard to condense all of
those elements onto the screen
0:29
of a mobile device.
0:34
Thinking mobile first is a lot
easier because you can start
0:35
with the simplest version that includes
the most important details and
0:39
then expand on those ideas to
create the desktop design.
0:44
Let's keep going.
0:49
Beyond the call to action, the next
two important things are capturing
0:51
the attention of the customer and
educating them about the product.
0:55
We can't educate unless we
have their attention first.
1:00
So let's grab them with nice,
large product photos.
1:04
Because we're on a mobile screen where
horizontal space is usually limited and
1:08
we want both the photos and
the call to action to be large,
1:13
we probably shouldn't
put them side-by-side.
1:17
So let's add the product
photos just above the button.
1:20
So up here from my tools, I'll go to Media
1:26
and drag out an image component here.
1:32
And this will just be a blank image,
we can resize this however we'd like.
1:37
I'm gonna move this preorder
button a little bit.
1:44
And I think that looks pretty good.
1:49
Now let's zoom out a bit
to view more of the canvas.
1:53
To zoom in and out on Windows, hit
the CTRL key and the plus or minus keys.
1:58
On a Mac, it's CMD and
the plus or minus keys.
2:03
So I'll just zoom out
a little bit here and
2:09
I'll move these two things to
get us some more space to work.
2:13
This is looking good but right now,
2:18
it's not immediately clear what this is,
or what we're pre-ordering.
2:20
This is where we can lean on some
of the copy to do the explaining.
2:25
So in the document we received
from the marketing and
2:31
product teams, say we have a tagline, so
2:34
we'll drag out some text here and it says,
2:39
keep your lawn healthy period and
funky exclamation point.
2:44
Right now this is too small, so
2:51
I'll scroll down and
increase the font size here.
2:55
Let's maybe do 24.
3:02
I think that looks good.
3:04
And let's make sure this is centered so
3:09
that no matter how we resize this,
the text will always be in the middle.
3:12
And then we can drag this around and
3:16
use the smart guides in Balsamiq mock ups
to help us center it with other elements.
3:18
This might also be a good place to mention
3:25
when this product is going to
be available, so let's add that.
3:27
I'll drag out some more text here and
3:31
we'll say, Coming this Summer.
3:35
And again, this is a little too small,
so let’s make that bigger
3:39
and we'll put that just to
the left of the button here.
3:45
And let’s just zoom in a little bit,
so this is easier to see.
3:51
There we go.
3:57
When people are pre-ordering something,
3:59
they want to know when they
can expect the product.
4:00
So the visual proximity
of coming this summer,
4:04
and the pre-order button
is actually communicating.
4:08
If we were to reverse the positions
of these two text blocks,
4:12
it might still work but the context
might be a bit more difficult to read.
4:17
If people were to see coming this
summer as the first thing they read,
4:22
it might be confusing.
4:27
What's coming this summer exactly?
4:29
Now let's add some of the remaining bits.
4:31
Since this is the mobile version
of the site, let's make a spot for
4:35
a small product logo in the upper left.
4:39
So I will go to images here or
media rather and grab an image,
4:42
and let's just make that nice and
small like that and
4:48
keep it up here on the left,
that will be our product logo.
4:53
And because this is part of a larger
website, we want add some navigation.
5:00
So let's add a menu button
in the upper right here,
5:06
I'll drag out the icon component here.
5:10
And then we can search for
an icon that we want.
5:18
So I'll type in something like menu,
and there is our little three line
5:22
hamburger menu and
we can change the size of it here and
5:28
Balsamiq Mockups will change it to medium,
I think that's pretty good.
5:31
Let's make the logo a little
smaller to match up with that.
5:36
That works and
I'll align this with the right side.
5:41
And we know that our site visitors
are heavy social media users.
5:46
So we can get away with iconography
like this because they've
5:50
probably seen it in other websites.
5:54
Next if the site visitor still wants
to know more about the product,
5:57
they'll likely scroll down the page and
6:00
let's add some of the remaining
marketing copy there.
6:04
So I'll just select text and
let's grab a block of text.
6:07
And in Balsamiq mockups we don't
have to type in anything exactly,
6:15
we can just have this
nice text block here, and
6:19
that will be our
additional marketing copy.
6:25
And if you want, you can put in the real
copy there and in fact, that is
6:29
a little bit better so that you know the
exact spacing, but this is fine for now.
6:34
So let's zoom out just a bit so
6:39
that we can see the whole
length of the site there.
6:43
And finally at the bottom of the page,
let's add iconography for
6:48
the company's social media profiles since,
6:52
again, this will be something
that speaks to our audience.
6:55
So I'll move this text
up just a little bit and
6:58
let's go back to our icons here, and
7:01
we could just drag in the icon component,
or we can search for icons here.
7:06
So I'm gonna look for Facebook.
7:11
So we'll go to the f's here and
I'm just gonna grab this Facebook square.
7:14
That's good.
7:21
And then let's scroll over to Twitter.
7:23
And of course, we could add more social
media profiles if we wanted to, but
7:26
we'll just do these two.
7:30
There is the Twitter square,
so we'll drag that in,
7:32
and let's just put these side by
side at the bottom of the site and
7:39
then we'll select both of them to
kind of get them centered together.
7:44
This is a good start and
now we're ready to move on.
7:51
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