Web Sites Ethiopia

Web Sites Ethiopia header image 2

Icon Development

No Comments · Websites Ethiopia

Icon development follows much the same pattern as the processes: mockup, test, and iterate. When developing mockups for your icons, it’s often good to tap your domain experts.

It is reasonable to do the first couple of iterations with simple paper-based representations. Later on, as the icons become more refined, you can move to digital representations and begin testing on the screen. In this section we describe how you can be lazy and let the best icons design themselves.

1. Shirk Responsibility: Brainstorm Icons
Start off by giving as many people as possible a list of concepts. Then ask them to draw, sketch, or simply describe the images they would use to support such concepts. It’s always easier to let others do your work for you, and it provides you with some data regarding the most common themes.

Starting this way is similar to the development of thumbnail sketches for page layout. You quickly get a large selection of ideas from which to base your further development. In addition, you learn which ideas might be common across the selection of people you’ve gathered for the brainstorming.

For this reason, it is often beneficial to involve as diverse a population as possible. Better yet, let the developers of your initial icon concepts be as close as possible to your target population of users.

To brainstorm possible ways of representing a concept in an icon, a simple worksheet can be used to elicit ideas from people, and it only takes a few minutes; download from http://www.mkp.com/uew/).

List the names of the icons you want down the left column. Give descriptions if needed. In the second column, ask them to give synonyms, related terms, and describe objects that they associate with each concept.

Many people won’t feel comfortable drawing potential icons, but they can still suggest visual ideas that will help you to come up with an icon. In the last column, ask them to draw some candidate icons. These sketches will usually be pretty rough, but they help you to identify prototypical visual concepts.

2. Limit Your Options
On the first pass, you may want to choose a subset of icon designs to continue refining. You should pay particular attention to those icons that people suggested most often. However, you’ll want to be sure that you haven’t mislabeled the concept or that the icons aren’t just a simple, but inaccurate, metaphor for the concept you are attempting to visualize.

3. Refine With Details and Begin Testing
At this point you should have several alternatives for each concept that you want. Here you might want to begin to develop higher-resolution or slightly more detailed versions. You’ll also want to begin an iterative testing process using a mixture of tests described in the following section.

You should also begin testing your icons in black and white. An icon should be able to convey everything it needs to in grayscale form. If you require color for the meaning to be clear, in most (although not all) instances this means your icon is not properly communicating to the users.

4. Go Against Your Intuitions and Choose the Best
Once you have tested and refined the icons several times, it should be obvious which are the best choices. Often this may go against your original inclinations – but who are you to resist! At this point, you have combined the minds of several individuals along with testing data to determine the best solution.

Be humble. Do what’s right. Of course, it will be up to the graphic designer to make these icons a visually appealing as possible, but a lot can be gained from utilizing the power of numbers.

In summary, there are several tips to follow when developing icons: take advantage of others in the initial development of ideas; start with simple sketches; refine initially in black and white or grayscale; and develop an iterative system of testing and redesign.

Report This Post

Tags:

No Comments so far ↓

There are no comments yet...Kick things off by filling out the form below.

Leave a Comment