V dnešnej dobe je takmer úplne bežné vlastniť osobnú webovú stránku. Rýchla doba však prináša aj kopu nových a originálnych nápadov vo svete webdizajnu. Práve preto vám dnes ukážem trendy na rok 2017 a taktiež ukážky niektorých webových stránok, ktoré ma ihneď zaujali.

Za posledný rok/dva sme si mohli všimnúť, že veľa dizajnérov sa už nesnaží držať jednoduchých kompozícií (minimalistické štýly, napr. flat, alebo metro dizajn). Práve naopak – rozbité, rezané až niekedy chaotické weby sa stávajú čoraz viac a viac populárnymi. Grid (web má určitú šírku, dodržuje rovnaké odstupy – je ohraničený) stránok už nehrá tak dôležitú úlohu, nakoľko obsah častokrát prekrýva časť do inej sekcie, alebo sú jednoducho elementy posunuté mimo.

Veľkú úlohu v týchto trendoch spravila evolúcia Canvas-u a technológie WebGL. Takéto moderné weby môžu byť trocha mätúce a menej intuitívne než minimalistické, no za to u návštevníka stránky zanechajú oveľa silnejší dojem.

Canvas – podporujú ho takmer všetky prehliadače už od svojich prvých verzií (výnimka je Internet Explorer), čiže existencia canvas-u tu už je nejaký ten piatok, no stáva sa znova trendom. Canvas slúži na kreslenie grafiky priamo na stránku cez JavaScript kód a teda je napríklad možné nakresliť auto, ktoré sa môže pri kliknutí zafarbiť na inú farbu, alebo zmeniť obrysy.

WebGL – podobne ako canvas, kompatibilita s prehliadačmi je veľmi dobrá. Taktiež slúži na kreslenie grafiky na stránke – avšak WebGL podporuje kreslenie 3D objektov bez použitia pluginu. Je to až úchvatné, čo dokážu niektorí programátori vytvoriť. Pozrite si túto ukážku (budete potrebovať lepšiu grafickú kartu).

Nedodržiavaný grid

Ako som už spomínal, novým trendom je aj nedodržaný grid. Čiže na weboch si všimneme veľa elementov, ktoré nám akosi lietajú po stránke. Takéto stránky sú takmer vždy riešené na full-screen, čiže zaberú plnú šírku obrazovky. Najlepším príkladom je stránka Lawrence Boone Selections. Odporúčam si všimnúť malé detaily ako lietadlo, kompas či vlnky pri sudoch.

Asymetria

Pri lietajúcich elementoch zostaneme. Vlastne to už ani nie sú samostatné elementy, ale časť iných elementov. Znie to mätúco? Pozrite si ukážku stránky Multimedia Guides to Polish Culture. Veľmi dobre spracovaný obsah, ktorý je asymetrický na rozdiel od iných webov a určite si zapamätáte jeho jedinečný dizajn. Ďalším príkladom je už skôr chaotická stránka DATA / DATA. Stránka je originálna a zložitá zároveň. Ako programátor si viem predstaviť tie hodiny strávené kódovaním :-)

Rozmanitosť tvarov

Diagonálne čiary, rezané štvorce, či rôzne geometrické tvary, to všetko nás môže bombardovať pri návšteve moderných webov. Krásnym príkladom je francúzska stránka Poignée de main virile. Osobne sa mi páči prevedenie náhľadov v sekcii projektov (Réalisations).

Animácie, animácie, animácie

Vo všetkých uvedených stránkach ste mohli postrehnúť animácie. Našli ste ich pri skrolovaní webom, pri prechode myškou nad elementom, alebo proste neustále bežiace pre vytvorenie pekného dojmu. Príkladom je stránka Style Novels preplnená tonami animácií. Ďalšia stránka, ktorá stojí za zmienenie, je Cuberto. Táto ma na pozadí videá, ktoré k tomu webu naozaj veľmi pasujú, nehovoriac o animáciách, ktoré zo stránky robia malé estetické miestečko.

Typografia

Rodina písiem sans serif s geometrickými tvarmi dostáva obrovskú obľubu vo svete webdizajnu. Najlepšími príkladmi sú písma Futura, ITC Avant Garde, Proxima Nova, prípadne voľne dostupné Poppins a Montserrat na google fonts.

Stránky, ktoré stoja za zmienku

Chcem ešte pridať pár ukážok webov, ktoré mňa veľmi oslovili a určite z nich budem v budúcnosti čerpať inšpiráciu.

Toast – minimalistická stránka s nádychom moderného dizajnu. Osobne ma veľmi zaujali animované ilustrácie na podstránkach.

Stripe – tento štýl stránky som si nazval „skew-dizajn“. V podstate sú objekty vytvorené jednoduchým štýlom a neskôr sú len skosené o 12 stupňov. Taktiež chcem upozorniť na menu, ktoré pri prechode myškou vytvára efekt, že menu zostáva na jednom mieste a obsah sa len posúva – veľmi šikovné.

Cleano – podobne ako Stripe, no tu už je skosený viditeľný obsah stránky, resp. pozadie v sekciách.

Fuzzco – slideshow stránka. Prečo slideshow? Pretože sa sama skroluje. Takže si môžete ľahnúť na gauč a sledovať stránku z diaľky. A navyše ide dokola, nechal som sa oklamať :-)

NewActon – pre mňa trocha chaotická stránka, hlavne pri prejdení myšou sa obávam, že mi všetko odletí preč.

Ak ste hľadali inšpiráciu na webdizajn, snáď vám môj článok s ukážkami moderných prác pomohol. Snažil som sa vybrať tie najlepšie kúsky z tvorby webdizajnov. Na záver - chcete sa zabaviť a zistiť niečo o svojej budúcnosti? Navštívte ešte stránku Predictive World.

Ak vás zaujíma ako sa niektoré z týchto štýlových web stránok tvoria, zákulisie nájdete tu.