7 trendov vo web dizajne pre rok 2014

15
105

Ak sa pozrieme pár rokov dozadu, pozorujeme vysoké tempo v zmenách web dizajnu. Dostávame sa k obrovským pokrokom, ktoré sú hnacím palivom pre každého web dizajnéra. Zastaralé spôsoby tvorba webových stránok, ktoré sme mali možnosť využívať pred pár rokmi, prestávajú byť dnes už aktuálne. Tzv. revolúciou vo web dizajne bol dnes už dobre známy responzívny dizajn, ktorý stále zdoláva naše očakávania.

RESPONZÍVNY DIZAJN

Dni, keď sme sledovali rovnakú verziu webovej stránky na všetkých zariadeniach, sú konečne minulosťou. Responzívny dizajn bol TOP všetkých topov za minulý rok. Nebude tomu inak ani v nasledujúcom roku. Očakáva sa väčšie zameranie dizajnu na mobilné zariadenia a veľkosti obrazoviek.

web dizajn http://dribbble.com/shots/924043-New-portfolio-comming-up/attachments/102613

JEDNOSTRANOVÝ A JEDNODUCHÝ LAYOUT

Ak použijeme jednoduchý layout, je to oveľa efektívnejšie ako keby sme použili zložitý. Veľmi efektívne je venovať pozornosť medzerám, čo zvyšuje čitateľnosť a výkon webových stránok. Skvelým príkladom je Pinterest, ktorý poskytuje obrovský užívateľský zážitok, umožňujúci užívateľom prechádzať obsah bez preklikávania alebo opätovného načítania inej stránky.

PARALAX SCROLLING

K tomuto rolovaniu dochádza vtedy, keď obrázok na pozadí sa posúva pomalším tempom ako ten, ktorý je v popredí. Je to jeden z najhorúcejších nových trendov v oblasti web dizajnu. Vytvára nevšedný a jedinečný zážitok pri rolovaní stránky smerom dolu a vo veľa prípadoch rozpráva pútavý príbeh. Je to prvok, ktorý sa využíval už dávnejšie vo videohrách a web dizajnéri v ňom objavili geniálnu príležitosť. Príkladom môže byť táto stránka http://ponscreative.com/ alebo tento obrázok.

parallax-scrolling-websites-2013-01http://www.awwwards.com/20-best-websites-with-parallax-scrolling-of-2013.html

FLAT DIZAJN (plochý dizajn)

Veľmi horúca téma poslednej doby. Jednoduchosť, zrozumiteľnosť, minimalizmus a jasnosť, žiadne tiene, odlesky a žiadne textúry. (Flat dizajn je opakom skeuomorphic dizajnu, o ktorom sa dočítate ďalej.) Sústredíme sa len na to najdôležitejšie. V spojitosti s týmto trendom treba spomenúť, že za trendsettera považujeme aj Microsoft so svojim Windows 8. Síce flat dizajn existoval už skôr, rozmohol sa až po podnete Microsoftu. Typografia ako centrum pozornosti sa zameriava na experimentovanie s písmom, výrazné fonty či využitie písaného písma, ktoré je plné osobnosti. Využitie 2-3 fontov, ktoré sú odlišné no zároveň sa k sebe hodia, robia stránku príťažlivejšou. Ďalšími typickými znakmi tohto vizuálneho štýlu sú jednoduché elementy, prispôsobenie sa mobilným zariadeniam, dôraz na plné farby, biely priestor, piktogramy a prepracovaný dizajn. Nezabúdajme ani na veľké obrázky a fotografie s minimálnym množstvom písma, pretože kvalitné obrázky predstavujú primárny bod zamerania a netreba ich nijako prikrášľovať. Jedným z mnoho príkladov môže byť aj táto stránka: http://brightbyte.co.uk/.

blogujeme s it 

biztome_ipad

SKEUOMORPHIC

Natrafíme naň denne a možno si to ani neuvedomujeme. V súčasnosti ho uprednostňuje drvivá väčšina webových dizajnérov (do značnej miery za to môže Apple a hlavne iPhone). Predstavuje návrh rôznych mobilných aplikácií, web aplikácií alebo elementov, ktoré využívajú realistický vzhľad. Kladie sa dôraz na dizajn. Sú to rôzne predmety, ktoré pôsobia trojrozmerne a pripomínajú reálnosť týchto predmetov. Príkladom môže byť aj stránka, na ktorej si prečítame knihu, ktorá vyzerá ako v skutočnosti.

biztome_ipad http://dribbble.com/shots/915670-Biztome-iPad-App/attachments/101122

on_modified_largehttp://dribbble.com/shots/645737-Status-Dome-II/attachments/55507

VYUŽÍVANIE VIDEÍ

