Web Design

Trendy w projektowaniu stron i aplikacji www

webdesign trends 2016

Trendy w projektowaniu stron www, w szczególności biorąc pod uwagę ich wygląd, zmieniają się nieubłaganie, szybciej niż kiedykolwiek wcześniej. Od czasów uruchomienia pierwszej strony www, a było to już ponad 25 lat temu, design serwisów internetowych z każdym rokiem ewoluował. Od prostych, czarno-białych tekstów pozbawionych jakichkolwiek elementów dekoracyjnych, aż do kształtów możliwie najmocniej przypominających te spotykane w codziennym życiu.

W tym krótkim przewodniku chciałbym Wam przedstawić w kilku punktach najważniejsze obowiązujące aktualnie trendy w tworzeniu stron i aplikacji internetowych. Projektując strony www powinniśmy nie tylko znać, ale również potrafić wykorzystać aktualne tendencje i kierunki, w których podążają najlepsi webdesignerzy.

Pamiętajmy jednak, że decyzja o podążaniu za nimi powinna przede wszystkim zależeć od wymagań klientów oraz rodzaju biznesu, którego dana strona dotyczy.

„Jeśli nie wyprzedzasz obecnych czasów, to tak jakbyś był za nimi.”

Poznajmy więc najważniejsze trendy w projektowaniu stron i grafiki na potrzeby internetu w obecnym, 2016 roku.

1. Użyteczność – (z ang. usability)

Rok 2016 to rok użytkownika. Najważniejszym elementem dobrze zaprojektowanej strony internetowej stało się dbanie o odpowiednie doświadczenie użytkowników, czyli tzw. user experience (UX).
Pamiętajmy, nikt nie doceni naszych wysiłków nad super, cool, hiper designem jeśli nie będzie on przyjazny dla końcowego użytkownika. Potencjalny klient, korzystający z naszej aplikacji lub strony www w pierwszej kolejności powinien z łatwością poradzić sobie z jej obsługą. Wygląd jest sprawą drugorzędną.

Web usability - trendy w projektowaniu stron
źródło: http://blog.fatcow.com/

Wraz z coraz większą liczbą czynników wpływających na wysoką pozycję naszej strony w wyszukiwarce Google zwiększa się również świadomość użytkowników oraz metody obsługi tworzonych przez nas aplikacji.

Jedna jedynie rzecz jest w tym wypadku zawsze wspólna:

„strony www muszą ładować się możliwie najszybciej oraz być łatwymi w obsłudze”.

Użyteczne treści są również brane pod uwagę przy określaniu przez Google ogólnej wartości naszych witryn.

Przy okazji gorąco zachęcam do zapoznania się z pełną listą 200 składników rankingowych algorytmów Google http://secureglass.net/200-czynnikow-rankingowych-google, które są brane pod uwagę przy ocenie pozycji naszej strony www.

2. CTA – przyciski „call to action”

Czy zastanawialiście się kiedyś z jakim elementem stron www najczęściej wchodzimy w różnego rodzaju interakcję?
Co najczęściej musimy zrobić, aby poznać ofertę firmy, coś kupić, wysłać, odebrać? Oczywiście, kliknąć w przycisk.

Buttony zadomowiły się na naszych stronach internetowych i w aplikacjach na tyle mocno, że stały się głównym sposobem, dzięki któremu użytkownicy podejmują kolejne kroki podczas ich przeglądania. Mając na uwadze ich specyficzne przeznaczenie nazwano je po prostu przyciskami Call To Action (w skrócie CTA).

My, jako ich twórcy, powinniśmy zaprojektować je zawsze w taki sposób, aby były jak najmocniej zachęcające do… kliknięcia.

W 2016 roku należy mieć na uwadze, że w celu zwiększenia ilości kliknięć w przyciski CTA należy przestać je umieszczać w miejscach, które rozpraszają uwagę użytkowników (np. w sidebarach).

