Icon design
•Descargar como PPT, PDF•
0 recomendaciones•882 vistas
Presentation on what I have learned about icon design for websites, business software and other apps. Slides were designed intentionally with no words, just images. The slides may not make sense unless you were there! See the notes on the slides for a bit of context. The presentation was originally done for the Brisbane Web design Meetup Group, and amended for the UX & Interaction Design Group.
Recomendados
Más contenido relacionado
Más de Carolyn King
Más de Carolyn King (10)
Último
Último (20)
Icon design
- 20. Carolyn King | Credos Associates www.credos.com.au @credosassoc info@credos.com.au
Notas del editor
- This is a brief talk about icon design and what I’ve learned over the years. During that time I have designed icons for computer software (engineering applications, logistics software, business software) as well as for websites and intranets, and even for printed items like books and user guides. Most of us see and use icons every day, so I hope this presentation will be of interest, whether or not you are involved in icon or interface design. Carolyn King, Credos Associates.
- Marcel Marceau was a brilliant mime artist. Icon design is a lot like mime – it has to work without words. It’s purely visual communication.
- In the spirit of visual communication, this icon represents “no text allowed”. I won’t use text or bullet points in this presentation. Lucky you!
- Icons are small and sweet, like this little fella on the left. It can be quite fun playing with them, and when they’re behaving they’re lovely. But the smaller they are, the more trouble they can be... Small things can also cost more, like these strappy Jimmy Choo shoes. The less there is to them, often the more fiddly they are to make. Less is more.
- Icons aren’t just used in computer software. Signage is a good source of symbols. Here are some classics. Who has seen a steam train, an old camera, a handset phone or even a floppy disk, these days? But they are still an ICONIC representation of the concepts. Modernised icons can work, but where do you stop? And when an icon is so ingrained in people’s understanding, like the floppy disk for save, should you change it? There’s no need to reinvent the wheel. If an existing symbol is used to represent a concept, don’t invent a new one .
- Icons form part of a visual language, with nouns, verbs and adjectives. For example, the pencil is used to represent the verb “edit”. Once that is established, the pencil can mean edit anything, regardless of whether or not you would use a pencil to change that object.
- These are “badges” representing verbs or adjectives. When combined with a noun, they mean something. They build into a visual language.
- Designing icons is a bit like building with lego bricks. Depending on the size of the icon, you may have as few as 16 x 16 pixels to play with. How can you draw something recognisable with so few pixels? Luckily, you can, with a few tricks up your sleeve.
- However, if you have enough Lego, and you use it carefully, you can make something quite recognisable!
- You can also create illusions with Lego, like this Escher-style optical illusion. Icon design involves creating illusions too – convincing the human brain to see things, even when you have only a few pixels to play with.
- Here’s a much enlarged view of part of an icon. What is it? A bar, or part of a fence? When reduced in size, the bar becomes an arrow. The human eye compensates for the lack of detail, and the human brain fills in the gaps.
- Here's another example of how the human eye fills in the gaps – the small icon is legible, but close-up it can be hard to see what the objects are. Note the “anti-aliasing” (shades of grey) on corners to give a rounded effect.
- Doing icons in different sizes isn’t simply a matter of drawing it at the bigger size and scaling it down. In this example, the icon at the top left shows what happens if you simply resize it – the detail is lost. The close-ups show the differences when it is redrawn properly. It is best to draw the icon at 16x16 first – if it works at that size, it will work larger, even though it will have to be redrawn for 32x32 and 64x64.
- Here’s another instance when scaling down a graphic isn’t always the best solution. The favicon for the first website example is not the whole logo, just a part of it. For the second one, the favicon reflects the general look of the homepage, not the logo (as that wouldn’t be recognisable at 16 pixels).
- Let's look at the tools used for icon design... You don’t necessarily need specialist tools. Icon design starts with the idea – choosing the right visual symbol for the job, then creating an iconic representation of that in the right size and format to suit where it will be used. If you are creating a whole suite of icons, choosing the right tools and efficient workflow processes will make for an easier, more satisfying project.
- I use Adobe Fireworks for designing icons. It’s great at both vector and bitmap editing, and you can preview the thumbnail icon while drawing zoomed in. It is easy to set up styles for colours/effects, as well as batch processing (for example to save in specific formats, colourise icons, remove backgrounds, etc).
- A number of free and commercial icon editing tools are available – Axialis is probably the best of the commercial tools. Others include Icon Sushi, IcoFX, FavIcon editor.
- For efficiency, usability and legibility, you need consistent visual styles and common elements when creating icons. This is an extract from some style guidelines for icon design, showing the treatment of lighting, shading, etc.
- When designing icons that represent real objects, it helps to find reliable reference material – photos and illustrations. Then you can see what details to remove, so the icon represents the object without needing to replicate it in detail.
- Here’s a bunch of flowers to say thank you for your interest. I hope you enjoyed the presentation. Carolyn King, Credos Associates. See us at www.credos.com.au Follow on twitter @credosassoc