Designing a suite of desktop icons
The brief
I was asked to design a set of icons for a desktop application that uploads files to a web application. The required icon sizes were 128 x 128, 48 x 48, 32 x 32 and 16 x 16.
Initial thoughts
I began by thinking about the concept of uploading something from a local machine to a server somewhere. I tried to consider how a user might perceive what was going on. Technically, what was occurring was a local machine uploading multiple files to a server. This might be interpreted by a technical diagram illustrating a client machine, an arrow, and a cloud or database. However, this means very little to an everyday non-techie user. From a user perspective, they are uploading their Excel documents in order to affect a change to the web application they use.
Developing the concept
I tried to think about the key concepts for this activity: 'multiple Excel files', 'upload', 'web application'. Having dismissed such options as conveying images of a server, the Internet etc, I focused on a representation of Excel screens, a tried and tested arrow, and a screen of the web page the Excel files would affect.
From sketch to screen
Working in Photoshop on the 128 x 128 version from a screenshot of the web application page and an Excel document, I got the design on to the screen. I used the conventional 'green for go' for the arrow and generated a handful of versions, moving the elements around to see how the overall outline was affected.
In situ
It was decided which one worked best and would be developed further, so I created a 48 x 48 version. I simply started by resizing down the 128 version - just to get the placement of the elements - but then re-drew them all at the lower resolution to enhance the clarity. I then tried placing the icon on a screenshot of a Vista desktop to see how it would perform in situ. This showed that the icon did appear weak. It also brought home another issue - I had focused on the function of the icon and neglected the branding of the application.
The application didn't really have an identity as such, so I used the company corporate colours and losely based it on their logo to try and enhance the existing design. The aim was to strengthen it against the competition of desktop icons, and to introduce its own 'brand'.
Reworked design
I did consider omitting elements for the desktop icon and, again, placed the versions on a desktop screenshot to see how they worked. However, the general consensus was that the new 'branding device' would accompany the existing elements. I then created the other sizes, again placing them in situ as I worked to see how they performed. As ever, the 16 x 16 gave me the most trouble. It would mainly be situated on the application's title bar, or possibly as a quick launch button, so it was on these backgrounds that I concentrated the most. I then supplied each of the size versions as a png file to the developer for implementation.
