Chapter 26: Designing Your First application In Sketch - Part 1

Learn the basics of Sketch through designing an elegant application to find the best coffee or tea in your area.


What you will learn

  • Basics of Sketch
  • Implementing UX/UI principles
  • Giving your Application personality

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:

  1. What is the main goal of the application? (This should be no more than 2-3 sentences)
  2. If your application was a person, describe them in 3 words.
  3. Who is going to be using your application?

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).

Figure 4.2.1

4.2.1 - New_Project.png

In the upper left corner click Insert +. From the drop down menu click Artboard (Figure 4.2.2).

Figure 4.2.2

4.2.2 - Insert.png

You will be using the Insert option for adding all your assets to the Artboard. Selecting Insert you will find the following options:

  • Vector
  • Pencil
  • Shape
  • Text
  • Image
  • Artboard
  • Slice
  • Symbol
  • Styled Text

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!

Figure 4.2.3

4.2.3 - Templates.png

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 Insert -> Shape -> Rectangle. 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):

Figure 4.2.4

4.2.4 - Artboard_Example_Box_1.png

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 Borders box.

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 option, and left click.
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).

Figure 4.2.5

4.2.5 - Rectangles_On_screen.png

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.

Figure 4.2.6

4.2.6 - Noun_Project.png

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 command + and command -. 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).

Figure 4.2.7

4.2.7 - Screen_Update.png

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)

Figure 4.2.8

4.2.8 - Opacity.png

We're now going to add some text. Go to Insert -> 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):

Figure 4.2.9

4.2.9 - Text_Updated_2.png

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).

Figure 4.2.10

4.2.10 - Alignment_Panel.png

  1. Distribute Horizontally - Create even spacing between horizontal elements
  2. Distribute Vertically - Create even spacing between vertical elements
  3. Align Left - Make your elements left aligned
  4. Align Horizontally - Center your elements horizontally
  5. Align Right - Make your elements right aligned
  6. Align Top - Make your elements aligned to the top
  7. Align Vertically - Center your elements vertically
  8. 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).

Figure 4.2.11

4.2.11 - Before_After_Alignment.png

Now with those two elements still selected, let's command + 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.

  • Note: It is super important to keep your elements grouped in folders. It helps to keep your projects organized, and allows you to move elements all together. If you wanted to reposition your text and icon without them being grouped, you would have to select them individually. This may seem trivial now with only 2 elements, but as your designs become more complex, the easier it will make your life!

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.

Breakdown

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:

  1. What are we trying to accomplish / want the user to do?
  2. What is the best way to present this, given our applications personality?

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.

Exercise: Complete the Tea section to match the Coffee section

  1. Find a cool green tea color (use www.paletton.com or www.adobe.kuler.com).
  2. Find a cool tea icon, and apply the same attributes to it as the Coffee Beans.
  3. Add some text "Find the Best Tea" and group it with the tea icon.
  4. Group your Tea Assets with your Tea Box
  5. Make sure everything is aligned perfectly (horizontally & vertically)
  6. Hi-five the closest person next to you