Jak stworzyć stronę WWW dostępną dla każdego? Trendy 2021 w nowoczesnych stronach internetowych.

W obecnym otaczającym nas świecie dostęp do Internetu nie jest już czymś ekskluzywnym, lecz jest standardem dostępnym dla każdego.

W 2020 r. w Polsce regularnie korzystało z Internetu 81,4% populacji w wieku 16–74 lata (źródło: GUS). Na tak dużą grupę osób składa się całe nasze społeczeństwo, które jest bardzo zróżnicowane pod wieloma względami. Jako twórcy stron i rozwiązań internetowych musimy być świadomi odpowiedzialności, jaka na nas ciąży.

Wyzwania dla branży internetowej w 2021 roku

Rok 2020 przeniósł do Internetu jeszcze więcej gałęzi życia codziennego, „zmuszając” do korzystania z niego coraz szersze grupy osób. Wiele spraw nie uda nam się już załatwić drogą tradycyjną, jedynie elektroniczną. Dla większości osób jest to z pewnością wielkim plusem. Musimy jednak pamiętać o osobach, dla których korzystanie z wszystkich dobrodziejstw cyfryzacji wiąże się z pewnymi ograniczeniami. Mowa tutaj np. o osobach starszych (z mniejszym doświadczeniem cyfrowym) lub niepełnosprawnych. Napotykają oni na problemy z dostępnością nie tylko w rzeczywistym świecie, ale też w tym wirtualnym.

Tworząc strony WWW oraz treści dla Internetu jesteśmy niejako gospodarzami dla wszystkich internautów. Niektórzy z nich potrzebują dodatkowych udogodnień oraz naszej uwagi, aby móc w odpowiedni sposób zapoznać się z treściami oraz korzystać z oferowanych usług. Trendy w projektowaniu stron WWW w 2021 roku zmierzają do tego, aby każdy użytkownik postrzegał Internet jako miejsce przyjazne oraz w pełni dostępne, bez żadnych ograniczeń.

Powody, dla których strona internetowa może powodować odrzucenie wśród użytkowników:

  • brak odpowiednio przygotowanej wersji mobilnej,
  • brak odpowiednich udogodnień dla osób niepełnosprawnych,
  • nieprzejrzysta struktura oraz nawigacja,
  • niska wydajność i szybkość działania,
  • zbyt skomplikowana budowa dla użytkowników z mniejszym doświadczeniem cyfrowym.

Mobile First Design

Mobile First Design nie jest trendem nowym, lecz stale zyskującym na sile i znaczeniu. W 2021 roku twórcy rozwiązań internetowych muszą przywiązywać jeszcze większą uwagę do tego, jak wygląda strona WWW na urządzeniach mobilnych oraz jak bardzo jest wydajna. Zmusza ich do tego zdrowy rozsądek (poparty statystykami) oraz Google, który otwarcie głosi indeksację wyników tylko z poziomu urządzeń mobilnych (Mobile first indexing).

Nowoczesne tworzenie stron WWW, zachowując zasady Mobile First Design, wymaga od nas zmiany naszego podejścia. Musimy być świadomi, że więcej użytkowników zobaczy stronę za pomocą telefonu niż laptopa. W niektórych przypadkach proporcja jest kolosalna, nawet 90% do 10% na korzyść mobile. Aby sprawdzić grupę odbiorców swojej strony i ich urządzenia wystarczy zajrzeć do statystyk (np. Google Analytics).

Stosunek odwiedzin ze względu na urządzenie
Stosunek odwiedzin ze względu na urządzenie, Google Analytics

Nowoczesne strony internetowe są prostsze.

