1

Wydział Sztuki Nowych Mediów Kierunek Grafika

Wizualizacja

Piotr Parys (FB, WWW) Nr albumu s6681

Praca licencjacka

Aplikacja mobilna „SuperBohater”

dr Małgorzata Bałdyga promotor główny mgr inż. Marcin Wichrowski promotor techniczny

Tendencje w projektowaniu stron www w latach 2011-2015

dr Marzena Królikowska-Dziubecka promotor pracy teoretycznej

Warszawa, czerwiec 2015

2

Spis treści

1.) Wstęp i cel pracy 2.) Technologia

Koniec technologii Adobe Flash HTML 5

3.) Era treści CMS Treść tworzona przez użytkowników Opowiadanie historii

4.) Urządzenia Strona internetowa to aplikacja Strony adaptacyjne Strony responsywne

5.) Założenia ogólne Flat design – wszechobecny minimalizm Skeuomorphic Design przestaje być modny Skeuominimalism – najlepsze cechy z dwóch światów Polygon Design – projektanci pragną urozmaicenia Material Design Nacisk na animację Zasada Above the Fold już nieaktualna One Page

6.) Elementy Światło Typografia Video tła Nawigacja Przyciski Call to Action Pokaz slajdów i przewijanie w poziomie Paralaksa Styl metro czyli kafelki Integracja social media Ciasteczka Ikonografia 404

7.) Problemy współczesnych projektantów Efekt Behance – Powtarzanie trendów I schematów

8.) Prognozy na następne lata 9.) Bibliografia

1 2 3 4 5 6 7 8 9

10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

3

Wstęp i cel pracy W erze upadku mediów analogowych jak telewizja czy prasa to Internet jest nośnikiem informacji, rozrywki oraz środkiem komunikacji. Już ponad 3 miliardy ludzi1, prawie połowa populacji naszego globu, posiada do niego dostęp. W 1989 roku Tim Berners-Lee, naukowiec komputerowy w CERN zaproponował swojemu przełożonemu „sieć notatek z odnośnikami pomiędzy nimi”2. W 1990 napisał pierwszą przeglądarkę i edytor. W 1993 roku po wielu naciskach CERN zadeklarował, że technologia ta będzie dostępna na zawsze bez opłat licencyjnych. I tak, wiele tysięcy ludzi zaczęło pracować razem, aby stworzyć ogólnodostępną sieć ułatwiającą wymianę informacji między użytkownikami komputerów. WWW, czyli World Wide Web (światowa szeroka sieć) początkowo służyła jedynie celom naukowym i komunikacji między uczelniami3. Gdy dostęp do sieci stawał się większy ludzie zaczęli dzielić się między sobą wiedzą i informacjami pro bono. Niestety, wraz z rozwojem Internet tracił swoją pierwotną naturę i zaczął zmierzać w stronę komercjalizacji. Powstały ogromne, warte miliardy dolarów firmy, jak Google oferujący wyszukiwanie informacji, ale również zbierające prywatne dane użytkowników w celach komercyjnych i oferujące na sprzedaż powierzchnie reklamowe. Internet to globalna sieć stworzona z setek milionów komputerów mogących komunikować się ze sobą. WWW to standard formatów tekstu, grafik, dźwięku, filmów, które mogą być łatwo zindeksowane i znalezione przez poszczególne urządzenia. Dzisiaj nie wyobrażamy sobie życia bez stron internetowych. Mamy do nich dostęp z komputerów, telefonów, tabletów czy nawet telewizorów. Najważniejszy jest jednak użytkownik, bo dla niego to wszystko powstało. Projektanci wciąż szukają nowych rozwiązań, aby ułatwić mu wymianę informacji, ale również, żeby dotrzeć skutecznie z reklamą komercyjną. W niniejszej pracy autor będzie omawiał trendy i zmiany, jakie nastąpiły w medium internetowym i podstawowym jego formacie, czyli stronie internetowej. Realizator niniejszej pracy licencjackiej od 5 lat pracuje w branży graficznej nowych mediów. W celu zawężenia spektrum czasowego i wykorzystania w pracy własnych doświadczeń omawiać będzie ostatnie lata, tj. okres od 2011 do 2015 roku. Z powodu dynamiki zmian, jakie następują w omawianym medium oraz jego dominacji nad tekstem drukowanym, źródłami są przede wszystkim artykuły, wypowiedzi i badania opublikowane w Internecie właśnie. 1 1. http://www.itu.int/en/ITU-D/Statistics/Pages/facts/default.aspx 2. http://googleblog.blogspot.com/2014/03/on-25th-anniversary-of-web-lets-keep-it.html 3. http://www.netvalley.com/intvalnext.html

4

Technologia Gdyby nie rozwój standardów i technologii Internet wyglądałby tak samo jak witryna CERN sprzed 26 lat. Ustanawianiem standardów pisania i przesyłu stron WWW zajmuje się World Wide Web Consortium zrzeszające 397 organizacji, firm, rządów i uczelni.42 WWW to nie tylko tekst, zdjęcia, filmy i dźwięk, ale również interakcja z użytkownikiem. To właśnie na interakcję z użytkownikiem położony jest nacisk w projektowaniu w ostatnich pięciu latach.

anakin.co – minimalistyczne podejście korzystające z nowoczesnych technologii Koniec technologii Adobe Flash Flash to technologia pomagająca tworzyć interaktywne animacje i wzbogacać wygląd strony internetowej. Stworzona przez firmę Macromedia ostatecznie została sprzedana gigantowi z dziedziny programów do edycji grafiki i filmów, firmie Adobe5. Flash działa jako zewnętrzna wtyczka to przeglądarki. Boom na ten sposób projektowania nastąpił pod koniec pierwszego dziesięciolecia XXI wieku. To dzięki niemu powstała w Internecie masa gier, aplikacji i animowanych reklam. Własny obiektowy język programowania Action Script 3 pozwalał tworzyć skomplikowane algorytmy i gry. Strony używające Flasha starając się być coraz bardziej urozmaicone i bogate rosły na wadze, co wymagało szybkich procesorów i wymiany dużej ilości danych. 4. http://www.w3.org/Consortium/ 5. http://www.techhive.com/article/243529/the_beginning_of_the_end_of_adobe_flash_player.html

