Wydzia Sztuki Nowych Mediw

Kierunek Grafika

Wizualizacja
Piotr Parys (FB, WWW)
Nr albumu s6681
Praca licencjacka

Aplikacja mobilna SuperBohater

dr Magorzata Badyga
promotor gwny

mgr in. Marcin Wichrowski

promotor techniczny

Tendencje w projektowaniu stron www

w latach 2011-2015

dr Marzena Krlikowska-Dziubecka
promotor pracy teoretycznej

Warszawa, czerwiec 2015

1

Spis treci
1.) Wstp i cel pracy
2.) Technologia

Koniec technologii Adobe Flash

HTML 5

1
2
3
4

3.) Era treci

4.) Urzdzenia

CMS
Tre tworzona przez uytkownikw
Opowiadanie historii

6
7
8

Strona internetowa to aplikacja

Strony adaptacyjne
Strony responsywne

10
11
12

Flat design wszechobecny minimalizm

Skeuomorphic Design przestaje by modny
Skeuominimalism najlepsze cechy z dwch wiatw
Polygon Design projektanci pragn urozmaicenia
Material Design
Nacisk na animacj
Zasada Above the Fold ju nieaktualna
One Page

14
15
16
17
18
19
20
21
22

5.) Zaoenia oglne

13

6.) Elementy

23

wiato
Typografia
Video ta
Nawigacja
Przyciski Call to Action
Pokaz slajdw i przewijanie w poziomie
Paralaksa
Styl metro czyli kafelki
Integracja social media
Ciasteczka
Ikonografia
404

24
25
26
27
28
29
30
31
32
33
34
35

7.) Problemy wspczesnych projektantw

36

8.) Prognozy na nastpne lata

38

Efekt Behance Powtarzanie trendw I schematw

9.) Bibliografia

37
39

Wstp i cel pracy

W erze upadku mediw analogowych jak telewizja czy prasa to Internet jest nonikiem
informacji, rozrywki oraz rodkiem komunikacji. Ju ponad 3 miliardy ludzi1, prawie poowa
populacji naszego globu, posiada do niego dostp.

W 1989 roku Tim Berners-Lee, naukowiec komputerowy w CERN zaproponowa swojemu

przeoonemu sie notatek z odnonikami pomidzy nimi2. W 1990 napisa pierwsz
przegldark i edytor. W 1993 roku po wielu naciskach CERN zadeklarowa, e technologia ta
bdzie dostpna na zawsze bez opat licencyjnych. I tak, wiele tysicy ludzi zaczo pracowa
razem, aby stworzy oglnodostpn sie uatwiajc wymian informacji midzy
uytkownikami komputerw.
WWW, czyli World Wide Web (wiatowa szeroka sie) pocztkowo suya jedynie celom
naukowym i komunikacji midzy uczelniami3. Gdy dostp do sieci stawa si wikszy ludzie
zaczli dzieli si midzy sob wiedz i informacjami pro bono. Niestety, wraz z rozwojem
Internet traci swoj pierwotn natur i zacz zmierza w stron komercjalizacji. Powstay
ogromne, warte miliardy dolarw firmy, jak Google oferujcy wyszukiwanie informacji, ale
rwnie zbierajce prywatne dane uytkownikw w celach komercyjnych i oferujce na
sprzeda powierzchnie reklamowe.
Internet to globalna sie stworzona z setek milionw komputerw mogcych komunikowa
si ze sob. WWW to standard formatw tekstu, grafik, dwiku, filmw, ktre mog by
atwo zindeksowane i znalezione przez poszczeglne urzdzenia.

Dzisiaj nie wyobraamy sobie ycia bez stron internetowych. Mamy do nich dostp
z komputerw, telefonw, tabletw czy nawet telewizorw. Najwaniejszy jest jednak
uytkownik, bo dla niego to wszystko powstao. Projektanci wci szukaj nowych rozwiza,
aby uatwi mu wymian informacji, ale rwnie, eby dotrze skutecznie z reklam
komercyjn.
W niniejszej pracy autor bdzie omawia trendy i zmiany, jakie nastpiy w medium
internetowym i podstawowym jego formacie, czyli stronie internetowej. Realizator niniejszej
pracy licencjackiej od 5 lat pracuje w brany graficznej nowych mediw. W celu zawenia
spektrum czasowego i wykorzystania w pracy wasnych dowiadcze omawia bdzie
ostatnie lata, tj. okres od 2011 do 2015 roku. Z powodu dynamiki zmian, jakie nastpuj
w omawianym medium oraz jego dominacji nad tekstem drukowanym, rdami s przede
wszystkim artykuy, wypowiedzi i badania opublikowane w Internecie wanie.
1

1.
2.
3.

http://www.itu.int/en/ITU-D/Statistics/Pages/facts/default.aspx
http://googleblog.blogspot.com/2014/03/on-25th-anniversary-of-web-lets-keep-it.html
http://www.netvalley.com/intvalnext.html

Technologia

Gdyby nie rozwj standardw i technologii Internet wygldaby tak samo jak witryna CERN
sprzed 26 lat. Ustanawianiem standardw pisania i przesyu stron WWW zajmuje si World
Wide Web Consortium zrzeszajce 397 organizacji, firm, rzdw i uczelni.42

WWW to nie tylko tekst, zdjcia, filmy i dwik, ale rwnie interakcja z uytkownikiem.
To wanie na interakcj z uytkownikiem pooony jest nacisk w projektowaniu w ostatnich
piciu latach.

anakin.co minimalistyczne podejcie korzystajce z nowoczesnych technologii

Koniec technologii Adobe Flash

Flash to technologia pomagajca tworzy interaktywne animacje i wzbogaca wygld strony

internetowej. Stworzona przez firm Macromedia ostatecznie zostaa sprzedana gigantowi
z dziedziny programw do edycji grafiki i filmw, firmie Adobe5. Flash dziaa jako zewntrzna
wtyczka to przegldarki.
Boom na ten sposb projektowania nastpi pod koniec pierwszego dziesiciolecia XXI wieku.
To dziki niemu powstaa w Internecie masa gier, aplikacji i animowanych reklam. Wasny
obiektowy jzyk programowania Action Script 3 pozwala tworzy skomplikowane algorytmy i
gry. Strony uywajce Flasha starajc si by coraz bardziej urozmaicone i bogate rosy na
wadze, co wymagao szybkich procesorw i wymiany duej iloci danych.
4.
5.

http://www.w3.org/Consortium/
http://www.techhive.com/article/243529/the_beginning_of_the_end_of_adobe_flash_player.html

Wraz z popularyzacj przegldania witryn na smartfonach i urzdzeniach mobilnych

technologia bdca wasnoci firmy Adobe zacza chyli si ku kocowi. Najpopularniejszy
multimedialny telefon iPhone zupenie nie wspiera ju tej technologii6. Samo Adobe przestao
wydawa nowe wersj wtyczki na telefony z coraz popularniejszym systemem operacyjnym
Android. Co raz wicej klientw w ostatnich latach zrezygnowao z zamawiania tego typu
projektw, a wikszo programistw przerzucia si na aplikacje mobilne czy projektowanie
graficzne. W 2015 roku technologia Flash ma zastosowanie ograniczone przede wszystkim do
animowanych reklam.

HTML 5

