- [Meng] Hi, this is Meng from Design Plus Code.
Today, we're going to design the Design Plus Code iOS app
from scratch in Sketch by using some guidelines and tips
that will improve your workflow.
After you learn this tutorial,
you will be able to create a cohesive experience
with multiple screens and it will let you build
beautiful apps.
Let's get started.
So we will be designing the new home screen
in this tutorial.
It contains a hero image, headline, and intro,
a call to action button, a chapter section,
a people section, and a footer.
Now let's create a new Sketch file by pressing command N.
So here we're going to be setting up some basics
for the design.
So it is recommended to design at 1X
because it will be easy when you export assets
to 2X and 3X.
We are going to use the iPhone eight at 1X
for this home screen design.
You can create an artboard by choosing insert
from the toolbar, then choose artboard.
Then you will get a list of presets.
Or you can just press A to get there directly.
So from here you can change the category of artboards
like material design, responsive web, and others.
But let's go to Apple devices.
So all these artboard sizes are at 1X.
You can change the artboard to portrait
or landscape mode by toggling this.
The preview here will be reflected by your settings.
Let's choose the iPhone eight by simply clicking it
and the artboard will be created in the canvas for you.
Let's save the Sketch file by pressing command S
and give it a name.
We call it Design+Code iOS App
and save it by clicking the save button.
Also, we want to name the artboard name to Home
because we're designing the home screen.
In this home screen, we use a layout margin of 16 pixels
from the left and the right.
Like this, we ensure that the user interface stay focused
in the middle of the screen and doesn't look cramped
against the edges.
So we can go to the top navigation, go to view, canvas,
show rulers to display the rulers.
By doing this, we can draw the guidelines based
on what we want.
Now you can hover the top ruler and go to 16 pixel
and click on it.
The guide will then be displayed.
For the right side, it's hard to know how much is 16 pixel
so we can draw a square box by pressing R
and draw a 16 pixel box.
Align to the right, then hover to the top ruler mark again.
The guide will snap according to the shape.
This is the 16 pixel.
Click on it and the guideline will be there.
Now we can delete the square box.
So with this, we can have the correct margins on the left
and right.
The ruler's guide default color is in red.
We can change this by going to sketch preferences
or simply press command comma to go to preferences.
In the canvas tab, you will see guides.
Press on the color palette and it will show a color pop up.
So here, you can choose the color that you want
to replace the guides.
So let's say I choose cyan.
The guides on the artboard will preview straight away.
We can go back to magenta.
We choose magenta because it has more visibility
when designing in Sketch.
Because we're designing an iOS app,
we try to make the design as realistic as possible.
We can use the sketch preset iOS UI design library
to grab elements that we need.
Go to sketch preferences, libraries,
to make sure that the iOS UI design library is enabled.
We need a status bar for the top of the screen.
You can find the status bar in the insert menu
in the toolbar.
Or if you've installed Sketch Runner,
you can search it easily.
Go to plugins, runner, run.
Or press command apostrophe to activate Sketch Runner.
Select the insert tab and type the key word
status bar black and double click the symbol
and then place it on the artboard.
Let's create a background for this home screen.
Press R to draw a rectangle on the artboard.
Increase it to the full width of the artboard
and then set the height to 450 pixel.
Rearrange this background to below the status bar.
Rename this layer to Background to make your document easier
to navigate.
Our hero image has a dark background
so it is good to change the status bar to the white version.
By doing this, we can have a better contrast
on top of each element.
Right click the status bar and go to replace with,
iOS UI design, bars, status, white,
and click on it.
Now you have a white status bar on the home screen.
We're going to insert a background image.
Get the image from the source file that you have downloaded.
You can drag and drop the image from your Mac
to the Sketch artboard.
Or you can just copy the image file by pressing command C
and then go to Sketch and press command shift V
to paste it to the top right of the background layer.
Select the image in the background layer,
then right click and choose mask in the context menu.
Now the layer at the bottom, which is the container,
will become a mask for the image.
Adjust the image height to 450 pixels
and move the image position as you like.
After that, we insert the iPhone 10 image
on the background image.
Next is to put the hero headline.
You can use a larger font size for this.
It is hard to choose a suitable typeface
and also not recommended to use more than two typefaces.
If you're not sure which font to use for the iOS app,
you can always go with Apple's San Francisco font.
The San Francisco typeface was designed to be highly legible
at both small and large sizes.
For font size equal to 19 point and below,
you can use SF pro text for font size equivalent
to 20 point or above.
You should use SF pro display.
You can download the San Francisco family of fonts
or read more about it
in the Apple human interface guidelines.
Now copy the headline text from the source file.
Go to insert text or press T to insert a text layer
on the artboard.
Paste the text to the text layer by pressing command V.
Use the SF pro display font for this headline.
Set the font size to 36 pixel and change the color
to white.
Resize the text container so that you won't cover up
the iPhone 10.
You will notice that we're using a different font weight
and style for the headline.
With this, we can make the headline look more exciting
and less monotonous.
Let's continue with the statistics section
on top of this hero section.
Draw a full width black rectangle here.
For the height, we will adjust later
after we insert the text.
You can get the text from the source file.
Copy the watch 40 hours of video lessons
and paste on the artboard.
Split the watch, 40 hours, and the of video lessons
into three separate text layers.
By doing this, we can use different font size and opacity
for each of them.
Select the watch text layer and you will find an option
with a gear icon and inspect it right there.
Clicking this will let you set decoration, list type,
and text transform for the text that you have selected.
We're going to set this watch text layer to uppercase
inside the text transform drop down.
Then set the font size to 15 pixel
and change the opacity to 60%.
Arrange it to 32 pixel from the right
and 24 pixel from the top of the black rectangle.
Just press and hold the alt key to see the distance
between each element.
For the second text, 40 hours,
set it to a 30 pixel font size.
Left align it with the watch text and snap just below it.
For the last text, set it to 15 pixel
and align it under 40 hours.
Then draw another rectangle with a 130 pixel width
and three pixel height.
Give it a three pixel radius that this line looks soft
and elegant.
Left align this line with these text layers
and leave a gap of eight pixel from the top.
We've already exported the home sketch pallette
and you can find it from the source file
that you've downloaded.
But you will need a plugin to import this
and it's called Sketch Pallettes.
Once you've installed this plugin, you can go to Sketch
and go to plugins in the menu bar, choose Sketch Pallettes,
and then click on the load pallette.
Double click the home sketch pallette and just press load.
The colors and gradients that we've exported for you
is now imported to your current documents.
Choose the third gradient for that line.
Rename it to Line, then group it together
with all of these text layers
and name the group to Stat.
Now we add a 24 pixel distance from this group
to the black rectangle.
You can increase the height by changing the black shape.
Press and hold the command key, then press down arrow
to increase the shape height.
Rename this black rectangle to something simple
and then group it with the Stat group.
Move this group into hero background
and align it to its bottom.
We're almost done with this section.
Let's duplicate the stat group to the right
by holding the alt key and drag it to the right.
Copy the other text from the text file
and paste it accordingly.
The black rectangle doesn't look appealing to me
so what we can do is make it half transparent
and add a background (mumbles) to the dark background.
Select the black rectangle layer,
then go to the inspector panel
and change the field's opacity to 50%.
Then click on the Gaussian blur drop down
and choose the background layer and set the amount
to 24 pixel.
This looks more appealing now.
So far, we've completed all the elements
in the hero section.
We should group all these layers into one group
called Hero Section so the document is more organized.
Let's move to the next section.
Get the book.
Drag and drop the book image and the shadow image
from the source file.
Align the book to center and give it a top margin
of 50 pixels.
Then put the shadow behind the book.
As you can see, the artboard height is insufficient
to let us continue insert art or design.
Let's increase the artboard size
by selecting the artboard and increase the height
to 2,000 pixels.
We can reduce the size later once we finish the design.
Now insert the content here,
which you can copy from the text file.
Change the text color to this
and the font size to 22 pixels.
For better hierarchy, you can change this second sentence
to another color.
Center align the text layer in the alignments here
and then set the width of this text layer to 311 pixels.
By doing this, the left and right margins are 32 pixels.
Give a 32 pixels top margin between this text and the book.
Next, we need a call to action button below.
Apple highly recommends to size all the controls
at a minimum tappable area of 44 by 44.
This users can easily tap and interact with the buttons
in your app.
Type "Get the book" for the button label
and then set the font size to 20 pixels.
Then we draw a shape with a 44 pixels height
and put it behind the text layer.
Give the button a 20 pixel padding to the left and right,
and then add a radius of 44 pixel
to make the button rounded.
While selecting the button, click the fill color
in inspector panel and choose the second option,
linear gradient.
You can adjust the position of the gradient
by dragging the top dot to the top left
and bottom dot to the bottom right as you like.
Lastly, change the text color to white.
Now we have a good looking and approachable button.
If you're not sure what color to use for the buttons,
we'd recommend using blue.
About 50% of apps made by Apple use blue for their controls.
By having consistent spacings in the design,
your layout will look more clean and legible.
This can help users have more breathing space
to consume the content in the app.
Let's draw a wide rectangle
and put it behind this book section.
Like this, we can have a better container
for all of these elements.
Now regroup and name it Get the Book.
The next part is the chapter section.
We are going to use a card based user interface
for the chapter and people section below here.
The card base design model is used almost everywhere.
Card contents are easy to digest, visually appealing,
and flexible for different kinds of screen sizes
from iPhone to iPad and desktop.
All of these factors make card design popular
and with a great usability.
Copy the chapter text from the text file
and then paste in the artboard.
Transform it to uppercase, set the font size to 15 pixel,
and color to one of the gray in the document color.
Then realign it 16 pixel from the left
and 50 pixel from the top here.
So the spaces we use are consistent
with the book section too.
Edit this rectangle to 300 width by 240 height.
Set the radius to 14 pixels.
Then we can give this card a shadow
by pressing the plus here.
It's good to change the shadow value
because the default shadow looks too hard.
And here we set the shadow opacity to 25%,
the X to zero, and Y to 10,
so that the shadow is appearing downwards like this.
And for the blur, we set it to 20.
Now the shadow looks soft and natural.
Then we can copy the section image from the source file
and choose the design for iPhone 10 and press command C.
Back to Sketch, select the card shape
and press shift command V to paste the image
on the top right corner of the card.
Select the image together with the card shape,
apply the masking to them.
Then resize the image to 240 height
and align to center of the card.
Name this group the Chapter Card
and align it properly.
So left is 16 pixel
and the top, we give it 16 pixel as well.
Next, copy the section title from the text file
and paste to the chapter card.
Use SF pro display, semi bold, and change font size
to 32 pixel.
Copy the description.
Use SF pro text regular,
because we're going to use 17 pixel for this description.
Then we put this to the bottom.
Resize and align the title and description
with 16 pixel margin around the card.
The chapter card is now completed
and since we're going to use this card multiple times
in the Design Plus Code iOS app,
we will need to convert it to a symbol.
But before that, let's arrange
and rename the card's elements so that it's easy
when we do overrides to the symbol.
For the title text layer, we'll rename it to Title.
And then the next text layer to Description.
Then select the chapter card group
and click create symbol from the toolbar
to convert to symbol.
Duplicate this symbol to the right by pressing
and holding the alt key and then drag to the right.
Refer to the text file
and overwrite the content accordingly.
For the image, choose the section iOS 11 design image
and drag it to the image under the overwrites.
Now you have another similar card but with the same design.
This section is able to let the user swipe left and right
to view more cards.
Reduce the bottom gap to 50 pixel.
Then group all these elements and rename it
to Chapter Section.
One last section to be done,
which is the people section and the footer.
Draw a background and apply a dark gradient
from the document gradients.
Create a card design with the same size and style
as the chapter card.
We will need the same shadows from the chapter card
and we can do this by double clicking the chapter card,
select the layer that has the shadows applied,
and right click and choose copy style.
Click return to instance to go back to the previous screen.
Then select a new card, right click, and choose paste style.
Now you have the same style as the chapter card.
We are going to change this card color to white.
Remember to rename all the elements that you've created
for better layers organization.
Now we're going to put some content into this card.
Copy the quote begin SVG from the source file
by pressing command C, then paste in the card
by pressing command shift V.
Give a 16 pixel gap the top and left.
Copy the text from the text file.
Align the quote next to the icon with a eight pixel gap.
For this quote, we are going to set it
to 20 pixel font size.
And keep in mind that if that font size is equal or more
than 20 pixel, we will need to use SF pro display.
Resize the font container and leave a 16 pixel gap
on the right.
Then copy and paste the quote and dot SVG
to the end of the quote.
You can press and hold Z key and drag an area
that you want to zoom in.
Draw a 24 pixel round shape by pressing O from the keyboard.
Leave 16 pixel on the left.
Then copy the name from the text file
and set it to black 16 pixel SF pro text regular.
For the job title, use SF pro text regular too,
but with a gray color.
Then you can copy the text from the text file.
Now we can insert the profile image into the round shape.
Copy and paste the image from the source file,
resize it to the size of the round shape,
and then select both of them and apply mask.
Group these layers and name it People.
Now the people card is done.
We can duplicate the same card
but apply different content to it.
Next is the reader stats.
Copy and paste the text from the text file.
Set it to 30 pixels with SF pro display semi bold.
And change the color to white.
Align it to the center.
For this text, we're gonna set it to 15 pixel
with SF pro text regular.
Press five on the keyboard to set the opacity to 50%.
With this, the hierarchy is clearer.
And for the last part, we have the logos
from the different companies.
Copy the three logos from the source file
and paste it in the artboard.
First, align the Apple logo to the middle.
Then the Google and Stripe logo will have a 32 pixel margin
on the left and right.
Adjust the Google logo lower so that they all look balanced.
Group them and give it a name.
Now, make sure that the gap below is 50 pixel.
Then set its opacity to 50%.
There is some extra space in the artboard.
Select the artboard and go to inspector
to do some math in the height field.
This is extremely helpful when designing.
Finally, the home screen is done.
Now you can use the tips and techniques
that you have learned in this tutorial
to start designing your own app.