5

Wraz z popularyzacją przeglądania witryn na smartfonach i urządzeniach mobilnych technologia będąca własnością firmy Adobe zaczęła chylić się ku końcowi. Najpopularniejszy multimedialny telefon iPhone zupełnie nie wspiera już tej technologii6. Samo Adobe przestało wydawać nowe wersję wtyczki na telefony z coraz popularniejszym systemem operacyjnym Android. Co raz więcej klientów w ostatnich latach zrezygnowało z zamawiania tego typu projektów, a większość programistów przerzuciła 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ę pozwalającą na wykorzystanie rich media w Internecie pojawiły się rozwiązania jak Canvas, WebGL lub WebAudio, które pozwalają tworzyć aplikacje działające w przeglądarkach internetowych szybciej i bez dodatkowych wtyczek73. To dzięki nim powstają bogate w wysokiej jakości dźwięk stereo i grafikę 3D skomplikowane strony działające zarówno na komputerach stacjonarnych jak i na urządzeniach mobilnych. Wsparcie W3C, wydawców przeglądarek czy również Adobe pozwala mieć nadzieję, że technologia ta będzie zyskiwać na popularności. Z pomocą języka Java Script strony internetowe w ostatnich latach zyskały responsywność, skomplikowane animacje i łatwość dodawania treści przez użytkowników.

run4tiger – wykorzystanie skomplikowanych algorytmów cząsteczek w projekcie HTML5 6. https://file.wikileaks.org/file/iphone-sdk-agreement.pdf 7. http://www.awwwards.com/current-state-and-the-future-of-html5-games.html

6

Era treści Strony internetowe od zawsze służyły przede wszystkim przekazywaniu i prezentowaniu informacji. W ostatnich pięciu latach z powodu zalewu ilości danych i stron nastąpił wzmożony rozwój narzędzi i sposobów zbierania oraz prezentowania wartościowych treści. Dobry tekst, niesamowite zdjęcia i filmy tworzą trzon współczesnej strony internetowej. Są ważniejsze niż układ czy ozdobniki graficzne. Projekt jest otoczką spajającą samą treść. CMS Współcześnie żadna strona internetowa nie obyłaby się bez CMS (Content Management Systems) – systemu zarządzania treścią pozwalających łatwo i szybko stworzyć potrzebną witrynę internetową oraz zapełnić ją wartościowym materiałem. Przykładem może być tutaj Wordpress. Jest to najpopularniejsza dzisiaj platforma stworzona początkowo do prowadzenia blogów, których układ (tytuł, data, zdjęcie, dłuższa zajawka, autor, czytaj więcej) na stałe zagościł w prezentacji aktualności na największych portalach. Z czasem platforma Wordpress znalazła zastosowanie również w większych projektach komercyjnych takich jak wizytówki firm i organizacji. Spopularyzowała ona również charakterystyczny styl oparty na popularnych motywach dostępnych do kupienia w Internecie. Inną znaną platformą służącą do tworzenia portali jest Joomla. Ze względu na swoje większe skomplikowanie nie zyskała ona jednak porównywalnej popularności.

Polygon – Charakterystyczny blogowy styl Vox Media opierający się o treść i jeden z trendów ostatnich lat, czyli dynamiczne nieskończone ładowanie treści przy przewijaniu bez stopki witryny

7

Treść tworzona przez użytkowników Jaki jest sens tworzyć oryginalną treść witryny, jeśli możemy do tego celu wykorzystać użytkowników? Cechą charakterystyczną współczesnych serwisów jest duża interakcja pomiędzy użytkownikami. Witryny takie cechuje tworzenie się wokół nich rozbudowanych społeczności94. Do tej grupy należą największe serwisy społecznościowe, jak Reddit, Facebook czy polski Wykop. Wymusiło to wiele charakterystycznych składowych w projekcie stron, jak ocenianie, dzielenie się w social media, wysyłanie treści czy systemy komentarzy. Są to elementy interaktywne znajdujące się na większości współczesnych witryn internetowych. Opowiadanie historii Opowiadanie historii to nowa skuteczna metoda komunikacji. Pomaga w identyfikacji użytkownika z prezentowaną usługą czy produktem. Równolegle to obowiązujący trend w reklamie, aby nie sprzedawać samego produktu, ale cały styl życia mu towarzyszący. Opowiadanie historii poprzez stronę internetową stało się bardzo popularne w ostatnich latach. Wykorzystywane są do tego duże zdjęcia pokazujące 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/

8

Przykładem jest np. prezentująca historię powstawania produktu czy pokazująca w postaci filmu przygody i stylu życiu towarzyszącemu piciu whisky na stronie blackramwhisky.com. Ciekawym rozwiązaniem jest strona linii lotniczych Swiss - world-of-swiss.com, gdzie wybierając dany rodzaj i etap opowiadania oglądamy historię w postaci filmu. Kolejną przykładem może być strona spaceneedle.com opowiadająca o wieży w Seattle poprzez animację wjazdu na nią. Ukazują się na niej najpierw informacje ogólne o mieście, potem o wieży, aby przejść w końcu do znajdującej się na jej szczycie komercyjnej atrakcji – restauracji.

warsawrising.eu – czyli opowiadanie historii powstania Warszawskiego poprzez stronę internetową Urządzenia Według Jeffreya Zeldmana dzisiaj jest ogrom urządzeń z szeroko różniącymi się możliwościami i stworzenie dobrego interfejsu działającego na nich wszystkich nigdy nie było tak wielkim wyzwaniem i tak trudne95 Strony internetowe przeglądane są nie tylko na komputerach stacjonarnych, ale również z użyciem telefonów komórkowych czy tabletów. Udział urządzeń mobilnych na świecie to w 2015 roku ponad 5%10. Jednak ze względu na charakterystykę i duży potencjał biznesowy ta właśnie grupa klientów jest dla wydawców bardzo istotna. Dla projektantów stron tworzy to poważny problem poprawnego wyświetlania treści na ekranach o odmiennej rozdzielczości i wielkości. 9. http://happycog.com 10. http://www.w3schools.com/browsers/browsers_mobile.asp

