Future of Web Design

Michal Králik / 22. apríl 2014 / Tools a produktivita

Rád by som sa s vami pode­lil o nejaké novinky, ktoré som sa dozve­del na lon­dýn­skej kon­fe­ren­cii Future of Web Design. Keďže je toho, čo by som chcel prejsť viac, roz­ho­dol som sa to roz­de­liť do šty­roch častí, podľa toho ako pred­nášky išli za sebou. Zvo­lil som to preto, aby som sa mohol jed­not­li­vým pred­náš­kam veno­vať viac do hĺbky. 

Podu­ja­tie sa konalo v často oku­po­va­nej The Bre­wery — kon­fe­renč­nej budove v prí­jem­nom pro­stredí cen­tra Lon­dýna. Na kon­fe­ren­cii boli dve pódia (hlavné pódium a pódium vychá­dza­jú­cich hviezd), čo ma osobne veľmi pote­šilo. Na hlav­nom pódiu viedli svoje pred­nášky naj­zná­mej­šie mená kon­fe­ren­cie a pre menej zná­mych reč­ní­kov tu bolo pódium “Vychá­dza­jú­cich hviezd” (Rising Stars).

Tak teda začnime.

Uto­rok doobeda, 8. Apríl 2014

Future of Web­de­sign začalo o 9:00 a pri­ví­tal nás Paul Boag, autor novej pub­li­ká­cie od Smas­hing maga­zine, Digi­tal Adap­ta­tion. Milý chla­pík, aj keď bolo vidno, že sa sna­žil výrazne pre­dať svoju knihu. Ale prej­dime k reč­ní­kom.

Paul Adams (Our New Cre­a­tive Can­vas)

Úvodnú pred­nášku kon­fe­ren­cie začal Paul Adams a jeho “Naše nové kre­a­tívne pro­stre­die”.
Paul sa v pred­náške zame­ria­val hlavne na nevý­hody dote­raz pou­ží­va­ných prog­ra­mov ako naprí­klad Pho­tos­hop, ktorý nebol stvo­rený pre web dizajn a preto nie je práve ide­álne využí­vať ho na web dizajn. Jed­ným z vytý­ka­ných prob­lé­mov Pho­tos­hopu bolo, že ako prvé pri vytvá­raní nového súboru je potrebné určiť roz­mery. To je pre web nemys­li­teľné, aby sme začali pro­jekt z pred­na­sta­ve­ným roz­me­rom, a že budeme pro­jekt robiť pre 960px na šírku a 726px na dĺžku ako základný screen.

Ďal­šou nevý­ho­dou bolo, že Pho­tos­hop je soft­vér pre tlač (sta­tické obrázky) a nie je možné v ňom ani simu­lo­vať pohyby alebo ani­má­cie. K ani­má­ciám vo web dizajne je najb­ližší After Effects, ale tento soft­vér bol vytvo­rený pre video, nie web. Čiže ostáva otvo­rený pries­tor pre soft­vér alebo čokoľ­vek, čo nám pomôže skva­lit­niť tvorbu web dizajnu alebo inte­rak­tív­neho dizajnu.

Čo si odniesť z pred­nášky:

Poroz­mýš­ľajte, čo by mohlo byť tým pra­vým soft­vé­rom pre tvorbu web dizajnu. Ja si rov­nako nemys­lím, že PS je vhodný pre web dizajn.

Step­hen Hay (The Zero Inter­face)

Za Pau­lom bol rad na Step­hena Haya, autora Res­pon­sive Design Workf­low a ria­di­teľa agen­túry Zero Inter­face. Jeho pred­náška bola o bode nula. Podľa Step­hena by ide­álne mal každý pro­jekt začí­nať od nuly. Hlav­ným zame­ra­ním by nemala byť adap­tá­cia obsahu do šab­lóny, ale tvorba webu pre uni­kátny obsah. Odpo­rúča, aby sa každý web dizaj­nér zame­ral na hlavný prob­lém, ktorý má stránka vyrie­šiť alebo účel, ktorý má spĺňať. A to z pohľadu nula, čiže z prázd­neho papiera.

Čo by som robil ako prvé, aby som vyrie­šil prob­lém X, cieľ Y ? A to je všetko. Každý uží­va­teľ stránky má jeden cieľ. Dostať sa z bodu A do bodu B. To je jediné, čo chce uží­va­teľ. Zby­toč­ným zavá­dza­ním uží­va­teľa ho iba odďa­ľu­jete od spl­ne­nia účelu stránky. Zjed­no­du­še­nie webu nie je o tom, odstrá­niť veci z webu, ale nedať ich tam na prvom mieste!

Ale čo je medzi bodom A a bodom B? Tam sa presne nachá­dza UI. Ale pozor, nie­kedy chce web dizaj­nér uro­biť web tak jed­no­du­chý, že to škodí. Je veľmi veľký roz­diel medzi jed­no­du­chým a jed­no­du­cho vyze­ra­jú­cim. Tomuto treba pred­chá­dzať naprí­klad tes­to­va­ním. Prí­kla­dom je ikona “ham­bur­ger” menu. Každý dizaj­nér vie, čo to zna­mená, ale vie to každý pou­ží­va­teľ? Ikony sú dobré pre zjed­no­du­še­nie, ale ikony a text pra­cujú spolu naj­lep­šie. Ide­ál­nym rie­še­ním je v posled­nej dobe často spo­mí­nané postupné zvy­šo­va­nie úrovne detai­lov (prog­res­sive enhan­ce­ment).

Čo si odniesť z pred­nášky.

