IDZ DO

PRZYKADOWY ROZDZIA
SPIS TRECI

KATALOG KSIEK
KATALOG ONLINE
ZAMW DRUKOWANY KATALOG

TWJ KOSZYK

Zen stosowania CSS.

rdo owiecenia dla
projektantw stron WWW
Autorzy: Dave Shea, Molly E. Holzschlag
Tumaczenie: Piotr Rajca, Marcin Samodulski
ISBN: 83-246-0084-1
Tytu oryginau: The Zen of CSS Design:
Visual Enlightenment for the Web
Format: 210235, stron: 304

DODAJ DO KOSZYKA

Poznaj niesamowite moliwoci technologii CSS

CENNIK I INFORMACJE

Wykorzystaj sztuczki typograficzne w swojej witrynie

Zastosuj w odpowiedni sposb elementy graficzne
Uwzgldnij w projektowaniu moliwoci rozbudowy witryny

ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK

CZYTELNIA
FRAGMENTY KSIEK ONLINE

Kaskadowe Arkusze Stylw (CSS) to technologia, ktra zdobya ju ogromne uznanie

wrd projektantw stron WWW. Idea oddzielenia wygldu strony od treci za pomoc
definicji stylw okazaa si przebojem dziki mechanizmom CSS witryny WWW stay
si bardziej uniwersalne i atwiejsze w rozbudowie. Kaskadowe Arkusze Stylw,
w poczeniu z dobrze napisanym kodem pozwalaj na stworzenie zachwycajcych
projektw wizualnych znacznie prociej i szybciej ni przy uyciu jzyka HTML.
Nadal jednak wiele sekretw technologii CSS pozostaje nie odkrytych.
Autor ksiki Zen stosowania CSS. rdo owiecenia dla projektantw stron WWW
zgromadzi w prowadzonej przez siebie witrynie WWW CSS Zen Garden
(www.csszengarden.com) projekty stron, ktrych twrcy w mistrzowski sposb
opanowali sekrety Kaskadowych Arkuszy Stylw. Czytajc t ksik rwnie masz
okazj pozna te tajniki i wykorzysta je w swoich pracach. Znajdziesz w niej
szczegowe omwienie 36 najbardziej inspirujcych projektw zamieszczonych
w tej witrynie.
Styl kodu HTML
Projektowanie ukadu graficznego witryny
Pozycjonowanie elementw strony
Optymalizacja plikw graficznych
Odpowiedni dobr czcionek
Efekty specjalne w CSS

Wydawnictwo Helion
ul. Chopina 6
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl

Stwrz zachwycajce witryny WWW

Spis treci
Wprowadzenie

10

Rozdzia 1: Poka rdo

18

Rozdzia 2: Projektowanie

54

Night Drive, strona 86

White Lily, strona 106

Atlantis
Zunflower
Springtime
viridity
Ballade
Night Drive

56
62
68
74
80
86

Rozdzia 3: Ukad

92

Backyard
Entomology
White Lily
prt--porter
CS(S) Monk
Not So Minimal

Rozdzia 4: Obrazy
Japanese Garden
Revolution!
Deco
No Frontiers!
Coastal Breeze
What Lies Beneath
Coastal Breeze, strona 156

ROZDZIA 3

94
100
106
112
118
124

130
132
138
144
150
156
162

Rozdzia 5: Typografia
Oceans Apart
si6
Release One
Dead or Alive
Blood Lust
Golden Mean

Rozdzia 6: Efekty specjalne

This is Cereal
Gemination
Bonsai Sky
Tulipe
door to my garden
Elastic Lawn

168
170
176
182
188
194
200

Oceans Apart, strona 170

206
208
214
220
226
232
238
Gemination, strona 214

Rozdzia 7: Rekonstrukcja

244

Hedges
Radio Zen
South of the Border
Corporate ZenWorks
Open Window
mnemonic

246
252
258
264
270
276

Myli na zakoczenie
Skorowidz

282
291
South of the Border, strona 258

LAYOUT

Rozdzia

Projektowanie
Chocia proces projektowania witryn
Springtime, strona 68

internetowych polega na gwatownych prze-

ksztaceniach plastycznej materii, pewne podstawowe

zasady powinny zosta zachowane. Gdy wybierasz
palet kolorw, mylisz o ukadzie graficznym, tworzysz kompozycj z ksztatw geometrycznych lub
ujednolicasz wszystkie elementy strony, obowizuje
Ci pewien kanon tradycyjnych wartoci.

Night Drive, strona 86

Projekty omawiane w tym rozdziale ilustruj zagadnienie, ktre staje si coraz bardziej istotne
podczas tworzenia witryn. W jaki sposb efektywnie
zarzdza tym procesem? Niezalenie od tego, czy
jeste przyzwyczajony do rozpoczynania pracy od
projektw wstpnych w programie Adobe Photoshop,
szkicowania pomysw na kartce papieru, tworzenia
prototypw w CSS lub pisania kodu od pocztku, na
pewno w tym rozdziale znajdziesz propozycje nowych,
uytecznych metod pracy.
projektowanie

55

Kevin Davis, projektant

www.csszengarden.com/028

Atlantis
Minimalizm, jedno i symbolika

Projektowanie graficzne polega na komunikowa-

niu pewnych myli. Udany projekt przekazuje ogldajcym

informacje, ktrych nie mona przekaza samymi sowami.
Moe on tworzy pewn atmosfer i wywoywa okrelone
uczucia, emanowa nastrojami, powodowa reakcj widza.
Celem Kevina Davisa byo poczenie elementw wizualnych i wyobrani przy wykorzystaniu elementw charakterystycznych dla projektw wntrz przytulnych i nastrojowych
kawiarni. Skada si na nie poczenie odpowiednich stolikw,
baru, farby na cianach i nastroju. Zaczynajc od fotografii
ipalety kolorw, Kevin czy elementy, a uzyska ciekawy izadowalajcy efekt. Pniej poczy projekt graficzny
zukadem funkcyjnym.

56

ROZDZIA 2 / projektowanie

Minimalizm
To, co natychmiast rzuca si w oczy w trakcie ogldania projektu Atlantis, to jego
wzgldna prostota, panujca na caej stronie za wyjtkiem precyzyjnego kolau
wnagwku. Poprzez poczenie elementw fotograficznych z pozornie prostym
ukadem Davis uzyska niepowtarzaln mieszank skomplikowanego iprostego.
Ogrd Zen tworzony by w czasie, gdy wikszo projektw opartych na technologii CSS uwaano za nieatrakcyjne z powodu zbytniego minimalizmu i racej
kanciastoci (patrz rysunki 2.1A, 2.1B i 2.1C). W pokazanych tu projektach waciwie nie ma niczego zego, pod warunkiem, e s wykorzystywane w odpowiednim
kontekcie i celu.
Niech do tak rozumianych typowych projektw CSS wynika z maego nieporozumienia twrcy tych prac nie byli projektantami-grafikami w tradycyjnym
znaczeniu tego terminu przez to ucierpiaa technologia. Oczywicie, to by jeden
z problemw, ktre mia rozwiza ogrd Zen.

Atlantis jednak zatacza koo i jest wyranym dowodem na to, e sowo minimalizm nie oznacza wcale mao atrakcyjnych projektw. Po prostu, gdy ogldasz
wiele przykadw wykonanych wedug tego samego projektu, szybko Ci one
znudz. Podawanie pure ziemniaczanego, pieczonych ziemniakw, ziemniakw
z wody i frytek na jeden obiad to lekka przesada. Jednak zgrabna kulka pure obok
indyka na talerzu dopenia skromny, lecz jake smaczny posiek.
Wniosek z tego taki, e proste, minimalistyczne projekty maj swoje miejsce ifunkcj. Tak naprawd projekt powinien by uzaleniony od zawartoci treciowej, zatem jeli zawarto jest wizualnie zoona lub jej poznanie wymaga znacznej uwagi,
przecianie jej zbdnymi ozdobnikami jest niecelowe.

Z drugiej strony, naprawd dobry ukad minimalistycznyze stworzeniem takiego

ukadu maj problem nawet profesjonalici. Gdy graficzne elementy ukadu strony
s proste, mocniej przykuwaj uwag ogldajcego. W takim ukadzie kady uyty
element jest bardziej istotny ni w ukadach zoonych, zatem zdolno przykuwania uwagi odrnia doskonae ukady od miernych.

Rysunki 2.1A 2.1C. Przykady wczesnych minimalistycznych projektw CSS

atlantis

57

W nauce ukadania poszczeglnych elementw moe pomc analiza bardzo minimalistycznych projektw typu Atlantis. Jeli usunie si obraz nagwka, charakter
projektu staje si bardziej oczywisty (rysunek 2.2). Obok obszaru zwaciw zawartoci, po lewej stronie znajduje si niewielkie menu.

Typografia
Tekst w gwnej sekcji witryny Atlantis jest zauwaalnie wikszy ni tekst menu. Te
dwie czci zostay zrnicowane w ten sposb, aby podkreli, e to, co znajduje
si po lewej stronie, nie jest tak wane, jak tre po prawej (rysunek 2.3). Podobnie
uycie wikszej czcionki w nagwku odrnia go od tekstu w sekcji gwnej. Te wyrniki przekazuj dodatkowe informacje o hierarchii fragmentw tekstu.
Rysunek 2.2. Projekt Atlantis

Typografia to rodek przekazu pisanego sowa oparty na pewnej hierarchii, wzorach

i rytmie. Dostosowywanie tych cech poprzez zmian rozmiaru tekstu, odstpw
midzyliterowych i midzywyrazowych oraz koloru to potna metoda komunikowania informacji, ktrych nie przekazuj sowa.

Ikonkografia
W menu po lewej stronie Davis obok kadej z nazw projektw wstawi mae ikonki.
Poniewa rozmiar ikonek jest zbliony do rozmiaru czy, wspgraj one z tekstem
i peni funkcj nieodwracajcych uwagi punktorw. Ten szczeg odrnia gwne
cza od tych, ktre znajduj si tu pod nimi, i sprawia, e banalne menu staje si
bardziej interesujce.

Rysunek 2.3. Rozmiar tekstu w sekcji body jest

prawie dwa razy wikszy od rozmiaru czcionki
wmenu

Ikony s uproszczonymi symbolami reprezentujcymi pewne obiekty i idee lub przekazujcymi pewn tre bez koniecznoci stosowania dugich opisw tekstowych.
Obiekty mona ilustrowa w sposb dosy oczywisty, natomiast trudniej za pomoc
ikonek wyraa idee, procesy i czynnoci. Dobrych ikonek nie trzeba dodatkowo objania, ale s one czsto niepotrzebnie wizualnie oderwane od rzeczywistoci. Istotne
jest silne i spjne powizanie ikonki z pewn ide, aby pniejsza identyfikacja staa
si bardziej intuicyjna.

Linia
Davis wybra dwa rodzaje linii, za pomoc ktrych oddziela rne fragmenty projektu. Linia przerywana otacza dwa akapity nachodzce na obraz z nagwka, a linia ciga
oddziela nagwek i stopk od reszty strony (patrz rysunek 2.4). Te proste elementy
wzbogacaj wizualnie stron bez angaowania wiadomej uwagi ogldajcego.

Rysunek 2.4. Cige biae linie oddzielaj nagwek od reszty tekstu

58

ROZDZIA 2 / projektowanie

Poprzez uycie linii mona zdefiniowa obszary strony, ustali jej granice i uatwi
odbiorcy waciwe pogrupowanie elementw wizualnych i tekstowych, a take wprowadzi dodatkowy wymiar. Niebezpieczestwo tkwi w naduywaniu linii niedomknite prostokty i zbyt wiele rwnolegych linii moe sugerowa obecno siatki
i struktury, ktrej tak naprawd nie ma. oko bdzie prbowao znale wzory, ktre
nie istniej, zatem uycie linii powinno by wywaone i uzasadnione.

