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
Do some real designing in Sketch now that we know how to use the app, by bringing what we’ve learned together as we design two screens of an application’s interface.
Sketch Documentation
Refer to the Sketch documentation to learn more about all the features we cover.
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
[SOUND] In this stage, we'll finally be
doing some real designing and sketch.
0:00
Now we know how to use the app by bringing
what we've learned together,
0:07
as we create these two screens of an
application interface.
0:11
When designing this this fictional app,
I'll also touch upon some more advanced
0:15
techniques and features that you may find
useful when designing the rest of the app
0:19
when this course ends or in other future
projects.
0:23
I'm sure you're all eager to begin, so
let's get to it.
0:26
Here we have a new blank document and as
we're going to be designing an iPhone app,
0:31
the first thing we want to do is create an
Aart board.
0:36
So, I'll select Portrait Six from the art
board
0:39
list after pressing A to enable the tool.
0:43
Now, I will add a rectangle for my
background.
0:47
I'll press R to get the tool and I'll draw
it from the top-left corner.
0:50
[BLANK_AUDIO]
0:55
Sketch will do this neat thing where it
will snap the edges of my new layer to
1:02
the edges of the art board, so I don't
have to worry about being too precise.
1:07
Right now, all new layers are drawn with a
border.
1:11
And I don't want to add too many borders
in my design, so I can disable this.
1:15
I'll uncheck the Border option and
1:19
then press the Delete button that appears
in its header.
1:22
Once that's gone, I'll go to the Edit
option
1:27
in the menu bar and press Set Style as
Default.
1:31
Now all the shapes I'll draw will have
this grey fill applied to them, but
1:36
I'm just gonna change this color of this
one just now so it is slightly darker.
1:42
Something cool that comes included with
Sketch are its templates and
1:47
we'll be using one for this project.
1:51
To open a template, click on File in the
menu bar and
1:54
you'll see the second option in the list
is New From Template.
1:58
If we hover over that, we can go on to
select iOS UI Design from the submenu.
2:03
Templates are sketch files that you can
use and select from this menu for
2:10
your projects like this one.
2:15
This iOS template contains typical
elements you may be familiar with if
2:16
you are an iPhone user, recreated in
separate layers and
2:21
groups to make designing an iPhone app
easier and faster.
2:25
You may have noticed these groups and
2:29
this template have a purple folder icon,
which shows us their symbols.
2:31
This means that if the same group is used
elsewhere in your document and
2:36
you update it, all the instances of that
symbol will update automatically.
2:40
Which is an awesome feature that can be a
huge time saver when working with
2:45
larger documents.
2:50
So for the document I'll be working on,
I'll copy and
2:52
paste over some of these layers I'll need.
2:55
I'll select this navigation bar and press
Cmd+C to complete the layer.
2:58
If we switch out to the document we are
working on,
3:04
I'll press Cmd+V to paste it to my art
board.
3:08
It's pasted into the middle here, so let's
move it to the top by dragging it.
3:12
[BLANK_AUDIO]
3:16
The red guides that appear insure us that
the layer is lined up properly.
3:22
We also need a status bar and a tab bar,
so let's grab them both from the template.
3:27
[BLANK_AUDIO]
3:34
Both these groups pasted into the document
should be in the middle of the art board
3:53
and on top of the navigation bar in the
layer list.
3:57
We want to position these appropriately
too and
4:00
we can do this using the align tools that
appear at the top of the inspector.
4:03
If I selected a tab bar group and press
and you write my [INAUDIBLE] in this bar,
4:08
it will align the item to the bottom of
the art board.
4:12
[BLANK_AUDIO]
4:15
For our status bar, we want to align it to
the top.
4:18
So let's select it and press the icon that
will do that.
4:23
[BLANK_AUDIO]
4:27
Now if there's some basic elements on the
page, we'll want to style them.
4:30
So let's start from the top.
4:34
We don't need the back or the edit buttons
in the application we'll be designing.
4:36
So let's select and delete them.
4:40
[BLANK_AUDIO]
4:42
For my title in the middle, I'll select
the text and
4:50
press Enter to edit it and then type in
Today.
4:56
I'll also change its color so it is white.
5:01
For the bars background, I'll select the
layer and change its fill to black.
5:06
I'll also adjust it's capacity, so it's at
50% alpha.
5:13
The light line that you can see underneath
is caused by a shadow, so
5:20
we need to change the color of this too.
5:25
Let's open the color popover and drag the
color point, so it is black.
5:28
As for our tap bar, I'll hide this group
just now as I won't need it until later.
5:34
Next, we'll need to draw a thin rectangle
layer to act as the basis of our timeline.
5:41
So lets do that.
5:46
I'll zoom into my document, so
5:48
I'm at 400% and I'll draw
5:53
a line that's 1 pixel wide.
5:58
The height doesn't matter just now as
we'll clean that up later.
6:03
I'll just adjust it's position in the
inspector, so the x value is 40.
6:08
And I'll nudge the y value, so it sits
just under the title bar layer.
6:16
If I zoom back out, I'll adjust its height
using the inspector and I can tell you
6:22
this value is 602 pixels, so you don't
have to work it out for yourself.
6:26
[BLANK_AUDIO]
6:31
I'll adjust the color, so it's not so
6:38
vibrant and I'll rename this layer
timeline.
6:42
[SOUND] Once that's in place,
6:47
only to draw the first cell in this view.
6:50
So let's start with the icon in the
timeline.
6:55
I'll press O for an oval and I'll hold
down Shift when I draw it, so
6:57
I can ensure it's a perfect circle and
I'll make it 32 by 32 pixels.
7:02
I'll just nudge this into position a
little bit with my arrow keys and
7:08
I'll rename this too.
7:13
[SOUND] Let's add a text layer and
7:15
call it Woke Up.
7:21
[BLANK_AUDIO]
7:24
Make it white, change the weight to medium
and
7:30
give it a size of 12, then drag into
position.
7:35
I'll use the top of circle we drew as a
guideline of where it should sit and
7:39
let its x position be about 75.
7:44
[BLANK_AUDIO]
7:46
The information for
7:51
this point in the timeline app is going to
relate to your night's sleep.
7:52
We want some extra information for this
marker, so let's add it.
7:57
With the layer we just added selected,
create a duplicate by pressing Cmd+D.
8:01
With the duplicated layer hold Shift and
8:07
press the down arrow two times to move
this layer by 20 pixels.
8:10
Do the same again for a third text layer.
8:14
The second line will be for our
information, so let's edit this text so
8:21
it says, slept for seven hours and 27
minutes.
8:26
[BLANK_AUDIO]
8:29
Change the weight to regular and adjust
the opacity of the layer to 70%, so
8:41
it looks a little different from the
title.
8:46
[BLANK_AUDIO]
8:49
The third line will show the time the
entry was logged.
8:54
So let's say that was 7:45.
8:57
[BLANK_AUDIO]
9:01
Then I'm going to draw a separator for the
bottom of this cell,
9:08
as there will be others underneath.
9:12
I could just draw another line like I did
for the timeline, but
9:15
I'm going to do something a little
different.
9:18
I'll draw a box from the bottom of the
title bar, where the left edge of the text
9:21
is indicated by the smart guide and I'll
make it about 95 pixels high.
9:26
[BLANK_AUDIO]
9:30
With that done, I'll disable the fill and
add an inner shadow.
9:44
[BLANK_AUDIO]
9:48
I'll make the y value minus 1 and
9:51
the blur value 0.
9:57
I'll change the shadows opacity by the
color pop over to about 20 to make it
10:00
less prominent.
10:05
[BLANK_AUDIO]
10:06
Now looking at what we've just done, you
can see this is looking pretty good, but
10:13
my layer list is a bit of a mess.
10:18
So let me group some of these layers.
10:20
I can select multiple layers in the list
by pressing Cmd when I click them.
10:23
And once the rectangle, oval and three
text layers are all selected,
10:27
I'll group them using the toolbar icon.
10:31
[BLANK_AUDIO]
10:33
Then I'll change it's name to woke up to
match the text.
10:39
Before we duplicate this group, I'll
create some textiles
10:47
out of the two different text layers in
this group.
10:52
I'll select the woke up text layer and
10:56
in the inspector click no text style.
11:00
You can see that this list is already
populated,
11:04
because of the text style set were in some
of the groups we had imported.
11:07
But for now, we want to create a new one.
11:12
We'll call it Cell Title.
11:16
Do the same for the next layer and call it
Cell Subtitle.
11:23
[BLANK_AUDIO]
11:26
As for the third text layer, the time,
this has the same style as a title.
11:36
So from the list, let's apply the Cell
Title style to it.
11:41
[BLANK_AUDIO]
11:45
Nothing has changed to this layer yet, but
11:50
you'll soon see the results of this
action.
11:53
Now let's duplicate this group and move it
below the original.
11:56
[BLANK_AUDIO]
11:59
When the red guide appears, we know it's
in the right place.
12:05
And that's why I drew the rectangle and
12:09
removed its film to help the positioning,
so I can get its spacing exact.
12:11
The next thing I want to log is my food
intake and
12:16
that will be my breakfast in this example.
12:19
So let's fill out some dummy data.
12:22
[BLANK_AUDIO]
12:24
I'll then duplicate this group again, move
it and add some data about my bike ride.
12:53
[BLANK_AUDIO]
12:57
After I've updated my subtext, I want to
add in a rectangle that will act as
13:20
a placeholder for a map, so I can view my
route.
13:25
I'll zoom in and use the log time to get
the positioning right and I'll make it so
13:28
it is 160 pixels high.
13:33
[BLANK_AUDIO]
13:35
I'll drag the rectangle into the group,
but this overlaps my time and
13:47
the cell separator.
13:52
Because we know this is a 160 pixels high,
13:53
we will just move the other elements to
account for the extra pixels.
13:56
[BLANK_AUDIO]
13:59
I'll select my times y value and at the
end of this,
14:02
I'll hit plus 172, which is the height of
the box and
14:07
text combined and hit Enter.
14:13
This will move the layer below the
rectangle and
14:16
then we'll add 172 onto the height of the
cell rectangle the same way.
14:19
[BLANK_AUDIO]
14:24
And let's not forget to rename our group.
14:31
[BLANK_AUDIO]
14:34
For the last cell, we'll zoom back out and
duplicate the Woke Up group and
14:43
drag it into place.
14:48
[BLANK_AUDIO]
14:49
This will contain data about my check in.
14:58
[BLANK_AUDIO]
15:00
Feel free to pause this part of the video
to ensure your screen has
15:23
duplicated cells and there is no repeating
data.
15:28
If we just take a look at what we've done
here for a minute,
15:31
we can see that we've got a quite nice,
low fidelity mock up of our app.
15:34
That really gives us a sense of what it
will look like.
15:38
The only other main component that's
missing is the tap bar,
15:41
which we've hidden.
15:44
So let's enable it and move it to the top
of our layer list.
15:46
We can hold down Option and press the to
front option in the toolbar,
15:52
which replaces forward when the key is
pressed.
15:57
We don't want this opt bar to be white, so
16:01
let's make it black with the 50% of
opacity and change the shadow's color too.
16:04
[BLANK_AUDIO]
16:10
In the next video, we'll be styling the
elements we've created as well as drawing
16:24
some icons to use in the app.
16:29
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