WebdesignJan Valuštíktwitter.com/honzavalustik
Osnova:1) Co je design a proč je důležitý2) Jak to udělat přehledné3) Jak to udělat hezké
Co je design?Skloubení krásy a funkčnosti
"Dobré umění inspiruje, dobrý design motivuje""Dobré umění je interpretováno, dobrý design jepochopen""Dobré umění je o ta...
Dobrá zpráva:Webdesigner není umělec,       naštěstí.
Proč je design důležitý?              Holící strojek za 20 miliard korun                        Zdroj obrázku: www.antonie...
Proč je design důležitý?● Protože prodává● Design je to první, co návštěvník webu uvidí● Ovlivňuje mínění zákazníka a jeho...
Účely designu● předání informací přehlednou a jednoduchou  formou, KIS = keep-it-simple● vzbudit důvěru a navnadit ke konv...
Účely designuJakobs Law of the Web User Experience states that  "users spend most of their time on other websites."       ...
Jak lidé myslí          1. lidé web nečtou, ale skenují ● Proto musí být zaměření webu patrné na první pohled   (nejvíce s...
Jak lidé myslí       2. jak lidé skenují - F pattern                 Zdroj: http://www.useit.com/alertbox/reading_pattern....
Jak lidé myslí                  2. jak lidé skenují                      Eyetracker ukázka    http://www.youtube.com/user/...
Kam se návštěvníci nejvíc dívají?Čerstvé, ještě teplé výsledky studie Jakoba NielsenaHorizontální hledisko (1024 x 768 px)...
Kam se návštěvníci nejvíc dívají?Čerstvé, ještě teplé výsledky studie Jakoba NielsenaVertikální hledisko (1024 x 768 px)  ...
Kam se návštěvníci nejvíc dívají?Čerstvé, ještě teplé výsledky studie Jakoba Nielsena                            Souhrn:Pr...
Jak lidé myslí                3. co vám odpustí ● Kupodivu odpustí špatný design, ale nutnou podmínkou   je vysoce kvalitn...
Odbočka 1Lidé nevydrží věnovat pozornost něčemu déle než 15 minut             Proto budu odbočovat :-)
Odbočka 1                     Největší banner na světě  http://www.bannertool.de/awards/2009/en/chry_jeep_nature/banner/  ...
Jak to udělat přehledné       praktická část
Typy layoutuFixní layout- v dnešní době nejčastěji 960 pxRoztahovací layout- pro malá rozlišení displeje a 1 sloupcové lay...
Typy layoutuAdaptabilní layout- pomocí javascriptu mění css podle šířky displeje- náročný na vytvoření- velká flexibilita-...
Typy layoutu                     Co používáte?samozřejmě záleží na účelu webu - mapy, grafy, rozsáhlétabulky, web aplikace...
Návrh webuVše začíná na papíře ● základní rozložení prvků na stránce se vyplatí ze začátku   kreslit na papír, a ujasnit s...
Mřížka je nepostradatelný pomocník● vertikální a potažmo horizontální mřížka je nepostradatelná● pomáhá udržet harmonii a ...
Mřížka je nepostradatelný pomocník● standardní šířka webu je dnes 960 px (všichni souhlasí?),  podle toho uzpůsobíme mřížk...
Mřížka je nepostradatelný pomocník
Mřížka je nepostradatelný pomocníkMřížku můžeme modifikovat, např. asymetrické sloupce
Mřížka je nepostradatelný pomocník         Jak umístit prvky v mřížce:
Mřížka je nepostradatelný pomocníkA co takhle mřížku nabourat nebo ji ignorovat?● spousta designů na mřížce nestojí, ale v...
Jak to udělat přehledné● zachovejte konzistentnost designu (stejné prvky mají  stejné vlastnosti na celém webu)● využívejt...
Jak to udělat přehledné                                                    Dostatek prostoru Příliš natěsnané             ...
Jak to udělat přehledné● důležitá je šířka odstavce, pro pohodlné čtení by neměla  přesáhnout 80 znaků nebo 18 slov● text ...
Jak to udělat přehledné● kontrolujte každý pixel, pixel perfect design● odkazy podtrhávat a navštívené odkazy zvýraznit ji...
Jak to udělat přehledné    Když už není co ubrat, pak je to OK  Poznámka: Není tady zbytečně moc slajdů?
Odbočka 2  Věčné téma webdesignuBitmapa vs. Vektor a co je lepší pro webdesign        Diskuse
Odbočka 2    Bitmapa                        Vektor      ● Adobe Photoshop               ● Adobe Illustrator      ● Gimp   ...
Jak to udělat hezké     praktická část
Jak to udělat hezké Inspirace není plagiátorství, ale pomyslná         hranice není zrovna široká ● wbd.cz ● www.cssrevue....
Jak to udělat hezké                       Cenné tipy● nudná témata nemusí mít nudný web, experimentujte s  barvami, ale hl...
Zdroj: http://wefunction.com/2009/04/quality-within-web-design/
Jak to udělat hezké                       Cenné tipy● když vytvoříte design, nechte jej uležet a k hodnocení se  vraťte až...
Jak to udělat hezké                         Cenné tipy● používejte konvence:   ○ podtržené odkazy, klikatelné logo, umístě...
Jak to udělat hezké         Jak se naučit "kreslit"? Radši se na to pořádně podívat než o tom                  jen číst.
Jak to udělat hezké                       Web 2.0 styl● 1px vytažení a jemné přechody● leštící techniky● stíny, vzorky a t...
Zdroj: http://wefunction.com/2009/04/quality-within-web-design/
Jak to udělat hezké                       Minimalismus● paradoxně náročný design, každá chyba se projeví● cit pro typograf...
Jak to udělat hezké                    Newspaper styl● weby stylizované do podoby novin či tištěných médií● důležitá práce...
Odbočka 3   "Kdy je nejlepší čas přestatpoužívat trendy? Jakmile se objeví  na smashingmagazine.com."              Jiří Tv...
Jak to udělat hezké                      Grunge styl● "zabordelené, špinavé a poškrábané" weby● důležitá práce s texturami...
Zdroj: http://www.smashingmagazine.com/2008/03/11/the-secrets-of-grunge-design/
Zdroj: http://www.smashingmagazine.com/2008/03/11/the-secrets-of-grunge-design/
Jak to udělat hezké                        Retro styl● retro je in● důležitá práce s texturami a typografií
Zdroj: http://www.smashingmagazine.com/2008/10/07/retro-and-vintage-in-modern-web-design/
Zdroj: http://www.smashingmagazine.com/2008/10/07/retro-and-vintage-in-modern-web-design/
Jak to udělat hezké                  Ilustrované weby● tady se hodí, když je designer taky trochu umělec
Odbočka 4  "Kdy zvážit odstoupení odprojektu? Když je zadavatel tak       trochu umělec."Do webdesignu kecají všichni, od ...
Jak to udělat hezké            Delighters - okořeňte web● oživte web netradičními prvky● za minimální náklady návštěvníka ...
Odbočka 5         A na závěr videjko?http://www.makemylogobiggercream.com/t-shirt.html
Konečně konecJan Valuštíktwitter.com/honzavalustik
Jak se dělá webdesign
Jak se dělá webdesign
Jak se dělá webdesign
Jak se dělá webdesign
Jak se dělá webdesign
Jak se dělá webdesign
Jak se dělá webdesign
Jak se dělá webdesign
Jak se dělá webdesign
Jak se dělá webdesign
Jak se dělá webdesign
Jak se dělá webdesign
Upcoming SlideShare
Loading in...5
×