Jeśli jesteśmy świadomi potencjału naszych użytkowników, z pewnością więcej czasu poświęcimy na dopracowanie mobilnej wersji strony WWW. Urządzenia mobilne różnią się od laptopów i komputerów pięcioma kluczowymi kwestiami:

  • rozmiar — telefony są znacznie mniejsze, przez co elementy na ekranie muszą być dopasowane swoją wielkością, aby były czytelne.
  • rozdzielczość — o ile w przypadku wersji desktop mamy sporo obszaru do dyspozycji, tak w wersji mobilnej tego miejsca jest znacznie mniej. Warto zrezygnować z dodatkowych bloków nic niewnoszących do projektu oraz zbędnych "przeszkadzajek".
  • orientacja ekranu — z reguły na urządzeniu mobilnym korzystamy z orientacji pionowej, a w przypadku komputerów jest to raczej orientacja pozioma. Należy jednak pamiętać, że w każdym momencie użytkownik może obrócić swój telefon, a nasza strona musi być na to gotowa.
  • obsługa — komputer i laptop obsługujemy za pomocą myszki lub touchpada, które mają wpływ na ruch kursora. Jest to bardzo precyzyjne rozwiązanie. Z kolei z telefonu korzystamy za pomocą naszych palców, które z racji na obszar styku z ekranem już tak precyzyjne nie są. Ważne, aby elementy, w które należy kliknąć, miały odpowiednią wielkość, a poszczególne linki nie nakładały się na siebie.
  • parametry — komórki z reguły mają gorsze parametry niż komputery. Używanie na stronie mocno zasobożernych elementów może mieć wpływ na niską szybkość i słabe wyniki wydajności.

Mobilny użytkownik oczekuje od naszej strony szybkiego załadowania oraz łatwej nawigacji do informacji, której poszukuje. Pomoże nam w tym maksymalna przejrzystość układu oraz prostota, czyli nieśmiertelny minimalizm zarówno w sferze UX, jak i w UI. Jeśli większość czasu powinniśmy poświęcić dla wersji mobilnej, a wersja desktopowa powstaje na bazie prostej wersji mobilnej, oczywistym wydaje się, że nie powinniśmy przesadzać z rozbudową wersji desktop. Zatem, czy nowoczesne strony internetowe są prostsze? Z pewnością tak.

W Mobile First Design nie chodzi tylko o to, aby rozpocząć projektowanie od smartfona. Ważne jest, aby deweloperzy i programiści rozpoczęli pracę od stworzenia wersji na telefon, dopiero później rozbudowując ją do wersji desktop. Tylko w ten sposób możliwe jest osiągnięcie najlepszych wyników wydajnościowych dla urządzeń mobilnych.

Wskaźniki internetowe „Web Vitals”

Google na przełomie roku zaktualizował oficjalne metryki „Web Vitals”, służące do mierzenia wydajności strony internetowej. Dodatkowo udostępnił kalkulator Lighthouse Scoring Calculator.

Osiągnięcie 100% w każdym wskaźniku Web Vitals
Osiągnięcie 100% w każdym wskaźniku „Web Vitals”, web.dev

Aktualne wskaźniki internetowe „Web Vitals” to:

  • FCP (First Contentful Paint) - mierzy, ile czasu zajmuje przeglądarce wyrenderowanie pierwszego fragmentu treści DOM po przejściu użytkownika na Twoją stronę. Waga 15%. Więcej informacji.
  • SI (Speed Index) - mierzy, jak szybko treść jest wyświetlana wizualnie podczas ładowania strony. Waga 15%. Więcej informacji.
  • LCP (Largest Contentful Paint) - podaje czas renderowania największego obrazu lub bloku tekstu widocznego w oknie. Waga 25%. Więcej informacji.
  • TTI (Time to Interactive) - mierzy, ile czasu zajmuje, aby strona stała się w pełni interaktywna. Waga 15%. Więcej informacji.
  • TBT (Total Blocking Time) - mierzy całkowity czas, przez który strona nie reaguje na dane wejściowe użytkownika, takie jak kliknięcia myszką, stuknięcia ekranu lub użycie klawiatury. Waga 25%. Więcej informacji.
  • CLS (Cumulative Layout Shift) - mierzy sumę wszystkich indywidualnych wyników przesunięć układu dla każdego nieoczekiwanego przesunięcia układu, które ma miejsce podczas całego okresu istnienia strony. Waga 5%. Więcej informacji.