Rynek nie lubi pustki i aby zaspokoi zapotrzebowanie na technologi pozwalajc na

wykorzystanie rich media w Internecie pojawiy si rozwizania jak Canvas, WebGL lub
WebAudio, ktre pozwalaj tworzy aplikacje dziaajce w przegldarkach internetowych
szybciej i bez dodatkowych wtyczek73. To dziki nim powstaj bogate w wysokiej jakoci
dwik stereo i grafik 3D skomplikowane strony dziaajce zarwno na komputerach
stacjonarnych jak i na urzdzeniach mobilnych. Wsparcie W3C, wydawcw przegldarek czy
rwnie Adobe pozwala mie nadziej, e technologia ta bdzie zyskiwa na popularnoci.
Z pomoc jzyka Java Script strony internetowe w ostatnich latach zyskay responsywno,
skomplikowane animacje i atwo dodawania treci przez uytkownikw.

run4tiger wykorzystanie skomplikowanych algorytmw czsteczek w projekcie HTML5

6.
7.

https://file.wikileaks.org/file/iphone-sdk-agreement.pdf
http://www.awwwards.com/current-state-and-the-future-of-html5-games.html

Era treci

Strony internetowe od zawsze suyy przede wszystkim przekazywaniu i prezentowaniu

informacji. W ostatnich piciu latach z powodu zalewu iloci danych i stron nastpi
wzmoony rozwj narzdzi i sposobw zbierania oraz prezentowania wartociowych treci.
Dobry tekst, niesamowite zdjcia i filmy tworz trzon wspczesnej strony internetowej.
S waniejsze ni ukad czy ozdobniki graficzne. Projekt jest otoczk spajajc sam tre.

CMS

Wspczenie adna strona internetowa nie obyaby si bez CMS (Content Management
Systems) systemu zarzdzania treci pozwalajcych atwo i szybko stworzy potrzebn
witryn internetow oraz zapeni j wartociowym materiaem. Przykadem moe by tutaj
Wordpress. Jest to najpopularniejsza dzisiaj platforma stworzona pocztkowo do
prowadzenia blogw, ktrych ukad (tytu, data, zdjcie, dusza zajawka, autor, czytaj wicej)
na stae zagoci w prezentacji aktualnoci na najwikszych portalach. Z czasem platforma
Wordpress znalaza zastosowanie rwnie w wikszych projektach komercyjnych takich jak
wizytwki firm i organizacji. Spopularyzowaa ona rwnie charakterystyczny styl oparty na
popularnych motywach dostpnych do kupienia w Internecie. Inn znan platform suc
do tworzenia portali jest Joomla. Ze wzgldu na swoje wiksze skomplikowanie nie zyskaa
ona jednak porwnywalnej popularnoci.

Polygon Charakterystyczny blogowy styl Vox Media opierajcy si o tre i jeden z trendw
ostatnich lat, czyli dynamiczne nieskoczone adowanie treci przy przewijaniu bez stopki witryny

Tre tworzona przez uytkownikw

Jaki jest sens tworzy oryginaln tre witryny, jeli moemy do tego celu wykorzysta
uytkownikw? Cech charakterystyczn wspczesnych serwisw jest dua interakcja
pomidzy uytkownikami. Witryny takie cechuje tworzenie si wok nich rozbudowanych
spoecznoci94. Do tej grupy nale najwiksze serwisy spoecznociowe, jak Reddit,
Facebook czy polski Wykop. Wymusio to wiele charakterystycznych skadowych w projekcie
stron, jak ocenianie, dzielenie si w social media, wysyanie treci czy systemy komentarzy.
S to elementy interaktywne znajdujce si na wikszoci wspczesnych witryn
internetowych.

Opowiadanie historii
Opowiadanie historii to nowa skuteczna metoda komunikacji. Pomaga w identyfikacji
uytkownika z prezentowan usug czy produktem. Rwnolegle to obowizujcy trend
w reklamie, aby nie sprzedawa samego produktu, ale cay styl ycia mu towarzyszcy.
Opowiadanie historii poprzez stron internetow stao si bardzo popularne w ostatnich
latach. Wykorzystywane s do tego due zdjcia pokazujce emocje, animacje oparte na osi
czasu czy filmy.

strona blackramwhisky.com

8.

http://networkeddigital.com/2010/04/09/definicja-web-2-0-definicja-social-media/

Przykadem jest np. prezentujca histori powstawania produktu czy pokazujca w postaci
filmu przygody i stylu yciu towarzyszcemu piciu whisky na stronie blackramwhisky.com.
Ciekawym rozwizaniem jest strona linii lotniczych Swiss - world-of-swiss.com, gdzie
wybierajc dany rodzaj i etap opowiadania ogldamy histori w postaci filmu.
Kolejn przykadem moe by strona spaceneedle.com opowiadajca o wiey w Seattle
poprzez animacj wjazdu na ni. Ukazuj si na niej najpierw informacje oglne o miecie,
potem o wiey, aby przej w kocu do znajdujcej si na jej szczycie komercyjnej atrakcji
restauracji.

warsawrising.eu czyli opowiadanie historii powstania Warszawskiego poprzez stron internetow

Urzdzenia

Wedug Jeffreya Zeldmana dzisiaj jest ogrom urzdze z szeroko rnicymi si

moliwociami i stworzenie dobrego interfejsu dziaajcego na nich wszystkich nigdy nie byo
tak wielkim wyzwaniem i tak trudne95
Strony internetowe przegldane s nie tylko na komputerach stacjonarnych, ale rwnie
z uyciem telefonw komrkowych czy tabletw. Udzia urzdze mobilnych na wiecie to
w 2015 roku ponad 5%10. Jednak ze wzgldu na charakterystyk i duy potencja biznesowy ta
wanie grupa klientw jest dla wydawcw bardzo istotna. Dla projektantw stron tworzy to
powany problem poprawnego wywietlania treci na ekranach o odmiennej rozdzielczoci
i wielkoci.
9. http://happycog.com
10. http://www.w3schools.com/browsers/browsers_mobile.asp

Duym wyzwaniem dla projektantw stao si wprowadzenie przez firm Apple komputerw
z wywietlaczem Retina o rozdzielczoci czsto czterokrotnie wikszej ni tradycyjne
monitory. Wymusio to uywanie zdj o duej rozdzielczoci i stosowanie elementw
wektorowych, ktre podczas skalowania nie trac na jakoci. Z tego powodu rwnie
nastpia popularyzacja zamykania zdj w apli, wektorowych ikon i duej typografii.

Strona internetowa to aplikacja

W czasach systemw operacyjnych jak Google Chrome OS, gdzie wszystkie aplikacje dziaaj
w przegldarce11, technologia pozwala tworzy bardzo funkcjonalne i skomplikowane
witryny. Wymaga to pooenia duego nacisku na user experience, czyli atwo i skuteczno
korzystania z danego interfejsu przez uytkownika. Skorzystay na tym strony internetowe
czsto korzystajce z rozwiza uytecznoci i estetyki aplikacji mobilnych i projektw
systemw operacyjnych jak iOS 7 czy Windows 8.
Remy Sharp, programista JS, uwaa, e przegldarki s tak blisko platformy, na ktrej
dziaaj, e pozwala to tworzy skomplikowane gry i aplikacje dziaajce poprzez strony
internetowe. Osignita przez nie wydajno nie pozwala ju odrni ich od aplikacji
natywnych.126

