Podążanie za aktualnymi trendami w projektowaniu stron www jest ważniejsze niż kiedykolwiek przedtem. Wszystko za sprawą coraz większej konkurencyjności w Internecie i większej świadomości przedsiębiorców co do roli sieci www w procesie sprzedaży. Dlaczego warto znać trendy? Odpowiedź jest prosta: większość osób pozytywnie kojarzy nowoczesność a powtarzające się wzorce to coś co pozytywnie wpływa na zaangażowanie użytkowników w sklepach i na stronach internetowych.
Parę lat temu stosunkowo rzadko, ktoś sam od siebie prosił o audyt strony www, lub ofertę na odnowienie strony www. Teraz to już standard a strona przeciętnej firmy ulega stopniowej ewolucji czy to za sprawą optymalizacji wykonywanych raz na jakiś czas czy prowadzenia często aktualizowanych aktualności. Jak wiadomo, wszystkim wychodzi to na plus: klienci mają dostęp do aktualnych informacji a zadbane strony osiągają lepsze pozycje w wyszukiwarce.
Jest już aktualizacja
Zapraszam do nowszego o rok artykułu na temat trendów: Trendy w projektowaniu stron www 2019.
Ważna uwaga
Na początku chciałbym zaznaczyć, że nie jestem zwolennikiem stosowania „na siłę” wszelkich nowinek w web designie. Gdyby tak było, strony moich klientów byłyby szablonowe i bardzo podobne do siebie – to zwykle nie jest pożądany efekt. Zbyt nadgorliwe podążanie za trendami powoduje paradoksalnie efekt odwrotny – niektóre trendy szybko przemijają a to powoduje że strona szybko straci swój świeży wygląd. Grunt to znaleźć w tych trendach swój styl, który będzie użyteczny przez dłuższy czas.
Cała sztuka polega na dopasowaniu i dostosowaniu środków stylistycznych do treści, branży, wizerunku i przede wszystkim grupy docelowej. Nie będziemy przecież stosować radykalnego minimalizmu na stronie o tematyce gier komputerowych a filmy i animacje na całą szerokość ekranu raczej nie będą odpowiednie na stronie rządowej. Osobiście uważam, że to wyczucie jest chyba najważniejszą zdolnością przy projektowaniu stron. Tutaj nie chodzi wcale o kwestie gustu a bardziej doświadczenie i znajomość branży.
Zbiór trendów opracowałem na podstawie ciągłej obserwacji stron firmowych, przeglądu prac koncepcyjnych na stronach o tematyce web design oraz zapoznania się z artykułami i dyskusjami o tematyce UI oraz UX. Z tego wszystkiego wyselekcjonowano tylko te trendy, które faktycznie są powoli wykorzystywane i uważam za użyteczne i ciekawe. Postaram się wszystko zilustrować aby wiadomo było o co dokładnie chodzi.
Trend nr 1: Zestawy kart
Karty znamy z serwisów społecznościowych. Zwracają dzięki temu uwagę użytkownika i przy okazji są bardzo użyteczne, ponieważ można je układać w zależności od dostępnego miejsca. Dzięki temu zarówno podstrona, która zawiera małą ilość kart oraz ta z ich większą ilością nadal będą wyglądać ze sobą spójnie.
Największą zaletą kart jest możliwość ich organizacji, dzięki rozwiązaniom typu Masonry można tworzyć tzw. wodospady zdjęć, a takie można łatwo sortować, filtrować i nie trzeba przejmować się wysokością każdego z elementów co przy stronach i sklepach responsywnych jest praktycznie nie do przecenienia. Takie karty znamy z serwisu społecznościowego Google+ czy Facebooka.
No, dobra ale jak taki sposób prezentacji wykorzystamy na stronie internetowej? Taki wzorzec można wykorzystać na wiele sposób, szczególnie przyda się w przypadku aktualności, listy artykułów z bloga, listy produktów, opinii, komunikatów, cenników – lista zastosowań jest tutaj bardzo długa. Oto jak może wyglądać przykładowy cennik wykonany w stylu kart:
Dzięki kartom można dodać głębi do płaskich minimalistycznych kreacji. Tutaj zastosowałem koncepcję kart do listy produktów w projekcie sklepu internetowego. Cień jest widoczny dopiero po najechaniu na zdjęcie:
Trend nr 2: Minimalizm
Wszystko wskazuje na to, że minimalizm będzie pożądanym stylem projektowania stron także i w nadchodzącym roku. O zaletach minimalizmu pisałem w artykule: Minimalizm w web designie. Minimalizm jako koncepcję w designie odkryłem już dawno temu, dopiero w 2014 roku postanowiłem stworzyć własną stronę od nowa według tej szkoły.
Spodobało mi się i tak zostało, to po prostu działa, a dodatkowe potwierdzenie słuszności stosowania minimalizmu znajduję w tym, że coraz więcej firm decyduje się na taką identyfikację. Sprawdź jak wygląda strona „O nas” agencji Landor, która za logotypy kasuje 6 cyfrowe sumy w dolarach (nie pomyliłem się, sprawdźcie ile kosztowało nowe logo FedEx, stacji paliw BP albo miasta Melbourne).
Minimalizm powoduje że prezentowana treść jest czytelna, neutralna i autentyczna. Warto stosować go tam gdzie mamy do czynienia z treścią, którą nie trzeba dodatkowo dekorować.
Jedynym minusem minimalizmu jest właśnie jego rosnąca popularność, obawiam się przez to, że strony, które teraz wyróżniają się takim wizerunkiem stracą pewnego rodzaju charakterystyczność.
Trend nr 3: Żegnaj typowy WordPressie
A właściwie: żegnajcie elementy, które z powodu popularyzacji WordPressa w poprzednich latach zostały przy okazji „przemycone” w schemat standardowej strony internetowej. O czym mowa? O blogowych widgetach i elementach interfejsu takich jak: Wyszukiwarka treści, boczny pasek z najnowszymi artykułami, chmura tagów, informacje o autorze pod każdym wpisem i chociażby breadcrumb czyli nawigacja ścieżką.
Nie trzeba z tych elementów rezygnować, można je rozmieścić tak, aby nie przypominały tych standardowych szablonów znanych z systemu WordPress. Faktem jest, że w 50% i tak są niepotrzebne na typowych stronach firmowych i zajmują jedynie cenną przestrzeń. Liczy się estetyka i oryginalność – przykład nowoczesnego wpisu blogowego gdzie wyszukiwarkę, ostatnie wpisy i archiwum zmieniono na krótką sekcję „o mnie” oraz widget ostatnich zdjęć z Instagrama prezentuję poniżej:
Trend nr 4: Filmy HD
Coraz szybsze łącza internetowe pozwalają na stosowanie filmiku w tle z większą pewnością że użytkownicy nie będą na nie czekać w nieskończoność. Oswojenie się projektantów z multimediami i rozwój technologii HTML5 pozwala z większą swobodą tworzyć strony pełne ciekawych efektów wizualnych, których podstawą jest wideo.
Warto zadbać o to aby wysokiej rozdzielczości wideo ładowało się tylko w przypadku korzystania przez użytkownika z szerokopasmowego, szybkiego łącza.
Pamiętaj aby wszystkie publikowane filmy w internecie miały jakość co najmniej FullHD, tak jak mój przykładowy trailer. Zadbaj o odpowiednią optymalizację wideo na stronie www.
Trend nr 5: TYPOGRAFIA
Nowe techniki tworzenie stron pozwalają nam na stosowanie niestandardowych krojów pisma. Wiele projektantów postanawia coraz częściej to właśnie z liter stworzyć wspaniałe kompozycje. Projekty takie wyglądają niesamowicie na wyświetlaczach z wysoką gęstością pikseli na cal (monitory typu Retina lub 4K). Krawędzie wyglądają bardzo ostro i jest ciężko uzyskać taki efekt grafiką, ponieważ musiałaby mieć ona stosunkowo duży rozmiar i jakość.
Projekty takie to świetny popis umiejętności designerskich bo tak kreatywne posługiwanie się literami nie wybacza najmniejszego niedociągnięcia. Niektórzy mogą iść na całość i całkowicie zrezygnować z grafik na rzecz samych liter. Projektowanie strony jest wówczas ograniczone do doboru wyrazów, fontów i barw. Taka kompozycja może nadać bardzo unikalny wizerunek marce.
Trend nr 6: Animacje
Technologia HTML5 pozwala na stosowanie przyjaznych przeglądarkom animacji. Rok 2018 powinien przynieść jeszcze więcej efektów wizualnych wykonanych w oparciu o SVG i CSS3.
Zobacz Pen SVG Heart Animation with CSS autorstwa Nikolay Talanov (@suez) w serwisie CodePen.
Trend nr 7: Mobile first
Czyli urządzenia mobilne na pierwszym miejscu. Obecnie strony responsywne projektuje się tak, że najpierw powstaje wersja na komputery a potem na zasadzie dopasowywania, „obcinania” i pójścia na wiele kompromisów powstaje wersja na urządzenia mobilne. Mobile first to dokładne przeciwieństwo. Najpierw powstaje wersja strony na urządzenia mobilne i potem na zasadzie „rozszerzania” projektu powstaje wersja na komputery klasy PC. Oba podejścia wiążą się z pewnymi konsekwencjami upraszczając sprawę do minimum – strony mobile first są lepiej zoptymalizowane pod urządzenia mobilne.
Ciekawostką jest, że o metodzie Mobile First i Progressive Enhancement wspominałem w mojej pracy inżynierskiej na temat stron responsywnych. Wtedy ta idea była dla wszystkich oderwana od rzeczywistości bo kilka lat temu urządzenia mobilne nie miały tak dużego udziału w ruchu internetowym. Od wielu lat jest to dominująca grupa urządzeń dzięki którym przeglądamy Internet i takie podejście jest jak najbardziej uzasadnione co więcej, wiąże się z wieloma korzyściami od strony użytkownika.
Jak już jesteśmy przy tematach „mobile”, warto wspomnieć o optymalizacji mobilnej istniejących stron. Warto zadbać o szybkie działanie strony na urządzeniach mobilnych. Uzyskanie 100% punktów w słynnym PageSpeed Insights nie powinno stanowić w 2018 roku żadnego problemu:
Trend nr 8: Material Design
To właśnie z tego podejścia wywodzi się trend nr 1. Material Design to filozofia projektowania opracowana przez Google, której fundamentem jest wspólny język łączący atrakcyjnie wizualną szatę graficzną z innowacją i obecną technologią. Ten system projektowania ma za zadanie dostarczyć podobne wrażenia niezależnie od wykorzystywanego urządzenia przez użytkownika. Podejście to jest odpowiedzią na wady dominującego obecnie flat designu – projektowania, gdzie wszystko jest płaskie i dwuwymiarowe.
Główne zasady Material Design to wprowadzenie trzeciego wymiaru, który łatwo możemy uzyskać dzięki użyciu subtelnych cieni. Warto zwrócić uwagę, że to nie jest tylko „maniera” aby wszystko upiększyć. Dzięki temu możemy tworzyć hierarchię w interfejsie, dać do zrozumienia co można kliknąć, rozsunąć lub gdzie można wprowadzić dane.
Istotnym elementem podejścia Material Design jest sztywno ustalona paleta kolorów. Ma to za zadanie uporządkować i zestandaryzować interfejs pod kątem kolorystyki.
No i oczywiście nie zabrakło typografii. Sztywno ustalone skale oraz fonty nadają projektom stworzonym przy użyciu Material Design wyjątkowej estetyki. Temu tematowi poświęciłem osobny wpis. Czytaj więcej o Material Design.
Podsumowanie
Wszystkie wymienione w tym artykule trendy już powoli są wykorzystywane. Ciekawe czy Material Design faktycznie zdominuje projektowanie stron już w 2018 roku. Druga sprawa to czy w konfrontacji z obecnymi statystykami korzystania z Internetu, rok 2018 to na pewno dobry moment na stosowanie podejścia Mobile First? Gdybym miał wybrać najbardziej prawdopodobny kierunek ewolucji web designu w nadchodzącym roku to minimalizm, filmy i grafika wektorowa. Jak zwykle zapraszam do współpracy! Kontakt
Jeżeli podobał ci się wpis zapraszam do moich subiektywnych, corocznych selekcji najładniejszych stron internetowych oraz designerskich sklepów internetowych światowych marek.
Źródła
Warto obejrzeć:
awwwards.com – Website Awards – Najlepsze trendy w Web Designie
webbyawards.com – prestiżowe prace The Webby Awards
csswinner.com – Web Design Awards – Galeria nagrodzonych stron
cssdesignawards.com – Inspiracje i galeria wyjątkowych stron
