Trendy webdesign w 2017 roku

Trendy webdesign w 2017 roku

Można zaobserwować obecnie jak wiele stron zmienia swoją szatę graficzną. Dzieje się to zgodnie z królującymi od jakiegoś czasu trendami mającymi na celu dostosowanie strony do przeglądania na różnych urządzeniach.  Doskonale spełnia to zadanie “flat design”, gdyż przeładowanie stron grafiką utrudnia oglądanie na urządzeniach mobilnych i stanowi niepotrzebny balast. Projektowanie stron idzie dalej w kierunku uproszczenia, unikania elementów zbędnych i skupienia się na treści.  Zamiast niepotrzebnych ozdobników jak grafika, wypukłe przyciski czy elementy flashowe czy ruchome stosuje się urozmaicenie fontów, ikony oraz wideo.

“Mobile-first”

Coraz częściej stosuje się zasadę “mobile-first”, która oznacza projektowanie stron najpierw dla urządzeń mobilnych czyli małych ekranów. W drugiej kolejności projektuje się stronę na większe ekrany. Zasada ta wymusza rezygnację z elementów niepotrzebnych, które będą zabierać miejsce na małym ekranie. Elementy te można ew. dodać na stronie desktopowej.

Oczywiście do lamusa przeszło już tworzenie specjalnej wersji mobilnej. Wykorzystując css media queires lub frameworki jak Bootstrap lub Foundation można stworzyć jedną wersję strony, która płynnie dostosuje się do różnych urządzeń.

Google udostępnia test optymalizacji mobilnej.

Stosowanie wzorów i frameworków

Ogromny wzrost popularności WordPressa oraz gotowych motywów jak również wykorzystywanie frameworków, może w efekcie prowadzić do sytuacji, kiedy wiele stron będzie wyglądać podobnie.

Pozornie wydaje się, że jest to wada. Ale czy na pewno?

Kiedyś królowały wodotryski, każda strona była inna. Właściciele stron prześcigali się w sposobach wyróżnienia swojej strony i tym sposobem przyciągnięcia oglądających. Obecnie odchodzi się od stron szczególnie wyróżniających się wyglądem. Projektowanie stron idzie bardziej w kierunku “user friendly” czyli stron przyjaznych dla użytkownika, ułatwiających przeglądanie i wyszukiwanie informacji, przejrzystych. Strona musi być na tyle intuicyjna aby użytkownik nie zastanawiał się gdzie kliknąć. A więc idziemy w kierunku stosowania wzorów do których użytkownicy są przyzwyczajeni i które w praktyce sprawdziły się jako przyjazne.

W dobie konkurencji właściciele stron nie chcą ryzykować, że użytkownik utknie na stronie nie wiedząc co dalej. Dlatego wybierają sprawdzone wzorce.

Zaś elementami wyróżniającymi stronę są profesjonalne zdjęcia, stosowanie kolorów, typografii, ikon oraz treść.

Minimalizm

Strony User friendly idą  w parze z, dalej obowiązującym, minimalizmem. Minimalizm nie jest nową ideą. Istniał zawsze. Idea minimalizmu sprowadza się do unikania przerostu formy nad treścią. Minimalizm idzie w kierunku superminimalizmu, gdyż na wyświetlaczach małych urządzeń jest mało miejsca.

Warto tu jednak znaleźć złoty środek. Kiedyś królowały tzw. intra z nieodłącznym przyciskiem “skip intro”, z którego każdy szybko korzystał. Teraz zaś królują duże napisy, duże ikony, krótkie hasła i czasem treści sprowadzonej do minimum jest jednak trochę za mało.

 

Hamburger menu w motywie Monstroid

Schowane menu

Ukryte menu najczęściej pojawia się jako tzw. “hamburger menu” czyli ikonka kreseczek poziomych w prawym lub lewym rogu. Po kliknięciu menu wysuwa się z boku jako off-canvas, który przesuwa zawartość strony lub ją przykrywa. Niekiedy wysuwalne meny przykrywa całą stronę, co mnie się akurat nie bardzo podoba.

Hamburger menu po kliknięciu na ikonkę rozwija się z drugiej strony (motyw wordpress Monstroid)

Jeszcze do niedawna hamburger menu uważane było za niewypał, bo użytkownicy mają kłopot ze znalezieniem menu na stronie. W sumie jest ono bardzo uzasadnione na widoku dla urządzeń mobilinych, gdyż nie zabiera miejsca na stronie i nie zmusza użytkownika do długiego przewijania. Na stronach desktop w zasadzie oszczędza niewiele miejsca, bo tylko górny pasek.

Jak się okazuje użytkownicy przyzwyczaili się do hamburger menu, gdyż staje się ono coraz bardziej popularne.

Najważniejszą sprawą jest takie ukrycie menu aby nie zabierało miejsca a jednocześnie było łatwe do znalezienia. Ikonka musi być dobrze widoczna. Niekiedy dla ułatwienia dodaje się napis “menu”. Ikonka menu znajduje się często na kontrastowym tle aby wyraźnie odcinała się od reszty strony.

Samo wysuwalne menu zawiera z reguły tylko tekst. Aby je uatrakcyjnić stosuje się ciekawą typografię, większą czcionkę, jaskrawe tło.

Hamburger menu versus Megamenu

Megamenu znacznie rzadziej się ostatnio widuje. Czy to znaczy, że się nie przyjęło? Nowoczesny motyw dla WordPresa Monstroid oferuje oba te rozwiązania.

Odchodzi się od rozbudowanych menu i mocno zagnieżdzonych drzew podstron. Proste menu powinno być najwyżej dwupoziomowe. Megamenu rozwiązuje problem rozbudowanego menu gdyż dropboksy są duże i można umieścić tam więcej treści, zamiast otwierać kolejnych rozwijalnych menu.

Co ciekawe odchodzi się od rozbudowanego menu na blogach. Ich zadanie przejmuje chmura tagów pozwalająca na szukanie tematyczne. Blogów się nie czyta jak książki lub gazety. Zamiast tego wyszukujemy informacji w google. W skutek tego menu artykułów na blogu przestaje być potrzebne. Eksponuje się tylko najnowsze wpisy na stronie głównej, a starsze już nie.

 

responsive_wp_728x90


Profesjonalny Hosting


2 Comments
Leave a reply

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