Preview
Video Player
00:00
00:00
Creating a Wireframe
16:31Do 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.
[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