UI mockups · Mobile app
iOS fitness app UI mockup
An iPhone activity tracker in the iOS 17/18 look: large-title navigation, activity rings, widgets, inset grouped lists, a tab bar, a settings sheet, an action sheet and an alert over the keyboard.
The 5 screens
iOS fitness app: Summary, Workouts, Workout detail, Settings, New workout. Each screen below is drawn from the mockup itself, with the headings, buttons, fields and lists that are on it.
1Summary Summary
Phone screen with 3 labels, 3 progress bars, 2 home widgets, an avatar, a card, a chart, an inset grouped list, a navigation bar and 3 more component types.
- Headings
- Summary · Trends
- Navigation
- Summary · Workouts · Sharing
- Lists and columns
- Move ↑ 6 of 7 days · Exercise ↑ 32 min a day
- Text and labels
- You’re 80 calories away from closing your Move ring. · Activity · Activity rings · Move 420/500 CAL · Exercise 24/30 MIN · Stand 10/12 HRS · Steps · Heart Rate
2Workouts Workouts
Phone screen with a badge, a card, a context menu, an icon, an inset grouped list, a label, a navigation bar, a paragraph and 3 more component types.
- Headings
- Workouts · This Week
- Navigation
- All · Run · Cycle · Strength · Summary · Workouts · Sharing
- Fields
- Search workouts
- Lists and columns
- Indoor Cycle · 32 min · Functional Strength · 45 min · Yoga · 20 min · Share Workout · Add to Favorites · Edit Route · Delete
- Text and labels
- Outdoor Run · Today · 5.21 km · 29:41 · 412 CAL
3Workout detail Workout detail
Phone screen with 3 labels, 2 stat / KPIs, 2 switches, an activity indicator, a button, a map, a navigation bar, a paragraph and 3 more component types.
- Headings
- Outdoor Run · Workout Settings
- Navigation
- Open · Distance · Time · Calories
- Buttons and actions
- Start Workout
- Text and labels
- Distance 5.21 km · Avg. Pace 5′42″/km · Goal · Distance goal · 5.0 km · Auto-Pause · Audio Feedback · Syncing with Apple Watch…
4Settings Settings
Phone screen with 2 switches, an action sheet, an inset grouped list, a label, a navigation bar and a picker wheel.
- Headings
- Settings · Goals
- Buttons and actions
- Cancel
- Lists and columns
- Move Goal · 500 CAL · Exercise Goal · 30 MIN · Reset Move Goal · Reset All Goals
- Text and labels
- Stand Reminders · Weekly Summary · Daily Coaching Time
5New workout New workout
Phone screen with an alert, an inset grouped list, a keyboard, a navigation bar, a text input and a toolbar.
- Headings
- New Workout · Details · Discard Workout?
- Fields
- Evening Run
- Buttons and actions
- Keep Editing · Discard
- Lists and columns
- Type · Outdoor Run · Date · Today, 6:30 PM
- Text and labels
- Your changes to this workout will be lost.
Open and edit it
The ios fitness app mockup is free on every Tierslate plan. Opened in the editor it becomes a board of your own: every component is a real shape you can move, resize, retext or recolour, you can add screens from the web, iOS and Android component library, and React code can be generated from the screens. In the editor it is under Templates, on the Mockups tab.
More mockups
- Food delivery app UI mockup - Browse restaurants, pick dishes, check out and follow the courier - four mobile screens.
- Banking app UI mockup - A mobile bank - balance with quick actions and recent activity, a transaction detail and a send-money flow.
- Social feed UI mockup - A photo-sharing app - stories and a post feed, a new-post composer and a profile with stats and a photo grid.
- Music player UI mockup - A mobile music app: a library with playlists and recently played tracks, and a now-playing screen with album art, progress and playback controls.
- Android mail app UI mockup - A Material 3 (Material You) email client: search bar, filter chips, inbox list, FAB, navigation drawer, message view, compose with a dialog, a schedule-send bottom sheet, and a tablet layout with a navigation rail and date/time pickers.
- Ride hailing app UI mockup - A mobile ride app: pick up and destination over a map, a choice of ride types with prices, and a live driver-on-the-way screen.