Začiatky webu a súčasné trendy

1. WEB DIZAJN
ZAČIATKY WEBU A SÚČASNÉ TRENDY

2. • 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
PREDCHODCA
PRVÉHO WEBU
http://info.cern.ch/hypertext/WWW/TheProject.html

3. • 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.

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

5. WEB DIZAJN trendy 2015
1. 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.

6. 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

7. 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)

8. 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á.

9. 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)

10. 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.

11. 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

12. 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

13. 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