Have been working on an assignment for a couple of months now [ had a break in between because the client had some fresh projects to tackle so the design work got stalled ]. The engagement entailed logo design, icon design and screen design/web design. The client is in the online interactive media business and software development in Europe and has developed a new online collaboration tool, which needed a logo, icons for the interface and web design for the online screens.
The logo has been designed, finalized and final files have been delivered.
Now the icons and the screens have to be designed and the main guidelines are to keep the design simple and sleek – professional – with a dash of color. Of course, what also has to be kept in mind is that the design needs to be an enabler and at the same time must be attractive.
The client has shown preference for the glassy/glossy look but in my opinion, for the software product it should not be overdone otherwise the images will be heavier and if it’s too colorful, it will take away the focus from the software’s functionality. The client like my previous icon work, which looked like this:
But these were all 128×128 pixel icons and looked better in their larger state. Smaller icons, like the software would require in this particular engagement, will have to be not more than 64×64 pixels maximum – I will have to design 16×16 and 32×32 pixel icons in this case.
The icons need to be designed for the following heads:
- upload / change document
- help
- folder opened
- folder closed
- folder add new
- folder shared
- document default
- document add new
- document shared
- share with others
- change group name
While I would to try something new, I know that as a designer, I need to state the obvious in the simplest way possible. After all, I don’t want the end user of the software to get confused when she/he looks at the icons and tries to figure what the heck it means!
So, a document is always signified with a piece of paper with one of the corners slightly curled to give it character. A folder usually has the same shape like the icons of our windows folders – there are variations where the corners have been made more round or more sharp and of course the colors can be manipulated.
Similarly, I will have to create icon shapes for the other icon heads. First some rough sketches on my Wacom Intuos 3 and then the final vector icons with suitable colors.
UPDATE I: 3rd October, 2005
Got started on the icons and came up with something and sent it to the client for review – just as a starting point. We need to re-start the conversation regarding the design process and I need the client to be as involved as possible. So whether the icon that I’ve sent is a good one or a mediocre one or a bad one, one thing is guaranteed – I’ll have a clearer picture of what the client needs. I worked on only one icon – for “upload document” – as shown below in two sizes.
This icon uses the logo of the company/product and two more elements to depict “upload” and “document”. The larger version has some distinctions from the smaller one. For example, the smaller one has a “outer-glow” for the arrow to help create better contrast when put together with the “document”, the arrow in the larger icon has a “bottom-glint” to show light is coming from the bottom of the icon.
Of course, this is just one example with only one set of colors. Depending on the background color of the interface on the software/website, the colors will change accordingly – the icon needs to be clearly visible and at the same time needs to be simple and clean – not too many effects.
UPDATE II: 5th October 2005
The client does not like the dark look of the icon – it needs to be lighter [ “like white with a shadow” and “like Macromedia and Adobe do with their icons“].
So I will be doing a lighter version and sending that across when it’s ready. Till then I will also wait to sort out the slight issue that’s come up – when I started the engagement, the deal was for 11 icons. Now, because there was a break in between and we’ve picked up the design thread once again [ maybe the client’s requirements have changed ], the icon list has grown to 31.
UPDATE III: 6th October 2005
Used the color of the logo and incorporated into the icon. Made for “upload-document” – with smaller icons 32×32 pixels, one cannot get very creative with the shapes and designs – its too small! Sent the following file to the client, feedback awaited.
UPDATE IV: 16th October 2005
After the previous correspondence – where the client suggested that I increase the size of the ‘upload’ arrow, I have not heard from the client – presumably they are busy with their Japanese client assignment themselves! I like it when my clients do well! Nonetheless, I have created some variations of the ‘upload arrow’ and came up with the following icons representing ‘upload-document’:
I have experienced that the more variations you give to a client, the more they benefit in terms fo clarifying what they “DON’T” like/want.
