Dzieło sztuki zapisane w CSS, czyli rzecz o trendach w projektowaniu stron WWW
Projektowanie serwisów WWW jest rodzajem współczesnej sztuki – to zdanie budzi wiele kontrowersji. Niemniej niezależnie od tego, czy witryny internetowe traktuje się jako modern art czy po prostu skomplikowaną pracę rzemieślniczą, to i tak – by nasza praca była doceniona – powinniśmy przynajmniej nadążać za trendami. W tym tekście chcielibyśmy Wam pokazać, jakie jest obecnie podejście do projektowania stron internetowych i na co warto dziś szczególnie zwracać uwagę.
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.
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.
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.
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ń.
«poprzednia 1 2 następna »
Polecamy
Reklama
Komentarze
Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka
(słowa muszą być rozdzielone spacją).
W treści komentarza można używać języka formatowania BBcode.
Popularne
MSWiA zamówiło narzędzia do „złamania” Tora i podsłuchiwania internautów. Czy złamało przy tym prawo?
89
Korea Północna: korzystasz z telefonu komórkowego? Jesteś więc zbrodniarzem wojennym
5
Nowa polityka prywatności Google'a już za miesiąc wejdzie w życie. Mamy się czego bać?
16
Firefox 10 już jest. Wiele atrakcji dla programistów, użytkownicy raczej nic nie zauważą
9
Pobieraczek.pl pozwie internautów, którzy nie chcą płacić abonamentu
1451
Linux wypiera z korporacyjnych serwerów już nie tylko Uniksy, ale i Windows
11
Źle się dzieje z Chrome, ze stabilnością coraz gorzej. Gdzie się podziała słynna izolacja procesów?
23
MSWiA zamówiło narzędzia do „złamania” Tora i podsłuchiwania internautów. Czy złamało przy tym prawo?
89
[Aktualizacja] Facebook zablokował Demotywatory.pl. W czym zawiniły?
36
FBI zamknęło Megaupload. Anonimowi dali się sprowokować. Teraz ich akcja uzasadni potrzebę SOPA?
17
Pobieraczek.pl pozwie internautów, którzy nie chcą płacić abonamentu
1451
Rząd Tuska zablokował dostęp do tańszych leków z internetowych aptek
61
Programowanie w środowisku Android – wprowadzenie do projektowania aplikacji dla urządzeń mobilnych
15
„Donald matole, twój rząd dopadną kibole” – hakerska elita przyłącza się do walki z ACTA
23
Społeczność
hipertracker @slawek22, ORM wcale nie musi tworzyć nieoptymalnych kwerend. Poza tym...
Rumcajs Kolejna PRowska ściema Donka. Już mnie krew zalewa.
Artykuł 41...
zalesz o Pan Sławek :)
Patrzę nic się nie zmieniło, w sumie to nic się nie...
slawek22 Jeszcze taka dygresja na poparcie tezy, akurat sobie czytałem o node...
slawek22 Tylko po co mi 5, 10 albo nawet 15 razy szybszy JRuby skoro całą "moc...
pobieraczek.pl zapłacicie wszyscy ;D
hipertracker @Tuner, nie rozśmieszaj mnie że PHP jest szybszy od Ruby powołując się te...
- gardius: Dobra hurtownia sportowa (1)
- gardius: Tanie książki gdzie warto kupować? (1)
- Najdmen.pl: PROMOCJA, 500 DOMEN .EU ZA 1 PLN NETTO ! (1)
- VMLine: [Oferta] Serwery VPS Xen-HVM/OpenVZ z darmową administracją (2)
- Marek: Generowanie PDFa (2)
- Marek: problem z menu (2)
- Marek: Własne checkboxy w HTML,CSS (1)
Polecane książki
Praca
Obsługa księgowa z językiem niemieckim
Tech Support Engineer with fluent English and German, French, Italian or Spanish
Młodszy Specjalista w Dziale Należności ze znajomością języka francuskiego
Analityk Baz Danych i Systemów Monitorowania
Menedżer ds. Klienta Biznesowego
Starszy Programista Aplikacji Internetowych/Team Leader
Czytaj Webhosting
Chcesz być na bieżąco z naszymi informacjami? Zapisz się na Newsletter.
Zarejestruj domenę
Sprawdź dostępność swojej domeny:
| .pl: | 0 zł | .com: | 19.90 zł | |
|---|---|---|---|---|
| .com.pl: | 0 zł | .eu: | 19.90 zł |















#1 vadit 2008-10-04 01:42:37 0
None
#2 m010ch 2008-10-04 20:54:23 0
None
#3 Sławek 2008-10-05 09:57:51 0
None
#4 renne 2008-10-05 13:50:40 0
None
#5 Tyhagara 2008-10-05 15:40:18 0
None
#6 Beksiński 2008-10-06 08:34:11 0
None
#7 berni 2008-10-13 08:48:23 0
None
#8 cbagov 2008-10-16 19:05:29 0
None
#9 pitupitu 2008-10-24 14:05:50 0
None
#10 chris 2008-11-03 15:35:35 0
None
#11 qkasheq 2009-06-16 11:37:27 0
IP: 83.18.177.[...] Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322)