Skúste začať s tvor­bou web dizajnu od nuly. Bez bato­žiny kli­en­tov, dizaj­né­rov alebo prog­ra­má­to­rov. Využite postup­nosť pri jed­not­li­vých disp­le­joch a postupne skva­lit­ňujte obsah, neochu­dob­ňujte malé zaria­de­nia, na kto­rých je pou­ží­va­teľ teraz už každý deň.

Chris Jones (Wall­pa­pe­ring the World)

Po pre­stávke na kávu sme sa dostali ku Chri­sovi Jone­sovi, kto­rého agen­túra robila web pre známu anglickú spo­loč­nosť s tape­tami Gra­ham & Brown. Uká­zal ako pri­stu­po­vali k tejto pro­duk­to­vej stránke. Jed­ným z hlav­ných prob­lé­mov bola špe­ci­fi­ká­cia popu­lá­cie. Mali údaje, že tapety si kupuje skoro každý. V roz­me­dzí od 20 – 80 rokov a nezá­le­žalo na pohlaví. Tvorba také­hoto webu pre širokú popu­lá­ciu je veľmi ťažká. Veľa web dizaj­né­rov zavr­huje “sli­des­how”, Chris ich naopak v tomto prí­pade doká­zal využiť.

Keďže sú tapety čisto vizu­álny prvok, apli­ko­val celo­strán­kovú sli­des­how a veľké obrázky. Zame­ral sa aj na sezónne pro­dukty a hneď na úvodnú stranu dal odkaz na blog­posty s inšpi­rá­ciami. Tým sa zame­ral aj na ľudí, ktorí ešte neve­dia, akú tapetu chcú. Rov­nako sa sna­žili vytvo­riť pre­hľadné menu, ktoré sa klik­nu­tím roz­ro­luje dole a posu­nie tak vše­tok obsah niž­šie. Sle­do­va­ním heat­máp a pomo­cou iných tes­to­va­cích nástro­jov sa pre­sved­čil, či tieto prvky fun­gujú dobre a ľudia si ich vší­majú a využí­vajú. Pozna­me­nal na koniec veľmi dobrú vec: “Spus­te­nie stránky je iba začia­tok pro­cesu”.

Čo si odniesť z pred­nášky.

Je potrebné zame­rať sa na ľudí, pre kto­rých je stránka určená. Ide­álne zís­kať dáta o pou­ží­va­te­ľoch. Tes­to­vať všetko, čo na stránke spra­víte a neskon­čiť len spus­te­ním stránky.

Jason Pamen­tal (Res­pon­sive Typog­raphy)

Pred­po­sled­nou pred­náš­kou pred obe­dom bola pred­náška o typo­gra­fii v res­pon­zív­nom web dizajne. To je veľmi zákerná a ťažká téma. Naj­skôr spo­mí­nal to, aby dizaj­néri nevy­uží­vali zby­točne veľa typov písem na strán­kach. Maxi­málne 2 typy písem. O veľ­kosti jed­not­li­vých nad­pi­sov a hie­rar­chie hovo­ril o zla­tom pomere (Gol­den ratio). Nepre­há­ňať to s veľ­kými nad­pismi a malým tex­tom. Reč padla aj na fall­back písma (teda písma, ktoré sú základné v pre­hlia­da­čoch).

Je dobré si vybrať a vyla­diť fall­back písma tak, aby sa po načí­taní uni­kát­neho písma štruk­túra stránky nezme­nila. Teda upra­viť veľ­kosť a vybrať taký typ písma, aby sa čo naj­viac pri­bli­žo­val k tomu uni­kát­nemu. Potom uží­va­teľa bude menej trá­piť, že ten font nie je krásny v prvej sekunde.

Odpo­rú­čané číta­nie: Res­pon­sive Typog­raphy – The basics

Harry Roberts (What is CSS Fra­me­work Any­way?)

Mladý front-end kon­zul­tant známy aj ako CSSWi­zardly nie je v pro­stredí reč­ní­kov začia­toč­ník. Jeho pred­náška bola na tému CSS Fra­me­wor­kou.

Čo je to CSS Fra­me­work? Po správ­nosti by to mala byť CSS kos­tra bez aké­ho­koľ­vek štý­lo­va­nia v zmysle farieb atď. Ak sa vo fra­me­worku nachá­dza niečo také, už to nie je fra­me­work ale style guide. Samoz­rejme Harry spo­me­nul aj svoj fra­me­work, na kto­rom pra­cuje už tretí rok, a to inuitcss.com. V jeho pred­náške sa veno­val potrebe alebo skôr nepot­rebe fra­me­wor­kov ako takých. Často web dizaj­néri využí­vajú len malé per­cento a ostatný kód je tam zby­točný ale pone­chaný, lebo čo ak… To je veľký prob­lém, keďže výkon stránky a rých­losť načí­ta­va­nia je esen­ciálna pre túto dobu. Máme zruba 5 sekúnd, pokým uží­va­teľ neodíde zo stránky ktorá sa načí­tava a toto číslo sa stále zni­žuje. Preto je dosť pod­statné aké veľké budú súbory pri­lo­žené ku stránke.

Čo si odniesť z pred­nášky.

Dobre si pre­mys­lite, či potre­bu­jete fra­me­work pre váš pro­jekt. Boots­trap je síce fajn, ale je tam kopa zby­toč­ného kódu a nie­kedy je uro­biť si svoj kód rých­lej­šie a efek­tív­nej­šie ako ho len sko­pí­ro­vať a vlo­žiť celý. Ak využí­vate nejaký CSS Fra­me­work, dbajte nato, aby to nebol už upra­vený farebný text, ikony alebo iné… lebo to už potom nie je fra­me­work.

Odkaz na sli­des­how z tejto pred­nášky: What is a CSS Fra­me­work Any­way.

Nako­niec jedna fotka s Har­rym.

Zdroj: Web­de­sig­ning

Pridať komentár (0)