10 przykładów dobrych praktyk w web designie na 2023 rok

Gdy czytasz ten artykuł, na świecie działa łącznie ponad 1,1 miliarda stron. Co minutę przybywa kolejnych 175. Każdego dnia startują tysiące nowych stron, więc firmy walczą o uwagę konsumentów, zwłaszcza na zatłoczonych rynkach, takich jak e-commerce. 

Tymczasem co drugi konsument mówi, że projekt strony jest ważny dla wizerunku firmy. Co więc marka może zrobić, by stworzyć jedną z tych nielicznych stron, które zostają zauważone, docenione i zapamiętane?

Web design, jak cała branża cyfrowa, nigdy nie przestaje się zmieniać. Pamiętaszneumorfizm? Wyszedł z mody zaskakująco szybko. Przynajmniej w swojej pierwotnej postaci (do tego jeszcze wrócimy).

Jak więc nadążyć za aktualnymi dobrymi praktykami w web designie, żeby Twoja strona przyciągała i zachwycała grupę docelową? Dobry początek to przegląd taki jak ten. Pokazujemy w nim wyjątkowe strony, a na ich przykładzie trendy, które w tym roku i w kolejnych latach będą wyznaczać wygląd internetu.

1. Witryna jednostronicowa: Vaayu (nieruchomości) 

Co nam się podoba w tym projekcie: struktura jednostronicowa, łatwa nawigacja, prosta, ale wyrazista paleta kolorów, scrollytelling

Projekt strony Vaayu to minimalizm w czystej postaci: zaledwie dwa kolory i dwa kroje pisma, a cała treść mieści się na jednej stronie. Mimo to strona nie jest surowa, bo ożywiają ją animacje, poziome przewijanie i jaskrawożółte akcenty. Do tego wszystkie te elementy świetnie pasują do misji marki: Vaayu pomaga firmom zmniejszać ślad węglowy.

Czasem agencji nieruchomości wystarczy jedna strona, żeby zapaść w pamięć

W witrynie jednostronicowej projektant pokazuje treść bez przerw: odwiedzający nie klika i nie czeka, aż wczyta się kolejna podstrona. Scrollytelling (sam w sobie gorący trend) wciąga odwiedzających w opowieść, zamiast namawiać ich do kliknięcia w link „O nas”. Dodaj do tego różne media i interakcje, a uwagę odwiedzających utrzymasz aż do samej „Polityki prywatności”.

2. Interaktywny kursor: Wild Souls (e-commerce)

Co nam się podoba w tym projekcie: figlarny kursor, pastele, mnóstwo interakcji

Karuzele, animowane przyciski, wyróżnienia i przyciągające wzrok (ale nigdy krzykliwe) kolory wystarczą, by skłonić odwiedzających do obejrzenia każdego produktu marki Wild Souls. Kursor, który po najechaniu na produkt zmienia się w oko, to wisienka na torcie: jeszcze bardziej zachęca, żeby zajrzeć do środka.

Strony e-commerce opierają się na prezentacji produktu, a sklep Wild Souls doskonale wie, jak to robić

Interaktywne kursory od jakiegoś czasu zyskują popularność wśród projektantów stron i łatwo zrozumieć, dlaczego: są zabawne i funkcjonalne. Inny przykład z Wild Souls: zamiast zwykłej karuzeli zdjęć postawili na ułożone jedna na drugiej karty z obrazami. Gdy najedziesz na którąś z nich, kursor zmienia się w strzałkę i zachęca, żeby przewrócić kartę i odsłonić następną. Zgrabnie!

3. Cienkie linie: Harvard Film Archive (kultura)

Co nam się podoba w tym projekcie: cienkie linie, czytelny układ, mikroanimacje, styl retro

Strona Harvard Film Archive to niewielka, ale cenna perełka minimalizmu, która wygląda jak dawny drukowany program kinowy. Cienkie linie i separatory ułatwiają nawigację i porządkują strukturę strony. Podobnie działają subtelne animacje: cieszą oko i podpowiadają, które elementy są interaktywne. Nawet ekrany ładowania, stylizowane na dawną kamerę filmową, narysowano cienką kreską w duchu retro.

Owszem, minimalizm nie jest niczym nowym. Ale po co rezygnować z czegoś, co działa tak dobrze? 

Linie i obrysy to prosty i skuteczny sposób, żeby podzielić treść strony i skierować uwagę użytkowników na to, co ważne. Dzięki nim projektant może ograniczyć inne środki, których zwykle używa się w tym celu, takie jak kolor, typografia czy kontrast. Efekt to czysty, harmonijny projekt bez bałaganu i wizualnego przeładowania.

4. Styl Memphis: Mapbox (mapy online)

Co nam się podoba w tym projekcie: tryb ciemny, inspiracje stylem Memphis, prostota, struktura jednostronicowa

Strony takie jak jedna z odsłon wyzwania Maptober firmy Mapbox pokazują, jak sięgnąć po dawne trendy i tchnąć nowe życie we współczesne projekty webowe. Choć wyzwanie już się skończyło, jego strona pozostaje znakomitym przykładem powracającego do łask stylu Memphis, którego w 2023 roku zobaczymy więcej. Są tu jaskrawe kolory, abstrakcyjne kształty i odważna geometria, wzbogacone prostymi, ale angażującymi animacjami. W efekcie strona wygląda jednocześnie retro i futurystycznie.

Obecny szał na lata 90. i wcześniejsze trendy oparte na nostalgii dowodzą, że niezmiennie lubimy cofać się w czasie

W stylu Memphis świetne jest to, że łączy żywe kolory z czarnym tłem. Dzięki tym kolorowym akcentom tryb ciemny nie musi już być ponury. Jednocześnie strona pozostaje czytelna i mniej męczy oczy.

5. Claymorfizm: Potion (platforma treści)

Co nam się podoba w tym projekcie: claymorfizm, biała przestrzeń, gigantyczna typografia

Neumorfizm był głównym trendem web designu w latach 2020 i 2021. Gładki, lekki i namacalny, szybko wskoczył na szczyt. A potem równie szybko zaczął znikać.

Zdążył jednak odcisnąć ślad na trendach, które dopiero nadejdą. Jednym z nich jest claymorfizm. To nowy ulubiony styl wizualny projektantów, którzy lubią czystą formę, stonowane kolory, cienie, zaokrąglone rogi… i puszyste rendery 3D. Chcesz przykładów? Spójrz na stronę Potion. To mieszanka pastelowych odcieni fioletu i bloków w kształcie tabletek, a na deser uroczy kot-czarodziej w kapeluszu, bohater marki.

Dużą zaletą claymorfizmu jest elastyczność. Dobrze zrobiony sprawdzi się w każdej branży, która ma bezpośredni kontakt z klientem: w SaaS, e-commerce, fintechu, a nawet w ochronie zdrowia

Projektant może dowolnie wybierać i łączyć cechy tego trendu, żeby dopasować je do potrzeb niemal każdej strony czy produktu cyfrowego. Dlatego claymorfizm to idealny i bezpieczny wybór dla marek, które chcą pokazać, że są przyjazne i przystępne.

6. Glassmorfizm: CSIC (badania naukowe)

Co nam się podoba w tym projekcie: glassmorfizm, abstrakcyjne kształty, nowatorskie podejście do stron rządowych

Claymorfizm nie jest jedynym „-izmem” na tej liście. Poznaj jego błyszczącego kuzyna: glassmorfizm. To raczej technika niż pełnoprawny styl, a nazwę zawdzięcza swoim kluczowym cechom: przezroczystości, odbiciu, rozmyciu i cieniowi, które dają efekt mlecznego szkła. Taki efekt potrafi nadać każdej stronie nowoczesny i przestronny charakter. Wystarczy spojrzeć na znakomitą stronę Hiszpańskiej Narodowej Rady ds. Badań Naukowych, CSIC.

Strony instytucji państwowych kojarzą Ci się z nudą? Strona CSIC zmieni Twoje zdanie

Nie bez powodu glassmorfizm stosuje się tak oszczędnie: cały ten blask i jaskrawe kolory łatwo przytłaczają użytkownika. Zrównoważ je więc ciemniejszym tłem, a efekt będzie najlepszy. Technikę możesz też zastosować tam, gdzie chcesz skupić wzrok odwiedzających. Żywe odcienie niebieskiego i różowego naprawdę przyciągają uwagę!

7. Typograficzna sekcja hero: re_ (handel detaliczny)

Co nam się podoba w tym projekcie: minimalistyczna sekcja hero, typografia, użyteczność

Od pierwszego wrażenia zależy, czy odwiedzający zostanie na dłużej, i właśnie temu służy sekcja hero. Zgodnie z najnowszym trendem sklep re_ grocery postawił na typografię i dużą nazwę marki pisaną krojem szeryfowym. Dzięki temu odwiedzający od razu wyczuwają najważniejszą cechę firmy: prostotę. Strona konsekwentnie podtrzymuje ten wizerunek pomarańczowo-beżową paletą, uporządkowanym układem i minimalistycznymi zdjęciami produktów. 

Zwróć uwagę, jak strona łączy kroje szeryfowe i bezszeryfowe. Dzięki temu wygląda nowocześnie i tradycyjnie zarazem

Połączenie minimalizmu i typografii wygląda intrygująco, ale pamiętaj, że nie do każdej marki pasuje. Liczy się złożoność: bardziej zaawansowany produkt czy abstrakcyjna usługa mogą wymagać więcej niż jednej strony. Wtedy użyj sekcji hero, żeby pokazać, do czego służy produkt i na jaką potrzebę odwiedzających odpowiada. Tak zainteresujesz ich na dłużej.