9

Dużym wyzwaniem dla projektantów stało się wprowadzenie przez firmę Apple komputerów z wyświetlaczem Retina o rozdzielczości często czterokrotnie większej niż tradycyjne monitory. Wymusiło to używanie zdjęć o dużej rozdzielczości i stosowanie elementów wektorowych, które podczas skalowania nie tracą na jakości. Z tego powodu również nastąpiła popularyzacja zamykania zdjęć w apli, wektorowych ikon i dużej typografii. Strona internetowa to aplikacja W czasach systemów operacyjnych jak Google Chrome OS, gdzie wszystkie aplikacje działają w przeglądarce11, technologia pozwala tworzyć bardzo funkcjonalne i skomplikowane witryny. Wymaga to położenia dużego nacisku na user experience, czyli łatwość i skuteczność korzystania z danego interfejsu przez użytkownika. Skorzystały na tym strony internetowe często korzystające z rozwiązań użyteczności i estetyki aplikacji mobilnych i projektów systemów operacyjnych jak iOS 7 czy Windows 8. Remy Sharp, programista JS, uważa, że przeglądarki są tak blisko platformy, na której działają, że pozwala to tworzyć skomplikowane gry i aplikacje działające poprzez strony internetowe. Osiągnięta przez nie wydajność nie pozwala już odróżnić ich od aplikacji natywnych.126

wellstoried.com – interaktywna mapa fanów Land Rovera, opowiadająca ich historię 11. https://www.google.com/chromebook/ 12. http://www.webige.com/tag/trends-in-web-design/

10

Strony adaptacyjne Pierwszym podejściem do rozwiązania problemu poprawnego wyświetlania treści na ekranach o odmiennej rozdzielczości i wielkości były strony adaptacyjne. Serwer wykrywał czy przeglądarka działa na urządzeniu mobilnym czy stacjonarnym oraz jaka jest rozdzielczość ekranu i wysyłał właściwy styl i wygląd strony do użytkownika. Problem pojawił się wraz z większym urozmaiceniem ekranów w sytuacji, gdy nowoczesne telefony miały często większą rozdzielczość wyświetlaczy niż monitory urządzeń stacjonarnych. Według wielu projektantów strona internetowa powinna być projektowana osobno na każdy rodzaj urządzenia i systemu. Użytkownik oczekuje innych zachowań korzystając z telefonu z systemem Windows Mobile niż ten używający komputera stacjonarnego z OSX.

Dashboard ENGIE-Tennis au Féminin w oknie przeglądarki i ta sam strona w formacie telefonu. Witrynę charakteryzuje też wyraźna kolorystyka, na którą trend zapoczątkował projekt systemu iOS 7 (Apple) Strony responsywne Obecnym standardem są strony responsywne. Projekt tego rodzaju płynnie dopasowuje się do urządzenia bądź rozmiaru okna przeglądarki13.7Szerokości kolumn, zdjęć i elementów określane są procentowo, nie zaś w zdefiniowanej ilości pikseli jak w przypadku stron adaptacyjnych. W przypadku wydłużenia jednego elementu następny płynnie zmienia pozycję tworząc uporządkowany projekt niezależnie od orientacji ekranu. Format ten wymusił stosowanie wielu charakterystycznych dziś elementów graficznych jak zdjęcia ograniczone aplą, płaski wektorowy wygląd przycisków i ikon czy wreszcie duża czytelna typografia. Responsywność stron internetowych to już właściwie więcej niż trend, to wymagany standard w obliczu rosnącej popularności urządzeń mobilnych. 13. http://webroad.pl/webdesign/3605-responsive-design-vs-adaptive-design

11

Założenia ogólne Trendy w projektowaniu stron w ostatnich latach opierają się na założeniach ogólnych, aby stronę uprościć na tyle, by była czytelna na małych wyświetlaczach, ale zarazem bogata w treści i na swój sposób oryginalna. Wiele z tych tendencji przedstawionych poniżej jest już standardem, a cześć z nich to, w ocenie autora pracy, tylko przelotna moda. Flat Design – wszechobecny minimalizm Flat design to już właściwie nie trend, a obowiązujący standard projektów internetowych. Pierwszym tego typu projektem w świecie projektowania cyfrowego był odtwarzacz multimedialny Zune. Następnie przyszedł styl metro z Windowsa, Android I iOS 7. Kiedy firmy Apple, Microsoft i Google poszły tą drogą, podążyło za nimi tysiące projektantów14.8 Flat design jest wygodny w użyciu w stronach responsywnych jak i czytelny we wszystkich formatach wyświetlaczy. Charakteryzuje się brakiem popularnych w zeszłym dziesięcioleciu gradientów, efektów cieni I wypukłości czy światłocienia. Cechuje go użycie sporej ilości wolnej przestrzeni i światła, pełnoekranowe fotografie oraz wyraźna wektorowa typografia i ikonografia. Dąży do jak największego minimalizmu. Problemem płaskiego stylu jest jednak mała oryginalność projektów i brak wizualnych wskazówek dla użytkownika, które z elementów danej strony są interaktywne.

thinkblink.nl – przykład flat design. Charakterystyczna duża typografia i duże zdjęcia w tle.

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

12

