Web dizajn

WEB DIZAJNZAČIATKY WEBU A SÚČASNÉ TRENDY

• Všetko to ale začalo v marci 1989,

keď Tim Berners-Lee a vedci z inštitútu CERN vo Švajčiarsku vytvorili dokument s názvom Manažment Informácií: Návrh (v origináli Information Management:

A proposal) • informácie prepojené hypertextom -

odkazmi v jednom PC - v programe

Enquire. - elektronická kartotéka s

vloženými odkazmi

PREDCHODCAPRVÉHO WEBUhttp://info.cern.ch/hypertext/WWW/TheProject.html

• V októbri 1990 Tim Berners-Lee spolu so spolupracovníkom Robertom Cailliau

vytvorili prvú podobu systému vzájomne prepojených dokumentov WorldWideWeb - www. Tento systém sa prezeral a stránky upravovali WorldWideWeb prehliadačom a editorom, ktorý bol pomenovaný Nexus. 

Web zostal v takejto textovej podobe približne do roku 1993, kedy prišiel prehliadač NCSA Mosaic s podporou grafických prvkov a obrázkov

S každou novou verziou prinášali nové schopnosti a vlastnosti, lepšiu podporu grafiky, rýchlejšie zobrazovanie dokumentov. Tak vznikali aj prvé verzie najznámejších prehliadačov NetCruiser, Netscape a Internet Explorer.

WEB DIZAJNNávšteva stránky nemá

byť len cestou za informáciami, ale aj vizuálnym zážitkom

WEB DIZAJN trendy 20151. RESPONZIVITA: Responzívny dizajn, umožňujúci optimálne zobrazenie internetovej stránky na akomkoľvek zariadení,

2. KARTOVÝ DIZAJN: Predstavte si napríklad kartičky hokejových hráčov a preneste si tento princíp do online sveta. Weby po novom podávajú ucelené informácie v jednoduchej forme na jednotlivých kartách.

3. FLAT DIZAJN v slovenskom preklade „plochý“ dizajn označuje jednoduchú grafiku, zbavenú prvkov, akými sú tiene, odlesky či farebné prechody.

Pôvodne preferovaný 3D vzhľad web stránok, nazývaný skeuomorphic, už v uplynulom roku odovzdal štafetu dvojrozmernému flat dizajnu. Dekoratívne prvky a realistické tlačidlá nahradil nenáročný vzhľad s klasickými geometrickými tvarmi a originálnym využitím jednoduchej, ale výraznej typografie. Na grafické vyčlenenie jednotlivých elementov sa namiesto tieňov a textúr požívajú viaceré odtiene jednej farby

pripúšťa jemné farebné prechody, tiene a už nie je taký „plochý“ a jednoduchý ako flat dizajn. Ten stavia na jednoduchosti, čistote a farebnosti. Veľkou výhodou materiálového dizajnu je hlavne lepšia použiteľnosť oproti flat dizajnu, navyše používatelia s ním môžu intuitívnejšie pracovať.

4. MATERIÁLOVÝ DIZAJN (od Googlu 2014)

5.ONE PAGE – JEDNOSTRANNÝ LAYOUT / SCROLOVANIE NAMIESTO KLIKANIA - Jedným pohybom „rolujete“ (z angl. scrolling) stránku smerom dolu a v zjednodušenom obsahu sa bez problémov orientujete. Ide o akési digitálne rozpovedanie príbehu na jednej strane. Špecifickým príkladom je paralaxné rolovanie, pri ktorom sa samotný text na web stránke pohybuje rýchlejšie ako obrázok na pozadí. Cieľom je okrem oku lahodiaceho dizajnu predovšetkým grafické oddelenie jednotlivých obsahových častí. Objavuje sa aj modulárne rolovanie (modular scrolling), pri ktorom rolujete iba jednu časť web stránky, napr. jej pravú polovicu, kým ľavá ostáva nezmenená.

prechody so zmenou farby, transparentnosti + hover + Iným prípadom je napríklad animované presunutie produktu v internetovom obchode priamo do vášho nákupného košíka.

6. UI ANIMÁCIE (User Interface)

S príchodom technológie HTML5, CSS3 a s rozšírením Java- scriptových knižníc sa ani niet čomu čudovať. Všetky takéto mikrointerakcie majú za úlohu uľahčiť návštevníkovi pobyt na

webovej stránke: chaty s animaciou – bublinky s online zobrazením písania a pod. 1.Cieľom Micro UX je potešiť návštevníka stránky a na základe pozitívnej emócie ho prilákať

na opätovnú návštevu .

7.Mikrointerakcie a definitívny zánik flashu + animované infografiky Vysvetlenie zložitých analýz alebo technických postupov už vďaka animovaným

infografikám nebude žiaden problém.

8..AKTIVIZUJÚCI OBSAH (COPYWRITERI) - Kým ešte donedávna boli grafické prvky alfou a omegou pri plánovaní výslednej podoby stránky, v súčasnosti sa čoraz väčšia pozornosť venuje jej obsahovej náplni. K slovu, resp. k peru sa dostávajú copywriteri, ktorí použitím tých správnych slovných hračiek premenia text na predávajúci nástroj.

Dôkladne sa informujú o potenciálnych zákazníkoch a získané informácie zúročia v obsahu tak, aby fungoval

aj po odstránení všetkých grafických prvkov

Nenápadná ikonka v niektorom z horných rohov je tvorená tromi horizontálnymi čiarkami nad sebou. Po rozkliknutí vás prekvapí šikovnou ponukou menu celej stránky. Výnimkou

však nie sú ani ďalšie kreatívne riešenia.

9. SKRYTÉ/PLÁVAJÚCE MENU - HAMBURGER BUTTON

Myšlienku alebo emóciu vyjadria často lepšie ako tisíc slov. Frekventovane sa objavujú aj veľké fotografie vo vysokom rozlíšení, umiestňované do pozadia celej web stránky.

10. VIZUALIZÁCIA (VIDEO + HD FOTO)

I KEĎ TVORBA WEBU JE ČORAZ NÁROČNEJŠIA NA KREATIVITU TVORCOV I NA VÝKONNOSŤ SIETÍ, SOFTWARE I HARDWARE, TREND JE NASTOLENÝ:

Návšteva stránky už nemá byť len cestou za informáciami, ale aj vizuálnym zážitkom