wellstoried.com interaktywna mapa fanw Land Rovera, opowiadajca ich histori

11. https://www.google.com/chromebook/
12. http://www.webige.com/tag/trends-in-web-design/

Strony adaptacyjne
Pierwszym podejciem do rozwizania problemu poprawnego wywietlania treci na
ekranach o odmiennej rozdzielczoci i wielkoci byy strony adaptacyjne. Serwer wykrywa
czy przegldarka dziaa na urzdzeniu mobilnym czy stacjonarnym oraz jaka jest
rozdzielczo ekranu i wysya waciwy styl i wygld strony do uytkownika. Problem pojawi
si wraz z wikszym urozmaiceniem ekranw w sytuacji, gdy nowoczesne telefony miay
czsto wiksz rozdzielczo wywietlaczy ni monitory urzdze stacjonarnych.
Wedug wielu projektantw strona internetowa powinna by projektowana osobno na kady
rodzaj urzdzenia i systemu. Uytkownik oczekuje innych zachowa korzystajc z telefonu
z systemem Windows Mobile ni ten uywajcy komputera stacjonarnego z OSX.

Dashboard ENGIE-Tennis au Fminin w oknie przegldarki i ta sam

strona w formacie telefonu. Witryn charakteryzuje te wyrana
kolorystyka, na ktr trend zapocztkowa projekt systemu iOS 7
(Apple)

Strony responsywne
Obecnym standardem s strony responsywne. Projekt tego rodzaju pynnie dopasowuje si
do urzdzenia bd rozmiaru okna przegldarki13.7Szerokoci kolumn, zdj i elementw
okrelane s procentowo, nie za w zdefiniowanej iloci pikseli jak w przypadku stron
adaptacyjnych. W przypadku wyduenia jednego elementu nastpny pynnie zmienia
pozycj tworzc uporzdkowany projekt niezalenie od orientacji ekranu. Format ten
wymusi stosowanie wielu charakterystycznych dzi elementw graficznych jak zdjcia
ograniczone apl, paski wektorowy wygld przyciskw i ikon czy wreszcie dua czytelna
typografia. Responsywno stron internetowych to ju waciwie wicej ni trend, to
wymagany standard w obliczu rosncej popularnoci urzdze mobilnych.
13. http://webroad.pl/webdesign/3605-responsive-design-vs-adaptive-design

10

Zaoenia oglne
Trendy w projektowaniu stron w ostatnich latach opieraj si na zaoeniach oglnych, aby
stron uproci na tyle, by bya czytelna na maych wywietlaczach, ale zarazem bogata
w treci i na swj sposb oryginalna. Wiele z tych tendencji przedstawionych poniej jest ju
standardem, a cze z nich to, w ocenie autora pracy, tylko przelotna moda.

Flat Design wszechobecny minimalizm

Flat design to ju waciwie nie trend, a obowizujcy standard projektw internetowych.
Pierwszym tego typu projektem w wiecie projektowania cyfrowego by odtwarzacz
multimedialny Zune. Nastpnie przyszed styl metro z Windowsa, Android I iOS 7. Kiedy firmy
Apple, Microsoft i Google poszy t drog, podyo za nimi tysice projektantw 14.8
Flat design jest wygodny w uyciu w stronach responsywnych jak i czytelny we wszystkich
formatach wywietlaczy. Charakteryzuje si brakiem popularnych w zeszym dziesicioleciu
gradientw, efektw cieni I wypukoci czy wiatocienia. Cechuje go uycie sporej iloci
wolnej przestrzeni i wiata, penoekranowe fotografie oraz wyrana wektorowa typografia
i ikonografia. Dy do jak najwikszego minimalizmu. Problemem paskiego stylu jest jednak
maa oryginalno projektw i brak wizualnych wskazwek dla uytkownika, ktre
z elementw danej strony s interaktywne.

thinkblink.nl przykad flat design. Charakterystyczna dua typografia i due zdjcia w tle.

14. http://www.webdesignai.com/flat-design-history/

11

Du wad jest rwnie zwizana z tym stylem ch projektowania jednego wygldu witryny
bez wzgldu na to czy bdzie uywana na maym wywietlaczu telefonu czy na 27 monitorze
odlegym 50 cm od oczu uytkownika. Due paskie aple i wielka typografia powicaj
widoczn ilo informacji na rzecz czytelnoci. Wzorowym przykadem tego problemu jest
Metro UI, czyli kafelki nowego Windowsa.
Wszystkie najpopularniejsze polskie portale internetowe w 2015 roku postawiy na ten
sposb projektowania przy zmianach wygldu. Onet.pl., Interia.pl, Wp.pl kada z tych
witryn korzysta z jego zasad. Do nagwkw wiadomoci uyta zostaa dua czytelna
typografia wywietlana na apli wypenionej zdjciem. Trzy najwiksze portale wykorzystuj
rwnie wyran pask ikonografi pomagajc zrozumie czytelnikowi dany dzia strony.

Skeuomorphic Design przestaje by modny

Przeciwiestwem flat design jest z pewnoci Skeuomorphic design. Pocztek tego stylu
pochodzi od Apple. To oni zapocztkowali trend, ktry na dugo goci w projektowaniu
aplikacji na system iOS i stron internetowych. Skeuomorph tumaczy si dosownie jako
obiekt stworzony po to, aby odzwierciedla inny materia lub technik wykonania.159
Najbardziej charakterystycznym przykadem bya z pewnoci aplikacja kalkulatora od Apple
przypominajca fizyczne urzdzenie poprzez wykorzystanie tektur, cieni rzuconych,
wiatocienia i wygldu prawdziwego kalkulatora.16

cinderellapastmidnight.tumblr.com - jedna z niewielu wspczesnych stron wykorzystujcy elementy

Skeuomorphic Design

15. http://webdesign.tutsplus.com/articles/skeuomorphism-in-interface-design--webdesign-7638
16. https://uxmag.com/articles/does-skeuomorphic-design-matter

12

Ten sposb projektowania daje uytkownikowi uczucie znajomoci i obycia z danym

interfejsem, co uatwia korzystanie ze strony, szczeglnie uytkownikom nieobytym
z technologi. Uycie tekstury papieru, skry czy drewna pozwala stworzy atmosfer
witryny samym tylko wygldem interfejsu bez uycia zdj w przeciwiestwie do stylu
paskiego gdzie elementy ukadu strony to tylko to wokoo treci.
Kolejn zalet tego rodzaju projektowania jest atwo wyrnienia elementw
interaktywnych. Przycisk moe przypomina ten prawdziwy znany wszystkim z urzdze od
dawna im znajomych jak fizyczna klawiatura czy maszyna do pisania.

Zalew stron internetowych wykorzystujcych tekstury papieru, wstki, zszycia nici

i podobnych elementw spowodowa zmczenie uytkownikw, poniewa wszystko zaczo
wyglda bardzo podobnie. Wraz z popularyzacj iOS 7 i stylu metro w Windows 7
Skeuomorphic design przesta by praktycznie uywany.
Wedug Damiana Madray, Skeuomorphic Design by potrzebny do adaptacji technologii.
Dzisiaj, jak to ju nastpio, kolej na nastpc w postaci Flat Design 17.10

Skeuominimalism najlepsze cechy z dwch wiatw

