Running Exercise App Interface Design

Reading Time:

////////// Subscribe

////////// Download the project file and follow along

How do you design a User Interface for an exercise app? Today I will walk through the process of designing a custom concept for an iOS running app. Learning UI Design can be hard when you are a beginner, but it doesn't have to be so complicated. In this design tutorial, I will take you step by step through the concept, creation, iteration and completion of a simple UI, using The popular design software Sketch for mac.

Through the design tutorial, I am going to be thinking on my feet and making design decisions as I go. Pay attention to the preparation of the project and how I have already made some of the important decisions before I ever manipulate a pixel. Color pallet, typography choice, the layout of the screen, and needs to satisfy the project and client. The more decisions that you can make before starting the smoother the process will be.

The finished product is far from perfect but the major pieces of the design are all there. The design is fresh and light, it matches the colors of energy and trust with the firm ridged structure of the typography. Also pay attention to the conscious focus on User Experience throughout the design tutorial. I make decisions based on the fact that the user will be running, bumping around, sweaty, focused less on the interface and more on their exercise. Therefore the design needs to be simple, CTA's need to pop, and icon weight and size needs to be sturdy.

I hope this tutorial was a help. Please download the project file and rework the project in a new and fresh way. Change the color pallet, change the fonts used, solve the problem in a completely different way and then post a link to your work in the comments. I am really excited to see what you come with and how it differs from mine.

////////// Try Out Sketch


////////// Website
////////// Subscribe:
////////// Social
////////// Equiptment
Vlogging Camera - Canon EOS M3:
Drone- DJI Phantom P3-STANDARD Quadcopter Drone with 2.7K HD Video Camera

Leave a comment

comments powered by Disqus

Contact Me