Sketch App Tutorial – Build a music app landing page in Sketch

Hey, I’m Hunter from Skillthrive and in
this tutorial you’ll build a music app landing page in Sketch. In lesson 1,
you’ll start by joining two shape layers together to create a curved background
section. Then you’ll add a gradient to the background, a title, subtitle, and
navigation. Next, you’ll learn how to create a button with transparent text by
turning the text layer into an outline and using the difference boolean
operation. Last, you’ll finish by adding a couple accent circles to the background. Welcome to the first lesson on how to
create a mobile app landing page in Sketch. Now, if you’re a member on Skillthrive be sure to download the course files so you can follow along with me.
If you’re not a member, no worries, it’s absolutely free to join–there’s a link
in the description. It will take you right to this lesson’s course files where
you can register. The first thing I’m going to do is create an artboard, so
click “A” on your keyboard and come over to this drop-down under responsive web
and select desktop HD. We have this desktop HD layout out of the box.
Let’s go ahead and rename this artboard to something that we will realize
what it is. Let’s do “mobile app landing page.” What we want to do
first is create that background section that has a little bit of a curvature.
To do that, we’re actually going to create a path and a shape and then
combine those two things together. The first thing we want to do is create a
rectangle, so if we hit “R” on the keyboard we’ll access the rectangle tool.
We can go ahead and create a rectangle here. I’m going do about
650 pixels–something like that. I’m going to turn off the border and now
we can come in and select our our pen tool, which is “V.” We can
create a path here. I’m going to select something about right here.
Actually, before I do that I want to create a line as a reference so I can
nail that curvature. So hit “L” to create a line and come up to the top and just
drag it down while holding shift so it’s perfectly straight.
Then, make sure it’s in the center of your artboard and now we can come into
our pen tool and create that curve. Click. It’s OK if it’s a
little bit outside, but try to get it somewhere around here, where it’s close
to this edge. We’re going to click and come over, hold shift, and click. Now, this
time when you click make sure you hold it so we can drag out that corner to make the
curve. We’re going to click and then drag it out–you see now we have this
right point and this left point over here. This right point is where I’m
dragging the mouse. In order to nail that curvature, what we can do is make
sure that this left point is on that line that we just created. Depending on
how high or low it is depends on how big the curve is. While I’m holding my
mouse we want to zoom out here and on this point I’m going to make sure it’s
on that center reference point. Now you can see if it’s down low the curve is
really big and if it’s up higher the curve is a lot less. So, I
don’t want anything super crazy here so I think something in this ballpark is
good. I’m going to line it up and just release my mouse and then hit enter.
Then I can select–go ahead and delete this line–the path and rectangle and I can do union. Now, you see that we have this nice shape
that we’re going for. What we want to do is actually create the
gradient that we wanted here. Come over to this fill when you have this new
combine shape selected and come over to the second box here, which is our linear
gradient. We can set our colors. The first color that I want to to set
here is this color here, which is FF5E62. Then I’m going to select another
color. At this point I’m going to set to FF9966. I’m going to drag this
one out a little bit–something like this. Then drag this orange one
a little off as well–maybe not as much though. So play with this until you
get in a spot that you like, and use your own colors too if you want. What I’m going do now is make sure I save this gradient. In this gradient,
while I’m still in it, you can click on this plus here to save it to our
palettes down here. If I click on this you’ll see that I have this added.
You’ll also see the two next to it are similar because I’ve been
working on this project, but we can remove those. Make sure that we’re
selecting the one from this video. Let’s go ahead and create the
title, the subtext, the button, the nav, and the logo–sounds like a lot, but it will
be really fast. Go ahead and hit our “T” on our keyboard to get the text tool and
just click here somewhere in your artboard. I’m actually going to use
Signika and Open Sans, which are both free fonts from Google, so those are easily
accessible to anyone. With Signika selected, I’m
actually going to set the weight to light and I want to set the size to 54
and the line height to 67. Then I want to select this, come in to color, and set the
color here to FA all across. Hit enter and we’ll go ahead and add this to the
palette as well because I want to use that several times here in this course. Then I’m just going to type something for a header, “You’ve never
heard your music like this.” Let’s go ahead and create this sub text.
Don’t worry about where this is right now–we’ll position it to a point that we
like. Again, I’m going to set this one to Open Sans. I’m going to set
this to regular, set the size to 22, and the line height to 29. Then I’m just going to pick up some lorem
ipsum, which is just some filler text. I’m just going to paste this here
and then I’m going to click on this and drag this point over–make sure this edge
is lined up to this title first and then drag it over until it’s telling me that
it’s the same width. That’s what I want. The next thing we can do is, while we’re still working with text, we can
go and create the nav. Again, let’s hit “T” on our keyboard. I’m going to click and
I’m actually going to change this one to Signika and I’m going to set it to
semi bold. I want to turn the height, or excuse me, the size down to 17.
Then I’m going to type in some stuff here. Let’s do “about” and then
hit enter, excuse me, actually just click out. Then I’m
going to zoom in so I can actually see what I’m doing. Instead of just
hitting command + and zooming in, I hit command+2 and I’ll zoom in right to
this. It’s a little too much, but you get the idea. Then I can hold
option and drag this out. I’m going to do about four times. I have that,
so let’s do some you know generic names here. “Team.” We can do “features,” and name this
one “download.” Now we can make these about 20 pixels apart from each other. Let’s go ahead now and group
these together. I want to select these layers, command “G,” and then just call this
“nav.” Then pull this on top, call this one title, call this one subtext, call
this combined layer background 1. Now that we got that
set up, what we want to do is create the button. To do that we can come
into our rounded rectangle, which you can get if you hit “U” on the keyboard.
We’re going to create a shape here. I’m going to turn off the border, come
into our fill, and pick that light palette that we have here. Let’s set the the
width to like 170 and let’s set the height to 40. Then I’m going to double
click on this shape so I get this look here, which is where I can
actually edit the roundness of these corners. I’m going to click and drag–
so I select all four of these corners– and over here on this slider I’m just
going to drag this all the way over to the right so they’re perfectly rounded.
Alright, now what I want to do is again with my text tool–so T–I’m going to
click here and with the Signika semi bold still selected I’m going to
type in all caps, “DOWNLOAD.” We’re going to select this so you can see it.
Change the color, it doesn’t matter what color you change it to and I’ll explain
that in a second. Then I’m going to center this, move
this down–it looks pretty good in my opinion. Alright, so with this download
selected, what we can do is we can right click and say convert to outline.
What that is going to do is convert this text layer to a shape layer. If we do that
and we come over here and expand this, you’ll see that we have all these
different paths. What this is going to let us do is actually use this path to
create a difference over here. If we select both of these and click on
difference, it’s going to take that path and get rid of it so you can see right
through it to this background, which is this
really nice effect. That way we’re not changing the color to try to match this,
we’re actually getting the color from the background. Alright, so that looks
good. Let’s go ahead and name this “button.” Let’s
go ahead and space these out. I see this one’s about 29 pixels from that one, so
let’s move it up maybe 4, to 25. This one’s 30–
let’s move it up one pixel. Alright, I think it looks good and then we can
select these layers, command G, and just call this like “title sub button.” Alright, so there’s a couple more things we want to do. I want to create
like a simple logo here. Now, I’m not going to spend a lot of time creating a
super awesome logo, but we can create one just as a quick effect. Let’s go ahead
and come into our shape, and then triangle. I’m going to just create a
triangle here–something like this. I’m going to command+2 to get a little closer. I’m
going to turn off the border. Fill I’m going set to the FA. I’m going to take
the rotate and hit 90. Then I’m going option and drag out. Then I’m going
to click on this flip, and then just hold shift and make that a lot smaller.
Alright, so let’s go ahead and select these, double click, select the corners. I’m going to turn this up one pixel. Do the same on this one–
double click, select, and then just set the corners as one. Let me see–if we zoom
out here we have this really simple logo– it gets the point across.
Let’s go ahead and select these, and command G, and just call this logo.
With this grouping selected, I’m going to command “K.” I’m going to make it a little
bigger I think, so let’s do 130 percent. Let’s zoom out…yeah. maybe not that big. Let’s just do, command “K,” 115. I think that looks nice. This is about 42 pixels, so let’s move that up by 2 pixels.
This one’s 30, but it’s looking like it’s in the center of this, so move that down
to 60. 60 pixels from the left, and
then it is 30 from the top. I made this center of this triangle in the center of this nav. Alright, so that gets the
point across. As far as the logo, you see nothing crazy, but we created a quick
logo. Drop in any logo you want, but we get the idea across. Now what we want to
do is create some of those little opaque circles around here. That’s
really easy, all we need to do is get the oval tool and hold shift to make a
perfect circle. Now I’m going to go ahead and just select the colors here that we
want. Now this oval is hanging outside this, so what we need to need to
do is make this background a mask for all of this stuff. What we can do is just
select all this stuff, command G, and then do “section one.” Then select the
background layer and then do mask. Now we have this nice mask. We can
expand this and move this oval down to the bottom. I can select it and move
it over here. I’m going to drop the opacity down quite a bit–something like twelve
percent. I’ll move it out a little bit. Then hold option and make another
one. Resize it–so something pretty small. Make
this one a little bigger. Make this one something like that.
Then I can create a couple over here as well, so drag this one out. I can make
this one nice and big. Use my arrows to move it around and then
do one more a little bigger like right here. I’m not thinking too
much about where I want to place these. Ickind of want them feel
like they’re randomly placed. I might move this navbar a little bit to
the left maybe just a couple pixels. It’s about 220 from that edge. Alright, so
that’s everything we wanted to cover in this lesson. In the next lesson, what
we’re going to do is start to build our mobile UI, which is going to sit over
here in this empty space. With that said, ‘ll see you in the next video! In lesson two, you’ll design the music app
interface. I’ll cover how to create a circular progress bar and how to use an
alpha mask for a nice blending effect. Welcome to the second lesson on how to
build this mobile app landing page in Sketch. In this lesson we want to focus
on creating the mobile UI, which is going to live over here to the right of this text. The first thing I’m going to do is just create a rounded rectangle so if we
hit “U” on our keyboard we’ll get the rounded rectangle tool.
I’m going to just drag it out and resize it over here. I’m going to set the width to
340 and the height to 600 and then I’m going to turn off the border and then
change the fill to FAFAFA that we saved. Now that I can see this background
color, our artboard needs to be changed. We can select that, we can
click here on our background and change that to FAFAFA as well. Now those two colors are matching. Let’s go back into this and
the first thing I want to do is drag in a status bar here for our phone UI. In the course files I included a asset here that you can use, which is the
status bar. If we open this Sketch file, you’ll see that we have this and
I’m going to bring in this dark one. I’m going to command C to copy that and
paste it in. Obviously it’s way too big and you can see here that the width
of this is 340. If we come in on this and command K we can set the width to
340 and then we can reposition this where we want. I’m going to move this
up. Alright, so now that we have that,
let’s rename this to “status bar.” Call this “mobile background.” Now
we can move on to the next thing, which is going to be creating the album art.
Let’s go ahead and create an oval, or a circle. So “O” for oval and then we can
click and drag and hold shift to make a perfect circle. I’m going to set my
size here to 135 and then turn off the border and under fill’ I’m going to come
over to this icon here and choose an image. In the assets I included a
couple album covers, so here’s the one for the Red Hot Chili Peppers. Instead of tile,
we set it to fill and it will fill perfectly. Alright, and instead of adding
a shadow to this I’m actually going to duplicate this and then do a Gaussian
blur. Let’s go ahead and do album 1, command C, command V. On this
bottom layer, I’m going to do album 1 blur so we know this is the blur.
Then I’m going to come over to Gaussian blur, turn that on and just drop it down
to like 5 pixels. It gives it a blur but it’s the blur from the actual colors
of the album–I think it’s a little bit of a nicer look. We can go ahead
and group those–so album 1. Now what we’re going to do is actually
create a ring around it, which is going to show the progress of the
song or how much of the song has played. To do that, we can come into–I’m
actually going to name this one “album cover”– come into one of the albums here.
Let’s do the one on the top. Command C, command V. I’m going to drag this out of
this grouping and I’m just going to name this one “album one ring one.” I’m going to stretch this out and actually I’m going to turn on the border, off
the fill. I’m going to stretch this out a little bigger. It might be a little
too big. Alright, I think it looks pretty good now. I’m going to come into the
the color for the border and I’m just going to pick a little bit of a
lighter gray, something “EA” all across works well. Now I want to
duplicate this, so command C, command V on this layer. I’m going to name this “progress.” There we go. This is where we’re going
to add some color to this progress bar. This is a tip that I picked up
from some website awhile back, and it’s one that I still use all the time
because it works really well. What we can do here is we can come into the
color first and we can set the gradient to this one that we have saved. Then we
can come in and increase the thickness, maybe to two. Then come over to this
icon, or this gear icon, we can round the corners and in the gap and the dash is
where the magic is going to happen. What we want to do is create
this gap number to be – we want to derive this number from some math. What we’re
going to do is we’re going to take the width of this, so 184, and then multiply
by PI or 3.14. Go ahead and get a calculator out. The width is 184,
then multiply that by 3.14–so 577.76. On this, you want to do a number
anywhere from 1 to 577.76 works. You’ll see if we just do a
number like 250 that we get this amount filled. We can do something like 300–we
get that. What we can do if we want this to start more towards the center is
we can come up to rotate and just rotate that a little bit. Then I might
decrease this down to 280 and then rotate it again–something like that.
Then I can actually come in and make it a little thicker. I’m going to zoom
out. I think three looks really nice. That’s just a quick tip
on how to fill part of your circle. It’s really useful–I use it all the time
and I think it’s really great. I hope you find that useful if you didn’t
know that. Next, I want to create kind of like a time here. Even though we
have this circle, they might want to know where they’re at in the song.
I’m going to hit “T,” click, and go ahead and change this color first. I’m
gonna do “2D” all the way across and then go ahead and save that color here. On
this one, I’m going to do Signika. I’m going to do light for weight and I’m
going to make it a lot smaller–let’s do 15. Then type in any time here
that makes sense for a song like this. 136. I’m going to move this about 10 pixels
from this circle. Alright, so now we need the title of the song and the artist.
Let’s go ahead and again hit “T” and we can set the album, or excuse me, the title.
Let’s do Signika, but let’s do regular and let’s increase the size to
26. Let’s type in the name of a song on this album, so “Give it Away,” which is a
big one. Then we can hit “T” again, click, and on this one I’m going to do Signika,
cup but do light. Set the size to 20 and then the name of the band, which is
the Red Hot Chili Peppers. Then give these a nice space, maybe five pixels
away. Go ahead and group these. I’ll do “song-artist.” I’ll do about 15 pixels away from
this time. Alright, now before we move on to doing the play bar, let’s
go ahead and focus on creating album art to the right and the
left–show that there’s more songs in the queue, or in the playlist.
Let’s come over to our album one in our album covers, command C, command V and
then just drag this out. Let’s come over to this album and then drag it over. Actually, drag both of these at the
same time. What we want to do is change–like we did
earlier as far as making this background the mask for everything–we want to do
the same for this because now this is hanging outside of this mobile UI. What we
can do is just go ahead and group this. Then go ahead and just do masks
with all that grouping selected. Alright, there we go.
Now we can come back into this group, which will be the album covers.
This is album one. I’m going to drag this here, status bar on the top, drive this one back here. Drag this one
above. Call this one “info.” Now that we’re back here, let’s go ahead
and just group these and do “album cover left.” I’m going to do command K. I’m going to
make it a little smaller, so scale it down to like 90. I think it looks
good. It’s in the center, so I want the center of this album to be on the
edge of this. I’m going to hold option and drag this out as well and go
ahead and just do the same thing here. Let’s see… so album left, check this one and drag it out. Command C, Command V. Then
we can group these so this will be “album cover right.” Make sure that’s okay. We
got out left and we got right. Let’s go ahead and rename this to “album cover center.”
That’s a little bit more organized. Now what we want to do
is we want to make these a little harder to see. What we’re going to
do is, first we actually want to change the album art. Let’s go
ahead and change the the fill here. I have another album–let’s do this one. On
the blur, I want to change this as well. Come into the right album, and we need to add a Gaussian blur on this. I think it
was set to 5. Then we need to change the fill–let’s do a Green Day album.
Now that we have that, what we can do is we can create a shape layer.
Hit “R” and we’re going to use this to mask out part of–we’re going to have it
taper off. Llet’s just draw a rectangle here and we’ll turn off the border and then come into fill and then
this gradient right here. I’m going to set this in the center like this. It doesn’t matter what color it is because we’re going to turn this into an
alpha mask, so it’s not going to use the information of the color, it’s going to
use the information of what the alpha or the opacity is. To go ahead and make
it easier for you to see, I’m going to set both of these points to pure black.
I’m going to set the one in the center by double clicking and I’m going to change
this one to white and I’m going to set this one to an opacity of zero. Set this one
to an opacity of zero. I want it to be one hundred in the center. So,
this one is at a hundred. What we can do now is we can group these two.
Let’s go ahead and group these two right and left ones together so we call these
“sub albums.” We can use this rectangle as a alpha mask for this, so select this,
click mask. Under masks, we come to layer, mask,
mask mode, and you’ll see that we have alpha mask. If you had outline mask selected, you’re going to get this weird look, which is not what we
want. It is important to come in and change this to alpha mask if it’s not
already on alpha mask. Now you can see how we get that really cool effect of it
tapering off to white. I think that it looks really nice.
There are a couple more things we want to do here. One is to do the play buttons
towards the bottom. Again, I included those into the files. Let’s
go ahead and drag these in here and I’m going to set the play button to about 35
pixels. Let’s go ahead and do that. We can set these buttons to 27
wide. We need to command C, command V. Then I’m going to drag
this over and I want to hit flip, so now it’s a next button.
Let’s move these about 15 pixels apart from each other. We obviously need to change the color because the pink looks awful, so
select all of these, come over to fill, and select the the brand color here and then just drop the opacity. Actually, that’s
not going to work. What we can do is drop the opacity here, not on the actual
color. The opacity of the layer, just drop it down so it looks good.
We can go ahead and select these and group them–command G. Do “play buttons.”
We can move this under the mobile as well. We can go ahead and set this in
a spot that looks good, so I might move this down too, just the title. Let’s do
25…let’s do 50. I’m going to add a
nice shadow here so you can see the separation between the the phone in this
white background. Come into the mask here and just rename this to “mobile
background.” We want to add a shadow, so let’s click here on shadow, come
into color, and I’m going to first come into this background layer.
I can see what color we have for this orange. I’m going to copy this hex code
and then come back into this one. I’m just clicking until it’s selected, coming
into our shadow here, and enter in this hex code–so paste it. I’m
going to turn up the blur, and then I’m going to turn down the opacity quite a
bit. Let’s do 10 because I want it to be really subtle. Then, maybe increase
the Y and then maybe increase the blur a little bit, so something super subtle.
Just enough to separate this from the background here. Okay, so one more thing
in this lesson and that’s just create this really quick menu bar up here. Go ahead and with our rounded rectangle tool, “U” on the keyboard,
I’m going to create this here. I want this to be the same color as this, so I
ended up dropping these down to an opacity of 14%. I’m going to set this
to the brand color and then drop it down to 14. Then I’m going to option, drag down.
I’m going to make this one a little less long. Go ahead and group this. Move it under our mobile, and let’s see
here. 20 from the side, 40 from the top. I think it looks good. Let’s zoom out…
Alright, now that I saw that this has this shadow, we need to add the shadow as
well to this background. Let’s go back into this mask, or this back header
background, and let’s come into our shadow and paste that color here. We
should still have this in our clipboard. We’ll need to increase the blur as well,
maybe the Y value, and then drop the opacity down here too, to like 12. Let’s see…
Increase it just a little bit, maybe 20. Drop the Y back down again-super
subtle. You guys might not even be able to see it in the video, but this
gives it a nice separation to the background, and a little bit more
depth. Alright, just for good measure, let’s make sure that the edge of this is
lined up to the edge of the phone. Select our nav grouping and we want this
to be 40 from the top and it’s in line to this one–so a quick check. If we zoom
in, we can come over here and create a guide and we can just move this
over so that “D” is right there. I’m going to right-click and remove all vertical
guides. That is it for the mobile UI! In the next lesson, what we’re going to
do is start building the final section down here. With that said, I’ll see
you in the next one! In lesson three, you’ll finish with the last
landing page section, adding a title, designing quote cards, and placing accent
circles. Let’s get started. welcome to the final lesson on how to create this
mobile app landing page in Sketch. Before we start working on this bottom
section, let’s go ahead and make this artboard a little taller. To do that
we can select the artboard. You can see here that we have a height. Let’s go
ahead and increase this height to something like 1,280. Let’s start from
here. The first thing I’m going to do is go ahead and create a title here, kind
of explaining what this section is about. I’m going to hit “T” on my keyboard to get
the text tool. I’m going to type something here, so “5 million users have
made the switch.” I’m going to select this and set it to what this is here.
That’s Signika light and then at the size of 54. I want to make sure
that the 2D is selected for the color. Then we can line this up to 287–
let’s see here–the same width apart from this. I’m going to make a line so we can
make sure that’s in line–there we go. I’m going to move this down just a
little bit to about 90 pixels from the bottom of this app. Now what
I’m going to do is I’m going to create some quote cards. I’m going to make this
about 380 by 225. I’m going to hit “U” and make a rounded rectangle. Let’s set it to 380 by 225–
there we go. We can start working on this, so let’s go ahead and set the
border off and turn on the fill to this FA. Let’s go ahead and add a shadow
to this so we can actually see this. We’re going to add a shadow–let’s
actually keep it at this color of what our text is, so the 2D across. We
can add a little bit more blur and maybe move it down just a little bit. I’m going to
come in through the color and then drop down the opacity quite a bit, so let’s do
15. We can call this “quote card background”– there we go. Let’s go
ahead and actually–for the quote size part we’re going to do Open Sans at about
15 for the size. Let’s go ahead a hit “T.” We again can just copy this for
some texts–it can be open sans. Let’s go ahead and set this to Open Sans
regular and set the size to 15. We need to just come over here and set the
boundary box here, and make sure we have the alignment to left. Something like
that looks good for now. Let’s go ahead and create an oval, and this is
going to be the profile picture. Let’s go ahead and make this about–I don’t know–
about 40 pixels. Turn off the border, come into our fill,
and I included some profile pictures that you guys can use. So, image one, set
that to fill. Then just add a name here for this person. We’ll do
Signika semi bold. Again, “T,” and let’s make up a name here.
All-caps, “John Paul.” Select this, and we’ll will do Signika semi bold and keep it at
15. I don’t want it right in the center of this, but a little down–
not to the bottom of this profile pic. About five pixels I think looks
good. Let’s go ahead and group this we, and we can call this “profile-name.” Just name this one
“quote.” You got this one about 25 pixels. I’m going to group this and call it “quote section.” Go ahead and center it, 50 from the top and the bottom
and then 20 from the sides. I might go ahead and make this a little less
tall–let’s do 200. Then center this again. I think it looks a little
better, not as much white space. Let’s go ahead and group these together
and we can just do “card one.” I’m going to command C, command V twice so we have
three cards. Card three actually needs to be
further down. Card two needs to be here and card three can be a
little further down. Then I’m going to keep the quote the same
because it’s really just for filler. Then I’m going to change this though. I’m
going to come into the profile, to this, and change the image really quick. Change the
name to “Sarah Parker,” and move this so it’s five pixels from there. You can
change this one as well–you can do “Jack Miller.” That takes care of
that section. What I want to do with this card is do something similiar like
we did up here with the album covers. I want it to kind of fade off so it looks like it fades off into the edge of this. Kind of like there there’s more cards for you to scroll. Let’s go ahead and do
something similar to what we did before. Let’s go ahead and create a shape–a rectangle specifically. Move this over and turn off the border. I’m going to come out of fill and come over to our linear gradient set this one
here. Move this one over. At this point, I want this to be at alpha zero
and at that this one to be at alpha 100. Then what we can do
is come over to card three and select this, and then mask. You can see
it’s already applied as an alpha mask. Again, if this is not an alpha mask
it will look like this, which is the outline mask. You don’t want that, so if
that’s what yours looks like make sure you head to layer,
mask, mask mode, and alpha mask. Then if you want to change where
it’s actually fading out, you can always come back into the mask, and then to the
fill, and adjust these gradients. You can see if we move this to the left
it gets white sooner. I think that’s a good spot for mine. Now there’s really one more thing I wanted to do and that was
to carry over some of these circles that we created up here,
but have these just be the outlines around in this area to fill some
of this white space. Let’s go ahead and create a circle. We hit “O” for our
oval tool, hold shift, and make a circle. We can turn off fill this time and come
into color gradient and then come over to this gradient that we saved. Then
we can move these two spots that we want–so one maybe over here. Llet’s go ahead and group
these cards together, so command G on these. Let’s do “quote cards.” We’ll do this
on the circles and just do “accent circles.” Let’s go to name this “title
section two.” Let’s see how far these cards are from the title. I think
if I look at this I’m going to get rid of this right now–remove this vertical
guide. I think it could come up a little bit, so let’s just do a couple
pixels like that. So, I did about 20 pixels up from that. Let’s actually
just go ahead and move both of these quote cards and title section–let’s move
both of them up maybe like 10 pixels. Then maybe back the quote cards
down ten–there we go. You can see it’s 15. That’s looking pretty
good. I think I just want to do a couple more,
you know, housekeeping things as far as the alignment. Let’s make sure that
our titles here on the left are aligned. Let’s go ahead and create a point. You can see that the
card is left aligned–this alignment was kind of hiding this shadow, which was
making it hard to see. That’s looking good. :et’s make sure this is
aligned to the edge of that–it is. Zoom out. I think it looks like this
could come in a little bit to the left. Let’s select this mobile UI
and the nav and then move it over about ten pixels. Alright, I moved it over
20. I might move this down just a
little bit. Alright, it’s looking good! I think we are finished. Congrats on
finishing this mobile app landing page in Sketch. If you liked this video, be
sure to give it a thumbs up and subscribe. And, don’t forget you can
become a free member on Skillthrive if you want to download these course files–
the link is in the description. Again, I’m hunter from Skillthrive and I’ll see
you in the next one!


  • abdou ett

    Great work! Thanks

  • The Penguin Entrepreneur

    Thank you for your great work, would you kindly create a tutorial for IOS AP UX design? please ? Thank you

  • Carlos Quinones

    Thank you for the video skillthrive, I would love to see more videos like this, specially if you creating User Interfaces using Sketch app.

  • Stefan Ladefoged


  • Dask Hux

    Hi, great work. Was wondering if you would be willing to demonstrate a tutorial on animating a Sketch prototype in After Effects.
    Either a web site or a mobile app would do. Thanks.

  • Dask Hux

    Wondering if there was a reason you have 'show pixels' on while designing?  I prefer my text and vectors to look crisp while creating personally. Do you like your type to be pixelated? Not being a smart ass, seriously wondering.

    FYI for those who may have same issue control + p will toggle it.

  • Lena Lengner

    Great tutorial, thanks for that! Btw, the program actually calculates for you, which is awesome! So just type what ever you need to calculate into the field – no need for a separate calculator 🙂
    I am definitely interested in more Sketch App tutorials from you 🙂

  • Алиса Шевела

    Thank you, I finished my third tutorial with your channel.
    Super understandable tutorials, and great visual design!)

  • Patrick Kornetzke

    Another way to way to create the background shape would be to use an ellipse instead of a path. This guarantees symmetry and is also much easier to work with—just pull out from center using "alt-shift". Either keep it editable via "union" or merge the paths via "layer > combine > flatten". Cheers! P.S. Nice album choice 😉

  • Irina Mikhina

    Hi! How to install Signika (or any other type style) in Sketch?

  • Dael Diadem

    Thank you for including which key u're using as well! The tutorial have a lot of work put into it so I wholeheartedly thank you for ur efforts.

  • Александр Дмитренко

    Cool. For the first time I just copied the actions. For the 2d time I tried to do it just looking on the picture aaand it was harder than I supposed.
    I'll practise until I can do the same pages just looking at the picture.
    Thanks for tutorials.

  • Lolly T

    Hi there. I was wondering how to access the Signika font on Sketch. I installed it into my computer and then I restarted Sketch however it didn't appear. Is there something else that i can do? Thank you


    Amazing work, man. From Russia with love!

  • Ioannnify

    Nice!, Please make more!!!

  • The Blender Academy

    Thank you!

  • Alistair Burch

    Another, simpler way to create the background shape is to edit a rectangle and add another vertex (?) at the bottom centre, then use bezier curves to create the curve.


    very helpful

  • Angelo Lisboa

    Is this automatically mobile optimized?


Leave a Reply

Your email address will not be published. Required fields are marked *