Udowodniono, że najlepszym sposobem jest pozycjonowanie ich w pojedynczych kolumnach, szerokich na całą, dostępną szerokość ekranu.

Tego rodzaju przyciski nazywamy z ang. Single Column CTA.

Single CTA image

W tym miejscu warto również wspomnieć o kolejnym, obowiązującym trendzie związanym z buttonami Call To Action. Z racji tego, że są to jedne z najważniejszych obiektów na obecnych stronach www sprawmy, aby były one gotowe do szybkiego użycia oraz zawsze dobrze widoczne.

Możemy to osiągnąć w bardzo łatwy sposób. W przypadku urządzeń mobilnych stwórzmy footer dedykowany specjalnie dla przycisku CTA, który będzie przyczepiony stale w dolnej części aplikacji. Z kolei na desktopach umieśćmy go po prostu w zawsze widocznym, „zafixowanym” headerze.

3. Priorytet w nawigacji

Naprowadzenie użytkowników dzisiejszych stron www tak, aby zainteresowali się dokładnie tym miejscem, na którym nam najbardziej zależy (np. ofertą) jest prostsze wtedy, gdy dany odnośnik po prostu wyróżnimy.

Unikajmy zbyt dużej ilości opcji wyboru, bo zainteresowani klienci bardzo łatwo, w natłoku zbędnych informacji, się pogubią. Technikę nadawania priorytetów z łatwością można zastosować choćby do głównej nawigacji na naszej stronie internetowej.

Dzięki ukryciu podrzędnych elementów menu w popularnym ostatnio „hamburger menu” możemy nadać odpowiedni priorytet reszcie odnośników. Zwiększenie zainteresowania, na przykład naszą ofertą, osiągniemy wtedy poprzez łatwe wyróżnienie przycisku „Oferta” implementując na nim wyróżniający od reszty obiektów styl, tak jak przedstawiono to poniżej.

Prioritized navigation image

4. Wideo, animacje, coraz mniej stock photos

Większość z Was zapewne zauważyła ogólnie panujące trendy w projektowaniu stron i aplikacji www wśród obecnych twórców stron www w postaci umieszczania wideo jako tła. Wykorzystując tego rodzaju techniki powinniśmy w szczególności pamiętać o zapewnieniu odpowiedniej szybkości wczytywania naszych stron www ze względu na duże rozmiary tego rodzaju plików.

Niezbędnym elementem jest zastosowanie w tym momencie możliwie największej kompresji.
Jeśli macie ochotę poznać możliwości tworzenia jeszcze lepszych filmów dla potrzeb stron www polecamy sprawdzić przewodnik znajdujący się w tym miejscu.

Opisany powyżej trend zapewne będzie się mocno rozwijać z upływem kolejnych miesięcy i lat, gdyż już teraz zauważyć można coraz częstsze zastępowanie statycznych obrazów właśnie krótkimi, zapętlonymi filmikami. Bardzo możliwe, że coraz częściej będziemy świadkami wykorzystywania również animowanych gifów, dosłownie wszędzie! Facebook, Twitter, Snapchat lub Pinterest już niedługo mogą zostać zalane coraz większą ilością animowanych obrazków. Wszystko po to, aby przekazywać informacje w łatwy do odczytania przez widzów sposób.

dribble_gif
źródło: https://dribbble.com/shots/741414-Dribble-Gif

Dzieje się tak, ponieważ film jest świetnym sposobem na przyjazne i szybkie pokazanie klientom spersonalizowanego opisu własnej marki, co jest kolejnym ważnym elementem opisywanego wcześniej user experience.

Tutaj dochodzimy do jeszcze jednej, ważnej kwestii. Kilka lat temu zaczęły powstawać jak grzyby po deszczu serwisy udostępniające mniej lub bardziej profesjonalne zdjęcia i obrazy. Tak zwane zdjęcia stockowe stały się popularne do tego stopnia, że coraz częściej mogliśmy zauważyć na kilku różnych stronach www wykorzystywanie dokładnie tych samych zdjęć! Sprawiało to, że odwiedzane przez nas witryny zaczęły stawać się po prostu… nudne, podobne do siebie, bez oryginalnego przekazu.

