In this Sketch app tutorial you will learn how to create a money management mobile UI design. Take a look at the final design to see what we’ll be working towards. Feel free to download the source files too.
What We’ll Learn
For starters, you will learn how to set up a custom artboard and how to simplify your workflow using rulers, guides, and smart guides. All these little features will help you work quicker (whilst having more fun) throughout this Sketch app tutorial.
Next, using simple shapes and paths, you will learn how to create the main sections of the Sketch UI design. Moving on, you will learn how to stylize these shapes and paths and how to create three line icons. Finally, you learn how to create the text content and add it to your mobile app design.
UI Sketch Kits on Envato Elements
For more inspiration on how to adjust or improve your final Sketch UI design you can download literally thousands of resources with your single Envato Elements subscription.
With all that said, let’s jump into the tutorial!
1. How to Set Up the Artboard
Open Sketch. Go to Insert > Artboard from the toolbar or menu (or press A). The Inspector will reveal a list of presets, but we’ll create a custom size artbaord. Click & drag inside your canvas to create a new artboard.
Make sure that your artboard stays active and focus on the Inspector to the right. Numerically set the Width to 828 and the Height to 1792. Once you’re done, hit Escape to deselect your artboard.
Step 2
Go to View › Canvas › Show Rulers (or press Control-R) to activate the Rulers. Right click on your rulers and go to Show All Guides as we’re about to add some new guides.
Focus on the vertical rulers and move your cursor inside it. Use a simple click to add a horizontal guide at 94 px. Guides can be moved and repositioned by clicking-and-dragging the guide inside the rulers. Keep focusing on the vertical rulers and use the same technique to add a second guide at 244 px and a third one at 274 px. Now that everything is prepared, you can start the work on this mobile app design.
2. How to Add the Top Bar to Your Sketch UI Design
Step 1
Go to Insert > Shape > Rectangle from the toolbar or menu (or press R). Focus on your artboard, create an 282 x 150 px shape and place it as shown in the following image. Use the horizontal guides to perfectly align your rectangle.
Make sure that it stays selected and go to the Inspector panel. Focus on the Style section and uncheck the Borders checkbox to disable the border applied to your rectangle.
Step 2
Go to Insert > Shape > Rectangle from the toolbar or menu (or press R). Create a 40 x 8 px shape, make sure that it stays selected and go to the Inspector panel
First, use the X and Y input fields to numerically position your shape. Set the X position to 55 and the Y position to 149. Drag the Radius slider to 4 and then move to the Style section. Disable the Border and then set the Fill color to #5E72EF.
Step 3
Select the rounded rectangle made in the previous step. Hold the Shift and the Option keys, click your selection and simply drag to create a copy. Drag the copy 8 px below the original shape as shown in the first image. The smart guides will help you with this. Repeat this technique and add a third rounded rectangle as shown in the second image.
Step 4
Select the grey rectangle, focus on the Style section from the Inspector panel and change the Fill color to white (#ffffff).
3. How to Add the Horizontal Scrolling Menu to Your Mobile UI Design
Step 1
Go to Insert > Shape > Rectangle from the toolbar or menu (or press R). Create an 180 x 72 px shape and place it exactly as shown in the following image. The smart guide will let you know when your selection is vertically centered to the artboard. Make sure that this new shape stays selected and focus on the Inspector panel.
Set the Radius to 10, disable the border and set the Fill color to #5E72EF.
Step 2
Select the shape made in the previous step and add a copy in the same place (Command-C > Command-Shift-V). Hold the Shift key, drag the copy to the left and leave a 20 px gap between the shapes.
Make sure that the copy added in this step is still selected, focus on the Styles section from the Inspector panel and lower the Opacity to 5%.
Step 3
Select the transparent rounded rectangle made in the previous step. Add a copy, drag it to the left and leave a 20 px gap between the copy and the original shape, as shown in the first image.
Add a new copy, drag it to the right and leave a 20 px gap between the copy and right edge of the blue rounded rectangle, as shown in the second image. Add one last copy, drag it to the right and leave a 20 px gap between the copy and the left shape, as shown in the third image.
4. How to Add the Chart to Your Sketch UI Design
Step 1
Go to Insert > Shape > Rectangle from the toolbar or menu (or press R). Create an 828 x 86 px shape and place it as shown in the following image. Make sure that it stays selected and focus on the Style section from the Inspector panel. Disable the Border and set the Fill color to #FFB800.
Step 2
Make sure that your yellow rectangle is still selected and go to Arrange > Make Grid. Enter the attributes shown in the following image and then click the Make Grid button. This will add six copies of your yellow rectangle in a perfect column without spacing between them.
Focus on the bottom left corner of the bottom yellow rectangle. Go to the vertical rulers and add a new guide at 1008.
Step 3
Select the top yellow rectangle and focus on the Style section from the Inspector panel. Change the Fill color to #5E72EF and lower the Opacity to 3%.
Step 4
Move down to the next yellow rectangle and select it. Focus on the Style section from the Inspector panel and change the Fill color to white.
Step 5
Re-select the top rectangle and hit Option-Command-C to copy the style attributes of your selection. Select the two rectangle highlighted in the second image and hit Option-Command-V to paste the style attributes.
Step 6
Select the remaining yellow rectangles, focus on the Style section from the Inspector panel and change the Fill color to white.
Step 7
Go to Insert > Shape > Rectangle from the toolbar or menu (or press R). Create an 138 x 516 px shape and place it as shown in the following image. Make sure that this new rectangle stays selected and go to Arrange > Make Grid. Enter the attributes shown in the following image and then click the Make Grid button.
Step 8
Go to Insert > Shape > Rectangle from the toolbar or menu (or press R). Create a 14 x 167 px shape, make sure that it stays selected and focus on the Inspector panel. Set the Radius to 7 and move to the Style section. Disable the Border and change the Fill color to #5E72EF.
Step 9
Select the shape made in the previous step and place it as shown in the first image. Use the smart guides to vertically center your selection to the leftmost grey rectangle, as shown below.
Duplicate this thin rounded rectangle (Command-C > Command -V). Select the copy, increase its height to about 234 px and center it to the next grey rectangle, as shown in the second image.
Add another copy of your thin rounded rectangle (Command-C > Command -V). Select it and increase the height to about 405 px. Change the Fill color to white and center your selection to the third grey rectangle, as shown in the third image.
Continue and add a thin rounded rectangle for each of the remaining grey rounded rectangles, as shown in the fourth image. Don’t forget to perfectly center these shapes.
Step 10
Select the third grey rectangle and use the bottom handle to stretch your shape to 602 px, as shown in the first image. Make sure that it stays selected and move to the Inspector panel. Set the Radius to 15 and change the Fill color to #5E72EF.
Step 11
Make sure that the rounded rectangle edited in the previous step is still selected and focus on the Style section from the Inspector panel.
Click the Shadows button to add subtle shadow for your shape. Change the color to #5E72EF and lower the Alpha to 20, enter 0 in the X box and 10 in the Y box, and then set the Blur to 20 and the Spread to 5. In the end, things should look like in the following image.
Step 12
Select all your grey rectangles and focus on the Style section from the Inspector panel.
Disable the Fill and enable the Border. Change the border color to #5E72EF and lower the Alpha to 10, make sure that the border is aligned to center and set the Width to 2.
Step 13
Keep focusing on the set of stroked rectangles edited in the previous step.
Select the leftmost rectangle and go to Layer > Path > Scissors. Use simple clicks to remove the top and bottom sides of your selected shape. By default, the remaining two paths are grouped. Simply click Ungroup button from the Toolbar to Ungroup those two paths.
Select the next rectangle, go to Layer > Path > Scissors and cut the top, left and bottom sides.
Select the next rectangle, go to Layer > Path > Scissors and cut the top, right and bottom sides.
Select the next rectangle, go to Layer > Path > Scissors and cut the top, right and bottom sides.
Select the final rectangle, go to Layer > Path > Scissors and cut the top and bottom sides. Ungroup the remaining two sides.
5. How to Add the Stats Buttons to Your Mobile UI Design
Step 1
Focus on the vertical rulers and add a new guide at 1068.
Go to Insert > Shape > Rectangle from the toolbar or menu (or press R). Create a 618 x 136 px shape and place it as shown in the following image. Make sure that it’s center and then focus on the Inspector panel. Set the Radius to 15, disable the border and change the Fill color to #5E72EF.
Step 2
Add a copy of your rounded rectangle (Command-C > Command-V), align it with the original shape and leave a 30 px gap between these two shapes.
Add a second copy of this shape (Command-C > Command-V), align it with the original shapes and leave a 30 px gap between this new copy and the first copy.
Step 3
Keep focusing on the three rounded rectangles. Select the middle one change its Fill color to #EF5E5E and then select the bottom one and change the Fill color to #5DD06C.
Zoom in on the bottom left side of your green rounded rectangle. Focus on the vertical rulers and add a new guide at 1536.
Step 4
Zoom in on the right side of your blue rounded rectangle. Focus on the horizontal rulers and add a new guide at 685.
Go to Insert > Shape > Rectangle from the toolbar or menu (or press R). Create a 60 px square and place it as shown in the following image. Hold down the Shift key while dragging to easily create a perfect square. Make sure that it stays selected and focus on the Style section from the Inspector panel. Disable the Border, change the Fill color to black (#000000) and lower its Opacity to 30%.
Step 5
Duplicate that black square (Commad-C > Command-V) and place the copy as shown in the first image. Add a second copy of this black square and place it as shown in the second image.
Step 6
Let’s return to the first black square. Go to Insert > Shape > Oval from the toolbar or menu (or press O).
Create a 56 px circle and place it as shown in the following image. Hold down the Shift key while dragging to easily create a perfect circle. Make sure that this new shape stays selected and focus on the Style section from the Inspector panel. Disable the Fill and focus on the Border. Change its color to white, make sure that the Center button is checked and set the Width to 4.
Focus on the vertical rulers and add a new guide that basically cuts your circle in half.
Step 7
Go to Insert > Vector from the toolbar or menu (or press R). Using three simple click add a path like the one shown in the following image. Make sure that it stays selected and focus on the Style section from the Inspector panel.
Disable the Fill and focus on the Border. Change the color to white and set the Width to 4, and then check the Round Cap and Round Joins buttons.
Step 8
Make sure that the path added in the previous step is still selected and go to Layer > Path > Rotate Copies. Drag that point handle and place it 2 px between the original path and the copy, as shown in the following image, and then hit Enter.
Step 9
Move down to the next black square. Go to Insert > Shape > Oval from the toolbar or menu (or press O).
Create a 56 x 48 px shape, fill it with yellow and place it as shown in the first image. Switch to the Rectangle (R), create 56 x 8 px shape, fill it with orange and place it as shown in the second image.
Select both shapes added in this step, click the Union button from your Toolbar, and then click the Flatten button.
Step 10
Make sure that the shape made in the previous step is still selected and focus on the Style section from the Inspector panel. Disable the Fill and focus on the Border. Change the color to white and set the Width to 4, and then check the Round Cap and Round Joins buttons.
Step 11
Keep focusing on the path in the previous step and go to Layer > Path > Scissors. Use simple clicks to remove the four sides highlighted in the first three images. In the end your path should look like in the fourth image. Once you’re done, copy the style of this path (Option-Command-C).
Step 12
Go to Insert > Shape > Oval from the toolbar or menu (or press O). Create a 56 x 48 px shape, place it as shown in the following image and simply paste the style (Option-Command-V).
Step 13
Make sure that the oval shape added in the previous step is still selected and go to Layer > Path > Scissors. Use a simple click to remove the side highlighted in the first image.
Step 14
Go to Insert > Vector from the toolbar or menu (or press V). Add a 20 px vertical path, place it as shown in the following image and paste the style (Option-Command-V).
Using the same tool, create the path shown in the second image. Select it and paste the style (Option-Command-V).
Step 15
Go to Insert > Text from the toolbar or menu (or press T). Click once on your artboard and focus on the Text section from the Inspector panel. Select the Baloo font, set the size to 30 and the color to white, and then simply type the dollar symbol ($). Place it as shown in the following image.
Step 16
Select all the shapes that make up your icon (highlighted in the first image) and copy them (Command-C). Move to the third black square, paste them (Command-V) and place them as shown in the second image.
Select only the two paths that make up the arrow and click the Rotate button from your Toolbar. Rotate your arrow 180 degrees as shown in the third image and then hit Enter.
Step 17
Select the three black squares and delete them.
6. How to Add the Categories Buttons to Your Sketch UI Design
Step 1
Go to Insert > Shape > Rectangle from the toolbar or menu (or press R). Create a 132 px square and place it as shown in the following image. Make sure that it stays selected and focus on the Inspector panel.
Set the Radius to 15 and then go to the Style section. Disable the Border, change the Fill color to #5E72EF and lower its Opacity to 70%.
Focus on the vertical rulers and add a new guide at 1566.
Step 2
Keep focusing on your rounded square. Add three copies, align them with the original shape and leave a 30 px gap between each of these shapes.
Step 3
Select the rounded squares added in the previous step and change the Fill colors as shown below.
Step 4
Import the four icons that you need from this Vector Icons Set. Resize them, change the color to white and place them as shown in the following image. Once again, the smart guides will help you to perfectly center these shapes.
7. How to Add the Text to Your Mobile App UI Design
Step 1
We’ll use a system font for most of the body text and and a non-default font for headings.
“System fonts will make the design of your app more consistent with the operating system. But using system fonts only will prevent you from getting a unique look for your app.” – Andrey Zhulidin
Focus on the top menu. Go to Insert > Text from the toolbar or menu (or press T). Click on your artboard and focus on the Text section from the Inspector panel. Select the Odudo Mono font, set the style to Bold and the size to 40. Increase the Character spacing to 10 and change the color to #5E72EF, and then add the "PORTFOLIO" piece of text. Select it and place it as shown in the following image.
Step 2
Move down to the horizontal scrolling menu. Go to Insert > Text from the toolbar or menu (or press T). Click on your artboard and focus on the Text section from the Inspector panel.
Select the San Francisco Pro font, set the style to Bold and the size to 20. Increase the Character spacing to 2 and change the color to white, and then add the "OCT 2019" piece of text. Select it and place it as shown below.
Using the same text attributes, add the other four pieces of text shown in the following images. The only things that you’ll have to change is the text color, from white to #5E72EF.
Step 3
Move down to the bottom side of your chart. Go to Insert > Text from the toolbar or menu (or press T). Click on your artboard and focus on the Text section from the Inspector panel.
Select the San Francisco Pro font, set the style to Heavy and the size to 30. Make sure that the Character spacing is set to Auto and change the color to #CBD1FA, and then add the "23" piece of text. Select it and place it as shown below.
Add five copies of this piece of text, change the numbers with "24", "25", "26", "27" and "28" and place them as shown in the following images.
Step 4
Move down to the stats buttons. First, add a vertical guide at 143 and a horizontal guide at 1101. Go to Insert > Text from the toolbar or menu (or press T). Click on your artboard and focus on the Text section from the Inspector panel.
Select the Odudo Mono font, set the style to Bold and the size to 40. Change the color to white and then add the "16" piece of text. Select it and place it as shown below.
Deselect this piece of text and re-select the Text tool. Click on your artboard and focus on the Text section from the Inspector panel.
Select the San Francisco Pro font, set the style to Semibold and the size to 20. Make sure that the color is set to white and then add the "Transactions October 2019" piece of text. Add a horizontal guide at 1171 and then place this new piece of text as shown in the second image.
Step 5
Add the horizontal guides shown in the following image (1267 and 1337) and then duplicate the text added in the previous step. Edit the text and then place it as shown below.
Step 6
Add the horizontal guides shown in the following image (1433 and 1503ve) and then duplicate the text added in the previous step. Edit the text, place it as shown below and your Sketch UI design is complete.
Congratulations! Your Sketch UI Design is Done!
Here is how it should look. I hope you’ve enjoyed this Sketch app tutorial and can apply these techniques in your future projects. Don’t hesitate to share your final result in the comments section.
Feel free to adjust the final mobile UI design and make it your own. Don’t forget you can find some great sources of UI inspiration on Envato Elements, with interesting solutions to improve your mobile app UI design skills.
SketchQuick Tip: Recreate Apple Watch’s Activity Rings in Sketch
Responsive Web DesignTips and Tricks For a Responsive Design Process in Sketch
SketchA Walkthrough of the Prototyping Tools in Sketch
SketchPaddy: Add Automated Padding and Spacing in Sketch
SketchHow to Create a Dynamic Icon Library With Sketch
SketchHow to Use Sketch Symbols to Create Flow Diagrams
No comments:
Post a Comment