Jak dzisiaj projektować strony www?

Zobacz, co na stałe zaczyna zakorzeniać się w web designie.

O czym pamiętać, by strona internetowa, którą projektujemy dzisiaj, wyglądała nowocześnie także za rok? Zapraszam na krótką opowieść o nowych trendach w sieci oraz o tym, co na stałe zaczyna zakorzeniać się w temacie web designu.

Prognozy związane z rokiem 2015 wskazują, iż użytkownicy internetu częściej będą korzystać ze smartfonów i tabletów niż z urządzeń stacjonarnych. Jak wskazuje raport GemiusTrafic, już ponad 11% odsłon stron internetowych odbywa się z urządzeń innych niż laptopy i komputery stacjonarne. Wdrażanie idei responsive designu staje się czymś naturalnym i koniecznym.

Strony responsywne wypierają całkowicie tworzenie oddzielnych serwisów mobilnych. Oprócz oczywistych aspektów, takich jak oszczędność czasu tworzenia, łatwość zarządzania pojedynczym serwisem oraz uniwersalność, dochodzą dodatkowe, takie jak oczywiste wsparcie ze strony Google. Gigant z Mountain View wydał oficjalną rekomendację, w której bardzo mocno poparł tworzenie serwisów responsywnych, uznając tego typu działanie za najlepszą praktykę w przygotowaniu stron internetowych. Mając jeden adres url z tym samym kodem html najpopularniejsza wyszukiwarka internetowa może szybciej zaindeksować stronę oraz uporządkować jej zawartość. Nie trzeba indeksować kilku wersji tego samego serwisu. Dodatkowo użytkownicy przesyłający sobie linki do stron nie muszą zwracać uwagi na ich adresacje. W ten sposób zwiększamy również satysfakcję użytkownika korzystającego z naszej strony, co przekłada się bezpośrednio na jej pozycję w rankingu. Wszystko to powoduje, że projektanci rezygnują coraz częściej z tworzenia osobnych serwisów mobilnych.

Flat design, Flat UI

To fraza „klucz” w nowoczesnym projektowaniu. Flat design to zasada, w ramach której elementy strony powinno projektować się tak, aby wydawały się płaskie i lekkie. Chodzi nie tylko o ikony używane w serwisach, ale też o wszystkie elementy składowe interfejsu użytkownika, czyli user interface (UI), takie jak przyciski, elementy menu, przełączniki formularzy, a nawet logotypy. Ten trend tak mocno wpisał się w dzisiejsze projektowanie, że spora część witryn zaczyna się unifikować. Białe strony, dużo światła oraz flat UI dają odbiorcy ogromną czytelność przekazu, dzięki czemu stają się bardzo pożądanym trendem w projektowaniu.

Infografiki

Coraz częściej treść na stronie przekazywana jest w oparciu o infografiki, które również świetnie wpisują się w nurt flat designu. Za ich pomocą przedstawiane są najczęściej kolejne etapy danego procesu, tabele porównawcze czy elementy statystyczne. Projektanci powszechnie stosują to rozwiązanie, zwiększając w ten sposób atrakcyjność strony. W wielu przypadkach infografiki to osobne plansze - również filmy, animacje - lub bardzo duże elementy składowe layoutu strony.

SVG

Flat design wykorzystuje też pliki wektorowe z rozszerzeniem svg. Wsparcie dla tego formatu jest następstwem projektowania responsywnego. Tego typu elementy możemy efektywnie powiększać w momencie zmiany wielkości elementów na stronie, ponieważ svg pozawala zmniejszyć wagę ogromnych ikon do minimum. Tego typu elementy da się również bez problemu animować z wykorzystaniem JavaScriptu, a nawet w pewnym zakresie z wykorzystaniem CSS-a. W ten sposób możemy ożywić ikony, a nawet całe infografiki dostarczane nam przez projektanta serwisu. Pliki svg bardzo często wykorzystywane są przy wdrażaniu poglądowych map (np. centrów handlowych czy miast) oraz wizualizacji wykresów. Coraz bardziej upowszechnia się też stosowanie ich do nakładania filtrów, takich jak stosowanie maski czy rozmycie elementów na zdjęciu lub grafice - do tej pory niemożliwych do uzyskania w inny sposób.

Mniej klikania - więcej skrolowania

