Trendy webdesign 2016

Trendy webdesign 2016

W dziedzinie webdesign obowiązują mody, które są związane z pojawiającymi się nowymi technologiami i pomysłami. Bardzo dużo firm odświeża swoje strony idąc głównie w kierunku flat design i one-page. Wydaje się, że nieco odchodzą kafelki typu pinterest, infinite stroll oraz efekt paralax.

Jeszcze do niedawna długie, tasiemcowe strony przewijane do dołu typowe były dla stron sprzedażowych. Teraz królują na coraz większej ilości stron firmowych.

Wydaje mi się, że nowe trendy idą w kierunku stron, które nie oferują dużej ilości informacyjnej treści. Raczej istnieje tendencja do pokazywania najważniejszych rzeczy czyli generalnie prezentowania produktów. Strony zawierające duże ilości treści do czytania czy przeglądania nadal pozostają przy tradycyjnym układzie 2 lub 3 kolumnowym, bo taki układ jest akurat najwygodniejszy do wyszukania informacji. Natomiast stron firmowych czy usługowych nikt nie odwiedza aby czytać. Szukamy najważniejszych rzeczy, które mają się szybko rzucić w oczy. Tu układ one-page zdaje egzamin.

Flat design

Jak sama nazwa wskazuje flat design oznacza wykorzystanie płaskich elementów czyli jednolity kolor bez gradientów, brak wypukłości, brak cieni. Obowiązuje zasada minimalizmu, dużo przestrzeni. Elementów typu napisy, ikony, obrazki jest niewiele, za to są duże. Stosuje się proste fonty, napisy są duże i łatwe do przeczytania.  Obecnie flat design idzie w kierunku złagodzenia surowości i dozwala na dodawanie nieco cieniowania, większej ilości kolorów.

Nowe trendy

W zasadzie nie są nowe bo utrzymują się już od jakiegoś czasu i zdaniem specjalistów w tej dziedzinie będą się utrzymywać.

  • ghost buttons – przyciski, które nie wyróżniają się i nie przyciągają uwagi ale wyglądają wyraźnie jak przyciski. Przycisk jest duży, przezroczysty i wygląda jak napis otoczony cienką ramką. Obowiązują kolory czarny lub biały. Przycisk najczęściej umieszczony jest na środku lub w widocznym miejscu na tle obrazka. Ważny jest w tym przypadku wybór obrazka w tle, który nie może zawierać bardzo kontrastowych kolorów. Obrazek musi być mocno stonowany, w przeciwnym razie taki button byłby mało czytelny.
  • hero header – nagłówek strony zawiera duży obrazek, z reguły na cały ekran, główne hasło na jego tle oraz menu w formie poziomego paska rozwijalnego menu u góry albo tzw. hamburger menu. Ponieważ obrazek zajmuje najczęściej cały ekran, odwiedzający musi wiedzieć co zrobić dalej. Z reguły ma on klikalny napis na środku i ghost button i strona jest też przewijalna do dołu. Hero header wymaga bardzo dobrego, interesującego zdjęcia, które jednocześnie służy jako tło i nie zabiera za bardzo uwagi oglądającego, który ma iść dalej. Szczególnie modne są obrazki pokazujące od góry biurko lub stół, na którym leżą różne przedmioty.
  • hero header wideo – świetnie wyglądają strony hoteli, gdzie wyświetla się wideo pokazujące pokoje lub udogodnienia dla gości. Jednak wideo długo się ściąga.  Ciekawym rozwiązaniem jest utworzenie ruchomego gifa, gdzie porusza się tylko fragment obrazka, a reszta pozostaje nieruchoma.
  • ikonografia – użycie ikon  na stronach www staje się coraz szersze. Ikony stają się większe, bardziej rozbudowane, kolorowe i nabierają coraz bardziej artystycznego wyrazu.
  • typografia – obecnie nie ma już kłopotu  z używaniem różnych fontów na stronach www. Trendy idą w kierunku bardziej ciekawych fontów, zaś napisy stają się większe. Z drugiej strony obowiązuje zasada stosowania jednego fontu na stronie. Zwraca się bardziej uwagę na czytelność i wygodę czytelników, niż na fikuśnych literach.
  • rozszerzanie się palety kolorów

Duże strony

Trendy idą w kierunku dużych stron. Coraz częściej strony obejmują cały ekran. Uważa się, że zastosowanie dużego elementu na całą stronę w nagłówku zachęca odwiedzających do przewijania w dół.

Podobają mi się slajdry z przewijanymi zdjęciami na całą stronę, tak jak to zrobiłam na swoim portfolio artystycznym. Nie lubię stron, które nie posiadają przewijania czyli na ekranie jest tylko hero image, duży napis i jeden lub pare linków. Instynktownie chcesz przewijać i nie wiesz gdzie. Czujesz jakby utratę kontroli nad swoim sposobem oglądaniem strony. Poza tym takie rozwiązanie przypomina dawniejsze, mocno krytykowane intra. Kiedyś zapanowała, przejściowa na szczęście, moda na intro, gdzie odwiedzający musiał sobie obejrzeć flashową animację. Przeważnie nie oglądał tylko szybko klikał Skip.

Urządzenia mobilne niejako wymusiły usunięcie ze stron kolumn bocznych. Menu górne zmienia się na małym ekranie na tzw. hamburger menu, które się rozwija po kliknięciu. Kolumna boczna powoduje, że na telefonie zawartość strony spada nisko pod kolumne i trzeba dużo przewijać. Rozwiązaniem tego jest menu off-canvas, chociaż nie jest ono intuicyjne i w pierwszej chwili wielu użytkowników nie wie gdzie kliknąć.

Efekt parallax

Podoba mi się efekt parallax ale w pionie. Uważam, że mnożenie na stronie poziomych sliderów to przesada. Wystarczy jeden slider w nagłówku. Irytują mnie też mnożące się animacje. Odnoszę wrażenie, że są to niepotrzebne ozdobniki, które niczego nie wnoszą. Jakoś irytuje mnie trend w kierunku pisma obrazkowego, tak jakbyśmy się cofali do epoki kamienia łupanego albo dzieciństwa.

Ale dyskretny efekt parallaxy z pięknymi zdjęciami w tle wygląda super, szczególne urozmaica długie strony.

 

 

 

 

 

responsive_wp_728x90


Profesjonalny Hosting


3 Comments
  1. Witam, z większością obserwacji się zgadzam. Zastanawiam sie tylko jak te trendy mają się do konwersji. Przykładowo “ghost buttons – przyciski, które nie wyróżniają się i nie przyciągają uwagi ” – czy przyciski nie powinny właśnie przyciągać uwagi?

  2. Ja uwielbiam ten efekt paralaxa, naprawdę wprowadza to fajny klimat na stronie.

Leave a reply

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *