Czym charakteryzują się nowoczesne strony internetowe? Przykłady
3 min
3 min
Na skróty
Dobre pierwsze wrażenie można zrobić tylko raz — witryna WWW Twojej firmy musi w tym pomagać, a nie przeszkadzać. Czym wyróżniają się nowoczesne strony internetowe w porównaniu z tymi sprzed dekady?
Pierwsza kwestia to dostosowanie projektu strony do wymagań nie tylko tradycyjnych przeglądarek, ale, przede wszystkim, urządzeń mobilnych. Według przeprowadzonej przez Semrush analizy najczęściej odwiedzanych stron WWW w Stanach Zjednoczonych — odsłony ze smartfonów stanowią… 80% całego ruchu.
Mobilne witryny powinny być dokładnie tak samo funkcjonalne, jak ich „stacjonarne” wersje — ale stawiać jeszcze większy nacisk na czytelność treści, skalowalność struktury strony do mniejszego ekranu oraz uproszczenie całego user flow do minimum.
Drugą rzeczą jest projektowanie witryn w taki sposób, aby swobodnie mógł z nich korzystać każdy użytkownik sieci; nawet jeśli na co dzień mierzy się z ograniczeniami ruchowymi czy zmysłowymi.
Kierując się ideą dostępności projektanci znaleźli już wiele rozwiązań:
Ciekawych rozwiązań jest więcej — a wszystkie mają na celu to, aby uczynić korzystanie z witryny komfortowym dla absolutnie każdego. Więcej o tym, jak tworzyć strony internetowe zgodne z zasadami UX (i SXO) piszemy w pozostałych artykułach na naszym blogu — zachęcamy do lektury!
Z czego składa się standardowa strona firmowa? Zapewne ze strony głównej, podstrony poświęconej ofercie marki, zakładki O nas, formularza kontaktowego…
Taki układ wciąż się sprawdza — ale w ostatnich latach prawdziwym trendem stały się witryny typu one-page. Czyli takie, które wszystkie informacje zbierają na jednej, długiej, przewijanej podstronie.
Jeśli ktoś zastanawia się, skąd taka zmiana — odpowiedzi jest kilka. Po pierwsze — one-pagery doskonale pasują do specyfiki urządzeń mobilnych. Na smartfonach dominującym sposobem poruszania się jest przesuwanie ekranu, a nie klikanie kolejnych buttonów. Większość z nas zdążyła się już do tego przyzwyczaić, więc projektując one-pagera nie tylko otrzymujemy stronę gotową pod użytkowników mobilnych, ale i taką, którą możemy od razu przenieść na większy ekran.
Zdj 1. Webflow umożliwia tworzenie efektownych single-pagerów – i sam może się takim pochwalić.
Źródło: webflow.com
Z innej perspektywy, strony typu single-page pozwalają twórcy dokładnie kontrolować to, w jaki sposób użytkownik będzie poruszał się po stronie. Co więcej — to okazja, żeby projektem strony przedstawić prawdziwą opowieść o firmie lub jej produktach — ze wstępem, rozwinięciem i zakończeniem. Na stronach z większą ilością podstron nie mamy ku temu okazji, bo użytkownik po otwarciu witryny może pójść przynajmniej kilkoma ścieżkami.
Jednak (prawie) każda ścieżka zaczyna się na hero section. To coś na kształt cyfrowego baneru; pierwszy element, jaki widzimy na stronie głównej witryny. Nowoczesne strony bardzo chętnie korzystają z takiego schematu:
Doskonałym przykładem takich witryn będą strony produktowe Apple. Polecamy zajrzeć np. na oficjalną stronę prezentującą MacBooka Pro — z minimalistycznym, ale mocnym hero section oraz szczegółowymi informacjami w postaci one-pagera.
Zdj 2. Tak wygląda hero section poświęcone nowemu MacBookowi Pro – udało się umieścić nawet prosty przycisk call-to-action.
Źródło: apple.com/pl/macbook-pro/
Co do samych nagłówków i grafik — te z kolei stają się coraz bardziej angażujące. Nie tylko większe, ale też bardziej dynamiczne. Miejsce statycznych obrazów na wielu witrynach już zastąpiły animacje lub krótkie klipy, a prostych nagłówków — slogany zajmujące przynajmniej pół przestrzeni ekranu.
Cel jest prosty: jak najszybciej przykuć uwagę użytkownika.
Zawodowy copywriter oraz student psychologii na Uniwersytecie Warszawskim. W świecie marketingu internetowego równie mocno, co chwytliwe (i wartościowe) treści interesuje go dobry design. Gdy nie zajmuje się tworzeniem contentu, odkrywa perełki kina niezależnego i pracuje nad własnymi opowiadaniami.
