Nowoczesne strony www – web design 2020

User experience
Web Design 2020

Jak powinna wyglądać nowoczesna strona internetowa, aby móc podobać się w roku 2020? Co powinna posiadać, a czego powinna unikać? Jakie rozwiązania warto zastosować, aby przyciągnąć wzrok użytkownika oraz zwiększyć szanse na jego aktywność? O web designie i projektach stron www w niniejszym artykule.

Web design 2020

Sztuka projektowania stron jest zadaniem wymagającym. Łączy w sobie wiele umiejętności: programistycznych, designerskich, marketingowych, koncepcyjnych, komunikacyjnych czy wiedzę opartą na informacjach o sprzedaży czy samych klientach. Web design w 2020 roku wymaga bardzo świeżego i niesztampowego podejścia do projektowania strony www, aby zaserwować użytkownikom coś, co naprawdę im się spodoba, z czym będą mogli emocjonalnie się utożsamiać, i co finalnie wpłynie na ich decyzję, której oczekujemy. Aby zobaczyć jak wiele zmieniło się w projektowaniu stron, spójrzmy na jednym z najbardziej popularnych serwisów na przestrzeni lat – Onet.pl:

Dawny układ tabelkowy dawno już odszedł w zapomnienie. Obecnie zamiast zbitej paczki linków do podstron, przeważa starannie zaplanowany układ, który cechuje się wygodnym podziałem na sekcje. Na stronie dominuje komfortowy rozstaw bloków oraz wszechobecna przestrzeń. Kształty mają charakter poprawiający współczynnik klikalności (zaokrąglenia).

Przestrzeń

Jednym z dominujących trendów w web designie jest obecnie minimalizm oraz przejrzystość. Strona internetowa powinna w klarowny sposób przedstawiać treść i wyzbyć się elementów dekoncentrujących w odbiorze. Cały układ często tworzony jest w oparciu o ścieżkę decyzyjności użytkownika. W przypadku stron firmowych kolejne sekcje, które odkrywamy po scrollowaniu, to de facto informacje wynikające z sekcji nadrzędnych. Takie rozwiązania możemy znaleźć na stronie firmy Monetate. Warto zwrócić tutaj uwagę na proste, ale komfortowe wdrożenia jak spore przestrzenie pomiędzy elementami menu, dużo przestrzeni pomiędzy menu a pierwszym nagłówkiem czy nieskomplikowane efekty po najechaniu na przyciski.

Kolejnym przykładem, który wyznacza trendy jest strona jednej z najbardziej rozpoznawalnych marek – Apple. Lider popularności smartfonów w pełni wykorzystuje całą przestrzeń ekranu, który ma przed oczami użytkownik, dbając jednocześnie o wyrafinowany minimalizm, w pełni koncentrując się na swojej ofercie – produktach. Zdjęcia, przycisk, opisy, nagłówki – na stronie Apple żadna rzecz nie wydaje się być zbędną, przekaz został skondensowany do absolutnego minimum, aby pozwolić użytkowniki cieszyć się nie tylko zdjęciami produktów, ale także całą stroną, która jest dokładnie taka jak produkty Apple’a – designerska.

Skala

Do stron szczególnie interesujących włączyć możemy te, które projektowane są przez agencje specjalizujące się w szeroko rozumianym designie – także samych stron www. Przykładem strony internetowej, która jako główny element projektu wykorzystuje skalowanie elementów do niestandardowych rozmiarów jest strona agencji PND Futura.

pnd futura

Podobne rozwiązania, z dużym tekstem, zajmującym znaczną część ekranu możemy spotkać się na stronie agencji K2. Chociaż skala może się wydać rozwiązaniem banalnym, w istocie wymaga dobrego zmysłu przestrzennego, nie chcemy bowiem pokazywać użytkownikom dużych tekstów, wielkich nagłówków i jeszcze większych call to action, projektując to tak, że część z nich nie zmieści się w sekcji, w której się znajdujemy.

Przykład efektu “oversize” możemy znaleźć także na stronie agencji digitalowej Candour:

candourDuże czcionki, wyraźne teksty, proste, jednoznaczne piktogramy – tego rodzaju strony z pewnością są łatwo zapamiętywalne.

