Web Design Blog / Web:

Trendy tworzenia stron internetowych 2019

Trendy w projektowaniu stron internetowych dyktują użytkownicy internetu a przede wszystkim to, w jaki sposób korzystają oni z technologii WWW. Web Design nigdy nie był, nie jest i nigdy nie będzie miejscem artystycznej ekspresji lub stosowania „modnych” motywów, których przydatności nie da się racjonalnie wytłumaczyć. Tworzenie interfejsów i projektowanie treści internetowych to w 2019 roku pogoń za maksymalizacją pozytywnych doświadczeń użytkownika oraz wykorzystywania wszystkich zdobyczy technologii (a nie marketingu) do dostarczania realnej wartości.

Sieci semantyczne (Semantic Web) zmuszają nas dodatkowo do stosowania standardów, które pozwolą zrozumieć treści ciągle rozwijanej sztucznej inteligencji wyszukiwarek. Takie narzędzia jak dane strukturalne, HTML5 oraz rozszerzenia tych technologii są elementem na którym trzeba się skupić przy projektowaniu nowoczesnych stron internetowych.

Web design to coraz bardziej wymagające zajęcie

Są biznesy (takie jak sklepy internetowe czy portale) dla których strona internetowa jest głównym zasobem i to na niej odbywa się cała sprzedaż. Stosowanie odpowiednich rozwiązań internetowych coraz częściej decyduje o sukcesach i porażkach różnego rodzaju przedsięwzięć.

Dlaczego warto znać trendy wspomniałem w ubiegłym roku w Trendach tworzenia stron internetowych 2018. W wielkim uproszczeniu: bardziej podobają nam się rzeczy które już znamy. Jeżeli projektanci popularnych stron, na które wydawane są miliony złotych, wprowadzają konkretne rozwiązania – prędzej czy później warto (chociaż częściowo) z nich skorzystać. Wpasowując włąsną stronę czy sklep internetowy do nowych trendów łatwiej zyskać zaufanie Internautów.

Przy okazji, dziękuję za spore zainteresowanie artykułem z poprzedniego roku. Jest to jeden z najpopularniejszych wpisów na moim blogu za co ogromnie dziękuję wszystkim czytelnikom. Dodaje mi to sporej motywacji do kontynuowania tego typu wątków i pisania tego bloga, który tak naprawdę jest dla was.

Skąd się biorą trendy w web designie?

Zbiór trendów opracowano przeglądając prace najlepszych twórców z całego świata, podglądając strony najwyżej wycenianych marek z różnych branż i zapoznając się z koncepcyjnymi oraz konkursowymi pracami z serwisów typu AWWWARDS (w kilku nawet osobiście wziąłem udział) i ciągłego czytania i dyskusji w serwisach o tematyce web design, UI,User Experience i digital marketing.

Do tej serii wpisów zawsze wybieram trendy takie, które są praktyczne i mogą dać wartość biznesom niezależnie od przedmiotu i typu ich działalności. Nie bez znaczenia jest także wszelkiego rodzaju analiza ruchu na stronach internetowych. Jak zwykle nie zabraknie ilustracji najlepszych projektów jakie udało mi się przypadkowo znaleźć w sieci oraz (wyjątkowo w tym roku) projektów opracowanych wspólnie z moimi klientami.

Trend #1: Mobile-First

To już żadna nowość. Jak wspomniałem w Statystykach Polskiego Internetu 2018, prawie połowa wizyt w polskim Internecie odbywa się przy użyciu przeglądarek mobilnych. Rok 2019 to zdecydowanie idealny moment na wykorzystywanie technologii mobilnych a przede wszystkim tworzenia stron mobilnych AMP oraz Mobile First – Responsive Web Design. Mocno przedefiniujemy pojęcie stron responsywnych, bowiem teraz będą oznaczać, grupę stron (natywnie mobilnych), które można przeglądać również przy użyciu poziomego monitora.

Trend ten jest jak najbardziej uzasadniony biorąc pod uwagę, że Instagram prześciga w popularności Facebooka a wideo zaczynamy kręcić… w pionie. Przeciętna strona internetowa zaczyna wyglądać tak, jakby była zaprojektowana głównie z myślą o użytkownikach mobilnych. Strony takie działają szybko i przypominają rozwiązania znane z aplikacji mobilnych.  Nawet serwisy z konkursami skupionymi wokół kreatywnych projektów WWW zaczęły oceniać i prezentować ich mobilne wersje.