mARgineSy
Poprzez ograniczenie projektu do rodkowej kolumny Davis uzyska maksymaln
kontrol rozoenia elementw na stronie. Marginesy o zmiennej szerokoci po obu
stronach przesuwaj zawarto na rodek okna przegldarki. Czasami korzystniej jest
wypeni cae okno ukadem strony, a czasami lepszy okazuje si projekt ograniczony.
W obu przypadkach spore marginesy po lewej i po prawej stronie zapobiegaj zbytniemu stoczeniu tekstu. Domylnie wikszo przegldarek definiuje jak najmniejszy margines wok strony, co powoduje, e tekst swobodnie zajmuje cae miejsce od
lewej do prawej strony i jest rzadko zawijany.
jest to niekorzystne w sensie estetycznym. tekst musi oddycha i potrzebuje wolnego miejsca, ale brak marginesw spowoduje, e zleje si on z zawartoci ekranu
znajduj si poza oknem przegldarki. Wartoci domylne marginesw nie s odpowiednie w tej sytuacji, zatem na projektancie ciy odpowiedzialno za rozwizanie
tego problemu.
W przypadku projektu minimalistycznego, w ktrym marginesy s jednym z nielicznych elementw kompozycji, ich prawidowe ustawienie ma ogromne znaczenie.
Due marginesy ksztatuj scen, na ktrej w oknie przegldarki wystpi tekst, a take
uatwiaj uytkownikowi koncentracj na treci.

jednoisymbolika

Uwaga
Dlawikszociprojektantwniedopuszczalne
domylnewartocimargineswniestanowi
problemu,poniewaitaktemarginesyzmodyfikuj.jednakdobrypunktwyjciabyby
korzystnydlatychwszystkich,ktrzyprojektantaminies,atakedlapocztkujcych.
niktnietraci,jeliokrelonatechnologiajest
bardziejdopracowanaidomylnemarginesy
slepiejustawionenaprzykadstandardowadrukarkabiurowadrukujezesporym
zapasemmarginesw,abyniepowstawa
tegorodzajubaagan.

atlantis jest doskonaym przykadem tworzenia przy uyciu elementw kompozycji

specyficznego nastroju, zamierzonego przez autora. Grecki filozof, Platon, twierdzi,
e atlantyda to zaginiona wyspa, ktr wieki temu pokryo morze. Dotknity zbem czasu odcisk muszli oraz klasyczne figurki z kamienia umieszczone w nagwku
w sposb oczywisty kojarz si z t legend, a uyte barwy nasycony bkit oraz
czer przywodz na myl to oceanu, do ktrej dociera jeszcze wiato. Wybierajc
wczeniej odpowiednie zdjcia i kolor, Davis zadba o to, aby wygld strony pozosta
w zgodzie z inspiracj.

atlantis

59

Spjno
Barwy muszli zostay zmodyfikowane tak, aby pasowaa ona do kolau w tle. Wprogramie Adobe Photoshop zmikczono take jej krawdzie, dziki czemu jeszcze
bardziej zlaa si z tem. Jednak Davis nie przesun wszystkich odcieni wkierunku
bkitu i pozostawi tym samym mile widziany kontrast tworzony przez kolor oceanu
i rdzawy wapienny osad (patrz rysunek 2.5). Konsekwentne uycie bkitu wcaym
projekcie przeciyoby klimat kompozycji (patrz rysunek 2.6).

Rysunek 2.5. Odcienie koloru pomaraczowego

widoczne na muszli kontrastuj z reszt zawartoci witryny

Elementy kompozycji mog by rne, lecz oglny cel zachowania spjnoci jest
bardzo istotny. Zamiast monotonnych schematw kolorystycznych mona zastosowa bardziej subtelne metody zachowywania spjnego wygldu projektu naladowanie dominujcych ksztatw przy uyciu elementw graficznych izdjciowych oraz dopasowywanie proporcji i rozmiarw czcionek, a take otaczajcych je
krzywych i linii.
W projekcie Atlantis w nagwku wystpuj biae okrgi krelone cigymi krzywymi
naoone na muszl i kola. Bez kontekstu takie okrgi nic specjalnego nie znacz,
lecz na bkitnym tle przypominaj fale. Ich ksztat i rozmiar jest take bardzo zbliony do okrgw wystpujcych na muszli, co silnie czy te dwie grupy elementw.

Reprezentacja

Rysunek 2.6. Niebieski i spjny kolorystycznie

nagwek teoretycznie lepiej pasuje do konwencji, ale projektowi zabrakoby wwczas elementu
kontrastu

Ta metoda reprezentacji koncepcji projektowych uycie prostych elementw kompozycyjnych wyraajcych bardziej zoone idee i zamysy ma duy potencja, jeli
chodzi o wyraanie subtelnej gbi. Biaych linii moge nawet wcale nie zauway,
dopki o nich nie wspomnielimy, a teraz stay si bardzo widoczne.
Symbolika ukryta w projekcie Atlantis nie koczy si na biaych liniach. Bardziej
oczywiste s obrazy w nagwku. Atlantyda dawnych czasw bogate i prne imperium kamiennych kolumn i zdobionych posgw zostaa umieszczona ztyu, za
centraln i bardziej wyrniajc si Atlantyd dzisiejsz zniszczon, pokryt morskim osadem, rozpadajc si pod wod. Imperium za mg, dawno majce za sob
czasy rozkwitu, opisywane jest przez zwizki pomidzy dwiema poowami projektu.
Ten prosty, aczkolwiek niebanalny ukad tworzy opowie ipogbia znaczenia, ktre
bdzie odkrywa ogldajcy.
Dla wytrawnego uytkownika internetu uycie muszli jako motywu obrazu nagwka
bdzie miao dodatkowe znaczenie: wybr morskiej muszli przez Davisa jest hodem
dla klasycznej ju strony prezentujcej technologi CSS. Strona ta nosi nazw Complexspiral i zostaa stworzona przez Erika Meyera. Mona j znale pod adresem
www.meyerweb.com/eric/css/edge/compelxspiral/demo.html (rysunek 2.7).

60

ROZDZIA 2 / projektowanie

Szczeglne prawa projektowania

Projektowanie peni w komunikacji wan rol jasny i spjny przekaz caej witryny
to scena dobrego spektaklu, w ktrym uytkownicy s widzami. Pewne witryny wymagaj jednak, by nie przykada tyle wagi do ergonomii, a w sytuacji, gdy centraln
rol peni zawarto i funkcje, projektant powinien sta zboku iproponowa proste
elementy graficzne oraz minimalistyczny ukad.
W innych przypadkach projekt musi w sposb bardziej wyrazisty przekazywa informacje czsto wiele jednoczenie. Moliwe, e po pierwszej analizie projektu
pominiesz jego subtelne aspekty zamierzone przez projektanta. Zdolno interpretacji wyostrza si wraz z dowiadczeniem i wiedz oceniajcego, zatem uchwycenie
penego znaczenia dziea, jakim jest Atlantis, niezaprzeczalnie wymaga zrozumienia
intencji projektanta.
Obowizkiem projektanta jest dostarczenie jasnego przekazu, ktry zrozumie jak najwiksze grono odbiorcw, w sposb unikatowy i przekonujcy. Istnieje wiele moliwoci i okazji podczepienia dodatkowych informacji pod gwny przekaz, co udowodni midzy innymi Kevin Davis.

Rysunek 2.7. Witryna Complexspiral, do ktrej

odnosi si muszla w nagwku projektu Atlantis

atlantis

61

Radu Darvas, projektant

www.csszengarden.com/026

Zunflower
Zabawa wiatem, cieniem,
ksztatem i przestrzeni

Gdy soneczniki na balkonie przykuy jego uwag,

Radu Darvas zacz robi zdjcia, na podstawie ktrych po-

wstay pomysy bdce trzonem projektu Zunflower. Zabawa

sonecznikami w programie Adobe Photoshop pomoga mu
stworzy koncepcj witryny, ktr zgosi
do ogrodu Zen.
Jednym z zagadnie, ktre chcia rozwiza, byo takie
uksztatowanie witryny, by nie sprawiaa ona wraenia podzielonej na prostokty. Jednak po zagbieniu si wprojekt
spostrzeg, e mona tak ustawi pooenie kolumn, aby
utworzy co w rodzaju nakadek, co wywouje dodatkowe
wraenie gry wiata i cienia, ksztatu i przestrzeni. Z tego
powstaje energetyczny ukad Zunflower.

62

ROZDZIA 2 / projektowanie

Odnalewiato
Gdziekolwiek by teraz nie siedzia, do czytania wykorzystujesz przynajmniej jedno
rdo wiata. Unie na chwil wzrok znad ksiki. Skd pada najwicej wiata?
W jaki sposb ukada si ono na otaczajcych Ci przedmiotach? Gdzie s cienie?
wiatocienie wykorzystywane s przez grafikw do uzyskiwania pewnego realizmu prezentowanej sceny, do stworzenia odpowiedniej atmosfery i do wzbogacenia
dziea poprzez wyrnienie pierwszego planu.
jeli spojrzymy wstecz, na poprzedni dekad projektowania witryn internetowych,
wskaza moemy wiele zastosowa wiata. tworzenie gradientw (patrz rySuNeK 2.8), ukosowanych krawdzi (patrz rySuNeK 2.9), efektu cienia rzucanego
przez elementy kompozycji (patrz rySuNeK 2.10) to tylko niektre przykady wykorzystania wiata w internecie.
Niestety, niekiedy wiato wymyka si spod kontroli niezbyt dowiadczonym projektantom. trendy wpywaj take na technik projektowania wiele osb naduywa efektw zwizanych ze wiatem. Nie przeszkadza im to, e ich projekty wygldaj nierealistycznie, a rda wiata pozostaj ze sob w wyranym konflikcie
(patrz rySuNeK 2.11).

rySuNeK 2.8. Wypenienia gradientowe la

rok 1995. dithering i smuenie wystpuj, gdy
poziom kompresji jest zbyt wysoki nie wyglda
to zbyt profesjonalnie

rySuNeK 2.9. Przykad tekstu z ukosowanymi

krawdziami. ten rodzaj efektu graficznego dominowa na stronach tworzonych we wczesnych
latach 90.

Zatrzymacie
Na stronie zunflower wida poprawne uycie wiata do tworzenia cieni. Chocia zdecydowane gradienty i mocne ukosowania nie s ju modne w dziedzinie projektowania
uytkowych witryn internetowych, cienie nadal s uywane, z kilku powodw:
o wzbogacaj stron,
o tworz wraenie trzeciego wymiaru, zarwno jeli chodzi o obiekt, jak i o stron,

rySuNeK 2.10. Klasyczny efekt cienia naoony

na zdjcie

o mona je atwo uzyska, posugujc si programami graficznymi.

rySuNeK 2.11. niepoprawne ustawienie rde

wiata zwr uwag na rne kierunki padania cienia w przypadku kadego z tych obiektw

zunflower

63

wskazwka
jeliwykorzystujeszefektywarstwwprogramieAdobephotoshop,upewnijsi,eopcja
Use Global Angle (Uyj wiata oglnego) jest
zaznaczona.wtensposbkierunekpadania
wiatabdziezawszetakisam.

aby unikn problemw, ktre mog powsta, gdy wykorzystywany jest efekt cienia
(na przykad niezgodnych kierunkw padania wiata), zapoznaj si z nastpujcymi
wskazwkami:
o zwracaj szczegln uwag na jasno cieni sprawd, czy nasycenie cienia zgadza si z logicznym dystansem wzrokowym. Ciemne cienie sprawiaj, e obiekt
wydaje si znajdowa bliej ta, janiejsze cienie odsuwaj obiekt od ta.
o Szeroko i wysoko cienia take wpywa na postrzeganie dystansu obiektu od
ta. Wski cie daje wraenie niewielkiego oddalenia obiektu od ta, natomiast
szersze cienie wizualnie oddalaj obiekty.
o Naladuj wiato w sposb realistyczny. jeli na stronie znajduj si dwa obiekty,
cienie przez nie rzucane powinny by spjne.

rySuNeK 2.12. Poprawny efekt cienia

rySuNeK 2.13. Realistyczny efekt wietlny

Na przykad pierwsze dwa nachodzce na siebie prostokty tworzce rodkow kolumn projektu zunflower rzucaj takie same cienie, padajce z lewej strony (patrz
rySuNeK 2.12).
take efekt zanikania zastosowany na prawym kocu paska wzmacnia efekt gry wiata w projekcie. wiato wydaje si ucieka i chowa cz obrazu przed wzrokiem
patrzcego (patrz rySuNeK 2.13).

