User Interface:

Stepout app

APP DESIGN CONCEPT

OBJECTIVE

Using interface design principles, the three application screens built consist of a login screen, step counter, and to-do list. Creating a step coounter that associates itself with zen and positive reinforcement was critical in establishing the design.

LOOK & FEEL

It was important to capture a calming feel that was both inviting and beautiful at the same time. Minimalistic and clean icons were crucial in keeping this design up to the latest trends while not overwhelming the user. Cool colors are intended to blend with the stunning stock imagery to capture a zen feel.

LOGIN

The login screen follows a hierarchical structure and is both minimalistic and user friendly. Less is more in this case, the more familiar — the better so users can use with ease.

Step Counter

The design continues a minimalistic trend. The counter wheel is made simple and features a nice gradient to accentuate the progress being made as it goes up. Colour accents and outdoor imagery theme continues.

Purpose

The step counter section allows for users to access their progression in steps. Here they can track their daily goals and customize what they see.

To Do List

Instead of a schedule built primarily on text, I chose to highlight the icons so the to do list appeared more visually appealing. Simple swipes guide you throughout your reminders as you can customize your data.

PURPOSE

The idea of the to do list, is to give users a section where they can store their goals, schedule, and reminders that are exercise related.

ICONS & COLOR CHOICE

COLORS

Pantone colors were chosen as they work well together and look great on the web. The colors aren’t too loud or vibrant to keep the flow of the design smooth and consistent.

ICONS

Icons are made flat and scalable, while being easy to understand. They are completely customized by me and made to look familiar for users to use with ease.

BUTTONS

Buttons are colored from the existing color palette, turned into a gradient. The purpose here is to make them look welcoming and clickable. Added drop shadows provide a sense of depth.

TYPOGRAPHY

COLORS

Pantone colors were chosen as they work well together and look great on the web. The colors aren’t too loud or vibrant to keep the flow of the design smooth and consistent.

ICONS

Icons are made flat and scalable, while being easy to understand. They are completely customized by me and made to look familiar for users to use with ease.

BUTTONS

Buttons are colored from the existing color palette, turned into a gradient. The purpose here is to make them look welcoming and clickable. Added drop shadows provide a sense of depth.

QUICK SKETCHES

IDEATION

The intent with quick sketches was just to get ideas on paper and begin to create structure; a blueprint, if you will.

TIME

As I normally do in my sketches, I set a timer for two minutes. This allows me to not shy away from drawing whatever comes to mind. It’s both a creative and speedy process.

MATERIALS

Go to the dollar store, buy a sketch book for a buck, and Sharpie for an additional $1 and let the ideas flow. This helps give you reference and structure before turning on the computer.