Tag Archives: Developer One

Metro Tasks For iPad

The client asked to create an entire user interface and art work for their new iOS app, Metro Tasks.

They requested to have everything available on the screen without the user ever being distracted by a slide in/out, etc. It was about getting things done without distraction. They requested folders around a desk feel and the folders should have some depth to them. Every single element is custom made from scratch (Except the Facebook and twitter logo).

metrotasksuielements

Above screenshot showing a collection of a few custom ui elements I have created.

metrotaskappiconThe application icon in various non-Retina resolutions.

metrotasksland Lanscape ScreenshotmetrotasksportPortrait Screenshot

Tools/Skills Used: Adobe Illustrator, Adobe Photoshop

Requirements/Considerations: All shapes had to be created in a vector like fashion to avoid having to redo most the work when it is time to create the retina version of the icons. My approach was to start with the smallest resolution first and then migrate to the largest resolution by adding additional detail.

 

Task Icon For iOS

taskiphoneicon

Creating this iOS icon was a lot of fun. The base shape was obviously the checkmark. I was given entire freedom for this project, the only restriction was to keep the shape of the checkmark icon. The question was, how can you possible add ‘zing’ to a boring checkmark?

With that question in mind I started by placing the checkmark into a round shape which helps ‘smoothen’ out those pesky sharp edges of the checkmark shape.

In regards of the ‘zing’ I decided to surround the circle with non distracting colors and went with a nice punch of blue for the checkmark and circle element. After adding some depth it really turned into an attractive checkmark icon with ‘zing’.

Tools/Skills Used:
Adobe Photoshop

Challenges/Considerations:
I used primarily shape layers to easily create the various resolutions  for this app icon.