In this tutorial, I’ll teach you how to design a simple and easy-to-use iOS fitness application for tracking outdoor running and cycling. Besides the iOS application, I’ll give you a design example for the Apple Watch interface as well.
At the end of this tutorial you will be able to design an iOS application with different screens and views in Sketch. We will be using some basic and intermediate techniques in Sketch, so let’s get started!
Tutorial Assets
You will need these assets in order to follow along:
- Icons from The Noun Project
- User avatars from User Inter Faces or Content Generator Sketch Plugin
- Avenir Next font, which is a system font in iOS and Mac OS X
Quick Disclaimer
Before we start, I should point out that this concept is entirely theoretical. In the case of a real-world project, it would require much deeper market and user behavior analysis, before we could turn this into an actual, usable mobile application. I’ve been running and cycling regularly for four years now, so I created this concept to show how a fitness application would look like from my perspective.
Setting Up the Artboards
We’re using Sketch, a design application originally created for designing interfaces and nowadays the fastest and easiest way to design for iOS.
Step 1
After we open Sketch, let’s select the Artboard (A) option within the Insert menu.
Sketch Mirror
On the left side panel, I recommend choosing the iPhone 6 dimensions, but if you have a different iPhone you will find it’s better to choose that one. This is important, because with the help of Sketch Mirror we can immediately see our work, in real time on our iOS device, without exporting or transferring images. Sketch Mirror is a crucial part of my design workflow, because it allows me to see and feel the final result of my work within seconds.
To activate Sketch Mirror, you have to download the Sketch Mirror app from the App Store, then click on the Mirror icon within Sketch (make sure your devices are on the same Wi-Fi network or connected via a USB cable).
Creating the Tab Bar
Since the introduction of iPhone 6 and 6 Plus, it’s almost impossible to use the hidden navigation button in the upper-left corner, because most users won’t be able to reach it with one hand. For this reason I’ve placed the primary navigation at the bottom of the screen; always visible and easily reachable.
Step 1
Let’s create a 100px tall rectangle, full width, at the bottom of the screen.
Now, let’s divide this rectangle so we have five equal rectangles, in which we can place the navigation icons later. I recommend you give every rectangle a slightly different color in order to clearly see the borders of each one.
Step 2
Let’s create an another 50x50px square for the icons. Below we can add the labels for the different screens: Activities, Challenges, GO, Friends and Profile. For these labels, I set Avenir Next Regular with 24px font size and 24px line-height.
Step 3
Now we can place our icons into these small squares. Make sure that every icon is either 50px tall or 50px wide. For our profile icon, let’s create a 50x50px circle with our Oval tool (O) and select image fill on the Fills panel.
Step 4
Hide the guide rectangles by clicking on the small eye icon next to the layers.
For the background of our tab bar I chose a full white #FFFFFF color with 70% opacity and 8px background blur. I also added a 1px #B4B4B4 line with the Line tool (L) as a visual separator at the top of the tab bar.
For the inactive tab icons and labels, I recommend a shade of gray #666666 instead of a simple black, and for the active part, let’s set a vivid red color like #FF3B30.
Designing the GO Screen
The majority of our users would open the application just before they are ready to run or cycle, so the first thing they’ll want to do with the app is start tracking their workouts. This is the reason why we start designing the GO screen first, allowing the user to start their training immediately.
Before any outdoor activity, I always check the weather in advance, just to know what should I expect, including the wind strength and the time of sunset. In my view, these details are truly essential if you are outdoors, so I’ve designed a built-in weather section on the GO screen. This way users don’t have to check a weather application every time before they open our fitness app.
Step 1
First, we will need a white iOS status and navigation bar from the Sketch iOS UI Design template, which you can find under File > New From Template > iOS UI Design.
Tip: because the Sketch iOS UI Design template provides us 1x assets we need to convert them into 2x resolution. This can be easily done with the Scale tool.
Step 2
For the background color of our navigation bar I wanted to choose a vivid and vital color, which will inspire users to move and act immediately. So I picked a flat, but still vivid red, #FF3B30, which is meant to grab your attention the first time you see it.
For the GPS strength indicator I used a simple gradient from #15FF00 to #15FF00 in a rounded corner rectangle.
On the opposite side, I placed a bicycle icon, to easily switch between running and cycling mode.
Step 3
Now, let’s create our weather forecast at the top of the screen. Because most of our workouts won’t usually last longer than three hours, we will provide a three hour forecast with additional information about the wind strength and sunset time. I recommend a light gray like #ACACAC for this type of information, because we don’t want to over emphasize the weather forecast.
Step 4
As a visual separator between different kind sections of the interface, let’s draw a #ECECEC rectangle, with 54px height and 100% width.
Step 5
Before the start of the workout, it can be motivating to set a goal. This can be in the form of either a distance, time or a new average speed record. To display these goals let’s create two separate circles with the following dimensions: 270x270px and 230x230px.
After placing the circles, drag the first one and drop it into the second one on the layer panel. In order to create a ring shape select the ‘Subtract’ option.
For the background color of this ring let’s create a linear gradient from #AAFFA9 to #11FFBD and set the opacity to 20%. This will be the inactive state of our ring.
For the active part, let’s duplicate our shape by selecting the shape on the layer panel > Right click > Duplicate (alternatively we can duplicate with ⌘-C and ⌘-V, too).
Now we will need the Vector tool (V) to create a mask on our active circle.
Tip: pressing down the Shift key while using the Vector tool helps us to create perfectly straight lines.
Let’s move this layer under the active circle, then set it as a mask layer. Don’t forget to turn off the border fill of our vector shape.
For the fine details, let’s add two extra 20x20px circles to our mask shape, giving us a nice rounded edge at the end of the active ring.
Pro tip: For the text at the center of the ring, let’s set a small amount of inner shadow.
Now, the only missing thing from our GO screen is the GO button, which will be a 120px tall rectangle with #FF3B30 red color.
Creating the Activities View
On the Activities screen we can quickly browse through workouts from our friends or ourselves. After tapping one of these workouts, we can get a more detailed look, including an interactive graph.
At the bottom of this detailed look, we will display the overall results of the selected workout, while at the top, you can see the specific results depending on where we touch the graph (indicated with a light vertical bar).
Step 1
Like before, we will start with our navigation bar, adding an extra ‘plus’ icon to allow the user to manually add workouts.
Step 2
In order to switch between our friends’ workouts and our own, we need to create a secondary navigation bar. Let’s select the Rectangle tool (R) and create a 90px tall rectangle with a dark blue #1F2033 color fill.
Now create another 22x22px square and rotate it by 45 degrees.
We can group these two layers like we did with our goal rings. Make sure that you’re using the Subtract option instead of Union.
Tip: notice the slight change in terms of opacity between the active and inactive secondary navigation item.
Step 3
For the detailed look, we will create another rectangle with the same dark blue background. But this time, the height will be 387px. For the guidelines let’s use the Line tool (L).
Step 4
To visually display the altitude difference during the workout, we will need to create a custom shape with the Vector tool (V). There is no specific technique for creating this graph, so let’s tweak the Bézier curve until we feel it is right.
Step 5
Besides the level difference, we can also display the changes in speed during the workout with a colorful curve, where the red and the green areas indicate the pace.
The method is the same as before with the Vector tool and Bézier curves. For the fill color I used #FF3B30 for red and #22EA05 for green (green means faster than average pace, red means slower.)
Step 6
With the help of the Content Generator Sketch plugin, we can easily add different profile pictures to our avatar circles.
Now we are ready with the Activities screen as well!
Designing the Challenges Screen
On the Challenges screen we can see the particular challenges we participate in. During the design of this screen, I combined an Apple Watch-inspired circular design with a card-type design, so the user can rearrange the challenges based on their importance.
Step 1
After designing the previous screens, it will be a lot easier to create this one, because we’ve already designed most of it. First, let’s create a new Artboard (A) and copy the navigation bar and the secondary navigation bar from the Activities screen.
Step 2
To create the cards, we will need a 355x400px rectangle.
Step 3
As a background color, I used a simple white, but in order to visually separate the cards from the background I added a little bit of black shadow with 20% opacity.
Step 4
In order to be consistent and coherent throughout the application it’s important to show the users the same kind of information in the same way. As you may remember, we’ve already designed a small ring for indicating goals on the GO screen, so now we can use the same technique here.
Tip: if you would like to get more inspiration for nice UI gradients, I recommend you check uigradients.com.
Step 5
The last still missing element is the tab bar at the bottom of the screen, so let’s copy that from the previous screen and make sure we modify the active state of the tab.
Creating the Browse Challenges Section
On the Browse Challenges screen, we can quickly scroll through the most popular and recent challenges, where we can see how many days are left for completing a particular challenge and how many members are participating in it.
Step 1
As always, we can duplicate the familiar design elements from previous screens, but don’t forget to modify the secondary navigation bar.
Step 2
Let’s create the basic information about a challenge and add a custom badge as motivation. This will be the reward when someone completes the challenge.
Note: For this tutorial, I only created one simple badge, but in a real world project I would spend a lot more time with designing different, highly-polished badges.
Tip: Notice the small differences in size and colors of the text, helping us to create a clear hierarchy.
Step 3
To visually display the remaining time let’s create a timeline. This bar will have 40px rounded corners and a #F5F5F5 background color.
Step 4
For the active part of this bar, let’s copy our previous rectangle, make it a little bit shorter and set a linear gradient from #44FF30 to #FFDA30.
Step 5
After duplicating this section and copying the tab bar from the previous screen we are ready with the Browse Challenges section!
One more thing: Apple Watch
Last, but not least, I created an Apple Watch interface for our application. This design concept is based on the Apple Watch Human Interface Guidelines. These guidelines are provided by Apple for developers and designers to have a better understanding about the possibilities of this new platform.
I’ve created four different watch interfaces for our fitness application. In the case of the first concept I’ve made a highly customizable screen, where you can rearrange the information based on your interests. Furthermore, the color of the most important (biggest) data is always changing depending on how far are you from your initial goal. In this case the green color means that you have almost accomplished your distance goal.
Congratulations!
We’ve completed our iOS fitness application design. Having followed this tutorial, I hope that you are more confident in using Sketch for mobile application design.
Feel free to download the full Sketch file, to have a more detailed look at the design techniques we used. I’m curious to hear how you found the process, so don’t hesitate to leave feedback and questions in the comments.