Bez fajerwerków

Czasy wybujałych efektów na stronach minęły. Prostota przejmuje stery, ale za prostotą musi iść także technologia. Nowoczesne strony www to strony szybkie, w pełni responsywne, skalowalne dla każdego urządzenia oraz lekkie i łatwe w odbiorze. QuantumBlack pokazuje nam w jaki sposób przedstawić swoją ofertę w sposób prosty i rzeczowy – bez fajerwerków. Układ jest prosty, wręcz oczywisty. Dostajemy tyle informacji, ile powinno nam wystarczyć, aby zainteresować się ofertą. W contencie dominują krótkie hasła i zwięzłe akapity.

W sieci znajdziemy także przykłady blogów, które stawiają na web design bez fajerwerków. Jednym z nich jest UXmatters – serwis związany z user experience. Artykuły na stronie ulokowane są centralnie, design jest bardzo przejrzysty, co pozwala skupić się na tekście.

Flat design

Liderem flat designu, a z pewnością przodownikiem, często wyznaczającym trendy w tym gatunku jest firma Google, ale tutaj nie będę prezentował jej dzieł, gdyż większość z Was ma z nimi do czynienia każdego dnia. Spójrzmy jednak na wytwory innych brandów, które flat design wykorzystują w projektowaniu swoich stron www. Serwis zapakuj.to zgrabnie łączy minimalizm, proste kolory bez gradientów, podstawowe “hovery” (efekty po najechaniu na przycisk/element layoutu) czy kolejne sekcje. Serwis zbudowanie na kanwie flat designu jest przejrzysty, prosty w odbiorze, łatwo przyswajalny. Flat design zwykle wpływa również na szybkość (ze względu na niewielką ilość efektów) i skalowalność – jest łatwy do przełożenia na wiele urządzeń.

Step by step

Design stron nie zmienia się wyjątkowo dynamicznie, to proces stosunkowo powolny, biorąc pod uwagę liczbę stron. Szybciej jednak zmienia się koncepcja świadomości odbiorców (konsumentów), którzy oczekują zawartości zbudowanej pod ich oczekiwania. Jednym z kluczowych elementów w tym aspekcie jest przekazywanie nam wiedzy we właściwej kolejności. Przykładem strony, który dobrze korzysta z przekazywania nam wiedzy o swoim produkcie krok po kroku jest Upwork.com.

upwork

Od ogółu do szczegółu, stopniowe przechodzenie użytkownika do kolejnych “etapów” zdobywania wiedzy. Najpierw dowiaduje się o kluczowej ofercie firmy, następnie spogląda na podział oferty, dowiaduje się dlaczego warto firmie zaufać, poznaje najcenniejsze dla firmy mechanizmy, a później zapoznaje się z cennikiem. Jeżeli chce poznać szczegóły, może przejść do rozbudowanego menu, które znajduje się w dole strony.

Efektownie ale z dystansem

Wszyscy zwracamy uwagę na coś, co kusi nas swoim wyglądem. Pierwsze spojrzenie ma znaczenie, dlatego warto je wykorzystać i przyciągnąć użytkownika czymś, co już na samym początku sprawi, że zrobi chociaż jeden scroll, a później kolejne. Bounteous.com to przykład strony, który świetnie wygląda, wykorzystuje niewielką ilość efekciarstwa, jest przy tym minimalistyczna ale nowoczesna. W projektach tego rodzaju stron często wykorzystuje się nieco krzykliwe kolory, flat design, oszczędność contentu, a przy tym oszczędność przekazu. Niewielka ilość informacji ma budzić zainteresowanie.

bounteous

Innym przykładem o podobnych właściwościach jest strona Superlab.co (agencja designu). Spójrzmy na to:

superlab

Abstrakcyjne kształty, nietuzinkowe połączenie kolorów (fiolet, zieleń, pomarańcz, żółć), krój przypominając czcionkę z maszyny do pisania, minimalizm, oszczędność, szacunek do przestrzeni. Do tego wszystkiego dochodzi prosta, elegancka stopka:

stopka superlab

Jeżeli wierzysz w sukces swojego portfolio, a jednocześnie dowodzisz, że znasz się na tym co robisz zawodowo, bezpiecznie możesz zainwestować w stronę, która mówi sama za siebie, a właściwie za Ciebie.