Zarwno Flat i Skeuomorphic design przedstawiaj wiele problemw projektantom stron.

Rozwizaniem moe by coraz bardziej popularny w ostatnich latach Skeuominimalism.
Oznacza on uproszczenie tylko do momentu, a nie wypynie to negatywnie na uyteczno,
jednoczenie urealnienie tylko do momentu zachowania podanego minimalizmu
w wygldzie18

Skeuominimalism na stronie internetowej LayerVault

17. https://medium.com/i-m-h-o/the-era-of-flat-design-is-not-a-trend-its-another-step-forward-9a0b3bddfc8
18. http://edwardsanchez.me/blog/13568587

13

Aby nada przestrze obiektom interfejsu strony uywane s cienie w paskich kolorach
i wektorowe ksztaty oddajce prawdziwe obiekty. Dopuszczalne s jedynie delikatne
gradienty i cienie rzucone by podkreli gboko warstwy elementw.

Styl ten zapocztkowao Google uywajc dla niego okrelenia almost flat19.11Projektanci
szukali sposobu nadania paskiemu stylowi wikszej uytecznoci. W ostatnich latach
trendem tym podyo wiele duych witryn internetowych. Rwnie Facebook, ktry od 2004
roku prezentowa paski styl zacz uywa lekkich gradientw do wyrnienia przyciskw, czy
cieni rzuconych, aby oddzieli okna na pierwszym planie.

Polygon Design projektanci pragn urozmaicenia

Trendy w sztuce projektowej czsto wpywaj na rwnolege dziedziny. Tak byo rwnie
z popularn technik zwan polygon art polegajc na upraszczaniu obrazu poprzez
tworzenie siatki jednobarwnych wieloktw, najczciej trjktw20. Daje to wraenie
uproszczonej trjwymiarowej bryy jednoczenie wpisujc si we flat design.
Technika ta wykorzystywana jest z powodzeniem w ostatnich latach rwnie w projektowaniu
stron internetowych. Podobnym przykadem jest coraz czstsze wykorzystywanie linii
skonych. Jzyk pisania witryn pozwala budowa j jedynie z prostoktnych moduw.
Wykorzystanie ci, rombw czy trjktw pozwala przeama ten schemat.

akaru.fr ilustracje skadajce si z wieloktw.

19. http://www.matthewmooredesign.com/almost-flat-design/
20. http://despreneur.com/20-examples-of-polygon-website-design/

14

Material Design

Nowoczesne przegldarki internetowe daj ogromne moliwoci uycia na stronie

internetowej animacji i skomplikowanych sposobw interakcji. W ostatnich latach
projektanci powicili duy nacisk na urozmaicenie wszechobecnego stylu flat design.

Z pomoc i now tendencj przyszo Google przedstawiajc material design2112 Projektanci

Google pragnli stworzy jzyk projektowania, ktry poczy klasyczne podstawy z innowacj
i moliwociami nowych technologii.

Przykad material design na witrynie Google Plus

Jego podstawa to powierzchnia, wiato i ruch. Opiera si on klasycznych zasadach

projektowania do druku. Wyrane kolory, dua typografia i ikonografia, zamierzone biaa
przestrze i zdjcia wypeniajce aple wykorzystane s w celu uatwienia dziaa
uytkownika.
Wszystkie jego elementy to okrelone samodzielne powierzchnie, ktre ograniczaj
wywietlanie na nich materiaw. Jedyn cech trjwymiarowoci jest gboko pooenia
danej apli.

21. http://www.google.com/design/spec/material-design/introduction.html

15

Cech charakterystyczn i jego najwaniejsz innowacj jest jednak uycie wyranych

animacji odpowiadajcych na dziaanie osoby korzystajcej ze strony. Zmiany stanu strony
i jej elementw dziki nowoczesnej technologii mog by subtelne, pynne i wykorzystuj
asymetryczne przypieszenie i zwalnianie znane z klasycznej sztuki animacji.

Nacisk na animacj
Animacja to ju nie tylko ciekawostka dla projektantw stron internetowych, ale to
podstawa efektywnego projektowania interakcji. Pozwala witrynie nada ycie. Daje rwnie
uytkownikowi poczucie obcowania z realnym przedmiotem. Tak jak w przypadku
prawdziwego wiata kada akcja powinna wywoa okrelon reakcje. W dobie flat design
projektanci mocno ograniczeni rodkami stylistycznymi prbuj j wykorzysta, aby nada
interfejsowi walor prawdziwoci22.13
W 2015 roku animacja wykorzystywana jest w okrelonych celach. Pierwszym z nim jest
animacja elementw interfejsu. Pozwala ona uytkownikowi pozna jego akcj jak np.
kliknicie odnonika. Przykadem jest tutaj zmiana ta przycisku, rozpywajce si koo po
klikniciu, pojawienie si dodatkowego menu lub okna czy rozszerzenie danej apli, aby
uatwi czytelno. Praktycznie kada nowoczesna strona posiada nawigacj, ktra pynnie
zmniejsza si, po przejechaniu w d, aby odsoni tre witryny

Animacja opowiadajca histori na stronie akcji PZU

22. http://www.webdesignerdepot.com/2015/05/the-ultimate-guide-to-web-animation/

16

Kolejnym przykadem jest animacja oczekiwania na zaadowanie strony lub danego

elementu. Mimo rozwoju technologii i duego postpu w przepustowoci cz internetowych
zaadowanie skomplikowanej grafiki lub video trwa. W celu uzmysowienia uytkownikowi,
e strona istnieje I nie nastpi aden bd wywietlona zostaje animowana ikona sugerujca
adowanie. Najpopularniejszym rodzajem tego typu animacji jest krcce si koo czy
klepsydra znana z systemu Windows. W ostatnich kilku latach projektanci staraj si jednak
urozmaici ten element. Skomplikowane zmieniajce ksztat figury geometryczny, paski
adowania w postaci ciekawych ksztatw s niewielk tylko czstk przykadw
kreatywnego podejcia do tematu.

Jeszcze innym rodzajem wspominanym ju przez autora niniejszej pracy jest animacja
wykorzystana do opowiadania historii. Nie dziaa ona zazwyczaj na zasadzie kreskwki, ale
jest odpowiedzi na dziaanie uytkownika jak np. przewijanie strony czy kliknicie w link.
Przykadem moe by tutaj skadanie si produktu czy elementu na oczach internauty
wywoane przewijaniem w d czy charakterystyczna podr przez tras zoon
z elementw strony. Motyw ten wykorzystao PZU na stronie akcji Kochasz? Powiedz STOP
wariatom drogowym Widziany z gry samochd podczas przewijania przejeda drog
mijajc niebezpieczne sytuacje i pokazujc jak kierowca powinien si zachowa.

Animacja uyta jako rodek stylistyczny na stronie agencji Bright Media

Co raz czciej uywa si animacji wycznie w celach stylistycznych i ozdobnych. Przykadem

moe by tutaj strona internetowa polskiej agencji Bright Media nagrodzona wieloma
nagrodami jak aWWWards SITE of the DAY czy FWA SITE OF THE DAY. Jest ona wrcz
oboona animacj przej, figur geometrycznych czy ta z efektem paralaksy.
17

