9 trendów w webdesignie na 2016 rok

9 trendów w webdesignie na 2016 rok

Dnia 20 grudnia 2015 roku obchodziliśmy 25-tą rocznicę stworzenia pierwszej strony www. Całość działa się w CERN-ie (tak, tym samym, który teraz eksperymentuje z Wielkim Zderzaczem Hadronów). To właśnie tam powstała pierwsza strona www. Niby tylko minęło 25 lat, ale zdarzenia, które miały tam miejsce na stałe zmieniły funkcjonowanie świata. Wstęp być może zbyt patetyczny, ale okazja niemała, więc warto o tym wspomnieć.

Dnia 20 grudnia 2015 roku obchodziliśmy 25-tą rocznicę stworzenia pierwszej strony www. Całość działa się w CERN-ie (tak, tym samym, który teraz eksperymentuje z Wielkim Zderzaczem Hadronów). To właśnie tam powstała pierwsza strona www. Niby tylko minęło 25 lat, ale zdarzenia, które miały tam miejsce na stałe zmieniły funkcjonowanie świata. Wstęp być może zbyt patetyczny, ale okazja niemała, więc warto o tym wspomnieć.

Przez ten czas przeszliśmy dość długą drogę od stron typowo tekstowych, przez takie, które były upchane flashowymi animacjami, po pierwsze strony mobilne, aż do roku mobile w którym liczba smartfonów i tabletów przekroczyła liczbę urządzeń stacjonarnych (laptopy, desktopy). Jakie trendy w webdesignie będą obowiązywać w tym roku? Zapraszam do lektury.

Responsive Web Design. Serio!

Część osób będących na bieżąco w temacie zapewne kazałoby mi popukać się w głowę. Przecież o RWD trąbi się od dobrych kilku lat i należy to uznać już za oczywistą oczywistość. Ostatnio miałem okazję przyjrzeć się tematowi i jak się okazuje nie jest to wcale takie oczywiste. Blog Guy’s Pod sprawdził 100,000 stron pod kątem dostosowania do urządzeń mobilnych i jak się okazało tylko 11–12% stron jest responsywnych. Co prawda badanie było realizowane w 2014 roku i z pewnością ten wynik obecnie wygląda znacznie lepiej, ale dane te pokazują, że jeszcze dużo jest do zrobienia. Co więcej, Google w kwietniu zeszłego roku wprowadził do algorytmów indeksujących zmiany, które powodują, że w wynikach z urządzeń mobilnych pierwsze będą nam się pojawiać strony, które są zoptymalizowane przez mobile. Jestem przekonany, że gruba większość, które będą budowane w tym roku będą również tworzone w zgodności z RWD, ale jeśli ktoś nie planował na ten rok aktualizacji swojej strony, a nie ma jeszcze strony mobilnej to myślę, że może jeszcze zrewidować te plany. Po zmianach, które wprowadziło Google stawka jest zbyt wysoka. Dodatkowo jak podaje raport We Are Social w styczniu 2015 roku globalnie ruch generowany na stronach przez urządzenia mobilne był na poziomie 31%, ale zmiana rok do roku była na poziomie 39% i taka dynamika na pewno zostanie utrzymana, co może oznaczać, że już w tym roku wejść z urządzeń mobilnych będzie więcej niż z urządzeń stacjonarnych.

 

Hero headers

Jednym z największych trendów, które dość mocno się zadomowiły w sieci to stosowanie przerośniętych zdjęć dobrej jakości na stronie głównej lub na każdej podstronie. Najczęściej zdjęcia takie zajmują całą wysokość pierwszego ekranu, który jest wyświetlany użytkownikowi obojętnie, czy korzysta z urządzenia mobilnego, czy stacjonarnego. Świetnym dopełnieniem fotografii jest tekst, który opisuje główną wartość marki, czy produktu wraz z wyjaśnieniem oraz, najczęściej, wezwaniem do działania (CTA) i innymi elementami nawigacyjnymi. Wszystkie te komponenty tworzą właśnie Hero Header (ciężko jest tutaj znaleźć polski odpowiednik tego określenia, jedyne sensowne, które mi się nasuwa to ‘główny nagłówek’, co jest trochę masłem maślanym, ale myślę, że oddaje ideę).

Hero header jest pierwszą rzeczą, którą widzi użytkownik wchodząc na naszą stronę. Duży nacisk jest tutaj położony na atrakcyjność wizualną. Nie ma miejsca na przypadkowe elementy. Ważne jest również, aby użytkownik wiedział co ma zrobić w następnym kroku (np. czy ma zacząć scrollować stronę, wybrać podstronę ofertę, założyć konto, zapisać się na wydarzenie, czy ściągnąć darmowe treści).

Dobrze zaprojektowany pierwszy ekran musi być bardzo spójny. Opiera się na dobrze dobranej typografii, dopasowanej kolorystyce i niewielkiej liczbie elementów interakcji. Logotyp oraz dostęp do menu nie “przeszkadzają” w odbiorze głównego komunikatu ekranu.

Kluczowy jest bardzo dobry dobór zdjęcia. Po tym pozostałe elementy łatwo dopasować do całości.

