This is not a pipe

Slide 3: This is not a company This is not a country These are not toilets These are not flowers This is not a cow This is not a refreshing drink These are not ideas This is not food This is not a sound This is not a face This is not law

Slide 4: This is not Jude Robinson

Slide 5: For the purposes of this presentation I’m using the word icon to mean any image used to represent a person, place, thing or idea.

Slide 6: Symbols Language Pictures ABC 2 2 3 ? ! * £%@ 

Slide 7: ABC In the non- pictorial icons 2 2 3 meaning is fixed and ? ! * absolute. £%@ Appearance doesn’t effect  meaning.

Slide 8: EYE =

Slide 9: In pictures meaning is fluid and variable according to appearance.

Slide 10: Somewhat more abstract but we still easily recognise it.

Slide 11: Without the iconic pose is this image still recognisable as Marilyn Monroe?

Slide 14: Amplification through simplification

Slide 15: WHAT ARE YOU REALLY SEEING?

Slide 16: We see ourselves in everything

Slide 19: pictures language 2 eyes Thy youth’s FACE 1 nose 1 mouth proud livery so gazed on now realism abstraction

Slide 20: This is not you This could be you

Slide 21: If who I am matters less maybe what I say will matter more.

Slide 22: We experience a similar level of non- visual awareness when we interact with inanimate objects.

Slide 23: Our identities and awareness are invested in many inanimate objects every day.

Slide 24: Concept Senses By de-emphasizing the appearance of the physical world in favour of the idea of form, the icon places itself in the world of concepts.

Slide 25: Icon design is metaphor design.

Slide 26: Metaphors map the known onto the unknown and give us a conceptual framework. They solve the question of how we can grasp new knowledge when we have no old knowledge on which to graft it.

Slide 27: Good metaphor design 1. Use universal imagery that people will easily recognise

Slide 28: Good Bad

Slide 29: Good metaphor design 2. Because there’s no such thing as universal imagery ALWAYS label your icons.

Slide 32: Good metaphor design 3. Strive for simplicity. Use a basic single object that captures the icon’s action. Nouns are better than verbs.

Slide 33: Good!

Slide 34: Well…maybe?

Slide 35: Bad!

Slide 36: Good metaphor design 3. Avoid using interface elements they can be confused for real interfaces

Slide 37: Good metaphor design 4. Don’t reuse system icons. It’s confusing seeing the same icon used in different ways.

Slide 38: Good metaphor design 5. Only use icons with links. Don’t confuse their purpose. Use distinctly different styles for icons and illustrations.

Slide 40: Mac OSX Aqua Icons – A Case Story Aqua offers a photo- illustrative icon style - it approaches the realism of photography but uses the features of illustrations to convey a lot in a small space.

Slide 41: Mac OSX Aqua Icons – A Case Story There are two genres of icons 1. Application icons 2. Utility icons

Slide 42: Mac OSX Aqua Icons – A Case Story Aqua icons can also help users identify files associated with an application.

Slide 43: Mac OSX Aqua Icons – A Case Story Application icons should be vibrant and inviting, and should immediately convey the application’s purpose. Application icons should display the media the application creates or views. If appropriate, the icon should also contain a tool that communicates the type of task the application allows the user to accomplish. Utility applications convey a more serious tone than those for user applications. Color in these icons is de-saturated, predominantly gray, and added only when necessary to clearly communicate what the applications do.

Slide 44: Mac OSX Aqua Icons – A Case Story Icon perspectives – Application icons The angles and shadows used for depicting various kinds of icons are intended to reflect how the objects would appear in reality.

Slide 45: Mac OSX Aqua Icons – A Case Story Icon perspectives – Utility icons Flat objects appear as if there were a wall behind them with an appropriate shadow behind them.

Slide 46: Mac OSX Aqua Icons – A Case Story Icon perspectives – 3D objects & toolbar 3D objects and toolbar icons would be more realistically seen sitting on the ground.

Slide 47: Mac OSX Aqua Icons – A Case Story Materials and transparency Icons that represent actual objects should look as though they are made of real materials. Use transparency only when it is convincing and when it helps complete the story the icon is telling.

Slide 48: Why use icons? “In general I believe that icons should work a bit like traffic signs; they should convey information without distracting the user, without competing with the data in an application. Ideally, they should suggest something about the functionality. If it is not completely evident, then the function should be easy to remember if the user is told only once.” Susan Kair

Slide 49: Why use icons? “The Windows XP icon style is all about fun, color, and energy—and, as there are now 32-bit versions of the icons, smooth edges.” Creating Windows XP Icons, Microsoft corporation

Slide 50: Why use icons? • Icons teach

Slide 51: Why use icons? • Icons teach • Icons help

Slide 52: Why use icons? • Icons teach • Icons help • Icons inform

Slide 53: Why use icons? • Icons teach • Icons help • Icons inform • Icons remind

Slide 54: Why use icons? • Icons teach • Icons help • Icons inform • Icons remind • Icons sort

Slide 55: Increasingly we are choosing and designing icons as representations of ourselves…

Slideshare.net (beta)