Skrolowanie przeżywa swoją druga młodość. Obecnie bowiem częściej skrolujemy niż klikamy. Strony głównych serwisów zostały podzielone na bloki funkcjonalne oraz wizerunkowe. Duże zdjęcia, ikony skrótów prowadzące do poszczególnych podstron czy duże stopki spowodowały znaczne wydłużenie layoutów stron. Skrolowanie jest intuicyjne i dużo prostsze dla użytkownika. Nie musi on przeszukiwać serwisu w poszukaniu informacji, wystarczy, że użyje w tym celu scrolla. Jest do tego przyzwyczajony poprzez korzystanie z serwisów społecznościowych, rozrywkowych czy też list komentarzy, które już dawno działają na identycznej zasadzie. W rezultacie wychodzi na to, że rozmiar ma znaczenie - przynajmniej w świecie web.

Opowiedz mi historię

Visual Storytelling - Parallax Scrolling

Strony główne zamieniają się dzisiaj w jedną długą opowieść. Budując tego typu serwisy, chcemy zachęcić użytkownika, żeby dotarł na sam ich dół. Dużo szybciej zdobędziemy jego uwagę, opowiadając ciekawą lub zabawną historię, niż skazując go na czytanie 10 akapitów o produkcie czy firmie. Dział kreacji czy grafik może w ten sposób stworzyć bardzo ciekawą i nietuzinkową prezentację. Częstym trendem w tego typu stronach stał się parallax scrolling - efekt paralaksy, mający na celu wywołanie wrażenia głębi podczas przeglądania serwisu. W tego typu rozwiązania idealnie wpisują się mikrostrony, które kładą mocny nacisk na jedną główną ideę lub produkt. Często strony kluczowych brandów wydzielane są poza główny serwis, otrzymując osobny adres oraz grafikę dostosowaną do wykreowanej opowieści.

Zdjęcia - duże jest piękne

To one w coraz większym stopniu budują całe serwisy internetowe, szczególnie strony typowo wizerunkowe. Graficy coraz śmielej sięgają w swoich projektach po duże zdjęcia a frontendowcy mają więcej narzędzi, aby zapanować nad ich zachowaniem i ułożeniem. Rozwój kaskadowego arkusza stylu CSS3 oraz oddawanie kolejnych modułów sprawiają, że jest to coraz prostsze zadanie. Możemy dowolnie ustawiać i kadrować zdjęcia, nakładać na nie efekty i wykorzystywać je w animacjach. Widoczny jest również powrót tekstur, które na jakiś czas zniknęły z nowoczesnego projektowania. Teraz powracają w nowoczesnych i kreatywnych pomysłach, w bardzo różnej formie.

Nowe wideo

Html 5 przyczynił się do tego, że zamiast zdjęć możemy użyć pliku wideo. Dlaczego nie? Tworzenie tego typu środku przekazu staje się coraz łatwiejsze i tańsze w produkcji. Widocznym trendem jest również wykorzystanie tego typu plików jako tła lub części strony. Bardzo często stosuje się w tym celu krótkie zapętlone filmiki. Dzięki temu prostemu zabiegowi nie wydłużamy samego procesu ładowania serwisu. Takie portale jak YouTube czy Vimeo rezygnują ze wsparcia dla flasha, przyczyniając się do przyspieszania wdrażania nowych rozwiązań w sieci.

Typografia rządzi

Dochodzimy do elementu stron internetowych, który najbardziej się rozwinął w ostatnim czasie. Nadejście CSS3, a wraz z nim reguły @font-face pozwala na dołączenie dowolnej czcionki do naszego serwisu. Piękna typografia, która od lat zarezerwowana była tylko dla grafiki DTP, zaczęła pojawiać się w sieci. Powstały dzięki temu strony, które oparte zostały tylko i wyłącznie o typografię. Widocznym trendem są bardzo duże nagłówki poszczególnych bloków budujących stronę. Bardzo często główne hasła są umieszczane w centralnej części bloku. Równie popularnym rozwiązaniem jest też wykorzystywanie reguły @font-face do wstawiania ikon na stronę.

Dostosowana nawigacja

Zafiksowane menu

