Learn the basics of Sketch through designing an elegant application to find the best coffee or tea in your area.
Designing Your First App
Before we dive right in to designing, we'll want to think about a few things first. Every time you are about to design a new product from scratch, think about the following questions:
We'll be making an application that allows it's users to find the best coffee & tea in their area. So let's go ahead and answer the questions above.
1. What is the main goal of the application? Our application allows you to find the best coffee or tea in your area.
2. If your application was a person, describe them in 3 words. Our application is going to be modern, friendly, and warm.
3. Who is going to be using your application? People who enjoy a really good cup of coffee or tea. They're more particular than your average drinker.
Great! We'll be using these answers throughout our design process to help keep consistency throughout our application.
Let's start designing! Go ahead and open Sketch and create a
New project (Figure 4.2.1).
In the upper left corner click
+. From the drop down menu click
Artboard (Figure 4.2.2).
You will be using the
Insert option for adding all your assets to the
Insert you will find the following options:
Feel free to take a second and explore this menu. I encourage you to get really familiar with it.
On the right hand side you'll see a ton of great templates (Figure 4.2.3). We'll go ahead and click
iPhone 7 for now, but feel free to peruse the others on your own time!
On the left hand side, you'll now see that Sketch has created an "iPhone 7" section under your current page. Now everything you put inside this
Artboard will be organized accordingly.
Let's go ahead and rename iPhone 7 to Home.
We're now going to create our first shape. Go to the upper left corner again, and this time we're going to
Start in the upper left corner, and drag across to the right until it snaps to the right corner. We'll then drag it down to roughly half the screen. You'll notice that Sketch will automatically snap to the center.
Congratulations! You just inserted your first shape!
Your Artboard should now look like the following (Figure 4.2.4):
On the right hand side you'll notice an Attributes Inspector that correlates with the shape you just made. This will always show the attributes of an element you have currently selected.
From here we can alter properties like the opacity, shape fill, border, shadows, and even add blurs! We'll get into more of this later, but for now let's un-check the
We're going to split our screen into two sections: one for finding coffee, and the other for finding tea. We've just created our coffee section, so let's create another rectangle for our tea. We could add another rectangle, but since the dimensions we want are already set in our first rectangle, let's just duplicate it.
While having our rectangle selected, hold down
Drag your mouse down and you'll see a new copy of the rectangle being created. Keep dragging down until the rectangle has snapped to the bottom of the Artboard. Your screen should now be entirely gray with two rectangles perfectly distributed on the screen (Figure 4.2.5).
Now let's rename our rectangles. Under our renamed Home Artboard, let's click on our first rectangle (top one), and rename it Coffee Box, and the bottom one Tea Box.
Let's add some color to this now! Select your Coffee Box and click the
Fill rectangle (color picker) on the right panel. Let's find a cool mocha color. Click or drag around in the "Hex Box" until you find something you like. You can also scroll through the color spectrum below on the multicolored bar. If you're having trouble finding one you like, you can use the hex: #6F4E37.
We'll now add an image to spice things up. Head on over to www.nounproject.com. They are a great resource for finding high quality icons (Figure 4.2.6).
In the search field type "coffee" and choose an icon you like. This is a good time to reflect on one of the first questions we asked when we started this project.
What is your applications personality like? Since our application's personality is modern, friendly, and warm, try to find one that fits that description.
Once you have downloaded your image, you can just drag and drop it from your downloads folder (or any saved location) directly into Sketch. When you drop the image in, try to place your mouse directly over the Artboard. When you are done dragging, the image might be bigger than the Artboard. Don't worry! This happens all the time when dragging & dropping images.
You can zoom in and out of your canvas with
-. You will want to make sure you have enough space to grab one of the corners of your image.
Grab a corner and while holding down
shift, scale down your image by dragging it into the center.
Holding down shift will keep all the dimensions proportionate.
There will be some text on the bottom left that we wont want in our image. It's best practice to write all of these down to properly give credit to the artist in another section of the application, but for now we'll remove it.
Double click your image to go into edit mode. On the right hand side, make sure
Selection is selected. Drag over the text and hit
Delete.** This will remove the text and crop your image properly (Figure 4.2.7).
This is looking great! Let's rename our picture to Coffee Beans. The full black color of the coffee beans are a little too harsh. We want this image to blend with the background, so let's decrease the opacity. While the Coffee Beans are selected, you can decrease the opacity with the slider on the right hand side, or type in a percentage. 20%-25% opacity looks great for this effect (Figure 4.2.8)
We're now going to add some text. Go to
Text and click right over the Coffee Beans. Type "Find the Best Coffee", center it and find a font you like. Keep in mind our applications personality when doing this!
If you're stuck on styling your text, I've used Avenir Next - Demi Bold in this example. Your Artboard should look something like this (Figure 4.2.9):
Now we want to make sure that the text is perfectly centered with our Coffee Beans, and luckily Sketch gives us a really easy way to do this! Select both the text and Coffee Beans by clicking Coffee Beans then holding down
shift and clicking on the text. In the upper right of your panel you'll see some alignment icons (Figure 4.2.10).
Distribute Horizontally- Create even spacing between horizontal elements
Distribute Vertically- Create even spacing between vertical elements
Align Left- Make your elements left aligned
Align Horizontally- Center your elements horizontally
Align Right- Make your elements right aligned
Align Top- Make your elements aligned to the top
Align Vertically- Center your elements vertically
Align Bottom- Make your elements align to the bottom
With both items selected, we are going to align them both vertically and horizontally Watch what happens!**
Our text is now perfectly in the center of our icon (Figure 4.2.11).
Now with those two elements still selected, let's
g to put them in a group. This will create a folder with those two elements inside. Let's then rename the folder Coffee Box Assets.
Now try aligning your Coffee Box Assets folder vertically and horizontally to your Coffee Box in the same way we did the text and Coffee Beans.
Not only did you learn some basic Sketch elements, but you actually dove into the inner workings of UX. Let's break down what just happened.
We ask ourselves two questions with every screen:
What are we trying to accomplish?
Upon launch, we are trying to let the user know that there are two things we do best. We find the best coffee & the best tea. We want the user to understand this, and quickly choose one. We then guide them on a path to discovering more about our app.
What is the best way to do this given our applications personality?
Our application is modern, friendly, and warm. We do not want to bombard our user with too many options, because more often than not, more options means more decisions the user needs to process. The best way for the user understand what we do and quickly choose an action, is to split the screen up into two sections. Right from the beginning the user can easily digest what's going on and make a decision.