trenDy

Użyteczność
Trendy
w projektowaniu
stron WWW
Tekst: Fotolia
W
ybraliśmy kilka najbardziej
popularnych nurtów i rozwiązań webowych, które zawładnęły internetem w 2016 r. i które jeszcze
długo powinny być na topie. Sprawdź,
które z nich możesz zastosować na swojej stronie.
Przede wszystkim
responsywność
Obecnie prawie 9 na 10 użytkowników
internetu posiada przynajmniej jeden
smartfon, a urządzenia mobilne to główne
narzędzia, dzięki którym zwłaszcza ludzie
młodzi łączą się z siecią. Dlatego niezależnie od tego, czego dotyczy Twoja strona,
ani tego, czy tworzysz wielki serwis, czy
one-page site, jedno jest pewne – musisz
Rysunek 1.
W kwietniu 2016 r. w świecie cyfrowym funkcjonowało
ponad miliard stron internetowych – konkurencja
w sieci jest więc ogromna. Poza tym trendy w wyglądzie
i mechanizmach działania stron www bardzo szybko
się zmieniają, dlatego warto je śledzić i czerpać
inspirację przy tworzeniu własnego portalu.
sprostać wymaganiom responsywności (responsive web design – RWD). Responsywność to, mówiąc najprościej, zdolność
strony do automatycznego dostosowania
układu treści do wielkości okna urządzenia, na którym jest wyświetlana. Mimo
że o RWD mówi się już od dobrych kilku
lat, badania wskazują, że wciąż duża
część stron internetowych nie jest responsywna. Pamiętaj jednak, że strona, która
nie dopasowuje się do rozmiaru ekranu,
to dzisiaj nie tylko przeżytek, lecz także
marketingowy strzał w stopę. W 2015 r.
Google wprowadził zmiany, przez które
w wynikach wyszukiwania na urządzeniach mobilnych jako pierwsze pojawiają
się strony do nich dostosowane. Planując
więc konkretne rozwiązania graficzne lub
rzyrost liczby stron internetowych na świecie od kwietnia 2000 r.
P
do kwietnia 2016 r. (Źródło: http://news.netcraft.com/archives/category/
web-server-survey/)
programistyczne na swoją stronę, upewnij
się, że będą responsywne – zwłaszcza jeśli
jej odbiorcami mają być przede wszystkim
użytkownicy komórek czy tabletów.
Mniej znaczy więcej
Ten nurt w projektowaniu stron jest już
znany od jakiegoś czasu, ale wciąż trzyma
się nieźle i długo jeszcze pozostanie trendy.
Mowa o minimalizmie. W czasach kiedy
w każdej sekundzie jesteśmy bombardowani najróżniejszymi komunikatami,
prostota jest w cenie. I jest prawdziwą
sztuką. Żeby stworzyć stronę internetową
w tym duchu, trzeba naprawdę dogłębnie przemyśleć jej budowę i wiedzieć, co
dokładnie chce się zakomunikować – wyodrębnić to, co najważniejsze, zrezygnować
z tego, co zbędne, postarać się o właściwą
strukturę treści itd.
Jak więc – poza ograniczeniem i uporządkowaniem treści – możesz nadać stronie
minimalistyczny charakter? Przede wszystkim grając pustą przestrzenią, która –
wbrew pozorom – ma wielką siłę przyciągania (zobacz dalej wymienione przykłady),
ale też za pomocą uproszczonej nawigacji,
np. hamburgera (ikonki, która dopiero po
kliknięciu rozwija się do pełnego menu),
prostej typografii i nienachalnych, stonowanych kolorów. Tak rozumiany minimalizm leży u podstaw dwóch poniższych,
dominujących dziś stylów projektowania.
Flat design – styl, w którym nie stosuje się elementów dających złudzenie
czerwiec-lipiec 2016 Online Marketing Polska
55
Użyteczność
Rysunek 2.
Przykładowe strony w stylu flat design
https://studiorotate.com/
Rysunek 3.
http://natan.be/
Przykładowe strony w stylu flat design 2.0
http://www.publicis90.com/
trójwymiarowości – (gradientów, cieniowania itp.), a kładzie nacisk na proste kształty i kroje tekstu oraz oszczędną
paletę kolorów. Flat design ma długą historię, bo wywodzi się z Międzynarodowego
Stylu Typograficznego rozwijającego się
w Europie od początku XX w.; teraz przeżywa drugą młodość. Od czasu, kiedy stał
się modny, zdążył już ewoluować – jego
odświeżona i udoskonalona odsłona stylu
to flat design 2.0, dopuszczająca stosowanie żywych, kontrastujących kolorów
(np. dwóch dominujących barw – tzw.
duotone), cieni i ekstrawaganckich fontów –
wszystko po to, by ułatwić poruszanie się
po stronie i uatrakcyjnić ją wizualnie.
Jeśli chcesz zainspirować się stronami
z całego świata wykonanymi w stylu flat,
zajrzyj na: http://www.awwwards.com/
websites/flat-design/.
Material design – styl stworzony przez
Google, będący młodszym bratem flat
design. Został opracowany, by zapewnić użytkownikom jednakowe wrażenia
56
Online Marketing Polska czerwiec-lipiec 2016
http://www.newdealdesign.com/
podczas korzystania z różnych urządzeń.
Początkowo był stosowany wyłącznie w środowisku mobilnym, ale z czasem stał się
też popularny w projektach stron internetowych. Material design przywrócił
trójwymiar do łask – to głównie za jego
pomocą treść na stronie jest porządkowana. Więcej o material design dowiesz
się z wytycznych Google: https://www.
google.com/design/spec/material-design/
introduction.html/.
Podrasowany minimalizm
Oszczędna forma nie wszystkim przypada do gustu – jeśli zaliczasz się do tego
grona, a mimo to chciałbyś jakoś wpisać
się w nurt minimalizmu, wykorzystaj
trendy, które dodadzą trochę życia prostym stronom WWW.
Hero images
Pierwszego wrażenia nie da się wywrzeć
dwa razy, dlatego warto zainwestować
w naprawdę dobrej jakości całoekranowe
zdjęcie (dzisiaj również: wideo, animację lub kinografikę), które zapewni, że
odczucia internautów odwiedzających
Twoją stronę będą wyłącznie pozytywne.
Wrażenie użytkowników będzie tym
lepsze, im bardziej wyjątkowy będzie
obraz na stronie startowej.
Sesję zdjęciową możesz wykonać samodzielnie (jeśli tylko masz odpowiednie
umiejętności i sprzęt), zlecić jej wykonanie profesjonalistom (jeśli dysponujesz sporym budżetem) albo skorzystać
z banków zdjęć. Zaletą dwóch pierwszych
rozwiązań jest na pewno całkowita swoboda twórcza – barierę stanowić będzie
tylko wyobraźnia i zasobność portfela,
a wadą – wysokie koszty i ryzyko, że
efekt końcowy będzie odbiegał od pierwotnych założeń. Z kolei pliki stockowe
mają tę przewagę, że są dostępne od razu
i można je kupić za niedużą kwotę albo
nawet pobrać za darmo. Dodatkowo,
już samo szukanie obrazów w banku
zdjęć jest inspirujące – mając w głowie
Użyteczność
Rysunek 4.
Zdjęcia Soni Szóstak z kolekcji „Disconnect”
© apoloniafranke / pl.fotolia.com
jakąś koncepcję i szukając obrazów konkretnego typu, można przypadkowo
natknąć się na inne fotografie, które
znacznie lepiej oddadzą planowany
charakter strony. Ponadto, współcześnie
banki zdjęć tworzą również artystyczne,
zaangażowane kolekcje, zapraszając do
współpracy uznanych fotografów i grafików. Przykładem może być kolekcja
„Disconnect”, którą dla banku Fotolia
przygotowała trójka utalentowanych
artystów z Europy (obejrzyj kolekcję
na https://blog.fotolia.com/pl/?s=disconnect). Wśród nich była polska fotografka Sonia Szóstak. Jej wysmakowana
Rysunek 5.
© apoloniafranke / pl.fotolia.com
kolekcja fotografii z archipelagu Filipin
urzeka autentyzmem i prostotą i świetnie nadaje się do wykorzystania w projektach internetowych.
Ze względu na fakt, że profesjonalne
obrazy są coraz bardziej popularnym
elementem web designu, projektanci
zaczęli powszechnie stosować skalowalne
grafiki wektorowe (SVG), pozwalające
na wyświetlenie tej samej grafiki w jednakowej jakości na ekranach o różnej
rozdzielczości (obraz nie traci na jakości
podczas skalowania). Oczywiście pliki
SVG mają też swoje ograniczenia, ale nie
zmienia to faktu, że zdobywają internet.
Przykłady zastosowań ekstrawaganckiej typografii
http://makeitbright.diadora.com/
http://onirim.com/
https://www.maber.co.uk/
http://www.patriciablanchet.com/
Font is king
Wyjątkową stronę tworzą nie tylko
piękne zdjęcia, filmy (najlepiej w rozdzielczości HD lub coraz częściej 4K) czy
rozbudowane animacje, lecz także niepowtarzalne kroje pisma. Czasem wystarczy
sam ciekawy font użyty w nagłówkach czy
napisie tytułowym, by zbudować unikalny
projekt. Ważne, by użyty krój odpowiadał
stylowi strony i tworzył z treścią spójny
przekaz.
W typografii internetowej obowiązuje
dziś kilka trendów, którymi warto się
zainspirować:
Prosta ekstrawagancja – nurt wykorzystujący nawet proste kroje pisma w niecodzienny sposób – np. ogromne, niemal
przytłaczające litery, teksty połączone
z obrazem (fotografia lub grafika wypełniająca wnętrze liter, przenikające się tekst
i obraz lub tekst nałożony na obraz, często
asymetrycznie, tak że jedynie zahacza
o fragment strony, którego dotyczy) czy
tzw. cropping (poucinane litery).
Fonty odręczne – styl wykorzystywany
najczęściej na blogach i stronach lifestyle’owych. Nadaje projektowi osobistego
charakteru i dobrze współgra z wielkoformatowymi tłami zdjęciowymi czy
filmowymi. Pamiętaj, by z fontów typu
handmade korzystać oszczędnie – w większej ilości mogą stać się nieczytelne i przytłoczyć projekt.
Retro – nurt, który obecnie znów
powraca do łask. Fonty retro czy vintage
budzą dobre skojarzenia, są klimatyczne
i stylowe. Często wykorzystuje się je na
czerwiec-lipiec 2016 Online Marketing Polska
57
Użyteczność
Rysunek 6.
Przykłady fontów typu handmade
https://pl.fotolia.com/id/80080769
Rysunek 7.
Przykłady fontów w stylu retro
https://pl.fotolia.com/id/109150932
https://pl.fotolia.com/id/87100785
https://pl.fotolia.com/id/79741070
https://pl.fotolia.com/105417793
stronach z branży muzycznej i gastronomicznej, ale ich zastosowanie może
być znacznie szersze.
Long scroll z twistem
Strony z „nieskończonym przewijaniem” mają równie wielu zaciekłych
przeciwników co żarliwych wyznawców. Pierwsi zwracają uwagę, że long
scrolle utrudniają pozycjonowanie
i nawigację, są nieintuicyjne dla osób
starszych, wydłużają drogę dojścia do
58
https://pl.fotolia.com/id/83740589
Online Marketing Polska czerwiec-lipiec 2016
poszukiwanych informacji i spowalniają
ładowanie się strony (zwłaszcza gdy są
na niej ciężkie pliki). Drudzy natomiast
podkreślają, że takie rozwiązanie jest
responsywne i świetnie sprawdza się na
urządzeniach mobilnych, a poza tym
przyciąga uwagę i umożliwia wciągnięcie
użytkownika w opowiadaną historię (storytelling), co z marketingowego (i nie tylko)
punktu widzenia jest niezwykle ważne.
Long scrolle, obecne w internecie już od
kilku lat, ciągle ewoluują w stronę coraz
ciekawszych rozwiązań. Wśród najnowszych trendów są m.in. stosowanie płynnych, niemal niezauważalnych przejść
między kolejnymi ekranami, paralaksy
(w różnym tempie przemieszczające się
warstwy strony) i rozbudowane animacje
uruchamiane scrollowaniem. Wykorzystanie jednego z tych pomysłów nawet na
prostej stronie www sprawia, że zaczyna
wyglądać bardzo profesjonalnie.
Twoja strona www
Nowocześnie zaprojektowana i funkcjonalna strona internetowa to szansa
na wyróżnienie się z tłumu i przyciągnięcie klientów czy fanów. Jak jednak
poruszać się w gąszczu obowiązujących
trendów i jakie wybrać rozwiązania,
żeby strona spodobała się internautom?
Na pewno tylko takie, które odzwierciedlą jej charakter i przeznaczenie. Jeśli
tworzysz e-sklep ze sprzętem wędkarskim, raczej nie będziesz potrzebował
romantycznych fontów stylizowanych
na pismo odręczne. Jeśli Twoja strona
będzie skierowana wyłącznie do osób starszych, lepiej zrezygnuj z long scrolla. No
i tam, gdzie możesz, ułatwiaj sobie pracę,
korzystając z gotowych i sprawdzonych
rozwiązań, np. takich jak banki zdjęć. 
O serwisie Fotolia
Fotolia jest liderem wśród dostawców zdjęć stockowych w Europie. Oferuje ponad 50 mln
obrazów, grafik wektorowych oraz plików wideo dostępnych na licencji royalty-free. Założony w 2004 r. serwis Fotolia dostarcza profesjonalne, wysokiej jakości oraz łatwo dostępne
obrazy, których cena zaczyna się od 0,54 zł za pojedynczy obraz. Pliki są wolne od ograniczeń czasowych i geograficznych. Jako międzynarodowy dostawca serwis Fotolia oferuje
najwyższej jakości obrazy różnorodnym klientom – zarówno dużym agencjom kreatywnym, prasie oraz wydawnictwom, jak i małym jednoosobowym firmom. Od stycznia 2015 r.
Fotolia jest częścią rodziny Adobe. Więcej informacji można uzyskać pod adresem pl.fotolia.com.
Napisz:
[email protected]