Dodaliśmy trochę efektów ale nie są wkurzające

Analizując poprzednie przykłady, możemy dojść do wniosku, że w 2020 roku efekciarstwo i stosowanie tryliona bajeranckich slide’ów nie ma sensu. Spowalnia stronę, może denerwować, może zniekształcać przekaz, a nawet nie działać. Chcesz zastosować efekty? Weź przykład z Futured.app. Strona stosuje tylko te efekty, które mają konkretne zastosowanie. Przykładem jest prosta animacja włączona po najeździe na grafikę przypominającą zrzut ze smartfona, która ma prezentować portfolio firmy czyli aplikację. Pozostałe efekty zastosowane na stronie to tylko wykorzystanie płynnych przejść czy zmiany kolorów. Nie wywołuje to zatem wrażenia przerostu formy nad treścią, wręcz przeciwnie – zbliża nas do sytuacji zapamiętania strony agencji.

futured

Alternatywa

Niektóre strony są tak alternatywne, że aż odrzucają, kolekcjonuje je serwis Brutalist Websites. Layout stron zagregowanych w tym serwisie jest celowo rozczłonkowany i wymemłany, ale należy oddać szacunek twórcom, którzy celowo stosując niekonwencjonalne rozwiązania lepiej oddają charakter swojej idei czy marki niż latami dopracowywane popularne serwisy. Nie będziemy jednak skupiać się na ww. stronach, gdyż to temat na zupełnie odrębne rozważania.

Do miana alternatywnego designu można zaliczyć strony, które niestandardowo, niesztampowo podchodzą do prezentacji treści, zachowują przy tym logikę oraz spójność przekazu. Bardzo eleganckim i przystępnym przykładem strony zaprojektowanej nieco w alternatywny sposób jest Dzanga-Sangha.org – czyli obszaru objętego ochroną UNESCO znajdującego się w Republice Środkowej Afryki.

dzanga sangha

Menu rozwija się z lewej strony i wymaga kliknięcia (takie rozwiązanie zwykle widoczne jest tylko na stronach w wersji mobilnej). W prawej części obserwujemy nakładkę “Scroll”, która zachęca nas do zjechania w dół ekranu. Warto zauważyć, że kluczowy nagłówek strony znajduje się w prawym, niższym sektorze above the fold. To zdecydowanie niestandardowe rozwiązanie. Z podobną cechą spotykamy się także na podstronach, tam nagłówek ulokowany jest w prawej części, poprzedzony jest dużą fotografią:

green heart of africa

Cały serwis warty jest uwagi, ponieważ większość elementów została zaprojektowana nieco na opak, nie umniejsza to jednak jej przejrzystości oraz przyjazności – w ogólnym odbiorze jest bowiem znakomita.

Innym przykładem zastosowania alternatywnych rozwiązań jest popularny serwis ekspercki Smashing Magazine.

Blog bez zdjęcia głównego? Animacja ustawiona na zdjęcie autora? Kategorie wylistowane jedna po drugiej nad stopką strony zamiast w menu górnym? Wyszukiwarka działające w trybie live, zwracająca wyniki nie pod paskiem wyszukiwania, a od razu na liście artykułów? Smashing Magazine jest nieco “inny” lecz wciąż bardzo dobrze zaprojektowany. Doskonale wykorzystuje przestrzeń, wielkość czcionek oraz całościowy layout. To serwis godny uwagi w 2020 roku.

smashing magazine

Jak przedstawić swój produkt?

Dobry design to nie tylko świetny wygląd, to przede wszystkim sprzedażowy sposób prezentacji. Chcę mieć ten produkt, chcę korzystać z usług tej firmy, chcę poznać tych ludzi – takie skojarzenia przychodzą nam do głowy, jeżeli patrzymy na coś, co jest dobrze zaprojektowane.

Elaboraty wychwalające nasz produkt i nieskończone opisy funkcjonalności mogą być nużące i wtórne. Zachęcam aby wielokrotnie przemyśleć to co chcemy zaprezentować i skupić się na prezentacji esencji. Najważniejsze elementy, sytuacje użycie, kluczowe aspekty, estetycznie docięte zrzuty i jeszcze raz – produkt w użyciu – większość z nas chce wiedzieć “z czym się to je”!

