Ben Tattersley's profile

Tumblbox 2 Icon + UI design

Icon Design
The old icon designed for tumblbox (version 1)  didn't attract attention from users and tumblbox 2 needed to grab the user's attention when they saw it in the HP/Palm App Catalog.
This was the first of the new icons and it built on the old style with a box and a t signifying 'tumblr' the platform the app is built for. However the design does not effectively communicate materials as the old one did so I decided to take a different approach
This icon was designed to be bold and attention grabbing, however this was done at the expense of a clean, appealing design. The tumblr t sits inside of a B (standing for [t]umbl[b]ox).
This icon is the final icon for tumblbox at the time of posting. It uses a t set in webOS' default font (Prelude) on a rounded rectangle partially obscured on one side by scratches. These signify that the app is never completely finished and that it will always be supported and updated as is reasonable. This icon stands out on the user's screen without being an eyesore.
UI Design and Coding
This is the photoshop mockup for the dashboard screen. This screen shows the posts of all the blogs that the user 'follows'  ordered chronologically. The challenge was to find a way of simultaneously displaying all the relevant data to the user and showing easy ways to get to additional blogs belonging to the user. A tab system demonstrates an effective way to do this.
In order to facilitate my idea I needed to write my own user interface framework. I did it in a general way using no styling specific CSS which enabled me to skin every component differently. While the app is only going to be available for webOS I avoided platform specific code which enables my framework to be used in other applications too
Tumblbox 2 Icon + UI design
Published:

Tumblbox 2 Icon + UI design

UI and icon design for my mobile application 'Tumblbox 2' to be released soon on to the palm app catalog

Published: