Nejen na okrasu Pavel Maček h!p://www.matcheck.cz h!p://www.dribbble.com/matcheck
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. A teď zveděte ruku všichni, kdo už někdy při své přáci ikony použil?
Jsem UI Icon Designer
S nutnosti pouzit ikony se driv nebo pozdeji potka kazdy webdesigner, UX designer nebo visual designer. Jsem designér uživatelských rozhraní a navrhuju mobilní a webové aplikace. Př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. V 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íš.
Ikony a historie
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. První písma používali grafické symboly (ideogramy) k zachycení slov, známe např. hieroglyfy. Některé jazyky jako čínština používají grafické symboly dodnes. Ikony tedy nejsou nic nového. Možnosti jejich využití se ale pořád mění v závislosti na době.
Ikony a současnost
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. V 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/ http://triercopenhagen.com/skin/frontend/redesign/default/images/media/service/wash-icons-mini.gif
Proč?
Důvody: proč ikony použít? Nepotřebují lokalizaci. (příklad) Napomáhají porozumění (např. v infografice) - příklad Šetří místo - příklad nějakého toolbaru Nevytváří tolik vizuálního šumu jako textové ovládací prvky (např. textová tlačítka).
Dobrá (použitelná) ikona
Než si řekneme jak používat ikony, poďme si říct, co by měla dobrá ikona splňovat. Ja 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.
Má dobrou metaforu
Asi nejdůležitější vlastnost dobré ikony. Je potřeba, aby ikona smysluplně zobrazovala to co má znamenat. Originální metafory jsou často špatná volba. Šálek je super. Ikona spiciho cloveka s otaznikem nema jasny vyznam, co to je? Clovek v komatu?
Je povědomá
Objekt, který zobrazujeme, musí být co nejvíce povědomý. Dobrá povědomost sníží čas potřebný k naučení.
Je zřejmá (čitelná)
Dobrá ikona musí být zřejmá. Její tvar, struktura a stylizace musí dovolovat jasné rozlišení toho co ikona zobrazuje? Je důležité vzít v potaz i národní rozdíly, např. podoba poštovních schránek.
Je jednoduchá
Jednoduchá ikona má čistý tvar a vzdává se zbytečných detailů. Příliš mnoho částí zbytečně mate. http://dribbble.com/shots/207159-Software-installer-icon
Je jednotná
Rodina ikon musí být konzistentní svým tvarem a stylizací? Je důležité dát si pozor na ikony s proměnným osvětlením. Ikona 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. http://dribbble.com/shots/269622-Glyphs-for-Marketplace-website http://dribbble.com/shots/261042-iTerm2-Replacement-icons
Je rozlišitelná
Ikony musi byt od sebe rozlisitelne, lidska schopnost rozlisovat tvary a formu je omezena. (timto se zabyva kognitivni psychologie) http://dribbble.com/shots/25888-Stock-Icon-Set
Je efektivněfetkní
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. Platí to stejné jako u uživatelských rozhraní, použitelnost je pouze první krok. http://dribbble.com/shots/119168-Darth-rebound
Použití ikon
? Teď už víme, co má dobrá ikona splňovat, tak ji můžeme vybrat a použít.
Typy ikon Objekt Vlastnost objektu Akce Status Ikona aplikace 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. Ikony pro objekty (např. dokument, kniha) - většinou založené na podobnosti, musí odpovídat skutečnosti Ikony pro vlastnosti objektů (rozbitá sklenice - křehký) - většinou symbolické, Ikony 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? Ikony pro systémový status - abstraktní, značka fajfky Ikony aplikací (ty mohou být abstrakní, více dekorativní než funkční) Jejich význam se musíme většinou naučit.
Použití hotové sady ikon
Použijte existující ikony pokud jsou dostupné. (stejně jako v je to s písmem) Není 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). Při výběru vhodného setu je potřeba si dát pozor na : Zaostření ikon v různých velikostech, Dostupnost potrebných rozlišení, Konzistence cele sady Vektorové sety s možností zmenšit a zvětšit ikony nejsou spásné (ikony je vždy potřeba doostřit) Nejlepší 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. Formát ikon, pro web a aplikace je nejlepší PNG Ve zdrojích k přednášce jsem vytvořil seznam dobrých setů. (vytvořit seznam dobrých setů) http://glyphicons.com/
Na webu
Na webu: Pro skenování informací, zachytávání pozornosti. Můžu použít jak nízkodetailní, tak vysoce detailní ikony. (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ů)
V aplikacích.
V aplikacích: Použití v toolbarech, jako ovládací prvky, místo textových tlačítek http://dribbble.com/shots/232209-Files
V aplikacích.
V aplikacích: Použití v navigaci (Pro toto použití se hodí jednoduché nízkotučné (nízkodetailní) ikony) http://dribbble.com/shots/199473-Topic-Page-digest-view
Vizuální styl
Ikony by měli svým vizuálním stylem ctít celkový styl rozhraní (dát příklad a vysvětlit). Vyjímkou jsou případy, kdy chci dosáhnout velkého kontrastu. Pro čistý (minimalistický) web s minimem grafických efektů použiju jednobarevné ikony jednoduchých tvarů (nehodí se detailní ikony a naopak)
Proces tvorby ikon
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?”
Průzkum
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/ Při průzkumu se zaměřte na nalezení vhodné metafory. Je jednodussi vytvaret ikony pro podstatna jmena (snazte se vymyslet metafory z podstatnych jmen).
Skicování
Velice důležitá část. Nebojte se toho, kdo neumí kreslit má výhodu, protože nemůže kreslit zbytečné detaily. Pri črtání nakreslete všechny možné varianty co Vás napadnou a postupně iterujte. Zaměřte se na nalezení vhodné metafory. Črtejte v černobíle.
Skicování
Velice důležitá část. Nebojte se toho, kdo neumí kreslit má výhodu, protože nemůže kreslit zbytečné detaily. Pri črtání nakreslete všechny možné varianty co Vás napadnou a postupně iterujte. Zaměřte se na nalezení vhodné metafory. Črtejte v černobíle.
První návrh
... 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.
Iterujte, ověřujte
Praktické rady
Spousta ikon lze poskládat, např. přidání dokumentu apod. Tímto si můžeme usnadnit výrazně práci. Pouzivejte konzistentni tvary Dodrzujte zdroj svetla a perspektivu Kecám, Vyhýbejte se perspektivě úplně(vetsinu casu neni v ikonach potreba), perspektiva v náší do ikon složitost Kreslete 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). Při velkém zmenšení je potřeba ubrat detailů a ikonu překreslit.
Zdroje zootool.com/user/pavelmacek/pack:icons readernaut.com/matcheck/books blog.matcheck.cz
Shrnutí Vyberte správnou metaforu Řiďte se kontextem Méně je vždy více Buďte konzistentní
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 Řiďte se kontextem Méně je vždy více (trochu klišé, ale platí)