Jak niestabilność układu może negatywnie wpłynąć na użytkowników. Źródło: web.dev

Musimy mieć świadomość, że zarówno w Polsce, jak i na świecie nie wszyscy mają dostęp do szybkiego Internetu. Sporo naszych potencjalnych użytkowników posiada wolne łącze o niskiej prędkości. W takich sytuacjach, gdy nasza strona ładuje się kilka sekund, następuje odrzucenie i zostaje ona zamknięta. Nie możemy sobie na to pozwolić, dlatego tak ważna jest jej wydajność i szybkość działania.

Z informacji Google wynika, że metryki będą stale rozwijane i dopasowywane do obecnych realiów. Nie może więc dziwić fakt, że nasza strona internetowa po pewnym czasie ma gorsze wyniki wydajności, mimo że sama nie uległa żadnym zmianom.

Dostępność stron internetowych

Prawidłowa dostępność w doświadczeniu użytkownika (Accessibility in User Experience) w przypadku stron internetowych dotyczy każdego etapu pracy nad nią. Począwszy od wczesnej fazy tworzenia architektury serwisu i makiet funkcjonalnych, przez projektowanie graficzne, po kodowanie warstwy front-end oraz wdrożenie programistyczne. Przez cały ten okres nie możemy zapomnieć o prawidłowej pracy nawet copywritera. Często powodami, dla których użytkownicy gubią się na stronie, jest niejasny przekaz konkretnych jej elementów lub nieprawidłowo opisane poszczególne sekcje.

W przypadku wysokiej dostępności na stronie WWW musimy zwrócić szczególną uwagę na osoby niepełnosprawne lub posiadające pewne zaburzenia utrudniające korzystanie z cyberprzestrzeni. Najczęściej są to:

  • osoby niewidome lub niedowidzące,
  • osoby niesłyszące,
  • osoby niepełnosprawne ruchowo,
  • osoby z zaburzeniami funkcji poznawczych,
  • osoby z padaczką fotogenną,
  • osoby z dysleksją.

Nie mów tylko kolorami.

Chcąc wyróżnić jakąś informację, nie możemy bazować jedynie na zmianie koloru. Często osoby, które odwiedzają naszą stronę, mają problem z prawidłową ostrością wzroku czy też rozróżnianiem kolorów. W takiej sytuacji dany komunikat (np. błąd, zagrożenie) lub podpowiedź może nie być odpowiednio odebrana przez użytkownika i najzwyczajniej zignorowana. Z tego powodu cierpi cały UX strony.

Prawidłowe wyświetlenie czytelnego komunikatu z błędem
Prawidłowe wyświetlenie czytelnego komunikatu z błędem.

Oprócz samej zmiany koloru warto zadbać o czytelny komunikat, który dodatkowo zaleca się wzbogacić o jednoznaczną ikonę.

Stosuj prawidłowy kontrast dla tekstów i nagłówków.

Jednym z błędów często zwracanych przez web.dev jest: „Background and foreground colors do not have a sufficient contrast ratio”, co oznacza, że kolory tekstu w stosunku do tła nie mają wystarczającego współczynnika kontrastu. Według WCAG 2.1 wynosi on odpowiednio:

  • Teksty o rozmiarze 18 punktów lub pogrubione o rozmiarze 14 punktów wymagają współczynnika kontrastu 3:1.
  • Wszystkie mniejsze teksty wymagają współczynnika kontrastu 4.5:1.

Mimo tego, że błąd ten tylko nieznacznie osłabia ogólny wskaźnik Accessibility, warto nie przejść koło niego obojętnie. Często do osiągnięcia prawidłowego współczynnika kontrastu wystarczy lekko wzmocnić koloru tekstu lub tła, dzięki czemu możemy większej grupie użytkowników umożliwić prawidłowy odbiór naszych treści. Jeśli jednak mamy do czynienia z designem, któremu sporo brakuje do prawidłowych wartości, warto w widocznym miejscu na stronie przygotować przycisk umożliwiający zmianę kontrastu dla wszystkich elementów. Ważne, aby przycisk ten był widoczny od razu i posiadał od samego początku prawidłowy kontrast – tylko w takiej sytuacji możemy liczyć na jego odpowiednie wykorzystanie.

