Continue building your first app in Sketch while learning some UX principles and 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:
Given these elements, it's best to set our screen up similar to an application like Google maps (Figure 4.3.1):
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).
Let's now insert an
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.
To finish up the navigation bar, go ahead and do the following:
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):
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).
We've left some room on the right because we'll be placing a few things here:
Go ahead and
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
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).
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
g to place them in a group named Stars. You're stars should now look like this (Figure 4.3.7):
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
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
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).
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.
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.
Fill(Figure 4.3.9) and select
Choose Imagefrom the
Pattern Fillsection and select your image.
Edit each cells specific details to simulate a live application.
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 ;)