Design a full fledged application that has room for rich micro-interactions
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
Artboard -> and select
iPhone 7 on the right hand side.
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
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):
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
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
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).
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.
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)
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
horizontally (Figure 4.5.3).
At the top you'll notice a few tools provided by Sketch (Figure 4.5.4).
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).
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
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).
Let's start by making the bottom part of our circle the same color as our title in our navigation bar.
Fill selected, click the right rectangle on the slider, or the bottom circle on the gradient line on our shape (Figure 4.5.7).
Sketch allows us to quickly find the HEX of any element on your screen.
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)
For our other HEX in the gradient, we'll use
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).
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
Now it's starting to look like a real progress circle! (Figure 4.5.10)
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.
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)
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!
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.
To complete this app, we'll add some elements that you already know how to implement, per the previous chapters!
By the end of it all, it should look like this! (Figure 4.5.12)