Web Design Blog / Web:

Trendy w projektowaniu stron 2018

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.

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:

trendy web design 2018 - karty

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:

trendy web design 2018 - karty w ecommerce

 

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ę. Tak przykładowo wygląda strona „O nas” agencji reklamowej, 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):

trendy web design 2018 - minimalizm

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ć.

trendy web design 2018 - minimalizm 3

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 typowe elementy, które z powodu popularyzacji WordPressa w poprzednich latach zostały przy okazji „przemycone” w schemat typowej strony internetowej. O czym mowa? O typowych 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:

trendy web design 2018 - przykład bloga 2

 

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.

trendy web design 2018 - filmy i animacje

Warto zadbać o to aby wysokiej rozdzielczości wideo ładowało się tylko w przypadku korzystania przez użytkownika z szerokopasmowego, szybkiego łącza.

trendy web design 2018 - filmy

 

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ść.

trendy web design 2018 - typografia

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.

trendy web design 2018 - typografia 2

 

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.

trendy web design 2018 - mobile first

Ciekawostką jest, że o metodzie Mobile First i Progressive Enhancement wspominałem w mojej pracy inżynierskiej na temat stron responsynych. 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. Obecnie po analizie statystyk internetowych oraz uruchomienia standardu AMP można dojść do wniosku, że będzie to niebawem 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.

 

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.

trendy web design 2018 - material design 1

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.

trendy web design 2018 - material design 2

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ęcę osobny wpis bo jest to naprawdę fascynujące zagadnienie.

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

https://material.io/guidelines/material-design/introduction.html

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

Trendy w projektowaniu stron 2018
4.63 (92.63%) głosów: 57

Autor: (28 lat)

Pamiętaj, że służę pomocą w razie wykonania lub odnowienia strony lub sklepu internetowego dla twojej firmy. Niech potwierdzeniem moich kompetencji będzie fakt, że jesteś na mojej stronie mimo, że jestem z całkiem innej części Polski ;)

Tego typu wpisy piszę w wolnych chwilach lub pomiędzy projektami. Tylko pomyśl co mogę dla Ciebie zrobić w ramach płatnej usługi bez pośredniczących nastawionych wyłącznie na własny zysk agencji reklamowych.

Otrzymuj powiadomienie o nowych artykułach

*Bez obaw, nie udostępniam nikomu twojego adresu e-mail