W obecnym 2016 roku, jak również w przyszłości, zdjęcia stockowe przestaną być tak chętnie wykorzystywane, a zastąpią je właśnie filmy lub oryginalne, ręcznie rysowane obrazy. Zachęcamy więc już teraz do eksperymentowania z alternatywnymi sposobami przekazu, w postaci wideo i własnoręcznie wykonanymi obrazami lub zdjęciami.

hand-drawn
źródło: http://climateunderpressure.com/

Zapewniamy, że strony internetowe wykonane w ten sposób zyskają uznanie aktualnych jak i nowych odwiedzających, co jednoznacznie przełoży się na jeszcze większe zainteresowanie naszą witryną.

5. Card Design

Poprzedni rok, a w szczególności aktualny 2016, przyniósł jeszcze jeden trend związany tym razem z ułożeniem elementów na stronach www. Chodzi oczywiście o wszechobecne karty.

Coraz większa liczba treści oraz funkcjonalności wymaga odpowiedniego zapanowania nad informacjami, które powinny być prezentowane odwiedzającym w sposób czytelny i zrozumiały. Projektanci stron i aplikacji internetowych, mając na uwadze obecne trendy w projektowaniu stron www, wpadli na pomysł układania obiektów jeden obok drugiego, w równych odstępach, ze zbliżonymi do siebie wymiarami. Tak powstał styl przedstawiania treści na kartach.Card Design image

Trend ten został zapoczątkowany przez serwis Pinterest, aby umożliwić oglądającym szybkie odnalezienie interesujących ich informacji. W łatwym szukaniu pomagają zawarte na kartach odpowiednio dobrane do tematyki obrazy. Przy projektowaniu takiego układu należy zwrócić szczególną uwagę na to, aby każda z kart stanowiła całkowicie oddzielny obiekt zawierający informacje niepowiązane z pozostałymi.

Nie tylko zagraniczne serwisy jak Facebook, Google czy Twitter korzystają z tego rodzaju szablonu. Również na polskim rynku, rodzime witryny pomału zaczynają odkrywać zalety Card Design. Wystarczy odwiedzić takie popularne strony jak: wp.pl, onet.pl lub antyweb.pl, aby przekonać się co jest i będzie jeszcze długo obowiązującym trendem w projektowaniu układów stron www.

6. Responsive Web Design (RWD)

RWD - - trendy w projektowaniu stronW obecnych czasach nikt już nie ma wątpliwości, że posiadanie strony lub aplikacji internetowej przystosowanej do przeglądania na urządzeniach mobilnych jest czymś wyjątkowym. Dzisiaj, jesteśmy świadkami zupełnie nowego trendu zwanego mobile first.

Smartfon, tablet lub inny sprzęt mobilny są głównymi urządzeniami, na które zwracamy uwagę podczas projektowania stron www. W 2016 roku techniki responsywne (RWD) nie orientują się już tylko na odpowiednim dopasowaniu elementów do wersji mobilnej. Lecz przede wszystkim na prawidłowym wyświetlaniu ich, w pierwszej kolejności, w naszych telefonach komórkowych.

