Future of Web Design

  • Rád by som sa s vami podelil o nejaké novinky, ktoré som sa dozvedel na londýnskej konferencii Future of Web Design. Keďže je toho, čo by som chcel prejsť viac, rozhodol som sa to rozdeliť do štyroch častí, podľa toho ako prednášky išli za sebou. Zvolil som to preto, aby som sa mohol jednotlivým prednáškam venovať viac do hĺbky.
image_1398157557.jpeg
  • Rád by som sa s vami podelil o nejaké novinky, ktoré som sa dozvedel na londýnskej konferencii Future of Web Design. Keďže je toho, čo by som chcel prejsť viac, rozhodol som sa to rozdeliť do štyroch častí, podľa toho ako prednášky išli za sebou. Zvolil som to preto, aby som sa mohol jednotlivým prednáškam venovať viac do hĺbky.

 

Podujatie sa konalo v často okupovanej The Brewery – konferenčnej budove v príjemnom prostredí centra Londýna. Na konferencii boli dve pódia (hlavné pódium a pódium vychádzajúcich hviezd), čo ma osobne veľmi potešilo. Na hlavnom pódiu viedli svoje prednášky najznámejšie mená konferencie a pre menej známych rečníkov tu bolo pódium “Vychádzajúcich hviezd” (Rising Stars).

Tak teda začnime.

 

Utorok doobeda, 8. Apríl 2014

Future of Webdesign začalo o 9:00 a privítal nás Paul Boag, autor novej publikácie od Smashing magazine, Digital Adaptation. Milý chlapík, aj keď bolo vidno, že sa snažil výrazne predať svoju knihu. Ale prejdime k rečníkom.

Paul Adams (Our New Creative Canvas)

Úvodnú prednášku konferencie začal Paul Adams a jeho “Naše nové kreatívne prostredie”.
Paul sa v prednáške zameriaval hlavne na nevýhody doteraz používaných programov ako napríklad Photoshop, ktorý nebol stvorený pre web dizajn a preto nie je práve ideálne využívať ho na web dizajn. Jedným z vytýkaných problémov Photoshopu bolo, že ako prvé pri vytváraní nového súboru je potrebné určiť rozmery. To je pre web nemysliteľné, aby sme začali projekt z prednastaveným rozmerom, a že budeme projekt robiť pre 960px na šírku a 726px na dĺžku ako základný screen.

Ďalšou nevýhodou bolo, že Photoshop je softvér pre tlač (statické obrázky) a nie je možné v ňom ani simulovať pohyby alebo animácie. K animáciám vo web dizajne je najbližší After Effects, ale tento softvér bol vytvorený pre video, nie web. Čiže ostáva otvorený priestor pre softvér alebo čokoľvek, čo nám pomôže skvalitniť tvorbu web dizajnu alebo interaktívneho dizajnu.

Čo si odniesť z prednášky:

Porozmýšľajte, čo by mohlo byť tým pravým softvérom pre tvorbu web dizajnu. Ja si rovnako nemyslím, že PS je vhodný pre web dizajn.

 

Stephen Hay (The Zero Interface)

Za Paulom bol rad na Stephena Haya, autora Responsive Design Workflow a riaditeľa agentúry Zero Interface. Jeho prednáška bola o bode nula. Podľa Stephena by ideálne mal každý projekt začínať od nuly. Hlavným zameraním by nemala byť adaptácia obsahu do šablóny, ale tvorba webu pre unikátny obsah. Odporúča, aby sa každý web dizajnér zameral na hlavný problém, ktorý má stránka vyriešiť alebo účel, ktorý má spĺňať. A to z pohľadu nula, čiže z prázdneho papiera.

Čo by som robil ako prvé, aby som vyriešil problém X, cieľ Y ? A to je všetko. Každý užívateľ stránky má jeden cieľ. Dostať sa z bodu A do bodu B. To je jediné, čo chce užívateľ. Zbytočným zavádzaním užívateľa ho iba odďaľujete od splnenia účelu stránky. Zjednodušenie 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, niekedy chce web dizajnér urobiť web tak jednoduchý, že to škodí. Je veľmi veľký rozdiel medzi jednoduchým a jednoducho vyzerajúcim. Tomuto treba predchádzať napríklad testovaním. Príkladom je ikona “hamburger” menu. Každý dizajnér vie, čo to znamená, ale vie to každý používateľ? Ikony sú dobré pre zjednodušenie, ale ikony a text pracujú spolu najlepšie. Ideálnym riešením je v poslednej dobe často spomínané postupné zvyšovanie úrovne detailov (progressive enhancement).

Čo si odniesť z prednášky.