Ciekawostk mog by tutaj tak zwane easter eagi wywoujce okrelon animacj po
wpisaniu danego kodu na klawiaturze lub innego nieznanego szerszej publicznoci dziaania.
Tradycj w ostatnich latach wrcz stao si wykorzystywanie kodu Konami znanego dawniej
z gier tej firmy. Wcinicie strzaki w gr, w gr, w d, w d, lewo, prawo, lewo, prawo, B,
A na angielskiej witrynie Wired.co.uk wywoa animacj Nyancat, znanej internetowej
maskotki23.14

Zasada Above the Fold ju nieaktualna

Zasada Above the Fold pochodzca od umieszczania wanych nagwkw i artykuw ponad
zgiciem pierwszej strony gazety w webdesignie oznaczaa umieszczanie jak najwikszej
iloci wanej treci w powierzchni widocznej bez potrzeby przewijania31.

Jakob Nielsen w 2006 roku w ksice Prioritizing Web Usability przedstawi wyniki swoich
bada pokazujce, e tylko 23%24 uytkownikw przewija strony internetowe. Oznaczaoby
to, e a 77% czyta wycznie tekst znajdujcy si na pierwszym ekranie.
Bardzo duo projektantw do tej pory stosowao t zasad. Jednak jest ona ju nie aktualna,
bo uytkownicy w 2015 nauczyli si przewija strony internetowe. Kolejnym powodem
oprcz adaptacji ludzi jest przymus wywietlania witryn na wielu urzdzeniach.

Strona polskiej agencji reklamowej Ars Thanea

Zmniejszy si rwnie czas, jaki uytkownik spdza na stronie. Badania wykazuj, e

waciciele witryn maj tylko okoo 15 sekund25 na zaciekawienie uytkownika. W ostatnich
23. http://konamicodesites.com
24. Prioritizing Web UsabilityHoa Loranger and Jakob Nielsen, 2006, ISBN-10: 0-321-35031
25. http://www.smashingmagazine.com/2009/09/24/10-useful-usability-findings-and-guidelines/

18

latach wikszo stron firmowych i wizytwek traktuje pierwszy ekran jako zajawk tego, co
znajduje si dalej. Dominuje wrcz minimalistyczna dua typografia z krtkim opisem
i zdjcie lub film w tle.

Przykadem mog by tutaj strony agencji reklamowych. Nowa strona internetowa

najbardziej uznanej i znanej polskiej agencji reklamowej Ars Thanea na widocznym obszarze
pokazuje tylko logo, animacj prac i podpis Reklama i produkcja, Witryna programu Spotify
to tylko duy napis Muzyka na teraz zdjcie telefonu i Call to Action wywoujce pobranie
aplikacji. Ca reszta informacji znajduje si poniej widocznej czci strony,

One Page
One Page to projektowanie witryny jako pojedynczej strony, gdzie
caa tre dostpna jest z poziomu przewijania.

W 2015 roku, w czasach jak najwikszego upraszczania

stylistycznego projektu i wszechobecnego minimalizmu, jest ona
coraz popularniejsza. Jedyne, co musi wiedzie uytkownik aby
nawigowa po takiej witrynie, to w jaki sposb przewija. Internauta
nie ma problemw ze znalezieniem poszukiwanej informacji
w skomplikowanej hierarchii nawigacji. Przemieszczanie si po takiej
stronie zazwyczaj ogranicza si do strzaek i odnonikw do danej
sekcji. Ten rodzaj projektowania uatwia rwnie tworzenie
i obsug witryny ze wzgldu na domyln responsywno takiego
rozwizania.
One Page pomaga we wspominanym wczeniej opowiadaniu historii
gdzie uytkownik przewijajc zarzdza czasem i zmienia okrelon
animacj.

Wedug Ambera Leigh Turner, dyrektora kreatywnego i waciciela

agencji reklamowej, wikszo wspczesnych stron internetowych
jest statystycznie dusza i wymaga duszego przewijania26.15
Dobrym przykadem tego typu strony jest prezentacja ostatniego
telefonu od firmy Apple iPhone 6. W przeciwiestwie do
poprzednich urzdze jego przedstawienie znajduje si na jednej
bardzo dugie stronie. Wynika to rwnie z faktu odrzucenia przez
projektantw firmy Apple zasady Above the Fold.

26. http://www.webdesignerdepot.com/2014/12/how-to-design-the-perfect-single-page-website/

19

Elementy

Strona internetowa suca przede wszystkim przekazaniu informacji skada si

z podstawowych i wymaganych dla niej elementw. Oprcz treci pisanej, zdj czy filmw to
rwnie elementy interaktywne nawigacji czy elementy ozdobne. W czasach komercjalizacji
rwnie wane jest promowanie witryny poprzez wszechobecne social media i danie
uytkownikowi moliwoci podzielenia si dalej dan informacj. Wszystkie te elementy
musz zosta podporzdkowane stylistycznie danemu projektowi.

wiato

Wszystkie skadowe strony internetowej musz by uporzdkowane. Jednym

z najwaniejszych narzdzi projektowania jest wiato pusta przestrze oddzielajca
elementy projektu od siebie27. To wiato sprawia czy witryna jest czytelna, lekka
i minimalistyczna. Dzisiaj projektanci uywaj duo wicej wiata w WWW ni kiedy.
Odrzucenie zasady Above the Fold pozwolio odetchn i nie uciska wszystkich elementw
blisko siebie.

Prezentacja iPhone 6

Dobrym przykadem spopularyzowanego uycia wiata jest strona firmy Apple, gdzie
odlegoci zdj produktu od siebie s tak due, e uytkownik nie widzi ich w jednym
momencie na ekranie. Najbardziej charakterystycznym objawem tego trendu s
interaktywne listy utworw w odtwarzaczu internetowym Spotify, gdzie odlegoci midzy
tytuami piosenek zwikszyy si ponad dwukrotnie przy ostatnim odwieeniu wygldu tej
strony.
16

27. http://designshack.net/articles/layouts/10-crucial-elements-for-any-website-design/

20

Typografia

W 2006 roku Oliver Reichenstein, waciciel agencji Information Architekt, powiedzia, e

webdesign to w 95% typografia28.17Jako, e tekst jest wci podstawowym nonikiem
informacji w Internecie trudno si z tym nie zgodzi. Typografia to sztuka uywania tekstu w
sposb czytelny I dobrze wygldajcy. W ostatnich latach, dziki rozwojowi technologii,
projektanci nie musz w Internecie uywa ju wycznie czcionek Ariala czy Verdany, ale
maj dowolno w stosowaniu kroju pisma.
W 2015 roku projektanci
minimalistycznego kroju
przyciemnionym tem,
Charakterystyczn cech
rodka ekranu

osignli efekt czytelnoci przede wszystkim zwikszajc rozmiar

pisma. Tytuy i nagwki zaczy znacznie dominowa nad
czasem wrcz pozbywajc si zupenie zdj i filmw.
wspczesnych stron jest wyrwnanie gwnego nagwka do

witryna blossomtype.com

Ciekawym zjawiskiem jest rwnie technika uywania i mieszania zrnicowanych krojw

pism. Technika ta, znana z popularnych T-shirtw, goci ostatnimi czasy rwnie na stronach
internetowych. Kroje bez szeryfowe czsto poczone z odrcznymi wyrywaj si z trendu
minimalizmu. Ciekawym przykadem tego zjawiska jest strona jacquico.com z du
skomplikowan i animowan typografi