Dużą wadą jest również związana z tym stylem chęć projektowania jednego wyglądu witryny bez względu na to czy będzie używana na małym wyświetlaczu telefonu czy na 27” monitorze odległym 50 cm od oczu użytkownika. Duże płaskie aple i wielka typografia poświęcają widoczną ilość informacji na rzecz czytelności. Wzorowym przykładem tego problemu jest Metro UI, czyli kafelki nowego Windowsa. Wszystkie najpopularniejsze polskie portale internetowe w 2015 roku postawiły na ten sposób projektowania przy zmianach wyglądu. Onet.pl., Interia.pl, Wp.pl – każda z tych witryn korzysta z jego zasad. Do nagłówków wiadomości użyta została duża czytelna typografia wyświetlana na apli wypełnionej zdjęciem. Trzy największe portale wykorzystują również wyraźną płaską ikonografię pomagającą zrozumieć czytelnikowi dany dział strony. Skeuomorphic Design przestaje być modny Przeciwieństwem flat design jest z pewnością Skeuomorphic design. Początek tego stylu pochodzi od Apple. To oni zapoczątkowali trend, który na długo gościł w projektowaniu aplikacji na system iOS i stron internetowych. Skeuomorph tłumaczy się dosłownie jako obiekt stworzony po to, aby odzwierciedlać inny materiał lub technikę wykonania.159 Najbardziej charakterystycznym przykładem była z pewnością aplikacja kalkulatora od Apple przypominająca fizyczne urządzenie poprzez wykorzystanie tektur, cieni rzuconych, światłocienia i wyglądu prawdziwego kalkulatora.16

cinderellapastmidnight.tumblr.com - jedna z niewielu współczesnych stron wykorzystujący elementy Skeuomorphic Design 15. http://webdesign.tutsplus.com/articles/skeuomorphism-in-interface-design--webdesign-7638 16. https://uxmag.com/articles/does-skeuomorphic-design-matter

13

Ten sposób projektowania daje użytkownikowi uczucie znajomości i obycia z danym interfejsem, co ułatwia korzystanie ze strony, szczególnie użytkownikom nieobytym z technologią. Użycie tekstury papieru, skóry czy drewna pozwala stworzyć atmosferę witryny samym tylko wyglądem interfejsu bez użycia zdjęć w przeciwieństwie do stylu płaskiego gdzie elementy układu strony to tylko tło wokoło treści. Kolejną zaletą tego rodzaju projektowania jest łatwość wyróżnienia elementów interaktywnych. Przycisk może przypominać ten prawdziwy znany wszystkim z urządzeń od dawna im znajomych jak fizyczna klawiatura czy maszyna do pisania. Zalew stron internetowych wykorzystujących tekstury papieru, wstążki, zszycia nicią i podobnych elementów spowodował zmęczenie użytkowników, ponieważ wszystko zaczęło wyglądać bardzo podobnie. Wraz z popularyzacją iOS 7 i stylu metro w Windows 7 Skeuomorphic design przestał być praktycznie używany. Według Damiana Madray, Skeuomorphic Design był potrzebny do adaptacji technologii. Dzisiaj, jak to już nastąpiło, kolej na następcę w postaci Flat Design 17.10 Skeuominimalism – najlepsze cechy z dwóch światów Zarówno Flat i Skeuomorphic design przedstawiają wiele problemów projektantom stron. Rozwiązaniem może być coraz bardziej popularny w ostatnich latach Skeuominimalism. Oznacza on uproszczenie tylko do momentu, aż nie wypłynie to negatywnie na użyteczność, jednocześnie urealnienie tylko do momentu zachowania pożądanego minimalizmu w wyglądzie18

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

14

Aby nadać przestrzeń obiektom interfejsu strony używane są cienie w płaskich kolorach i wektorowe kształty oddające prawdziwe obiekty. Dopuszczalne są jedynie delikatne gradienty i cienie rzucone by podkreślić głębokość warstwy elementów. Styl ten zapoczątkowało Google używając dla niego określenia almost flat19.11Projektanci szukali sposobu nadania płaskiemu stylowi większej użyteczności. W ostatnich latach trendem tym podążyło wiele dużych witryn internetowych. Również Facebook, który od 2004 roku prezentował płaski styl zaczął używać lekkich gradientów do wyróżnienia przycisków, czy cieni rzuconych, aby oddzielić okna na pierwszym planie. Polygon Design – projektanci pragną urozmaicenia Trendy w sztuce projektowej często wpływają na równoległe dziedziny. Tak było również z popularną techniką zwaną polygon art polegającą na upraszczaniu obrazu poprzez tworzenie siatki jednobarwnych wielokątów, najczęściej trójkątów20. Daje to wrażenie uproszczonej trójwymiarowej bryły jednocześnie wpisując się we flat design. Technika ta wykorzystywana jest z powodzeniem w ostatnich latach również w projektowaniu stron internetowych. Podobnym przykładem jest coraz częstsze wykorzystywanie linii skośnych. Język pisania witryn pozwala budować ją jedynie z prostokątnych modułów. Wykorzystanie ścięć, rombów czy trójkątów pozwala przełamać ten schemat.

akaru.fr – ilustracje składające się z wielokątów. 19. http://www.matthewmooredesign.com/almost-flat-design/ 20. http://despreneur.com/20-examples-of-polygon-website-design/

15

Material Design Nowoczesne przeglądarki internetowe dają ogromne możliwości użycia na stronie internetowej animacji i skomplikowanych sposobów interakcji. W ostatnich latach projektanci poświęcili duży nacisk na urozmaicenie wszechobecnego stylu flat design. Z pomocą i nową tendencją przyszło Google przedstawiając material design2112 Projektanci Google pragnęli stworzyć język projektowania, który połączy klasyczne podstawy z innowacją i możliwościami nowych technologii.

Przykład material design na witrynie Google Plus Jego podstawa to powierzchnia, światło i ruch. Opiera się on klasycznych zasadach projektowania do druku. Wyraźne kolory, duża typografia i ikonografia, zamierzone biała przestrzeń i zdjęcia wypełniające aple wykorzystane są w celu ułatwienia działań użytkownika. Wszystkie jego elementy to określone samodzielne powierzchnie, które ograniczają wyświetlanie na nich materiałów. Jedyną cechą trójwymiarowości jest głębokość położenia danej apli. 21. http://www.google.com/design/spec/material-design/introduction.html

16