źródło: creativemarket.com

źródło: pinterest.com

Video, coraz więcej video

Z roku na rok video zyskuje na popularności. Powodem tego są rosnące przepustowości łącz, coraz większe możliwości obliczeniowe urządzeń z których korzystamy oraz… nasze lenistwo. Niestety to fakt. Internauci są leniwi. Przy setkach informacji, które przyjmujemy każdego dnia, przyzwyczailiśmy się, że wszystko musi być przekazane w przystępnej postaci, tu i teraz, w możliwie krótkim czasie i najlepiej z wykorzystaniem obrazu zamiast tekstu.

Z wykorzystaniem video z pewnością znacznie prościej jest wyjaśnić wiele kwestii, znacznie prościej jest opowiedzieć historię i zbudować klimat.

W kontekście designu stron www video jest najczęściej wykorzystywane zamiast zdjęcia w tle na ekranach głównych lub też jako video-explainer, które wyjaśniają zasadę działania produktu, usługi, czy wyjaśniające dlaczego firma jest taka fajna. Wykorzystanie video staje się również jednym z kluczowych elementów content marketingu. Z pewnością ten trend będzie się silnie rozwijać w kolejnych latach.

Sprawdź przykład ciekawej realizacji tutaj.

Flat design 2.0

W 2014 Internet oficjalnie ogłosił zwycięstwo Flat Design nad Skeuomorfizmem. Skeuomorfizm, kto w ogóle to wymyślił?! Określenie to nie należy do popularnych, zapewne ze względu na swoje brzmienie, ale określa zasady projektowania mające na celu jak najlepsze odwzorowanie obiektów ze świata fizycznego. Najlepszym przykładem grafik skeuomorficznych są grafiki, które jakiś czas temu mogliśmy zobaczyć w urządzeniach Apple. Te elementy były naprawdę ładne, jednak ich przygotowanie zajmuje sporo czasu. Na prowadzenie wyszły elementy graficzne, które zostały sprowadzone do jednego poziomu — to trochę tak jakby, wszystkie elementy skeuomorficzne przejechać walcem, pozbawić ich wszystkich cieni i gradientów i nadać pastelowe barwy. Grafiki płaskie mają kilka niepodważalnych zalet. Można je stosunkowo szybko zaprojektować, są lekkie dla przeglądarek, tworząc takie grafiki możemy je zapisać w formacie SVG (grafika wektorowa) co daje nam pewność, że będą dobrze wyglądać na każdej rozdzielczości włączając w to ekrany retina, a poza tym mają swój specyficzny klimat, który mi osobiście bardzo przypadł do gustu. Innym osobom też przypadło to do gustu, ale jak się okazało po dwóch latach funkcjonowania tego trendu, że już się trochę opatrzył. Zaczęto na nowo wprowadzać delikatne cienie, odrobinę więcej detali i subtelne gradienty i to właśnie taka stylistyka będzie przodować w tym roku.

źródło: nodegram.com

źródło: netdna.webdesignersdepot.com

źródło: internet.com

Karty

Jesteśmy świadkami sporych zmian w architekturze stron. Jednym z wyzwań przed którym stoją projektanci jest projektowanie interfejsów, które pomogą zapanować nad bardzo dużą liczbą treści oraz funkcjonalności. W serwisach agregujących treści bardzo dobrze sprawdzają się karty. Trend ten został zapoczątkowany przez Google, Pinterest, Twittera i Facebooka. Jest kilka przykładów polskich stron, które w zeszłym roku przeszły na card-design. Jest to między innymi: wp.pl, money.pl i onet.pl. Główną zasadą, której należy sie trzymać przy konstruowaniu kart jest zapewnienie, aby każda z kart stanowiła “samowystarczalny” element, czy wycinek treści. Zaletami stosowania kart z pewnością jest stosunkowa prosta metoda na zapanowanie nad dużą ilością treści na stronie, łatwo z ich wykorzystaniem skanować treści, mają wszechstronne zastosowanie, a dodatkowo dobrze sprawują się z RWD. Jest też klika minusów. Z wykorzystaniem kart dość ciężko jest wyróżnić treści i wymagają od użytkownika sporego skupienia uwagi, a dodatkowo nieumiejętne wykorzystanie kart może spowodować na naszej stronie spory bałagan.

źródło: codetactic.com

źródło: money.pl

Jeszcze ładniejsza typografia

Typografia stała się jednym z filarów dobrego webdesignu. Dobrze dobrana potrafi bardzo uatrakcyjnić każdy projekt. Dzięki temu jesteśmy w stanie przekazać najważniejsze komunikaty w sposób bezpośredni, a jednocześnie atrakcyjny wizualnie. Fonty występujące na stronach są przerośnięte i często zajmują sporą część ekranu będąc jednym z ważnych elementów layoutu.

Korzystając z takich serwisów jak Google Fonts i Font Squirrel jesteśmy w stanie w prosty sposób zaimplementować na naszej stronie bardzo dużą liczbę krojów, nie musimy się ograniczać do tych systemowych. W przypadku polskiego alfabetu konieczne jest sprawdzenie, czy dany font posiada wszystkie nasze ogonki. Nawet najładniejszy krój bez polskich znaków jest w stanie zabić każdy layout. W bieżącym roku na pewno będziemy obserwować jeszcze bardziej kreatywne wykorzystanie atrakcyjnych fontów.

