Your SlideShare is downloading. ×
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Bourání klišé – Contemporary webdesign
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Bourání klišé – Contemporary webdesign

559

Published on

View webdesign as an interdisciplinary field where technology, design and design thinking meet. Therefore it is essential that a modern webdesign should know how to code as well as how to design. …

View webdesign as an interdisciplinary field where technology, design and design thinking meet. Therefore it is essential that a modern webdesign should know how to code as well as how to design. Cognitive design and psychology can also help when having to make a design decision.

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Bourání klišé aneb teorie webdesignu a její aplikace při návrhu responsivního webu Jakub Ferenc www.jakubferenc.cz
  • 2. Kdo jsem a jak jsem se zde ocitl? http://www.jakubferenc.cz/ „Aby kultura mohla prosperovat potřebuje tři typy lidí: inspirátoři, realizátoři a propagátoři.“ – Karel Honzík, Ze života Avantgardy 1963
  • 3. Kdo jsem a jak jsem se zde ocitl? Yes Man (2008) http://www.youtube.com/watch?v=r0MSWCzAfrY
  • 4. Program Co je webdesign? Kdo je webdesignér? Proč se kodéři musí naučit web design? HTML / HTML5 / ARIA / XHTML2 „Objektové“ CSS a nejdůležitější vlastnosti CSS3 CSS Preprocesory Front End Frameworky (Boilerplate, Bootstrap) Fallbacks / Polyfills Responsivní a mobilní web Workflow moderního webdesignera Aplikace teorie a redesign webové stránky
  • 5. Blok web design Co je webdesign? Kdo je webdesignér? Proč se kodéři musí naučit web design? Web designer jako novodobý architekt 2D prostoru Vliv grafického designu / typografie (Bauhaus, Sutnar, Swiss Style) Psychologie webdesignu / Kognitivní design Inspirace / Současný webdesign
  • 6. Proč se kodéři musí naučit web design? Daniel H. Pink – A Whole New Mind (Úplně nová mysl 2008) Doba Koncepční, „Pravá strana“ Nadbytek (Abundance), Automatizace, Asie Interdisciplinarita => kreativita (Burákové máslo a čokoláda) Kognitivní informatika (http://kogninfo.vse.cz/) Kasparov IQ ~ 190 vs. Deep Blue (1996)
  • 7. Proč se kodéři musí naučit web design? Online drag & drop nástroje pro tvorbu šablon Adobe Edge Reflow Služby jako http://www.htmlfactory.cz/ Wordpress
  • 8. Divergent thinking Divergent thinking is the process of generating multiple related ideas for a given topic or solutions to a problem. Divergent thinking occurs in a spontaneous, free-flowing, ‘non-linear’ manner. Convergent thinking, on the other hand, is the ability to apply rules to arrive at a single ‘correct’ solution to a problem such as the answer to an IQ test problem. This process is systematic and linear. Sir Ken Robinson – Škola ničí kreativitu “If you’re not prepared to be wrong, you’ll never come up with anything original.” — Ken Robinson “Creativity now is as important in education as literacy, and we should treat it with the same status.” — Ken Robinson
  • 9. Karim Rashid radí Nespecializujte se Zjistetě si všechno o historii svého povolání a až budete navrhovat něco nového, tak to vše zapomeňte Nikdy neříkejte „to jsem mohl udělat“, když jste to neudělali Těšte se ze zážitků ne z věcí Normální neznamená dobré Jsou tři druhy lidí: Ti, co vytváří kulturu, ti, co ji kupují a ti, kterým je kultura šumafuk. Pohybujte se v prvních dvou kruzích
  • 10. Design thinking Tim Brown CEO z IDEO „The problem wasn’t so much about what’s the problem of a woodworking machine but what is the problem of woodworking (dřevozpracující) industry.“ Otázka na tento seminář: „Důvod, proč potřebujete kurz jako je tento, je z důvodu, že potřebujete vylepšit znalosti v HTML / CSS / Web designu nebo je důvod jiný a prostší. Chcete dělat lepší weby? Pokud ano, jakou to má implikaci?“
  • 11. Design jako redesign (Jan Michl) „Každý designér, vynikající stejně jako průměrný či špatný, buduje na práci předchozích designérů a výtvarníků, ať už v tom smyslu, že jejich řešení zcela přetváří, mírně modifikuje nebo pasivně přebírá. Ačkoliv jde tedy o něco, co všichni designéři, kritici a komentátoři designu důvěrně znají, je tato skutečnost – ve snaze soustředit se na příspěvek posledního tvůrce – v podstatě ignorována.“ „Studenti by měli slyšet, že z hlediska uživatele není důležité, zda jednotlivá řešení pocházejí od nich samotných či od designérů jiných, ale to, jestli výsledek uživatele uspokojuje.“ „Designérské problémy jsou zřídkakdy formulovány vyčerpávajícím způsobem a ve své úplnosti, že zákazníci nejsou schopni celý problém jasně artikulovat ani na konci procesu navrhování“ „Zkušený designér reaguje na problémovou situaci tak, že rozpozná možné, to jest předchozí, řešení, spíše než že by problém rozpoznal přímo, a že znalost takových precedentních řešení, ať už vlastních nebo cizích, odlišuje zkušeného designéra od začátečníka“
  • 12. Co je tedy web design? Interdisciplinární (sic) obor, ve kterém se v posledních letech pod nátlakem buzzwordu „responsive“ čím dál více smývají rozdíly mezi kodérem a „vizuálním návrhářem“ Vizuální komunikace čerpající z grafického designu, typografie, interakčního designu, UI/UX designu postavená na technologických základech kombinace HTML / CSS / Javascript. „The web designer is the new architect. Physically, we are mostly inside buildings. Mentally, we live "inside" web pages. (@jakubferenc)“ Web designer jako novodobý architekt (estetika vs. technologie)
  • 13. Co je tedy web design? Co je ještě web design? http://henryklahola.nazory.cz/
  • 14. Vliv grafického designu / typografie Modernismus Ladislav Sutnar International style Massimo Vignelli Holandský design (Wim Crouwel vs Jan Van Toorn) Současný holandský design Grid Whitespace Geometrický vs. optický střed
  • 15. Typografie prof. JUDr. Jan Novák, PhD Justin Bieber Poslanecká sněmovna ČR
  • 16. Kerning Vyrovnávání znaků Dříve odřezávání kusu špalíčku, na kterém byly jednotlivé litery Snaha docílit vizuálně uspokojivého zobrazení písmen Dle citu typogafa / designera Jinak řečeno, dvoudimenzionální prostor mezi znaky by měl mít podobný obsah Kerning je nepostřehnutelný, pokud jsou znaky profesionálně vyrovnány Jak vypadá špatný kerning http://type.method.ac/#
  • 17. Jak vypadá špatný kerning? http://inspirationfeeed.files.wordpress.com/2013/09/showerdrape1.jpg http://inspirationfeeed.files.wordpress.com/2013/09/shitake1.jpg http://inspirationfeeed.files.wordpress.com/2013/09/pemsbarbershop1.jpg http://inspirationfeeed.files.wordpress.com/2013/09/tumblr_mow8t2xh4e1qkpgn3o1_5001.jpg http://inspirationfeeed.files.wordpress.com/2013/09/tumblr_ma515afnsb1qcq8vao1_5001.png http://inspirationfeeed.files.wordpress.com/2013/09/lmuu31.jpg http://cdn-www.i-am-bored.com/media/14303_kidsexchange.jpg Špatný kerning
  • 18. Psychologie webdesignu / Kognitivní design Google I/O 2013 - Cognitive Science and Design http://www.youtube.com/watch?v=z2exxj4COhU Čerpá z teorie Gestalt psychologie Teorie, kdy mozek vidí celek dříve, než analyzuje a uvědomuje si jednotlivé části celku http://www.users.totalise.co.uk/~kbroom/Lectures/gestalt.htm
  • 19. Gestalt psychologie zákon podobnosti
  • 20. Gestalt psychologie zákon vzdálenosti
  • 21. Gestalt psychologie zákon kontinuity směru (uzavření
  • 22. Inspirace / Současné web design směry http://www.ecogex.com/delectable/ http://www.awwwards.com ale též http://www.rkfpraha.cz/ http://www.dox.cz/cs/
  • 23. HTML / HTML5 / ARIA / XHTML2 aneb kam se poděl XHTML 1.1 Strict fetiš?
  • 24. Blok HTML Proč HTML5 a ne XHTML2? Co všechno je HTML5? Sémantika a přístupnost v HTML5 HTML5 Outline ARIA Formuláře v HTML5 Video, Audio v HTML5
  • 25. Proč máme HTML5 a ne XHTML2 „Mám nápad! Vyrobíme XHTML, což bude HTML s XML syntaxí. — Někdo v konsorciu, někdy dávno, volně domyšleno Od XHTML verze 1.0 bylo W3C konsorcium posedlé XML application/xhtml+xml MIME type vs. IE XHTML nepromíjelo HTML4 a nástroje k interaktivitě (Flash, Silverlight, Java applets!) XHTML2 WHATWG Steve Jobs (RIP) vs Flash (http://www.apple.com/hotnews/thoughts-on-flash/)
  • 26. Co všechno je HTML5? V první řadě je zpětně kompatibilní <!DOCTYPE html> Markup DOM APIs: Web Storage, Drag & Drop, Web Sockets, History, Media, Canvas
  • 27. Sémantika a přístupnost v HTML5 <main> <section> <article> <header> <footer> <nav> <aside> Pouze <section>, <article>, <aside> a <nav> tvoří sekce
  • 28. Sémantika a přístupnost v HTML5 „I would in fact prefer, instead of <h1>, <h2> etc for headings [those come from the AAP DTD] to have a nestable <section>..</section> element, and a generic <h>.. </h> which at any level within the sections would produce the required level of heading. – Tim Berners-Lee (1991)“
  • 29. HTML5 Outline „Rejstřík“ webu generovaný z nadpisů a tzv. section elementů V budoucnu bude sloužit pro čtečky a vyhledávače Momentálně vyhledávače experimentují s HTML5 outline a čtečky většinou nepodporují Pro přístupnost je lepší používat ARIA atributy ● ● ● Více H1 na stránce bylo vždy v pořádku Nové sémantické HTML5 elementy umožňují použít více H1 (H2, H3, atd), aniž by se v outline vytvářely nové sekce, podsekce. Slabá podpora HTML5 outline algoritmu a více H1 může ale mást uživatele čteček
  • 30. WAI–ARIA Možnost, jak pomocí sémantických atributů definovat HTML prvku sémantickou roli a poskytnou pomocí stavu, rolí lehčí navigaci uživateli čtečky obrazovky <header role=”banner”></header> <nav role=”navigation”></nav> <footer role=”contentinfo”></footer>
  • 31. Nové formulářové prvky v HTML5 search, email, tel, url, date, datetime required, placeholder, pattern http://jsfiddle.net/jakubferenc/sEXkB/2/
  • 32. Dobré praktiky psaní CSS a nejdůležitější vlastnosti CSS3
  • 33. Dobré praktiky při psaní CSS CSS Specificity Jak browser interpretuje selektory Filosofie OOCSS (Object-Oriented CSS) Třídy vs IDs
  • 34. CSS Specificity (Specifičnost) Specificity Calculator http://specificity.keegan.st/ Inline styly => IDs => Třídy, pseudo třídy => Elementy „Nejedná se o desítkovou soustavu, 0 0 10 0 specifičnost nezpůsobuje přenesení do vyššího řádu. Specifičnost v každém řádu je teoreticky nekonečná, prakticky limitována implementací prohlížeče (8 bit). Vyskytoval se tedy bug, kdy 256 tříd přetížilo jedno ID“ #test {background-color: #f2f2f2} /* Specificity 0 1 0 0 */ .box {float: left} /* Specificity 0 0 1 0 */ body {line-height: 1.5} /* Specificity 0 0 0 1 */
  • 35. Jak browser interpretuje selektory Jak browser interpretuje selektory? To je otázka .-)
  • 36. Jak browser interpretuje selektory „Zprava doleva“ Co je zde špatně? body#homepage div#test a {background-color: #f2f2f2} /* Specificity 0 2 0 3 */
  • 37. Jak browser interpretuje selektory ID selektor je vždy unikátní, není potřeba dále selektor specifikovat pomocí elementu div#menu a {background-color: #f2f2f2} #menu a {background-color: #f2f2f2} Když vím, že browser vyhodnocuje zprava, takovýto selektor je velmi „drahý“. Browser nejdříve vyhledá všechny odkazy na stránce, poté porovné, zda jsou vnořeny v seznamu, atd. div#menu a {background-color: #f2f2f2} #menu ul li a {background-color: #f2f2f2} .menu-item {background-color: #f2f2f2}
  • 38. Filosofie OOCSS (Object-Oriented CSS) Místo stylů pro specifické elementy, navrhujme znovupoužitelný kód Analogicky k OOP v PHP Dívejme se na stránku jako na kolekci modulů, widgetů Jinak řečeno, web designer (pro rozsáhlé weby) nenavrhuje stránky, ale kolekci widgetů, které lze neomezeně alternovat, aniž by bylo nutné pracně měnit HTML či CSS Koncept značně rozvíjejí CSS Preprocesory (bude o nich řeč) Výhody OOCSS přístupu? Škálovatelnost větších webových projektů Jednou napsané komponenty lze využívat na dalších projektech => přirozeně vede k vytvoření vlastního CSS frameworku Lepší selektory, rychlejší načítání (především u mobilních verzí stránek) Nevýhody OOCSS přístupu? Pro budoucí využití modulů je vhodná dokumentace
  • 39. Filosofie OOCSS (Object-Oriented CSS) .button { -webkit- border-radius : 2px; border-radius : 2px; border: none; color: #fff; font-family : "ralewaysemibold" , sans-serif ; font-size : 13px; padding: 0 15px; display: inline-block ; line-height : 25px; min-width : 115px; position : relative ; text-align : center; text-decoration : none; }
  • 40. Filosofie OOCSS (Object-Oriented CSS) .button-red { background : #FF0000; } <a href=”#” class=” button button-red”>Odkaz</ a>
  • 41. Třídy vs IDs Diskuze Navhrněme si widgety / moduly
  • 42. Nejdůležitější vlastnosti CSS3 Nové selektory Animations Transitions Transforms (2D) Transforms (3D) Border-radius Box-shadow @Font-face (http://www.fontsquirrel.com/tools/webfont-generator) Media Queries
  • 43. CSS Preprocesory
  • 44. CSS Preprocesory
  • 45. CSS Preprocesory Proměnné Mixiny Funkce Matematické úkony Soubory .less a .scss se musí zkompilovat do .css client-side či server-side
  • 46. CSS Preprocesory @the-border: 1px; .rounded-corners (@radius: 5px) { @base-color: #111; -webkit-border-radius: @radius; @red: -moz-border-radius: @radius; #842210; -ms-border-radius: @radius; #header { -o-border-radius: @radius; color: (@base-color * 3); border-left: @the-border; border-radius: @radius; } border-right: (@the-border * 2); } #header { #footer { .rounded-corners; color: (@base-color + #003300); } border-color: desaturate(@ red, 10%); #footer { } .rounded-corners(10px); }
  • 47. Front End Frameworky
  • 48. Front End Frameworky
  • 49. Responsivní a mobilní web
  • 50. Responsivní a mobilní web Viewport Meta Tag Fluidní Grid Flexibilní Média (obrázky, video) Media Queries Mobile First / Progressive Enhancement Rychlost, Optimalizace
  • 51. Viewport Meta Tag <meta name= "viewport" content="width=device-width, initial-scale=1" > <meta name= "viewport" content="maximum-scale=1" > <meta name= "viewport" content="width=320" > <meta name= "viewport" content="width=device-width" >
  • 52. Fluidní grid Mřížka založená na procentuálních hodnotách nikoli pixelech Pomocí max-width můžeme pro větší obrazovky určit maximální šířku obsahu webu Pomocí media queries můžeme zobrazení mřížky měnit .container {max-width: 1080px} .grid-3 .grid {width: 33%} @media (max-width: 975px) { .grid-3 .grid { width: auto !important; float: none !important; margin-top: 1em; } }
  • 53. Flexibilní Média (obrázky, video) img, embed, object, video { max-width: 100%; }
  • 54. Flexibilní Média (obrázky, video) Rozdíl mezi max-width a width je, že obrázek při resize browseru nepřekračuje svoji původní velikost
  • 55. Media Queries CSS2 specifikace a atribut media all, handheld, print, screen @media print { * { background : transparent !important ; color: #000 !important ; box-shadow : none !important ; text-shadow : none !important ; } a[href]:after { content: " (" attr(href) ")"; } }
  • 56. Media Queries CSS3 media queries umožňuj místo typu zařízení aplikovat CSS styly dle možností zařízení ● ● ● ● výška a šířka prohližece výška a šířka obrazovky zařízení orientace zařízení (landscape / portrait) rozlišení PPI (pixels per inch)
  • 57. Media Queries @media all and (max-width: 975px) {} @media all and (max-width: 767px) {} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { /* Retina-specific stuff here */ }
  • 58. Mobile First / Progressive Enhancement Graceful degradation
  • 59. Mobile First / Progressive Enhancement Progressive enhancement
  • 60. Proč Mobile First Růst trhu = příležitost Omezení = koncentrace na nejdůležitější funkcionality Většina lidí má mobilní zařízení u sebe celý den
  • 61. Růst trhu = příležitost Internet na desktopu PC 1990 Mobilní uživatelé 5+ miliard 1 miliarda 2000 2011 – 2020
  • 62. Růst trhu = příležitost V roce 2011 se prodalo více mobilních zařízení než PC
  • 63. Omezení = koncentrace na nejdůležitější funkcionality Jen relevantní informace Co nejméně ovládacích prvků Důraz na obsah (text) Pokud design pro mobilní verzi obsahuje nejdůležitější funkcionality, design pro desktop může už jen přidat něco navíc Design webu pro desktop by měl být ovlivněn mobilní verzí, ne naopak
  • 64. Rychlost / Optimalizace — Proč optimalizovat pro rychlost? Google hodnotí rychlost webů, nejen pro mobilní zařízení Nehodnotí ale v absolutních číslech (různé státy = různé připojení, bandwidth, atd) Uživatelé mobilních zařízení očekávají rychlost
  • 65. Rychlost / Optimalizace CSS co „nejvýše“, JS co „nejníže“ (css blokuje render, js stahování) Minifikace souborů CSS, JS, HTML Sjednocení JS scriptů CSS Sprites Omezení HTTP requestů Využití Base64 kódování pro obrázky a fonty Využití CSS3 efektů či SVG místo bitmap Využívat PHP APC cache Google PageSpeed Modul pro Apache https://developers.google.com/speed/pagespeed/module
  • 66. Workflow moderního webdesignera
  • 67. Workflow moderního webdesignera
  • 68. Workflow moderního webdesignera Node.js Bower Grunt Adobe Edge Inspect / LiveReload

×