Many times, developers jump into Xcode and start hacking away as soon as they have an idea. Although it is possible to create an application in this fashion, if you want to build a truly successful production app you should prototype first—or fake it until you make it. Apple has had a few presentations over the last few years at WWDC14 and WWDC15 that highlighted the importance of prototyping and user-testing apps.
In this chapter we are going to start with an overview of Sketch 3, then we will create the first version of our app. Finally, we will cover how to use KeyNote to add interactive animations to the mockup before starting to code.
Introduction to Sketch 3
There has been a lot of hype about Sketch 3 over the last few years by designers and developers alike. I believe this has to do with its simplified user interface along with the way it sticks to its primary goal of creating user interfaces. A lot of graphics products try to be everything to everyone. When you first open Sketch you will really feel the difference as compared to a product such as Adobe PhotoShop. Figure 2-1 shows the main areas of the interface when you start a new project.
Figure 2-1. Blank Sketch 3 interface when starting a new project
When starting your first project in Sketch, you might feel the interface is quite limited. Limited options and a simple interface aren’t always a bad thing.
1. The toolbar is used for quick access to tools you will use often. You are not stuck with the default tools, however, as you can customize the toolbar to fit within your workflow.
a. Right-click on the toolbar and select “Customize Toolbar.” Figure 2-2 shows the popup menu with “Customize Toolbar” highlighted.
Figure 2-2. Menu when you right-click on the toolbar
b. You will be taken to a view that allows you to drag and drop to add or remove different toolbar items to or from your main toolbar (Figure 2-3). You most likely will not use this feature until you understand what each tool does; however, it is a good feature to be aware of.
Figure 2-3. Options panel with all available options
2. The Layers list area of the Sketch 3 interface allows you to organize your design into different layers and pages. Every object you add will be created on its own layer. You can then organize your page by grouping different layers together, as shown in Figure 2-4. The term page may be a little confusing unless you are familiar with web design. Basically it represents a unique view or feature of your app. It is used to allow you to better organize multiple designs into a single project file. You are able to create as many pages as you need (I don’t think there is a limit; you would have to check the official documentation to know for sure), and you can have several layers per page.
Figure 2-4. Layer list panel showing multiple pages and layers
3. Figure 2-4 shows a list of pages with the Temp page selected. You can see a list of layers for the selected page. You can click the + symbol on the Pages title bar to add another page.
4. The Inspector area is where you can customize the settings of any selected item that is on the canvas. The available settings dynamically change depending on what type of object you have selected. Figure 2-5 show the inspector options when creating an artboard.
Figure 2-5. Inspector options for creating an artboard
5. The canvas is where you will be spending all your time creating the prototype of your app. The canvas is unlimited in both height and width. However, Sketch has a really cool feature called Artboards that allows you to have smaller individual canvases. This helps you organize your scenes in a more organized fashion as well as limits how much screen space you are actually taking up.
Our Prototype Objective
We are going to be creating an OS X app that is used to manage dog-park information; it will be used with an iOS app in the future. This book will focus on the OS X and CloudKit app. However, there is a tutorial on my website ( warplydesigned.com ) if you wish to learn how to create the iOS version.
Figure 2-6 is the mockup we will be creating using Sketch. As this is a mockup, the final project might not look exactly like this; however, it will be very close.
Figure 2-6. Dog parks app mockup
Building the Prototype with Sketch 3
It is time to build out our mockup using Sketch. We’ll take a step-by-step approach in tackling the following main tasks:
1. Create the structure of the main window
2. Create the New Park button
3. Create the Search field
4. Create the park list
5. Create the last main content area
Creating the Structure of the Main Window
In this section we are going to create the main window frame of our mockup, including the sidebar, main details area, and window control buttons.
1. Open up Sketch.
2. Press the A key. Your cursor will turn into a cross symbol, and the Inspector will provide you with a list of different screen resolutions for your new artboard. Instead of using one of the defaults, we are going to create one using custom dimensions.
3. With the cross symbol, click and drag out a rectangle. Don’t worry about the exact size, as we will cover how to adjust it next.
4. Once you release your mouse, the Inspector will show options for the artboard’s position and size. Adjust the size to a width of 800 and a height of 500. (It is important to remember you can create as many additional artboards on the canvas as you require.)
5. Next, press the R key for the rectangle tool. We are going to create the left sidebar. Starting at the top left-hand corner of the artboard, drag a rectangle that is 300 x 500 pixels. Don’t worry about being exact, as you can use the Inspector to make things more exact.
6. With the new rectangle selected, uncheck the checkbox under the Borders heading in the Inspector panel. This is shown in Figure 2-7.
Figure 2-7. Border color disabled
7. Click on the Color box. In the Color dialog’s Hex textbox, enter the value F5F7F7. See Figure 2-8.
Figure 2-8. Sidebar color being used
8. In the Layers list, double-click Rectangle 1 to rename the layer to Left Sidebar.
9. While we are at it, double-click Artboard 1 to rename the page to Parks Main UI.
10. When done, your screen should look like the following (Figure 2-9); if not, recheck the steps.
Figure 2-9. Main window with sidebar and main content areas
11. Next, let’s create the close, minimize, and maximize buttons. Select Insert ➤ Shape ➤ Oval. (Also note that this is where you can get access to all the drawing tools available in Sketch 3). See Figure 2-10.
Figure 2-10. Insert menu for shapes
12. Draw an oval that is 12 pixels by 12 pixels. If you hold down the Shift key as you drag, you will create a perfect circle. This also works if you want to create a square from a rectangle. (Remember, you can adjust the size in the Inspector panel if needed.)
13. Now we need more copies of the circle you just created, so hold down the Option key and drag the circle to the left; release the mouse then the Option key. This creates a duplicate of the selected object. Do this one more time.
14. Next, let’s position the circles in a horizontal line 8 points away from each other. Sketch provides a helpful tool to help you visualize this. First, select the circle you want to move by single clicking on the object. Next, hover your mouse over the object you want it to be 8 points away from. Finally pressing and holding down the option key will show you a red line with a number representing the distances the objects are from each other. Using the arrow keys on your keyboard, move the selected object to the left or right until the number shows 8 points. You can leave your mouse hovering over the target object as you move your selected object. Repeat the same process for the last circle.
15. Next, select all three circles by single-clicking on the first one, then holding down shift and clicking on the other two one by one. Next, with the circles selected, move your mouse over the left sidebar, then press and hold the Option key so you can see the distance guides. Next, using your arrow keys, move the circles to the left and top until they are 6 points from the top and 6 points from the left. You may have to use the magnifying glass to zoom in to see the distance correctly. If all went as expected your circles should look like Figure 2-11. If your colors are different don’t worry, we will correct that next.
Figure 2-11. Control buttons at the top of our window’s sidebar
16. Let’s move on to correcting the colors. Select the first circle on the left and click the fill color box in the Inspector panel. Set the hex value to F4554D and uncheck the border option.
17. Set the middle circle’s fill color to F2B121 and uncheck the border option.
18. Finally, set the last circle’s fill color to 0EBD35 and uncheck the border option. Your circles should now look like those in Figure 2-12.
Figure 2-12. Colored control buttons to match Apple’s default OS X colors
19. Next, let’s clean up our layers a little. Select Oval 1 by clicking on it, then hold Shift and select Oval 1 Copy 2 to select all three circles (Figure 2-13).
Figure 2-13. Three control buttons selected
20. Press Command + G to group the circles together. Double-click the group and name it Window Controls. Optionally, you can rename each of the control circles. The green one is the Maximize button, orange is Minimize, and red is the Close button. See Figure 2-14.
Figure 2-14. Control buttons in the Window Controls group, with each button renamed to match its function
Creating the New Park Button
Let’s create the New Park button . To do so, follow these steps.
1. Press the R key and drag a rectangle so it appears on the right sidebar just below the control buttons. We will position this properly later. Make the button 258 x 50, with a position of 21 points from the left and 40 points from the top.
2. In the Inspector properties for the button, change the radius to 8 to give it rounded corners. (You could have also created a rounded rectangle using the U key.)
3. Uncheck the borders checkbox.
4. Set the fill color box hex to 4A90E2.
5. In the Layers panel, rename Rectangle 2 to Background.
6. Press the T key and type in New Park over top of the button we just created. Make sure the New Park Text layer is placed above the layer you renamed in the previous step, or the text will not be visible.
7. Give the text a size of 20 and set its color to white.
8. Next, we are going to center the text using the alignment tools. First, select the text layer, then hold Shift and click on the button background. Next, in the Inspector properties click Align Horizontal, then click Align Vertical. (It is important to select these in the correct order to get this to work.)
9. With both the text field and the background still selected, press Command + G to group them. Name the group New Park Button.
10. Your project should look like the screenshot in Figure 2-15.
Figure 2-15. New Park button and the group for the button in the layers panel
Creating the Search Field
Next, we will create the Search field.
1. Press the R key and drag out a rectangle under the New Park button.
2. Make the rectangle 258 x 30.
3. Position the rectangle 21 points from the left and 18 points from the New Park button. (Hover your mouse over the New Park button, then press and hold the Option key to see the spacing guidelines. Then use your keyboard arrow keys to put the rectangle into place.)
4. Set the rectangle’s fill color to white and its border color to a gray, 979797.
5. Rename the Rectangle 3 layer to Search Box. See Figure 2-16.
Figure 2-16. Search box under the New Park button
Creating the Park List
In this section we will create park lists in the sidebar. We will also create a selected park as well as show non-selected parks.
1. Press the R key and drag out a rectangle; this will be for a park row.
2. Make sure the row is directly against the left-hand side of the artboard, with a size of 300 x 72.
3. Its position should be X = 0, and 18 points below the Search box.
4. Disable the border and set a fill color to 0066DC.
5. Rename the layer Park Item Background.
6. Create another rectangle size 42 x 42 within the Park Item Background. This will be our Image View. (You can hold down Shift while dragging to make a perfect square.)
7. Position the new Image View 12 points from the left, 15 points from the top of the Park Item Background, and 15 points from the bottom. To see the distance, hover your mouse over the Park Item Background, and with the Image View selected hold down the Option key.
8. Set the background color to F5F7F7 and the border color to 979797.
9. Next, we will add the labels. Press the T key and type Harbourside Walk beside the Image View.
10. Make sure the new text field is above the Park Item Background in the Layers list.
11. Set the text color to white and size to 20 points.
12. Align the text 14 points from the top of the Park Item Background and 16 points from the Image View.
13. Press the T key again and type North Vancouver under the previous text field; this is the park’s location.
14. Set the size to 16 points, and position it 16 points from the Image View and 14 points from the bottom of the Park Item Background.
15. Now, in the Layer list select both text fields, the Image View, and the Park Item Background, then press Command + G to group them. Name the group Dog Park (Figure 2-17).
Figure 2-17. Example of how a selected park will look
16. Select the Dog Park group and press Command + D to make a duplicate copy.
17. With the Dog Park Copy group selected, use your down arrow key to move the copy on the artboard to be below the Dog Park group you previously created. See Figure 2-18.
Figure 2-18. Duplicate of selected park that we will use to create non-selected park
18. Open the group copy you just moved and change the fill color of the Park Item Background to F5F7F7.
19. Select both text views and change their color to black.
20. Now select the Dog Park Copy group and press Command + D to duplicate it. Using your keyboard, move the new group on the artboard to be below the previous Dog Park group you just placed. Repeat this process two more times to have a total of four copies. Your artboard should look like that in Figure 2-19.
Figure 2-19. Park list with both a selected park and non-selected parks
21. Finally, select all the Dog Park copies, as well as the original Dog Park group, and group them, naming the group Park List. See Figure 2-20.
Figure 2-20. All of the parks grouped into a parent Park List group
This completes our sidebar.
Creating a New Group
I like to keep things as neat as possible, cleaning up as I go:
1. Select the entire layers group along with the Search box and left sidebar and group them into a new group called Left Sidebar (Figure 2-21).
Figure 2-21. Master group of left sidebar
2. Right-click the Left Sidebar group and choose “Lock Layer.” This will prevent us from accidentally moving any item on the sidebar. See Figure 2-22.
Figure 2-22. View of menu when you right-click on a group so you can lock the layer (group and all layers within it)
Creating Another Main Content Area
Now it’s time to create the last main content area . This will consist of creating multiple textboxes (similar to the Search box we have already created), some checkboxes (small rectangles), and finally a box filled with other boxes that will resemble our collection of images.
1. Create a text field for the park name. Press R and drag out a rectangle in the main content area with the size of 256 x 30.
2. Position the rectangle 12 points from the left (when I say left I am referring to the right edge of the left sidebar; just hover your mouse over the sidebar and hold the Option key to see the correct distance) and 40 points from the top.
3. Set the fill color to white.
4. Set the border fill color to 979797.
5. Rename the layer Park Name.
6. Hold down the Option key and click on the rectangle you just created. Drag to the right and release the rectangle, then release the Option key. This will duplicate the Park Name rectangle.
7. Set the size to 208 x 30.
8. Position the new rectangle 12 points from the right and 40 points from the top.
9. Rename the layer Park Location.
10. Press the T key, and in the top right-hand corner type a capital X.
11. Set the text size to 16 points.
12. Align the X to be 10 points from the top and 10 points from the right of the rectangle.
13. Set its color to red.
14. Make another duplicate of the Park Name rectangle.
15. Set its size to 446 x 148 points.
16. Set the position to be 12 points from the left of the Park Name rectangle, and from the right edge of the artboard.
17. Rename the layer Park Overview.
18. Make another duplicate of the Park Name rectangle and drag it below the Park Overview rectangle.
19. Set its size to 18 x 18 points.
20. Position the rectangle 12 points from the left and 20 points below the Park Overview rectangle.
21. Rename the layer Offleash Checkbox.
22. Press the T key and type Allows Offleash beside the checkbox.
23. Align this rectangle to be 12 points from the checkbox and 20 points below the Park Overview rectangle.
24. Set the color to black (hex code: 000000).
25. Select both the checkbox and the text layer you just created and create a group (Command + G). Name the group Option Offleash.
26. With the group selected in the Layers list, press Command + D to duplicate.
27. Using your down arrow key, move the new group 10 points below the Allows Offleash checkbox.
28. Make another duplicate and move it 10 points below the checkbox group you just created.
29. Now rename the group for the middle option to Option Fresh Water.
30. Open the Fresh Water option and select the text layer. Then double-click on the text on the artboard and change it to Has Fresh Water.
31. Rename the bottom option group Option Fenced.
32. Open the Fenced option group and select the text layer. Then double-click on the text in the artboard and change it to Is Fenced. (You can also just keep clicking on the text until you are able to select it.)
33. Next, let’s set up the Image Collection View. Create a rectangle that is 476 x 148 points and position it 12 points from the left, right, and bottom.
34. Set the fill color to white (hex code FFFFFF).
35. Rename the layer Collect View.
36. Create a rectangle that is 90 x 90 points and position it inside the Collection View against the top and left borders.
37. Set the fill color to D8D8D8.
38. Rename the rectangle Collection Image View.
39. Make four more copies of the Collection Image View and position them against the edge of the box on the left. See Figure 2-23.
Figure 2-23. Collection of images
40. Change the border color of the first Image View to 0066DC.
41. In the Layers list, select the Collection View and all the Collection Image Views and group them. Name the new group Park Images Collection.
42. Next, we need two final buttons—one for adding images, the other for deleting them.
43. Create a rectangle that is 124 x 28 points and is positioned 12 points from the right and 12 points above the Collection View rectangle.
44. Use the text tool to type the text Delete Image(s) and center it inside the just-created rectangle.
45. Group the text and rectangle, naming the group Image Delete Button.
46. Next, make a duplicate of the Image Delete Button group and name it Add Image Button.
47. Move the Add Image Button group to be 12 points from the left side of the Delete Image(s) button and 12 points above the Collection View.
48. Replace the text on the Delete Image button with Add Image. Make sure to realign it.
49. Select all the layers except the Left Sidebar group and create a new group named Park Details.
50. Now our mockup is complete, and should look like that in Figure 2-24.
Figure 2-24. Final mockup
Making the Prototype More Real
Before moving on to KeyNote, we need to make some changes to our prototype and create a few more artboards. Luckily, all the hard work is already done, so these changes are minor. All you need to do is follow these steps:
1. Update the park names and locations so they are all different. See Figure 2-25.
Figure 2-25. Park list with updated park names and locations
2. Let’s add an example image for each of the parks in the list. First, click the Image View for Harbourside Walk. Next, click the fill color box and click on the pattern fill button, which is the fifth from the left. Click the Browse button to find the picture you want. Finally, set the image to fill (in the drop-down menu below the Browse button). See Figure 2-26.
Figure 2-26. Fill pattern option that enables us to select an image
3. Repeat the process for the other parks in the list. When you are done, your new list will look something like that in Figure 2-27.
Figure 2-27. Park list with updated park images
4. Update the first Collection Image View (the one with the blue border) to be the same image as you used for the Harbourside Walk Image View.
5. In the Park Details panel, set the Park Name text field to Harbourside Walk.
6. Add North Vancouver to the Park Location text field.
7. Add the text Amazing Park you must check it out. inside the Park Overview section.
8. Your mockup should look like Figure 2-28.
Figure 2-28. Collection View with an assigned image
Reviewing the Features We Want to Display Using KeyNote
We’ll start by showing what searching for a park looks like. Then we’ll show what adding a new park looks like.
Searching for a Park
Let’s make a duplicate of the finished artboard . Select the artboard (click on the name Parks Main UI). Then press Command + D. This will create an exact copy of the artboard. Name the new artboard Searching by double-clicking on the current title, Parks Main UI Copy. Then follow these steps:
1. Hover over each of the park list’s items and then click the eye that shows up to hide that item.
2. Do the same process and hide the text for the name, location, and overview from the details panel.
3. Finally, hide all the Collection Image Views. When you are done, your Searching artboard should look like the following (Figure 2-29).
Figure 2-29. Initial empty app screen
4. Duplicate the Searching artboard and name it Search Results. Zoom out of your canvas a little bit by clicking the minus sign by the magnifying glass. Then drag the Search Results artboard to be below the Searching artboard.
5. Next, go through the search results layers and turn on the first Collection View Image that contains the image you just added. Turn back on the overview, location, name, and delete button (it looks like a red X).
6. Of all the park lists, turn on only Harbourside Walk.
7. Your two finished searching artboards should look like the following (Figure 2-30).
Figure 2-30. Searching and Search Results screens
Adding a New Park
1. Duplicate the artboard you used for Searching. Set its name to be New Park.
2. Set the first park list item to be visible.
3. Hide the Park Name and Park Location text fields.
4. Set the Image View to be a color background instead of an image (see Figure 2-31).
Figure 2-31. Fill color selector
5. Duplicate the artboard for New Park.
6. Insert the image FileImageSelection from the included files. Center it over the center of the artboard you just created.
7. Make another duplicate of the New Image artboard and name it Show Image. Enable the following:
a. In the Parks List item, show the Park Name and Park Location and set the Image View background to be the image provided—harbourside_park_ourbc.png.
b. In the image detail panel show Park Name, Park Location, Park Overview fields.
c. Turn on the first Collection View Image item. Set its image background to be the same image as in the Park List Image View.
8. When you are finished, the artboard for Show Image should look like the bottom panel of Figure 2-32.
Figure 2-32. The artboards we will be using in KeyNote
Exporting Artboards to Use Inside KeyNote
Exporting artboards is extremely easy in Sketch 3. You can export a complete artboard, groups, or individual layers. If there are any layers in a group that you would like to exclude from your export, simply toggle the eye that shows up when you mouse over a layer.
1. First, select the artboard you want to export from the Layers list by clicking on the artboard’s name.
2. Next, at the bottom of the Inspector, click “Make exportable.”
3. Select the checkbox for background color.
4. Finally, click “Export [Name of Artboard].”
5. Follow this process to export the following artboards: Search Results, Show Image, Image Selection, New Park, Searching, and Before Searching.
Using KeyNote to Make a Realistic Demo
Let’s look at a quick example of what can be done with KeyNote. If you spend enough time with KeyNote you could improve your prototype with animations (not covered here) to make it fairly realistic. This isn’t an in-depth guide to KeyNote, however, as Apple provides good documentation for that.
1. Open KeyNote and select a template with a white background.
2. On the right-hand side in the Slide Layout click Edit Master Slide.
3. Take a screenshot of your computer’s desktop.
4. Back in KeyNote, set the background to the screenshot image you just took, and choose “Scale to fill.”
5. Click the Done button at the bottom of KeyNote in the blue bar.
6. Select Insert ➤ Choose to find the New Park artboard. This will place the artboard in the center of the slide.
7. Select the slide in the slide list and press Command + D to duplicate it.
8. Use the text tool to type an H in the Park Name field. In the Options panel select the Text tab, then align the text to the left.
9. Now select the H you just created, hold down the Option key, and drag the H (to duplicate it) to where the park name would be in the Park List (Figure 2-33).
Figure 2-33. Shows how typing a letter should update both the detail and the park list for the selected park
10. Select the slide you just created and press Command + D to duplicate it.
11. Update both text fields to include the letter a.
12. You can repeat the same process for each letter or fast track it. I will take the fast-track approach in this guide.
13. Duplicate the last slide and add rbourside to both text fields.
14. Duplicate the last slide and add Walk to both text fields.
15. Duplicate the last slide and use the text tool to type No in the detail screen’s Park Location field. Duplicate that text and move it to the place in the Park List where the location should go.
16. Duplicate the last slide and add rth in both spots.
17. Duplicate the last slide and add Vancouver in both location text fields.
18. Duplicate the last slide and type Amazing you must check it out. inside the Park Details field.
19. Create a new slide by pressing the + button and use the master slide with your desktop background.
20. Insert the Image Selector artboard.
21. Repeat step 19.
22. Insert the Show Image artboard, which will show what the new park entry looks like after selecting an image and closing the file-selector dialog.
23. Repeat step 19.
24. Insert the Before Searching artboard.
25. Repeat step 19.
26. Insert the Searching artboard.
27. Use the text feature to type H in the search box.
28. Duplicate the last slide.
29. Add ar to the search field.
30. Repeat step 19.
31. Insert the Search Results artboard.
32. Select the very first slide, then click the Play button; click the arrows to cycle through all the slides.
33. That’s it! We are done with our first prototype. Feel free to continue playing around with your slides to make the flow look more realistic.
Conclusion
This was definitely a long chapter, but we have covered many things. This includes creating a simple prototype application using Sketch, as well as a quick overview of using Keynote to see how the app will function in the real world. Resist the urge to skip prototypes and jump directly into coding. The more prototypes you do the better your applications will become. If you haven’t watched Apple’s keynotes on prototypes, you should take a break from reading now and spend some time watching them:
1. Prototyping: Fake It Till You Make It https://developer.apple.com/videos/play/wwdc2014-223/
2. Designing for the Future Hardware https://developer.apple.com/videos/play/wwdc2015-801/
3. Designing with Animation https://developer.apple.com/videos/play/wwdc2015-803/