iron-man-preview

Just like Tony Stark

Lets be honest, building software is nowhere near as cool as building flying suits made of iron, but they both kinda go through similar stages. These are the stages of development and refinement.

6 months ago when I first put my initial concept together for the Icon Pocket adobe CS/CC extension I thought it looked awesome. I wanted to create something bold that had presence and would maybe bring a little colour into the gloomy user interface of the app it was run in.

mark1

Reflecting back on my initial concept now, it feels a little like Tony Starks mark 1 Iron Man suit, bulky looking and generally not properly thought out. I guess the reason for this was because at the time the overall idea of what the Icon Pocket service could be was not totally clear in my head. I was excited about building something new so my focus was all about making the extension look cool, rather than trying to come up with something practical and safe.

Adding the right colours

As my idea for Icon Pocket started to grow I began to work more on the branding. I always try to use a different colour for every project I do and by this point I had decided Icon Pocket was going to use teal as its prime brand colour. This colour choice was pretty important as it was going to be the key to making the extension feel related to the main Icon Pocket site.

The major design changes between mk 1 and 2 was the introduction of the Icon Pocket brand colours, the moving of the search bar so it felt less disjointed from the icon results, and the fact it showed 5 complete rows of icons not 4 and a bit.

mark2

This version lasted a few months until I realised the big colourful menu buttons basically killed the design. It was very distracting but above all took up unnecessary space that could be used to show more icons. Thats when I started to think about stripping more clutter away, I needed to make the focus the icon results and the search bar. Everything else had to be massively toned down.

Stripped back

A month ago I put the final touches to the mk3 version of the extension, the version that will ship with Icon Pocket in a few weeks. That big boisterous menu was gone and replaced by a simple footer menu and an extra row of icons. The un-active like hearts are now hidden until mouse over so they don’t distract the user when browsing. The outer padding was thinned so I could make the icon tabs slightly bigger and search field made slightly taller to give it more presence.

mark2

Did I do the right thing by initially giving myself the freedom to just go crazy with the idea and create something over the top?

Absolutely!

You see, I think its important when you have that first spark of creativity to just run with it, you have no idea where it will take you but in the early stages it doesn’t matter. The point is you’re going to make lots of discoveries, some good ones, some not so good.

Ultimately I guess what Im trying to say is, I think its better to trim an over the top concept back than it is to try and pad out a flimsy one.