Trendy Web Design 2019

Trend #2: Wideo i grafika jako główna treść

Krótkie filmiki w tle, które przez 4 lata miały dodać efektownego wyrazu stronom głównym są coraz rzadziej stosowane. W zamian, filmy coraz częściej stanowią główną treść i narrację. Nic dziwnego – przeciętna osoba nie lubi czytać długich elaboratów, zresztą sami przyznacie, że na komórce jest to średnio wygodne. Skoro jeden obraz wart jest więcej niż tysiąc słów, to ile warte jest wideo? W 2019 roku – bardzo wiele. To samo można powiedzieć o graficznej prezentacji danych. Można w ten sposób zaprezentować wszystko. Od tego jak działa usługa po parametry produktów a nawet szczegóły techniczne i instrukcje obsługi.

Trendy Web Design 2019 - Wideo

Wideo może zastąpić długie bloki tekstu co z pewnością tworzy niesamowity efekt i ciekawe doświadczenia w przeglądaniu stron internetowych. Po co opisywać w pięciu zdaniach jak coś działa skoro można to pokazać w 15 sekund jeszcze ciesząc przy tym oko?

Trendy web design 2019 - wideo jako treść - tesla

źródło: https://www.tesla.com/models

 

Trend #3: Przedefiniowanie wszelkich sliderów

Prawda jest taka (na końcu artykułu zamieszczono źródło), że slajdy w naglówku (lub header slider jak kto woli) to takie wielkie nic – mało kto czyta co tam jest napisane, nie mówiąc o klikaniu (konfrontując przepływ pomiędzy stronami w Analytics). Slajdy zwykle zawierają teksty „typowo marketingowe” a tego przecież nikt normalny nie lubi, bo mamy tego pełno na całym świecie. Dużo lepszy efekt da pojedyncze zdjęcie lub tekst. Nie ma chyba nic bardziej irytującego jak uczucie, że coś ucieka ze strony jak strona nie zdążyła się jeszcze w pełni załadować. W 2019 roku wszelkim automatycznym slajderom w nagłówku podziękujemy.

W ich miejsce można zastosować hero-image lub slajdy przesuwane z góry na dół, które są świetnym rozwiązaniem i mogą służyć jako ciekawa ilustrowana nawigacja i wprowadzenie do wszystkich podstron. U siebie wykorzystałem takie rozwiązanie w portfolio.

Mogą to być też slajdy z filmikami – jak na stronie głównej Aston Martin:

Trendy Web Design 2019 - slider

źródło: https://global.astonmartin.com/

Lub rozwiązania ciekawej nawigacji jak na podstronach Chanel:

Trendy Web DEsign 2019 - Chanel

źródło: https://www.chanel.com/us/

Trend #4: Prosta i symetryczna siatka

Prosta symetryczna siatka dobrze wpasowuje się w model stron Mobile-First. Prosty i symetryczny grid można bardzo łatwo skalować. Użytkownik ma szeroki ekran – ma w rzędzie 4 elementy; Mniejszy – 2; Na smartfonie zaś wszystko się układa tak jak w Instagramie. To kolejny dowód na to, że najprostsze rozwiązania są najlepsze a twórców i klientów, którzy myślą w ten sposób czekają bardzo dobre czasy.

 

źródło: https://www.microsoft.com/pl-pl

Trend #5: Brak paginacji – nieskończone przewijanie strony

Nikt nie lubi zmieniać stron np. listowanych artykułów na blogu bo wiadomo, że na następne elementy trzeba będzie poczekać 2 sekundy i przewinąć po raz piąty parę centymetrów nagłówek. Z pomocą przychodzą asynchroniczne zapytania AJAXowe, które są wstanie pobrać w tle i wyświetlać zdjęcia czy artykuły w nieskończoność. To świetna zagrywka pod kątem UX i wygoda dla użytkowników urządzeń mobilnych. Trik stary jak świat ale dopiero w 2019 roku jest on przyjazny wyszukiwarkom (pełne wsparcie asynchroniczności JavaScript) i będzie działać bez problemów na 99% urządzeń.

