18 kluczowych trendów w projektowaniu stron WWW w 2014 roku

Jak będą wyglądały strony WWW w 2014 roku? Jakie trendy się rozwiną? Z pewnością, między innymi, zobaczymy więcej prostoty i czystości, a twórcy skupią się na dopasowaniu stron do mniejszych ekranów urządzeń mobilnych. Niniejszy wpis poświecę właśnie tematowi wyglądu, stylu… trendów w projektowaniu stron, serwisów i aplikacji.

Na wstępie dlaczego o tym. Jestem zaskoczony i zauroczony statystykami, jakie wygenerował mój wcześniejszy wpis. Zawsze stawiałem opory przed poruszaniem tematów opisanych 100 raz przez 100 różnych specjalistów. Po pierwszych postach na blogu widzę jednak, że tego typu treści cieszą się największą popularnością i są czytane[!]. Niezwykle mnie to motywuje, więc dziś… o trendach. Początek roku, nowe wyzwania, problemy, firmy, projekty… zaczynamy!

Poniższe zestawienie opiera się głownie na obserwacjach i przypuszczeniach, dlatego opisy i uzasadnienia niektórych pozycji mogą być mniej precyzyjne niż inne. Być może pominięte zostały także oczywiste i przywoływane w podobnych zestawieniach trendy (ukazało się ich trochę).

1 . Czystość i przejrzystość

Czystość, przejrzystość oraz oszczędność to trend, który przeważa w świecie web designu od dłuższego czasu. W tym zakresie wpływowym momentem było ukazanie się Windows 8. Niedługo później tropem tym podążyło Apple. Tzw. flat design to temat do szerokiego omówienia, dlatego teraz pozwolę sobie tylko wspomnieć o tym, jako o trendzie, który z pewnością będzie się jeszcze rozwijał. Może dobrym pomysłem na wpis tego typu będzie wywiad z jednym z grafików współpracujących z Grupa Brandoo, zobaczymy.

Windows 8

Windows 8

Apple iOS7

Apple iOS7

Skipbuddy

Skipbuddy

2 . Pierwszeństwo dla urządzeń mobilnych

Dziś ruch na stronach WWW z urządzeń mobilnych często wyprzedza ilość odwiedzin generowanych przy użyciu sprzętu stacjonarnego. W 2014 dominacja urządzeń mobilnych zmusi projektantów do dostosowywania witryn do potrzeb, możliwości i zachowań użytkowników smartfonów i tabletów – nie zapominając przy tym oczywiście o tych dużych ekranach. Dostosowanie strony WWW do wyświetlaczy urządzeń mobilnych jest dziś pojmowane jako wspieranie innowacyjności biznesów i organizacji – klasyfikuje firmę, jako bardziej otwartą i przystępną.

3 . Jeszcze więcej przewijania

Przewijane strony, tzw. one site’y, to nie najnowsza tendencja w świecie web designu. Jednak w ostatnim czasie takich stron można zauważyć coraz więcej. Możliwe powody rozwijania się tego trendu, to zarówno łatwość wykonania, jak i chęć dostosowania do urządzeń mobilnych. Niezależnie, czy strona przewijana jest w pionie, czy w poziomie, warto zachować rozsądek przy projektowaniu one site’ów i nie przesadzić z ich długością, zwłaszcza, aby strona nie ciągnęła się w nieskończoność.

4png

Hey Mosaic

Retr

retr

4 . Kreatywnie wykorzystany HTML5

HTML5 daje wiele możliwości do kreatywnego wykorzystania. Zamiast opisywać, co można zrobić, lepiej przyjrzeć się przykładom:

Si digital

Si digital

NeoTokio

NeoTokio

5 . Źle wykorzystany potencjał HTML5

Ogromne możliwości, jakie daje HTML5, czasem obracają się przeciwko twórcom stron WWW. To, że coś można zrobić, nie zawszy oznacza, że trzeba. Niestety, niektórzy o tym zapominają, dlatego w przyszłości możemy zobaczyć wiele „popisowych”, ale nieużytecznych stron. Strona KathArt to przykład na niezwykle interesujący sposób na przedstawienia zespołu, ale potrzeba ciągłego skrolowania może być nieco irytująca. Poza tym, strona dosyć długo się ładuje.

KathArt

KathArt

6 . Micro UX

Pieczołowita dbałość o detale może naprawdę wyróżnić stronę WWW z tłumu. Stosowane z umiarem, mikroefekty user experience mogą wnieść wiele życia do wyglądu i użyteczności witryny. Często to właśnie detale mają wpływ na odbiór strony oraz na to, czy zostanie ona w pełni obejrzana – przeczytana przez użytkownika.

Warto zobaczyć interesujący pasek postępu na stronie The Daily Beast:

Micro UX

The Daily Beast

7 . Minimum słów