Cechą charakterystyczną i jego najważniejszą innowacją jest jednak użycie wyraźnych animacji odpowiadających na działanie osoby korzystającej ze strony. Zmiany stanu strony i jej elementów dzięki nowoczesnej technologii mogą być subtelne, płynne i wykorzystują asymetryczne przyśpieszenie i zwalnianie znane z klasycznej sztuki animacji. Nacisk na animację Animacja to już nie tylko ciekawostka dla projektantów stron internetowych, ale to podstawa efektywnego projektowania interakcji. Pozwala witrynie nadać życie. Daje również użytkownikowi poczucie obcowania z realnym przedmiotem. Tak jak w przypadku prawdziwego świata każda akcja powinna wywołać określoną reakcje. W dobie flat design projektanci mocno ograniczeni środkami stylistycznymi próbują ją wykorzystać, aby nadać interfejsowi walor prawdziwości22.13 W 2015 roku animacja wykorzystywana jest w określonych celach. Pierwszym z nim jest animacja elementów interfejsu. Pozwala ona użytkownikowi poznać jego akcję jak np. kliknięcie odnośnika. Przykładem jest tutaj zmiana tła przycisku, rozpływające się koło po kliknięciu, pojawienie się dodatkowego menu lub okna czy rozszerzenie danej apli, aby ułatwić czytelność. Praktycznie każda nowoczesna strona posiada nawigację, która płynnie zmniejsza się, po przejechaniu w dół, aby odsłonić treść witryny

Animacja opowiadająca historię na stronie akcji PZU 22. http://www.webdesignerdepot.com/2015/05/the-ultimate-guide-to-web-animation/

17

Kolejnym przykładem jest animacja oczekiwania na załadowanie strony lub danego elementu. Mimo rozwoju technologii i dużego postępu w przepustowości łącz internetowych załadowanie skomplikowanej grafiki lub video trwa. W celu uzmysłowienia użytkownikowi, że strona istnieje I nie nastąpił żaden błąd wyświetlona zostaje animowana ikona sugerująca ładowanie. Najpopularniejszym rodzajem tego typu animacji jest kręcące się koło czy klepsydra znana z systemu Windows. W ostatnich kilku latach projektanci starają się jednak urozmaicić ten element. Skomplikowane zmieniające kształt figury geometryczny, paski ładowania w postaci ciekawych kształtów są niewielką tylko cząstką przykładów kreatywnego podejścia do tematu. Jeszcze innym rodzajem wspominanym już przez autora niniejszej pracy jest animacja wykorzystana do opowiadania historii. Nie działa ona zazwyczaj na zasadzie kreskówki, ale jest odpowiedzią na działanie użytkownika jak np. przewijanie strony czy kliknięcie w link. Przykładem może być tutaj składanie się produktu czy elementu na oczach internauty wywołane przewijaniem w dół czy charakterystyczna podróż przez trasę złożoną z elementów strony. Motyw ten wykorzystało PZU na stronie akcji „Kochasz? Powiedz STOP wariatom drogowym” Widziany z góry samochód podczas przewijania przejeżdża drogą mijając niebezpieczne sytuacje i pokazując jak kierowca powinien się zachować.

Animacja użyta jako środek stylistyczny na stronie agencji Bright Media

Co raz częściej używa się animacji wyłącznie w celach stylistycznych i ozdobnych. Przykładem może 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 wręcz obłożona animacją przejść, figur geometrycznych czy tła z efektem paralaksy.

18

Ciekawostką mogą być tutaj tak zwane easter eagi wywołujące określoną animację po wpisaniu danego kodu na klawiaturze lub innego nieznanego szerszej publiczności działania. Tradycją w ostatnich latach wręcz stało się wykorzystywanie kodu Konami znanego dawniej z gier tej firmy. Wciśnięcie strzałki w górę, w górę, w dół, w dół, lewo, prawo, lewo, prawo, B, A na angielskiej witrynie Wired.co.uk wywoła animację Nyancat, znanej internetowej maskotki23.14

Zasada Above the Fold już nieaktualna Zasada Above the Fold pochodząca od umieszczania ważnych nagłówków i artykułów ponad zgięciem pierwszej strony gazety w webdesignie oznaczała umieszczanie jak największej ilości ważnej treści w powierzchni widocznej bez potrzeby przewijania31. Jakob Nielsen w 2006 roku w książce „Prioritizing Web Usability” przedstawił wyniki swoich badań pokazujące, że tylko 23%24 użytkowników przewija strony internetowe. Oznaczałoby to, że aż 77% czyta wyłącznie tekst znajdujący się na pierwszym ekranie. Bardzo dużo projektantów do tej pory stosowało tę zasadę. Jednak jest ona już nie aktualna, bo użytkownicy w 2015 nauczyli się przewijać strony internetowe. Kolejnym powodem oprócz adaptacji ludzi jest przymus wyświetlania witryn na wielu urządzeniach.

Strona polskiej agencji reklamowej Ars Thanea Zmniejszył się również czas, jaki użytkownik spędza na stronie. Badania wykazują, że właściciele witryn mają tylko około 15 sekund25 na zaciekawienie użytkownika. 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/

19

latach większość stron firmowych i wizytówek traktuje pierwszy ekran jako zajawkę tego, co znajduje się dalej. Dominuje wręcz minimalistyczna duża typografia z krótkim opisem i zdjęcie lub film w tle. Przykładem 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 duży napis „Muzyka na teraz” zdjęcie telefonu i Call to Action wywołujące pobranie aplikacji. Całą reszta informacji znajduje się poniżej widocznej części strony, One Page One Page to projektowanie witryny jako pojedynczej strony, gdzie cała treść dostępna jest z poziomu przewijania. W 2015 roku, w czasach jak największego upraszczania stylistycznego projektu i wszechobecnego minimalizmu, jest ona coraz popularniejsza. Jedyne, co musi wiedzieć użytkownik aby nawigować po takiej witrynie, to w jaki sposób przewijać. Internauta nie ma problemów ze znalezieniem poszukiwanej informacji w skomplikowanej hierarchii nawigacji. Przemieszczanie się po takiej stronie zazwyczaj ogranicza się do strzałek i odnośników do danej sekcji. Ten rodzaj projektowania ułatwia również tworzenie i obsługę witryny ze względu na domyślną responsywność takiego rozwiązania. One Page pomaga we wspominanym wcześniej opowiadaniu historii gdzie użytkownik przewijając zarządza czasem i zmienia określoną animację. Według Ambera Leigh Turner, dyrektora kreatywnego i właściciela agencji reklamowej, większość współczesnych stron internetowych jest statystycznie dłuższa i wymaga dłuższego przewijania26.15 Dobrym przykładem tego typu strony jest prezentacja ostatniego telefonu od firmy Apple – iPhone 6. W przeciwieństwie do poprzednich urządzeń jego przedstawienie znajduje się na jednej bardzo długie stronie. Wynika to również z faktu odrzucenia przez projektantów firmy Apple zasady Above the Fold.

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

