Chapter 29: App - Savemate

Design a full fledged application that has room for rich micro-interactions


What you will learn

  • Combining shapes
  • Filling elements with color
  • Various Sketch tools

We'll go ahead and design an app that will leave room for some creative micro-interactions which we'll cover in the next chapter. Open up a new project in Sketch and name it Savemate. Savemate will be an app that allows users to keep track of an item they are saving money for.

Start by going to Insert -> Artboard -> and select iPhone 7 on the right hand side. We'll then Insert -> Shape -> Rectangle for the navigation bar. Have it snap to the edges, and bring it down 64pts. You can remove the border on the shape, and give it a dark gray color. If you can't decide on a dark gray, I'll be using the HEX #525252.

Let's Insert -> Text and type savemate at the top. I'm going to make "save" a thinner text style than "mate." This is a great technique to style text when you want certain words to stand out. Also, let's find a cool mint color to contrast with our gray navigation bar. Feel free to find a color that suits your personal taste. I'll be using the HEX #46C281. Our artboard should now look something like this (Figure 4.5.1):

Figure 4.5.1 4.5.1 - Microinteraction_Savemate.png

Let's now Insert -> Shape -> Rectangle right below our navigation bar. This is going to be where we place the item details. Be sure to have it snap to the left and right corners, and make it around 90pts high. Go ahead and choose a lighter gray for the fill, and remove the borders. If you're having trouble with finding a light gray, I'll be using the HEX #E9E9E9.

  • Tip: Instead of using lines to separate elements in your designs, it's also great to use "off whites" & "grays" to signify different sections. It's easier on the eyes and gives a great minimalistic feel.

Let's now Insert -> Text and type "Goal: New Guitar." Insert another line of text and have it say "by January 7th, 2017." This will be our goal date and should be smaller than the goal text. Feel free to choose a dark gray HEX for the text color as well.

Using the align tools, let's select both of these text fields and align them horizontally. Let's also group them together with command + g and align it vertically and horizontally in the gray rectangle, and then group the rectangle and the text group together. Feel free to name your groups appropriately as you create them (Figure 4.5.2).

Figure 4.5.2 4.5.2 - Microinteractions_Goal Header.png

Now for some fun stuff! We'll be making a progress circle to reflect the goals progress. Sketch gives us some great tools to allow us to do this pretty easily.

First, let's Insert -> Shape -> Oval. While holding Shift, left click and drag to make a perfect circle that is 180pts x 180pts. Also remove the border and fill it with a color that is going to stand out. (You'll see why we're doing this in a moment, don't worry about the specific color. We're just using it as a placeholder)

Now command + c, and command + v to copy and paste the circle. Let's make it a different color so we can see it, and scale it up to around 210pts x 210pts. Also be sure to place it behind the smaller circle, and with both of them selected, center them vertically and horizontally (Figure 4.5.3).

Figure 4.5.3 4.5.3 - Microinteractions_Progress_Circles.png

At the top you'll notice a few tools provided by Sketch (Figure 4.5.4).

Figure 4.5.4 4.5.4 - Microinteractions_Tools.png

Union merges two shapes together Subtract subtracts the top element from the one underneath it Intersect intersects the top shape from the one underneath it Difference subtracts the difference between two shapes

Well go ahead now and select both circles and click Subtract and BOOM! We now have the shape of our progress circle (Figure 4.5.5).

Figure 4.5.5 4.5.5 - Microinteractions_Progress_Circle_2.png

You'll notice now on the artboard panel, the two circles have been named as a Combined Shape. You can actually edit the elements in Combined Shapes, so if things didn't come out perfectly on the first try you can alter them later.

Now let's select our new Combined Shape, and click fill. We want to give this a slight gradient with two colors. Select the Linear Gradient, which will give us two palettes to change colors, and span a gradient across our shape (Figure 4.0.6).

Figure 4.5.6 4.5.6 - Gradients.png

Let's start by making the bottom part of our circle the same color as our title in our navigation bar. With Fill selected, click the right rectangle on the slider, or the bottom circle on the gradient line on our shape (Figure 4.5.7).

Figure 4.5.7 4.5.7 - Microinteractions_Bottom_Gradient_Color.png

Sketch allows us to quickly find the HEX of any element on your screen. Let's control + c and you'll notice you can hover the cursor over any element, and with the Fill selected, you can left click to insert that HEX. Hover over our title and select the color to fill our bottom part of our circle. (Figure 4.5.8)

Figure 4.5.8 4.5.8 - Zoomedcontrolc.png

For our other HEX in the gradient, we'll use #B5EB45.

Now, let's Insert -> Shape -> Triangle. We'll make this 170pts x 100pts. Go up to the top and click Rotate, and rotate our triangle -90 degrees (Figure 4.5.9).

Figure 4.5.9 4.5.9 - Microinteractions_Triangle.png

If you guessed that we might subtract this triangle from our Combined Shape, you're right! With the triangle and Combined Shape (Circle) both selected, click Subtract. Now it's starting to look like a real progress circle! (Figure 4.5.10)

Figure 4.5.10 4.5.10 - Progress_Bar_Progress_3.png

It looks a little funny with the dry cut edges doesn't it? Let's round them off a bit. The difference between the two circles is roughly 30pts x 30pts. We'll divide that number by two and get a circle that's 15pts x 15pts. Click Insert -> Shape -> Oval, and give it the size of 15pts x 15pts. We'll use this to put at both ends of our progress circle. You may have to zoom in, as well as manually alter the x and y coordinates (using decimals help to align this perfectly). (Figure 4.5.11)

Figure 4.5.11 4.5.11 - Microinteractions_Circle_Endpoints.png

Now with both of the Ovals selected and the Combined Shape (our circle), click Union and have them join the shape. You'll also notice our ovals automatically inherited the colors so we don't have to fill them in!

Wrapping up

In this section we learned about some of the powerful Sketch tools that allow us to manipulate shapes to achieve a desired effect. It's also great to use whites and off-whites to differentiate different areas of your app without the use of harsh lines or colors.

Exercise

To complete this app, we'll add some elements that you already know how to implement, per the previous chapters!

  • Add a money amount saved (i.e $1500) in the center of the circle
  • Add the full amount (i.e. $2000) beneath the amount saved
  • Add a button at the bottom of the screen that includes an icon
  • The text of the button should say "Add $10"

By the end of it all, it should look like this! (Figure 4.5.12)

Figure 4.5.12 4.5.12 - Savemate_Full.png