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
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