Skúste začať s tvorbou web dizajnu od nuly. Bez batožiny klientov, dizajnérov alebo programátorov. Využite postupnosť pri jednotlivých displejoch a postupne skvalitňujte obsah, neochudobňujte malé zariadenia, na ktorých je používateľ teraz už každý deň.

 

Chris Jones (Wallpapering the World)

Po prestávke na kávu sme sa dostali ku Chrisovi Jonesovi, ktorého agentúra robila web pre známu anglickú spoločnosť s tapetami Graham & Brown. Ukázal ako pristupovali k tejto produktovej stránke. Jedným z hlavných problémov bola špecifikácia populácie. Mali údaje, že tapety si kupuje skoro každý. V rozmedzí od 20 – 80 rokov a nezáležalo na pohlaví. Tvorba takéhoto webu pre širokú populáciu je veľmi ťažká. Veľa web dizajnérov zavrhuje “slideshow”, Chris ich naopak v tomto prípade dokázal využiť.

Keďže sú tapety čisto vizuálny prvok, aplikoval celostránkovú slideshow a veľké obrázky. Zameral sa aj na sezónne produkty a hneď na úvodnú stranu dal odkaz na blogposty s inšpiráciami. Tým sa zameral aj na ľudí, ktorí ešte nevedia, akú tapetu chcú. Rovnako sa snažili vytvoriť prehľadné menu, ktoré sa kliknutím rozroluje dole a posunie tak všetok obsah nižšie. Sledovaním heatmáp a pomocou iných testovacích nástrojov sa presvedčil, či tieto prvky fungujú dobre a ľudia si ich všímajú a využívajú. Poznamenal na koniec veľmi dobrú vec: “Spustenie stránky je iba začiatok procesu”.

Čo si odniesť z prednášky.

Je potrebné zamerať sa na ľudí, pre ktorých je stránka určená. Ideálne získať dáta o používateľoch. Testovať všetko, čo na stránke spravíte a neskončiť len spustením stránky.

 

Jason Pamental (Responsive Typography)

Predposlednou prednáškou pred obedom bola prednáška o typografii v responzívnom web dizajne. To je veľmi zákerná a ťažká téma. Najskôr spomínal to, aby dizajnéri nevyužívali zbytočne veľa typov písem na stránkach. Maximálne 2 typy písem. O veľkosti jednotlivých nadpisov a hierarchie hovoril o zlatom pomere (Golden ratio). Nepreháňať to s veľkými nadpismi a malým textom. Reč padla aj na fallback písma (teda písma, ktoré sú základné v prehliadačoch).

Je dobré si vybrať a vyladiť fallback písma tak, aby sa po načítaní unikátneho písma štruktúra stránky nezmenila. Teda upraviť veľkosť a vybrať taký typ písma, aby sa čo najviac približoval k tomu unikátnemu. Potom užívateľa bude menej trápiť, že ten font nie je krásny v prvej sekunde.

Odporúčané čítanie: Responsive Typography – The basics

 

Harry Roberts (What is CSS Framework Anyway?)

Mladý front-end konzultant známy aj ako CSSWizardly nie je v prostredí rečníkov začiatočník. Jeho prednáška bola na tému CSS Frameworkou.

Čo je to CSS Framework? Po správnosti by to mala byť CSS kostra bez akéhokoľvek štýlovania v zmysle farieb atď. Ak sa vo frameworku nachádza niečo také, už to nie je framework ale style guide. Samozrejme Harry spomenul aj svoj framework, na ktorom pracuje už tretí rok, a to inuitcss.com. V jeho prednáške sa venoval potrebe alebo skôr nepotrebe frameworkov ako takých. Často web dizajnéri využívajú len malé percento a ostatný kód je tam zbytočný ale ponechaný, lebo čo ak… To je veľký problém, keďže výkon stránky a rýchlosť načítavania je esenciálna pre túto dobu. Máme zruba 5 sekúnd, pokým užívateľ neodíde zo stránky ktorá sa načítava a toto číslo sa stále znižuje. Preto je dosť podstatné aké veľké budú súbory priložené ku stránke.

Čo si odniesť z prednášky.

Dobre si premyslite, či potrebujete framework pre váš projekt. Bootstrap je síce fajn, ale je tam kopa zbytočného kódu a niekedy je urobiť si svoj kód rýchlejšie a efektívnejšie ako ho len skopírovať a vložiť celý. Ak využívate nejaký CSS Framework, dbajte nato, aby to nebol už upravený farebný text, ikony alebo iné… lebo to už potom nie je framework.

Odkaz na slideshow z tejto prednášky: What is a CSS Framework Anyway.

Nakoniec jedna fotka s Harrym.

Zdroj: Webdesigning

 

Najnovšie videá

Teraz najčítanejšie

Aktuálne čítajú

Trendové videá