This presentation gives an overview over what resolution independence means and why it is important in the context of icon design. Finally, a solution is introduced that allows to provide icons in a format that is especially appropriate for Rich Internet Applications and mobile applications.

1. RESOLUTION INDEPENDENT ICON DESIGN
Centigrade GmbH

2. OVERVIEW 2
• What is Resolution Independence?
• The Vector-Scaling Dilemma
• Hands on Example in Photoshop
• Multi-Scale Icons for Rich Internet
Applications and Live Demo

3. 3
WHY RESOLUTION
INDEPENDENCE?

4. DISPLAY SIZE 4
• Growing diversity of display sizes
• Cell phones (tiny)
• Navigation systems (small)
• Desktop systems (small to large)
• Multi-touch tables (large)
• Touch walls (jumbo)

5. DISPLAY RESOLUTION 5
• Growing display resolutions (pixel density)
• Standard monitor: 100 ppi
• iPhone: 160 ppi
• Color ebooks: 200 ppi
• Print: 300+ ppi

6. NAVIGATION SYSTEM ICONS
All icons designed by Centigrade GmbH.

7. WINDOWS VISTA ICONS
Tiny (16x16 pixel) Extra Large (256x256 pixel)
All icons designed by Centigrade GmbH.

8. TOUCHSCREEN ICONS
All icons designed by Centigrade GmbH.

9. RESOLUTION INDEPENDENCE: GOAL 9
• Design and render visuals such as icons or
components in a way that guarantees
optimum recognizability and aesthetic
appearance on every screen device
• Obvious (but insufficient) solution: use
vector graphics to create and deploy visuals

10. 10
THE VECTOR-SCALING
DILEMMA

11. THE POWER AND WEAKNESS OF VECTORS 11
• Vector-graphics do not require much memory and
can be used to flexibly scale an icon to different size
without aliasing - true.
• However: it‘s a myth that vector graphics can be
freely scaled to any size without quality loss
• At small display sizes or low display resolutions
unoptimized vector icons can quickly look blurry
and even become unrecognizable

12. VECTOR RASTERIZATION DILEMMA 12
ILLUSTRATED

13. MANUAL CORRECTIONS 13

14. MANUAL CORRECTIONS: REMOVE PERSPECTIVE
All icons designed by Centigrade GmbH.

15. PRODUCT ICON: OPTIMIZED FOR VARIOUS SIZES
All icons designed by Centigrade GmbH.

16. THE POWER AND WEAKNESS OF BITMAPS 16
• Raster graphics are still needed to guarantee optimal
display quality and recognizability
• 1st Problem: one different image version per icon is a
pain when later changes occur - no solution yet
available here.
• 2nd Problem: raster graphics need a significant amount
of memory which is a problem for network connected
apps - possible solution is available.

17. 17
MULTI-SCALE ICONS FOR
RICH INTERNET
APPLICATIONS

18. CHALLENGE 18
• How to provide many different raster
images per icon while keeping network
bandwith consumption low?
• Solution: benefit from technology from
where this problem has already been
tackled

19. Seadragon Deep Zoom 19
„Change the way we use screens, from wall-
sized displays all the way down to cell
phones, so that graphics and photos are
smoothly browsed, regardless of the amount
of data or the bandwidth of the network.“

20. Seadragon Deep Zoom 20
• Microsoft Live Labs project
• Implementations for Silverlight, Ajax and iPhone available
• Multi-scale images are saved in DCI/DZI file format
• Deep Zoom Composer can be freely downloaded to
create multi-scale images and works smoothly with Blend

21. DEMO 21
• For an interactive live demo of a multi-scale icon visit
www.centigrade.de/icon-design/MultiScaleIconDemo.html
• Demo was created with Deep Zoom Composer, Microsoft
Expression Blend 2 SP1 and some custom coding
• For a more detailed writing on resolution independent icon
design visit www.centigrade.de/en/blog/article/
resolution-independent-icon-design-part-1
• For more information visit www.centigrade.de