Webové stránky môžu používať v rámci svojho pozadia aj videá. Mnoho značiek využíva takýto vizuálny obsah. Pre inšpiráciu: http://24hoursofhappy.com/.

ROZOSTRENÉ POZADIE

Ďalší spôsob, ako používať webové stránky, je rozostrené pozadie Je stále bežnejšie, že vidíme weby s celým rozmazaným pozadím alebo s využitím takéhoto obrázku.

welcome

http://wplift.com/wp-content/uploads/2013/02/ViewPoint.png

Tak, môžeme premýšľať, navrhovať a hrať sa s kreativitou Wink

Dobrý článok? Chceš dostávať ďalšie?

Už viac ako 4 000 z vás dostáva správy e-mailom. Nemusíš sa báť, nie každé ráno. Len občasne.

Váš email neposkytneme 3tím stranám. Posielame naňho len informácie z robime.it. Kedykoľvek sa môžete odhlásiť.

  • sisa

    Vidím, že môj článok vzbudil celkom väčšiu debatu, no ďakujem za vašu kritiku i rady. Nevravím, že si za ním nestojím, no ako sa hovorí: radšej sa pohnúť a spraviť chybný krok, ako zostať prešľapovať na mieste 😉

    • quatermain32

      presne tak, ja co som komentoval tak som nemyslel v zlom 😉

      • sisa

        Ja to beriem 😉

  • quatermain32

    Ako pisal Ernest flat, icon font, vynechany sidebar, hero image sa prestavaju pouzivat, fotky zo zivota pri opise teamu. Mozno z technickeho uhla pohladu viac preprocesory, css/html frameworky, mobile-first(s tym moc nesuhlasim, ale pisu to kadetade, podla mna to rychlo upadne). Pri tom paralaxe je mozno podstatne spomenut, ze najcastejsie sa asi pouziva pri tz. one page site, kde cely web je len jeden “html subor” a pomocou paralaxu a dynamickeho js menu uzivatel len scrolluje po webe. Flat neviem ci MS alebo Apple, windows skusil zaviest dlazdicovy dizajn. Par webov to skusilo, par im to aj vydrzalo, ktovie ci sa to udrzi aj do buducna.

    • dexter

      prvej vete nie celkom rozumiem … prestava sa to pouzivat alebo nie??

      • quatermain32

        len hero image sa prestavaju pouzivat a vlastne aj sidebar sa prestava pouzivat

        • Svetlana Margetová

          a co sa zvykne pouzivat najcastejsie namiesto sidebaru?

          • Ernest Sawyer

            Sidebar má logickú úlohu iba na redakčných portáloch a e-shopoch (sme, topky, sport, nytimes, alza…), na bežných firemných/produktových prezentáciach by sa sidebar vo front-ende nemal používať (nemá logické využitie, je to len pozostatok masívneho nasadzovania free CMSiek s free šablónami kde bolo delenie sidebar-content column-sidebar alebo sidebar-content column). Najčastejšie sa namiesto sidebaru používa umiestnenie informácií zo sidebaru do obsahu stránky ako nejaký content container alebo do footru(napr. otváracie hodiny, fotka prevádzky, výhody prečo my etc.). Do prílohy dávam náhľad. Už z prvého pohľadu je jasné, že bez sidebaru stránka vyzerá už na prvý pohľad pripravená na responzitivu :o)

          • Svetlana Margetová

            tak to ano, to rovno vidno, ako sa to da potom upravit pre mobil a tablet a je to rovno pod sebou, co je super. Tak do webu ani ja sidebary by som nedala ale do apiek zatial davam, sice sa snazim vymysliet nieco ine ako ma kazdy druhy dizajn na dribble

  • Ernest Sawyer

    Skeumorfizmus je out, vytláča ho flat dizajn, rovnako tak apple prešiel na flat a zahodil skeumorfizmus. Rozoberal som to už v https://robime.it/webstranka-v-roku-2014/ … Treba si updatnúť info…alebo ios 😛 . : 1: http://www.inc.com/jill-krasny/web-design-trends-2014.html 2.: http://www.hongkiat.com/blog/web-design-trends-2014/ 3.: http://thenextweb.com/dd/2013/12/29/10-web-design-trends-can-expect-see-2014/2/

    • sisa

      Ernest, ďakujem 🙂
      Tvoj článok som videla, stojí fakt zato. Ja som ten svoj písala z laickejšieho pohľadu. Nie som odborník a ani sa nejdem na neho hrať, ale beriem rady na vedomie 😉

  • Svetlana Margetová

    ahoj, ako sa vola to pismo, co je pozite na tom obrazku o robime.it?

    • sisa

      Ahoj, je to Caviar Dreams 😉

      • Svetlana Margetová

        Dakujem 🙂

        • sisa

          Za máličko 🙂