20

Elementy Strona internetowa służąca przede wszystkim przekazaniu informacji składa się z podstawowych i wymaganych dla niej elementów. Oprócz treści pisanej, zdjęć czy filmów to również elementy interaktywne nawigacji czy elementy ozdobne. W czasach komercjalizacji równie ważne jest promowanie witryny poprzez wszechobecne social media i danie użytkownikowi możliwości podzielenia się dalej daną informacją. Wszystkie te elementy muszą zostać podporządkowane stylistycznie danemu projektowi. Światło Wszystkie składowe strony internetowej muszą być uporządkowane. Jednym z najważniejszych narzędzi projektowania jest światło – pusta przestrzeń oddzielająca elementy projektu od siebie27. To światło sprawia czy witryna jest czytelna, lekka i minimalistyczna. Dzisiaj projektanci używają dużo więcej światła w WWW niż kiedyś. Odrzucenie zasady Above the Fold pozwoliło odetchnąć i nie uciskać wszystkich elementów blisko siebie.

Prezentacja iPhone 6 Dobrym przykładem spopularyzowanego użycia światła jest strona firmy Apple, gdzie odległości zdjęć produktu od siebie są tak duże, że użytkownik nie widzi ich w jednym momencie na ekranie. Najbardziej charakterystycznym objawem tego trendu są interaktywne listy utworów w odtwarzaczu internetowym Spotify, gdzie odległości między tytułami piosenek zwiększyły się ponad dwukrotnie przy ostatnim odświeżeniu wyglądu tej strony. 16 27. http://designshack.net/articles/layouts/10-crucial-elements-for-any-website-design/

21

Typografia W 2006 roku Oliver Reichenstein, właściciel agencji Information Architekt, powiedział, że webdesign to w 95% typografia28.17Jako, że tekst jest wciąż podstawowym nośnikiem informacji w Internecie trudno się z tym nie zgodzić. Typografia to sztuka używania tekstu w sposób czytelny I dobrze wyglądający. W ostatnich latach, dzięki rozwojowi technologii, projektanci nie muszą w Internecie używać już wyłącznie czcionek Ariala czy Verdany, ale mają dowolność w stosowaniu kroju pisma. W 2015 roku projektanci osiągnęli efekt czytelności przede wszystkim zwiększając rozmiar minimalistycznego kroju pisma. Tytuły i nagłówki zaczęły znacznie dominować nad przyciemnionym tłem, czasem wręcz pozbywając się zupełnie zdjęć i filmów. Charakterystyczną cechą współczesnych stron jest wyrównanie głównego nagłówka do środka ekranu

witryna blossomtype.com Ciekawym zjawiskiem jest również technika używania i mieszania zróżnicowanych krojów pism. Technika ta, znana z popularnych T-shirtów, gości ostatnimi czasy również na stronach internetowych. Kroje bez szeryfowe często połączone z odręcznymi wyrywają się z trendu minimalizmu. Ciekawym przykładem 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

22

Video tła Duże zdjęcia na całą wielkość ekranu już dawno stały się podstawowym zabiegiem stosowanym w projektowaniu stron internetowych29.18Aby urozmaicić i odróżnić wygląd projektanci wykorzystują technologię pozwalającą natywnie używać filmów, jako tła strony. Film jest najlepszym sposobem na przyciągniecie uwagi, co pozwala zatrzymać użytkownika dłużej na witrynie i potencjalnie zrealizować cel marketingowy. Animacja taka ze względu na swój rozmiar nie przekracza jednak kliku sekund I jest często zapętlona. Jednym z ciekawszych stron z użyciem tej technologii i zarówno wyjątkiem, jeśli chodzi o długość użytego filmu, jest witryna 24hoursofhappy.com. To teledysk do muzyki Pharrella Williams pod tytułem “Happy” Pokazuje ona w tle 24 godziny materiału filmowego zależnego od pory dnia u użytkownika. Kolejnym przykładem może być strona filmu “Life of Pie” używająca urywków filmu jako tła czy strona firmy Black Negative używająca animacji w tle w celu wytworzenia zamierzonej atmosfery.

Weber - BBQ Cultures z wykorzystanie elementów video jako tło Nawigacja Chyba najważniejszym I krytycznym elementem każdego interfejsu oprócz samej treści jest nawigacja odpowiedzialna za poruszanie się po stronie. W 2015 roku dominuje nawigacja umieszczona na górze witryny. Tradycyjnie, aby jej użyć, użytkownik musiał przewinąć całą stronę do góry. 29. http://www.hongkiat.com/blog/fullsize-video-background-websites/

23

Rozwiązaniem stało się przyklejenie belki nawigacji do górnej krawędzi ekranu. Według badań Hyrum Denney, specjalisty od User Experience, przyklejone menu obsługuje się 22% szybciej30,19a wszyscy badani uważali to za lepsze rozwiązanie. Udoskonaleniem tej metody nawigacji jest animacja i zmniejszenie je obszaru przy przewijaniu w dół czy ciekawe rozwiązanie znane z aplikacji firmy Google gdzie nawigacja pojawia się tylko, gdy użytkownik zacznie przewijać stronę do góry. Projektanci jednak wciąż szukają oryginalnych I lepszych rozwiązań. Strona firmy Made in Hous stosuje ukrytą animację wyjeżdżającą z lewej strony ekranu. Część stron rezygnuje z niej zupełnie jak strona Foundationsix zostawiając jedynie Call to Action na dole pierwszego ekranu.