Aby sprawdzić stosunek kontrastu dla dwóch kolorów, warto odwiedzić tę stronę. Możemy tam „na żywo” zmieniać kolor i odczytywać zwracany „contrast ratio” wraz z czytelną informacją, czy spełniamy już założenia WCAG w tym przypadku.

Użyj prostej i czytelnej nawigacji.

W przypadku każdej strony internetowej najważniejszym i kluczowym elementem jest prosta nawigacja. Ma ona swoje zastosowanie nie tylko w przypadku rozbudowanych serwisów, ale nawet prostych stron typu onepage lub pojedynczych artykułów, na które trafiamy z wyszukiwarki Google.

Na prawidłową nawigację składa się pięć elementów:

Intuicyjne menu

Nasz użytkownik powinien od razu wiedzieć, gdzie znajduje się menu oraz nie może mieć problemów z odczytaniem jego funkcji. W marcu 2021 roku Mark Root-Wiley napisał przełomowy artykułIn Praise of the Unambiguous Click Menu”. Poruszył on w nim niesamowicie ważną kwestię dotyczącą menu, jaką jest opcja hover (interakcja następuje już po najechaniu myszką). Zgodnie z podaną argumentacją nie powinniśmy w żadnym stopniu już jej stosować, zarówno dla menu głównego, jak i jakichkolwiek innych elementów na stronie. Przemawiają za tym trzy kluczowe argumenty:

  • Sporo osób korzystających z naszej strony (w tym część osób niepełnosprawnych) nie używa myszki ani touchpada, a co za tym idzie, nie jest w stanie najechać na element kursorem, aby wywołać akcję hover.
  • Na urządzeniach mobilnych nie możemy najechać kursorem na żaden element, mamy jedynie możliwość wywołania akcji tap (naciśnięcia).
  • Eliminujemy odwieczny problem, czyli czym powinien być „rodzic” w menu? Samodzielną podstroną (często nic niewnoszącą poza linkami do dalszych podstron), nieklikalnym elementem grupującym podstrony, czy przekierowaniem do pierwszego elementu listy? Tak naprawdę patrząc na gotowe menu konkretnej strony, nikt tego nigdy nie wie (poza jej twórcami).

Wśród wszystkich użytkowników urządzeń mobilnych największe niezadowolenie budzi sytuacja, gdy mamy do czynienia z rozwijanym menu i nie mogąc trafić w małą strzałkę obok nazwy, zamiast rozwinąć kategorię, cały czas w nią wchodzimy. Frustrujące.

Rozwiązaniem tej sytuacji jest zrezygnowanie z efektu hover i zastąpienie go akcją po kliknięciu. Wtedy, klikając na „rodzica”, nigdy do niego nie przechodzimy, a jedynie rozwijamy listę jego podstron. Jeśli jednak koniecznie chcemy umożliwić użytkownikowi przejście do strony „rodzica”, możemy to uczynić w ten sposób:

Click menu z opcją - zobacz wszystkie
"Click menu" z opcją - zobacz wszystkie.

Czytelne nagłówki

Szukając konkretnych informacji na danej podstronie lub artykule, najpierw przeszukujemy nagłówki. Jeśli po przeczytaniu ich treści nie jesteśmy w stanie odszukać odpowiedniego miejsca, nieznaczna część z nas zaczyna czytać akapit po akapicie, a większość z nas zamyka stronę. Warto dbać o to, aby treść nagłówka odzwierciedlała sens akapitu.

Krótkie i spójne akapity

Następstwem czytelnych nagłówków jest stosowanie spójnych treści w poszczególnych paragrafach. Warto stosować krótkie akapity wypełnione merytoryczną treścią, a nie „laniem wody”. Osoby z trudnościami w czytaniu (np. dyslektycy) zniechęca czytanie długiego akapitu, tym bardziej nie mając pewności czy znajdą tam odpowiedź na swoje pytanie.