nadawanieksztatu
Podobnie jak kolory, rne ksztaty oddziauj na ludzi w rny sposb. z kadym
z nich zwizane s pewne cechy, ktre mona wykorzystywa w projekcie w celu
wywoania okrelonych odczu u widzw.
od chwili powstania pierwszych piktogramw na cianach grot ludzie wykorzystuj
znaczenie ksztatw. znajdujemy je wszdzie s czci naszego wiata i dotycz
wszystkiego, czym zajmuj si ludzie. Niezalenie od kontekstu ich uycia od
zapisu wzorw matematycznych, poprzez tworzenie akcentw architektonicznych
na budynkach, do wyraania przynalenoci religijnej i plemiennej (krzy wity,
Gwiazda Dawida, sztuka tatuau) ksztaty s czci natury, a ich odtwarzanie
lub nadawanie bywa rodkiem wyraania wasnego ja projektanta.
W projekcie zunflower najwiksze znaczenie ma zdjcie kwiatu. Przyciga ono uwag swoim kolorem i zmusza do zastanowienia si nad tym, co wyraa jego ksztat.

64

ROZDZIA 2/pROjektOwAnIe

Ksztaty podstawowe
Okrgi i koa najczciej kojarzone s z kobiecoci, ciepem, komfortem, zmysowoci, mioci oraz innymi podobnymi pojciami. Okrgi i koa (lub uki) wykorzystywane s czsto w celu wyraenia pojcia wsplnoty, caoci, wysiku, ruchu
ibezpieczestwa. Wiele projektw witryn internetowych zawierajcych tre skierowan do kobiet, zwizanych z rnymi spoecznociami, traktujcych o yciu duchowym lub o romansach opartych jest na okrgach, ktre wzmacniaj w przekaz.
Trjkty uwaane s za symbole mskie, wyraajce takie cechy, jak sia, agresja,
dynamiczny ruch. Kierunek wskazywany przez trjkt ma wpyw na znaczenie tego
symbolu. Oko zwykle zatrzymuje si na dominujcym wierzchoku. Jeeli trjkt
skierowany jest w gr, sugeruje, e ruch i natarcie skierowane s wanie tam. Jeeli natomiast skierowany jest przeciwnie, moe to budzi negatywne skojarzenia,
na przykad bierno i bezradno.
Oczywicie, prostokty (w tym kwadraty) take maj pewne symboliczne powizania. Prostokty oznaczaj si i solidne podstawy, prawdopodobnie z powodu zwartoci ich formy i wraenia masy. Elementy graficzne zawierajce motywy prostoktw mog sugerowa istnienie porzdku, logiki oraz rwnowagi i dawa wraenie
bezpieczestwa.

Rysunek 2.14. Blisze spojrzenie na sonecznik, czyli kombinacj trjktw i ukw

Rysunek 2.15. Prostokty pomagaj zrwnoway kompozycj

czenie ksztatw w celu osignicia

maksymalnej skutecznoci przekazu
Jeli przeanalizujemy samo zdjcie sonecznika, stwierdzimy obecno trjktw i okrgw. Oczywicie, ich pojawienie si wynika z natury sonecznika, lecz Darvas wzbogaci
obraz w Photoshopie, wydobywajc jego kolor i bardziej eksponujc ksztat kwiatu.
W rezultacie otrzyma bardzo zmysowe zdjcie kwiatu o cechach zarwno damskich,
jak i mskich. Zdjcie to wywouje trwae wraenie (patrz rysunek 2.14).
W projekcie Zunflower mocne prostokty rwnowa mikko i zmysowo kwiatu i stanowi podstaw ukadu (patrz rysunek 2.15). Ksztaty mona czy w celu
osignicia mocniejszego przekazu. Po wprowadzeniu koloru i wiata otrzymujemy
bardzo interesujce efekty. Kompozycja umieszczona w widocznym miejscu i utrzymana w rozsdnym rozmiarze rzeczywicie silnie oddziauje.

Potrzeba przestrzeni
Podobnie jak w przypadku barw, wiata, cienia i ksztatu, przestrze ma bardzo ciekawe psychologiczne, archetypiczne znaczenie, ktre przez wieki wykorzystywali artyci, aby wywoa reakcje ogldajcych.

zunflower

65

Poprawne uycie przestrzeni podczas projektowania wizualnego suy wielu celom

przestrze pomaga skierowa oko na okrelony obszar na stronie, czy tekst
iobrazy i daje oczom odpocz. Odpowiednia ilo wolnej przestrzeni zwiksza czytelno i pozwala naszym zmysom przeanalizowa prezentowane informacje.

Psychologiczne i socjologiczne znaczenie

Przestrze ma rne znaczenia psychologiczne i socjologiczne. Na polu psychologii
warto rozway nastpujce zagadnienia:
o Przestrze i gospodarka s ze sob powizane. Ilo przestrzeni i sposb jej wykorzystania moe by dla jej odbiorcy wanym sygnaem. Projekty zawierajce wiele cinitych elementw odbierane s jako mniej eleganckie i gustowne,
podczas gdy wykorzystanie przestrzeni w bardziej zrwnowaony sposb otwiera drog do przekazu wyszej klasy.
o Przestrze to nie tylko nieobecno fizyczna (w rzeczy samej przestrze pomaga
definiowa obiekty). Zatoczone ukady graficzne sygnalizuj potrzeb oszczdzania miejsca i mog wywoywa u ogldajcych swoiste napicie, natomiast uytkowanie przestrzeni z zachowaniem odpowiednich proporcji, ale jednoczenie ekspansywnie, sprawia, e przekaz jest o wiele bardziej wyrafinowany i swobodny.
o Postrzeganie przestrzeni uwarunkowane jest kulturowo. Podobnie jak wprzypadku percepcji kolorw i interpretacji ksztatw, wpyw moe mie tu dowiadczenie
i zaplecze kulturowe ogldajcego. Sposoby postrzegania przestrzeni przez osoby
zrnych rodowisk niekiedy bardzo si rni. Wniektrych krgach kulturowych lub nawet poszczeglnych pastwach zblienie wasnej twarzy do twarzy
drugiej osoby to normalny sposb rozmowy i kontaktu. W innych natomiast, na
przykad w Stanach Zjednoczonych, osobista przestrze jest zwyczajowo wiksza.
Jeeli te zagadnienia przeniesiesz na grunt projektowania, zauwaysz, e wolna przestrze nie jest rezultatem tego, czego nie zamiecie na stronie, lecz zamierzonym
zabiegiem projektowym.

Przestrze dodatnia i ujemna

Rol przestrzeni w projekcie znacznie atwiej zrozumie, gdy wyjanimy, na czym
polegaj rnice pomidzy przestrzeni dodatni a ujemn.
Przestrze dodatnia zajmowana jest przez obiekty tworzce projekt. Przestrze ujemna
zawiera pozostae obiekty (na przykad to). Jednak oddzielenie przestrzeni ujemnej
od dodatniej nie jest moliwe to nierozerwalny i zawsze wystpujcy zwizek.

66

ROZDZIA 2 / projektowanie

Przestrze ujemna pomaga okreli dodatni, a krawdzie obiektw definiuj pocztek przestrzeni ujemnej, ktra take ma ksztat (patrz rysunek 2.16).

Profesjonalne wykoczenie
Zrozumienie technik operowania wiatem moe pomc w tworzeniu efektw cienia oraz innych efektw z tym zwizanych. Rol ksztatu w projektowaniu warto
przeanalizowa bardziej szczegowo, zarwno w dziedzinie oglnego projektowania
graficznego, jak i w okrelonych dziedzinach bardziej okrelonych, takich jak na przykad projektowanie logotypw i ikon. W kocu wyczucie przestrzeni i sposb manipulowania ni wraz z szerszym zrozumieniem jej roli pomoe Ci przekaza janiejsz
i wyraniejsz wiadomo odwiedzajcym.

Rysunek 2.16. Gdy przestrze ma kolor czarny,

lepiej wida, jak definiuje krawdzie obiektu
izjakich ksztatw si skada

Dziki wadzy nad wiatem, przestrzeni oraz ksztatem wzbogacisz projekt tak korzystnie, jak stao si to w przypadku ukadu Zunflower.

zunflower

67

Bor Attila, projektant

www.csszengarden.com/083

Springtime
Wywoywanie emocji przy uyciu koloru

Po chodnej zimie przepenionej monotoni Bor

Attila obudzi si pierwszego pogodnego, sonecznego

dnia wiosny i barwy przyrody podniosy go na duchu,

tchny we energi i rado. To przejcie od zimy
do wiosny zainspirowao Attil i jego projekty szczeglnie
wkwestii koloru.
Od dawna wiadomo, e kolor wpywa na ludzkie emocje
i nastrj. Dlatego na przykad czerwony definiujemy jako
gorcy i energetyczny. czymy go z ogniem lub barw czerwonych papryczek. Pniej te skojarzenia przenosimy do
dziedziny projektowania na przykad do projektowania
opakowa naturalnych produktw wykorzystujemy kolory
ekologiczne, czyli brzy i zgnie zielenie.
W projekcie Springtime monotonne kolory zimy spotykaj si z kolorami rozwijajcej si wiosny, co wrezultacie
daje palety barw, ktrych nie mona nazwa ani zimnymi,
ani gorcymi. Wyraaj one raczej ciepo iharmoni, wywoujc u ogldajcego poczucie ukojenia.

68

ROZDZIA 2 / projektowanie

wpywkoloru

Uwaga

jako projektant szukajcy moliwoci przekazania pewnych informacji widowni

uwiadomisz sobie, e zrozumienie psychologicznych efektw, znacze kulturowych
oraz preferencji kolorystycznych ze wzgldu na pe jest tak samo wane, jak zagadnienia bardziej techniczne.

Oczywicie,przewrotneuycieodwrotnych
nispodziewanekolorwmoeprowadzi
dopowstaniakonfliktu,aletakemoe
stanowiinteresujcepodejciedoprojektu
idadoskonaerezultaty.jednakpodejmowanietegorodzajudecyzjiwymagawieluprb
itestw.trzebazyskapewno,ewybrane
kolorysprawdzajsi.Sztukjesttakidobr
kolorw,abypowodowayonezamierzon
reakcjuogldajcych.

WySyAnie Czytelnego PRzeKAzu

Chocia sposb wyraania treci poprzez uycie sw, ukadu tekstu i obrazw jest
czsto wystarczajcy, kolor stanowi niezwykle istotny element komunikacji wizualnej. Dowiadczony projektant wie, jakich kolorw uywa adekwatnie do treci przekazu i jak to robi, aby dotrze do docelowych odbiorcw. kolor moe w rwnym
stopniu przyciga oko, jak obraz czy tekst, a czasem nawet bardziej.
jeli dostaniesz zlecenie stworzenia witryny internetowej dla grupy metalowej, uycie
jasnych kolorw, takich jak ty i rowy na biaym tle, bdzie kci si z treci
przekazu. Muzyka metalowa kojarzy si z ciemnymi barwami. W takim przypadku
w projekcie mona uy jasnych kolorw, ale najbardziej czyteln tre dotyczc zespou mona przekaza przy zastosowaniu ciemnych, cikich barw i odcieni, ktre
zwykle kojarzone s z tym gatunkiem muzyki.
analogicznie podczas tworzenia witryny klasycznego kwartetu uycie bardzo ciemnych i ponurych barw nie podkreli wyrafinowania i lekkoci muzyki tego gatunku.
Wybr kolorw odpowiadajcych przedmiotowi opisu i treci przekazu jest newralgicznym skadnikiem efektywnego projektu.

KoloRy A PSyChiKA CzoWieKA

Wpyw kolorw na emocje ludzi zawsze fascynowa badaczy. Wpyw ten opisywano
jako zoony zwizek uwzgldniajcy wiele czynnikw.
jeli kto jest niewidomy, ten temat mona po prostu pomin. osoby z zaburzeniami
percepcji koloru po prostu nie bd w peni korzysta z tego, co przygotowa projektant. rednio 1 na 12 mieszkacw ameryki Pnocnej cierpi z powodu najszerzej
rozpowszechnionej formy lepoty na kolory daltonizmu (dyschromii, niemonoci
odrnienia od siebie dwch kolorw, najczciej czerwonego od zielonego). Podczas
dobierania kolorw witryny warto o tym pamita.