Zwróćcie uwagę na serwis Sistrix, najpierw dostajemy przed oczy sporej wielkości call to action i magiczny przycisk, który zrobi za nas całą resztę – czyli pokaże demo. Ok, ale co się stanie jeżeli spróbujemy je włączyć? No cóż, rejestracja do triala. Spokojnie, przywykliśmy do tego, zanim na cokolwiek się zdecydujemy, możemy wrócić do scrollowania strony głównej i spojrzeć na to, czego szukamy, mianowicie na produkt w użyciu, tam w pełnej okazałości widzimy wielki zrzut programu Sistrix. Fun fact: Sistrix zadbał o to, aby pokazać nam zrzut z analizy polskiej polskiej strony 🙂 W innych wersjach językowych widzimy podgląd ze stron popularnych zagranicą.

sistrix

Dalej jest podobnie, Sistrix podzielił główne sektory swojej aplikacji na części prezentując nam kolejne zrzuty z zastosowania produktu. To nie wszystko, pod każdym z nich widnieje odróżniający się kolorystycznie od tła button, który przeniesie nas do podstrony z rozszerzonymi informacjami i kolejnymi zrzutami. To kolejny krok w stronę zapisania się na trial.

Podobnym przykładem do Sistrix jest Sqreen.com. Twórcy projektujący stronę tego oprogramowania dołożyli kolejną cegiełkę do wsparcia zapisywania się na trial zamieszczając krótki film z użyciu programu. 3 minuty pozwolą nam zaprezentować kluczowe elementy i zdecydować czy jesteśmy zainteresowani produktem, czy to coś zupełnie nie dla nas. Warto zwrócić również uwagę na minimalistycznie ugryzienie contentu. Treści jest mało, opiera się niemal w całości na 1-2 zdaniach dotyczących kolejnych warstw produktu:

sqreen

Na koniec moich rozważań na temat webdesignu w 2020 roku postanowiłem zostawić stronę, która w mojej ocenie jest perfekcyjnym sposobem na prezentację produktu, a dodatkowo łączy wiele elementów projektowania stron internetowych, które zostały omówione w tym artykule. Mowa o Bite Toothpaste Bits. Dodam, że strona została wyróżniona w tym roku przez serwis Awwwards.

Flat design, znakomita kolorystyka, proste efekty, przedstawienie sytuacji użycia, duże kroje czcionek, umiejętne wykorzystanie przestrzeni, zero zbędnego contentu. Między innymi to te elementy przemawiają za tym, aby określić tę stronę jako jedną z wzorcowych dla web designu AD 2020.

bite toothpaste bits


Podsumowanie

W marketingu internetowym popularnym wciąż sformułowaniem jest “content is king“. Dobry design, nowoczesny design, web design 2020 nie lubi się zbyt mocno z contentem w popularnym tego słowa znaczeniu. Treść i w ogóle zawartość jest ważna, ale jeszcze ważniejszy jest sposób jej prezentacji, wykorzystanie maksimum możliwości jakie daje nam obróbka contentu. Eleganckie, nowoczesne strony, zwłaszcza te prezentujące jakąś ofertę, tam gdzie nie muszą, nie piszą zbyt wiele. Oszczędnie stosują nagłówki, dbają o przestrzeń, dbają o przyjemny dla oka układ, rozkład sił pomiędzy tekstem, zdjęciami, filmami a animacjami. Nowoczesny design często przytula się z minimalizmem, który dla kontrastu miesza się z abstrakcją i większym krojem pisma. Istotna jest forma przekazu, która powinna być dopasowana do oczekiwań naszego targetu, istotne jest pokazywanie tego kim jesteśmy, co tworzymy, co oferujemy i jak może to zachwycić naszych odbiorców.

Ostatnio zmodyfikowano: 19 czerwca 2020

Radek Skowron

Z marketingiem internetowym związany od 2014 roku. Specjalizuje się w SEO oraz komunikacji wizerunkowej. Zainteresowany UX, designem, programowaniem oraz innowacyjnymi technologiami.