Chapter 27: Designing Your First App in Sketch - Part 2

Continue building your first app in Sketch while learning some UX principles and Sketch tools


What you will learn

  • Playing off current user habits to your benefit
  • Aligning elements
  • Using more Sketch tools

Great! We've now designed a beautiful home screen, but what happens when a user selects either Coffee or Tea? We'll look into a few principles of building out a great product while creating this next screen.

Playing Off Current User Habits

You will want to keep in mind what other applications your customer base might be using, and what habits they may already be accustomed too. Many times it's playing off of the norm, but adding your own twist to it. Your users get what they were expecting, but also are delighted because you have added an element they're not used to. Let's start off by building a screen a user might already be expecting.

Building the Results Screen

Let's break down the elements we'll need for this screen:

  1. A list of the results
  2. A map
  3. Metrics to rate the quality of results (i.e. stars)

Given these elements, it's best to set our screen up similar to an application like Google maps (Figure 4.3.1):

Figure 4.3.1

4.3.1 Google_Maps.png

We'll start by adding a new page to our project. Click the + symbol on the Pages tab, and name the new page Results. We can also rename our first page to Home (Figure 4.3.2).

Figure 4.3.2

4.3.2 - Rename_Results.png

Let's now insert an iPhone 7 Artboard, and rename it Coffee Results. We'll then create the navigation bar by inserting a rectangle. Be sure to have the sides snap to the edges of your Artboard, and bring the height down to 64pt.

Since this is the Coffee Results screen, we'll want to fill the navigation bar with the same color as our Coffee Rectangle from our previous screen. Head on over to your "Home" page and click your Coffee Rectangle. Go to the Fill box to grab the HEX (color code).

Instead of constantly going back to previous assets to grab colors, Sketch makes it really easy for you to save HEX's as either Global Colors or Document Colors.

Global Colors save HEX's across the entire program. This means you will have access to these every time you open up Sketch. I recommend saving colors that you frequently use across many application designs.

Document Colors save HEX's only in the current document. You'll want to save these custom colors specific to your current project.

Let's go ahead and Save our Coffee color to our Document Colors (Figure 4.3.3). Now we can go back to our Navigation Bar in our Coffee Results and simply select our saved color to fill it in.

Figure 4.3.3

4.3.3 - Fills.png

To finish up the navigation bar, go ahead and do the following:

  1. Rename the rectangle to Coffee Results Navigation
  2. Remove the border
  3. Add a slight drop shadow
  4. Add a Back button (You can either make this in Sketch, or find one online).
  5. Add the title "The Best Coffee" and align it with your back button.
  6. Group them all in a folder called Navigation

Note: Make sure your styling decisions match your applications personality! (i.e. font and icon style)
Have fun with this. This is where your creativity & personal touch comes in
.

By the end of it, you're navigation bar should look like some variation of this (Figure 4.3.4):

Figure 4.3.4

4.3.4 - P2_Nav_Screenshot.png

Let's now insert a rectangle for our map. Make the edges snap to the corners and give it a height of 250.
Let's also remove the border and rename the rectangle Map Image. We can leave this for now, as it is just a placeholder for our map image.

For this next part, we'll simulate a table view to display some options. Insert a rounded rectangle in the shape of a square by holding down shift. Go ahead and make it 90pt by 90pt and remove the border. This will serve as a placeholder for an image for the first result. We can also rename this Result Image (Figure 4.3.5).

Figure 4.3.5

4.3.5 - First_Result_Cell.png

We've left some room on the right because we'll be placing a few things here:

  1. Name
  2. Ranking (Stars)
  3. Short Description
  4. Hours of Operation

Go ahead and Insert -> Text -> Type a name for your first coffee shop result. I'm also going to make my text semi-bold to have it stand out a bit more.

Tip: When selecting the text color, often times pure black text on a pure white background is too harsh. Having a dark gray colored text can help soften things up.

Now we're going to add some stars. Luckily Sketch has a preset star we can insert. Let's Insert -> Shape -> Star and make it 20pts by 20pts.
Remove the border on the shape, and don't forget to hold down shift to keep it proportional!

While the star is selected, hold down option and drag to the right. You'll notice that the star is being duplicated. Go ahead and do this 3 more times until we have 5 stars. Don't worry about positioning just yet (Figure 4.3.6).

Figure 4.3.6

4.3.6 - Stars_Unaligned.png

We're now going to align the stars using a few of Sketch's handy alignment tools.
With all 5 stars selected, let's first distribute horizontally, which will ensure that the spaces between each star are equal. Then let's align them all vertically.

Wow! You have just turned a messy cluster of stars into a perfectly aligned constellation!
While your stars are still selected, let's control + g to place them in a group named Stars. You're stars should now look like this (Figure 4.3.7):

Figure 4.3.7

4.3.7 - Stars_Grouped.png

Feel free to color in your stars now. If you're showing 4/5 stars I'd recommend removing the fill in the empty star and give it a border, or removing the un-earned star all together.

Now let's add a small description and hours of operation. We can make the text 2pts smaller than the title, and choose a light or regular font type.

Let's select the 4 elements we created (title, stars, description, and hours), and left align them, as well as distribute vertically. While they are all selected, let's put them in a group and name it Cell Details. Now we can select our Cell Details group, as well as the Result Image, and align vertically to make sure everything is pixel perfect.

Let's now add a thin line to simulate the table view separator. I'm going to Insert -> Shape -> Line and have it start where my Result Image begins, and drag it all the way to the (right) edge of the Artboard. Let's also make the thickness .5, and make sure it's 20pts below our Results Image (Figure 4.3.8).

Figure 4.3.8

4.3.8 - Results_Line.png

Now all we need to do is put the line, Cell Details, and the Result Image in it's own group called Cell Assets. Now that we have one cell in its own group, we can hold down option and duplicate the cells to make the rest of our table view! You can also rename your copied Cell Assets to correspond with each cell.

Wrapping up

When designing your apps, be sure to take a look at similar products in the same space. Often it's best to use intuitive gestures and design principles your target market is already used to, but add your own spark into the mix that will make your product stand out.

Exercise

  1. Go back and replace all our image placeholders with actual images! Feel free to do a Google search for some cool images that will put your application design in it's best light. When you have the placeholder shape selected, click Fill (Figure 4.3.9) and select Choose Image from the Pattern Fill section and select your image.

Figure 4.3.9

4.3.9 - Fill_Photo.png

  1. Edit each cells specific details to simulate a live application.

  2. Recreate this screen for your Tea screen. Remember, you can use copy paste to your advantage. There are only a few elements that are different from the Coffee screen ;)

Final.png