Jak se dělá webdesign

1,587

Published on

V rámci předmětu Seminář webdesignu na FI MUNI jsem přednášel pro nadšence webdesignu. Nemůžu jinak než se o přednášku s vámi podělit a všem studentům FI doporučit tento předmět.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,587
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Jak se dělá webdesign

  1. 1. WebdesignJan Valuštíktwitter.com/honzavalustik
  2. 2. Osnova:1) Co je design a proč je důležitý2) Jak to udělat přehledné3) Jak to udělat hezké
  3. 3. Co je design?Skloubení krásy a funkčnosti
  4. 4. "Dobré umění inspiruje, dobrý design motivuje""Dobré umění je interpretováno, dobrý design jepochopen""Dobré umění je o talentu, dobrý design je odovednostech""Dobré umění předává každému rozdílné sdělení,dobrý design předává každému sdělení stejné" John ONolan, webdesigner from UK and owner of Lyrical Media
  5. 5. Dobrá zpráva:Webdesigner není umělec, naštěstí.
  6. 6. Proč je design důležitý? Holící strojek za 20 miliard korun Zdroj obrázku: www.antoniegeerts.com Do vývoje designu investovala firma Gillette přes 20 miliard, tento strojek se stal úspěšný a zisky vysoce převyšovaly investici (jen na designu obalu se utratily miliony dolarů)
  7. 7. Proč je design důležitý?● Protože prodává● Design je to první, co návštěvník webu uvidí● Ovlivňuje mínění zákazníka a jeho chuť ke konverzi
  8. 8. Účely designu● předání informací přehlednou a jednoduchou formou, KIS = keep-it-simple● vzbudit důvěru a navnadit ke konverzi● odlišit se od konkurence, zanechat dobrý dojem● dodržování zažitých zvyklostí
  9. 9. Účely designuJakobs Law of the Web User Experience states that "users spend most of their time on other websites." Jakob Nielsen, useit.com "Inovujte jen když víte, že máte lepší nápad (a každý, komu ho ukážete, bude nadšen), v opačném případě využijte zvyklostí." Steve Krug, Nenuťte uživatele přemýšlet
  10. 10. Jak lidé myslí 1. lidé web nečtou, ale skenují ● Proto musí být zaměření webu patrné na první pohled (nejvíce se vyskytující chyba) ● hledají záchytné body, které je intuitivně provedou po stránce (logo, menu, hlavní obsah) ● proskenují některé texty, kliknou na 1. odkaz, který je zaujme, velkou část webu ani nezaregistrují ● chtějí se vždy vrátit zpět (klikatelné logo, tlačítko zpět) ● jsou netrpěliví, nebudou mít slitování
  11. 11. Jak lidé myslí 2. jak lidé skenují - F pattern Zdroj: http://www.useit.com/alertbox/reading_pattern.html
  12. 12. Jak lidé myslí 2. jak lidé skenují Eyetracker ukázka http://www.youtube.com/user/ocnikamera#p/a/u/1/zhojLJLV_uk Zdroj: symbio.cz
  13. 13. Kam se návštěvníci nejvíc dívají?Čerstvé, ještě teplé výsledky studie Jakoba NielsenaHorizontální hledisko (1024 x 768 px) levá strana pravá strana 69 % času 31 % času
  14. 14. Kam se návštěvníci nejvíc dívají?Čerstvé, ještě teplé výsledky studie Jakoba NielsenaVertikální hledisko (1024 x 768 px) nad zlomem pod zlomem 80 % času 20 % času
  15. 15. Kam se návštěvníci nejvíc dívají?Čerstvé, ještě teplé výsledky studie Jakoba Nielsena Souhrn:Prvky, které by neměly být přehlédnuty, dávat nad zlom stránky a vlevo
  16. 16. Jak lidé myslí 3. co vám odpustí ● Kupodivu odpustí špatný design, ale nutnou podmínkou je vysoce kvalitní obsah, nespoléhejte na to! Web je prostě o informacích, a ne o kreacích
  17. 17. Odbočka 1Lidé nevydrží věnovat pozornost něčemu déle než 15 minut Proto budu odbočovat :-)
  18. 18. Odbočka 1 Největší banner na světě http://www.bannertool.de/awards/2009/en/chry_jeep_nature/banner/ Zajímavostí banneru je, že byl složen ze tří flashových animací o celkové šířce 6 000 px Míra interakce návštěvníků s bannerem dosáhla 16,1 %Zdroj: http://idirekt.cz/marketingove-zpravodajstvi/jeep-vyuzil-v-kampani-nejvetsi-banner-na-svete
  19. 19. Jak to udělat přehledné praktická část
  20. 20. Typy layoutuFixní layout- v dnešní době nejčastěji 960 pxRoztahovací layout- pro malá rozlišení displeje a 1 sloupcové layouty- využití v mobilních zařízeních- nekontrolujeme šířku řádkuFluidní layout- roztahuje se v daných mezích (např. 960 px - 1200 px)- pohodlí pro uživatele s většími rozlišeními?- http://www.hrad.cz/
  21. 21. Typy layoutuAdaptabilní layout- pomocí javascriptu mění css podle šířky displeje- náročný na vytvoření- velká flexibilita- vyplatí se?Elastický layout- zvětšuje se současně se zvětšovaným textem- má smysl (zoom v prohlížeči)?Hybridní layout- kombinace výše zmíněného
  22. 22. Typy layoutu Co používáte?samozřejmě záleží na účelu webu - mapy, grafy, rozsáhlétabulky, web aplikace apod. je lepší dělat na co nejširší plochuAle co standardní weby? Je fixní layout zlo? Potřebujemezaplnit celý viewport (plocha v prohlížeči, kde je samotnýweb)? A co nehezké bílé místo okolo webu při velkýchrozlišeních? Diskuse?
  23. 23. Návrh webuVše začíná na papíře ● základní rozložení prvků na stránce se vyplatí ze začátku kreslit na papír, a ujasnit si tak myšlenky ● nemá cenu něco "kreslit" v PC, když nevím, jak to tam teda na tom webu bude ● s návrhem na papír se nepipláme a zanedbáváme detaily ● při větších projektech se vyplácí celý web rozkreslit do wireframů
  24. 24. Mřížka je nepostradatelný pomocník● vertikální a potažmo horizontální mřížka je nepostradatelná● pomáhá udržet harmonii a celistvost designu● nebojte se, neomezí vás Zdroj: 960.gs
  25. 25. Mřížka je nepostradatelný pomocník● standardní šířka webu je dnes 960 px (všichni souhlasí?), podle toho uzpůsobíme mřížku● výhoda čísla 960 je jeho dělitelnost (2, 3, 4, 5, 6, 8, 10, 12, 16 ...), a tudíž variabilita v počtu sloupců● mřížku, tedy počet sloupců vybíráme podle obsahu, nejběžněji se využívá 12 a 16 sloupcová mřížka
  26. 26. Mřížka je nepostradatelný pomocník
  27. 27. Mřížka je nepostradatelný pomocníkMřížku můžeme modifikovat, např. asymetrické sloupce
  28. 28. Mřížka je nepostradatelný pomocník Jak umístit prvky v mřížce:
  29. 29. Mřížka je nepostradatelný pomocníkA co takhle mřížku nabourat nebo ji ignorovat?● spousta designů na mřížce nestojí, ale valná většina ano (http://www.pojeta.cz/)● její výhoda je, že návštěvník se snáze orientuje, jelikož ji intuitivně zná z jiných webů (Jakobs Law of the Web User Experience)● vybočte z mřížky, ale musíte dbát na přehlednost a srozumitelnost (http://www.kutztown.edu/acad/commdes/)
  30. 30. Jak to udělat přehledné● zachovejte konzistentnost designu (stejné prvky mají stejné vlastnosti na celém webu)● využívejte maximálně 3 barvy + odstíny, přehršel = cirkus● barvy využijte ke zdůraznění důležitosti některých prvků, využijte obecné vnímání některých barev● využívejte white- space, nelepte příliš obsah na hrany webu
  31. 31. Jak to udělat přehledné Dostatek prostoru Příliš natěsnané Zdroj: http://wefunction.com/2009/04/quality-within-web-design/
  32. 32. Jak to udělat přehledné● důležitá je šířka odstavce, pro pohodlné čtení by neměla přesáhnout 80 znaků nebo 18 slov● text by měl mít adekvátní výšku řádků (rozhodně nelepit na sebe)● použijte maximálně 3 type-face a 3 velikosti● dodržujte dostatečný kontrast textu oproti pozadí● "Zbavte se poloviny slov na každé stránce, a potom se zbavte poloviny z toho, co zbylo." (Krugrův třetí zákon použitelnosti)● texty oživte obrázky či zvýrazněním, jinak je návštěvník přeskočí
  33. 33. Jak to udělat přehledné● kontrolujte každý pixel, pixel perfect design● odkazy podtrhávat a navštívené odkazy zvýraznit jinou barvou● pozor na bannerovou slepotu - nevytvářet prvky podobné bannerům či reklamě● raději vertikální skrolování než stránkování● a co horizontální skrolování? pokud je web vytvořen přímo pro horizontální skrolování, návštěvníkům to nedělá problém, jinak si horizontálního skrolování téměř nikdo nevšimne (http://www.thehorizontalway.com/)
  34. 34. Jak to udělat přehledné Když už není co ubrat, pak je to OK Poznámka: Není tady zbytečně moc slajdů?
  35. 35. Odbočka 2 Věčné téma webdesignuBitmapa vs. Vektor a co je lepší pro webdesign Diskuse
  36. 36. Odbočka 2 Bitmapa Vektor ● Adobe Photoshop ● Adobe Illustrator ● Gimp ● Adobe Fireworks ● Corel ● Inkscape ● Adobe Flash Adobe Photoshop je zřejmě nejpoužívanější, ale proč?Neexistují lepší nástroje? Proč chápat web bitmapově? Ale nadruhou stranu proč by měl být vektorový? Co preferujete vy?
  37. 37. Jak to udělat hezké praktická část
  38. 38. Jak to udělat hezké Inspirace není plagiátorství, ale pomyslná hranice není zrovna široká ● wbd.cz ● www.cssrevue.cz ● www.cssmania.com ● www.thefwa.com/ ● psd.tutsplus.com/ ● www.smashingmagazine.com/ ● www.webdesignerdepot.com/ ● abduzeedo.com/ ● www.humanart.cz/
  39. 39. Jak to udělat hezké Cenné tipy● nudná témata nemusí mít nudný web, experimentujte s barvami, ale hlavně také přechody, štětci a podobnými nástroji, barvy samotné zázrak neudělají● vždycky je ale velmi důležité, aby se design držel tématu● stanovte si cíle designu - AIDAS ○ A - attention = upoutejte pozornost ○ I - interest = zaujměte, ukažte výhody, benefity ○ D - desire = vyvolejte touhu, přesvědčte zákazníka, že po výrobku touží, že ho musí mít ○ A - action = veďte zákazníka ke konverzi ○ S - satisfaction = zákazník je spokojený a vrátí se
  40. 40. Zdroj: http://wefunction.com/2009/04/quality-within-web-design/
  41. 41. Jak to udělat hezké Cenné tipy● když vytvoříte design, nechte jej uležet a k hodnocení se vraťte až po nějaké době (2 dny), spoustu věcí díky tomu přehodnotíte svěžím okem● časem stejně zjistíte, že každý svůj web byste už udělali jinak● testování 1 člověkem je o 100 % lepší než netestovat vůbec● tento člověk však nemůže být designer návrhu, nemá už odstup od díla
  42. 42. Jak to udělat hezké Cenné tipy● používejte konvence: ○ podtržené odkazy, klikatelné logo, umístění menu...● nepoužívejte konvence, když chcete být jedineční a zaujmout, vymýšlejte nové věci, ale pamatujte, že kreativita musí ustoupit přehlednosti● samozřejmě se snažte dělat designy originální, ale i tak můžete zůstat v mezích konvencí
  43. 43. Jak to udělat hezké Jak se naučit "kreslit"? Radši se na to pořádně podívat než o tom jen číst.
  44. 44. Jak to udělat hezké Web 2.0 styl● 1px vytažení a jemné přechody● leštící techniky● stíny, vzorky a textury
  45. 45. Zdroj: http://wefunction.com/2009/04/quality-within-web-design/
  46. 46. Jak to udělat hezké Minimalismus● paradoxně náročný design, každá chyba se projeví● cit pro typografii a detail● méně je více
  47. 47. Jak to udělat hezké Newspaper styl● weby stylizované do podoby novin či tištěných médií● důležitá práce s mřížkou a typografií
  48. 48. Odbočka 3 "Kdy je nejlepší čas přestatpoužívat trendy? Jakmile se objeví na smashingmagazine.com." Jiří Tvrdek, freelance webdesigner
  49. 49. Jak to udělat hezké Grunge styl● "zabordelené, špinavé a poškrábané" weby● důležitá práce s texturami● obvyklé barvy:
  50. 50. Zdroj: http://www.smashingmagazine.com/2008/03/11/the-secrets-of-grunge-design/
  51. 51. Zdroj: http://www.smashingmagazine.com/2008/03/11/the-secrets-of-grunge-design/
  52. 52. Jak to udělat hezké Retro styl● retro je in● důležitá práce s texturami a typografií
  53. 53. Zdroj: http://www.smashingmagazine.com/2008/10/07/retro-and-vintage-in-modern-web-design/
  54. 54. Zdroj: http://www.smashingmagazine.com/2008/10/07/retro-and-vintage-in-modern-web-design/
  55. 55. Jak to udělat hezké Ilustrované weby● tady se hodí, když je designer taky trochu umělec
  56. 56. Odbočka 4 "Kdy zvážit odstoupení odprojektu? Když je zadavatel tak trochu umělec."Do webdesignu kecají všichni, od uklízečky po ředitele podniku.
  57. 57. Jak to udělat hezké Delighters - okořeňte web● oživte web netradičními prvky● za minimální náklady návštěvníka minimálně příjemně překvapíte● http://www.langerovaaneta.cz/, http://www.bluebeetle.me/
  58. 58. Odbočka 5 A na závěr videjko?http://www.makemylogobiggercream.com/t-shirt.html
  59. 59. Konečně konecJan Valuštíktwitter.com/honzavalustik

×