Dzieło sztuki zapisane w CSS, czyli rzecz o trendach w projektowaniu stron WWW

Serwis internetowy już dawno przestał być zwykłą wizytówką, pełniącą rolę dodatku do działalności prowadzonej w tzw. realu. Stwierdzenie to jest oczywiście powtarzanym w kółko banałem, jednakże warto je ciągle przywoływać, gdyż wciąż można znaleźć w Sieci strony – wydawać by się mogło poważnych firm – które nie grzeszą wyrafinowaniem, z funkcjonalnością i ciekawym layoutem natomiast całkowicie im nie po drodze.

Zamiana na lepszy model

Jaka więc powinna być spełniająca wszystkie współczesne wymogi strona WWW? W dziedzinie kreacji internetowych, podobnie jak i w innych obszarach naszego codziennego życia, mamy do czynienia ze zmieniającymi się trendami. Można pokusić się o porównanie rynku witryn internetowych do rynku motoryzacyjnego. W jednym i drugim wypadku ciągły rozwój techniczny, wprowadzanie nowych gadżetów i funkcjonalności, zmiana gustów użytkowników oraz chęć wyróżnienia się na tle konkurencji wymuszają innowacyjność czy przywracanie do łask rozwiązań retro, które na powrót mogą przeżyć swoje chwile świetności – tym razem w całkiem nowej odsłonie.

Witryny internetowe poddawane są ciągłej ewolucji, w trakcie której przeobrażeniom ulegają nie tylko ich layouty, ale również – a może przede wszystkim – funkcjonalności oraz możliwości interakcji z użytkownikami. Dziś strona, która działa na zasadzie „gadał dziad do obrazu, a obraz do niego ani razu”, ma małe szanse na powodzenie.

„Współcześnie podczas projektowania stron WWW liczy się właśnie intuicyjność rozwiązań tworzonych pod kątem potrzeb użytkownika. Największą zmianą, do której dochodzi obecnie na scenie projektów internetowych, jest ich interakcyjność” – mówi Mateusz Miernikowski, specjalista ds. PR w agencji interaktywnej Janmedia. – „Wszystko to zasługa popularnego trendu Web 2.0, czyli filozofii, która daje właściwie nieograniczone możliwości wypowiadania się, oddziaływania na innych użytkowników, dzielenia się z nimi wiedzą i swoimi pomysłami” – dodaje.

Z kolei Grzegorz Krzemień, wiceprezes agencji interaktywnej GoldenSubmarine, zauważa, iż w praktyce tendencje te prowadzą do projektowania „lżejszych” wizualnie stron, pozbawionych zbędnych ozdobników. Dzisiejsi użytkownicy przyzwyczajeni są już do pewnych standardów, które dotyczą zarówno obsługi komputera, jak i poruszania się po serwisach internetowych. Nie do pomyślenia jest już sytuacja, aby po wejściu na wcześniej nieodwiedzaną witrynę internauta musiał poświęcić kilka pierwszych minut na naukę jej obsługi oraz rozeznanie się w jej treści. W dzisiejszych czasach wszystko musi odbywać się intuicyjnie i bez zbędnych przestojów. Sposób poruszania się użytkownika po stronie musi być dostosowany do jego przyzwyczajeń i doświadczeń, wyniesionych np. z codziennych kontaktów z systemem operacyjnym.

„Dobrzy graficy projektują strony możliwie proste oraz czytelne, które są zgodne z zasadą <<Don't make me think>>. Niezłymi przykładami będą więc tutaj serwisy Apple.com, Bell.ca czy Shoeguru.ca – zauważa Marcin Wojciechowski, Web Designer (http://marcinwojciechowski.com/).

Rysunek 1: Zasada „Don't make me think”, charakterystyczna dla produktów Apple'a, z powodzeniem została przeniesiona na grunt serwisu WWW.

„Twórcy serwisów internetowych zdali sobie wreszcie sprawę, że są one tworzone dla użytkowników. Im szybciej odnajdą oni poszukiwane informacje, tym lepiej. Do przeszłości należy już trend bazujący na ciężkiej grafice, upodabniający za wszelką cenę serwis WWW do broszury, którą firma wykorzystuje w postaci drukowanej. Coraz częściej odchodzi się również – w tym wypadku z przyczyn technologicznych – od stron flashowych, które otwierają się w nowym oknie przeglądarki. Prawdziwym białym krukiem są natomiast witryny zawierające intro” – stwierdza Grzegorz Krzemień.

Serwis WWW to nie obraz, który się tylko podziwia

Oczywiście siermiężność nie jest jedynym utrudnieniem, na jakie można natknąć się podczas internetowych wojaży. Również i zbyt wielki rozmach może przyprawić o prawdziwy ból głowy. Jeśli grafik podczas pracy da upust swoim artystycznym zapędom, może powstać bezużyteczny twór o funkcjonalności zepsutego młotka.