Pinterest i Instagram od dawna korzystają z tego rozwiązania a moje wdrożenie infinite-scrolla współpracującego z biblioteką masonry, która tworzy ciekawe wodospady zdjeć, można podziwiać na stronie głównej ciągle aktualizowanego serwisu fotomodelingowego QQMODELS.PL

Trend #6: Dotknij mnie!

Skoro urządzenia mobilne (a częśc PC to laptopy konwertowalne wyposażone w ekran dotykowy)  warto zadbać o doświadczenia płynące  z nawigacji dotykiem. Efekty wizualne typu paralax trzeba zoptymalizować i przemyśleć na nowo takie kwestie jak wielkość i ułożenie przycisków.

Jak wiadomo na dotykowym ekranie nie można na coś „najechać myszką” chyba że znamy triki z dłuższym przytrzymaniem. Dlatego warto się zastanowić czy warto wykorzystywać zdarzenie hover i czy będzie ono używane. Na urządzeniach z ekranem dotykowym – na pewno nie.

Trendy web design 2019 - ekrany dotykowe

 

Trend #7: Ciągle minimalizm…

Bo jest skuteczny i ma wiele zalet, które opisywałem w artykule Minimalizm w Web Designie.  Cechy minimalistycznego designu na stronach internetowych to: białe tło, duże marginesy i operowanie odstępami. Mała ilość elementów dekoracyjnych (lub całkowity ich brak), zredukowana ale konsekwentna i użyteczna kolorystyka. Aż wreszcie zwięzły i konkretny przekaz, który jest skuteczny kiedy mamy szczere zamiary i klarowny sposób komunikowania się z klientem.

Największymi zaletami minimalizmu jest łatwość zwracania uwagi na istotne treści, elastyczność i skalowalność prezentacji. Projekty takie kontrastują z publikacjami, które zawierają nadmiar informacji i niepotrzebnie skomplikowany interfejs. Neutralność projektu i szerokie możliwości stosowania powodują, że z rozwiązań takich korzystają marki nastawione na jakość, które kierując swój komunikat do nieco bardziej świadomych odbiorców. To nie koniec. Uproszczona nawigacja ułatwia poruszanie się po stronie co jak wiadomo jest konieczne do zapewnienia dobrych doświadczeń z użytkowania strony i sklepu internetowego.

Trendy web design 2019 - Minimalizm - Onirim

źródło: https://onirim.com/

 

Trend #8: UX hacking, czyli drobiazgi, które wszystko zmieniają

Na końcu ale nie mniej istotne. Jeśli konkurencja jest na czasie i ma spore budżety na marketing w Internecie to o sukcesie zaczynają decydować szczegóły. Co to za szczegóły? Nie ważne jakie – ale chodzi o maksymalizację pozytywnych doświadczeń użytkownika – wszystkie chwyty dozwolone.

Mogą to być banały na które nikt nie wpadł np. formularz kontaktowy w stopce lub ekspresowe działanie strony, zdjęcia w rozdzielczości 4K Ultra HD wykorzystujące możliwości najnowocześniejszych urządzeń. Można czerpać wzorce z popularnych aplikacji społecznościowych operując zachowaniem interfejsu i upodabnianiem elementów strony do aplikacji mobilnych.

UX jest świetnym narzędziem w sklepach internetowych, skracając proces zakupowy lub upraszczając formularz rejestracji można naprawdę sporo zyskać.

audyt UX sklepu internetowego - proces zakupowy

To samo tyczy sę designu. Kto powiedział, że podstrony sklepu muszą być szablonowe i zawalone listami podobnych produktów i masą bannerów. Nic nie stoi na przeszkodzie by projekty nowoczesnych sklepów internetowych mogły walczyć na równi z designerskimi projektami z dribbble – wystarczy naprawdę odrobina wysiłku. Poniżej jedna z moich prac koncepcyjnych:

Wreszcie, wykorzystanie sprytnych algorytmów i integracje usług typu: Chatboty, wirtualni asystenci, przetwarzanie tekstu naturalnego, rozpoznawanie mowy i wiele więcej… Oczywiście najlepsze pomysły rodzą się w rozmowie z klientami. Tylko dopasowane i zawierające w sobie „mądrość biznesową” rozwiązania mają szansę na sukces we współczesnym Internecie.

Trend #9: Ciemne tło