Jednoznaczne przyciski

Użytkownik, mając przed sobą przycisk, musi wiedzieć jaką akcję wywoła jego kliknięcie. Nazwa musi wprost tłumaczyć, co nastąpi po jego użyciu.

Wyszukiwarka z podpowiedziami i korektą

W przypadku bardziej zaawansowanych serwisów lub projektów e-commerce warto wdrożyć wyszukiwarkę. Aby była ona faktycznie pomocna, korzystanie z niej powinno wiązać się z automatycznymi podpowiedziami. O ile jest to możliwe, powinniśmy umożliwić naszym użytkownikom korektę wpisywanych fraz. Tak naprawdę błąd przy wprowadzaniu treści może popełnić każdy, a osobom cierpiącym na dysleksję może zdarzyć się to nader często.

Testuj stronę za pomocą klawiatury.

Czy jesteś w stanie obsługiwać swoją stronę i dojść do każdej informacji za pomocą samej klawiatury? Niektórzy z Twoich potencjalnych użytkowników nie mają wyboru. Warto zadbać o wszelkie udogodnienia, aby im to możliwie ułatwić. Nie chodzi tutaj tylko o sprawną obsługę formularzy, lecz poruszanie się po całej stronie za pomocą przycisków tab, enter oraz strzałek. Powinna być ona zbudowana w sposób oczywisty dla widza, czyli od lewej do prawej i z góry na dół.

Age Responsive – poznaj swoją grupę odbiorców.

Tworząc stronę internetową, powinniśmy wiedzieć, do jakiej grupy użytkowników jest ona skierowana. Jeśli naszymi odbiorcami jest młodzież, musimy dopasować zarówno design, jak i język bezpośrednio do nich, a pod względem technicznym możemy sobie pozwolić na nieco więcej (np. dodatkowe animacje). Jeśli jednak naszą grupą docelową są seniorzy, musimy liczyć się z pewnymi ograniczeniami i dostosować warstwę wizualną i pisaną do naszego targetu.

Projektowanie i tworzenie strony WWW dla użytkownika końcowego to nie lada wyzwanie. Jak sprawdzić, kim są nasi klienci? Prowadząc świadomy marketing internetowy, powinniśmy sami decydować i kontrolować, skąd pochodzi ruch na naszej stronie oraz jaka grupa osób to nasz największy target, o który musimy zadbać.

W przypadku, gdy naszymi użytkownikami są osoby 16-24 lata i pod nich jest stworzona cała szata graficzna i język strony, a my ruszamy z nowym produktem dla 50+, warto zadbać o prawidłowy landing page, na którym wylądują potencjalni odbiorcy. Tylko stosując świadomy marketing internetowy mamy wpływ na to, jak będzie wyglądał nasz przekaz dla konkretnej grupy odbiorców, który z kolei powodował będzie jak najmniej odrzuceń. Im bardziej poznamy swoich użytkowików, tym lepiej jesteśmy w stanie dopasować się do nich. Poniżej kilka wskazówek, jak powinien wyglądać przekaz dla poszczególnych, bardzo ogólnych grup:

  • Dzieci – jasne i radosne kolory, interaktywne funkcje, mocno przyjazny język.
  • Młodzież – styl i design podążający za trendami, często odważny i wyróżniający się, możliwy język intrygujący, nieoczywisty.
  • Dorośli – prosty i czytelny design, stosowanie znanych i praktycznych rozwiązań oszczędzających czas, oczywisty język.
  • Seniorzy – większe czcionki i odstępy, brak zbędnych animacji, prosty i konkretny język.

Osoby regularnie korzystające z Internetu w 2020 roku według grup wieku (źródło: GUS):

  • 16–24 lata - 99,2%
  • 25–34 lata - 98,4% (wzrost o 1.4% w stosunku do 2019 r.)
  • 35–44 lata - 95,2% (wzrost o 0.7% w stosunku do 2019 r.)
  • 45–54 lata - 84,3% (wzrost o 6.2% w stosunku do 2019 r.)
  • 55–64 lata - 65,8% (wzrost o 5.9% w stosunku do 2019 r.)
  • 65–74 lata - 40,4% (wzrost o 7.1% w stosunku do 2019 r.)