Potwierdzeniem tego są ostatnie wytyczne Google`a dotyczące oceny rankingowej stron www, na którą bardzo mocno wpływają wszelkie czynniki związane z dopasowaniem do RWD.

Wystarczy skorzystać z popularnych narzędzi Google dla developerów:

  • PageSpeed Insights – sprawdzającego prędkość naszej witryny oraz wygodę korzystania z niej, głównie w wersji mobilnej, dodatkowo też na desktopie,
  • Mobile-friendly Test – analizującego zgodność z urządzeniami mobilnymi,

aby przekonać się, że ekrany smartfonów stają się bardzo szybko podstawowymi wyświetlaczami, na których są przeglądane tworzone przez nas witryny i aplikacje.

Pamiętajmy, że obecny trend skupia się bardzo mocno na usability, a odkąd ekrany mobilne stały się tak naprawdę tymi głównymi, doświadczenie użytkowników podczas korzystania z nich są najważniejszym elementem, na którym powinniśmy skupić naszą uwagę.

W dzisiejszym świecie nie wystarczy już tylko wykorzystywać media queries, by ukrywać obiekty, które były zbyt duże dla małych ekranów telefonów. Jeśli cokolwiek nie zostanie udostępnione użytkownikowi tylko dlatego, że korzysta z własnego smartfona oznacza to tylko jedno – taka strona www nadaje się do gruntownego odświeżenia i przemodelowania zgodnie ze standardami Responsive Web Design na miarę 2016 roku.

7. Flat Design 2.0

Styl, który jeszcze nie tak dawno był standardem, opierał się na przedstawianiu kształtów i grafiki w sposób jak najbardziej realistyczny, podobny do rzeczywistych odpowiedników. Każdy element musiał być po prostu ładny, zawierać gradienty, cienie, odblaski i inne „graficzne upiększacze”. Odbijało się to niestety zarówno na trudności w ich opracowaniu jak również na czasie ładowania stron przez przeglądarki.

Wraz z wprowadzeniem Windows 8 i kontrowersyjnego, jak na tamte czasy stylu Metro UI w 2012 roku, rozpoczął się trend spłaszczania grafiki. Powstał tzw. Flat Design. Choć jego korzenie sięgają jeszcze dalej – wystarczy sobie przypomnieć choćby oprogramowanie Windows Media Center zaprezentowane w 2002 roku. Już wtedy aplikacja opierała się na płaskich elementach. Microsoft kontynuował trend wraz z wydanym w 2010 roku systemem Windows Phone 7.

Jednak, tak jak wszystko wraz z upływem czasu w końcu przemija, tak również powyższy styl, zwany skeuomorfizmem, odszedł w niepamięć w okolicach roku 2014. Wraz z nim pożegnaliśmy wykorzystywanie wszelkich animacji tworzonych w technologii flash.  Od tej pory głównym nurtem przyświecającym projektantom stron i aplikacji internetowych stał się Flat Design.

Zalet jakie niesie ze sobą stosowanie płaskich elementów grafiki jest sporo. Począwszy od szybszego ich renderowania do na przykład lepszego skalowania na mniejszych ekranach naszych smartfonów. To właśnie dzięki rewolucji, jaką przyniosły w ostatnich latach urządzenia mobilne, na których w 2016 roku częściej przeglądamy zasoby internetu niż na zwykłych komputerach, używanie technik Flat Designu stało się tak powszechne.

Jednak od zapoczątkowania trendu spłaszczania grafiki minęły już, jakby nie patrzeć, 2 lata. Wszystko staje się przyjazne dla systemów wyświetlających treści. Użytkownicy są coraz bardziej świadomi możliwości, jakie dają im strony i aplikacje więc najwięksi światowi designerzy zaczynają szukać czegoś nowego. Pomału jesteśmy świadkami narodzin Flat Design 2.0.

Choć sama nazwa niekoniecznie jest tą ostateczną to sama idea wydaje się być dość prosta. Od bieżącego roku płaskim elementom delikatnie zaczyna się dodawać cechy… stylu wcześniejszego.

Pamiętamy, że ideą Flat Designu jest między innymi:

  • brak efektów cieni (drop shadows), gradientów, ozdobników,
  • używanie prostych elementów oraz ikon,
  • skupienie się na prostych krojach czcionek, typografi bezszeryfowej (sans-serif),
  • ogólny, wszędzie widoczny minimalizm.

W drugiej wersji tego stylu, powyższe, charakterystyczne cechy będą wzbogacone o elementy zwiększające użyteczność (usability). Trend kieruje się w stronę dodawania warstw i stylizacji trójwymiarowej. Jeśli chcemy podążać za nowym trendem, jako designerzy i projektanci, powinniśmy zadbać o to, aby w naszych przyszłych projektach wykorzystywać podane poniżej własności.

  • Podnoszenie lub obniżenie wizualnie elementów, aby łatwiej pokazać użytkownikowi jakie działania powinien podjąć. Dodanie efektu trójwymiarowości pomoże korzystać z funkcjonalności strony lub aplikacji w sposób prawidłowy. Użytkownik musi wiedzieć, bez zastanowienia, w co może, a w co musi kliknąć.
  • Dodanie animowanych elementów pozwoli użytkownikom dotrzeć do tych miejsc na stronie, które służą do podjęcia dalszych działań lub akcji.
  • Przedstawienie obiektów w sposób zrozumiały dla użytkowników naszej witryny zagwarantuje dodanie animacji lub transformacji, które będą zgodne z prawami fizyki. Realistyczne zachowanie się elementów na stronie www pomoże odwiedzającym w zrozumieniu ich działania. Sprawi również, że będą oni od razu wiedzieć jak mogą ich używać.
  • Zwiększenie użyteczności naszych aplikacji osiągniemy także dzięki zwiększeniu rozmiarów typowych elementów na stronie. Większe obrazy i obiekty stworzą odważne, pierwsze wrażenie na widzach oraz pomogą w obsłudze na mniejszych ekranach (osoby z większymi palcami nie będą miały problemów z obsługą aplikacji).
  • Na nowo możemy łączyć znane, płaskie obiekty z efektami: gradientów, subtelnych cieni oraz dowolnych odcieni kolorów. Zarówno delikatnych, pastelowych jak również tych bardziej mocnych, kontrastowych i jasnych.
flat2.0
źródło: https://dribbble.com/shots/2329965-Nike90-Store

Należy więc zauważyć, że Flat 2.0 nie jest żadną rewolucją w świecie designu stron i aplikacji internetowych. Jest bardziej ewolucją w stronę zagwarantowania nam wszystkim, użytkownikom internetu, jeszcze lepszego i przyjemniejszego korzystania z jego zasobów.

Bardzo dobrym przykładem wykorzystania nowego trendu jest, wprowadzony przez Google, styl projektowania pod nazwą Material Design. Zawiera on wytyczne do projektowania nowoczesnych aplikacji, ale również wykorzystywany jest coraz chętniej na stronach www. Pomimo tego, że Google wprowadzał go jako odpowiedź na zbyt płaski Flat Design. Obecnie stał się głównym stylem zawierającym charakterystyczne cechy Flat 2.0. Stawiającym na pierwszym miejscu użyteczność i prostotę obsługi przez użytkowników.

materialdesign
źródło: http://manualcreative.com/project/google-design/

Przypomnijmy sobie jeden z pierwszych akapitów tego wpisu, mówiący o tym, że rok 2016 jest rokiem użytkowników. Śmiało można stwierdzić, że obecne jak i przyszłe trendy będą w szczególności dążyły do stawiania użytkowników, na pierwszym miejscu.

Nie wiem jak Wy, ale ja jestem z tego powodu bardzo szczęśliwy. Ze spokojem patrzę w przyszłość, która dla wszystkich korzystających z zasobów globalnej sieci podąża w dobrym kierunku. Jeśli macie swoje przemyślenia lub uwagi na ten temat, zachęcam do dyskusji w komentarzach 🙂

Trendy w projektowaniu stron i aplikacji www
Ocena: 5 (2 głosów)
Łukasz Żurawski

Łukasz Żurawski

CEO/Właściciel at Lukante
Założyciel Lukante. Z branżą IT związany od 9 lat. Na co dzień stara się być na bieżąco z trendami nowoczesnych technologii internetowych. Stale pogłębiając swoją wiedzę w dziedzinie Front-Endu stara się wykorzystywać zdobyte doświadczenie przy każdym, nowym projekcie.
Łukasz Żurawski
Spodobał Ci się artykuł? Podziel się z innymi!
FacebookTwitterGoogle+LinkedInPin It