springtiMe

69

Rysunek 2.17. Paleta barw uytych w projekcie

Springtime zawiera kilka odcieni zieleni, delikatny odcie bkitu i bieli

Odcie koloru moe zmieni jego wag. Inne uczucia wywouje kolor jasnozielony,
a inne ziele khaki. Podobnie postrzeganie koloru mona modyfikowa, wprowadzajc tekstur. W tabeli 2.1 umieszczono popularne kolory i opisano ich zwizki
skojarzeniowe.
Tabela 2.1. Psychologiczne zwizki skojarzeniowe popularnych kolorw

Kolor

Skojarzenie

Czerwony

moc, energia, mio, pasja, agresja, niebezpieczestwo

Niebieski

zaufanie, konserwatyzm, bezpieczestwo, czysto, smutek, porzdek

Zielony

natura, ziemia, zdrowie, zazdro, odnowienie

Pomaraczowy

rado, szczcie

ty

optymizm, nadzieja, filozofia, tchrzostwo

Fioletowy

wadza, tajemnica, religia

Brzowy

niezawodno, komfort, wytrzymao, ziemia

Szary/Srebrny

intelekt, futuryzm, skromno, smutek, przemijanie, elegancja

Czarny

moc, seksualizm, wyrafinowanie, tajemnica, strach, nieszczcie, mier

Biay

czysto, schludno, precyzja, niewinno, sterylno, mier

Zapewne zauwaye, e niektre skojarzenia s wsplne dla kilku kolorw, aniektre

sprzeczne, na przykad w przypadku czerni i bieli. Czerwony wyraa zarwno pasj,
jak i niebezpieczestwo (by moe te dwa pojcia nie s a tak odlege). Na zbieno
skojarze wpywa wiele czynnikw kulturowych, spoecznych, biologicznych.
W przypadku projektu Springtime odcienie zieleni s mikkie, przyjemne i kojarz
si z traw i limi. Dopenienie caoci delikatnymi akcentami niebieskiego rozszerza
naturalny wyraz ukadu (patrz rysunek 2.17).

70

ROZDZIA 2 / projektowanie

KoloR, KultuRA i Pe
attila jest Wgrem. Czy kulturowe korzenie artysty i rodowisko, w ktrym yje, maj
wpyw na decyzje projektowe i percepcj kolorw? eksperci potwierdziliby, e tak
jest w istocie. Podobnie pe i zaplecze kulturowe odbiorcy projektu Springtime maj
jaki wpyw na percepcj.
kultura i pe rozszerzaj i komplikuj podstawowe reakcje na kolor oraz skojarzenia
omawiane w poprzednim punkcie. W tABeli 2.2 omwiono niektre ze skojarze
i znacze, jakie maj wybrane kolory w zalenoci od kultury i pci. jak mona si
szybko zorientowa dobr kolorw na tak midzynarodowym forum, jakim jest
internet, musi by bardzo staranny.

Uwaga
wicejinformacjiifaktwdotyczcychteorii
koloru,atakewynikirozmaitychbada,artykuy,ksikiznajdzieszwwitrynieprofesora
j.L.Mortona,Colorcom(www.colorcom.com).
Drugwspaniawitrynpowiconkolorom
jestCausesofColor(http://www.webexhibits.
org/causesofcolor).

tABelA 2.2. percepcjakolorwwzalenociodkrgwkulturowychipci

Kolor

Wpyw

Czerwony

W Chinach symbol szczcia. W zestawieniu z biel staje si bardziej

intensywny. Wicej kobiet woli czerwony od niebieskiego.

Niebieski

W wielu krajach Wschodu symbol niemiertelnoci, a w kulturze

ydowskiej symbol witoci. W hinduizmie kolor niebieski symbolizuje
Kriszn. Powaany na caym wiecie, std uwaa si go za kolor
globalnie bezpieczny. Mczyni zwykle wol niebieski od czerwonego.

Zielony

W Stanach Zjednoczonych wizany z pienidzmi, w innych krajach

za niekoniecznie. Zielony ma silne emocjonalne skojarzenia w Irlandii,
poniewa jest kolorem tamtejszych katolickich nacjonalistw. Kobiety
potrafi rozrni wicej odcieni zielonego ni mczyni.

Pomaraczowy

W Stanach Zjednoczonych w dziedzinie projektowania opakowa

tradycj stao si uywanie pomaraczowego koloru do oznaczania
tanich produktw. Naley o tym pamita, jeli wykorzystuje si ten
kolor do projektowania witryn biznesowych. Pomaraczowy ma
take wyrane znaczenie dla Irlandczykw, poniewa jest kolorem
protestantw. Mczyni wol pomaraczowy od tego.

ty

wity cesarski kolor w kulturach azjatyckich. Kobiety wol ty

od pomaraczowego i kojarz go z ciepem oraz optymizmem.

Fioletowy

W Europie kolor fioletowy zwizany jest z aob. Kojarzony jest take

z nowymi i alternatywnymi religiami, std moe by traktowany jako
kontrowersyjny. Fioletowy stosunkowo rzadko wystpuje w naturze; ma
go kilka gatunkw kwiatw i owocw oraz niektre ryby sonowodne.

Brzowy

Kolor neutralny, zarwno w sensie kulturowym, jak i pciowym.

Czarny

Kolor aoby i barwa mierci w wielu krajach cywilizacji zachodniej,

a take w innych.

Biay

Kolor aoby i barwa mierci w wielu kulturach azjatyckich. W wielu

spoecznociach zachodnich kolor czystoci.

springtiMe

71

Uwaga
przedwdroeniemprojektudobrzejest
stworzykilkapalettestowych.Monato
atwozrobiwprogramieAdobephotoshop
(rysunek2.18).Stwrzpustydokumentiprzy
uyciunarzdziakroplomierzadodawajkolory
dopaska,sprawdzajc,jakdosiebiewzajemniepasujijaksicz.nastpniemoesz
przygotowaprojekttestowyiprzypisamu
wybranekoloryzapomocCSS.
technologiaCSSjestpomocnawfazie
tworzeniaprototypuprojektumona
utworzykilkaarkuszystylwodpowiadajcychkadejpalecietestowejiprzypisa
odpowiednigamkolorwprzygotowanemudokumentowitestowemu.Moesztake
wczytczynnodostudiumergonomii,
przedstawiajcbadanympodmiotomrne
zestawybarwizbierajcichopinie.

rySuNeK 2.18. tworzenie palety kolorw

w programie Photoshop

paletykolorwdostosowania
wwitrynachinternetowych
Podczas tworzenia palet na potrzeby wasnych projektw powiniene bra pod
uwag omawiane w tej czci rozdziau kwestie. aby stworzy odpowiednie palety,
oprcz wiadomoci treci, jakie chcesz przekazywa, musisz pozna take oczekiwania ogldajcych.

PRzyjRzyj Si SWojej WidoWni

zote prawo komunikacji brzmi: Poznaj odbiorcw przekazu. Poniewa dla percepcji koloru znaczenie ma psychika czowieka, pe i zaplecze kulturowe, musisz
pozna i zrozumie grup docelow projektu. W niektrych przypadkach skojarzenia kolorystyczne s tak szerokie, e speniaj wymagania wszystkich odbiorcw. takie s projekty prezentujce duo barw niebieskich, brzw lub jak w przypadku
Springtime zieleni.
ekspert w dziedzinie kolorw, j.l. Morton, o ktrego witrynie wspomnielimy ju
wczeniej, sugeruje, aby projektanci trzymali si jak najbliej spodziewanych skojarze. jeli witryna przeznaczona jest dla dzieci, uycie kolorw symbolizujcych
rado jest bardzo wskazane. jeli masz zamiar zaprezentowa elegancj, w Stanach
zjednoczonych najlepiej uy koloru czarnego i srebrnego. jeli zwracasz si do
mczyzn, w wikszoci przypadkw odpowiedni bdzie niebieski. jeli natomiast
przekaz kierowany jest do kobiet, czerwie i r wydaj si bardziej odpowiednie.
jeli projektujesz witryn, ktra w jaki sposb wie si z natur, racjonalne staje si
uycie barw zielonych, niebieskich i brzowych.

Moliwocistosowania
koloruwCSS
Na szczcie technologia CSS oferuje wiele moliwoci w zakresie okrelania kolorw. Mona stosowa dowoln z nastpujcych notacji:

rySuNeK 2.19. ustalanie wartoci RgB w programie Photoshop

o Nazwy kolorw. istnieje 17 nazw, ktrych mona uywa w technologii CSS:

black (czarny), silver (srebrny), gray (szary), white (biay), maroon (turkusowy),
red (czerwony), purple (liliowy), fuchsia (fuksja), green (zielony), lime (limetkowy), olive (oliwkowy), yellow (ty), navy (granatowy), blue (niebieski), teal, aqua
i orange (pomaraczowy). Przykadowy zapis:
Color: orange;

o Wartoci RGB (skadniki koloru w postaci liczb). Przy okrelaniu koloru

moesz uy trjki wartoci liczbowych. Wartoci te mona ustali w programie
Photoshop (patrz rySuNeK 2.19) lub w innym programie do obrbki obrazw:
Color: RGB(51,153,204);

72

ROZDZIA 2/pROjektOwAnIe

o Wartoci RGB (procenty). Wystarczy poczy procentowy udzia kadej

skadowej czerwonej, zielonej i niebieskiej aby otrzyma podany kolor,
w tym przypadku fiolet.
Color: RGB(93%, 51%, 93%);

o Wartoci szesnastkowe. S to szeciocyfrowe wartoci szesnastkowe, ktre

mona odczyta w Photoshopie (patrz rySuNeK 2.20), jak rwnie w wielu rdach dostpnych w internecie. Wartoci te skadaj si zarwno z cyfr, jak i z liter.
kada para znakw odpowiada jednej skadowej rGB. Szesnastkowy system opisu koloru wykorzystywany jest w internecie od bardzo dawna, zatem wikszo
czytelnikw zna ten zapis:
Color: #0000FF;

o Szesnastkowe wartoci skrcone. Wartoci skrcone mog by stosowane

tylko wwczas, gdy wartoci z danej pary s rwne. Na przykad w przypadku
wartoci #FF6699 mona uy notacji skrconej, ale w przypadku wartoci
#808080 ju nie. Powyszy przykad reprezentujcy kolor niebieski spenia
opisywane wymagania, zatem mona uy nastpujcego zapisu CSS:
Color: #00F;

o Kolory systemowe. Nazwy kolorw systemowych to zestaw sw kluczowych

dozwolonych w specyfikacji CSS 2.1, ktre daj projektantowi moliwo uycia
kolorw zdefiniowanych na komputerze uytkownika. Na przykad:

rySuNeK 2.20. uycie palety wyboru kolorw

w programie Photoshop do odczytywania wartoci szesnastkowych danego koloru

Uwaga
wicejinformacjinatematswkluczowych
reprezentujcychkolorysystemoweznajduje
sipodadresemwww.w3.org/TR/CSS21/
ui.html#system-colors.pamitaj,etekolory
niebdczcimoduukolorwwspecyfikacjiCSS3.0.

Color: WindowText;

barwne wnioski
Niezalenie od tego, czy projektujesz z powodw osobistych, czy zawodowych, prac
najlepiej zacz od zrozumienia przekazywanej treci i jej odbiorcw. Dysponujc
tak wiedz, bdziesz dokonywa trafniejszych wyborw barwy, wspomagajcych
proces przekazywania informacji.
Projekt Springtime to doskonay przykad zastosowania kolorw w projekcie w idealnej zgodzie z celami, ktre projektant chcia osign.

Uwaga
wieleosbnadalprojektujewitrynyprzyuyciupaletyweb-safe,aleponiewawikszo
dzisiejszychkomputerwmoewywietla
milionykolorw,trzymaniesitejzasadynie
jestuzasadnione,chybaewymagategokonkretnyprzypadek.Uytkownicy,ktrzyznaj
paletweb-safe,odrazustwierdz,ekolory
wprojekcieSpringtimewistotnysposbwykraczajpozagrup256barwztejpalety.