Rysunek 2: Serwis beksinski.pl to przykład dominacji rozmachu artystycznego nad funkcjonalnością strony WWW.

„Grafik może być artystą, lecz artystą nastawionym na uniwersalizm i użyteczność swoich prac. W wypadku stron internetowych wygląd nie może nigdy przesłaniać funkcjonalności witryny. Przykładem takiego projektu może być strona nieżyjącego już artysty Zdzisława Beksińskiego (www.beksinski.pl). Jest ona bardzo ładna i artystycznie doskonała, choć niestety problemem jest nieporęczne, flashowe menu” – stwierdza Mateusz Miernikowski.

„Artystą zostaje się po śmierci, a wcześniej potrzeba lat pracy! Prawdę mówiąc, dla mnie prawdziwi artyści to malarze – tam mam moje autorytety. Może narażę się kilku osobom, ale jeśli chodzi o grafików, to uważam, iż są oni po prostu lepszymi bądź gorszymi rzemieślnikami, czasami tylko popuszczającymi wodze fantazji” – dodaje Ewelina Poznańska, grafik w agencji interaktywnej.

Podobnego zdania jest Marcin Wojciechowski, zauważający, że tak naprawdę wszystko zależy od charakteru projektów, nad którymi się pracuje.

„Projektowanie <<experience'owej>>, naszpikowanej efektami strony flashowej wymaga od grafika kreatywności. Może wówczas bardziej <<pojechać z tematem>>, bo możliwości są prawie nieograniczone, co doskonale widać w serwisach wyróżnionych np. przez www.thefwa.com.

Projektowanie portali internetowych wymaga natomiast wiedzy na temat architektury treści, webusability oraz przemyślanego posługiwania się siatkami. Moim zdaniem istnieje grono grafików <<z wyższej półki>>, których ze względu na lata doświadczenia, talent i pasję, graniczącą z obsesją, możemy nazwać artystami. Pozostali natomiast uprawiają rzemiosło artystyczne” – dodaje.

Wszyscy podążają w jedną stronę

Opinie polskich specjalistów znajdują swoje potwierdzenie również za Oceanem. CEO nowojorskiej agencji marketingu internetowego Blueliner – Arman Rousta – w lipcu 2008 roku na seminarium zorganizowanym przez Direct Marketing Association przedstawił prezentację pt. „Popular Web Design Trends of 2008”, w której streścił to, co w branży modne. Rousta przede wszystkim zwrócił uwagę na systematyczny wzrost znaczenia klipów wideo używanych w projektach serwisów WWW oraz systemu CMS. Standardem jest już rozdzielczość 1024x768 pikseli przy jednoczesnym wycentrowaniu projektu (źle widziane jest, gdy strona „ucieka” np. do lewej strony ekranu). Ciekawym natomiast zjawiskiem, które zaobserwował Rousta, jest stosowanie większych czcionek, niż to miało miejsce jeszcze kilka lat temu.

Normami stały się także rozwiązania pozwalające na zacieśnianie więzi pomiędzy użytkownikami serwisu internetowego – chodzi oczywiście o czaty, fora, sondy i blogi, czyli tzw. „dynamic content”. CEO Blueliner zwrócił również uwagę na konieczność zespolenia witryny z narzędziami umożliwiającymi łatwy kontakt na linii autor serwisu-użytkownik. Przykładami mogą być kanały RSS, serwisy społecznościowe czy – będące standardem, do którego stosować musi się już każdy – adres e-mailowy i Skype.

Jednak większość osób związanych z projektowaniem stron WWW jest zgodnych, iż mimo nakreślania ogólnych trendów, do których należy się stosować, niemożliwe jest odgórne narzucenie jedynych i słusznych rozwiązań – dotyczących np. typografii – które obowiązywałyby wszystkich webdesignerów.

„Nie da się stworzyć uniwersalnej zasady. Trendy zmieniają się płynnie i w wypadku projektów internetowych nie może być mowy o czymś takim jak <<ten sezon>>” – stwierdza Marcin Wojciechowski.

Zasady zobowiązują

Można się jednak pokusić o sformułowanie kilku wytycznych dla osób rozpoczynających dopiero swoją przygodę z webdesignem. Poniższe zasady należy jednak traktować jako nakreślający ogólny kierunek drogowskaz, a nie ścisłe normy, które w stu procentach muszą być przestrzegane. Są to raczej wytyczne, które mogą, a wręcz powinny być modyfikowane i dopasowywane do poszczególnych projektów.

Na co więc należy zwracać uwagę? Ważne jest – tak jak już zostało wspomniane – by strona nie „uciekała” w któryś z rogów ekranu. Wycentrowanie serwisu daje osobie, która z niego korzysta, poczucie prostoty i zachowanej równowagi, zapobiegając jednocześnie wydłużaniu się linii z tekstem na dużych bądź panoramicznych monitorach. Należy być świadomym faktu, iż oczy zachowują się w specyficzny sposób podczas odczytywania tekstu umieszczonego na ekranie komputera. Tutaj, w przeciwieństwie do papieru, łatwiej się męczą, przez co konieczne jest skracanie linii, co tym samym ułatwia czytanie. Można to uzyskać właśnie dzięki wycentrowaniu, a co za tym idzie – i zwężeniu projektu. Dobrą ilustracją tej reguły jest np. serwis http://www.ecopartner.pl/.