rosewaterfilm.com wykorzystuje oryginalną nawigację Problemem nawigacji horyzontalnej jest jej duża szerokość. Powoduje to duże problemy na urządzeniach mobilnych. Rozwiązaniem stało się chowanie jej pod charakterystyczną ikoną hamburger. Spopularyzowanym elementem nawigacji na stronach One Page jest również oznaczenie, zazwyczaj po prawej stronie ekranu, w której sekcji bądź, na którym slajdzie znajduje się aktualnie użytkownik strony. 30. http://www.smashingmagazine.com/2012/09/11/sticky-menus-are-quicker-to-navigate/

24

Przyciski Call to Action Pierwszy ekran witryny internetowej to w dzisiejszych czasach często tylko animowane tło, duża typografia i przyciski Call to Action właśnie. Strony internetowe służą przede wszystkim zarabianiu pieniędzy i, aby to uczynić, trzeba wywołać I zachęcić użytkownika do wykonania określonej akcji. Służy do tego CTA najczęściej w formie przycisku. Nie zależnie czy chodzi o pobranie aplikacji, rejestrację w serwisie czy tylko zostawienie swoich danych korespondencyjnych jest to najważniejszy element dla właściciela strony. Pierwszym problemem z dobrze zaprojektowanym Call to Action jest obecny trend flat design, który utrudnia stworzenie atrakcyjnego i wybijającego się przycisku zachęcającego do kliknięcia. Najczęstszym rozwiązaniem jest tutaj użycie wyraźnej kontrastującej kolorystyki jak na stronie odtwarzacza muzyki Spotify.com. Często stosowanym sposobem jest również stosowanie ikonografii strzałek.

ana-flightconnections.com i charakterystyczny dzisiaj przycisk CTA Bardzo wyraźnym trendem jest dzisiaj tak zwany Ghost Buttons czyli przyciski z kolorową zaokrągloną obwódką i z przezroczystym tłem. Przykładem może być tutaj strona programu graficznego Sketch gdzie obok kontrastującego kolorystycznie płaskiego przycisku zachęcającego do zakupu umieszczony jest Ghost Button pozwalający pobrać wersję testową programu. Paradoksalnie, im bardziej skomplikowany i atrakcyjny przycisk, tym bardziej użytkownicy mylą go z reklamą. Według danych z 2013 roku 86% internautów wykazuje objawy tak zwanej ślepoty banerowej31.20Znaczy to tyle, że ich umysł już nie reaguje i nie zauważa reklam internetowych. 31. http://www.adotas.com/2013/03/study-86-of-consumers-suffer-from-banner-blindness/

25

Pokaz slajdów i przewijanie w poziomie Pełnoekranowe szczegółowe zdjęcia robią na użytkowniku duże wrażenia i wpisują się w trend minimalistycznego projektowania. Problem polega na tym, że zajmują całą powierzchnie ekranu. Rozwiązanie stały się popularne w ostatnich latach karuzele pozwalające przesuwać slajdy za pomocą strzałek lub intuicyjnego gestu przeciągnięcia palcem po ekranie urządzenia mobilnego.

Przykładem może być tutaj strona agencji Tokyo.uk prezentująca najciekawsze swoje dokonania na każdym slajdzie. Ciekawą odmianą tego zjawiska są pojawiające się w ostatnich czasach strony przewijane w poziomie. Najgłośniejszą tego typu witryną był MySpace i jego przeprojektowanie w 2014 roku. Podobnie działa strona polskiej agencji reklamowej K2, z tym, że tutaj przewijanie następuje automatycznie po zbliżeniu kursora do krawędzi przeglądarki. Przewijanie horyzontalne wiąże ze sobą jednak duże problem z użytecznością i w 2015 roku, mimo wielu swoich naśladowców, witryna MySpace zrezygnowała z tego pomysłu. Paralaksa Paralaksa to różnica w widocznej pozycji obrazów oglądanych z różnych kątów widzenia. Odnosi się w szczególności do innego przesunięcie obiektu w oczach obserwatora zależnie od odległości. Mówiąc prościej element na pierwszym planie przesuwa się szybciej niż np. tło. Efekt ten jest bardzo często wykorzystywany w ostatnich latach w projektowaniu interesujących stron internetowych, szczególnie stworzonych we wspomnianym wcześniej trendzie One Page. Wykorzystanie paralaksy pozwala nadać przestrzeń witrynie i nagrodzić użytkownika za przewijanie.

26

Ciekawym przykładem paralaksy jest strona browserawarenessday.com, której plany tła przesuwają się zależnie od horyzontalnej pozycji kursora niczym w grach komputerowych. Styl metro czyli kafelki Gdy w 2010 roku firma Microsoft przedstawiła swój interfejs Metro (znany dzisiaj jako Modern UI) nikt nie spodziewał się, jakiej popularności nabierze jego najbardziej charakterystyczna rzecz – kafelki. Projektowanie strony poprzez używanie do tego modułów jest dzisiaj bardzo popularne. Największe polskie portale stosują kafelki do prezentowania wiadomości ze zdjęciem.

Najbardziej znanym przykładem stylu metro jest prawdopodobnie Pinterest. Strona ta pozwala użytkownikom przypinać zdjęcia do ich tablic w postaci modułów.

27