28. https://ia.net/know-how/the-web-is-all-about-typography-period

21

Video ta

Due zdjcia na ca wielko ekranu ju dawno stay si podstawowym zabiegiem

stosowanym w projektowaniu stron internetowych29.18Aby urozmaici i odrni wygld
projektanci wykorzystuj technologi pozwalajc natywnie uywa filmw, jako ta strony.
Film jest najlepszym sposobem na przycigniecie uwagi, co pozwala zatrzyma uytkownika
duej na witrynie i potencjalnie zrealizowa cel marketingowy. Animacja taka ze wzgldu na
swj rozmiar nie przekracza jednak kliku sekund I jest czsto zaptlona.

Jednym z ciekawszych stron z uyciem tej technologii i zarwno wyjtkiem, jeli chodzi o
dugo uytego filmu, jest witryna 24hoursofhappy.com. To teledysk do muzyki Pharrella
Williams pod tytuem Happy Pokazuje ona w tle 24 godziny materiau filmowego zalenego
od pory dnia u uytkownika.
Kolejnym przykadem moe by strona filmu Life of Pie uywajca urywkw filmu jako ta
czy strona firmy Black Negative uywajca animacji w tle w celu wytworzenia zamierzonej
atmosfery.

Nawigacja

Weber - BBQ Cultures z wykorzystanie elementw video jako to

Chyba najwaniejszym I krytycznym elementem kadego interfejsu oprcz samej treci jest
nawigacja odpowiedzialna za poruszanie si po stronie. W 2015 roku dominuje nawigacja
umieszczona na grze witryny. Tradycyjnie, aby jej uy, uytkownik musia przewin ca
stron do gry.

29. http://www.hongkiat.com/blog/fullsize-video-background-websites/

22

Rozwizaniem stao si przyklejenie belki nawigacji do grnej krawdzi ekranu. Wedug

bada Hyrum Denney, specjalisty od User Experience, przyklejone menu obsuguje si 22%
szybciej30,19a wszyscy badani uwaali to za lepsze rozwizanie.
Udoskonaleniem tej metody nawigacji jest animacja i zmniejszenie je obszaru przy
przewijaniu w d czy ciekawe rozwizanie znane z aplikacji firmy Google gdzie nawigacja
pojawia si tylko, gdy uytkownik zacznie przewija stron do gry.

Projektanci jednak wci szukaj oryginalnych I lepszych rozwiza. Strona firmy Made in
Hous stosuje ukryt animacj wyjedajc z lewej strony ekranu. Cz stron rezygnuje
z niej zupenie jak strona Foundationsix zostawiajc jedynie Call to Action na dole pierwszego
ekranu.

rosewaterfilm.com wykorzystuje oryginaln nawigacj

Problemem nawigacji horyzontalnej jest jej dua szeroko. Powoduje to due problemy na
urzdzeniach mobilnych. Rozwizaniem stao si chowanie jej pod charakterystyczn ikon
hamburger.

Spopularyzowanym elementem nawigacji na stronach One Page jest rwnie oznaczenie,

zazwyczaj po prawej stronie ekranu, w ktrej sekcji bd, na ktrym slajdzie znajduje si
aktualnie uytkownik strony.

30. http://www.smashingmagazine.com/2012/09/11/sticky-menus-are-quicker-to-navigate/

23

Przyciski Call to Action

Pierwszy ekran witryny internetowej to w dzisiejszych czasach czsto tylko animowane to,
dua typografia i przyciski Call to Action wanie. Strony internetowe su przede wszystkim
zarabianiu pienidzy i, aby to uczyni, trzeba wywoa I zachci uytkownika do wykonania
okrelonej akcji. Suy do tego CTA najczciej w formie przycisku. Nie zalenie czy chodzi
o pobranie aplikacji, rejestracj w serwisie czy tylko zostawienie swoich danych
korespondencyjnych jest to najwaniejszy element dla waciciela strony.

Pierwszym problemem z dobrze zaprojektowanym Call to Action jest obecny trend flat
design, ktry utrudnia stworzenie atrakcyjnego i wybijajcego si przycisku zachcajcego do
kliknicia. Najczstszym rozwizaniem jest tutaj uycie wyranej kontrastujcej kolorystyki
jak na stronie odtwarzacza muzyki Spotify.com. Czsto stosowanym sposobem jest rwnie
stosowanie ikonografii strzaek.

ana-flightconnections.com i charakterystyczny dzisiaj przycisk CTA

Bardzo wyranym trendem jest dzisiaj tak zwany Ghost Buttons czyli przyciski z kolorow
zaokrglon obwdk i z przezroczystym tem. Przykadem moe by tutaj strona programu
graficznego Sketch gdzie obok kontrastujcego kolorystycznie paskiego przycisku
zachcajcego do zakupu umieszczony jest Ghost Button pozwalajcy pobra wersj testow
programu.
Paradoksalnie, im bardziej skomplikowany i atrakcyjny przycisk, tym bardziej uytkownicy
myl go z reklam. Wedug danych z 2013 roku 86% internautw wykazuje objawy tak
zwanej lepoty banerowej31.20Znaczy to tyle, e ich umys ju nie reaguje i nie zauwaa
reklam internetowych.

31. http://www.adotas.com/2013/03/study-86-of-consumers-suffer-from-banner-blindness/

24

Pokaz slajdw i przewijanie w poziomie

Penoekranowe szczegowe zdjcia robi na uytkowniku due wraenia i wpisuj si
w trend minimalistycznego projektowania. Problem polega na tym, e zajmuj ca
powierzchnie ekranu. Rozwizanie stay si popularne w ostatnich latach karuzele
pozwalajce przesuwa slajdy za pomoc strzaek lub intuicyjnego gestu przecignicia
palcem po ekranie urzdzenia mobilnego.

Przykadem moe by tutaj strona agencji Tokyo.uk prezentujca najciekawsze swoje dokonania na
kadym slajdzie.

Ciekaw odmian tego zjawiska s pojawiajce si w ostatnich czasach strony przewijane

w poziomie. Najgoniejsz tego typu witryn by MySpace i jego przeprojektowanie w 2014
roku. Podobnie dziaa strona polskiej agencji reklamowej K2, z tym, e tutaj przewijanie
nastpuje automatycznie po zblieniu kursora do krawdzi przegldarki. Przewijanie
horyzontalne wie ze sob jednak due problem z uytecznoci i w 2015 roku, mimo wielu
swoich naladowcw, witryna MySpace zrezygnowaa z tego pomysu.

Paralaksa

Paralaksa to rnica w widocznej pozycji obrazw ogldanych z rnych ktw widzenia.

Odnosi si w szczeglnoci do innego przesunicie obiektu w oczach obserwatora zalenie
od odlegoci. Mwic prociej element na pierwszym planie przesuwa si szybciej ni np.
to. Efekt ten jest bardzo czsto wykorzystywany w ostatnich latach w projektowaniu
interesujcych stron internetowych, szczeglnie stworzonych we wspomnianym wczeniej
trendzie One Page. Wykorzystanie paralaksy pozwala nada przestrze witrynie i nagrodzi
uytkownika za przewijanie.
25

Ciekawym przykadem paralaksy jest strona browserawarenessday.com, ktrej plany ta przesuwaj