Jeżeli znudziły nam się białe tła, które są popularne od wielu lat możemy się skusić na całkowicie przeciwne – czarne. Czarne tło na wyświetlaczu jest przyjazne dla oka szczególnie kiedy korzystamy ze stron wieczorem.

W poprzednich latach ciemne tło nie było zbyt dobrym rozwiązaniem. Dominujące od wielu lat ekrany LCD monitorów z matowymi powłokami zazwyczaj nie radziły sobie z wydobyciem głębokiej czerni. Szklane ekrany urządzeń dotykowych bez technologii antyrefleksyjnych wszystko odbijały, dlatego doświadczenia estetyczne, a szczególnie, kiedy korzystało by się ze strony w znacznym oświetleniu dziennym były też obarczone pewnym ryzykiem.

Trendy web design 2019 - Ciemne tło

źródło: https://www.apple.com/pl/

Obecnie wyświetlacze i popularność urządzeń z ekranami wysokiej klasy pozwala na stosowanie czerni bez obaw, że strona stanie się nieczytelna. Strona połyskuje, zachowuje wszelkie zalety minimalizmu a przy tym kontrastuje ze stronami z popularnym białym lub jasnoszarym tłem.

W QQMODELS daliśmy z klientem wybór użytkownikom czy chcą korzystać z ciemnego czy jasnego tła.

Podsumowanie

Mimo, że trendy oznaczyłem rokiem 2019 nic nie stoi na przeszkodzie by już teraz je stosować. Poruszane trendy mogą być z powodzeniem wykorzystywane przez ładnych parę lat. Bazują one bowiem na zjawiskach, które już teraz można zaobserwować i które mają przyszłość: rewolucja mobilna, rozwój UX, coraz większa świadomość i wiedza klientów.

Nie trzeba mieć nadprzyrodzonych zdolności by przewidywać przyszłość. Wystarczy właśnie analiza trendów, podstawowa wrażliwość na szczegóły, umiejętność obserwacji i wnioskowania. Jeżeli masz coś ciekawego do dodania pozostaw komentarz. Dziękuję!

Źródła

https://yoast.com/opinion-on-sliders/

https://www.awwwards.com/websites/

Trendy tworzenia stron internetowych 2019
4.7 (93.08%) głosów: 26

Autor: (29 lat)

Służę pomocą w razie wykonania / odnowienia strony lub sklepu internetowego dla twojej firmy niezależnie od twojej lokalizacji czy skali przedsięwziecia.

Tego typu wpisy piszę w wolnych chwilach lub pomiędzy projektami. Tylko pomyśl co mogę dla Ciebie zrobić w ramach usługi :-)

Zadaj pytanie lub skomentuj

Wyrażam zgodę na przetwarzanie moich danych osobowych przez firmę Paweł Mansfeld z siedzibą w Jastrzębiu-Zdroju, ul. Plebiscytowa 10, w celu udzielenia odpowiedzi, w tym przedłożenia oferty jeśli o nią pytam. Moje dane osobowe będą przetwarzane do czasu cofnięcia zgody lub przez okres niezbędny do ustalenia, dochodzenia lub obrony roszczeń. Mam prawo dostępu do danych, sprostowania, usunięcia lub ograniczenia przetwarzania, prawo sprzeciwu, prawo wniesienia skargi do organu nadzorczego i prawo do przeniesienia danych.

Komentarze publiczne

Weronika Celińska

24 września 2018

Bardzo przydatny i ciekawy wpis :-) dziękuję za inspiracje!

Paweł Mansfeld

16 października 2018

To ja dziękuję za miłe słowa :-) Cieszę się, że wpis okazał się przydatny.

Otrzymuj powiadomienie o nowych artykułach

Wyrażam zgodę na przetwarzanie moich danych osobowych przez firmę Paweł Mansfeld z siedzibą w Jastrzębiu-Zdroju, ul. Plebiscytowa 10, w celu udzielenia odpowiedzi, w tym przedłożenia oferty jeśli o nią pytam. Moje dane osobowe będą przetwarzane do czasu cofnięcia zgody lub przez okres niezbędny do ustalenia, dochodzenia lub obrony roszczeń. Mam prawo dostępu do danych, sprostowania, usunięcia lub ograniczenia przetwarzania, prawo sprzeciwu, prawo wniesienia skargi do organu nadzorczego i prawo do przeniesienia danych.

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