Nejen na okrasu

Get Started. It's Free
or sign up with your email address
Rocket clouds
Nejen na okrasu by Mind Map: Nejen na okrasu

1. PROČ? Duvody pouziti ikon na webu a v aplikacich

1.1. napomahaji porozumeni (napr. v infografice), setri misto, dekorace

1.2. Zachytavaji pozornost, skenovani informaci

2. Proces

2.1. Jaky je účel ikony? Jaka je nejlepsi metafora

2.2. Posbírejte si informace, udělejte si průzkum, kreslete náčrtky

2.3. Črtejte v černo-bílé

2.4. Vyzkoušejte čitelnost

2.5. Ověřte si, jak ikonu lidé rozpoznávají, jak se ji učí a co od ní čeká

3. JAK? Pouziti ikon !!!

3.1. Neni potreba ikony vytvářet - existuje velké množství ikonových setů, ty dobré jsou většinou placené, ale licence není omezená počtem projektů (jakmile mám dobrý set, můžu ho použít víckrát)

3.2. Ikony by měli svým vizuálním stylem ctít celkévý styl rozhraní (dát příklad a vysvětlit)

3.3. pro čistý (minimalistický) web s minimem grafických efektů použiju jednobarevné ikony jednoduchých tvarů (nehodí se detailní ikony a naopak)

3.4. na webu s velkou plastičností můžu použít obojí (blba uvaha)

3.5. Pouzijte existujici ikony pokud jsou dostupne

3.6. Pouziti na webu pro skenovani informaci, zachytavani pozornosti

4. Tvorba ikon

4.1. Dodržujte styl rozhraní do kterého budou ikony zasazeny

4.2. Dodržujte určený vizuální styl ikon (např. ikony pro iPhone, Android, systémové ikony, dokonce i ikony pro Linux mají své guidelines)

4.3. Je jednodussi vytvaret ikony pro podstatna jmena (snazte se vymyslet metafory z podstatnych jmen)

4.4. Spousta ikon lze poskladat (ukazat priklad pridani dokumentu apod.)

4.5. Dopředu si zjistěte, pro jakou velikost ikonu děláte

4.6. Jednoduchá změna velikosti vektorových ikon je MÝTUS (vždy je potřeba doostřovat)

4.7. Kresleni ikon

4.7.1. Pouzivejte konzistentni tvary

4.7.2. Dodrzujte zdroj svetla a perspektivu

4.7.3. Vyhýbejte se perspektivě

5. linky(vyrazne doplnit)

5.1. Clanky

5.1.1. http://vector.tutsplus.com/articles/inspiration/10-tips-for-effective-icon-design/

5.1.2. http://www.smashingmagazine.com/2008/06/06/icon-design-tutorial-drawing-a-pencil-icon/

5.2. iconstoky

5.2.1. http://iconeden.com/icon/category/premium

5.2.2. http://icondock.com/

5.2.3. http://softfacade.com/#icons_Bobby-2

5.2.4. http://www.helveticons.ch/

6. Teorie(

6.1. Ikony maji ruzna pouziti (shrnuti teorie)

6.1.1. pro objekty jako dokument, vlastnosti objektu, akce (vlozit, ulozit), systemový status

6.2. Je nekolik typu ikon, to ovlivnuje miru abstrakce a stylizace, kterou si muzeme dovolit

6.2.1. Podobnostní-obrazek co vypada jako to co znamena (kniha zobrazujici slovnik)

6.2.2. Symbolické-abstraktní obrázek něco znázorňující (rozbita sklenice muze znamenat neco krehkeho)

6.2.3. Názorná-obrazek zobrazujici priklad nebo charakteristiku neceho (značka vidličky a nože na dálnici zobrazuje restauraci)

6.2.4. Svévolná-obrázek, jehož význam se musíme naučit (ikonka programu)

6.2.5. Analogicky-obrazek fyzicky nebo semanticky s něčím spojený (ruka pro znazorneni drzeni objektu)

6.2.6. New node

7. Pouzitelnost ikon (podobne jako obecne u UI)

7.1. Metafora

7.1.1. Vyber vhodne metafory neni dulezity jenom pro tvorbu ikon ale i pro jejich pouziti. Co by se stalo, kdyby si clovek spletl ikonu smazani s ikonou odeslat?

7.2. Je potreba aby ikona smysluplne zobrazovala to co ma znamenat (ne byla jen cool)

7.3. povědomost

7.3.1. jak povedomy je objekt ktery zobrazujeme? dobrá povědomost zvýší cas potřebný k naučení

7.4. zřejmost (čitelnost)

7.4.1. je ikona čitelná? Dovoluje tvar, struktura a stylizace jasné rozlišení toho co ikona zobrazuje?

7.5. jednoduchost

7.5.1. je tvar čistý a vzdává se zbytečných detailů, příliš mnoho částí zmate uživatele

7.6. jednotnost

7.6.1. Je rodina ikon konzistentni svym tvarem a stylizací? Platí toto i pro ikony menších velikostí?

7.7. přímočarost

7.7.1. jak dobře předává ikona zamýšlený význam

7.8. efektivita!!!

7.8.1. je vhodné ikonu použít? ikony jsou užitečné zejména v situacích kde máme málo prostoru, nebo chceme rychle předat informaci

7.9. rozlišitelnost

7.9.1. ikony musi byt od sebe rozlisitelne, lidska schopnost rozlisovat tvary a formu jsou omezene (existuji vyzkumy)

7.10. http://turbomilk.com/blog/cookbook/icon_design/10_mistakes_in_icon_design/ Vyborne priklady

8. Gestalt zákony

8.1. Zákon uzavřenosti, podobnosti, blízkosti, symetrie

9. Photoshop a Illustrator

9.1. Na tom, jestli ikony dělám ve Photoshopu nebo Illustratoru nezáleží

10. Prinos prednasky

10.1. S nutnosti pouzit ikony se driv nebo pozdeji potka kazdy webdesigner, UX designer, visual designer. Zasady pouziti a tvorby ikon jsou v mnoha smerech stejne jako zasady tvorby UI.

11. Vtipy (postrehy)

11.1. 90 procent praci na Dribbblu jsou ikonky a 90 procent z nich jsou k hovnu

12. Vyber hotove sady ikon

12.1. Zaostření ikon v různých velikostech

12.2. Dostupnost potrebných rozlišení

12.3. Konzistence cele sady

12.4. Vektorové sety s možností zmenšit a zvětšit ikony nejsou spásné (ikony je vždy potřeba doostřit)

12.5. 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.

12.6. Formát ikon, pro web a aplikace je nejlepší PNG

12.7. New node

12.8. New node