Web designer bez znajomości najnowszych trendów tworzenia stron jest jak prawnik, który nie zna bieżących przepisów. Trendy web design to pewnego rodzaju „ruchy” i preferowanie niektórych rozwiązań ponad inne w dyscyplinie tworzenia stron internetowych. Jak już niejednokrotnie miałem okazję wspomnieć Web Design to szeroka dziedzina dlatego mamy do czynienia nie tylko z rozwiązaniami dotyczącymi wyglądu ale także: user experience, technologii i funkcjonalności. Zawężanie tego terminu do aspektów wizualnych jest podejściem niepoprawnym ponieważ web design to ogół czynności polegający na rozplanowaniu, zaprojektowaniu i wdrożeniu witryn internetowych.
Jest już aktualizacja
Ten artykuł nadal zawiera aktualne i użyteczne informacje na temat web designu. Zapraszam też do najnowszego artykułu z tej serii: Trendy tworzenia i projektowania stron internetowych 2021.
Interdyscyplinarny charakter trendów w sferze web design
Pozorna rozbieżność w rozumowaniu pojęcia web design w Polsce a na zachodzie bierze się z prostego powodu – design przetłumaczyliśmy błędnie jako wzór – wzornictwo, który może się odnosić do tego jak coś wygląda a nie wzór – projekt, który odnosi także do tego jak to coś działa i jak jest zbudowane. Nota bene pojęcie design ma inne znaczenie w języku angielskim a inaczej jest zazwyczaj rozumiane w Polsce – stąd ten dysonans. Dla Polaków design to najczęściej tylko wygląd, na zachodzie design to nie tylko wygląd ale także funkcjonalność i opis jak coś działa. Takie pojęcia jak:
- back-end design,
- database design,
- software design pattern,
- low-level design,
- object oriented design
mogą stanowić za potwierdzenie tej tezy. Są to bardzo popularne pojęcia z obszaru Informatyki i nie mają niczego wspólnego z wizualnym aspektem czegokolwiek. Dlatego, jeżeli jesteśmy przy stronach internetowych należy pamiętać, że web design to nie tylko wygląd, to całokształt.
Technologiczna właściwość web designu i jego multidyscyplinarny charakter (który głównie skupia się na doświadczeniach użytkowników) determinuje nierozerwalność proponowanych praktyk z poprzednimi latami a trendy mają tak jakby addytywny charakter. Przy trendach 2020 nie możemy zapomnieć o fundamentalnych rozwiązaniach z poprzednich lat 2019 a nawet 2018, które będą obowiązywać także w tym roku. O jakich trendach mowa?
Istotne trendy z poprzednich lat
W 2020 nie rozstajemy się z następującymi trendami w projektowaniu i wdrażaniu stron internetowych:
- mobile first (2018) – czyli tworzenie stron z myślą o użytkownikach mobilnych i traktowanie widoku mobilnego jako tego głównego (od dłuższego czasu ruch mobilny przewyższa ruch pochodzący z komputerów klasy PC),
- braku paginacji (2019) – czyli technice znanej z najpopularniejszych aplikacji internetowych (Youtube Facebook, Instagram) i najczęściej odwiedzanych stron internetowych, która polega na tym, że nie zmuszamy użytkowników do przełączania się pomiędzy podstronami ale ściągamy w tle następne treści,
- wydajność i szybkość działania (2019) – tylko szybkie, zoptymalizowane strony, sklepy i aplikacje internetowe mają rację bytu w czasach kiedy częściej sięgamy po smartfona niż komputer klasy PC.
Dopiero kiedy „spełnimy te punty” możemy zapoznać się z najnowszymi trendami w tworzeniu stron na rok 2020. Niektóre trendy zaś ulegają swoistej ewolucji, przykładowo minimalizm zaczyna być zastępowany coraz bardziej surowym odpowiednikiem. Ale idźmy po kolei…
Trend #1: Architektura Single-Page Application
Single-Page Application to technologia przyspieszająca działanie stron za pomocą płynnych przejść pomiędzy podstronami. Poszczególny podstrony nie są ładowane „od nowa” a jedynie zastępują obecną treść – stąd nazwa Single-Page – wszystko się dzieje na jednej podstronie.
Przykład sklepu wykonanego w technologii Single-Page Application: fenty.com
Strony takie dostarczają ogólnie rzecz biorąc lepszych doświadczeń i zapewniają płynne przejścia pomiędzy podstronami. Oszczędzają transfer, są przyjaźniejsze dla urządzeń mobilnych i dzięki temu dobrze się pozycjonują.
Popularność rozwiązań Single-Page Application zawdzięczamy także rozwojowi języków i frameworków służących do ich budowania. Można tutaj wymienić między innymi:
- JavaScript
- Vue.js,
- React,
- Angular JS.
Trend #2: Marquee i scroll… w bok
Efekt marquee czyli automatycznie przewijany w osi poziomej tekst już teraz jest hitem i będzie popularnym trendem w tworzeniu stron 2020.
Marquee możemy spotkać na wielu nowych stronach i w pracach wielu projektach konkursowych. Specjalnie na tę okazję przygotowałem zbiór najnowszych stron z tym efektem:
https://www.awwwards.com/mansfeld/collections/marquee/
Web Design przez ostatnie lata upodobał sobie przewijanie nawet samej zawartości w osi horyzontalnej. Wygląda to ciekawie a zastosowane w konsekwentny sposób może nadać stronie unikalnego charakteru.
Trend #3: Niestandardowy kursor
Choć jego zastosowanie jest dość odważne pod kątem user experience i SEO, przemyślane podejście z uwzględnieniem progressive enhancement może połączyć zarówno wygodę jak i unikalność doświadczeń.
https://www.awwwards.com/mansfeld/collections/custom-cursor/
Niestandardowy kursor może być nieco bardziej widoczny na stronach kreatywnych, w których mamy przykładowo ciemnie tło czy odtwarzane w tle wideo:
See the Pen Vue Cursor Fx by Luca Iaconelli (@LuXDAmore) on CodePen.
Trend #4: B R U T A L I Z M
Brutalizm (ang. brutalism) nawiązuje do nurtu w architekturze z końca lat czterdziestych XX wieku. Nazwę zaczerpnięto od francuskiego „brut” co oznacza „surowy”. Strony wykonane w duchu brutalizmu charakteryzują się uproszczonym do granic przyzwoitości interfejsem. Mocne zaznaczenie krawędzi kontenerów, bardzo kontrastowa kolorystyka i… BRUTALNOŚĆ to cechy charakterystyczne stron wykonanych zgodnie z tym trendem.
Zamiast ciemnej szarości jest czerń, zamiast cieni jest ciężka lub kontrastowa kreska a delikatne barwy są zamieniane na achromatyczne odcienie z ograniczonej przestrzeni barw.
https://www.fiftypointeight.studio/
Brutalizm zadomowił się na stronach nowoczesnych, nietuzinkowych i kreatywnych.
Strony takie są kierowane do nowego pokolenia, którego nadrzędną wartością jest indywidualizm i szczerość. Zobacz jeszcze inne przykłady:
Trend #5: Tryb ciemny i jasny – do wyboru
Idąc w ślad nowych tredów w UI na stronach internetowych zaczęto stosować do wyboru tryb jasny i tryb ciemny.
W 2019 roku wprowadziliśmy ciemne tło za to w 2020 roku to użytkownikowi możemy dać wybór czy strona będzie miała jasny czy ciemny motyw. Jest to pochodna siódmego punktu o app-like experience a także inspirowanie się rozwiązaniami UI wprowadzonymi już dawno temu w Androidzie i niedawno w systemie iOS w wersji 13.
Trend #6: Animowane logo
Animowane logo to coś nowego w obszarze UI. Z całą pewnością można stwierdzić, że era materiałów drukowanych już przeminęła. Ma to same zalety, z jednej strony nie generujemy śmieci a z drugiej strony – no właśnie – możemy sobie pozwolić właśnie na animowane logo.
Ilość marek i podobieństwo logotypów i sygnetów może być przełamana poprzez nadanie im czwartego wymiaru – czasu. Unikalna kolorystyka oraz oryginalne kształty będą mogły być przyprawione charakterystyczną animacją. Animowane logo to oznaka ostatecznego triumfu świata cyfrowego i mediów nowej generacji.
Trend #7: App-like experience
App-like experience to dość szeroki temat zahaczający zarówno o UI jak i rozwiązania technologiczne. W App-like experience chodzi o to, aby korzystanie ze strony przypominało korzystanie z natywnej aplikacji desktopowej lub mobilnej – chociaż w czasach popularności urządzeń mobilnych będziemy częściej sięgać po rozwiązania mobilne.
Odnośnie wyglądu, może to być bogata nawigacja w widoku Desktop:
Motywy i szablony zastępuje się systemami projektowymi dla ujednolicenia interfejsu:
źródło: https://www.audi.com/ci/en/guides/user-interface/introduction.html
Funkcjonalność to oczywiście Progressive Web Apps, które opisywałem w osobnym artykule: Progressive Web Apps (PWA)
Technologia Progressive Web Apps zapewnia:
- działanie strony w przypadku braku połączenia internetowego,
- możliwość zainstalowania aplikacji i utworzenia skrótu na ekranie glównym,
- personalizację paska adresu w mobilnej przeglądarce opera.
Do praktyk przybliżających strony internetowe do apliakcji możemy również zaliczyć:
- powiadomienia Web-Push,
- wykorzystywanie funkcji urządzenia takich jak GPS, żyroskop, mikrofon czy renderowanie 3D.
Trend #8: Layout bazujący na typografii
Typograficzny layout to jeden z najbardziej wyraźnych trendów na nadchodzący rok 2020. Oczywiście, typografia zawsze była i jest kluczowa w projektowaniu stron internetowych, jednak teraz staje się istotą ich estetyki.
2020 rok to przede wszystkim wolność w stosowaniu niestandardowych krojów liter, ich stylowania i animowania – a to wszystko jest możliwe dzięki rozwojowi technologicznemu przeglądarek internetowych.
Bazowanie na literach to nie tylko fonty to także odpowiednio dobrane słowa i ich znaczenie. Słowa są bardziej fizyczne, stają się elementem kompozycji i to wokół nich organizuje się resztę projektu.
źródło: https://themeforest.net/
Podsumowanie
To były trendy web design na 2020 rok. Pamiętajmy, że nowe trendy w tworzeniu stron i sklepów internetowych są pochodną rozwoju technologicznego i tego w jaki sposób korzystamy z Internetu – sprawdź statystyki Internetu w Polsce 2019. Zachęcam do odwiedzin wyżej wymienionych stron, zerkanie na prace w licznych portalach poświęconemu web designowi i do próby znalezienia innych trendów, których wykorzystanie dziś, będzie korzystne w nadchodzących latach.
Z drugiej strony zalecam duży dystans, ponieważ wpasowywanie się „na siłę” do wszelkich trendów może mieć efekt odwrotny do zamierzonego. Najważniejszy jest własny styl a zamieszczone pomysły nalezy traktować jako inspirację i kierunek rozwoju. Mam nadzieję, że ten artykuł pomoże komuś określić jak powinien wyglądać najnowszy projekt lub chociaż trochę zainspiruje lub nakłoni do poszukania więcej informacji na ten temat.
Źródła
Web Design Trends – A Conteporary Landscape for Digital Thinkers – NOW, awwwards., 2019
https://tubikstudio.com/dont-stay-still-why-brand-needs-an-animated-logo/
Łukasz pisze: 
Odpowiedz lub skomentuj