Mockplus- Design, prototype and deliver your digital future
Get Started for Free
Blog > Samples > Mockplus prototype samples > Mockplus Sample Design – Steps (App, Sports & Health)

Mockplus Sample Design – Steps (App, Sports & Health)

Feb 2, 2018 99691

Steps is a fitness app which can track your steps throughout the day, set a goal and offer professional fitness guidance for you. And its “Activity” page has been designed with an excellent interaction that the color and data of the display area located upper a column chart will change correspondingly when you click any data in this chart. In Mockplus, you can easily achieve this by choosing a “Set Color” command for a Shape component and a “Set Text Color” command for a Label component.

Let’s see it in GIF at first:

Steps

Click here to preview it online: http://run.mockplus.com/ppINGDXc2KnSZJqN/index.html

UI flow in large size:

StepsPages of this prototype: Start, Home, Log In, Sign Up, Activity and Profile, etc.

The project file can be downloaded here.

All pages of the album (10 pics in total) can be downloaded from here.

Enjoy it!

Free prototyping tool for web and mobile app design
Get Started for Free
Free prototyping tool for web and mobile app design
Get Started for Free
Free prototyping tool for web and mobile app design
Get Started for Free

Summer ye

In- house content editor, specialize in SEO content writing. She is a fruit lover and visionary person.

What's Mockplus?
Mockplus Cloud

Uploads design files from Sketch, Figma, Axure, Photoshop, and Adobe XD into our design handoff tool.

Mockplus RP

A free online prototyping tool that can create wireframes or highly interactive prototypes in just minutes.

Free web & app prototyping tool
Create wireframes or highly interactive prototypes in just minutes.
No time limit Up to 10 users
Get started
No, thanks, i'm good.