Największy wzrost można zaobserwować w najwyższych grupach wiekowych.

WCAG 2.1

Od dawna twórcom rozwiązań internetowych znany jest standard WCAG (ang. Web Content Accessibility Guidelines), który obecnie doczekał się wersji 2.1. Wbrew powszechnej opinii WCAG to nie tylko kontrast i zmiana rozmiaru tekstu.

WCAG 2.1 opiera się na 4 filarach:

  • postrzegalność,
  • funkcjonalność,
  • zrozumiałość,
  • solidność.

Filary te nie są w żadnym stopniu techniczne, a logiczne. Prawidłowe wdrożenie dyrektyw WCAG 2.1 nie jest podane „na tacy”, porusza jednak problemy, z którymi nasi użytkownicy się spotykają:

  • chcą wiedzieć, co jest na zdjęciu, choć nie widzą,
  • nie mogą korzystać z myszy, a jedynie z klawiatury,
  • powiększają sobie widok stron lub zmienią jej kolory, żeby móc lepiej widzieć treści,
  • zmieniają ustawienia przeglądarki, aby treść była bardziej czytelna.

Aby poznać dokładne wytyczne WCAG 2.1, zapraszamy do oficjalnego tłumaczenia w języku polskim, a dla żądnych konkretów — do skrótu.

Poniżej krótki opis każdej zasady na podstawie gov.pl::

  • Zasada 1: Postrzegalność
    Spraw by użytkownicy mogli korzystać ze strony internetowej lub aplikacji za pomocą dostępnych dla nich zmysłów.
  • Zasada 2: Funkcjonalność
    Spraw by użytkownicy mogli znajdować i używać treści oraz funkcji, niezależnie od tego, jak nawigują (np. za pomocą samej klawiatury, samej myszy).
  • Zasada 3: Zrozumiałość
    Spraw by użytkownicy rozumieli treści i sposób działania strony lub aplikacji.
  • Zasada 4: Solidność
    Spraw by treści i funkcje działały poprawnie w wielu różnych programach użytkowników (np. przeglądarkach internetowych oraz czytnikach ekranu osób niewidomych).

Trendy w projektowaniu stron internetowych w 2021

Na trendy w projektowaniu stron internetowych składają się zatem: Mobile First Design, Dostępność stron internetowych oraz Trendy 2021 w Webdesign. Należy mieć świadomość, że nie wszystkie trendy zostają z nami na dłużej. Z pewnością jednak każdy z nich wart jest naszej uwagi i przetestowania. To tak naprawdę od nas zależy, czy szersza publika będzie mogła się z nimi zapoznać, a co za tym idzie czy trend się przyjmie.

Full menu & hero menu

Standardowe menu, gdzie po najechaniu na „rodzica” wyświetla nam się kilka podstron, odchodzi w niepamięć. Obecne menu pełnią funkcję swego rodzaju centrum dowodzenia. To z jego poziomu jesteśmy w stanie wszędzie dotrzeć i poznać strukturę serwisu.

Real Thread Navigation Drawer. Autor: Taylor Perrin, dribbble.com

Dark Mode – Tryb nocny

Początki trybu nocnego sięgają tak naprawdę edytorów kodu. Długie wpatrywanie się w biały ekran przez programistów nie miało pozytywnego wpływu na ich wzrok. Trend ten przeszedł z edytorów do aplikacji oraz stron internetowych. Coraz więcej programów umożliwia włączenie dark mode, a mnóstwo użytkowników decyduje się na korzystanie z niego. Poniżej kilka zrzutów popularnych aplikacji, które wprowadziły taką możliwość.

dark mode
Tryb nocny w Outlook dla iOS i Android. Autor: Wayne Sun dla Microsoft Design, dribbble.com

