Nejen na okrasu. Pavel Maček
|
|
- Květa Kopecká
- před 9 lety
- Počet zobrazení:
Transkript
1 Nejen na okrasu Pavel Maček 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?
2 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íš.
3 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ž 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ě.
4 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.
5 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).
6 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.
7 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?
8 Je povědomá Objekt, který zobrazujeme, musí být co nejvíce povědomý. Dobrá povědomost sníží čas potřebný k naučení.
9 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.
10 Je jednoduchá Jednoduchá ikona má čistý tvar a vzdává se zbytečných detailů. Příliš mnoho částí zbytečně mate.
11 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.
12 Je rozlišitelná Ikony musi byt od sebe rozlisitelne, lidska schopnost rozlisovat tvary a formu je omezena. (timto se zabyva kognitivni psychologie)
13 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.
14 Použití ikon? Teď už víme, co má dobrá ikona splňovat, tak ji můžeme vybrat a použít.
15 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.
16 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ů)
17 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ů)
18 V aplikacích. V aplikacích: Použití v toolbarech, jako ovládací prvky, místo textových tlačítek
19 V aplikacích. V aplikacích: Použití v navigaci (Pro toto použití se hodí jednoduché nízkotučné (nízkodetailní) ikony)
20 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)
21 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?
22 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, 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).
23 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.
24 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.
25 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.
26 Iterujte, ověřujte
27 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.
28 Zdroje zootool.com/user/pavelmacek/pack:icons readernaut.com/matcheck/books blog.matcheck.cz
29 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í)
Výukový materiál pro projekt Podpora multimediální výuky reg. č. CZ.1.07/1.1.07/02.0077
Výukový materiál pro projekt Podpora multimediální výuky reg. č. CZ.1.07/1.1.07/02.0077 Obsah Úprava a správa fotografií...5 1 Úvod...5 1.1 Obrazové formáty...5 1.2 Rozlišení...7 1.3 Tisk...8 2 Popis prostředí
VíceJak využít metodu street law při výuce práva
Jak využít metodu street law při výuce práva Lucia Madleňáková Olomouc 2012 Úvodní slovo Vážení a milí kolegové, dostává se vám do rukou příručka, jejímž cílem je usnadnit vám zavádění předmětu (či výukové
VíceJAK ÚSPĚŠNĚ VSTOUPIT NA TRH PRÁCE
JAK ÚSPĚŠNĚ VSTOUPIT NA TRH PRÁCE JAK ÚSPĚŠNĚ VSTOUPIT NA TRH PRÁCE Ve spolupráci zpracovaly AXIAL PERSONNEL AGENCY, s. r. o. & Fond dalšího vzdělávání, p. o. MPSV 2 OBSAH 1. ÚVOD...4 2. ZPŮSOBY HLEDÁNÍ
VíceInformace pro všechny
Evropská pravidla pro tvorbu snadno srozumitelných informací Program celoživotního vzdělávání Vytvořeno v rámci projektu Cesty ke vzdělávání dospělých lidí s mentálním postižením Inclusion Europe Partneři
VíceVyužití aplikace NetSupport School pro školní prostředí
Využití aplikace NetSupport School pro školní prostředí Vytvořeno v rámci projektu Dotkněte se inspirace Registrační číslo: CZ.1.0.7./1.3.00/51.0046 Autoři: Ludmila Klatovská Petr Kofroň Lenka Mandryszová
VíceJAK ŘEŠIT PROBLÉMY PŘI PSANÍ ODBORNÝCH TEXTŮ. Eva Juláková
JAK ŘEŠIT PROBLÉMY PŘI PSANÍ ODBORNÝCH TEXTŮ Eva Juláková Praha 2007 Tento text vznikl pro potřeby projektu Pražské analytické centrum inovací CZ.04.3.07/4.2.01.1/0002 v grantovém schématu JPD3 Spolupráce
VícePoužití vyvážení bílé a stylů. Picture Styles. O barevných prostorech
Použití vyvážení bílé a stylů Picture Styles Jednou z velkých výhod digitální fotografie je možnost dosáhnout přesného barevného vyjádření jak přímo během focení, tak i při tisku fotek. Nastavení správných
VíceGNU Image Manipulation Program 1 / 317. GNU Image Manipulation Program
1 / 317 GNU Image Manipulation Program Uživatelská příručka 2 / 317 Copyright 2002, 2003, 2004, 2005, 2006, 2007 The GIMP Documentation Team Právní upozornění Permission is granted to copy, distribute
VíceDobrá praxe pro zlepšení jazykové výuky dospělých zrakově postižených. Pedagogika a jazyková výuka pro dospělé nevidomé a slabozraké v Evropě
Grundtvig partnerský program ve vzdělávání Dobrá praxe pro zlepšení jazykové výuky dospělých zrakově postižených Projekt Pedagogika a jazyková výuka pro dospělé nevidomé a slabozraké v Evropě Obsah Úvod
VíceGymnázium a Střední odborná škola, Nový Jičín, příspěvková organizace. Google dokumenty. Tutoriál projektu MOSS studentská verze
Gymnázium a Střední odborná škola, Nový Jičín, příspěvková organizace Google dokumenty Tutoriál projektu MOSS studentská verze Nový Jičín 2010 Mgr. Gustav Žídek Osnova 1 Úvodní informace... 3 2 Cloud Computing...
Více1 Jak zjistit, co vlastně chci?
1 Jak zjistit, co vlastně chci? Každý z nás najde nejlepší odpověď na tuto otázku sám u sebe. Nikdo nás nezná lépe než my sami. Můžeme mít ale dojem, že potřebujeme pohled někoho zvenčí, kdo by nás ohodnotil
VíceZáklady MS Excelu 2007 jednoduše
Základy MS Excelu 2007 jednoduše Učební texty jsou určeny pro všechny, kteří nechtějí studovat tlusté příručky a přitom se chtějí snadněji orientovat v tabulkovém editoru MS Excel. Právě stručný text,
VíceMRP Základ vizuálního systému
MRP - Soubor účetních agend MRP Základ vizuálního systému P. O. BOX 35 76315 Slušovice telefon: +420 577 001 258 telefax: +420 577 059 250 internet: http://www.mrp.cz průvodce uživatele programem MRP
VíceThe BlueJ Tutorial verze 1.4 pro BlueJ verze 1.2.x
The BlueJ Tutorial verze 1.4 pro BlueJ verze 1.2.x Michael Kölling Mærsk Institute University of Southern Denmark přeložil Petr Škoda, 1. verze 1 Obsah 1 Předmluva... 4 1.1 O BlueJ... 4 1.2 Rozsah a cílová
VíceManuál pracovních postupů v GIS pro oblast sociálního výzkumu a sociální práci
Manuál pracovních postupů v GIS pro oblast sociálního výzkumu a sociální práci pracovní postupy v GIS zpracování statistických dat atributové a prostorové výběry dat interpolační metody geostatistické
VíceČeské vysoké učení technické v Praze Fakulta stavební Katedra mapování a kartografie DIPLOMOVÁ PRÁCE. Filip Antoš
České vysoké učení technické v Praze Fakulta stavební Katedra mapování a kartografie DIPLOMOVÁ PRÁCE Filip Antoš Problematika skenování historických map a jejich následné prezentace na internetu Problematics
VíceDan Merta galerista Galerie Jaroslava Fragnera
ARCHINEWS 2 2011 Polyfunkční dům Ostrava-Vítkovice dynamický výraz objektu reaguje na své okolí. Pilová střecha budovy se zakusuje do panoramatu vítkovických Hradčan POSTŘEH > REALIZACE > Nejlepším kritériem
VíceMgr. et Bc. Pavel Kopta. Využití arteterapie v náhradní rodině
Mgr. et Bc. Pavel Kopta Využití arteterapie v náhradní rodině 3 Mgr. et Bc. Pavel Kopta Využití arteterapie v náhradní rodině Pro činnost Občanského sdružení Rozum a Cit jsme si zvolili motto: Nasloucháme
VícePosouzení vlastností elektronických dokumentů z hlediska jejich dlouhodobého uchovávání
Posouzení vlastností elektronických dokumentů z hlediska jejich dlouhodobého uchovávání Ing. Ivan Zderadička, spolupracovník společnosti Central European Advisory Group S pokračujícím rozvojem informačních
Víceplatnost od 10. 9. 2012
P latnost od 3. 9. 2012 platnost od 10. 9. 2012 Obsah Úvod...... 4 Průvodce nastavením e-shopu... 5 Výkladový slovník... 9 Přihlášení... 11 Odhlášení... 13 ThemeCentrik - objednávka grafické šablony...
VíceRady pro tvorbu USE CASE MODELU, rada první: Jak pracovat s pojmy ve scénářích UC
Rady pro tvorbu USE CASE MODELU, rada první: Jak pracovat s pojmy ve scénářích UC Úvod Před nedávnem jsem obdržel trochu delší mail tohoto znění: Dobrý den pane Kravale, před časem jsem absolvoval vaše
VíceGRAFICKÝ PROJEKT 1 (ČTVRTÁ ČÁST): ABSTRAKCE VYCHÁZEJÍCÍ Z TVARU PÍSMEN
KAPITOLA 7 GRAFICKÝ PROJEKT 1 (ČTVRTÁ ČÁST): ABSTRAKCE VYCHÁZEJÍCÍ Z TVARU PÍSMEN ČTVRTÁ METODA: ZAČLENĚNÍ PÍSMEN Dosti rozšířenou metodou vizuálního zprostředkování informací je tvorba nového vizuálního
VíceJAK NAPSAT BAKALÁŘSKOU PRÁCI
Mendelova univerzita v Brně Fakulta regionálního rozvoje a mezinárodních studií JAK NAPSAT BAKALÁŘSKOU PRÁCI Jana Borůvková Brno 2010 Obsah 1 ÚVOD... 7 2 ÚVOD DO TYPOGRAFIE... 9 2.1 ODSTAVEC... 9 2.2 PÍSMO...
VíceRecenze programu Legacy Family Tree 6.0 Autor: Radek Tlapák, LegacyFamilyTree@seznam.cz, http://legacy.unas.cz
Recenze programu Legacy Family Tree 6.0 Autor: Radek Tlapák, LegacyFamilyTree@seznam.cz, http://legacy.unas.cz Dnes bych Vás chtěl seznámit s pro mne nepřekonatelným genealogickým programem Legacy Family
VíceBONUS. Affiliate marketing na Facebooku: Jak vydělat FB stránky. Samuel Hornek
BONUS Affiliate marketing na Facebooku: Jak vydělat FB stránky Samuel Hornek Affiliate na sociálních sítích facebookové stránky Vydělávat jako affiliate partner na své vlastní stránce není nic těžkého,
Vícemetodická příručka projektové výuky a zážitkové pedagogiky Prázdninové školy Lipnice Cesta za žákovskými projekty
metodická příručka projektové výuky a zážitkové pedagogiky Prázdninové školy Lipnice Cesta za žákovskými projekty Cesta za žákovskými projekty metodická příručka projektové výuky a zážitkové pedagogiky
VíceJak koučovat debatní klub. Autor Matěj Pilát
Jak koučovat debatní klub Autor Matěj Pilát Obsah 1) Úvod... 3 Osoba kouče... 4 Role... 5 2) Jak založit klub... 5 3) Koučování ve dvojici... 5 Výhody koučování ve dvou... 6 Koho si vybrat do dvojice...
VíceKvalita a benchmarking ve veřejné dopravě 1
Kvalita a benchmarking ve veřejné dopravě 1 K použití tohoto materiálu Cílem projektu PORTAL je zrychlení průniku výsledků výzkumu EU do oblasti lokální a regionální dopravy prostřednictvím vytvoření nových
VíceEMPOWERMENT MOŽNOSTI ZAPOJOVÁNÍ A POSILOVÁNÍ LIDÍ, UŽIVATELŮ SLUŽEB AGENTUR PZ A JINÝCH ORGANIZACÍ
Jana Adamčíková Petr Eisner Daniel Kaucký EMPOWERMENT MOŽNOSTI ZAPOJOVÁNÍ A POSILOVÁNÍ LIDÍ, UŽIVATELŮ SLUŽEB AGENTUR PZ A JINÝCH ORGANIZACÍ Rytmus, o. s. Tento program byl spolufinancován Evropskou unií
Více