springtiMe

73

Laura MacArthur, projektant

www.csszengarden.com/022

viridity
Gra wzorw, tekstur i kontrastw

Monotonna ziele obecna w projekcie viridity,

przywizanie do szczegw, soczysta tekstura przywodz

na myl omsza cik len i gruby aksamit. Laura
MacArthur sprbowaa przedstawi w tym projekcie rwnowag ipoczucie bogoci.
Poprzez uycie powtarzajcych si wzorw i symulowanej faktury MacArthur chciaa odnale rwnowag pomidzy szczegowoci detali a prostot w innych obszarach
obrazu. Wygaszone, monotonne barwy zapobiegaj wraeniu zbytniego toku na ekranie, a na paskich zielonych
obszarach pomidzy dominujcymi teksturami oko moe
zatrzyma si i odpocz.

74

ROZDZIA 2 / projektowanie

Wzory
Obrazy uyte w projekcie viridity to gwnie podobne do siebie z wygldu wzory. Po
szczegowym ich przeanalizowaniu stwierdzisz, e s spjne i mona wrd nich
wyrni dwie kategorie: jedna z nich zawiera wzory utworzone z punktw rastra,
adruga odciski motyww rolinnych, odygi i licie (patrz rysunki 2.21 i 2.22). Kady wzr zosta utworzony poprzez naoenie filtrw programu Adobe Photoshop na
kilka rysunkw. Wprowadzono tu te celowo pewne rnice, tak aby ostateczny efekt
skada si z niepowtarzalnych elementw i nie wydawa si nudny.
Wzr to zwykle powtarzajcy si element-ksztat lub kilka elementw, ktre wypeniaj dany obszar. Wzory stosowane s szeroko wszdzie tam, gdzie tworzy si jakie
projekty, na przykad w modzie i planowaniu wntrz. Wystpuj one take w naturze
wystarczy przyjrze si porom na skrce pomaraczy lub strukturze licia.
Dobry wzr moe by najlepszym przyjacielem projektanta witryn internetowych.
Naley jako osabi wraenie, jakie robi dobrze zdefiniowane due obszary strony:
w niektrych projektach jednolite wypenienie moe spenia swoj rol, w innych
lepiej pozostawi bia przestrze, a jeszcze w innych wystpuje potrzeba wprowadzenia elementu wizualnego wykraczajcego poza proste, jednorodne pola.

Rysunek 2.21. Zblienie wzoru ptonowego

Ograniczenia, ktre napotykamy w dzisiejszych czasach podczas projektowania witryn internetowych, zwikszaj potrzeb uycia wzorw. Pojedynczym, maym obrazem zaprojektowanym tak, aby mona go byo powiela na wikszej powierzchni,
atwo wypeni ca stron, a mniejsza objto pliku oznacza, e zwikszona szczegowo kosztuje niewiele kilobajtw. Na przykad, jeli powielisz obraz oobjtoci
500 bajtw, moesz atwo wypeni obszar o szerokoci 900 pikseli.
Parametry powtarzania mona atwo ustawia przy uyciu wasnoci backgroundrepeat dostpnej w CSS. Moliwe wartoci to repeat, no-repeat, repeat-x, repeat-y. Oznaczaj one odpowiednio ustawienie powtarzania obrazu w obu kierunkach na paszczynie, wyczenie powtarzania i ustawienie powtarzania w jednym,
wybranym kierunku.

Rysunek 2.22. Zblienie wzoru rolinnego

h3 {
background-repeat: no-repeat;
}
body {
background: #669999 url(z_bgrnd.gif) repeat-x 0px 1px;
}

viridity

75

Przedstawiony przykad pokazuje, e wasno background-repeat moe by stosowana niezalenie od innych opcji dotyczcych ustawie ta lub jako wasno skrcona wewntrz duszej reguy ustawiajcej to.

Tekstura
W internecie nie powica si duo czasu i miejsca dotykowemu sposobowi przekazywania informacji. To twierdzenie jest prawdziwe dla caej dziedziny komputerowej. Proste kontrolery i kierownice do gier majce funkcj przekazywania siy
oczywicie s produkowane, ale na rynku nie wystpuj adne inne produkty konsumenckie tego rodzaju.
Rysunek 2.23. Te rzeby maj faktur majc
imitowa szaty

Na pocztku tej dekady firma Logitech eksperymentowaa z myszkami komputerowymi z serii iFeel, ktre reagoway na zmian podoa pod kursorem. Na przykad
przesunicie i umieszczenie kursora na czu uytkownik mg odczuwa jak przesunicie myszki na gumow powierzchni. Nie syszelimy odalszym rozwoju tej
technologii, a firma Logitech ju nie produkuje tych myszek. Chocia ta technologia
bya bardzo ciekawa, nikt nigdy nie wymyli, do czego tak naprawd moe si przyda. Prawdopodobnie z tego wanie powodu si nie przyja.
W swoim tradycyjnym znaczeniu tekstury s reprezentowane w internecie wsposb niewystarczajcy. Klikanie to najbardziej interaktywna odpowied komputera,
jedyna, jak moesz poczu. Jednak tekstury mona nie tylko poczu, mona je
take zobaczy.
Posgi mog by ubrane w swobodnie opadajce, pofalowane szaty wyryte wkamieniu. Podwiadomie doskonale zdajemy sobie spraw, e dotykajc szat posgu, poczujemy jedynie gadk, tward powierzchni (patrz rysunek 2.23). Odbieramy je
jednak jak reprezentacj prawdziwych ubra, poniewa szaty zkamienia, jak i prawdziwe, maj wsplne niektre cechy wygldu.
Wzory i tekstury s ze sob powizane. Czsto wzr moe tworzy (symulowa) tekstur w sposb niezamierzony i odwrotnie, wiele tekstur w sposb naturalny moe
formowa wzory skadajce si z powtrze jednego motywu.
Tekstury niekoniecznie powstay na podstawie zdj, lecz w sposb oczywisty przypominaj wzory zapoyczone z przyrody i otaczajcego nas wiata. Tekstury utworzone z punktw przywodz na myl chropowat powierzchni, a rozmyte kwadraty
przypominaj materia typu flanela. Inne wzory mog pochodzi prosto ze starych,
zdobionych firan. Oglnie projekt viridity wywiera pozytywne wraenie kojarzy
si z komfortowym krzesem, ktre zachca, by na nim spocz.

76

ROZDZIA 2 / projektowanie

Kontrast
Nieumiejtne uycie monotonnej gamy kolorw moe prowadzi do powstania
problemw. Jeli na stronie znajduje si zbyt wiele kolorw i szczegw, naley liczy si z kopotami zwizanymi z kontrastem.
Odpowiedni kontrast jest wymagany, aby mona byo atwo odrnia poszczeglne
elementy: jeli jest on zbyt may, elementy te bd zlewa si ze sob, a tekst bdzie
nieczytelny. Zbyt duy kontrast powoduje z kolei, e ogldajcy czuje si przytoczony dominujcymi, narzucajcymi si obiektami.

Wysoki kontrast
Zbyt wysokie kontrasty pojawiajce si w projekcie prowadz do toku wizualnego.
Niski kontrast kolorystyczny w projekcie viridity sprawdza si, poniewa kontrast znaczeniowy uzyskiwany jest poprzez uycie odpowiednich tekstw iczcionek. Szerszy
zakres kolorw uytych w tym projekcie wydawaby si przesadny (rysunek 2.24).

Rysunek 2.24. Duy kontrast kolorystyczny koliduje z bardzo szczegowymi wzorami i teksturami projektu viridity

Przez wieki ksiki i gazety drukowano czarnymi czcionkami na biaym tle. Chocia
kolorowy atrament istnieje od bardzo dawna, czarny i biay tworz najwikszy moliwy do osignicia kontrast i zapewniaj najwiksz wygod czytania. Generalnie ta
sama zasada pozostaje aktualna w przypadku ekranu. Najwikszy kontrast otrzymuje
si, umieszczajc czarny tekst na biaym tle.
Jednak istniej tu wyjtki, co wynika z faktu, e monitor komputera emituje wiato,
a wydruk papierowy nie. Z monitorami zwizane s pewne ograniczenia. Jasny
ekran LCD uywany w ciemnym pomieszczeniu moe emitowa zbyt intensywne wiato powodujce uczucie dyskomfortu u ogldajcego. Prba czytania tekstu
zekranu wtakich warunkach to prba wytrzymaoci wzrokowej dla uytkownika.
Uycie kolorw w projekcie stawia przed Tob kolejne zadania dotyczce kontrastu.
Niektre zestawienia kolorw bd wywoyway wraenie migotania bdce wynikiem
zjawiska noszcego nazw jednoczesnego kontrastu. Gdy umiecisz obok siebie prbki
dwch dopeniajcych si kolorw, na przykad niebieskiego i pomaraczowego lub
czerwonego i zielonego, uzyskasz najwikszy kontrast, agranica pomidzy kolorami
bdzie szczeglnie intensywna (rysunek 2.25). Wmiejscu czenia dwch kolorw
dopeniajcych z powodu kontrastu wystpuje nieprzyjemne napicie optyczne.

Rysunek 2.25. Zjawisko jednoczesnego kontrastu powoduje migotanie krawdzi obszarw

okolorach podstawowych

Jednak w mniej intensywnej formie jednoczesny kontrast moe by cennym narzdziem do wzbogacania projektu i wprowadzania w nim subtelnoci. to-pomaraczowy element bdzie wydawa si bardziej pomaraczowy na tym tle, a bardziej
ty, gdy umiecisz go na tle pomaraczowym lub czerwonym (patrz rysunek 2.26).
Poprzez otoczenie ciemnego obszaru kolorami jeszcze ciemniejszymi optycznie rozjaniasz ten obszar. Nisko nasycony czerwony kolor moe wyda si janiejszy, gdy
prezentowany jest na szarym tle.

Rysunek 2.26. Ten sam to-pomaraczowy

kolor bdzie wydawa si bardziej pomaraczowy
na tym tle, a bardziej ty, gdy umiecisz go
na tle czerwonym

viridity

77

Niski kontrast
Zbyt niska kontrastowo, ktr charakteryzuj si niektre projekty, powoduje, e
strona wydaje si przygaszona i zbyt monotonna. Kontrast jest potrzebny, aby wprowadzi odrobin wicej wyrazu i wyrni pewne obszary i elementy. Monotonne
odcienie zieleni w projekcie viridity rozcigaj si od najjaniejszych do najciemniejszych. Uycie mniejszej iloci odcieni zakcioby gr elementw graficznych, zniweczyo rozbyski oraz pola, na ktrych oko moe odpocz. Wrezultacie mogoby
zrujnowa ca rwnowag wizualn (patrz rysunek 2.27).

Rysunek 2.27. Projekt viridity w wersji niskokontrastowej

Nisk kontrastowo stosuje si czsto w celu zachowania subtelnoci projektu. Piksele s stosunkowo due za due do celw projektowych. Linia nigdy nie moe
by ciesza ni jeden piksel, poniewa piksela nie mona podzieli. Jednak poprzez
zmniejszenie kontrastowoci linii mona doprowadzi do osabienia jej znaczenia,
awic sprawi, e wyda si ona ciesza (rysunek 2.28).
Analogicznie poprzez zmniejszenie oglnego kontrastu pomidzy elementami-skadnikami projektu uzyskuje si efekt wyciszenia i osabienia znaczenia ukadu kompozycyjnego. Fragment tekstu o mniejszym znaczeniu mona osabi wizualnie, nadajc
mu mniej kontrastujcy z otoczeniem kolor, a nieaktywne ikonki lub cza mona
zastpi ich niskokontrastowymi wersjami, ktre sprawiaj wraenie mniej wanych,
niedostpnych.

Rysunek 2.28. Rozjanienie krawdzi powoduje,

e pozornie wydaj si one ciesze

Wzbogacony o wiedz z zakresu efektw moliwych do uzyskania w projektach przy