si zalenie od horyzontalnej pozycji kursora niczym w grach komputerowych.

Styl metro czyli kafelki

Gdy w 2010 roku firma Microsoft przedstawia swj interfejs Metro (znany dzisiaj jako
Modern UI) nikt nie spodziewa si, jakiej popularnoci nabierze jego najbardziej
charakterystyczna rzecz kafelki. Projektowanie strony poprzez uywanie do tego moduw
jest dzisiaj bardzo popularne. Najwiksze polskie portale stosuj kafelki do prezentowania
wiadomoci ze zdjciem.

Najbardziej znanym przykadem stylu metro jest prawdopodobnie Pinterest. Strona ta pozwala
uytkownikom przypina zdjcia do ich tablic w postaci moduw.

26

Integracja social media

Ostatnie 5 lat to dominacja mediw spoecznociowych w Internecie. ycie danej marki

on-line nie toczy si ju tylko na jej stronie internetowej, ale rwnie w social media32.21

To na Facebooku, Pinterecie czy Twitterze nastpuje komunikacja z fanami i klientami danej

firmy lub danego produktu. Strony internetowe zostaj przede wszystkim wizytwk. O ile
nie oferuj one sprzeday danego produktu to d do przekazaniu ruchu uytkownikw do
mediw spoecznociowych. Std w ostatnich latach nastpia bardzo dua integracja social
media. Uytkownicy, a przede wszystkim wydawcy witryny internetowej, nie wyobraaj jej
sobie bez znanych wszystkim przyciskw Lubi to. Najpopularniejszym obecnie trendem
jest dzielenie si samych uytkownikw odnonikiem do strony poprzez dan akcj.

Przykadem omawianej integracji jest strona internetowa batonu Kit Kat givehollandabreak.d.shcc.nl,
ktra za kade podzielenie si na portalach spoecznociowych przesuwa wirtualn posta o jeden
kilometr na wirtualnej mapie.

Ciasteczka

Ciasteczka to pliki I informacje, ktre strona internetowa przetrzymuje na komputerze w celu

zapamitania jego wczeniejszych wyborw i akcji, takich jak np. zalogowanie si. W 2013
roku Unia Europejska wprowadzia przepis nakazujcy wszystkim witrynom dziaajcym na
jej terenie wywietlania ostrzeenia i informacji o obecnoci tego typu plikw33.
32. http://www.cio.com/article/2387878/online-marketing/6-ways-to-add-social-media-to-your-web-design.html
33. http://www.computerweekly.com/opinion/The-new-EU-cookie-rule-so-we-need-to-get-consent-then

27

By to do duy problem dla projektantw szczeglnie w czasach minimalizmu w Internecie.

Twrcy jednak wci wpadaj na kreatywne rozwizania tego problem.

Ikonografia

Ikonografia i piktogramy peni wan role w graficznej komunikacji. Wspieraj pokazywanie

uytkownikowi jakiej reakcji moe oczekiwa po klikniciu. Peni te rol ilustracyjn.

Z powodu rnorodnoci rozdzielczoci i wielkoci wywietlaczy wektorowe ikony stay si

bardzo czsto uywanie. Przy zmianie rozmiarw wektorowe ikony nie trac na jakoci.
Popularnym rozwizaniem stosowanym w projektach stron internetowych s ostatnio
kolumny tekstu ilustrowane symbolami.

Strona jardins-poudriere.ch uywa ikonografii do uatwienia nawigacji

404

Ciekawym elementem pozwalajcym projektantom wykaza si kreatywnoci ze wzgldu

na rzadko jego wywietlania jest strona bdu 404. Oznaczenie 404 oznacza bdne cze i
brak moliwoci odnalezienie danej podstrony na serwerze.

Interesujc podstron wywietlajc bd 404 jest ta prezentowana na kontrowersyjnie

przeprojektowanej witrynie Bloomberg.com. Nawizuje ona do dawnej mody na
wywietlanie niskiej jakoci animacji w formacie GIF. Animacja ukazuje pracownika
zrzucajcego stary komputer ze swego biurka.

28

Problemy wspczesnych projektantw

Omawiajc tendencje w projektowaniu stron internetowych trudno nie wspomnie

o problemie podobiestwa wikszoci witryn. Ciko nazwa to plagiatem. Z drugiej strony
tak przejawiaj si skutki powszechnego denia do minimalizmu.

Efekt Behance Powtarzanie trendw i schematw

Projektanci maj to do siebie, e chc si pochwali swoj prac. Jednym z popularnych
portali prezentujcych ich prace jest Behance. To wanie tam rodz si tendencje
w projektowaniu. Ludzie widz, e projekt podoba si innym i inspiruj si nim w nastpnym
zleceniu. Flat Design spowodowa, e wikszo projektw staa si niemal identyczna.

Mozaika stworzona przez Tima Caynes

29

Znany projektant Tim Caynes wypowiedzia si na ten temat zamieszczajc w mediach

spoecznociowych mozaik niemal identycznych stron rnych agencji reklamowych
z komentarzem: Oto kilka piknych agencyjnych stron, ale (my projektanci) moemy
zmierza w naszym projektowaniu do jednolitoci (stron)34.22
Kolejnym problem wpywajcym na monotoni wspczesnych witryn s zyskujce na
popularnoci rynki motyww do wspomnianych wczeniej systemw zarzdzania treci jak
Wordpress czy Joomla. Dziki nim twrca nie musi od podstaw projektowa nowej strony dla
nastpnego klienta. Wystarczy, e za cen do 50 dolarw zakupi skrk, aby nastpnie
zmieni kolory, tekst i zdjcia. Z powodu minimalizmu stylistycznego nie sposb odrni
tego typu odtwrczych projektw od projektw oryginalnych.

Prognozy na nastpne lata

Pozostaje zawsze aktualne pytanie jak bdzie wyglda strona internetowa w przyszoci?
Jakie tendencje projektowe powstan w najbliszych latach? Czy po flat designie nastpi
powrt w stron Skeuomorphic Design? Autor niniejszej pracy zada to pytanie
reprezentatywnym przedstawicielom z rnych dziedzin projektowania do internetu.
Szymon P. Peplinski, CTO/ Head of Creative Technology w DDB&tribal Warszawa:
Moim zdaniem gwnym wyzwaniem staje si projektowanie mdrych produktw i usug dla
starzejcych si spoeczestw uwzgldniajcych potrzeb dostosowywania rozwiza do
potrzeb rynkw globalnych. Wzrost dugoci ycia i migracja z maych miast do kilku duych
orodkw dajcych prac zdeterminuj oczekiwania konsumentw.

Tomasz akomy, Front End Developer w STX Next

Moim zdaniem powrci troch zapomniany teraz nurt "Internet of things" - ilo ekranw,
na ktre projektowane s strony www wzronie o ekrany lodwek, telewizorw,
wywietlaczy w samochodach, etc.. Sam responsive design nie zaatwi sprawy, strona
amazon.com projektowana pod wywietlacz zamontowany na lodwce musi/powinna
oferowa zupenie inny UX ni ta sama strona pod tablet (mimo podobnej rozdzielczoci
ekranu). W cigu 5 lat powinien zosta take wyeliminowany problem kompatybilnoci
wstecznej z IE8, a ponadto flash przestanie by wykorzystywany gdziekolwiek (i dobrze) pozwoli to na zdecydowane przypieszenie zarwno szybkoci projektowania jak i dziaania
samych stron www.

