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 »
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
Nazwa padła ofiarą szantażystów, inni polscy hosterzy też zagrożeni?
22
Darmowy Internet od Aero2. Jak go zdobyć i jakie są prawdziwe koszta? Instrukcja krok po kroku
11
Programowanie w środowisku Android – wprowadzenie do projektowania aplikacji dla urządzeń mobilnych
17
Premiera Diablo 3 wzbudziła dyskusję na temat gier, które zawsze chcą być online
19
Nowy problem z Windows 8: bootuje się za szybko
10
Amerykańscy rodzice straszeni „e-narkotykami” dostępnymi w Sieci
21
Anonymous upubliczniają 1,7 GB danych wykradzionych Departamentowi Sprawiedliwości USA
11
Blueseed: libertariańska sztuczna wyspa przyciągnęła już ponad sto startupów z całego świata
8
Rewolucja w Firefoksie, nowa łatka czterokrotnie ograniczyła zużycie pamięci
20
Darmowy Internet od Aero2. Jak go zdobyć i jakie są prawdziwe koszta? Instrukcja krok po kroku
11
CVDazzle: makijaż jest w stanie pokonać automatyczne systemy ulicznego monitoringu
3
Programowanie w środowisku Android – wprowadzenie do projektowania aplikacji dla urządzeń mobilnych
17
Ubuntu 12.04 LTS już dostępny: stabilna dystrybucja na następne pięć lat?
28
Zostań webmasterem polskiego rządu, zarobisz na komfortowe życie dla siebie i swojej rodziny
33
Społeczność
bartez Niech zaczną jeszcze bardziej ograniczać programistów, to zdziwią się ilu...
Dave Smith Jestem Pastor Dave Smith prywatny pożyczkodawca pieniądze, z czego ponad...
marcusm Fajna reklama produktu za 500 zł
rza a to starsze aplikacje nie będą działać i kompilacja pod Windows SDK 7.1...
Krzaczor @Jakub Szymański: Możesz zalinkować do opisów jakichś polskich przypadków...
Krzaczor Ale oprogramowanie skompilowane dla Windows 7 ruszy przecież na ósemce...
ankaa Ja to czytam "plejsnow", a nie placek nał :) Nie wiem, co macie z tym...
- Najdmen.pl: Konta www z wyłączonym licznikiem transferu od IONIC.pl (1)
- 2BE.PL: [Oferta] Promocja jak złoto w 2BE.PL (1)
- 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)
Polecane książki
Praca
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)