App Creation

May 7, 2014 § Leave a comment

With my app design I wanted to go a minimalist route, using the same colour scheme as I’ve used throughout my design process thus far. A dark grey background will run fluently through out the app, as in all my other designs; this seems a logical thing to do, as well as it complimenting the design well. I will retain the same typeface as I have done with all my designs: Helvetica light, with a widened tracking. The app colour scheme is a basic white and grey, with dashes of my diagrams colour scheme: cyan, magenta, yellow and green. The layout comprises of the menu bar at the top of every screen, containing any relevant icons (depending on the page), separated by a white line which fades at the ends. This white line is used throughout the app at various lengths and fadings.

App Features:

top bar buttons (search etc.), swipe out menu, scroll down on friends/journal (with added fade)
Today / Data : buttons/icons/statistics > link to data – tap to add/remove data – pinch to zoom ___ Ability to turn on/off social marks (facebook/twitter/flux) to bring up the icons – with the journal button.

The days will only display the information relevant for that day, so if you didn’t cycle that day, there is no summary for cycling.
Map routes and data can be separated via the pressing of coloured buttons, representing modes of transport.

I created a better key for the diagrams, where you can instantly tell which colour corresponds to each mode of transport via the icons on the coloured buttons.

‘Buttons’ to switch on/off modes of transport on diagrams and maps

– ‘Simplify’ icon swtich to add/remove diagram details, allowing for pure design view over data view


The comparison feature can show you two days/weeks/months/friends, and gives you the ability to compare the data. For example, if you go to the ‘friends’ page, there’s a search icon, allowing you to search for specific people

Where there’s the availability to use one of the app’s features through another, the feature icon appears at the top left of the screen, predominaintly being ‘compare’ and ‘search’


Here’s a high quality PDF to view of my app screens

Screen Shot 2014-05-13 at 16.53.55

The top menu bars + icons

Screen Shot 2014-05-13 at 16.56.29

The swipe out menu used

Screen Shot 2014-05-13 at 16.56.37

unused variations of the menu

Screen Shot 2014-05-13 at 16.57.21

Variations of the time switch

Screen Shot 2014-05-13 at 16.58.56

The ‘Today’ main screen, showing the ability to turn on/off specific routes/transports, as well as view the social journal entries


Screen Shot 2014-05-13 at 16.58.32

Variations for the Time / Cost / Distance icons

Screen Shot 2014-05-13 at 16.58.36

Layout variations of the social bubbles, displaying time and icon also


Screen Shot 2014-05-13 at 16.30.39

The new icons representing each mode of transport, with a overall total number in the middle


Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

What’s this?

You are currently reading App Creation at Leo Patterson.


%d bloggers like this: