In this tutorial we’ll be walking through designing the onboarding process for a mobile app. Specifically we’ll design a finance application login screen in Sketch.
Things We’ll Need
To follow along you’ll need:
- a solid font pair that passes along feelings of professionalism and modernity. This is an on boarding process for a finance application, so we need an element of trustworthiness. Some good font choices for this would be: Aeonik, Proxima Nova, Roboto or Maison Neue. Using the native Apple font San Francisco is always a safe choice to go for.
- Due to the minimal amount of icons we’ll be using in this interface (we’re only using a check icon and a hamburger icon), the icon pack used here does not make much of a difference as almost any icon pack includes those icons. Due to their simplicity, they could easily be designed from scratch as well.
- Our tool of choice for designing these on boarding screens is Sketch, yet following along in Adobe XD or Figma won’t be much different.
1. Set up Your Workspace
Start by creating an artboard. You can use the presets inside the application. Clicking A we’ll access the panel that will let us create the artboard–giving us various canvas sizes we can use.
2. Add the Most Important Elements
In order to make working with our project easier, I recommend you create a small style guide and set up the most important elements such as the colors, buttons, text styles and other base elements.
Don’t go overboard with this and try keeping the essentials to a minimum. By creating symbols in Sketch (Layer > Create Symbol), you’ll find everything you prepare available on the left-hand-side of the sidebar under the Components tab.
To demonstrate, let’s create a primary button that we’ll often use within our onboarding screens.
Step 1
Add a rectangle that will serve as the base for our button. Go to Insert > Shape > Rectangle or click R. Draw a rectangle of the right size then modify the radius of the shape (round corners).
Step 2
Go to Insert > Text or click the T character and add in the necessary text. We’ll add in the “Next Step” text string within our button and then choose the correct font, size, and styling.
Step 3
Finally, click CMD/CTRL and select the text and the rectangle. By using the Create Symbol button we’ll create a component that can be reusable throughout the pages allowing us to change its width, height or the text within it without the need to prepare the style from scratch. This tutorial should be of help when learning how to work with different interaction states of a component.
3. Set up Your Field Styling
Setting up the field styling will begin with the creation of a white rectangle and a border color that will make the field stand out from the background. For consistency and maintaining patterns within the design, make the field height equal to the buttons. The same applies to the radius of the corners.
We’ll continue by setting a text styling for the field and will finish it by adding a label; a way for users to determine the type of field and the expected input. Adding a subtle shadow effect to the field is sometimes a nice visual touch too.
4. Building the Price Range Bar
We’ll get started with the rectangle that acts as the base of this range bar. It has to be slightly darker than the background in order to be both visible yet subtle, and not bother the eye by being too bright.
It’s important to give it a maximum radius to the corners–a nice rounded end is common for a range slider. We’ll add a faded color to it which will represent the selected range. We’ll be using a bright green color for our interface, therefore, we’ve used a faded version of that green here.
The next step is to add two small circles that will define the chosen range.
The following step is to add in the labels defining the type of the range bar and the amounts below the circles to give us a sense of clarity about the range amount chosen.
5. Add Logotype
At this stage, we’ll be adding in the logotype for our application. For the purposes of this tutorial, I have quickly created a mock logotype which I believe to be a good choice for illustrative purposes.
Having a logo in SVG is always a good idea because it allows customization depending on your sizing needs. Add the logo to the symbols list so you can use it later when needed.
So far we have:
6. Navigation and Styles
The navigation has to be simple, clean and intuitive. We have already included the logo for branding purposes, so let’s add a burger menu icon to the left of it to trigger the slide-out navigation panel.
Be sure to give that navigation defining icon a color that makes it stand out from the background and a size that’s proportional to the logotype. We want to have it easily accessible and observable, yet not too intrusive.
7. Typography
The next step is to set the typography size that will be displayed in our application. The text has to be prominent and easy to read, yet not huge or overly intrusive. We’ll be using our pre-defined colors and will be using a headline of 30px and 16px for the paragraph.
These outlined sizes seem to be just right in order to maintain a good proportion between the canvas size, the headline and paragraph sizes and the visibility aspect of it.
8. Adding the Avatar
We’ll be creating a circle shape in an appropriate size and will convert it to a mask. Import or drag&drop your selected avatar image to Sketch, and place it above the circle shape.
In order for the mask on the circle not to grab other layers beneath it, create a separate group for the circle and the imported avatar image.
9. Bottom Steps
For the lower part of the UI where general progress is displayed, we will create a rectangle with a white background color and, like the top section, we will give it a divider with a 1-2px border. This will be the base of the bottom part where the onboarding progress is displayed.
We will then create a circle to indicate the status. For this, we will create a green colored circle (which is our active/contrast color) with a lower opacity (faded). This is because we will then duplicate that very circle and give it a 100% opacity. This will create an eye-pleasing contrast effect with the circle in the background. By adding an additional vector point on the circle (by using the “V” hotkey) and by then using the scissors tool, we will select the part necessary to be cut out as per the image below.
Finally, in order to have all of the corners rounded, we will select the Border Settings, then pick Rounded ends.
So far we have:
9. Selected Fields
An important point to mention is that most of the UI elements visible on the onboarding screens are repetitive and similar to each other. This is why the next page will be easy to create due to the existing established style.
We have already set the style and size for various fields. The selected radio button will also highlight its selected state through an outline over the field in the form of a 2px outline that’s of the same accent (active) green color we have been using on other UI elements.
The dropdown on this page is again using the same field form style with the exception of a caret/arrow icon that provides a visual cue that users can select a different option.
Our result so far:
10. Last Touches
The last page within the onboarding flow will require an illustration, a paragraph of text, a user interface element that indicates pagination and a button. We’ll be using the already existing style for the buttons. There’s also an established text style that we’ll be using, and for the navigation we’ll use three small shapes to indicate the fact that the content can slide to the left and right.
For the illustration, we’ll be using an illustration that has been grabbed from Envato Elements. The particular illustration doesn’t matter as much as the fact that there’s an abstract visual element that enriches the UI with its presence.
Here’s the full UI design!
That’s It Folks!
This concludes our tutorial on how to design a finance onboarding application in Sketch. We hope you found it useful and if you have any questions, feel free to let us know in the comment section below!
Learn Sketch With Tuts+ Courses
No comments:
Post a Comment