Mobile savings app design in Sketch – Sketch App Tutorial


Hey, I’m Hunter from Skillthrive and in
this tutorial you’ll design this mobile savings app user interface in Sketch. In
part 1, you’ll create the first section of the mobile app user interface by
creating a blurred image section with a gradient overlay. Then you’ll add the
section title and an easy menu icon to finish. Hey, I’m Hunter from Skillthrive and
welcome to the first lesson in this Sketch app tutorial. If you remember on
Skillthrive, be sure to download all the assets for this course. If you’re not
a member, no worries, it’s absolutely free to join! There’s a link in the
description that will take you to a registration page where you can join.
Let’s go ahead and get started and jump into Sketch. The first thing I’m
going to do is create an artboard, so “A” on the keyboard. I’m going to drag out and
create an artboard. Set the width to 414 and I want to set the height to 953. Then
click enter. Then click on this here to rename the artboard. I’m going to
name this something like “Saving App Screen 1.” Then I’m going to create the first section here, which is going to be used to mask out the image of New
York City. So, “R” on the keyboard to bring up the rectangle tool. I’m going to
draw a rectangle here at about 400 pixels high…there we go. Then turn
off the border. I’m going to drag in this New York City picture that I included in
the course files. Position it somewhere like this – I might make it a little smaller. Then I’m going to select this rectangle and this picture
layer. I’m wanting to mask this out. I’m going to come and expand this, come
back into my image, and add a gaussian blur. I’m going to set this to 3
pixels, so something really subtle. I’m going to come back into this as well
and actually add a linear gradient fill. When I click on fill, I can come over to
this linear gradient and I’m going to add another point here . Come to all three of these points and set a hex code value so
that hex code is going to be 000311. Then we’ll go ahead and copy that, command C, hit enter, and then want to set this value to 0. Come into this point,
paste that hex code, set this value to 30. Then on this one, I’m going to paste it
and then keep the value at 100, I’m going to zoom out. I’m going to bring this zero
point all the way to the top of this image. I’m going to bring this one down, which is the 30, and on this one I want it to be darker about right here. I
want it to be that pure color, so something like that looks good. The next thing I’m going to do is actually just add the title here. So, “T” to bring up
the text tool. I’m going to click, and the text that I’m using is the Montserrat,
which is a free Google font that I’ll include as well in the course files if
you don’t already have it. For this title, what I’m going to do is use the
Ultra Light. I’m going to have the color set to a little bit of an off-white here. The size to 41 and the character to 1.4. Then go ahead and type in what
we want to here, so “New York Trip.” Then I want this to be about 50 pixels
from the top, it’s about 30 for now. Then about 30 from the left…alright,
there we go. Now what we want to do is to go ahead
and create a shadow on this, Let’s go ahead and come into shadows
here and on the color I’m going to set an actual hex code here, which will be 7b7d8c. Then go ahead and save this color down
here in my color palette. I’m going to set this to a little bit of a lower value here, something like 30%. Then on the blur
I want to turn that to 5. Then I can actually add this to the color palette. Go ahead and delete this one because I don’t need to add that one. Alright, so there we
go, this adds a really subtle shadow here. The next thing I want to do is create
the menu icon at the top, so to do that I want to use the rounded rectangle tool. So, “U” on our keyboard to bring that tool up. I’m going to drag this out, I
want to turn off the border and on the fill. I’m going to pick this down here, which
is the “FA” all the way across. On the width here, on the larger one, I want it
to be set to 36 and I want the height to be set to 4. I can go ahead and duplicate that by holding alt and then dragging it down. Then set the width on this one to 27. I want to line these
up. There we go, 25. I would do about 5 pixels
from that one. Go ahead and select both of these and command G to group those.
I’m just going to name this “menu icon.” Then with that new grouping selected I’m
going to come into shadow and I’m going to just add this shadow here. Make sure
that on the blur it’s 5. That’s it for this first part of
this tutorial. In next one, what we’re going to do is focus on the actual
savings progress bar, which is going to sit here in the center of this section. I’ll go ahead and see you in that part of this tutorial. In part two, you’ll design the savings
progress bar with shapes and learn a handy trick using border gap and dash
properties. Then you’ll use the text tool to design a savings amount and wrap up
by creating a button with the rounded rectangle tool. The first thing we do
here is create a perfect circle, so hit “O” to bring of the oval tool. Click, hold,
shift, and drag to create a perfect circle. Come over to our width here. I’m
going to go ahead and set a predefined number here to 340. Place it somewhere in
the center, about right here looks good. Then I’m going to hit “R” to bring up
the rectangle tool. I’m using this to create a mask in order to show only part
of the circle that we want in order to create the progress bar. Let’s go
ahead and draw out a rectangle here and I’m going to do it a little bit past center. Center is about right here, and I’m going to go a little bit past that to about
a point right here. The part beneath this is the part that I’m thinking
about showing, so this part down here is going to go away. The first thing we want
to do is actually make sure we have the oval on top of this rectangle. Then select
both of these and then click mask. Now you can see that we have just a part of the circle that we want to see. We need to come into this mask and turn off
the fill and then come back into this oval and turn off the fill as well. Now
we can just see that we have this border. Then we come in to the border and set a
color here. The color I want to use is a really nice, bright green–here is
the hex code. I’m going to set a thickness to 8.5 and then want
to come over and click on this gear icon. If you’ve seen my last tutorial, this
process will feel very similar. The first I’m going to do is create
a rounded edge. Then I’m going to come into the gap here. This is a
number that I am actually getting from an equation, which is the diameter of the
circle multiplied by PI, or 3.14. I already did the math for you and that
number is is 1067.6. Then on dash I can enter a
number anywhere from 1 to the value of this gap in order to fill the border
more or less. A number like 720 is going to give me an a nice number here. Then in order to bring this over more to the left I can come into rotate
and move this over, so something like this I think looks good. Now we can duplicate this, so command C command V. On the bottom
layer I can come into the oval and I can pick a color here–this off-white that
we’ve been using. I can set this value to, let’s say something like
3.5. I can drop down the alpha to 30. Come into this gear icon and just go ahead
and delete these values. Now you can see that we get this nice, you know, kind
of shows us the rest of the way that we have until we hit our goal. Now let’s go ahead and create these circle points down here, which is
going to break up this graphic that we have here. To do that, I’m going to hit “O” again on my keyboard. I want to hold shift, drag this
out, and I’m going to actually set this to a predefined width of 12 pixels. I’m going
to turn off the fill and on the thickness here. I’m going to set
something like 3.5 and set the color here to this off-white that we’ve
been using. Then I want to click alt and then drag this out. I’m going to go ahead
and position this in a spot I think looks good, something like that looks
good, so that’s about 35 from the edge, 50 from the bottom. Move this over two,
move this over up two. Alright, so there we go. I’m going zoom out to see how those look. I think those look good. Let’s go ahead and
group these as well. Now what we can do is we can create the dollar amount
right here. So lets go ahead and hit “T” on our keyboard. The first thing we’re
going to do is create the actual dollar sign. I’m still using the same
typeface, but on this one I’m going to set a weight to extra light. I’m going to
set a size to 32, and then I’m going to type in a dollar sign here. Whoops, go
ahead and set that back to extra light and set that to 32. There we go. Then we
can type in a dollar sign so that’s its own layer. Go ahead and hit “T” again to
create a new one, which is going to represent the dollar amount. On this one
I’m going to use ultra light. I’m going to set the size to 71 and I’m going to
set the character here to 4. Then type in a number here like 435. Move this over then we’ll hit “T” again. This is going to represent the
cent amount. That’s going to be ultra light as well, but I’m going to drop the
size down to 31. Let’s go ahead and keep the character, actually let’s bump
up the character to 7.75 and then type in a number here like 65.
Then I’m going to place it a little bit off-center. I’m going to come up just
a little bit, something like that I think. Then maybe move both of these
over from the dollar sign. Maybe bring down the dollar sign just a little bit. Let’s zoom out, get an idea what that looks like. Alright, I think it looks pretty good. Let’s go ahead and group these
together. I’m holding shift, I select these, command G, and then I can just name
this something like “amount.” Then I can just move this whole grouping in the
center, something like 90 from the top of this is what I think it looks good. The next thing I’m going to do is add the contribute button. Let’s go ahead
now and zoom in and create the oval here, or the rounded button. To do that, I’m
going to use the rounded rectangle tool. So, “U” again, drag this out. Let’s go
ahead and for this set a button to 195 and set a height to
43. I’m going to turn off the fill, come in to the border, and select this
off-white. I’m going to increase the thickness to 2, then I’m going to double
click on this so we can edit the corners. Then I’m going to select outside of
this, hold, and then drag–that way I can select all four corners. Then go
ahead and just drag this all the way over so we get perfectly rounded
corners. Alright, I think that looks good. Then we can go ahead and add the
the text in here, which is going to say “contribute.” So “T” to bring up a text, click, and let’s go ahead and keep this one– actually change this one to the light.
I’m going to set a size here to 20 and I’m going to do the character at
something like 1.4. Then in all caps, I’m going to type in “contribute.” Go ahead and center this. Go ahead
and group these, command G. Get an idea of what the spacing looks like. Go ahead and center that. Alright, I think it looks good. There’s one more thing you
want to do in this section and that’s to add a couple values down here in order
to show, you know, this one is at zero dollars and this amount over here is the
goal amount. Again, “T” on our keyboard and I’m going to click. I want to make this a
lot smaller, probably something like 12. I’m going to go ahead and type in
something like zero and then like a dollar amount. Move this over just a little
bit, hold option to duplicate that, type in a value here like 600. I have to make
sure these are the same distance from the bottom–29,29. Those are centered to
about the edge of this. This one is the center to that. Alright, so that looks
good. That’s everything for this section. In the next one, we’re going to
focus on the next section, which is going to be our recent transactions. I’ll go
ahead and see you in that one. In part three, you’ll design the recent
transaction cards by using a combination of shapes and text layers. In the last
part of this tutorial what we’re going to do is create the recent transaction
section down here at the bottom of this app screen. The first I’m going to do
is create a rectangle. Let’s go ahead and create a rectangle here for this
section and go ahead and just fill this entire white space. Turn off the border
and on the fill I’m going to use that color that we used to create the
gradient from the first part of this tutorial, which is
this one here. Then we can go ahead and make sure that’s lined up. Let’s go
ahead and add a title here to this. Click and type in “recent transactions.”
I’m going to double-click and select this and I’m going to keep this at light,
but go ahead and increase this to a size of 22 and a character at 1.4 as well. Then we can center this, something like this. I think
30 from the top of this is nice for now. Then the next thing we want to do is
create the transaction boxed elements. To do that, I’m going to hit “R” on my
keyboard to bring up the rectangle tool. I’m going to click and drag this out and
I’m going to set a width here to 350 and a height to 80. I’m going to come into the fill and I’m
going to set the fill to this off-white, but drop the opacity down to 30%. On
the border, I’m going to set this to the off-white as well but I’m going to keep
that at a hundred percent. Then I’m going to come in and select this to round the corners just a little bit, not too much. Then I’m going to duplicate this
rectangle, so command C, command V and then I’m going to drag this over. On
this width, I’m going to set it to about 50 pixels. This is where we’re going
to put our date. On this one, on the fill, I’m going to make sure that this is
at 30% as well. Let’s go ahead now and create the
date month and the date day. To do that, I’m going to hit “T” to bring up the
text tool and I’m going to keep this at light, but drop down the size to 12 and
the character I’m going to drop down to 1. Then, in all caps, I’m going to
just type in a month here, so “Jan” for January. Go ahead and position this somewhere like this. Hit “T” again so I can type in
the date day. On this one, I want to do ultra light and I’m going to set the
size to 23 and the character to 1.4. Go ahead and type in a number here, so
14. Go ahead and position that about 5 pixels from the date. Go ahead and
select these three. I’m going to command G. Go ahead and name this
“date box” and then just do this as “date.” Now I can go ahead and up position
these in the center. Let’s go ahead and zoom out and see what that looks like. I
might move the date up just a little bit and then select this. Alright, I
think that looks good. Now what we can do is create some information
over here that the user can use as well. Again, “T” on a keyboard to bring up the
text tool. I’m going to use the weight this time at light and then I want to
just do size at 22 and the character I want to leave at 1.4. I’m going
to, in all caps, type in the word “saved.” It just kind of a gives the user
the idea that this transaction is actually saved towards their goal here
that they’re trying to achieve. Then I’m going to create something underneath
this, kind of information for the card that was used to process this payment.
I’m going to hit “T” again, click, and on this one I’m going to do extra light. On
the size I’m going to do something a little smaller, something like 15 pixels and
the character at 1.4 should be just fine. Then, in all caps, I’m going to do
“Visa” and then just some random numbers. Zoom in and position these a
little nicer. Go ahead and while these are selected, command G. Let’s go ahead
and do grouping here. The last one to do is create a number, so something
similar to what I did up here. I want the dollar sign to be of different sizes–give a little bit more variety to this part of the graphic. To do that, let’s go ahead and create the
dollar sign. So, “T” again on our keyboard and click. On this one, keep it at extra light, set the size here to a little bit smaller, something
like 17 pixels and the character at 1.4 should be fine. Let’s go ahead and just
do a dollar sign. That should be good for now. Then “T” again. Let’s go ahead and do the dollar amount. On this one, I do ultra
light and go ahead and bump this up to 38 and on the character I’m actually
going to bump this up as well to 2. Then type in a number here like 12. Then “T” again. I’m going to type in the cent amount and on this one I’m
going to do a weight of light. Let’s do a lot smaller, something like 17
and a character at 4. Then type in the amount, something like 75. Now we can go ahead and play around with the spacing here. I want to get an idea.
I’m going to come up here and look at this. so when I’m spacing this it’s somewhat similar. This is a little bit above center and
then a little bit above–something like that. Let’s go ahead and select these layers, command G, do something so we know what it is. Go ahead and space this out somewhere nice. I think this is
about 15 from that edge, so let’s try about 15 from this as well. I think
if we zoom out here I might actually move this in just a little bit. Slide it up about 11 pixels from the side. Let’s go ahead and actually move this card down. Go ahead and actually select all of
this, command G, and name this card one and just turn this off and on so we make sure we’re on
the right one. Now we can move this whole thing down. Let’s move it about to 30 as well. Now what I can do is I
can hold alt and drag these out and duplicate these. Space them out 30 pixels
from each other. Now what I’m going to do is come through and just change all
this information so it’s a little bit more varied. I’m going to speed through this so I’m not boring you guys with some of the, you
know, some of the same details, but you guys will get an idea of how I can make
some of the changes here to add a little more variety. You guys can see how I went through
and changed from those values just to add a little bit more variety to this
design. Looking at this from the zoomed out view, I want to come and
select all these cards. Before I select them, let’s make sure that we actually
rename these so we know which ones they are. Then once we are done renaming
these, we can come in and just space them out a little bit. Then once I space
out. well we’ll be done with this tutorial. Let’s go ahead and select these, move
these down just a little bit. Then I’m going to remove this
vertical guide and just one final look at this. Giving this one last
look I think it looks it looks good. The spacing looks nice on all the
elements here. Let’s go ahead and wrap this one up. Congrats on finishing this course! If you liked it, please give it a thumbs up and subscribe. If
you haven’t already, become a free member so you can download these course files,
including the sketch file that I built today. Again, I’m Hunter from Skillthrive
and I’ll see you in the next one.

5 comments

  • Skillthrive

    Download the final Sketch file and assets here so you can follow along: https://skillthrive.com/lesson/course-files-savings-app/

    Reply
  • Mike Scheurwater

    Is there a reason why you're not flipping the 'progressbar'? In my opinion it's easier flip it so that the dash-value works accordingly.

    Reply
  • Ahmed Arceo

    Subscribed.

    Reply
  • José Fernández

    Thanks

    Reply
  • jbquigley2010

    Hi Hunter, this is a great tutorial. I'm having trouble selecting the rounded edges icon at 8:35. Is that not available in the free version of Sketch? I have version 55.2 if that helps. Thank you

    Reply

Leave a Reply

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