zastosowaniu niskiego kontrastu musisz pamita o tym, e niski kontrast powinien
by stosowany w sposb odpowiedni i rozsdny. Dla uytkownikw o sokolim wzroku przeczytanie szarego tekstu umieszczonego na troch ciemniejszym, lecz rwnie
szarym tle nie bdzie stanowio adnego problemu, lecz osoba o sabszym wzroku
bdzie musiaa prawdopodobnie powikszy znacznie rozmiar tekstu. Tekst w kolorze czarnym moe by lepszym wyborem, poniewa zwikszysz w ten sposb jego
czytelno i wyodrbnisz go z ta.
Na czytelno wpyw ma take kontrast. Rne odcienie to rne wartoci jasnoci.
Czysty ty jest janiejszy ni czysty niebieski, zatem ty tekst na biaym tle moe
by nieczytelny nawet dla Sokolego Oka.

Daltonizm
Kolejny aspekt, ktry warto rozway, to wpyw niskiego kontrastu na zdolno
widzenia przez osoby dotknite daltonizmem (patrz rysunki 2.29A i 2.29B). Wystpuje kilka form zaburze widzenia kolorw i wiele ich odmian. Dwie najczciej
wystpujce to:
o Protanomalia (deuteranomalia) w przypadku tego zaburzenia, lejszego
z dwch omawianych, ogldajcy postrzega wikszo barw, lecz jego zdolno
rozrnienia pewnych kolorw jest mniejsza.

78

ROZDZIA 2 / projektowanie

o Protanopia (deuteranopia) ta forma daltonizmu jest rzadziej spotykana,

lecz jej objawy s cisze. osoby, ktre na ni cierpi, maj kopoty z postrzeganiem koloru czerwonego i zielonego, co pozostawia je w wiecie barw tych,
brzowych i niebieskich. Schorzenie to nosi take nazw dyschromii.
Wymienione tu rodzaje zaburze widzenia kolorw maj pewne podgrupy. Cz
osb cierpi na czciow lub cakowit niezdolno postrzegania pewnych konfiguracji koloru czerwonego, zielonego, rzadko niebieskiego. oglnie daltonizm dotyka
1 na 12 osb. znacznie czciej na t chorob cierpi mczyni.
Co dzieje si, gdy uytkownik z zaburzeniami widzenia kolorw oglda projekt,
w ktrym wystpuj kolory spoza zakresu jego widzenia? Moe mie miejsce sytuacja, w ktrej misternie dobrana paleta barw wprowadza daltonist w zakopotanie
zdarza si to, jeli projektant przekazuje informacje przy uyciu kolorw. jeli prosisz daltonist, aby klikn czerwony przycisk, a on widzi tylko brzowe lub czarne,
popeniasz nietakt. W wielu sytuacjach element danego koloru zleje si po prostu
z otaczajcym go tem, a wraenie kontrastu, ktre ma czowiek o prawidowym widzeniu, nie jest tak silne w przypadku daltonisty.

rySuNeK 2.29A. gwny projekt ogrodu zen

widziany przez filtr symulujcy jedn z form
protanopii

Nie istnieje cakowicie niezawodna metoda, za pomoc ktrej projektanci mogliby

symulowa widzenie daltonisty. Przeksztacenie projektu do skali szaroci mogoby
si wydawa oczywistym posuniciem, ale, niestety, takie przyblienie nie oddaje dokadnie tego, co widzi wikszo osb cierpicych na t chorob. Dostpne s rne
filtry, ktre symuluj wiele typw daltonizmu, lecz generowany przez nie obraz jest
tylko pewnym przyblieniem. Daltonizm to dolegliwo bardzo indywidualna i jej
charakterystyka rni si w zalenoci od osoby.
Co mona zrobi, jeli tak naprawd nie da si przetestowa projektu pod ktem
tego problemu? Wskazwka numer 2 zalece Web Content accessibility Guidelines
(www.w3.org/TR/WCAG10/#gl-color) mwi, e dowolne informacje przekazywane
przy uyciu kolorw musz by take przekazywane w przynajmniej jeden inny sposb. Na przykad cze moe by oznaczone kolorem niebieskim, ale oprcz tego
warto je take podkreli. Przycisk moe by zielony, ale powinien by take pokazany
za pomoc ikonki lub opisany tekstem. tekst ostrzeenia moe by czerwony, ale
powinien by umieszczony w jednolitej, pogrubionej ramce itd.

Spjnoijedno
Projektowanie z myl o wizualnej spjnoci oznacza rwne traktowanie wszystkich
aspektw kompozycji. Projekt w rodzaju viridity mgby atwo zmieni swj charakter na bardzo przytaczajcy i zbyt niejednoznacznie intensywny, jeli autorka nie
rozwayaby gry tekstur i kolorw, czcionek i wzorw. Poniewa laura Macarthur
powicia szczegln uwag rwnowadze elementw kompozycji, wynik jej pracy
jest o wiele bardziej zachwycajcy ni suma skadnikw kompozycji.

rySuNeK 2.29B. Podstawowy projekt tej witryny

widziany przez filtr symulujcy zaburzenia percepcji kolorw

Uwaga
wwitrynieColorblindwebpageFilter(pod
adresem http://www.colorfilter.wickline.org)
znajdujesifiltrsymulujcywidzeniezzaburzeniamipercepcjikolorw.

viridity

79

Charlotte Lambert, projektant

www.csszengarden.com/068

Ballade
Wyobrania, ktra wodzi oko wzdu cieki

Pierwotny charakter ogrodu Zen mia wiele

wsplnego z kontemplacj. Staa si ona pocztkiem dla

projektu Ballade graficzki Charlotte Lambert. Lambert
przechadza si po ogrodzie. Jej wyobrania pynie jak rzeka,
a po drodze odkrywa wiele znaczcych miejsc i przedmiotw schodki, mostek, kota wyskakujcego z zaroli.
Przechodzc od wyobrani do pira, Charlotte
stworzya kilka szkicw pomocnych w dopracowaniu wizji
projektu. Na ich podstawie powstay obrazy rzeczy, ktre
napotkaa podczas przechadzki. Uya tuszu, biaej farby,
papieru ikartonu po n-paku piwa, a nastpnie stworzya
wprogramie Photoshop obrazy przygotowane do uycia
na stronie internetowej.

80

ROZDZIA 2 / projektowanie

Prowadzenie wzroku
Dobry projekt graficzny charakteryzuje si tym, e wzrok poda przez istotne elementy, postrzegajc je w logicznej kolejnoci w sposb podwiadomy, tak e ogldajcy nawet nie zdy zorientowa si, e jego oczy s wodzone. Jest to jeden ze
sposobw, w jaki projektanci przekazuj informacje bez zbytniej nachalnoci.
Aby mc wodzi oko, trzeba dysponowa pewnymi rodkami, ktre pozwol zbudowa ciek dla wzroku. Tymi rodkami s obrazy oraz tre. W projekcie Ballade
mamy przykad czytelnej, jake eleganckiej cieki wizualnej.
Ustawienie elementw nawigacyjnych, czy do archiwum oraz zasobw po lewej
stronie spowodowao oddzielenie czci nawigacyjnej od gwnej zawartoci (patrz
rysunek 2.30). Wikszo osb ogldajcych strony internetowe przyzwyczajona jest
do tego, e cza nawigacyjne znajduj si po lewej stronie ekranu lub w jego grnej
czci. Umieszczenie czy w tych miejscach pozwala uytkownikowi szybko przej
do zapoznawania si z gwn zawartoci witryny.
W swoim projekcie pani Lambert prowadzi widzw od sekcji do sekcji tak, jakby
dosownie przechadzali si po ogrodzie. Przechodz oni przez portyk (rysunek 2.31)
i schodz schodami (rysunek 2.32). Kady fragment ogrodu ma swj niepowtarzalny
wygld i wiele miejsca na zawarto. Nagwki informuj o treci informacji w kadej
sekcji, jednoczenie integrujc znaczenie przekazywanej treci ze ciek wizualn.
Innym wanym rodkiem wodzenia oka jest przeznaczenie miejsca na odpoczynek.
Zwykle osiga si to dziki pozostawieniu obok tekstu wystarczajco duej iloci wolnego miejsca (rysunek 2.33). Kluczowe fragmenty tekstu oraz ukadu graficznego
mona oznaczy kolorem, a uoenie ksztatw oraz linii skupia uwag ogldajcego
i wyznacza kierunki.
Twrczyni projektu Ballade skonia si ku umieszczeniu gwnej zawartoci na biaych blokach ekranu, dziki czemu uzyskany kontrast suy czytaniu, a tekst mona
przesuwa w poziomie, co jest zbawienne dla oka mogcego odpocz na biaych
obszarach, przez ktre przechodzi. I chocia gama kolorw jest tu niesychanie uboga, bo obejmuje tylko kolor brzowy, czarny i biay, to pozostaje dla odbiorcy pewn
subteln, intrygujc zagadk, czy jest to ogrd zimowy, czy jesienny. To pytanie podtrzymuje jego zainteresowanie szuka on wicej wskazwek.

Rysunek 2.30. Gwna zawarto strony Ballade

zostaa oddzielona od elementw nawigacyjnych i pomocniczych. Jest to jeden ze sposobw
skupiania uwagi ogldajcego na zawartoci
iprowadzenia jego wzroku po istotnych elementach strony

Rysunek 2.31. Obraz portyku pochodzcy z projektu Ballade. Rysunek wietnie wzbogaca projekt

Rysunek 2.32. Od drzwi wejciowych do schodw projekt prowadzi widza zarwno w sensie
metaforycznym, jak i dosownym

ballade

81

Na kocu trzeba wspomnie o liciach (rysunek 2.34), mostkach i odciskach ap (rysunek 2.35), bdcych przykadami oryginalnych ksztatw wczonych do projektu.
One jeszcze bardziej przykuwaj wzrok ogldajcego oraz s swoistymi niespodziankami, na ktre trafia on podczas poznawania ukadu strony.

Mylenie w kategoriach CSS

Rysunek 2.33. Kademu blokowi tekstu towarzyszy odpowiednia ilo wolnego miejsca,
co pozwala odpocz oczom i poprawia ogln
czytelno tekstu

Rysunek 2.34. Wychodzca z ogrodu cieka

pokryta limi

82

ROZDZIA 2 / projektowanie

Ciekawym zjawiskiem ostatnich lat s projektanci nowej szkoy, ktrzy nie posuguj
si kategoriami konwencjonalnych, pochodzcych z programu starej szkoy ukadw
HTML opartych na tabelkach. Teraz uwaga skupia si na technologii CSS jako narzdziu tworzenia projektw. Chocia w ogrodzie Zen spodziewamy si nowego sposobu mylenia, spotykamy wielu projektantw nalecych do starej szkoy, przywizanych do sztywnego i czsto bardziej skomplikowanego podejcia polegajcego na
stosowaniu ukadw opartych na tabelach. Wprzypadku Ballade projektantka moga
pracowa bezporednio w jzyku CSS i stworzy w nim ukad projektu. Jednak co
staoby si, gdyby tak nie byo?

Gwizdy uczniw ze starej szkoy

Przygldajc si temu projektowi z perspektywy starej szkoy, atwo stwierdzi, e stworzenie tego rodzaju ukadu przy uyciu tabelek byoby koszmarem. Jeli wemiemy
tylko dwie sekcje podstawowego ukadu i sprbujemy poci go na kawaki w programie typu Macromedia Fireworks, otrzymamy pewn liczb fragmentw oryginalnego
obrazu rozmieszczonych w tabeli, co wyglda nastpujco:
<table bgcolor=ffffff border=0 cellpadding=0 cellspacing=0
width=597>
<tr>
<td rowspan=3><img name=ballade_rl_cl
src=images/ballade_rl_cl.gif width=30 height =887
border=0 alt=></td>
<td rowspan=3><img name=ballade_r1_c1 src=images/ballade_r1_c1.gif
width=537 height=273 border=0 alt=></td>
<td rowspan=3><img name=ballade_r1_c3 src=images/ballade_r1_c3.gif
width=30 height=887 border=0 alt=></td>
<td><img src=images/spacer.gif width=1 height=273
border=0 alt=></td>
</tr>
<tr>
<td><img name=ballade_r2_c2 src=images/ballade_r2_c2.gif
width=537 height429 border=0 alt=></td>
<td><img src=images/spacer.gif width=1 height=429
border=0 alt=</td>
</tr>

<tr>
<td><img name=ballade_r3_c2 src=images/ballade_r3_c2.gif
width=537 height=185 border=0 alt=0></td>
<td><img src=images/spacer.gif width=1 height=185
border=0 alt=0></td>
</tr>
</table>

analizujc ten fragment kodu, szybko uwiadomisz sobie, jak zoony byby ten projekt pod kilkoma wanymi wzgldami:
o Ukady wykonane przy uyciu tabelek zawieraj du ilo zbdnego kodu.
o Uycie w roli dystansw elementw graficznych zamiast wasnoci margin
i padding dostpnych w CSS powoduje niepotrzebny wzrost objtoci strony.
o Wikszo obrazw umieszczona zostaa na stronie przy uyciu fragmentw znakowania bdcego czci kodu strony, co stanowi dodatkowe porcje informacji.
to z kolei zwiksza czas pobierania strony z serwera.
o tego rodzaju ukady stron oparte na tabelkach musz by spjne na przestrzeni
wszystkich podstron witryny. kada podstrona zawiera znakowanie opisujce tabel i wstawione do niej fragmenty obrazw, zatem obrazy i skadniki strony s
ponownie wywietlane w czasie otwierania danej podstrony. W przypadku CSS
ukady strony s zapisywane w pamici przegldarki. W ogrodzie zen kod, ktry
opisuje te obrazy, trzeba odczyta tylko raz.
oczywicie, s to czste problemy wice si z uyciem tabelek. Wikszo projektantw doskonale wie, e naduywanie tabel powoduje jeszcze inne problemy, w tym
kopoty z dostpnoci witryny, poniewa wiele urzdze czytajcych zawarto ekranu (uywanych przez osoby niewidome i sabowidzce) nie radzi sobie z interpretacj
zawartoci umieszczonej w tabelach. Ponadto, jeli wemiemy pod uwag znaczenie
tego projektu jako doskonaego przykadu prowadzenia wzroku, dojrzymy kolejny
problem: udziwnione podejcie do tworzenia ukadw stron rodem ze starej szkoy
zakcioby przepyw obrazw, poniewa zoone ukady oparte na tabelkach zwykle
s adowane i wywietlane w sposb nieprzewidywalny, w przypadkowej kolejnoci.

nowaszkoa

rySuNeK 2.35. Rysunkowy kot dodaje gracji

lewemu grnemu naronikowi projektu. Projekt
Ballade przepeniony jest ciekawymi, cieszcymi
oko detalami

Uwaga
Chociaukadywykonanewtechnologii
CSSwywietlanesszybciejisprawniejni
przeadowaneukadyopartenatabelkach,
wichprzypadkuwystpujezjawiskoonazwie
FOUC,polegajcenatym,epodczasadowaniaogldajcemumoemignzawarto
pozbawionanadanegojejstylu.Zjawisko
FOUCwystpujewprzegldarkachIe,gdy
arkuszstyluCSSjestimportowany(aniepodczany).jeliwnagwkudokumentumamy
element linklubscript,zjawiskoFOUC
niewystpuje.wprojekcieCSSZenGarden
wceluunikniciategoproblemuwykorzystujemywanieelementscript.Dzikitemu
procesadowaniastronyprzebiegabardzo
gadko.wicejinformacjinatematzjawiska
FOUCznajdujesipodadresemhttp://www.
bluerobot.com/web/css/fouc.asp.

Przy wykorzystaniu technologii CSS o wiele atwiej stworzy projekt, ktry aduje
si w sposb cigy i nie drani ogldajcego. zamiast na skomplikowanych tabelach,
nieregularnie pocitych obrazach i graficznych separatorach, projektant moe skupi
si na ksztatowaniu wygldu poszczeglnych elementw.

ballade

83

Uwaga
Osadzanieobrazwwelementachnagwka
moesiprzyda,jeliteobrazyrzeczywicie
penifunkcjnagwkw.wogrodzieZen
wykorzystujemydotegocelutechnikzastpowaniaobrazw.Zastpowanieobrazw
omawiamywrozdziale4.

Uwaga
cignijdarmowerozszerzenieprzegldarek
MozillaiMozillaFirefox(http://chrispederick.
com/work/firefox/webdeveloper)

Nie twierdzimy, e w projektach CSS nie powinno si wykorzystywa elementw

graficznych umieszczonych na sztywno w kodzie strony. oczywicie, naley tak
czyni, gdy dany obraz jest czci zawartoci strony, tak jak na przykad fotografia
prezesa firmy w dziale o firmie, zdjcie produktu w dziale oferta itd. trzeba jedynie pamita o rozdzieleniu grafiki bdcej treci przekazu od innych elementw
penicych funkcje prezentacyjne skadajcych si na projekt, a nie na jego tre.
W tym przykadzie mona zobaczy, w jaki sposb elementy graficzne wystpujce
w gwnej sekcji strony zostay umieszczone wewntrz elementw penicych funkcje nagwkw:
#preamble h3{
background: url(road.jpg) top left no-repeat;
height: 106px;
}
#explanation h3 {
background: url(about.jpg) top left no-repeat;
height: 168px;
}
#participation h3 {
background: url(particip.jpg) top left no-repeat;
height: 154px;
width: 565px;
}
#benets h3 {
background: url(benef.jpg) top left no-repeat;
height: 171px;
}
#requirements h3 {
background: url(req.jpg) top left no-repeat;
height: 125px;
}