Twórcy stron internetowych dążą do umieszczania jak najmniejszej ilości tekstu. Niektórzy rezygnują z tekstu całkowicie, przekazując użytkownikom informacje za pomocą obrazów i ikon.

W niektórych przypadkach oszczędność rzeczywiście się sprawdza. Absolutne unikanie tekstu nie jest jednak do końca słuszną drogą. Przykładem może być strona Snapchat, na której znajdziemy nie więcej, niż 10 słów – zmuszająca użytkownika do obejrzenia filmu w celu dowiedzenia się więcej.

Snapchat

Snapchat

8 . Minimalistyczna nawigacja

Uproszczona struktura nawigacji na stronach zdaje się zyskiwać coraz większą popularność. Dzieje się tak często ze względu na konieczność zredukowania procesu nawigacji dla użytkowników smartfonów i tabletów – zauważyć można zatem większe skupienie na wykonaniu oraz położeniu ikon, pasków czy przycisków przewijania. Poniżej uproszczone menu na Medium:

Medium

Medium

9 . CSS zamiast grafik

Do tworzenia grafik na stronach WWW twórcy coraz częściej używają CSS. Wykorzystanie tego narzędzia daje m. in. możliwość szybkiej zmiany parametrów grafiki, bez konieczności jej wykonywania, co może być przyczyną rosnącej popularności.

10 . Wideo i ruchome tła

Ruchome tła w postaci wideo to coś, czego z pewnością w najbliższych miesiącach zobaczymy dużo więcej. Interesujące przykłady wykorzystania ruchomych teł poniżej:

The Guardian

The Guardian – Firestorm

WB

White Board

Sketchin

sketchin

11 . Jeszcze bogatsze doświadczanie treści

Niniejszy trend łączy się z powyższą pozycją. Twórcy stron WWW prześcigają się w sposobach na zatrzymanie i zachwycenie użytkownika, łącząc tekst, obrazy, wideo, interaktywne funkcje i… zmuszając do długiego skrolowania :). Dobrym przykładem jest tu wspominana wcześniej strona KathArt.

12 . Jak najwięcej na jednej stronie

Na coraz większej ilości witryn unikniemy ładowania nowych stron po kliknięciu w opcje, obrazy itp. Przy wykorzystaniu lightboxów, nakładek i rozszerzeń twórcy stron WWW ograniczają ilość kliknięć, a więc pracy, jaką musi wykonać użytkownik. Poniżej strona H&M.

H&M

H&M

13 . Urozmaicenie w typografii fontów

Projektanci stron WWW, jak nigdy dotąd, faworyzują fonty większych rozmiarów lub łączą ze sobą rozmiary duże i małe. Takie mieszanki stają się coraz bardziej popularne. Poniżej wspomniane wcześniej NeoTokio.

NeoTokio

NeoTokio

14 . Monochromatyczność z jednej strony…

Twórcy stron WWW najprawdopodobniej wyszli z założenia, że nie ma sensu korzystać z wielu kolorów, kiedy można stworzyć piękną stronę używając dwóch barw oraz ich odcieni. Stąd możemy podziwiać w ostatnim czasie mnóstwo monochromatycznych, designerskich koncepcji – nie tylko na stronach WWW.

Qatar Airways Qatar Airways_1

Qatar Airways

15 . …wielobarwność z drugiej

W opozycji do monochromatyczności rozwija się drugi, widoczny trend, a więc strony wielobarwne, wykorzystujące tęczę kolorów. Krzykliwe, a nawet drażniące witryny zwracają uwagę odbiorcy.

Coloured Lines

Coloured Lines

16 . Kafle

Kafle to wyraźny trend, uznawany za przyszłość w nie tylko internetowym designie. Kamieniem milowym w rozwoju była publikacja Windows 8. Kaflowe strony WWW widoczne były jednak już od dawna i, ze względu na swoją użyteczność oraz dopasowanie do urządzeń mobilnych, z pewnością będzie ich coraz więcej.

Etch

Etch

F5

F5

17 . Lepsze, większe obrazy

Ogromne obrazki lub wysokiej jakości fotografie jako tło zdają się coraz częściej zastępować popularne kiedyś tekstury.

Protest

Protest

18 . Stałe elementy strony

Zauważalnym trendem jest stosowanie elementów, które nie zmieniają swojej pozycji podczas nawigacji po stronie WWW. Najczęściej jest to menu lub formularz kontaktowy. Czasem takie elementy zwijają się do mniejszych ikon.

Kancelaria Przedsiebiorcy

Kancelaria Przedsiębiorcy

Liftinteractive

Liftinteractive

Andy Hillier

Andy Hillier

Tyle. Niech moc będzie z Wami!

Do stworzenia zestawienia zainspirował mnie wpis econsultancy.

 

oferta-www

Be sociable, share