Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
  1. Web Design
  2. Sketch

Designing an iOS Fitness Application with Apple Watch Compatibility

Read Time:11 minsLanguages:
Final product imageFinal product imageFinal product image
What You'll Be Creating

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:

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.

Setting up the ArtboardsSetting up the ArtboardsSetting up the Artboards

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.

Choose iPhone 6 sizeChoose iPhone 6 sizeChoose iPhone 6 size

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

Using Sketch MirrorUsing Sketch MirrorUsing Sketch Mirror

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.

Creating the Tab barCreating the Tab barCreating the Tab bar

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.

Tab bar guidelinesTab bar guidelinesTab bar guidelines

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.

Profile pictureProfile pictureProfile picture

Step 4

Hide the guide rectangles by clicking on the small eye icon next to the layers.

Hideunhide layersHideunhide layersHideunhide 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.

Tab bar backgroundTab bar backgroundTab bar background

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.

Active and inactive iconsActive and inactive iconsActive and inactive icons

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.

Using iOS UI Design templateUsing iOS UI Design templateUsing iOS UI Design template
Copying the Navigation barCopying the Navigation barCopying the Navigation bar

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

Using Scale in SketchUsing Scale in SketchUsing Scale in Sketch

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.

GPS indicatorGPS indicatorGPS indicator

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.

Weather sectionWeather sectionWeather section

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.

Designing the weather sectionDesigning the weather sectionDesigning the weather section

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.

Creating the goal circleCreating the goal circleCreating the goal circle

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.

Subtract optionSubtract optionSubtract 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.

Inactive backgroundInactive backgroundInactive background

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.

Using the vector toolUsing the vector toolUsing the vector tool

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.

Masking layersMasking layersMasking layers

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.

Fine detailsFine detailsFine details

Pro tip: For the text at the center of the ring, let’s set a small amount of inner shadow.

Text shadowText shadowText 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.

Designing the GO buttonDesigning the GO buttonDesigning the GO button

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.

Creating the Activities screenCreating the Activities screenCreating the Activities screen

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.

Designing the secondary navigation barDesigning the secondary navigation barDesigning the secondary navigation bar

Now create another 22x22px square and rotate it by 45 degrees.

Secondary navigation bar detailsSecondary navigation bar detailsSecondary navigation bar details

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.

Using the Subtract optionUsing the Subtract optionUsing the Subtract option

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

Activities detailsActivities detailsActivities details

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.

Displaying the altitude differenceDisplaying the altitude differenceDisplaying the altitude difference

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.

Displaying the pace differenceDisplaying the pace differenceDisplaying the pace difference

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

Pace curve colorsPace curve colorsPace curve colors

Step 6

With the help of the Content Generator Sketch plugin, we can easily add different profile pictures to our avatar circles.

Using Content Generator Sketch pluginUsing Content Generator Sketch pluginUsing Content Generator Sketch plugin

Now we are ready with the Activities screen as well!

Final Activities screenFinal Activities screenFinal Activities screen

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.

Challenges cardsChallenges cardsChallenges cards

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.

Card detailsCard detailsCard details

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.

Displaying our goalsDisplaying our goalsDisplaying our goals

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.

Final Challenges screenFinal Challenges screenFinal Challenges screen

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.

Designing the Browse Challenges screenDesigning the Browse Challenges screenDesigning the Browse Challenges screen

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.

Designing the timelineDesigning the timelineDesigning the timeline

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.

Timeline colorsTimeline colorsTimeline colors

Step 5

After duplicating this section and copying the tab bar from the previous screen we are ready with the Browse Challenges section!

Browse Challenges finalBrowse Challenges finalBrowse Challenges final

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.

Apple Watch interface designApple Watch interface designApple Watch interface design


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.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.