Wykorzystujc rozszerzenie programw Mozilla i Mozilla firefox o nazwie Web Developer, moesz wczy wywietlanie obwiedni elementw blokowych, a take ich
identyfikatorw oraz klas (rySuNeK 2.36). jak wida, dziki temu mona szybko zorientowa si, gdzie znajduj si rne sekcje projektu.

84

ROZDZIA 2/pROjektOwAnIe

Poprzez rozmieszczenie zawartoci w elementach i stworzenie ukadu graficznego

dziki wstawieniu elementw graficznych jako te tych elementw projektant osign kilka istotnych korzyci:
o Objto strony zostaa zmniejszona dziki odchudzeniu znakowania.
o Umieszczenie wikszoci (lub wszystkich) skadnikw prezentacyjnych warkuszu CSS oznacza, e strony witryny bd adowane znacznie szybciej, poniewa
style CSS s przechowywane w pamici podrcznej przegldarki i nie musi ona
interpretowa tych samych informacji za kadym razem, gdy otwierana jest nowa
strona o tym samym stylu.
o Witryna od razu staje si bardziej dostpna, poniewa w dokumencie nie wystpuj elementy prezentacyjne.
o Witryn atwiej zarzdza. Powiedzmy, e w danej chwili chcesz odwiey projekt Ballade, wprowadzajc troch zieleni i zota zamiast bardziej surowych barw,
ktre wystpuj w nim teraz. To zadanie bdzie o wiele atwiejsze do wykonania
przy wykorzystaniu technologii CSS pozwalajcej zachowa ogromn elastyczno i ograniczy nakad pracy potrzebny do wprowadzenia zmian.

Znale pomost
Zaprojektowanie efektywnej i ergonomicznej strony internetowej nie jest zadaniem
atwym. Projektant musi przeanalizowa wiele zagadnie i kwestii. Projekt Ballade
jasno pokazuje, jak mona wykorzysta ukad graficzny do wodzenia wzroku, w jaki
sposb kolory wywouj okrelone emocje i co daje zmiana podejcia przejcie
ztabelek do CSS. Wydaje si, e poznanie technik opartych na CSS jako pierwotnych
uwalnia adeptw projektowania witryn od myli oograniczeniach i problemach zwizanych z konwencjonalnymi, starymi technikami tworzenia ukadw.
Dla projektantw zmieniajcych filozofi pracy ze starej, opartej na wykorzystaniu
tabelek, na now, opart na CSS, trudno polega na znalezieniu nowych sposobw
twrczego mylenia. Poniewa technologia CSS pozwala naszym mylom wykroczy
poza sawny ju prostokt, Photoshopa, kod i styl, warto naszej pracy staje si niezaprzeczalnie wysoka. Znalezienie pomostu pomidzy starym a nowym moe by
wyzwaniem. W wyniku poczenia wyobrani, artyzmu i CSS Charlotte Lambert zainspirowaa nas projektem Ballade. Dziki temu moemy dostrzec, jak projektanci
przechodz przez kolejne mosty, rwnoczenie stopniowo porzucajc konwencjonaln, ograniczajc technik na rzecz nowej, opartej na technologii CSS.

Rysunek 2.36. Strona Ballade ogldana przy

uyciu kilku poytecznych i pomocnych narzdzi
programistycznych dostpnych po zainstalowaniu
dodatku Web Developer extension dla programw
Mozilla i Mozilla Firefox. Tutaj kady element blokowy zosta oznaczony obwiedni, dziki czemu
mona zobaczy, jak projektant szlifowa ukad
iw jaki sposb stosowa elementy graficzne te

ballade

85

Dave Shea, projektant

www.csszengarden.com/064

Night Drive
Przeksztacanie statycznego projektu
w dziaajc stron i rozwizywanie
problemw, ktre pojawiaj si po drodze

Inwokacja: mkn przez miasto tu po zmroku, gdy

zgonikw dobiega melodyjny dwik saksofonu Johna Coltranea, te wiata smu za oknem, granatowe
nasycone niebo rozciga si nad gow. Dave Shea wyruszy
wdrog, aby odtworzy klimat ciepego letniego wieczoru
wprojekcie Night Drive.
Gama ciemnych barw wprowadza wygaszony, ciepy
klimat. Kolor ciemnopomaraczowy uyty do wywietlania
wikszoci tekstw i elementw graficznych zosta zestawiony z janiejszymi, ale rwnie pomaraczowymi obszarami
w celu uzyskania odpowiedniej rwnowagi, aby projekt nie
wyda si zbyt brzowy. Obie te barwy zostay uzupenione
delikatnymi niebieskimi akcentami wystpujcymi gdzie
w tekcie. Dziki temu kontrast zosta celowo osabiony
istonowany, a cao nie wydaje si monotonna.
Zdjcia wybrano ze wzgldu na wystpujce na nich
kolory, atake po czci motywy. Jadc samochodem po
zmroku, moesz spodziewa si rozmytych wiate, szklistych kau i zamglonego, niebieskiego horyzontu.

86

ROZDZIA 2 / projektowanie

Wizualizacja kodu
Kiedy David Shea projektowa ukad Night Drive w programie Adobe Photoshop,
nie myla o tym, jak bdzie wyglda kod. Rozpocz od strony wizualnej, zatem
ewentualne problemy implementacyjne, ktre mogy si pojawi, musia rozwizywa pniej podczas tworzenia kodu.
Jak na podstawie paskiej makiety wykona interaktywn witryn? Naley stworzy
i zapisa wiele obrazw odpowiadajcych pewnym segmentom, na ktre podzielona
jest witryna. Segmenty te zostan pniej odtworzone przy uyciu CSS. Nie istniej
adne zasady dotyczce tego procesu, a kluczem do uzyskania satysfakcjonujcych
rezultatw jest elastyczno. Wczeniejsza znajomo rnych alternatywnych rozwiza uatwia podejmowanie decyzji.

Rysunek 2.37. Nagwek strony Night Drive

Rysunek 2.38. Nagwek pocity na kilka prostoktw

Wybr
Sprbuj zanalizowa nagwek projektu Night Drive zestaw poczonych prostoktnych pl, na ktrych umieszczono pobyskujc t rozet (patrz rysunek 2.37).
Podczas tworzenia takiego nagwka mona napotka dwie trudnoci trudno
moe sprawi poprawne uoenie zdj i linii oraz umieszczenie na wierzchu rozety
przy wykorzystaniu obrazu graficznego z przezroczystoci. Po chwili zastanowienia
Shea uoy dwa plany dziaania:
o Poniewa cay nagwek jest jednym duym obrazem, naley go zapisa wjednym pliku JPG. Dziki temu zachowany zostanie ukad linii, a take zminimalizowane bdzie ryzyko znieksztacenia ukadu. Wad tego rozwizania jest wikszy wynikowy plik JPG.

Rysunek 2.39. Zdjcia i tekst zapisane w pliku