34. https://twitter.com/timcaynes/status/554593526034731008/photo/1

30

Bibliografia
1. http://blog.uxpin.com/tag/user-experience-2/page/2/
2. http://blogs.adobe.com/conversations/2011/11/flash-focus.html
3. http://bluelimemedia.com/2010/04/15/is-wordpress-killing-web-design/
4. http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.304.2601&rep=rep1&type=pdf
5. http://code.tutsplus.com/articles/top-10-most-usable-content-management-systems--net-6493
6. http://codepen.io/collection/HtAne/
7. http://designmodo.com/large-typography-web-design/
8. http://designshack.net/articles/layouts/10-crucial-elements-for-any-website-design/
9. http://designshack.net/articles/layouts/2014-will-be-year-of-parallax/
10. http://designshack.net/articles/layouts/popular-web-design-trends-in-2011-over-50-inspiring-examples/
11. http://despreneur.com/20-examples-of-polygon-website-design/
12. http://edwardsanchez.me/blog/13568587
13. http://googleblog.blogspot.com/2014/03/on-25th-anniversary-of-web-lets-keep-it.html
14. http://happycog.com
15. http://html5hub.com
16. http://inside.envato.com/2015-predictions-for-web-design/
17. http://konamicodesites.com
18. http://money.cnn.com/2011/11/10/technology/adobe_flash/
19. http://networkeddigital.com/2010/04/09/definicja-web-2-0-definicja-social-media/
20. http://news.microsoft.com/stories/design/
21. http://sachagreif.com/flat-pixels/
22. http://thenextweb.com/dd/2014/03/19/history-flat-design-efficiency-minimalism-made-digital-world-flat/2/
23. http://thenextweb.com/dd/2015/01/02/10-web-design-trends-can-expect-see-2015/2/
24. http://time.com/12933/what-you-think-you-know-about-the-web-is-wrong/
25. http://tympanus.net/codrops/2011/02/27/25-examples-of-interesting-and-beautiful-navigation/
26. http://up-kancelarie.pl/gdzie-konczy-sie-inspiracja-a-zaczyna-plagiat-odpowiedzialnosc-cywilna-i-karna-za-plagiat/
27. http://usabilitygeek.com/horizontal-scrolling-user-experience-best-practices/
28. http://webdesign.tutsplus.com/articles/are-stock-templates-good-or-bad-for-web-designers--webdesign-300
29. http://webdesign.tutsplus.com/articles/skeuomorphism-in-interface-design--webdesign-7638
30. http://webdesign.tutsplus.com/articles/the-state-of-web-design-trends-2011-annual-edition--webdesign-1610
31. http://webdesignledger.com/trends-2/web-design-trends
32. http://webmarketingtoday.com/articles/112064-8-Design-Trends-for-2014/
33. http://webroad.pl/webdesign/3605-responsive-design-vs-adaptive-design
34. http://www.adotas.com/2013/03/study-86-of-consumers-suffer-from-banner-blindness/
35. http://www.awwwards.com/10-web-design-trends-for-2013.html
36. http://www.awwwards.com/18-excellent-websites-created-with-big-fonts.html
37. http://www.awwwards.com/current-state-and-the-future-of-html5-games.html
38. http://www.awwwards.com/websites/social-media/
39. http://www.cio.com/article/2387878/online-marketing/6-ways-to-add-social-media-to-your-web-design.html
40. http://www.computerweekly.com/opinion/The-new-EU-cookie-rule-so-we-need-to-get-consent-then
41. http://www.creativebloq.com/industry-trends/15-top-web-design-and-development-trends-2012-1123018
42. http://www.creativebloq.com/web-design/vertical-scrolling-trends-2015-121413698?page=1
43. http://www.dailytech.com/Windows+8+Designer+Metro+is+the+Antithesis+of+a+Power+User/article34354.htm
44. http://www.designyourway.net/drb/how-the-web-design-trend-of-parallax-scrolling-has-faded/
45. http://www.google.com/design/spec/material-design/introduction.html
46. http://www.hongkiat.com/blog/fullsize-video-background-websites/
47. http://www.hongkiat.com/blog/fullsize-video-background-websites/
48. http://www.hongkiat.com/blog/web-design-trend-2012/
49. http://www.hongkiat.com/blog/web-design-trend-2013/
50. http://www.hongkiat.com/blog/web-design-trends-2014/
51. http://www.itu.int/en/ITU-D/Statistics/Pages/facts/default.aspx
52. http://www.jbrains.ca/permalink/the-four-elements-of-simple-design
53. http://www.livetech.co.uk/eu-cookie-law
54. http://www.magazinehive.com/2013/09/metro-web-design-inspiration/
55. http://www.matthewmooredesign.com/almost-flat-design/

31

56. http://www.netvalley.com/intvalnext.html
57. http://www.oreilly.com/pub/a/web2/archive/what-is-web-20.html
58. http://www.smashingmagazine.com/2007/10/15/the-showcase-of-big-typography/
59. http://www.smashingmagazine.com/2009/03/09/slideshows-in-web-design-when-and-how-to-use-them/
60. http://www.smashingmagazine.com/2009/09/24/10-useful-usability-findings-and-guidelines/
61. http://www.smashingmagazine.com/2010/05/04/web-design-trends-2010/
62. http://www.smashingmagazine.com/2010/09/07/showcase-of-interesting-navigation-designs/
63. http://www.smashingmagazine.com/2012/09/11/sticky-menus-are-quicker-to-navigate/
64. http://www.smashingmagazine.com/2013/07/11/innovative-navigation-designs/
65. http://www.techhive.com/article/243529/the_beginning_of_the_end_of_adobe_flash_player.html
66. http://www.tomaszbobrus.info/?p=1452
67. http://www.w3.org/Consortium/
68. http://www.w3schools.com/browsers/browsers_mobile.asp
69. http://www.webdesignai.com/flat-design-history/
70. http://www.webdesignerdepot.com/2014/05/responsive-vs-adaptive-webdesign-which-is-best-for-you/
71. http://www.webdesignerdepot.com/2014/12/how-to-design-the-perfect-single-page-website/
72. http://www.webdesignerdepot.com/2015/05/the-ultimate-guide-to-web-animation/
73. https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/
74. https://file.wikileaks.org/file/iphone-sdk-agreement.pdf
75. https://support.apple.com/en-us/HT202471
76. https://uxmag.com/articles/does-skeuomorphic-design-matter
77. https://www.butterfly.com.au/thinking/blog/entry/website-icons
78. https://www.google.com/chromebook/
79. https://www.newfangled.com/beware-homepage-slideshow/
80. MOBILE BOOKOF TRENDS 2014, Uxpin
81. On Web Typography, Jason Santa Maria
82. Prioritizing Web Usability, Hoa Loranger and Jakob Nielsen, 2006, ISBN-10: 0-321-35031-6
83. Redesign The Web. Smashing Magazine, Opracowanie zbiorowe, Helion
84. Spoeczna Historia Mediw. Od Gutenberga do Internetu, Burke Peter, Briggs Asa
85. The Smashing Book #1. Edycja polska, Opracowanie zbiorowe, Helion
86. WEB DESIGNBOOK OF TRENDS, Ux Pin

32