Pavel macek webexpo2011
•Transferir como KEY, PDF•
1 gostou•420 visualizações
My talk about principles of Design and Usage of Icon Design which I gave at WebExpo 2011
Recomendados
Recomendados
Mais conteúdo relacionado
Destaque
Destaque (20)
Pavel macek webexpo2011
- 1. Nejen na okrasu Pavel Maček http://www.matcheck.cz http://www.dribbble.com/matcheck
- 2. Jsem UI Icon Designer
- 5. Proč?
- 6. Dobrá (použitelná) ikona
- 8. Je povědomá
- 10. Je jednoduchá
- 11. Je jednotná
- 12. Je rozlišitelná
- 14. Použití ikon ?
- 15. Typy ikon Objekt Vlastnost objektu Akce Status Ikona aplikace
- 16. Použití hotové sady ikon
- 17. Na webu
- 18. V aplikacích.
- 19. V aplikacích.
- 20. Vizuální styl
- 22. Průzkum
- 23. Skicování
- 24. Skicování
- 25. První návrh ..
- 27. Praktické rady
- 29. Shrnutí Vyberte správnou metaforu Řiďte se kontextem Méně je vždy více Buďte konzistentní
Notas do Editor
- Budu nezdvořilý a dřív než se představím, tak se Vás zeptám. Kdo je tu designér, zvedněte ruku prosím. Kdo je tu vývojář, zvedněte ruku prosím.\nA teď zveděte ruku všichni, kdo už někdy při své přáci ikony použil?\n
- S nutnosti pouzit ikony se driv nebo pozdeji potka kazdy webdesigner, UX designer nebo visual designer.\nJsem designér uživatelských rozhraní a navrhuju mobilní a webové aplikace. \nPři své práci se každý den potkávám s potřebou používat ikony. A často i s potřebou je vytvářet.\nV této přednášce bych Vám chtěl přiblížit principy používání a to, jak použít ikony k posunutí svých designů o úroveň víš.\n\n\n\n\n \n
- Začneme tím Co to teda ta ikona vlastně je? Ikona (piktogram) je stylizovaný grafický symbol, který reprezentuje určitý objekt nebo funkci. Pomocí grafických symbolů komunikujeme už více než 100 000 let. Dokazují to nalezené jeskynní malby. \nPrvní písma používali grafické symboly (ideogramy) k zachycení slov, známe např. hieroglyfy.\nNěkteré jazyky jako čínština používají grafické symboly dodnes.\nIkony tedy nejsou nic nového. Možnosti jejich využití se ale pořád mění v závislosti na době.\n
- V dnešní době ikony najdeme prakticky všude, v navigačních a dopravních systémech, na spodním prádle, flašce na tuzemáku, všude.\nV roce 1974 vznikl v americe na popud ministerstva dopravy první standardizovaný set ikon ( ISO 7001). Je to 50 obecně rozpoznávaných ikon. http://www.aiga.org/symbol-signs/\n\nhttp://triercopenhagen.com/skin/frontend/redesign/default/images/media/service/wash-icons-mini.gif\n\n
- Důvody: proč ikony použít?\nNepotřebují lokalizaci. (příklad)\nNapomáhají porozumění (např. v infografice) - příklad\nŠetří místo - příklad nějakého toolbaru\nNevytváří tolik vizuálního šumu jako textové ovládací prvky (např. textová tlačítka).\n\n
- Než si řekneme jak používat ikony, poďme si říct, co by měla dobrá ikona splňovat.\nJa jsem velky fanda Dribbblu (pro ty co ho neznají: socialní síť a ego boost pro designery). 80 procent praci na Dribbblu jsou ikonky ale pouze 20 procent z nich nestoji za starou belu. Proc? Protoze většina těchto ikon nebere v potaz omezení lidského vnímání a svoji funkci. Ty nejsou založené jenom na zkušenostech, ale hlavně na výzkumu v kognitivní psychologii.\n\n
- Asi nejdůležitější vlastnost dobré ikony. Je potřeba, aby ikona smysluplně zobrazovala to co má znamenat. \nOriginální metafory jsou často špatná volba.\nŠálek je super. Ikona spiciho cloveka s otaznikem nema jasny vyznam, co to je? Clovek v komatu?\n
- Objekt, který zobrazujeme, musí být co nejvíce povědomý. Dobrá povědomost sníží čas potřebný k naučení.\n
- Dobrá ikona musí být zřejmá. Její tvar, struktura a stylizace musí dovolovat jasné rozlišení toho co ikona zobrazuje?\nJe důležité vzít v potaz i národní rozdíly, např. podoba poštovních schránek.\n
- Jednoduchá ikona má čistý tvar a vzdává se zbytečných detailů. Příliš mnoho částí zbytečně mate.\n\nhttp://dribbble.com/shots/207159-Software-installer-icon\n
- Rodina ikon musí být konzistentní svým tvarem a stylizací? \nJe důležité dát si pozor na ikony s proměnným osvětlením.\nIkona by měla být konzistentní i sama o sobě, pokud se skládá z více složek. Měla by používat stejné výrazové prostředky.\n\nhttp://dribbble.com/shots/269622-Glyphs-for-Marketplace-website\nhttp://dribbble.com/shots/261042-iTerm2-Replacement-icons\n
- Ikony musi byt od sebe rozlisitelne, lidska schopnost rozlisovat tvary a formu je omezena. (timto se zabyva kognitivni psychologie)\n\nhttp://dribbble.com/shots/25888-Stock-Icon-Set\n
- Myslím to smrtelně vážně. Ikona musí být efektivní, co nejlépe předat danou informaci, ale neznamená to, že u toho nemůže vypadat dobře.\nPlatí to stejné jako u uživatelských rozhraní, použitelnost je pouze první krok.\nhttp://dribbble.com/shots/119168-Darth-rebound\n
- Teď už víme, co má dobrá ikona splňovat, tak ji můžeme vybrat a použít.\n
- Při výběru ikon je důležité brát v potaz typ ikon. Typ ovlivnuje miru abstrakce a stylizace, kterou si muzeme dovolit.\nIkony pro objekty (např. dokument, kniha) - většinou založené na podobnosti, musí odpovídat skutečnosti\nIkony pro vlastnosti objektů (rozbitá sklenice - křehký) - většinou symbolické, \nIkony pro akce (ulozit, stáhnout - sipka dolu, pridat - plus) - ty jsou názorné, nebo zažité (např disketa už dávno není médium, které používáme k ukládání dat, Lukáš ano? \nIkony pro systémový status - abstraktní, značka fajfky\n\nIkony aplikací (ty mohou být abstrakní, více dekorativní než funkční) Jejich význam se musíme většinou naučit.\n
- Použijte existující ikony pokud jsou dostupné. (stejně jako v je to s písmem)\nNení potřeba ikony vytvářet - existuje velké množství ikonových setů, licence není omezená počtem projektů (jakmile mám dobrý set, můžu ho použít víckrát).\nPři výběru vhodného setu je potřeba si dát pozor na :\nZaostření ikon v různých velikostech, Dostupnost potrebných rozlišení, Konzistence cele sady\nVektorové sety s možností zmenšit a zvětšit ikony nejsou spásné (ikony je vždy potřeba doostřit)\nNejlepší jsou velké sady s několika rozlišeními pro web, mobilní aplikace. Sady s jednoduchými glyfy mají největší šanci být použité několikrát.\nFormát ikon, pro web a aplikace je nejlepší PNG\n\nVe zdrojích k přednášce jsem vytvořil seznam dobrých setů.\n (vytvořit seznam dobrých setů)\n\nhttp://glyphicons.com/\n\n\n
- Na webu: Pro skenování informací, zachytávání pozornosti. Můžu použít jak nízkodetailní, tak vysoce detailní ikony.\n(Na webu není příliš dobrý nápad použití v navigaci, rozhodně ne bez textových informací - vyjímka, “Všude dobře, doma nejlíp” tlačítko domů)\n\n
- V aplikacích: \nPoužití v toolbarech, jako ovládací prvky, místo textových tlačítek\n\nhttp://dribbble.com/shots/232209-Files\n
- V aplikacích: \nPoužití v navigaci (Pro toto použití se hodí jednoduché nízkotučné (nízkodetailní) ikony)\n\nhttp://dribbble.com/shots/199473-Topic-Page-digest-view\n
- Ikony by měli svým vizuálním stylem ctít celkový styl rozhraní (dát příklad a vysvětlit).\nVyjímkou jsou případy, kdy chci dosáhnout velkého kontrastu.\n Pro čistý (minimalistický) web s minimem grafických efektů použiju jednobarevné ikony jednoduchých tvarů (nehodí se detailní ikony a naopak)\n
- Ukážu Vám můj proces tvorby ikon. Na začátku je vždy důležité položit si otázku “Jaký je účel ikony?”, “Jaká je nejlepší metafora?”\n\n\n\n
- Posbírejte si informace, udělejte si průzkum, výborně se dá použít iconfinder.net, icon sety které vlastníte, AIGA standardizovaný set, http://thenounproject.com/\n\nPři průzkumu se zaměřte na nalezení vhodné metafory. Je jednodussi vytvaret ikony pro podstatna jmena (snazte se vymyslet metafory z podstatnych jmen).\n
- Velice důležitá část.\nNebojte se toho, kdo neumí kreslit má výhodu, protože nemůže kreslit zbytečné detaily.\nPri črtání nakreslete všechny možné varianty co Vás napadnou a postupně iterujte.\nZaměřte se na nalezení vhodné metafory.\nČrtejte v černobíle.\n
- Velice důležitá část.\nNebojte se toho, kdo neumí kreslit má výhodu, protože nemůže kreslit zbytečné detaily.\nPri črtání nakreslete všechny možné varianty co Vás napadnou a postupně iterujte.\nZaměřte se na nalezení vhodné metafory.\nČrtejte v černobíle.\n
- První návrh s kódovým označením nahovno je vždy na nic. Je ale důležitý, protože se na něm dá iterovat, nenechte se zaseknout ještě než něco nakreslíte. Je potřeba začít.\n
- \n\n
- Spousta ikon lze poskládat, např. přidání dokumentu apod. Tímto si můžeme usnadnit výrazně práci.\nPouzivejte konzistentni tvary\nDodrzujte zdroj svetla a perspektivu\nKecám, Vyhýbejte se perspektivě úplně(vetsinu casu neni v ikonach potreba), perspektiva v náší do ikon složitost\nKreslete ve vektorech, v cestách. Pomůže to při kreslení menších velikostí. ALE Jednoduchá změna velikosti vektorových ikon je MÝTUS (vždy je potřeba doostřovat). \nPři velkém zmenšení je potřeba ubrat detailů a ikonu překreslit.\n\n\n
- \n
- Ošklivá ikona se správnou metaforou je vždy lepší než vyleštěná a na dribblu opěvovaná ikony se špatným významem\nŘiďte se kontextem\nMéně je vždy více (trochu klišé, ale platí)\n\n