źródło: getzeroapp.com

źródło: whitefrontier.ch

Animacje

Już w poprzednich latach mieliśmy okazję zobaczyć strony, które wykorzystywały atrakcyjne animacje. Od znaczących, które mają kluczowy wpływ na ogólny odbiór strony www (np. na ekranie głównym strony), po drobne smaczki, które można było prawie przegapić przewijając stronę.

Animowane elementy interfejsu to świetny sposób na zbudowanie zaangażowania użytkowników, dając im coś co pomoże im przetrwać czas ładowania strony, czy stanowiąc element zaskoczenia, który przykuje ich uwagę. Oczywiście nie można zapomnieć o animacjach, które ułatwiają poruszanie się po stornie i korzystanie z interfejsu (np. animacje przy przyciskach, animowane menu, czy galerie zdjęć).

Najważniejszym czynnikiem, jeśli chodzi o animacje jest to, aby upewnić się, że czemuś służy: Czemu tworzymy dany efekt i jakie jest jego zadanie?

źródło: marketblog.envato.com

źródło: daracreative.ie

Długie scrollowanie

“Scrolling is the new click” jak to piszą eksperci. Jak się okazuje, przewijanie strony jest znacznie szybsze niż klikanie. Dodatkowo przewijanie jest intuicyjnym ruchem na urządzeniach mobilnych, gdzie na jednym ekranie jesteśmy w stanie zmieścić stosunkowo niewielkie porcje treści. Jeszcze kilka lat temu było to nie do pomyślenia. Mówiło się, że to co jest poniżej pierwszego ekranu nie istnieje. Badania pokazują coś odmiennego. Okazuje się, że użytkownicy ⅔ czasu na stronie spędzają poniżej pierwszego ekranu. Już w ostatnich dwóch latach pojawiło się wiele ciekawych stron opartych o koncepcję single-page z długimi scrollami. Ciekawym rozwiązaniem, które również zyskuje na popularności, szczególnie na stronach z dużą ilością treści jest, tzn. infinite scroll. Jest to rozwiązanie przy którym przewijając stronę w dół kolejne treści ładowane są dynamicznie, bez konieczności przeładowania całej strony. Taka konstrukcja strony powoduje znacznie większe zaangażowanie użytkownika. Najbardziej popularnym serwisem, który stosuje takie rozwiązanie jest oczywiście FB. Idea długiego scrollowania dobrze się sprawdza również przy stronach wizerunkowych. Musimy jednak przy tym pamiętać, że taka strona musi być atrakcyjna wizualnie. Powinniśmy stosować niewielkie bloki tekstów oraz atrakcyjne grafiki. Z takim rozwiązaniem łatwiej jest zbudować dobrą historię i ciąg zdarzeń, które sprawią, że użytkownik zostanie z nami na dłużej. Takie rozwiązanie niesie ze sobą również pewne ryzyko. Użytkownicy przewijając stronę jedynie ją skanują zamiast czytać od A do Z, dlatego zadaniem projektanta jest takie przygotowanie projektu, aby użytkownik miał na czym zawiesić oko.

źródło: cdn.elegantthemes.com

źródło: studio.uxpin.com

Coraz mniej słów

Aplikacje mobilne, ze względu na wykorzystywanie stosunkowo niewielkiej powierzchni ekranu przyzwyczaiły nas do zastępowania słów określających daną funkcjonalność prostymi piktogramami. Nawet jeśli dany piktogram przy pierwszym kontakcie wydaje się nieintuicyjny po pierwszych doświadczeniach nie mamy wątpliwości z jaką funkcjonalnością się wiąże. Piktogramy dość chętnie są adaptowane również na stronach www. Dzisiaj już nikogo nie dziwią 3 poziome linie, które oznaczają ‘menu’, serduszko, które oznacza dodanie elementu do ‘ulubionych’, lupa już zawsze będzie oznaczać ‘wyszukiwarkę’, a koło zębate przejście do ‘ustawień’. Z czasem takich elementów będzie się pojawiać co raz więcej. Takie graficzne smaczki, dobrze współgrają z minimalistycznymi layoutami.

 

Rada na koniec

Trendy się zmieniają. Warto za nimi podążać, ale nie warto wprowadzać rozwiązania tylko dlatego, że są na topie. Obojętnie co się będzie działo, na pierwszym miejscu powinniśmy stawiać naszych użytkowników. To do nich powinien być dostosowany każdy aspekt naszej strony. Przykładowo ‘hamburger’ stosowany jako ikona menu jest dobrym rozwiązaniem, ale tylko dla użytkowników poniżej 44 roku życia. Dla osób dojrzalszych taki element graficzny będzie nieintuicyjny. Dlatego na stronie skierowanej do osób starszych nie warto stosować takiego rozwiązania. Bierzmy tylko to, co będzie dobre dla naszych odwiedzających.

ta strona używa plików cookies