Rysunek 3: Ecopartner.pl to przyjemna dla oka przejrzystość.

Tłem dla strony powinna być jasna przestrzeń – biała lub w jednym z odcieni szarości. Dzięki temu zabiegowi uzyskuje się przyjemną dla oka, neutralną przestrzeń, na której można umieścić wyraziste i przyciągające wzrok kolory. Nie należy również przesadzać z ilością informacji umieszczanych na podstronach, co – jak zauważają eksperci – jest częstą tendencją, a w przeszłości było wręcz standardem. Takie nagromadzenie elementów – podobnie jak w przypadku długich linii – powoduje szybkie męczenie się oka. Zalecenie można więc streścić w stwierdzeniu: „im więcej białej przestrzeni, tym lepiej”. Trzeba jednocześnie być świadomym faktu, że „biała przestrzeń” – jakkolwiek absurdalnie to zabrzmi – wcale nie musi być biała. Oczywiście, nie należy przesadzać z pustymi miejscami, ale po prostu pamiętać, by podczas projektowania witryny odpowiednio zrównoważyć ilość treści z przestrzeniami pomiędzy nią, np. za pomocą odpowiedniej wielkości marginesów i odstępów między liniami bądź akapitami. Przykładami takiej przejrzystości są np. strony http://www.tiffany.com/ oraz http://www.yahoo.com/ czy witryna http://www.saintgregorys.org/, która jest przykładem wypełnienia „białej przestrzeni” za pomocą innego koloru niż biały.

Rysunek 4: Serwis SaintGregorys.org pokazuje, jak można zrobić „white space”, nie używając koloru białego.

Kolejnym bardzo ważnym dla odbioru treści aspektem jest właśnie format samego tekstu. Przede wszystkim nie może on być zbyt mały – w serwisach internetowych lepiej spisują się trochę większe rozmiary czcionek niż te stosowane np. w dokumentach. Jednak podobnie jak w poprzednich wypadkach, tak i tutaj nie wolno popaść w przesadę i używać zbyt wielkich liter.

„Na stronach, gdzie będzie naprawdę dużo treści, stosuje się czcionki systemowe, tj. Tahoma,
Verdana, a często Arial lub Trebushet (11 pt). Tak naprawdę nie ma w tym przypadku żadnych
ograniczeń” – zwraca uwagę Mateusz Głuszek, Media Designer (http://gluszczenko.pl/).

Wyraźnie większe czcionki należy natomiast wykorzystywać, kiedy chcemy podkreślić jakieś naprawdę ważne fragmenty. Unikniemy wówczas zgubienia istotnych informacji w gąszczu pozostałej treści.

Wyszczególnione powinny być również wszystkie linki, co znacznie ułatwi nawigację w witrynie. W przeszłości – wśród niektórych webdesignerów – można było obserwować konspiracyjne wręcz tendencje, które polegały na maskowaniu wszystkich możliwych hiperłączy, jak tylko to się da. Nie trzeba chyba dodawać, że powodowało to frustracje wśród wielu internautów (łącznie z wyżej podpisanym) i czyniło poruszanie się po witrynie nieintuicyjnym, a wręcz uciążliwym. Link na współczesnej stronie musi być wyraźny i na pierwszy rzut oka rozpoznawalny, gdyż w przeciwnym wypadku przeglądający prędzej zamknie feralny serwis i zacznie szukać informacji gdzieś indziej niż poświęci swój czas na dokładną lustrację w celu znalezienia ukrytych hiperłączy.

W wypadku braku zaufania do własnego poczucia estetyki podczas wdrażania powyższych zaleceń oraz chęci uniknięcia zaszczytnego stanowiska „autora internetowego potworka” można wesprzeć się zestawieniem najgorszych projektów 2008 roku (dostępne w tym miejscu: http://www.subhub.com/articles/the_worst_website_design_mistakes_of_2008), które pokazuje, jak nie należy budować witryn WWW.

Przy okazji tekstu o tendencjach w webdesignie niedopuszczalne byłoby niepoddanie analizie nowej szaty Webhostingu. Na szczęście spod surowej oceny ekspertów portal wychodzi z tarczą.

„Kolory na nim nie męczą, strona ma wyraźne menu i dobrze zaznaczone główne newsy wraz ze sprytnym przeładowaniem pomiędzy zakładkami. Może prawa kolumna jest za długa i czasami środek jest biały – ale to normalna sytuacja w serwisach z treścią, że nie wszędzie długość pasuje” – stwierdza Grzegorz Krzemień.