8. Brutalizm: Curry Café (gastronomia)

Co nam się podoba w tym projekcie: brutalizm, ruch, szalone kolory

Curry Cafe poszło na całość: projekt przypomina raczej plakat albo opakowanie jedzenia niż zwykłą stronę restauracji. Przeciążenie zmysłów kontrastuje z prostą, jednostronicową strukturą, a żywe ikony przypominające naklejki uzupełniają ziarniste zdjęcia dań. To wzorcowy przykład brutalizmu w web designie. W odróżnieniu od brutalizmu w architekturze nie oszczędza na żywych kolorach i ozdobach, ale tak jak on ma surową formę. Brutalizm łamie wszystkie zasady, więc każda strona w tym stylu wyróżnia się po swojemu.

Sekcja hero potrafi zdziałać cuda, gdy chodzi o uwagę odwiedzających. A co, jeśli robi to cała Twoja strona?

Trzeba przy tym pamiętać, że takie podejście często poświęca użyteczność dla oryginalności. Dlatego ten trend zdecydowanie nie nadaje się do branż takich jak finanse czy ochrona zdrowia. Jeśli jednak chcesz zrobić wrażenie i zaskoczyć (albo wręcz zszokować) użytkowników, brutalizm się sprawdzi. Spotkasz go tam, gdzie liczą się oryginalność i kreatywność: w portfolio web designerów, na stronach festiwali czy w modowym e-commerce.

9. Strona jako doświadczenie: Dr. Dabber (rekreacja)

Co nam się podoba w tym projekcie: animowane interakcje, media, spójność wizualna

Na stronie Dr. Dabber kluczowe jest słowo „doświadczenie”, bo strona ma jak najwierniej pokazać różne modele waporyzatorów i skusić potencjalnych kupujących. I kusi skutecznie: dopracowane rendery 3D unoszą się, błyszczą i reagują na ruch kursora, więc produkt wydaje się niemal namacalny. A jeśli chcesz przyjrzeć mu się jeszcze bliżej, strona pokaże zbliżenie waporyzatora ze wszystkimi częściami w najdrobniejszych szczegółach. Całość to prawdziwe widowisko do przewijania: wysokiej jakości klipy, ruchoma typografia, minimalistyczna paleta kolorów i łagodna muzyka ambient.

Znasz to uczucie, gdy strona jest tak przyjemna, że po prostu nie możesz przestać jej przewijać?

Nie chodzi o to, żeby animować każdy element strony. Ale w 2023 roku strony pomyślane jako doświadczenie, z których korzysta się z czystą przyjemnością, bez wątpienia staną się jedną z wiodących dobrych praktyk. Interaktywne przyciski, ruch, media, różnorodne tekstury i inne pozornie zbędne dodatki bardzo pomogą, jeśli chcesz zainteresować odwiedzających nie tylko stroną, ale też marką i produktem.

10. Widoczne siatki: Salus (pielęgnacja skóry)

Co nam się podoba w tym projekcie: odsłonięta siatka, przezroczystość, podwójne przewijanie

Dziś projektanci dobrze wiedzą, jakie korzyści daje pokazanie szkieletu strony. Sprawdza się to zwłaszcza w e-commerce, gdzie produkty można wyświetlać w osobnych „komórkach”, jak w przypadku Salus. Taka struktura jest łatwa w nawigacji i pozwala projektantowi płynnie wpleść obrazy i funkcje takie jak podwójne przewijanie.

Przez długi czas siatki były tylko narzędziem. Teraz same coś mówią

Odsłonięte siatki są na tyle elastyczne, że sprawdzą się w wielu branżach. Ciekawym zastosowaniem są blogi i inne strony pełne tekstu. Siatka daje dość wizualnych atrakcji, żeby ograniczyć liczbę obrazów i mediów, a strona nie zrobi się nudna. Co więcej, dzięki blokowej strukturze strony oparte na siatce łatwo dopasowują się do różnych rozmiarów ekranu, zgodnie z zasadami projektowania responsywnego.

Czas wdrożyć te dobre praktyki web designu na 2023!

Oto nasza dziesiątka. Zaledwie musnęliśmy temat, a do końca roku pojawi się jeszcze wiele nowych pomysłów. Jedno jest pewne: z trendami omówionymi w tym artykule czeka nas bardzo kreatywny czas i mnóstwo ciekawych nowych projektów!

Cieszą Cię tegoroczne nowości w web designie? Nas tak, podobnie jak nasz zespół kreatywnych projektantów stron. Nie mogą się doczekać, aż poznają Twoje pomysły i wprowadzą te praktyki w życie, więc odezwij się i porozmawiajmy!