Tryb nocny to trend, który tak łatwo nie minie, a wręcz będzie się nasilał. Deweloperzy są tego świadomi, czego dowodem jest pojawienie się w nowoczesnym frameworku CSS, jakim jest Tailwind CSS, specjalnego wariantu dla Dark Mode, który pozwala w prosty i szybki sposób zapanować nad kolorystyką w trybie nocnym i włączyć go za pomocą jednego kliknięcia.

Minimalizm + brutalizm

Legendarny, prosty i grzeczny minimalizm doczekał się w końcu swojego alter ego, jakim jest brutalizm. Wszelkie zasady minimalizmu zostają tutaj zachowane poza „grzecznością”. Mamy tutaj do czynienia z dużymi, bardzo odważnymi fontami oraz mocnymi kontrastami. Z pewnością nie jest nudno.

Brutalist Anthem. Autor: Hrvoje Grubisic, dribbble.com
Minimalizm + brutalizm
Mutant Radio. Autor: Giga Tamarashvili, dribbble.com

Interaktywność vs Animacje

Jeśli masz do wyboru korzystanie z interakcji lub animacji, wybieraj to pierwsze. Użytkownik powinien mieć wpływ na to, co ma miejsce. To, co dzieje się na stronie powinno być następstwem jego działań i podjętych akcji. Wszelkie animacje użyte na stronie powinny być wywoływane zdarzeniem, które podjął użytkownik. Dzięki temu następuje interakcja, a sam klient integruje się z witryną.

Źródło: inpost.pl

Jeśli wprowadzimy na stronę zbyt dużo animacji, na które użytkownik nie ma wpływu, będzie to powodowało odrzucenie i wzbudzi jego niechęć. Podda pod wątpliwość jego władzę i decyzyjność na stronie. Zbyt dużo agresywnych animacji będzie miało zły wpływ na odbiór strony WWW wśród użytkowników z epilepsją.

Asymetria oraz warstwowość

Mocnym, tegorocznym trendem graficznym w webdesignie jest wprowadzenie warstwowości oraz asymetrii. Dzięki takim zabiegom jesteśmy w stanie zwrócić uwagę widza na konkretne elementy, na których nam zależy. Asymetria od zawsze występuje w przyrodzie i mamy z nią do czynienia na każdym kroku. Z kolei warstwowość wprowadza nieco realizmu do układu strony — brakującego trzeciego wymiaru. Aby uzyskać warstwy, pomocne jest stosowanie zróżnicowanych cieni (shadows) czy też rozmycie dla poszczególnych elementów.

Asymetria oraz warstwowość
Exploring. Autor: Gilles Tossoukpé, dribbble.com

Na zakończenie

Tworzenie nowoczesnych stron WWW oraz rozwiązań internetowych to bardzo odpowiedzialne zajęcie. Istnieje bardzo dużo kwestii, o które należy zadbać, aby każdy z naszych użytkowników czuł się na naszej stronie komfortowo i mógł w pełni korzystać z jej funkcjonalności. Musimy mieć świadomość, jak zróżnicowane jest nasze społeczeństwo i wiedzieć, do kogo chcemy trafić z naszą ofertą i przekazem. Nie możemy zapominać, że wśród każdej grupy odbiorców są osoby niepełnosprawne lub z zaburzeniami, które mogą utrudnić korzystanie z naszego produktu cyfrowego. Naszym obowiązkiem jest im to możliwie ułatwić.

Hasło trendy stron internetowych dotyczy zarówno sposobu ich tworzenia pod względem technicznym, jak i warstwy wizualnej. W obu przypadkach warto z nich korzystać, jednak należy mieć świadomość, że nie każdy trend się obroni i zostanie z nami na dłużej.


Oceń artykuł
4.5/5
ilość głosów: 51
teamsolution
Marketing | Web Design & Development

Może Cię również zainteresować

Obserwuj nasze profile social media, aby być na bieżąco

Zrób krok naprzód

Zapytaj o współpracę
Zaufali nam i się nie zawiedli
  • Subaru Polska
  • CCC
  • Blachotrapez
  • Dako
  • Bank Spółdzielczy w Limanowej
  • Semilac Ireland
  • Lestello