innym ni to

o Trzeba poci obraz na kilka rnych prostoktw odpowiadajcych segmentom

nagwka, a nastpnie ponownie uoy z nich zaprojektowany ukad poprzez
umieszczenie obrazw w rnych elementach wystpujcych w kontenerach
#pageHeader i #extraDivs (kontener #extraDivs normalnie wystpuje na dole
strony, ale przy wykorzystaniu metody absolutnego pozycjonowania mona poprzesuwa jego zawarto na gr patrz rysunek 2.38).
Shea wybra w kocu drug metod, ale wzbogacon o pewien element pierwszej:
zamiast ci obraz na prostokty, wydzieli z projektu dwa obrazy w nim wystpujce i zapisa je w osobnych plikach (patrz rysunek 2.39). Napis tytuowy css
Zen Garden umieszczony zosta w pliku GIF, podobnie jak cay prostoktny podkad. To, co miao okaza si skomplikowanym kodem utrzymujcym nagwek
w ryzach, bdzie teraz przejrzystym poczeniem rnych metod pozycjonowania
plikw w formatach GIF i JPG.

Night drive

87

Po utworzeniu plikw nadchodzi czas dalszego planowania trzeba zdecydowa,

ktre obrazy przypisa do ktrych elementw. jeli wemie si pod uwag moliwo uycia atrybutu background-image i niektrych technik zastpowania tekstw
obrazami, odpowied wydaje si oczywista: w kontenerze #pageHeader nie ma wystarczajcej liczby elementw, std naley uy dodatkowych warstw znajdujcych si
na samym kocu kodu, w kontenerze #extraDivs. Shea przypisa w kocu gwny
obraz ta do elementu h1, a tekst css zen Garden do elementu h2.
kod, ktry to realizuje, zosta wyrniony:
h1{
width: 770px;
height: 166px;
margin: 0;
background: #000 url (bg2.gif) top left no-repeat;
}
h2{
width: 224px;
height: 42px;
background: #000 url (bg2.gif) top left no-repeat;
position: absolute;
top: 120px;
margin: 0;
margin-left: 495px;
}
h1 span, h2 span {
display: none;
}

Uwaga
Metodyosadzaniaobrazwizwizaneznimi
problemyomwionesbardziejszczegowo
pod adresem www.stopdesign.com/articles/replace_text.

Nadanie stylu elementom span ukrywa tekst znajdujcy si w kodzie htMl, poniewa tekst ten ma by zastpiony elementami graficznymi, chocia ta metoda uwaana
jest ju za przestarza.

Sztuczkizabsolutnym
pozycjonowaniem
Dziki zastosowaniu absolutnego pozycjonowania mona byo umieci fotografie
w nagwku, lecz przeniesienie ich tam stwarzao dodatkowy problem: uycie tej
techniki utrudnia wyrodkowanie elementw na stronie. aby obej ten problem,
Shea zastosowa uyteczn sztuczk. Umieci wszystkie elementy nadrzdne przy
lewej krawdzi ekranu i ustawi ich szeroko na 100%, co spowodowao ich rozcignicie w poziomie na cay obszar okna przegldarki. Nastpnie wyrodkowa elementy
potomne w tym przypadku elementy span wewntrz elementw nadrzdnych.

88

ROZDZIA 2/pROjektOwAnIe

oto kod, ktry realizuje opisywane czynnoci. Utworzono go przy uwzgldnieniu

rnych bdw przegldarek:
#extraDiv1 {
position: absolutel;
top: 41px;
left: 0;
text-align: center;
width: 100%
}
#extraDiv1 span{
background: transparent url(granville.jpg) top left no-repeat;
display: block;
margin-left: auto;
margin-right: auto;
height: 123px;
width: 770px;
}

Uwaga
wartoparametrupaddingmusibywiksza,
nimogobysiwydawa.
nadaniewartoci100pxparametrowi
padding-rightspowodujeprzesunicieelementuwprawotylkoo50pxodosirodkowej.
poniewaelementjestwyrodkowany,
zwikszanieparametrupaddingpowoduje
zwikszanieszerokocielementu,wzwizku
zczymprzesuwasionrwnomierniewobu
kierunkach.truethatcolumnarCS

Przedstawiony kod sprawdza si, jeli element podrzdny ma by umieszczony idealnie na rodku. jednak co zrobi, gdy projekt wymaga, aby go troch od rodka odsun? Ustawienie wasnoci padding dla elementu podrzdnego zwiksza jego czn
szeroko, odsuwajc go od rodka. Naley pamita przy tym o dwch sprawach: poprzez ustawienie wasnoci padding poszerza si element, ktry jest nastpnie rodkowany. trzeba zatem ustawi warto bdc dwukrotnoci podanego przesunicia. Ustawienie wasnoci padding dla lewej strony powoduje przesunicie elementu
w prawo, a ustawienie jej dla prawej strony powoduje przesunicie elementu w lewo.
zatem jeli chcesz przesun obraz w lewo, naley zmodyfikowa wasno padding
dla prawej krawdzi elementu.

kuglarstwo
Prbujc doczy utworzony nagwek do reszty zawartoci, Shea napotka kolejny
problem. Wczeniej zaplanowa on, e pomidzy kolumnami bdzie biega pionowa
podwjna linia. jednak proste ustawienie powtarzajcego si w pionie ta nie rozwizuje tego problemu. lewa kolumna nie siga wystarczajco daleko, a prawa skada si
z trzech osobnych elementw div (#quickSummary, #preamble i #supportingText).
z braku odpowiedniego pojedynczego elementu Shea nada to wszystkim trzem
warstwom, zakadajc, e bd one miay t sam szeroko i tym samym uo si
idealnie zgodnie w pionie:
#quickSummary, #preamble, #supportingText {
background: transparent url(bg4.gif) top left repeat-y;
margin: 0 0 0 400px;
width: 342px;
}

night drive

89

Warstwy s wyrwnane w pionie wzgldem siebie, ale pojawi si kolejny, nieoczekiwany problem. Pomidzy elementami div wida szczeliny (patrz rySuNeK 2.40).
adnej z warstw nie przypisano okrelonej wartoci marginesw, zatem skd bior
si te szczeliny?

Zlewaniesimarginesw
rySuNeK 2.40. Kopotliwe przerwy pomidzy
krawdziami

Uwaga
wspecyfikacjiCSS2.1zlewaniesimargineswzdefiniowanejestjakoczeniemargineswdwchlubwikszejliczbyprzystajcych
lubzagniedonychprostoktnychniepustych
obszarwbezwasnocipadding ani border,
takabypowstajedenmargines(www.w3.org/
TR/CSS21/box.html#collapsing-margins).

jednym z nieprzyjemnych dziwactw modelu kontenerowego CSS jest wystpowanie zjawiska zlewania si marginesw. Polega ono na tym, e jeli dwa elementy
znajduj si jeden nad drugim i oba maj zdefiniowane niezerowe marginesy, ale
zerowe odstpy, krawdzie itp., czna wysoko obu marginesw bdzie mniejsza
ni ich suma. zatem jeli oba elementy maj marginesy o wysokoci 20 pikseli, to
ich suma bdzie mniejsza ni 40 marginesy te zlej si i otrzymamy wsplny
margines o wysokoci 20 pikseli.
ale co to ma wsplnego ze szczelinami? efekt zlewania dotyczy zarwno elementw
nadrzdnych, jak i podrzdnych. Poniewa warstwy nie maj marginesw pionowych, dolny margines kadej z nich zlewa si z dolnym marginesem podrzdnego
akapitu, a poniewa suma marginesw nie jest zerowa, zlewaj si one i w tym przypadku otrzymujemy warto wynikow 10 pikseli. Margines wystaje na zewntrz
nadrzdnej warstwy (patrz rySuNeK 2.41).
Po zdiagnozowaniu problem mona naprawi: jeli warstwom przypisze si wasnoci padding o niewielkiej wartoci, na przykad 1 piksela, warunek konieczny wystpowania zjawiska zlewania si marginesw nie jest speniony i szczeliny znikaj:
# quickSummary, #preamble, #supportingText {
background: transparent url(bg4.gif) top left repeat-y;
margin: 0 0 0 400px;
padding: 1px 0;
width: 342px;
}

rySuNeK 2.41. marginesy akapitw wystaj

poza zawierajcy je kontener div

90

ROZDZIA 2/pROjektOwAnIe

Czarynaobrazach
Gdy ustalono ju konstrukcj sekcji body i nagwka, czas przenie uwag na rozet
widniejc w prawym grnym rogu projektu. Umieszczenie obrazu zawierajcego
przezroczyste obszary (w tym przypadku efekt cienia) nad innymi obrazami wie
si oglnie z uwzgldnieniem charakterystyki zasanianych elementw. Shea mg
spaszczy projekt rozety i zapisa go w pliku Gif lub jPG razem z fragmentami
fotografii i linii znajdujcych si pod spodem, zachowujc tym samym efekt przezroczystoci (patrz rySuNeK 2.42). Mg take pozby si elementw ta i zapisa
obraz w pliku Gif z przezroczystoci, ale efekt cienia byby osabiony, aby nie rzec
zniweczony (patrz rySuNeK 2.43).

Zamiast tego, poniewa rozeta traktowana jest w tym projekcie jako nieobowizkowa, Shea zdecydowa si uy formatu PNG i oszczdzi sobie zmartwie. W pliku
PNG o 256 stopniach przezroczystoci efekt cienia bdzie zachowany niezalenie do
tego, nad czym znajduje si rozeta. Na rysunkach 2.44 i2.45 wida rozet umieszczon na dwch rnych tach.
Format PNG zostanie bardziej szczegowo omwiony w dalszej czci tej ksiki. W tym miejscu naley tylko zwrci uwag na fakt, e Internet Explorer dla
Windows nie wywietla kanau przezroczystoci w plikach PNG o 24-bitowej gbi
koloru, zatem trzeba ukry przed nim takie pliki. Najprostszym sposobem jest tu
uycie selektora elementu podrzdnego, ktrego przegldarka Internet Explorer dla
Windows nie obsuguje, i udostpnianie obrazu PNG jedynie tym przegldarkom,
ktre mog go wywietli.

Rysunek 2.42. Rozeta

zapisana z penym
tem bez przezroczystoci

Rysunek 2.43.
Rozeta z wycitym
tem zapisana w pliku
GIF o ograniczonej
moliwoci kodowania
przezroczystoci

Rysunek 2.44. Rozeta zapisana jako plik

PNG z przezroczystoci, umieszczona na
biaym tle

Rysunek 2.45. Rozeta

zapisana jako plik PNG
z przezroczystoci,
umieszczona na tle
ztekstur

html>body #extraDiv4 span {

background: transparent url(sea1.png) top right no-repeat;
}

Oczywicie, w przypadku bardziej oficjalnych i powanych projektw internetowych

obsuga wywietlania nawet wzgldnie mao potrzebnych obrazw jest nieodzowna.
Chocia zastosowanie prostszej jednobitowej odmiany przezroczystoci moliwej do
zapisania w formacie GIF wie si z licznymi ograniczeniami, jest ona nadal na tyle
funkcjonalna, e mona j wykorzystywa, jeli dobrze si to zaplanuje. W ogrodzie
Zen zachcamy do eksperymentw, ale Twoi klienci wcale nie musz ich lubi.

Jeden may krok

Kiedy zaczynasz prac, majc do dyspozycji makiet, a nad gow nieprzekraczalny
termin, osignicie celu w postaci gotowej, opartej na arkuszach CSS witryny jest zadaniem wymagajcym nie lada wysiku. Kluczem do sukcesu jest podzielenie caego
projektu na szereg mniejszych zada na przykad walka znagwkiem w projekcie
Night Drive wymagaa wykonania dwch oddzielnych czynnoci.
Znajomo rnych potencjalnych rozwiza z pewnym wyprzedzeniem umoliwia podejmowanie bardziej trafnych decyzji, gdy pojawi si problemy niezalenie od tego, jak si z nimi uporasz. Rozwizaniem moe okaza si zmiana modelu
pozycjonowania, modyfikacja marginesw, zastosowanie okrelonych efektw do
innego elementu itd.

Night drive

91