Integracja social media Ostatnie 5 lat to dominacja mediów społecznościowych w Internecie. Życie danej marki on-line nie toczy się już tylko na jej stronie internetowej, ale również w social media32.21 To na Facebooku, Pintereście czy Twitterze następuje komunikacja z fanami i klientami danej firmy lub danego produktu. Strony internetowe zostają przede wszystkim wizytówką. O ile nie oferują one sprzedaży danego produktu to dążą do przekazaniu ruchu użytkowników do mediów społecznościowych. Stąd w ostatnich latach nastąpiła bardzo duża integracja social media. Użytkownicy, a przede wszystkim wydawcy witryny internetowej, nie wyobrażają jej sobie bez znanych wszystkim przycisków “Lubię to”. Najpopularniejszym obecnie trendem jest dzielenie się samych użytkowników odnośnikiem do strony poprzez daną akcję.

Przykładem omawianej integracji jest strona internetowa batonu Kit Kat givehollandabreak.d.shcc.nl, która za każde podzielenie się na portalach społecznościowych przesuwa wirtualną postać o jeden kilometr na wirtualnej mapie. Ciasteczka Ciasteczka to pliki I informacje, które strona internetowa przetrzymuje na komputerze w celu zapamiętania jego wcześniejszych wyborów i akcji, takich jak np. zalogowanie się. W 2013 roku Unia Europejska wprowadziła przepis nakazujący wszystkim witrynom działającym na jej terenie wyświetlania ostrzeżenia i informacji o obecności tego typu plików33. 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

28

Był to dość duży problem dla projektantów szczególnie w czasach minimalizmu w Internecie. Twórcy jednak wciąż wpadają na kreatywne rozwiązania tego problem. Ikonografia Ikonografia i piktogramy pełnią ważną role w graficznej komunikacji. Wspierają pokazywanie użytkownikowi jakiej reakcji może oczekiwać po kliknięciu. Pełnią też rolę ilustracyjną. Z powodu różnorodności rozdzielczości i wielkości wyświetlaczy wektorowe ikony stały się bardzo często używanie. Przy zmianie rozmiarów wektorowe ikony nie tracą na jakości. Popularnym rozwiązaniem stosowanym w projektach stron internetowych są ostatnio kolumny tekstu ilustrowane symbolami.

Strona jardins-poudriere.ch używa ikonografii do ułatwienia nawigacji 404 Ciekawym elementem pozwalającym projektantom wykazać się kreatywnością ze względu na rzadkość jego wyświetlania jest strona błędu 404. Oznaczenie 404 oznacza błędne łącze i brak możliwości odnalezienie danej podstrony na serwerze. Interesującą podstroną wyświetlającą błąd 404 jest ta prezentowana na kontrowersyjnie przeprojektowanej witrynie Bloomberg.com. Nawiązuje ona do dawnej mody na wyświetlanie niskiej jakości animacji w formacie GIF. Animacja ukazuje pracownika zrzucającego stary komputer ze swego biurka.

29

Problemy współczesnych projektantów Omawiając tendencje w projektowaniu stron internetowych trudno nie wspomnieć o problemie podobieństwa większości witryn. Ciężko nazwać to plagiatem. Z drugiej strony tak przejawiają się skutki powszechnego dążenia do minimalizmu. Efekt Behance – Powtarzanie trendów i schematów Projektanci mają to do siebie, że chcą się pochwalić swoją pracą. Jednym z popularnych portali prezentujących ich prace jest Behance. To właśnie tam rodzą się tendencje w projektowaniu. Ludzie widzą, że projekt podoba się innym i inspirują się nim w następnym zleceniu. Flat Design spowodował, że większość projektów stała się niemal identyczna.

Mozaika stworzona przez Tima Caynes

30

Znany projektant Tim Caynes wypowiedział się na ten temat zamieszczając w mediach społecznościowych mozaikę niemal identycznych stron różnych agencji reklamowych z komentarzem: „Oto kilka pięknych agencyjnych stron, ale (my projektanci) możemy zmierzać w naszym projektowaniu do jednolitości (stron)”34.22 Kolejnym problem wpływającym na monotonię współczesnych witryn są zyskujące na popularności rynki motywów do wspomnianych wcześniej systemów zarządzania treścią jak Wordpress czy Joomla. Dzięki nim twórca nie musi od podstaw projektować nowej strony dla następnego klienta. Wystarczy, że za cenę do 50 dolarów zakupi skórkę, aby następnie zmienić kolory, tekst i zdjęcia. Z powodu minimalizmu stylistycznego nie sposób odróżnić tego typu odtwórczych projektów od projektów oryginalnych. Prognozy na następne lata Pozostaje zawsze aktualne pytanie jak będzie wyglądać strona internetowa w przyszłości? Jakie tendencje projektowe powstaną w najbliższych latach? Czy po flat designie nastąpi powrót w stronę Skeuomorphic Design? Autor niniejszej pracy zadał to pytanie reprezentatywnym przedstawicielom z różnych dziedzin projektowania do internetu. Szymon P. Peplinski, CTO/ Head of Creative Technology w DDB&tribal Warszawa: „Moim zdaniem głównym wyzwaniem staje się projektowanie mądrych produktów i usług dla starzejących się społeczeństw uwzględniających potrzebę dostosowywania rozwiązań do potrzeb rynków globalnych. Wzrost długości życia i migracja z małych miast do kilku dużych ośrodków dających pracę zdeterminują oczekiwania konsumentów.” Tomasz Łakomy, Front End Developer w STX Next „Moim zdaniem powróci trochę zapomniany teraz nurt "Internet of things" - ilość ekranów, na które projektowane są strony www wzrośnie o ekrany lodówek, telewizorów, wyświetlaczy w samochodach, etc.. Sam responsive design nie załatwi sprawy, strona amazon.com projektowana pod wyświetlacz zamontowany na lodówce musi/powinna oferować zupełnie inny UX niż ta sama strona pod tablet (mimo podobnej rozdzielczości ekranu). W ciągu 5 lat powinien zostać także wyeliminowany problem kompatybilności wstecznej z IE8, a ponadto flash przestanie być wykorzystywany gdziekolwiek (i dobrze) - pozwoli to na zdecydowane przyśpieszenie zarówno szybkości projektowania jak i działania samych stron www.” 34. https://twitter.com/timcaynes/status/554593526034731008/photo/1

31

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/

32

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. Społeczna Historia Mediów. 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