 Já vás zdravím. Já to možnáši trošku upravím. Za mě to bude spíš o tom, jak to vypadá na VNEC a jak to funguje na lidi, než co to dělá jako ve střevech. Nicméně začnou od začátku. Ve chyli, kdy běžnej uživatel neznali věci přijde na Team Forest a kukne se na šablony WordPressový, tak zistí, že jich je tam přes 40 tisíc. A z čehož se v zásadě nedá rozumně vybrat. Takže si řekne, co to musí spolňovat za technické požeravky, že to má bejt responzivní, že to má bejt nějakým zůbem čistý, má se to rychle nahrávat, má to mít dobrý supor a tak dále. Když tohle to udělá, tak i přesto, že si tam nakliká téměř všechno, co ho napadne, tak se dostane na nějakých 250 třeblon, který jsou si v zásadě poměrně hodně podobný a je to jak s budenovým oslem, ale místo těch dvou kopek sená, jich tam má 250. Jo, nicméně, když už i z tohodle si vezme nějaké dvě nebo tři šablony, který se můj líběji a ty si proleze, tak se dostane do situace, kdy si teda zvorí jednu šablonu, projede si šablonu a zjistí, že to má 160 důznejch variant, jak ta stranka má vypadat. A v té chvíli v zásadě nastává tohle to. Jo, ten člověk si prostě řekne, no, tak když už jsem si vybral, tak jsem si vlastně stejně nevybral. Takže z mího pohleduje důležitý se na to podívat trošku jinou optikou, než jenom technicky, ale spíš optikou toho, jak to na to vidí působí a když to trošku s obecním, tak základní otázka je vlastně poznat dobrý a špatný design. Jo, což je věc, která se dá velice špatně učit, ale existují nějaké pravidla, a od nich já budu mluvit tečka. Jo, takže bude to spíš takové jako legrační přednáška, než by to bylo v nějakých technikálích. A já jsem si bral příklady im mimo WordPress, abyste se spíš zažili do uvažování, jak to má, nebo nemá fungova. Dám vám dva příklady. Tohle to, zvedněte mi ruku, kdo víte, co to je. Super, je vás relativně hodně. Já jsem si myslel, že to skončí jenom na obrázku, ale pak jsem si řekl, že máme jako pozerský rodiček, který by to mohli mít, a fakt to měli. Takže proti z vás, který jako nevědí, co to je, tak není to ani utočná zbraní, ani se tím nedají napychovat tři jednohuky na jednou, ale je to odčťavňovatž od jednoho z nejznávnějších designerů Filipa Stárka. A říkali byste si tohle jako je dobrý design, ale pak to začnete používat a zistíte, že když si to, když si na tom vymačkáte ten citrus a neutřete to, tak se vám na tom udělali takové dupky, které už nejdou někdy jako umejí. Musíte to držet takhle za dvě nožičky, protože jak se vám to překotí a vylejete si ten Žus, který je potitím. Tady jsou takové pakcičky, které vám dřív nebo pozděj s vodpadnou. Zničíte si to, když to dáte do mičky a nedáte to do žádnýho šupríku. Mimo to, když to jako necháte někde a jdete zpát, tak ono to potom chodí a kuká se to na vás domaci. Takže za mě tohle jako příklad dobrýho designu pokud chcete udělat dojem na sví gejkama rády, ale špatního designu pokud se jedná o to, že si chcete udělat z Žus. Naproti tomu, tohle je toustovač od firmy Breville a vypadá ze začátku úplně normálně. Nicméně, většina z nás má zkušenost toustovačem takovou, že bude ten toust není úplně dopečený, v tí chvíli to zamačknete a pak vám z toho vyjede něco čím by se dolo řezat sklo. A tady ten designer si koukal, jak se s ty redistím perou a má tam dvě výborný tlačítka. První tlačítko je lift and look, což znamená, že vám to vyjede, vy se podíváte, jestli je to dobrý nebo není, a zase to zajede. A druhá ještě lepší funkce je tady to tlačítko a bit more, takže vždy, kdy vám vyjede ten toust, tak vysmáčknete bit more a vám se vám trochu dopeče, což je přesně to, co s běžního toustovače dělá něco, co je užitečný a kliče musí tu s ní daně daleko víc užijete. Problem s WordPressem a webem obecně je ten, že ho používají lidi, ale lidi jsou jako hrozní. Já mám jako uživatelský testování dělám jako skoro každý tedy a ty lidi mě nepristávají uděvovat někdy v dobrým, ale je spíš ve špatným. Já se vždycky říkám, jak byl by je člověk, který má i questu a tady jsem, takže polven z nich je natamešti hůř, protože to je průměr. Nicméně ty lidi na webu nečtou, protože čtou si tak 20-25% tekstů. Chce, aby se jim ty věci ukazovali hnét, rozhodně neprzemějšli racionálně, spíš klikají na první věc, která v zásadě vypadá, že by mohla byť co hledají. A to se ukazuje i z A, B testů. Ty lidi, jak mene něco nevidí, na první pohle tak to pro ně neexistuje. Takže klasicky, když je nějaká harmonika na webu, tak my jsme dělali A, B test, když jsme tu harmoniku celou rozstáhli a nám to zvýšilo konverze 4x, protože ty lidi na tom webu opravdu stráver víc času přečetli si to a spodí trochu víc, než když to bylo skrytný. Takže snažte se tím lidem trochu víc v tom, že o něj opravdu se nechovají tak, jak byste chtěli vy a pak to dopadá nějak takhle. Na konacu nás to není pomoc, jako lepší. Já bych vám chtěl teďka říct, když si teda už předvyberete nějakou šablonu podle nějakých technických parametrů, tak na co se podívat z pohledu, designu a grafiky. Je to relativně jednoduché pravidlo, já vám to ukážu vždycky na předpladech ať už webovejich nebo nevabovejich. A první a nejdulěžitější pravidlo je jednoduchost a já bych k tomu dodal ještě pochopitelnost. Vechy kdy ty lidi na první dobrou nepoznaj co děláte, čím se zabaiváte, proč by to mě mělo být zajímavý, tak můžete mít nejhezčí šablonu a web na světě, ale bude vám to vprdů, protože ty lidi odcházejí. Jo, oni vám dají, řekněme, 8 sekuncí pozornosti, ale vechy když je nezaujimete tak douprejč. Mimo to jednoduchý weby nebo jednoduchý design obecně činní lidi šťastnýma, oni to zkoučili na tom, že jim dával je dvě verze kladiva a jedno bylo ergonomický a jedno bylo neergonomický. A zestěli, že lidi, který používají ergonomický kladivo, se dutovo víc usnívaj. Já nevím teda, jak to jako přesně měřili, ale to, co by vás mělo zajímat, je to, tady jsem dál takové jako měrně kryptický graf. Nicméně, tady je složitost designu, kdy tohle je vlastně nejhorší a tohle to je nějaká satysfakce nebo nějaké jako pocit z toho. A ideální bot, jako nejvyššího štěstí z designu je nastupěci vodiní do 10, mezi dvojkou, trojkou. Takže ve chyli, kdy jdete řešit, jak ma vypadat tada nás tránka, budete mít nějaký delbr nebo něco probního. Tak já jsem spíš proto, abyste to dělali co nejednoduší a teprve chyli, když jste, že vám to nefunguje, tak to zešložitivali než v obráceně. Za mě, když děláme nějaké optimalizace, tak je většinou první, co dělám, že jako vodře závam věci, který jsou zbyteční a pak až následně něco doplňujem. Ukážu vám pár příkladů, přiznam se, že nevšech malo jsou WordPress-oví weby, ale mě jde spíš votu grafiku jako takovou. Tohle je nějaký studio z Francie, který povžívá docela hezký princip, kterým se dostanu, ale v zásledu všechno je to jednoduchý, mají i trošku podivně teda navigaci dole, ale budíš. Tohle je tu všet nějaký australský výrobce toniku. Možná na konci přednážky zjistit, že jsem jako hodně minimalistický i v těch příkladech, ale za mě tý čisto tě prostě je velká síla i sohledu na to, že čím víc prvku na tom webu máte, tím více příští pozornostu životelé. Samozřejmě, když na tom webu je jenom jedna věc, ale Google a formulářní pole, tak tohle si všechno tedycky. Tohle je další příklad placatí, peněženky, belroji, kterých se vám vyjdou do kapsy, ale než by to vypadalo, že máte placatou erekci. A druhej příklad je neméně důlžitý, je to nějaká vizuální hierarchie. A spostě možná trochu přimohuřit voči, abyste se stěle, co se na tom obrázkuje, uvidíme, jak máte dobré instincty. Korík z vás vidí. A no, když přimohuříte voči, tak tady máte hlavu delmatíná, tady máte těl. A to je na ukoľi, které jsou pro počítač té měř neřešitelní nebo pro umělů inteligenci, ale lidský mozek funguje na základě toho, že se snaží ve všem vždycky hledat nějřát a i ve věce, kterého nemaj. I cvádně, vy toho můžete využít ve chvíli, kdy děláte, dizajnojejte stránku, tak vy si potřebujete říct, se je mín a víc důležitý. A pak se nějakým způsobem se řadit za sebe myslím večka jako v nějakým se znamu důležitosti. A pak s těma prvkama pracovat podle toho, jak jsou důležití, protože ty lidi jsou jako unavené dost často. A čím víc jim to křemejšlení ústnadním té tím je to lepší, takže jdete po nějakých instinktách těch lidí. A snažte se jim ty věci jako nezne příjemněva. A tedy kruknu, jak nás to neviší. To mohle se vážou tři zákony. První je ten hikův, což znamená, že čím víc prvku na webu máte, tím další čas ten člověk potřebuje, aby se rozhodl, co má dělat dál. Pak je fituch zákon, který říká, že se vzrůstejících zdáleností potřebujete čím velkým větší cíl, aby se do něj člověk trechl za stejný čas. On to vlastně zjistil ve chvíli, kdy mu dali jako úkol optimalizovat kokpit z píhacích pilotů. A tam vlastně zjistil, že pokud jsou ty kontrolky moc daleko od sebe, tak musí být větší, aby ten pilot vlastně dokázal za stejnou dobou reagovat, jako když to má blízko uruky. A pak o kamu jeho pravidlo, což je vlastně františka někdy ze středověku, který prohlá se, že pokud existují dvě vysetlení pro do nej problém, tak je lepší vzít to jednoduší. Já vás se snažím třeba tlačit k té jednoduchosti. Tady vám ukážu web pro výrobci hodinek, keby mám skoru okolnostní naruce. V chvíli, kdy si na tu stránku podíváte, tak to první, co vás zaujime, je samozřejmě vohromná fotka. A to druhý, co vás by mělo zaujimout, je tlačitko před dokušitku. Z měl pohledu by mohl mít asi jinou baru, než černou. Ale teď, kde je to modní, tak asi jako chtěli byť zdobou. Něho, nicméně, ve chyli, kdy budete vytvářit nějakou stránku, tak si vždycky řekněte, ale co je to nejdužitější na té stránce, co bez čeho ta stránka nemůže fungovat, a začněte od toho. No a takže ve chyli, kdy máte nějakej, řekněme třeba, obydnávkojí košík nebo nějakou lídžinovou stránku, tak začnete tlačitkem, pak k tomu přidáte formular, pak k tomu přidáte nějaký natpis, a takhle tů stránku budu, je to zaspoda místo toho, abyste si řekli, chci tam slide, chci tam paralax. Detečka jsem neviděl jedinou studii, jediný AB test, který by mi ukázal, že paralax z výšech konverzi. Je to věc, která ten web zaás pomaluje, a za B je to taková kravinka, která spíš jako podrbé designera paoušku a řeknemu, jak je, jako módní, ale jinak to moc nefunguje. Třetí princip je prázdnota. Počítejte s tím, že to, co na tu stránku dáte, je stejně tak důržitý jako ten prostor, který je kolem toho. Já vám zase dám kříklad, který vlastně není z webu, ale ten prázdný prostor má velkou důlžitost, v tom, že on vám mezi těma elementama, který na té stránce jsou, velice dobře ukazuje vzájemné vztahy. Mimo to prázdný prostor, jako signalezuje očité lupsus, takže ve chyli, kdy přídete do HMK, tak chodíte mezi těma regálama, jak Zoid Berg, takhle. A ve chyli, kdy přídete někam do, nebo zary, nebo do pařískí, tak tam toho prostory je daleko víc, takže i tohle může být učitý indikátor toho, jak moc lupsusí a kvalitím ty služby máte. Tohle je fotka s instalace James Tarrellá, což je vlastně umělec, který dělá velký prostory osvětlené takhle jednolitou barvou. Je to pověrně zajímavý zážitek, protože když tam přídete, tak se vlastně nemáte čeho chyti. Stratíte pojem v perspektivě a jak je to jedna barva, tak se vám rozšířej zorničky a během asi 3 minut začnete halucinovat, což je docela zajímavý zážitek. Nicméně, já chci ukázat, že ten prázdný prostor může se umělat ve věci dobře. Tohle je grafický dizajner Noma Bar, který se přesně s tímhle tím hrají a vlastně si na tom vybudouval karieru. Takže na první pohled to vypadá jako slečná nebo paní, pak tam uvidíte tu slapici a máte spolovy hráno. Tohle je samozřejmě v grafickém dizajnu prvek, který se obivuje relativně často z váždu v logách v firmích identitách. Nicméně, i na tom webu se s tím dá nějakým spřím pracovat. Já vám dám zase další mětně minimalistický příklad. Tohle je Bang & Olufsen, kdy v chyli, kdy prodávat reprák, který stojí 50-60 tisíc, tak ho asi neuděláte stejně jako leták z dví. Takže tady je vlastně hlavná fotka, natfish a jako sympatický tlčetkomaní. A samozřejmě Apple, který jsem tam jako dál moc nechtěl, ale je to Apple. A 4. princip, který nadkrym byste měli se zamýšle, je samotná barva, protože ty barvy, která každý člověk vynímá a jsem měl za svou karieru dva klienty, které byly barvosletní a ani jeden mi to neřek. Což bylo trošku problém, protože jednému jsem dělal mapu, veškerých bankomatů v Český republice a udělal jsem to zelenýma a červenýma puntíka a tohle mi potom řek, že to asi nebude dobrý. Druhý byl ten, který musím dělal logo pro nějakou Hongkonskou burzu a vysetlval jsem, že ta barva mohne kukrčile meny, ho říkal téhyský. Nicméně to, co byste se měli při bolubě barevnosti uvědomit, že činta barva je si tější, tak tím byste se měli víc šatřit. Je to stejně jako v přírode, ve chvíli, kdy máte zelený strom, tak ty třešně červený na něm tvořeji relativně malej, malý procento tý celý plachy. Takže dobrý systém je v 60-30, kdy si vymete svojí chyremní barvu troškují uberete na sitosti a použijte její v 60 procentech. 30 procentech vezme to nějakou barvu, která je k chvíletí barvie komplementární a v 10 potom uberete nějakou akcentovu barvu, kterou použijete na tlačítka a na prvky, který chcete výrazně. Existiu na to nástroje je toho poměrně hodně, tohle je na příklad vod Adobe na kejí kaler, připůvodně to byl kuler. Zásadě, ale to schéma je 60, pokud máte teda modrou chyremní identitul, tak 70 procent nějaký valery modrý a k tomu máte nějakou akcentovu barvu na tlačítka a podobně a pak nějakou komplementární tlačítka, která se k tému dvěma nějakou skusovém hodí. Já vás jako nechci učit design vždycky je dobrý, ale chyli, kdy vám grafik něco přinesé nebo vyvíráte nějakou šablonu, tak abyste si uvědomili, že existuje něco jako barevnost a že si snídá tak nějakým susem pracovat. Tohle konkrétní příklad teďka vode mě aktuálně tohle jsou farmace u těch, který hlídají bezpečnost lejků dlouhodobě a žlutou, žlutý logo takže jsme si řekli okábereme prostě kombinace žluta, černá, šedá a uděláme to jako veškrý web uděláme takhle. Je to vypadá to troško je klegolent ale pro tohle klient toto funguje veľmi dobře. Už teďka říkal, že ve chyli, kdy je na nějaký akce tak všetně mají žlutý trička a jsou jako neprzeglednitelní. Takže i s tímhle se dá nějakým susem pracovat. Tak 5. princip ten by vás měl zajímat primárně protože s písmem se dá velice dobře pracovat a nicméně málo kdo ve chyli, kdy se to šablenu vezme tak s tím písmem něco jako dramaticky dělá. Já vás nedám vám žádný typy, jako který písme je dobrý nebo kdy je špatní to se ani nedá. Nicméně dá vám zase příklad jako ze sít praxe ve chyli, kdy se vo mě ví, že mám rád písmenka a zároveň jsem vyštodovaný architekt tak se dostanu k projektu, jako je tohle tohle je v ulici Bíblova a my jsme si spolu s panem architektem Klejnou řekli, že vezmeme slova vlastně básnické zbířky a použijeme na fasadu takže tady jsou vlastně prosvětlení panely fasadní na který si dá nějakým způsobem čísť jednotlivý slova ten jsou v tom schovaný takže to potom funguje takže když kolen toho procházíte tak tam většinuje nějaká banda japonců který se straží zjistit co je tam vlastně napsaný a funguje to velice dobře a je to podle mího vesčí než i ten barák v pravo, i ten v levo důležitost textu je samozřejmě si uvědomí těla, že ve chyli kdy žádnou když ten text vypadne tohle je příklad alzi bez textu a je vydět, že to moc fungujně nyní kde bych byl hejzel takým odmažu i to ačku z noge nicméně ten web je jako bez textu vlastně nekoužitelný za mě to, v čem byste měli, nebo na co byste měli dbát tohle je taká minimální velikost písma takže v tuhle píli cokoliv pod 16 pixels za mě je jako příliš malý z pohledu nějaké použitelnosti a pak je důležitý aby ty jednoznivý prvky webu který nebo prvky textu, který máte aby byly na nějaký typografický škále což znamená primárně dvoto aby natvis první kategorie dví kategorie perex a běžný text bude od sebe dostatečně vzdálený co si týče velikosti případně to může to ještě zvíraznit nějakým řezem a tak dále ale v zásadě je důležitý, aby ten člověk kdydy kdy to nevidí, takhle všechno na jednou tak aby byl schopný říct hle tohle je ten nejhlavnější natpis nebo hle tohle je nějaký pod natpis prostě druhý, třetí úrovně zase souvisí to z nějakou semantickou logikou a pochopitelností dyní stranky jako takový naštěstí už nejsme v 90. letech a 10 pixelých fontech ale pořád si myslím, že v profúru lidí ten text navebuje relativně hodně malej ale kdyby bude tak starý jako já tak začnete zišťovat že pokud máte nějaký nepríznivý podmínky typu sluníčko nebo jste unavej nejí protože vás děti ne nechali vyspat tak ten šerej text na bělý plše jako nevypará dobře já vám ukážu dobrý až patný příklady tohle Marty Latien což je Slovenec který má takhle udělany web a to je za mě dobrý příklad i z pohledem coba na ten white space na ten prázdný prostor i z pohledem na to, že přišlení něco, co se vymiká tý struktur symetrický a tím na to přitáhne pozornost tady je příklad i dnes kde si myslím, že je to blbě protože všechny ty texty vyparejte mě stejně všechno je to stejnou vadykostí a nedá se v tom příliš dobře orientovat a tohle je na druhou stranu což nějaká nezyskovka a tam se myslím, že je to udělené trochu dík možná, protože jsem to dělal já šestý princip je kontrast v zásadě je to, aby ty věci byli co nejrozdilnější od sebe takže tady je blbý příklad respektive ten web je moc hezkej ale ten šelý text na tom bělým pozadí až tě v nějakým tenkým řezu vypadá vzice nadetně krásně ale ve chyti, když se na to podíváte jako cílová skupina lidí, který třeba teprv vomeků uvožujou a stejna hádečkový monitoru za 3000 tak si myslím, že začínáte mít trošku problém podobně minimalistický eShop s teniskami ETQ který používá zase šedou našedí ale je to prostě daný tím, že a jsou to francouzi a ty s tím webem vždycky trošku zápasujeme ještě když jsem dělal ve firmě že jsme tam nějaký problém z koudováním a mezery se nám ukazovali jako nějaký nesmyslný znak a francouzu to věřiši že ale to už je dávna a naopak tady spotify kde ten kontrast je velmi výrazné i přes to, že používají jako gradienty na pozadí a zase je to kombinace nějaký relativně komplementárný barvy a toho, že idyž to bude černobíle i na to bude síti sluníčko pořád ten jako velmi viditelný a tohle druhý příklad což je unbounce a tady je to úplně jako ložený v tom, že tohle jsou komplementární barvy v tom barevném krůhu takže tohle funguje dobře a tady evidentně chtěli můdle dát menší váhu že použili tlačítko jako druhý úrovně to vidím taky docela často tlačítko který má jako výraznou barvu ale pak těch tlačítek je tam na ty stránce 5 nebo 6 a všechny jsou vlastně stejně důležitý takže pokud bude to vybírat tlačítka tak se snažte vymyslet nebo použít dvě varianty to primární tlačítko který poly, který mu ta celá stánka existuje pak nějaký sekundární tlačítka u který chlasně nechci říct, že není boložitý a to byli lidi priknou ale jsou vlastně potlačení oproti tomu původního a poslední principie velikost, těch slajdou už moc nebude, protože jsem se na tom letršku zasek na tom obrázku, abych vybral pořádnej už je Kili pačkám tohle je velká niverská agentura která se menuje huge a hraj si s tím že má malé linka tý logo a pak ohromný přidítání nemyslím si, že by to bylo úžasný ale oni si to můžu vdovolit protože jsou na tolik velký že ten web zásadě už moc nepotřebujou a tady je Firefox kdy dojdete na stránku stahnití Firefoxu a je vám naprosto jesný že to nejdůvětíší na tom je tohle obřítla čítko s logem s přemařátkami textu až se z nějakým podtextem takže to jsou v zásadě principy dobrýho designu na který byste měli myslet kdy vydíráte Shablonu a máte už vočkataný všechny svoje technické požedavky a funkční požedavky zkuste se na to podívat i o pohledem uživatelé pohledem nějaké psychologie a toho jak ten web bude udělat, protože není to jenom o tom nejak rychvům servutu běhá ale je to i o tom, že ve chyli kdy těch lidi budou mít problém ten web o užívat a ten web děláte mým užítečnej tak těm lidem se to bude budete jim vlastně komplikovat život v ten je zbytečně To je za mě všechno, vybídejte Shablony chytře Takže děkujeme já jenom ještě než začnete odcházat nebojte se, užatne nebude fronta a ještě budou rád, by stejí chvilku počkali protože jsem přijdou lidi, ještě stejné ve loperské sekce a bude to nějaké oficiální zakońčení takže učeníkám nepospíchejte nebojete čekat dlouho užatne nepripadene 5 lidí, ktej si vás pak rozeberou takže níkám nepospíchejte Otázky Dromaš tady poklonu fantacická prezentace Přišel do kombinace protože já jako typický uživatel ve chyli kdy koukám na Shablonu tak za mě je důležité abych měl pocit toho, že si může vybrat ale zároda nic nebyl zahlecený tím, že si budu vyvírat ze 120 kg takže nebojte se nebojte se tím, že si budu vyvírat ze 120 variantů takže pokud já bych byl v jednym paralelním vesmíru tvůce Shablon tak bych uděl Shablonu která má třeba 3-4 varianty učitě nevíc Ono se ji ukazuje, že 3-4 je optimální číslo kůli řekněme nějaký rozhrovací paralíze Jeho, že pokud máte třeba tak nad pohybem máte nějaký výhody tak dalé tak pokud jich tam dáte 5 nebo 6 tak už funguje princip Prajmosy a Riesensy když nemerá, že ty lidi se podívají na první a pak na poslední a ty mezi tím vícemaně vypouštějí a ve chyti, kdy tam dáte 3-4 tak si ty lidi přečtou všechno a fungujete samozřejmě na tom designu a tím lidem vlastně ušetříte chůhu starostí s tím, když se věci na výběr protože to znamená, že si ročí nevybro v něco Super, je to všechno Vy tím oskrát děkujeme děkujem za přednášku