Nejen na okrasu. Pavel Maček

Rozměr: px
Začít zobrazení ze stránky:

Download "Nejen na okrasu. Pavel Maček http://www.matcheck.cz http://www.dribbble.com/matcheck"

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 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íce

Jak využít metodu street law při výuce práva

Jak 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íce

JAK ÚSPĚŠNĚ VSTOUPIT NA TRH PRÁCE

JAK Ú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íce

Informace pro všechny

Informace 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íce

Využití aplikace NetSupport School pro školní prostředí

Využ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íce

JAK Ř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á 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íce

Použití vyvážení bílé a stylů. Picture Styles. O barevných prostorech

Použ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íce

GNU Image Manipulation Program 1 / 317. GNU Image Manipulation Program

GNU 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íce

Dobrá 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ě

Dobrá 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íce

Gymná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 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íce

1 Jak zjistit, co vlastně chci?

1 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íce

Základy MS Excelu 2007 jednoduše

Zá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íce

MRP Základ vizuálního systému

MRP 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íce

The BlueJ Tutorial verze 1.4 pro BlueJ verze 1.2.x

The 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íce

Manuá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 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š Č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íce

Dan Merta galerista Galerie Jaroslava Fragnera

Dan 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íce

Mgr. et Bc. Pavel Kopta. Využití arteterapie v náhradní rodině

Mgr. 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íce

Posouzení 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í 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íce

platnost od 10. 9. 2012

platnost 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íce

Rady 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 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íce

GRAFICKÝ PROJEKT 1 (ČTVRTÁ ČÁST): ABSTRAKCE VYCHÁZEJÍCÍ Z TVARU PÍSMEN

GRAFICKÝ 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íce

JAK NAPSAT BAKALÁŘSKOU PRÁCI

JAK 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íce

Recenze 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 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íce

BONUS. 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 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íce

metodická 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 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íce

Jak koučovat debatní klub. Autor Matěj Pilát

Jak 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íce

Kvalita a benchmarking ve veřejné dopravě 1

Kvalita 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íce

EMPOWERMENT MOŽNOSTI ZAPOJOVÁNÍ A POSILOVÁNÍ LIDÍ, UŽIVATELŮ SLUŽEB AGENTUR PZ A JINÝCH ORGANIZACÍ

EMPOWERMENT 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