Menu, które podąża za Tobą podczas przeglądania serwisu. Zawsze pod ręką. Pojawiło się w momencie upowszechnienia długich stron. Częstym trendem jest w tym przypadku zmiana wielkości pasa menu w zależności od pozycji strony. Dużo większe menu obserwujemy, gdy jesteśmy na początku serwisu, a w momencie skrolowania w dół zmniejsza się logo, wysokość pasa oraz zostaje ukryta część elementów, mniej ważnych z perspektywy odbiorcy prezentowanego contentu.

Menu pionowe/wysuwane na osobnej warstwie

Rozwiązanie zaczerpnięto z aplikacji mobilnych (początkowo z systemu iOS). Znajduje świetnie zastosowanie przy stronach mających nowoczesny układ kaflowy. Menu znane głównie ze stron paneli content management system (CMS) oraz stron typu software as a service (SaaS) jest coraz częściej stosowane w nowoczesnych stronach wizerunkowych. Możemy dowolnie decydować o formie i efekcie, w jakich blok menu ma się wysuwać. Niewątpliwym plusem tego rozwiązania jest to, że menu chowa się samoistnie, gdy użytkownik kliknie w dowolny element strony. W wielu przypadkach służy ono też jako menu pomocnicze, w którym ukryte są dodatkowe opcje lub archiwum, dzięki czemu główne menu możemy pozostawić w bardziej czytelnej formie.

Meganawigacja

Takie rozwiązanie świetnie sprawdza się, gdy na stronie mamy naprawdę dużo kategorii, np. w dużych serwisach i witrynach sklepowych. Wysuwany blok z menu pomocniczym bardzo często zajmuje sporą cześć ekranu. Dzięki temu kategorie czy lista stron są bardziej przejrzyste. Dodatkowo często podczas najazdu kursorem na odpowiednią kategorię zmieniają się zdjęcia. Dzięki temu użytkownik jest w stanie szybciej odnaleźć to, czego szuka.

Mikroefekty

To cała gama szybkich efektów mających na celu poprawę user experience. Są to bardzo często efekty powiązane z czynnością, jaką właśnie wykonał użytkownik na stronie. Mają sprawić, że serwis wyda się bardziej intuicyjny oraz podnieść jego walory użytkowe. Do często stosowanych efektów należą:

• wysuwane elementy formularzy,
• doładowania elementów listy (infilite scroll),
• wysuwające i zsuwające się menu,
• dynamiczne ładowanie animacji/grafów (dynamic animated charts),
• rozsuwające się pole wyszukiwania,
• animacje przycisku i paska postępu.

Animacje podczas skrolowania strony/ładowania elementów
(Lazy Loading Animations, Scroll Activated Animations)

Pojawienie się tego typu efektów wpisuje się w trend dbania o mikroszczegóły wizualne, które bardzo mocno zwiększają walory estetyczne strony oraz satysfakcję użytkownika z jej użytkowania. Animowane są tylko nowe elementy listy pojawiające się na www podczas przewijania jej w dół lub jak podczas Lazy Loading Animations – elementy, które stają się widoczne po raz pierwszy na ekranie. Animacje same w sobie nie są niczym nowym. Siła tego rozwiązania polega na odejściu od ciągłego zapętlania animacji oraz podkreślenia nowoczesności i dynamizmu serwisów. Upowszechnienie tej metody zawdzięczamy doskonałemu uzupełnianiu się JavaScriptu i CSS-a, w tym elementów transition effects czy animated keyframes.

Mniej znaczy więcej

Powstaje coraz więcej nowoczesnych serwisów w dobrym tego słowa znaczeniu. Responsive design przestaje być ciekawostką, a zaczyna stawać się standardem. Mija powoli czas testowania „na siłę” wszystkich nowych metod i trendów, które zazwyczaj mocno obciążały serwisy i wydłużały czas ich ładowania. Nie są już to zlepki nowych rozwiązań czy bloków przeładowanych niepotrzebnymi elementami i grafiką, które zmniejszały intuicyjność i funkcjonalność. Na nowych www stawia się na zawartość. Strony zaczynają być przejrzyste i funkcjonalne. Efekty szybkie i minimalistyczne. Całość zwiększa czytelność serwisu oraz wzmacnia wrażenia odbiorcy. Potem trzeba zadbać już tylko - a może aż - o wciągający content

Mikołaj Kulesz, head of web projects, Mind Progress Group

Pobierz ebook "Social media marketing dla firm i agencje się w nim specjalizujące"