Download - Tính tương tác của Icon trong thiết kế
![Page 1: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/1.jpg)
JON HICKS : HICKSDESIGN
![Page 2: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/2.jpg)
ICONS for INTERACTION(not just decoration)
![Page 3: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/3.jpg)
FIRST, LET ME TAKE YOU ON A JOURNEY…
![Page 4: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/4.jpg)
100,000 YEARS AGO
Icons are the earliest form of written communicationThese Argentinean cave paintings are from 100,000 years ago
![Page 5: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/5.jpg)
35 YEARS AGO…
First designed in 1974 for US Department of Transporthttp://www.aiga.org/content.cfm/symbol-signs
![Page 6: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/6.jpg)
30 YEARS AGO…
The arrival of the graphical UI (for the Xerox Star)http://www.digibarn.com/collections/software/xerox-star/
![Page 7: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/7.jpg)
25 YEARS AGO
Now we get to where my interest in icons first startedWhen I was about 11 our famiily got an Acorn Electron (32k RAM!)
![Page 8: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/8.jpg)
This is how icons used to be constructed, with unique numbersand the VDU statement
![Page 9: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/9.jpg)
MANY HOURS SPENT HERE!
I spent many hours planning icons and characters using this gridMany icon designers started out by creating sprites for games
![Page 10: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/10.jpg)
Games like Chuckie Egg!
![Page 11: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/11.jpg)
HOW DO ICONS AID
INTERACTION?
So lets look at how we can use icons for interaction
![Page 12: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/12.jpg)
FAVICONS!
The one that everyone here must've created is a .ico faviconThe real test of an icon designerFavicons are the signposts for your site or app
![Page 13: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/13.jpg)
Simple & clear - rule for all icons
![Page 14: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/14.jpg)
Uses transparent edges to blend well on light + dark backgrounds
![Page 15: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/15.jpg)
No transparency means that the edges look fuzzy
![Page 16: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/16.jpg)
lewisfrancis.com/ud/faviconic/
You're not limited to 16px, but browser support varies and results can be unpredictableLewis Francis has done the work for you.
![Page 17: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/17.jpg)
apple-touch-icon.png - 57x57px
iPhone Favicons
This is particularly relevant if you have a web app, an iPhone favicon would be a good ideaEasy to deploy - no link tag needed
![Page 18: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/18.jpg)
I'm going to pick on the Songbird site as the first exampleMost important icon uses harsh black and whiteGreen background pushes the content forward
![Page 19: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/19.jpg)
MOST IMPORTANT!
I'm going to pick on the Songbird site as the first exampleMost important icon uses harsh black and whiteGreen background pushes the content forward
![Page 20: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/20.jpg)
SUMMARISING FEATURES
This is the most common use of icons at the momentFeatures are highlighted and summarized Also works as decoration - breaks up text blocks
![Page 21: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/21.jpg)
EXPLAIN ACTIONS
Explaining actions, rather than spelling them out
![Page 22: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/22.jpg)
DRAW ATTENTION TO CHANGES
Loose definition of an 'icon', but it still counts!
![Page 23: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/23.jpg)
USING CONVENTIONS
Using Familiarity/conventions to aid users to find services
![Page 24: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/24.jpg)
COMPARISONS
A picture is worth a thousand wordsNote the use of tooltips
![Page 25: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/25.jpg)
OVERCOME LANGUAGE BARRIERS
McDonalds commissioned a series of icons for nutrient informationSymbols and colours were usability tested for 109 countries
![Page 26: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/26.jpg)
HELP USERS WITH FORMS
Name:
Email:
G. Moff Tarkin
moffy at death.star
![Page 27: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/27.jpg)
Name:
Email:
G. Moff Tarkin
moffy at death.star
HELP USERS WITH FORMS
Incorrect field highlighted with warning colours
![Page 28: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/28.jpg)
Name:
Email:
G. Moff Tarkin
moffy at death.star
HELP USERS WITH FORMS
Let's see it without colourColourblind users might not see the colour the same wayso the meaning is lost
![Page 29: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/29.jpg)
AAAARRRRGGHHH!!!
Colourblindness means that I can't tell if these lights are green or redThe smaller the area of colour, the harder it isThis sort of device is hell to meThe classic question I'm often asked is "How do you manage at traffic lights?"I'm fine, as long as they don't turn them upside down!Context can help!
![Page 30: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/30.jpg)
Name:
Email:
G. Moff Tarkin
moffy at death.star
HELP USERS WITH FORMS
Using an icon means that there is a unique shape to convey meaning(This can and should be backed up by explanatory text)Don't use colour alone to convey meaningAlso note the context - not at the top of the form but attached to the relevant item
![Page 31: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/31.jpg)
Name:
Email:
G. Moff Tarkin
moffy at death.star
Address 1
Address 2
The Death Star
Orbiting Yavin
Phone THX 1138
TOO MUCH!
However, we don't need an icon for every entryDesign becomes noisyUser less likely to discover meaningSolution may be to use light grey icons, or remove them
![Page 32: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/32.jpg)
CLEARER!
Name:
Email:
G. Moff Tarkin
moffy at death.star
Address 1
Address 2
The Death Star
Orbiting Yavin
Phone THX 1138
Compare it with this versionThe error is clearer.
![Page 33: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/33.jpg)
Aiding navigation
![Page 34: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/34.jpg)
![Page 35: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/35.jpg)
Ikea nav with icons removed - it becomes harder to scan the categories
![Page 36: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/36.jpg)
Pre-warn users of behaviourIn this case the dropdown of a hidden menuAliased Pixel art - small size
![Page 37: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/37.jpg)
Pre-warn users of behaviourIn this case the dropdown of a hidden menuAliased Pixel art - small size
![Page 38: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/38.jpg)
CONSISTENCY CONTROLS
Couldn't imagine media players without iconsMimics real life object (e.g DVD player)
![Page 39: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/39.jpg)
MOOD
Love them or hate themwe use emoticons to show mood/intention
![Page 40: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/40.jpg)
Use icons to:
Summarise text
Draw attention
Explain actions and behaviours
Overcome language barriers
Aid navigation
(… and add interest!)
TAKE HOMES
![Page 41: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/41.jpg)
WORKFLOW #1:
CHOOSING THE RIGHT METAPHOR
![Page 42: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/42.jpg)
These icons from a hand dryer sum up why Iove iconsand the thinking behind them
![Page 43: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/43.jpg)
IS THERE ACONVENTION?
Which Icon symbol was the most recognisable?
![Page 44: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/44.jpg)
a lowercase i is accepted for information
![Page 45: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/45.jpg)
LIFE BEFORE CONVENTIONS…
There are conventions in the online world tooIn the old days iconizing RSS feeds was a mish mash
![Page 46: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/46.jpg)
First appeared in Firefox 0.9Created by Stephen HorlanderNow widely adopted, thanks to Microsoft's decision to use itAlready hard to imagine anything else
![Page 47: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/47.jpg)
GOOGLE IMAGE SEARCH
So how do you find what the convention is?First stop is a google search
![Page 48: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/48.jpg)
ICONFINDER.NET
Iconfinder can also be useful to help to find out existing conventions
![Page 49: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/49.jpg)
SEARCH ZOOMor…
Sometimes conventions can conflictIn this instance, context is everything
![Page 50: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/50.jpg)
+SEARCH ZOOM
Adding another simple icon makes this clearer
![Page 51: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/51.jpg)
NO CONVENTIONS
what about when there are no conventions?thats where the fun begins!this is from a local nurseryyet, from a distance, it looks like a child being dragged to nursery
![Page 52: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/52.jpg)
NO CONVENTIONS
Wahh!
what about when there are no conventions?thats where the fun begins!this is from a local nurseryyet, from a distance, it looks like a child being dragged to nursery
![Page 53: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/53.jpg)
108
Distance to‘STOP’ line
ahead
Crossroads Junction onbend ahead
T-junction withpriority over
vehicles fromthe right
Staggeredjunction
Distance to‘Give Way’line ahead
Warning signsMostly triangular
Double bend firstto left (symbol
may be reversed)
Bend to right(or left if symbol
reversed)
Roundabout Uneven road Plate belowsome signs
Dualcarriageway
ends
Roadnarrows onboth sides
Two-way trafficstraight ahead
Two-waytraffic crossesone-way road
Road narrows onright (left if
symbol reversed)
Traffic signals Slippery road Steep hillupwards
Gradients may be shown as a ratio i.e. 20% = 1:5
Steep hilldownwards
Traffic signalsnot in use
The priority through route is indicated by the broader line.
Level crossingwith barrier or
gate ahead
Level crossingwithout barrieror gate ahead
Level crossingwithout barrier
Tramscrossingahead
Opening orswing bridge
ahead
Falling orfallen rocks
Low-flying aircraftor sudden
aircraft noise
Tunnel ahead
Traffic mergingfrom left ahead
OLD FAMILIAR OBJECTS
So what do we do if there are no conventions?We use our best guess! Sometimes, old familiar objects are more recognisable symbols, even if they aren't relevant anymore
![Page 54: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/54.jpg)
We also keep libraries of icons to get ideasGreat for colour and style inspiration tooCandyBar, Littlesnapper, Evernote or just a folder
![Page 55: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/55.jpg)
WORKFLOW #2:
PRODUCTION
So what kinds of Icon are you likely to be involved in?
![Page 56: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/56.jpg)
SKETCHING
![Page 57: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/57.jpg)
TOOLS
Many apps to choose fromFW is my favourite Inkscape is a good open-source choiceBut ideal app not yet created
![Page 58: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/58.jpg)
CREATE IN COMPANY + CONTEXT
This is achieved by not designing icons in isolationDesign icons together, and in context ensures consitency
![Page 59: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/59.jpg)
CREATE IN COMPANY + CONTEXT
This is achieved by not designing icons in isolationDesign icons together, and in context ensures consitency
![Page 60: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/60.jpg)
CONSISTENCY
Vimeo uses a good consistent Colour and Style
![Page 61: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/61.jpg)
(TOP LEFT)
CONSISTENT LIGHTING
![Page 62: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/62.jpg)
WARM
PUSH BACK
COOL
PULLFORWARD
NEUTRAL
So for icons that don't need to noticed instantly, use neutral or cool coloursFor attention or status, use warmer colours
![Page 63: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/63.jpg)
OFF
OK, READY
DISABLED
STOP, DANGER
WARNING
NETWORK ISSUES
Be warned that cultural differences mean different meanings too.
![Page 64: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/64.jpg)
GLOBAL COLOUR
If you're using Illustrator - make use of the Global Colour feature to keep colour consistency.
![Page 65: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/65.jpg)
Whatever app you use, watch your pixels! Reducing and enlarging artwork means sub-pixelsSub pixels mean fuzzy artworkFireworks feels best at pixel sharpness, but not perfect
![Page 66: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/66.jpg)
BLACK OFTEN TOO HARSH
Try to avoid solid black, as it's too harshIn this document icon example, 50% grey is better
![Page 67: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/67.jpg)
HIGHLIGHTING EDGES
This is a style choice as much as anything, but it does have a purpose.The edges appear crisper, more defined.
![Page 68: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/68.jpg)
Even small style differences can lead to unrecognisablility
![Page 69: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/69.jpg)
Cute detail but it adds noise
A convention obscured by unnecessary detail
![Page 70: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/70.jpg)
Sometimes icons are simply uselessNice site John Lewis, but the basket is so small it's unrecognisable
![Page 71: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/71.jpg)
TooSmall
Sometimes icons are simply uselessNice site John Lewis, but the basket is so small it's unrecognisable
![Page 72: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/72.jpg)
Background and border
Too fussy
Clear!
![Page 73: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/73.jpg)
WORKFLOW #3:
DEPLOYING
![Page 74: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/74.jpg)
‣ old school
‣ no alpha transparency
‣widely supportedGIF
FORMATS
Lack of alpha transparency is main problemBut widely supportedGood for pixel icons
![Page 75: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/75.jpg)
‣ alpha transparency
‣widely supported
‣ hacks to work in IE 6PNG
FORMATS
This is the main oneWorth using hacks for IE6 for transparency
![Page 76: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/76.jpg)
GIF GIF PNG
PNG allows for much more flexibilityEspecially if you need to change themeto high contrast
![Page 77: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/77.jpg)
APNG
‣ It moves!
‣ supported in Opera and Firefox
‣One to watch out for
‣ animatedpng.com
FORMATS
Opera uses some animated png's in it's interface.png extensionAnimation doesn't have to mean irritationFor example - spinners/throbbers/loading iconsDrawing attention to changes like the yellow fade
![Page 78: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/78.jpg)
SVG
‣ supported in Opera and Firefox
‣ Vectors not bitmaps
‣ scalable
FORMATS
Good for Linux desktop iconsGood for vimeo style icons with flat colourResolution Independence - might be useful?
![Page 79: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/79.jpg)
NEVER JPEG!
Of course, you would never use jpegwould you?
![Page 80: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/80.jpg)
<link rel="icon" type="image/vnd.microsoft.icon" href="/somepath/image.ico" />
<link rel="icon" type="image/gif" href="/somepath/image.gif" />
<link rel="icon" type="image/png"href="/somepath/image.png" />
Adding favicons using the correct image type
![Page 81: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/81.jpg)
<img src="/images/icon_covered_rv.png" alt="Covered RV & Boat Parking" title="Covered RV & Boat Parking" />
If text is vital to understanding, use title and/or alt attribute
![Page 82: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/82.jpg)
PROS CONS
<img> tag method
Alt & Title attributes to give meaning
Easy to deploy
Higher initial page load
![Page 83: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/83.jpg)
32x6402 pixels (52k)
Mobile Me make use of sprites to cut down on initial http requestsTo the extent that it's one image, 6402 px highVery high development overheadbut worth it for the optimisation benefitsBeware space and zoom issues
![Page 84: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/84.jpg)
32x6402 pixels (52k)
Mobile Me make use of sprites to cut down on initial http requestsTo the extent that it's one image, 6402 px highVery high development overheadbut worth it for the optimisation benefitsBeware space and zoom issues
![Page 85: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/85.jpg)
PROS CONS
CSS sprites method
Faster initial load
Easier to position
Fits with 'designing in company'
Longer development time
Loss of alt attribute
Potential issues with text resizing
![Page 86: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/86.jpg)
Isn't pretty with images off, but still makes sense.CSS Sprites makes little sense here
![Page 87: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/87.jpg)
FAMFAMFAM.COM
If you don't want to create your own icons, there are great free resources, like Mark James's famfamfam.
![Page 88: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/88.jpg)
Keep it simple and memorable
If there is a convention - use it
Don't be abstract, or too detailed
Reduce the number of colours and icons
Be consistent - don't design icons in isolation
TAKE HOMES
![Page 89: Tính tương tác của Icon trong thiết kế](https://reader037.vdocuments.net/reader037/viewer/2022110218/58ef1ecf1a28ab31238b45ad/html5/thumbnails/89.jpg)
http://delicious.com/jonhicks/icondesigntalk
ICONS for INTERACTION