Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00665 009218 10483542 na godz. na dobę w sumie
Zen stosowania CSS. Źródło oświecenia dla projektantów stron WWW - książka
Zen stosowania CSS. Źródło oświecenia dla projektantów stron WWW - książka
Autor: , Liczba stron: 304
Wydawca: Helion Język publikacji: polski
ISBN: 83-246-0084-1 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> css
Porównaj ceny (książka, ebook, audiobook).

Poznaj niesamowite możliwości technologii CSS

Kaskadowe Arkusze Stylów (CSS) to technologia, która zdobyła już ogromne uznanie wśród projektantów stron WWW. Idea oddzielenia wyglądu strony od treści za pomocą definicji stylów okazała się przebojem -- dzięki mechanizmom CSS witryny WWW stały się bardziej uniwersalne i łatwiejsze w rozbudowie. Kaskadowe Arkusze Stylów, w połączeniu z dobrze napisanym kodem pozwalają na stworzenie zachwycających projektów wizualnych znacznie prościej i szybciej niż przy użyciu języka HTML. Nadal jednak wiele sekretów technologii CSS pozostaje nie odkrytych.

Autor książki 'Zen stosowania CSS. Źródło oświecenia dla projektantów stron WWW' zgromadził w prowadzonej przez siebie witrynie WWW CSS Zen Garden (www.csszengarden.com) projekty stron, których twórcy w mistrzowski sposób opanowali sekrety Kaskadowych Arkuszy Stylów. Czytając tę książkę również masz okazję poznać te tajniki i wykorzystać je w swoich pracach. Znajdziesz w niej szczegółowe omówienie 36 najbardziej inspirujących projektów zamieszczonych w tej witrynie.

Stwórz zachwycające witryny WWW.

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

IDZ DO IDZ DO PRZYK£ADOWY ROZDZIA£ PRZYK£ADOWY ROZDZIA£ SPIS TREŒCI SPIS TREŒCI KATALOG KSI¥¯EK KATALOG KSI¥¯EK KATALOG ONLINE KATALOG ONLINE ZAMÓW DRUKOWANY KATALOG ZAMÓW DRUKOWANY KATALOG TWÓJ KOSZYK TWÓJ KOSZYK DODAJ DO KOSZYKA DODAJ DO KOSZYKA CENNIK I INFORMACJE CENNIK I INFORMACJE ZAMÓW INFORMACJE ZAMÓW INFORMACJE O NOWOŒCIACH O NOWOŒCIACH ZAMÓW CENNIK ZAMÓW CENNIK CZYTELNIA CZYTELNIA FRAGMENTY KSI¥¯EK ONLINE FRAGMENTY KSI¥¯EK ONLINE Wydawnictwo Helion ul. Chopina 6 44-100 Gliwice tel. (32)230-98-63 e-mail: helion@helion.pl Zen stosowania CSS. Źród³o oœwiecenia dla projektantów stron WWW Autorzy: Dave Shea, Molly E. Holzschlag T³umaczenie: Piotr Rajca, Marcin Samodulski ISBN: 83-246-0084-1 Tytu³ orygina³u: The Zen of CSS Design: Visual Enlightenment for the Web Format: 210×235, stron: 304 Poznaj niesamowite mo¿liwoœci technologii CSS • Wykorzystaj sztuczki typograficzne w swojej witrynie • Zastosuj w odpowiedni sposób elementy graficzne • Uwzglêdnij w projektowaniu mo¿liwoœci rozbudowy witryny Kaskadowe Arkusze Stylów (CSS) to technologia, która zdoby³a ju¿ ogromne uznanie wœród projektantów stron WWW. Idea oddzielenia wygl¹du strony od treœci za pomoc¹ definicji stylów okaza³a siê przebojem — dziêki mechanizmom CSS witryny WWW sta³y siê bardziej uniwersalne i ³atwiejsze w rozbudowie. Kaskadowe Arkusze Stylów, w po³¹czeniu z dobrze napisanym kodem pozwalaj¹ na stworzenie zachwycaj¹cych projektów wizualnych znacznie proœciej i szybciej ni¿ przy u¿yciu jêzyka HTML. Nadal jednak wiele sekretów technologii CSS pozostaje nie odkrytych. Autor ksi¹¿ki „Zen stosowania CSS. Źród³o oœwiecenia dla projektantów stron WWW” zgromadzi³ w prowadzonej przez siebie witrynie WWW CSS Zen Garden (www.csszengarden.com) projekty stron, których twórcy w mistrzowski sposób opanowali sekrety Kaskadowych Arkuszy Stylów. Czytaj¹c tê ksi¹¿kê równie¿ masz okazjê poznaæ te tajniki i wykorzystaæ je w swoich pracach. Znajdziesz w niej szczegó³owe omówienie 36 najbardziej inspiruj¹cych projektów zamieszczonych w tej witrynie. • Styl kodu HTML • Projektowanie uk³adu graficznego witryny • Pozycjonowanie elementów strony • Optymalizacja plików graficznych • Odpowiedni dobór czcionek • Efekty specjalne w CSS Stwórz zachwycaj¹ce witryny WWW Spis treści Wprowadzenie rozdział 1: Pokaż źródło rozdział 2: Projektowanie Atlantis Zunflower Springtime viridity Ballade Night Drive rozdział 3: Układ Backyard Entomology White Lily prêt-à-porter CS(S) Monk Not So Minimal rozdział 4: obrazy Japanese Garden Revolution! Deco No Frontiers! Coastal Breeze What Lies Beneath 10 18 54 56 62 68 74 80 86 92 94 100 106 112 118 124 130 132 138 144 150 156 162 Night Drive, strona 86 White Lily, strona 106 Coastal Breeze, strona 156  rozdziaŁ 3 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 rozdział 7: Rekonstrukcja Hedges Radio Zen South of the Border Corporate ZenWorks Open Window mnemonic Myśli na zakończenie Skorowidz 168 170 176 182 188 194 200 206 208 214 220 226 232 238 244 246 252 258 264 270 276 282 291 Oceans Apart, strona 170 Gemination, strona 214 South of the Border, strona 258 LaYout  Rozdział 2 Projekto- wanie ChoCiaż proces projektowania witryn internetowych polega na gwałtownych prze- kształceniach plastycznej materii, pewne podstawowe zasady powinny zostać zachowane. Gdy wybierasz paletę kolorów, myślisz o układzie graficznym, two- rzysz kompozycję z kształtów geometrycznych lub ujednolicasz wszystkie elementy strony, obowiązuje Cię pewien kanon tradycyjnych wartości. Projekty omawiane w tym rozdziale ilustru- ją zagadnienie, które staje się coraz bardziej istotne podczas tworzenia witryn. W jaki sposób efektywnie zarządzać tym procesem? Niezależnie od tego, czy jesteś przyzwyczajony do rozpoczynania pracy od projektów wstępnych w programie adobe Photoshop, szkicowania pomysłów na kartce papieru, tworzenia prototypów w CSS lub pisania kodu od początku, na pewno w tym rozdziale znajdziesz propozycje nowych, użytecznych metod pracy. projektowanie 55 Springtime, strona 68 Night Drive, strona 86 Kevin Davis, projektant www.csszengarden.com/028 Atlantis Minimalizm, jedność i symbolika ProjektoWaNie GrafiCzNe PoleGa na komunikowa- niu pewnych myśli. Udany projekt przekazuje oglądającym informacje, których nie można przekazać samymi słowami. Może on tworzyć pewną atmosferę i wywoływać określone uczucia, emanować nastrojami, powodować reakcję widza. Celem Kevina Davisa było połączenie elementów wizu- alnych i wyobraźni przy wykorzystaniu elementów charakte- rystycznych dla projektów wnętrz przytulnych i nastrojowych kawiarni. Składa się na nie połączenie odpowiednich stolików, baru, farby na ścianach i nastroju. zaczynając od fotografii i palety kolorów, kevin łączył elementy, aż uzyskał cieka- wy i zadowalający efekt. Później połączył projekt graficzny z układem funkcyjnym. 56 ROZDZIAŁ  2 / pROjektOwAnIe Minimalizm to, co natychmiast rzuca się w oczy w trakcie oglądania projektu atlantis, to jego względna prostota, panująca na całej stronie za wyjątkiem precyzyjnego kolażu w nagłówku. Poprzez połączenie elementów fotograficznych z pozornie prostym układem Davis uzyskał niepowtarzalną mieszankę skomplikowanego i prostego. ogród zen tworzony był w czasie, gdy większość projektów opartych na techno- logii CSS uważano za nieatrakcyjne z powodu zbytniego minimalizmu i rażącej kanciastości (patrz rySuNKi 2.1A, 2.1B i 2.1C). W pokazanych tu projektach właści- wie nie ma niczego złego, pod warunkiem, że są wykorzystywane w odpowiednim kontekście i celu. Niechęć do tak rozumianych „typowych” projektów CSS wynika z małego niepo- rozumienia — twórcy tych prac nie byli projektantami-grafikami w tradycyjnym znaczeniu tego terminu — przez to ucierpiała technologia. oczywiście, to był jeden z problemów, które miał rozwiązać ogród zen. atlantis jednak zatacza koło i jest wyraźnym dowodem na to, że słowo „minima- lizm” nie oznacza wcale „mało atrakcyjnych projektów”. Po prostu, gdy oglądasz wiele przykładów wykonanych według tego samego projektu, szybko Cię one znudzą. Podawanie purée ziemniaczanego, pieczonych ziemniaków, ziemniaków z wody i frytek na jeden obiad to lekka przesada. jednak zgrabna kulka purée obok indyka na talerzu dopełnia skromny, lecz jakże smaczny posiłek. Wniosek z tego taki, że proste, minimalistyczne projekty mają swoje miejsce i funk- cję. tak naprawdę projekt powinien być uzależniony od zawartości treściowej, za- tem jeśli zawartość jest wizualnie złożona lub jej poznanie wymaga znacznej uwagi, przeciążanie jej zbędnymi ozdobnikami jest niecelowe. z drugiej strony, naprawdę dobry układ minimalistyczny…ze stworzeniem takiego układu mają problem nawet profesjonaliści. Gdy graficzne elementy układu strony są proste, mocniej przykuwają uwagę oglądającego. W takim układzie każdy użyty element jest bardziej istotny niż w układach złożonych, zatem zdolność przykuwa- nia uwagi odróżnia doskonałe układy od miernych. A B C rySuNKi 2.1A – 2.1C. Przykłady wczesnych mini- malistycznych projektów CSS atlantis 57 W nauce układania poszczególnych elementów może pomóc analiza bardzo mini- malistycznych projektów typu atlantis. jeśli usunie się obraz nagłówka, charakter projektu staje się bardziej oczywisty (rySuNeK 2.2). obok obszaru z właściwą zawar- tością, po lewej stronie znajduje się niewielkie menu. TypogrAfiA tekst w głównej sekcji witryny atlantis jest zauważalnie większy niż tekst menu. te dwie części zostały zróżnicowane w ten sposób, aby podkreślić, że to, co znajduje się po lewej stronie, nie jest tak ważne, jak treść po prawej (rySuNeK 2.3). Podobnie użycie większej czcionki w nagłówku odróżnia go od tekstu w sekcji głównej. te wy- różniki przekazują dodatkowe informacje o hierarchii fragmentów tekstu. typografia to środek przekazu pisanego słowa oparty na pewnej hierarchii, wzorach i rytmie. Dostosowywanie tych cech poprzez zmianę rozmiaru tekstu, odstępów międzyliterowych i międzywyrazowych oraz koloru to potężna metoda komuniko- wania informacji, których nie przekazują słowa. ikonkogrAfiA W menu po lewej stronie Davis obok każdej z nazw projektów wstawił małe ikonki. Ponieważ rozmiar ikonek jest zbliżony do rozmiaru łączy, współgrają one z tekstem i pełnią funkcję nieodwracających uwagi punktorów. ten szczegół odróżnia główne łącza od tych, które znajdują się tuż pod nimi, i sprawia, że banalne menu staje się bardziej interesujące. ikony są uproszczonymi symbolami reprezentującymi pewne obiekty i idee lub prze- kazującymi pewną treść bez konieczności stosowania długich opisów tekstowych. obiekty można ilustrować w sposób dosyć oczywisty, natomiast trudniej za pomocą ikonek wyrażać idee, procesy i czynności. Dobrych ikonek nie trzeba dodatkowo ob- jaśniać, ale są one często niepotrzebnie wizualnie oderwane od rzeczywistości. istotne jest silne i spójne powiązanie ikonki z pewną ideą, aby późniejsza identyfikacja stała się bardziej intuicyjna. LiniA Davis wybrał dwa rodzaje linii, za pomocą których oddziela różne fragmenty projek- tu. linia przerywana otacza dwa akapity nachodzące na obraz z nagłówka, a linia ciągła oddziela nagłówek i stopkę od reszty strony (patrz rySuNeK 2.4). te proste elementy wzbogacają wizualnie stronę bez angażowania świadomej uwagi oglądającego. rySuNeK 2.2. Projekt Atlantis rySuNeK 2.3. Rozmiar tekstu w sekcji body jest prawie dwa razy większy od rozmiaru czcionki w menu rySuNeK 2.4. Ciągłe białe linie oddzielają nagłó- wek od reszty tekstu 58 ROZDZIAŁ  2 / pROjektOwAnIe Poprzez użycie linii można zdefi niować obszary strony, ustalić jej granice i ułatwić odbiorcy właściwe pogrupowanie elementów wizualnych i tekstowych, a także wpro- wadzić dodatkowy wymiar. Niebezpieczeństwo tkwi w nadużywaniu linii — niedo- mknięte prostokąty i zbyt wiele równoległych linii może sugerować obecność siatki i struktury, której tak naprawdę nie ma. oko będzie próbowało znaleźć wzory, które nie istnieją, zatem użycie linii powinno być wyważone i uzasadnione. mARgineSy Poprzez ograniczenie projektu do środkowej kolumny Davis uzyskał maksymalną kontrolę rozłożenia elementów na stronie. Marginesy o zmiennej szerokości po obu stronach przesuwają zawartość na środek okna przeglądarki. Czasami korzystniej jest wypełnić całe okno układem strony, a czasami lepszy okazuje się projekt ograniczony. W obu przypadkach spore marginesy po lewej i po prawej stronie zapobiegają zbyt- niemu stłoczeniu tekstu. Domyślnie większość przeglądarek defi niuje jak najmniej- szy margines wokół strony, co powoduje, że tekst swobodnie zajmuje całe miejsce od lewej do prawej strony i jest rzadko zawijany. jest to niekorzystne w sensie estetycznym. tekst musi „oddychać” i potrzebuje wol- nego miejsca, ale brak marginesów spowoduje, że zleje się on z zawartością ekranu znajdują się poza oknem przeglądarki. Wartości domyślne marginesów nie są odpo- wiednie w tej sytuacji, zatem na projektancie ciąży odpowiedzialność za rozwiązanie tego problemu. W przypadku projektu minimalistycznego, w którym marginesy są jednym z nielicz- nych elementów kompozycji, ich prawidłowe ustawienie ma ogromne znaczenie. Duże marginesy kształtują scenę, na której w oknie przeglądarki wystąpi tekst, a także ułatwiają użytkownikowi koncentrację na treści. jedność i symbolika atlantis jest doskonałym przykładem tworzenia przy użyciu elementów kompozycji specyfi cznego nastroju, zamierzonego przez autora. Grecki fi lozof, Platon, twierdził, że atlantyda to zaginiona wyspa, którą wieki temu pokryło morze. Dotknięty zę- bem czasu odcisk muszli oraz klasyczne fi gurki z kamienia umieszczone w nagłówku w sposób oczywisty kojarzą się z tą legendą, a użyte barwy — nasycony błękit oraz czerń — przywodzą na myśl toń oceanu, do której dociera jeszcze światło. Wybierając wcześniej odpowiednie zdjęcia i kolor, Davis zadbał o to, aby wygląd strony pozostał w zgodzie z inspiracją. Uwaga Dla większości projektantów niedopuszczalne  domyślne wartości marginesów nie stanowią  problemu, ponieważ i tak te marginesy zmo- dyfikują. jednak dobry punkt wyjścia byłby  korzystny dla tych wszystkich, którzy projek- tantami nie są, a także dla początkujących.  nikt nie traci, jeśli określona technologia jest  bardziej dopracowana i domyślne marginesy  są lepiej ustawione — na przykład standar- dowa drukarka biurowa drukuje ze sporym  zapasem marginesów, aby nie powstawał  tego rodzaju bałagan. atlantis 59 SPójność Barwy muszli zostały zmodyfikowane tak, aby pasowała ona do kolażu w tle. W pro- gramie adobe Photoshop zmiękczono także jej krawędzie, dzięki czemu jeszcze bardziej zlała się z tłem. jednak Davis nie przesunął wszystkich odcieni w kierunku błękitu i pozostawił tym samym mile widziany kontrast tworzony przez kolor oceanu i rdzawy wapienny osad (patrz rySuNeK 2.5). konsekwentne użycie błękitu w całym projekcie przeciążyłoby klimat kompozycji (patrz rySuNeK 2.6). elementy kompozycji mogą być różne, lecz ogólny cel zachowania spójności jest bardzo istotny. zamiast monotonnych schematów kolorystycznych można zasto- sować bardziej subtelne metody zachowywania spójnego wyglądu projektu — na- śladowanie dominujących kształtów przy użyciu elementów graficznych i zdjęcio- wych oraz dopasowywanie proporcji i rozmiarów czcionek, a także otaczających je krzywych i linii. W projekcie atlantis w nagłówku występują białe okręgi kreślone ciągłymi krzywymi nałożone na muszlę i kolaż. Bez kontekstu takie okręgi nic specjalnego nie znaczą, lecz na błękitnym tle przypominają fale. ich kształt i rozmiar jest także bardzo zbliżo- ny do okręgów występujących na muszli, co silnie łączy te dwie grupy elementów. RePRezentACjA ta metoda reprezentacji koncepcji projektowych — użycie prostych elementów kom- pozycyjnych wyrażających bardziej złożone idee i zamysły — ma duży potencjał, jeśli chodzi o wyrażanie subtelnej głębi. Białych linii mogłeś nawet wcale nie zauważyć, dopóki o nich nie wspomnieliśmy, a teraz stały się bardzo widoczne. Symbolika ukryta w projekcie atlantis nie kończy się na białych liniach. Bardziej oczywiste są obrazy w nagłówku. atlantyda dawnych czasów — bogate i prężne im- perium kamiennych kolumn i zdobionych posągów — została umieszczona z tyłu, za centralną i bardziej wyróżniającą się atlantydą dzisiejszą — zniszczoną, pokrytą mor- skim osadem, rozpadającą się pod wodą. imperium za mgłą, dawno mające za sobą czasy rozkwitu, opisywane jest przez związki pomiędzy dwiema połowami projektu. ten prosty, aczkolwiek niebanalny układ tworzy opowieść i pogłębia znaczenia, które będzie odkrywał oglądający. Dla wytrawnego użytkownika internetu użycie muszli jako motywu obrazu nagłówka będzie miało dodatkowe znaczenie: wybór morskiej muszli przez Davisa jest hołdem dla klasycznej już strony prezentującej technologię CSS. Strona ta nosi nazwę Com- plexspiral i została stworzona przez erika Meyera. Można ją znaleźć pod adresem www.meyerweb.com/eric/css/edge/compelxspiral/demo.html (rySuNeK 2.7). rySuNeK 2.5. odcienie koloru pomarańczowego widoczne na muszli kontrastują z resztą zawarto- ści witryny rySuNeK 2.6. niebieski i spójny kolorystycznie nagłówek teoretycznie lepiej pasuje do konwen- cji, ale projektowi zabrakłoby wówczas elementu kontrastu 60 ROZDZIAŁ  2 / pROjektOwAnIe Szczególne prawa projektowania Projektowanie pełni w komunikacji ważną rolę — jasny i spójny przekaz całej witryny to scena dobrego spektaklu, w którym użytkownicy są widzami. Pewne witryny wy- magają jednak, by nie przykładać tyle wagi do ergonomii, a w sytuacji, gdy centralną rolę pełnią zawartość i funkcje, projektant powinien stać z boku i proponować proste elementy graficzne oraz minimalistyczny układ. W innych przypadkach projekt musi w sposób bardziej wyrazisty przekazywać in- formacje — często wiele jednocześnie. Możliwe, że po pierwszej analizie projektu pominiesz jego subtelne aspekty zamierzone przez projektanta. zdolność interpre- tacji wyostrza się wraz z doświadczeniem i wiedzą oceniającego, zatem uchwycenie pełnego znaczenia dzieła, jakim jest atlantis, niezaprzeczalnie wymaga zrozumienia intencji projektanta. obowiązkiem projektanta jest dostarczenie jasnego przekazu, który zrozumie jak naj- większe grono odbiorców, w sposób unikatowy i przekonujący. istnieje wiele moż- liwości i okazji podczepienia dodatkowych informacji pod główny przekaz, co udo- wodnił między innymi kevin Davis. rySuNeK 2.7. Witryna Complexspiral, do której odnosi się muszla w nagłówku projektu Atlantis atlantis 61 radu Darvas, projektant www.csszengarden.com/026 Zunflower Zabawa światłem, cieniem,  kształtem i przestrzenią GDy SłoNeCzNiki Na BalkoNie przykuły jego uwagę, radu Darvas zaczął robić zdjęcia, na podstawie których po- wstały pomysły będące trzonem projektu Zunflower. zabawa słonecznikami w programie adobe Photoshop pomogła mu stworzyć koncepcję witryny, którą zgłosił do ogrodu zen. jednym z zagadnień, które chciał rozwiązać, było takie ukształtowanie witryny, by nie sprawiała ona wrażenia po- dzielonej na prostokąty. jednak po zagłębieniu się w projekt spostrzegł, że można tak ustawić położenie kolumn, aby utworzyć coś w rodzaju nakładek, co wywołuje dodatkowe wrażenie gry światła i cienia, kształtu i przestrzeni. z tego powstaje energetyczny układ zunflower. 62 ROZDZIAŁ  2 / pROjektOwAnIe Odnaleźć światło Gdziekolwiek byś teraz nie siedział, do czytania wykorzystujesz przynajmniej jedno źródło światła. Unieś na chwilę wzrok znad książki. Skąd pada najwięcej światła? W jaki sposób układa się ono na otaczających Cię przedmiotach? Gdzie są cienie? Światłocienie wykorzystywane są przez grafi ków do uzyskiwania pewnego reali- zmu prezentowanej sceny, do stworzenia odpowiedniej atmosfery i do wzbogacenia dzieła poprzez wyróżnienie pierwszego planu. jeśli spojrzymy wstecz, na poprzednią dekadę projektowania witryn internetowych, wskazać możemy wiele zastosowań światła. tworzenie gradientów (patrz rySu- NeK 2.8), ukosowanych krawędzi (patrz rySuNeK 2.9), efektu cienia rzucanego przez elementy kompozycji (patrz rySuNeK 2.10) to tylko niektóre przykłady wy- korzystania światła w internecie. Niestety, niekiedy światło wymyka się spod kontroli niezbyt doświadczonym pro- jektantom. trendy wpływają także na technikę projektowania — wiele osób nad- używa efektów związanych ze światłem. Nie przeszkadza im to, że ich projekty wy- glądają nierealistycznie, a źródła światła pozostają ze sobą w wyraźnym konfl ikcie (patrz rySuNeK 2.11). Zatrzymać cień Na stronie zunfl ower widać poprawne użycie świata do tworzenia cieni. Chociaż zde- cydowane gradienty i mocne ukosowania nie są już modne w dziedzinie projektowania użytkowych witryn internetowych, cienie nadal są używane, z kilku powodów: o wzbogacają stronę, o tworzą wrażenie trzeciego wymiaru, zarówno jeśli chodzi o obiekt, jak i o stronę, o można je łatwo uzyskać, posługując się programami grafi cznymi. rySuNeK 2.8. Wypełnienia gradientowe à la rok 1995. dithering i smużenie występują, gdy poziom kompresji jest zbyt wysoki — nie wygląda to zbyt profesjonalnie rySuNeK 2.9. Przykład tekstu z ukosowanymi krawędziami. ten rodzaj efektu graficznego do- minował na stronach tworzonych we wczesnych latach 90. rySuNeK 2.10. Klasyczny efekt cienia nałożony na zdjęcie rySuNeK 2.11. niepoprawne ustawienie źródeł rySuNeK 2.11. niepoprawne ustawienie źródeł światła — zwróć uwagę na różne kierunki pada- nia cienia w przypadku każdego z tych obiektów zunflower 63 wskazówka jeśli wykorzystujesz efekty warstw w progra- mie Adobe photoshop, upewnij się, że opcja  Use Global Angle (Użyj światła ogólnego) jest zaznaczona. w ten sposób kierunek padania  światła będzie zawsze taki sam. rySuNeK 2.12. Poprawny efekt cienia rySuNeK 2.13. Realistyczny efekt świetlny aby uniknąć problemów, które mogą powstać, gdy wykorzystywany jest efekt cienia (na przykład niezgodnych kierunków padania światła), zapoznaj się z następującymi wskazówkami: o zwracaj szczególną uwagę na jasność cieni — sprawdź, czy nasycenie cienia zga- dza się z logicznym dystansem wzrokowym. Ciemne cienie sprawiają, że obiekt wydaje się znajdować bliżej tła, jaśniejsze cienie „odsuwają” obiekt od tła. o Szerokość i wysokość cienia także wpływa na postrzeganie dystansu obiektu od tła. Wąski cień daje wrażenie niewielkiego oddalenia obiektu od tła, natomiast szersze cienie wizualnie oddalają obiekty. o Naśladuj światło w sposób realistyczny. jeśli na stronie znajdują się dwa obiekty, cienie przez nie rzucane powinny być spójne. Na przykład pierwsze dwa nachodzące na siebie prostokąty tworzące środkową ko- lumnę projektu zunfl ower rzucają takie same cienie, padające z lewej strony (patrz rySuNeK 2.12). także efekt zanikania zastosowany na prawym końcu paska wzmacnia efekt gry świat- ła w projekcie. Światło wydaje się uciekać i chować część obrazu przed wzrokiem patrzącego (patrz rySuNeK 2.13). nadawanie kształtu Podobnie jak kolory, różne kształty oddziałują na ludzi w różny sposób. z każdym z nich związane są pewne cechy, które można wykorzystywać w projekcie w celu wywołania określonych odczuć u widzów. od chwili powstania pierwszych piktogramów na ścianach grot ludzie wykorzystują znaczenie kształtów. znajdujemy je wszędzie — są częścią naszego świata i dotyczą wszystkiego, czym zajmują się ludzie. Niezależnie od kontekstu ich użycia — od zapisu wzorów matematycznych, poprzez tworzenie akcentów architektonicznych na budynkach, do wyrażania przynależności religijnej i plemiennej (krzyż Święty, Gwiazda Dawida, sztuka tatuażu) — kształty są częścią natury, a ich odtwarzanie lub nadawanie bywa środkiem wyrażania własnego „ja” projektanta. W projekcie zunfl ower największe znaczenie ma zdjęcie kwiatu. Przyciąga ono uwa- gę swoim kolorem i zmusza do zastanowienia się nad tym, co wyraża jego kształt. 64 ROZDZIAŁ  2 / pROjektOwAnIe KSztAłty PodStAWoWe okręgi i koła najczęściej kojarzone są z kobiecością, ciepłem, komfortem, zmysło- wością, miłością oraz innymi podobnymi pojęciami. okręgi i koła (lub łuki) wyko- rzystywane są często w celu wyrażenia pojęcia wspólnoty, całości, wysiłku, ruchu i bezpieczeństwa. Wiele projektów witryn internetowych zawierających treść skiero- waną do kobiet, związanych z różnymi społecznościami, traktujących o życiu ducho- wym lub o romansach opartych jest na okręgach, które wzmacniają ów przekaz. trójkąty uważane są za symbole męskie, wyrażające takie cechy, jak siła, agresja, dynamiczny ruch. kierunek wskazywany przez trójkąt ma wpływ na znaczenie tego symbolu. oko zwykle zatrzymuje się na dominującym wierzchołku. jeżeli trójkąt skierowany jest w górę, sugeruje, że ruch i natarcie skierowane są właśnie tam. je- żeli natomiast skierowany jest przeciwnie, może to budzić negatywne skojarzenia, na przykład bierność i bezradność. oczywiście, prostokąty (w tym kwadraty) także mają pewne symboliczne powiąza- nia. Prostokąty oznaczają siłę i solidne podstawy, prawdopodobnie z powodu zwar- tości ich formy i wrażenia masy. elementy graficzne zawierające motywy prostoką- tów mogą sugerować istnienie porządku, logiki oraz równowagi i dawać wrażenie bezpieczeństwa. łąCzenie KSztAłtóW W Celu oSiągnięCiA mAKSymAlnej SKuteCznośCi PRzeKAzu jeśli przeanalizujemy samo zdjęcie słonecznika, stwierdzimy obecność trójkątów i okrę- gów. oczywiście, ich pojawienie się wynika z natury słonecznika, lecz Darvas wzbogacił obraz w Photoshopie, wydobywając jego kolor i bardziej eksponując kształt kwiatu. W rezultacie otrzymał bardzo zmysłowe zdjęcie kwiatu o cechach zarówno damskich, jak i męskich. zdjęcie to wywołuje trwałe wrażenie (patrz rySuNeK 2.14). W projekcie zunflower mocne prostokąty równoważą miękkość i zmysłowość kwia- tu i stanowią podstawę układu (patrz rySuNeK 2.15). kształty można łączyć w celu osiągnięcia mocniejszego przekazu. Po wprowadzeniu koloru i światła otrzymujemy bardzo interesujące efekty. kompozycja umieszczona w widocznym miejscu i utrzy- mana w rozsądnym rozmiarze rzeczywiście silnie oddziałuje. potrzeba przestrzeni Podobnie jak w przypadku barw, światła, cienia i kształtu, przestrzeń ma bardzo cie- kawe psychologiczne, archetypiczne znaczenie, które przez wieki wykorzystywali ar- tyści, aby wywołać reakcje oglądających. rySuNeK 2.14. Bliższe spojrzenie na „słonecz- nik”, czyli kombinację trójkątów i łuków rySuNeK 2.15. Prostokąty pomagają zrównowa- żyć kompozycję zunflower 65 Poprawne użycie przestrzeni podczas projektowania wizualnego służy wielu celom — przestrzeń pomaga skierować oko na określony obszar na stronie, łączy tekst i obrazy i daje oczom odpocząć. odpowiednia ilość wolnej przestrzeni zwiększa czy- telność i pozwala naszym zmysłom przeanalizować prezentowane informacje. PSyChologiCzne i SoCjologiCzne znACzenie Przestrzeń ma różne znaczenia psychologiczne i socjologiczne. Na polu psychologii warto rozważyć następujące zagadnienia: o Przestrzeń i gospodarka są ze sobą powiązane. ilość przestrzeni i sposób jej wy- korzystania może być dla jej odbiorcy ważnym sygnałem. Projekty zawierają- ce wiele ściśniętych elementów odbierane są jako mniej eleganckie i gustowne, podczas gdy wykorzystanie przestrzeni w bardziej zrównoważony sposób otwie- ra drogę do przekazu wyższej klasy. o Przestrzeń to nie tylko nieobecność fizyczna (w rzeczy samej przestrzeń pomaga definiować obiekty). zatłoczone układy graficzne sygnalizują potrzebę oszczędza- nia miejsca i mogą wywoływać u oglądających swoiste napięcie, natomiast użytko- wanie przestrzeni z zachowaniem odpowiednich proporcji, ale jednocześnie eks- pansywnie, sprawia, że przekaz jest o wiele bardziej wyrafinowany i swobodny. o Postrzeganie przestrzeni uwarunkowane jest kulturowo. Podobnie jak w przypad- ku percepcji kolorów i interpretacji kształtów, wpływ może mieć tu doświadczenie i zaplecze kulturowe oglądającego. Sposoby postrzegania przestrzeni przez osoby z różnych środowisk niekiedy bardzo się różnią. W niektórych kręgach kulturo- wych lub nawet poszczególnych państwach zbliżenie własnej twarzy do twarzy drugiej osoby to normalny sposób rozmowy i kontaktu. W innych natomiast, na przykład w Stanach zjednoczonych, osobista przestrzeń jest zwyczajowo większa. jeżeli te zagadnienia przeniesiesz na grunt projektowania, zauważysz, że wolna prze- strzeń nie jest rezultatem tego, czego nie zamieściłeś na stronie, lecz zamierzonym zabiegiem projektowym. PRzeStRzeń dodAtniA i ujemnA rolę przestrzeni w projekcie znacznie łatwiej zrozumieć, gdy wyjaśnimy, na czym polegają różnice pomiędzy przestrzenią dodatnią a ujemną. Przestrzeń dodatnia zajmowana jest przez obiekty tworzące projekt. Przestrzeń ujemna zawiera pozostałe obiekty (na przykład tło). jednak oddzielenie przestrzeni ujemnej od dodatniej nie jest możliwe — to nierozerwalny i zawsze występujący związek. 66 ROZDZIAŁ  2 / pROjektOwAnIe Przestrzeń ujemna pomaga określić dodatnią, a krawędzie obiektów definiują począ- tek przestrzeni ujemnej, która także ma kształt (patrz rySuNeK 2.16). profesjonalne wykończenie zrozumienie technik operowania światłem może pomóc w tworzeniu efektów cie- nia oraz innych efektów z tym związanych. rolę kształtu w projektowaniu warto przeanalizować bardziej szczegółowo, zarówno w dziedzinie ogólnego projektowania graficznego, jak i w określonych dziedzinach bardziej określonych, takich jak na przy- kład projektowanie logotypów i ikon. W końcu wyczucie przestrzeni i sposób mani- pulowania nią wraz z szerszym zrozumieniem jej roli pomoże Ci przekazać jaśniejszą i wyraźniejszą wiadomość odwiedzającym. Dzięki władzy nad światłem, przestrzenią oraz kształtem wzbogacisz projekt tak ko- rzystnie, jak stało się to w przypadku układu zunflower. rySuNeK 2.16. gdy przestrzeń ma kolor czarny, lepiej widać, jak definiuje krawędzie obiektu i z jakich kształtów się składa zunflower 67 Boér Attila, projektant www.csszengarden.com/083 Springtime wywoływanie emocji przy użyciu koloru Po ChłoDNej ziMie przepełnionej monotonią Boér Attila obudził się pierwszego pogodnego, słonecznego dnia wiosny i barwy przyrody podniosły go na duchu, tchnęły weń energię i radość. to przejście od zimy do wiosny zainspirowało attilę i jego projekty szczególnie w kwestii koloru. od dawna wiadomo, że kolor wpływa na ludzkie emocje i nastrój. Dlatego na przykład czerwony definiujemy jako gorący i energetyczny. łączymy go z ogniem lub barwą czer- wonych papryczek. Później te skojarzenia przenosimy do dziedziny projektowania — na przykład do projektowania opakowań naturalnych produktów wykorzystujemy kolory ekologiczne, czyli brązy i zgniłe zielenie. W projekcie Springtime monotonne kolory zimy spo- tykają się z kolorami rozwijającej się wiosny, co w rezultacie daje palety barw, których nie można nazwać ani zimnymi, ani gorącymi. Wyrażają one raczej ciepło i harmonię, wywo- łując u oglądającego poczucie ukojenia. 68 ROZDZIAŁ  2 / pROjektOwAnIe wpływ koloru jako projektant szukający możliwości przekazania pewnych informacji widowni uświadomisz sobie, że zrozumienie psychologicznych efektów, znaczeń kulturowych oraz preferencji kolorystycznych ze względu na płeć jest tak samo ważne, jak zagad- nienia bardziej techniczne. WySyłAnie Czytelnego PRzeKAzu Chociaż sposób wyrażania treści poprzez użycie słów, układu tekstu i obrazów jest często wystarczający, kolor stanowi niezwykle istotny element komunikacji wizual- nej. Doświadczony projektant wie, jakich kolorów używać adekwatnie do treści prze- kazu i jak to robić, aby dotrzeć do docelowych odbiorców. kolor może w równym stopniu przyciągać oko, jak obraz czy tekst, a czasem nawet bardziej. jeśli dostaniesz zlecenie stworzenia witryny internetowej dla grupy metalowej, użycie jasnych kolorów, takich jak żółty i różowy na białym tle, będzie kłócić się z treścią przekazu. Muzyka metalowa kojarzy się z ciemnymi barwami. W takim przypadku w projekcie można użyć jasnych kolorów, ale najbardziej czytelną treść dotyczącą ze- społu można przekazać przy zastosowaniu ciemnych, ciężkich barw i odcieni, które zwykle kojarzone są z tym gatunkiem muzyki. analogicznie podczas tworzenia witryny klasycznego kwartetu użycie bardzo ciem- nych i ponurych barw nie podkreśli wyrafi nowania i lekkości muzyki tego gatunku. Wybór kolorów odpowiadających przedmiotowi opisu i treści przekazu jest newral- gicznym składnikiem efektywnego projektu. KoloRy A PSyChiKA CzłoWieKA Wpływ kolorów na emocje ludzi zawsze fascynował badaczy. Wpływ ten opisywano jako złożony związek uwzględniający wiele czynników. jeśli ktoś jest niewidomy, ten temat można po prostu pominąć. osoby z zaburzeniami percepcji koloru po prostu nie będą w pełni korzystać z tego, co przygotował projek- tant. Średnio 1 na 12 mieszkańców ameryki Północnej cierpi z powodu najszerzej rozpowszechnionej formy ślepoty na kolory — daltonizmu (dyschromii, niemożności odróżnienia od siebie dwóch kolorów, najczęściej czerwonego od zielonego). Podczas dobierania kolorów witryny warto o tym pamiętać. Uwaga Oczywiście, przewrotne użycie odwrotnych  niż spodziewane kolorów może prowadzić  do powstania konfliktu, ale także może  stanowić interesujące podejście do projektu  i dać doskonałe rezultaty. jednak podejmowa- nie tego rodzaju decyzji wymaga wielu prób  i testów. trzeba zyskać pewność, że wybrane  kolory sprawdzają się. Sztuką jest taki dobór  kolorów, aby powodowały one zamierzoną  reakcję u oglądających. springtiMe 69 rySuNeK 2.17. Paleta barw użytych w projekcie Springtime — zawiera kilka odcieni zieleni, deli- katny odcień błękitu i bieli odcień koloru może zmienić jego wagę. inne uczucia wywołuje kolor jasnozielony, a inne zieleń khaki. Podobnie postrzeganie koloru można modyfikować, wprowa- dzając teksturę. W tABeli 2.1 umieszczono popularne kolory i opisano ich związki skojarzeniowe. tABelA 2.1. psychologiczne związki skojarzeniowe popularnych kolorów Kolor Skojarzenie Czerwony moc, energia, miłość, pasja, agresja, niebezpieczeństwo Niebieski Zielony zaufanie, konserwatyzm, bezpieczeństwo, czystość, smutek, porządek natura, ziemia, zdrowie, zazdrość, odnowienie Pomarańczowy radość, szczęście Żółty Fioletowy Brązowy optymizm, nadzieja, filozofia, tchórzostwo władza, tajemnica, religia niezawodność, komfort, wytrzymałość, ziemia Szary/Srebrny intelekt, futuryzm, skromność, smutek, przemijanie, elegancja Czarny Biały moc, seksualizm, wyrafinowanie, tajemnica, strach, nieszczęście, śmierć czystość, schludność, precyzja, niewinność, sterylność, śmierć zapewne zauważyłeś, że niektóre skojarzenia są wspólne dla kilku kolorów, a niektóre sprzeczne, na przykład w przypadku czerni i bieli. Czerwony wyraża zarówno pasję, jak i niebezpieczeństwo (być może te dwa pojęcia nie są aż tak odległe). Na zbieżność skojarzeń wpływa wiele czynników — kulturowych, społecznych, biologicznych. W przypadku projektu Springtime odcienie zieleni są miękkie, przyjemne i kojarzą się z trawą i liśćmi. Dopełnienie całości delikatnymi akcentami niebieskiego rozszerza naturalny wyraz układu (patrz rySuNeK 2.17). 70 ROZDZIAŁ  2 / pROjektOwAnIe KoloR, KultuRA i Płeć attila jest Węgrem. Czy kulturowe korzenie artysty i środowisko, w którym żyje, mają wpływ na decyzje projektowe i percepcję kolorów? eksperci potwierdziliby, że tak jest w istocie. Podobnie płeć i zaplecze kulturowe odbiorcy projektu Springtime mają jakiś wpływ na percepcję. kultura i płeć rozszerzają i komplikują podstawowe reakcje na kolor oraz skojarzenia omawiane w poprzednim punkcie. W tABeli 2.2 omówiono niektóre ze skojarzeń i znaczeń, jakie mają wybrane kolory w zależności od kultury i płci. jak można się szybko zorientować — dobór kolorów na tak międzynarodowym forum, jakim jest internet, musi być bardzo staranny. tABelA 2.2. percepcja kolorów w zależności od kręgów kulturowych i płci Kolor Czerwony Niebieski Zielony Pomarańczowy Żółty Fioletowy Brązowy Czarny Biały Wpływ W Chinach symbol szczęścia. W zestawieniu z bielą staje się bardziej intensywny. Więcej kobiet woli czerwony od niebieskiego. W wielu krajach Wschodu symbol nieśmiertelności, a w kulturze żydowskiej symbol świętości. W hinduizmie kolor niebieski symbolizuje Krisznę. Poważany na całym świecie, stąd uważa się go za kolor globalnie bezpieczny. Mężczyźni zwykle wolą niebieski od czerwonego. W Stanach Zjednoczonych wiązany z pieniędzmi, w innych krajach zaś niekoniecznie. Zielony ma silne emocjonalne skojarzenia w Irlandii, ponieważ jest kolorem tamtejszych katolickich nacjonalistów. Kobiety potrafi ą rozróżnić więcej odcieni zielonego niż mężczyźni. W Stanach Zjednoczonych w dziedzinie projektowania opakowań tradycją stało się używanie pomarańczowego koloru do oznaczania tanich produktów. Należy o tym pamiętać, jeśli wykorzystuje się ten kolor do projektowania witryn biznesowych. Pomarańczowy ma także wyraźne znaczenie dla Irlandczyków, ponieważ jest kolorem protestantów. Mężczyźni wolą pomarańczowy od żółtego. Święty cesarski kolor w kulturach azjatyckich. Kobiety wolą żółty od pomarańczowego i kojarzą go z ciepłem oraz optymizmem. W Europie kolor fi oletowy związany jest z żałobą. Kojarzony jest także z nowymi i alternatywnymi religiami, stąd może być traktowany jako kontrowersyjny. Fioletowy stosunkowo rzadko występuje w naturze; ma go kilka gatunków kwiatów i owoców oraz niektóre ryby słonowodne. Kolor neutralny, zarówno w sensie kulturowym, jak i płciowym. Kolor żałoby i barwa śmierci w wielu krajach cywilizacji zachodniej, a także w innych. Kolor żałoby i barwa śmierci w wielu kulturach azjatyckich. W wielu społecznościach zachodnich kolor czystości. Uwaga więcej informacji i faktów dotyczących teorii  koloru, a także wyniki rozmaitych badań, ar- tykuły, książki znajdziesz w witrynie profesora  j.L. Mortona, Colorcom (www.colorcom.com).  Drugą wspaniałą witryną poświęconą kolorom  jest Causes of Color (http://www.webexhibits. org/causesofcolor).  springtiMe 71 Uwaga przed wdrożeniem projektu dobrze jest  stworzyć kilka palet testowych. Można to  łatwo zrobić w programie Adobe photoshop  (rysunek 2.18). Stwórz pusty dokument i przy  użyciu narzędzia kroplomierza dodawaj kolory  do paska, sprawdzając, jak do siebie wzajem- nie pasują i jak się łączą. następnie możesz  przygotować projekt testowy i przypisać mu  wybrane kolory za pomocą CSS. technologia CSS jest pomocna w fazie  tworzenia prototypu projektu — można  utworzyć kilka arkuszy stylów odpowiada- jących każdej palecie testowej i przypisać  odpowiednią gamę kolorów przygotowane- mu dokumentowi testowemu. Możesz także  włączyć tę czynność do studium ergonomii,  przedstawiając badanym podmiotom różne  zestawy barw i zbierając ich opinie. rySuNeK 2.18. tworzenie palety kolorów w programie Photoshop rySuNeK 2.19. ustalanie wartości RgB w progra- mie Photoshop 72 ROZDZIAŁ  2 / pROjektOwAnIe palety kolorów do stosowania  w witrynach internetowych Podczas tworzenia palet na potrzeby własnych projektów powinieneś brać pod uwagę omawiane w tej części rozdziału kwestie. aby stworzyć odpowiednie palety, oprócz świadomości treści, jakie chcesz przekazywać, musisz poznać także oczeki- wania oglądających. PRzyjRzyj Się SWojej WidoWni złote prawo komunikacji brzmi: „Poznaj odbiorców przekazu”. Ponieważ dla per- cepcji koloru znaczenie ma psychika człowieka, płeć i zaplecze kulturowe, musisz poznać i zrozumieć grupę docelową projektu. W niektórych przypadkach skojarze- nia kolorystyczne są tak szerokie, że spełniają wymagania wszystkich odbiorców. ta- kie są projekty prezentujące dużo barw niebieskich, brązów lub — jak w przypadku Springtime — zieleni. ekspert w dziedzinie kolorów, j.l. Morton, o którego witrynie wspomnieliśmy już wcześniej, sugeruje, aby projektanci trzymali się jak najbliżej spodziewanych sko- jarzeń. jeśli witryna przeznaczona jest dla dzieci, użycie kolorów symbolizujących radość jest bardzo wskazane. jeśli masz zamiar zaprezentować elegancję, w Stanach zjednoczonych najlepiej użyć koloru czarnego i srebrnego. jeśli zwracasz się do mężczyzn, w większości przypadków odpowiedni będzie niebieski. jeśli natomiast przekaz kierowany jest do kobiet, czerwień i róż wydają się bardziej odpowiednie. jeśli projektujesz witrynę, która w jakiś sposób wiąże się z naturą, racjonalne staje się użycie barw zielonych, niebieskich i brązowych. Możliwości stosowania  koloru w CSS Na szczęście technologia CSS oferuje wiele możliwości w zakresie określania kolo- rów. Można stosować dowolną z następujących notacji: o Nazwy kolorów. istnieje 17 nazw, których można używać w technologii CSS: black (czarny), silver (srebrny), gray (szary), white (biały), maroon (turkusowy), red (czerwony), purple (liliowy), fuchsia (fuksja), green (zielony), lime (limetko- wy), olive (oliwkowy), yellow (żółty), navy (granatowy), blue (niebieski), teal, aqua i orange (pomarańczowy). Przykładowy zapis: Color: orange; o Wartości RGB (składniki koloru w postaci liczb). Przy określaniu koloru możesz użyć trójki wartości liczbowych. Wartości te można ustalić w programie Photoshop (patrz rySuNeK 2.19) lub w innym programie do obróbki obrazów: Color: RGB(51,153,204); o Wartości RGB (procenty). Wystarczy połączyć procentowy udział każdej składowej — czerwonej, zielonej i niebieskiej — aby otrzymać pożądany kolor, w tym przypadku fi olet. Color: RGB(93 , 51 , 93 ); o Wartości szesnastkowe. Są to sześciocyfrowe wartości szesnastkowe, które można odczytać w Photoshopie (patrz rySuNeK 2.20), jak również w wielu źród- łach dostępnych w internecie. Wartości te składają się zarówno z cyfr, jak i z liter. każda para znaków odpowiada jednej składowej rGB. Szesnastkowy system opi- su koloru wykorzystywany jest w internecie od bardzo dawna, zatem większość czytelników zna ten zapis: Color: #0000FF; o Szesnastkowe wartości skrócone. Wartości skrócone mogą być stosowane tylko wówczas, gdy wartości z danej pary są równe. Na przykład w przypadku wartości #FF6699 można użyć notacji skróconej, ale w przypadku wartości #808080 — już nie. Powyższy przykład reprezentujący kolor niebieski spełnia opisywane wymagania, zatem można użyć następującego zapisu CSS: Color: #00F; o Kolory systemowe. Nazwy kolorów systemowych to zestaw słów kluczowych dozwolonych w specyfi kacji CSS 2.1, które dają projektantowi możliwość użycia kolorów zdefi niowanych na komputerze użytkownika. Na przykład: Color: WindowText; barwne wnioski Niezależnie od tego, czy projektujesz z powodów osobistych, czy zawodowych, pracę najlepiej zacząć od zrozumienia przekazywanej treści i jej odbiorców. Dysponując taką wiedzą, będziesz dokonywał trafniejszych wyborów barwy, wspomagających proces przekazywania informacji. Projekt Springtime to doskonały przykład zastosowania kolorów w projekcie w ideal- nej zgodzie z celami, które projektant chciał osiągnąć. rySuNeK 2.20. użycie palety wyboru kolorów w programie Photoshop do odczytywania warto- ści szesnastkowych danego koloru Uwaga więcej informacji na temat słów kluczowych  reprezentujących kolory systemowe znajduje  się pod adresem www.w3.org/TR/CSS21/ ui.html#system-colors. pamiętaj, że te kolory  nie będą częścią modułu kolorów w specyfi- kacji CSS 3.0. Uwaga wiele osób nadal projektuje witryny przy uży- ciu palety web-safe, ale ponieważ większość  dzisiejszych komputerów może wyświetlać  miliony kolorów, trzymanie się tej zasady nie  jest uzasadnione, chyba że wymaga tego kon- kretny przypadek. Użytkownicy, którzy znają  paletę web-safe, od razu stwierdzą, że kolory  w projekcie Springtime w istotny sposób wy- kraczają poza grupę 256 barw z tej palety. springtiMe 73 laura MacArthur, projektant www.csszengarden.com/022 viridity Gra wzorów, tekstur i kontrastów MoNotoNNa zieleń obecna w projekcie viridity, przywiązanie do szczegółów, soczysta tekstura przywodzą na myśl omszałą ściółkę leśną i gruby aksamit. laura MacArthur spróbowała przedstawić w tym projekcie rów- nowagę i poczucie błogości. Poprzez użycie powtarzających się wzorów i symulowa- nej faktury Macarthur chciała odnaleźć równowagę pomię- dzy szczegółowością detali a prostotą w innych obszarach obrazu. Wygaszone, monotonne barwy zapobiegają wra- żeniu zbytniego tłoku na ekranie, a na płaskich zielonych obszarach pomiędzy dominującymi teksturami oko może zatrzymać się i odpocząć. 74 ROZDZIAŁ  2 / pROjektOwAnIe wzory obrazy użyte w projekcie viridity to głównie podobne do siebie z wyglądu wzory. Po szczegółowym ich przeanalizowaniu stwierdzisz, że są spójne i można wśród nich wyróżnić dwie kategorie: jedna z nich zawiera wzory utworzone z punktów rastra, a druga odciski motywów roślinnych, łodygi i liście (patrz rySuNKi 2.21 i 2.22). każ- dy wzór został utworzony poprzez nałożenie filtrów programu adobe Photoshop na kilka rysunków. Wprowadzono tu też celowo pewne różnice, tak aby ostateczny efekt składał się z niepowtarzalnych elementów i nie wydawał się nudny. Wzór to zwykle powtarzający się element-kształt lub kilka elementów, które wypeł- niają dany obszar. Wzory stosowane są szeroko wszędzie tam, gdzie tworzy się jakieś projekty, na przykład w modzie i planowaniu wnętrz. Występują one także w naturze — wystarczy przyjrzeć się porom na skórce pomarańczy lub strukturze liścia. Dobry wzór może być najlepszym przyjacielem projektanta witryn internetowych. Należy jakoś osłabić wrażenie, jakie robią dobrze zdefiniowane duże obszary strony: w niektórych projektach jednolite wypełnienie może spełniać swoją rolę, w innych lepiej pozostawić białą przestrzeń, a jeszcze w innych występuje potrzeba wprowa- dzenia elementu wizualnego wykraczającego poza proste, jednorodne pola. ograniczenia, które napotykamy w dzisiejszych czasach podczas projektowania wi- tryn internetowych, zwiększają potrzebę użycia wzorów. Pojedynczym, małym obra- zem zaprojektowanym tak, aby można go było powielać na większej powierzchni, łatwo wypełnić całą stronę, a mniejsza objętość pliku oznacza, że zwiększona szcze- gółowość kosztuje niewiele kilobajtów. Na przykład, jeśli powielisz obraz o objętości 500 bajtów, możesz łatwo wypełnić obszar o szerokości 900 pikseli. Parametry powtarzania można łatwo ustawiać przy użyciu własności background- repeat dostępnej w CSS. Możliwe wartości to repeat, no-repeat, repeat-x, re- peat-y. oznaczają one odpowiednio ustawienie powtarzania obrazu w obu kierun- kach na płaszczyźnie, wyłączenie powtarzania i ustawienie powtarzania w jednym, wybranym kierunku. h3 { background-repeat: no-repeat; } body { background: #669999 url(z_bgrnd.gif) repeat-x 0px 1px; } rySuNeK 2.21. zbliżenie wzoru półtonowego rySuNeK 2.22. zbliżenie wzoru roślinnego viridity 75 Przedstawiony przykład pokazuje, że własność background-repeat może być stoso- wana niezależnie od innych opcji dotyczących ustawień tła lub jako własność skróco- na wewnątrz dłuższej reguły ustawiającej tło. tekstura W internecie nie poświęca się dużo czasu i miejsca dotykowemu sposobowi prze- kazywania informacji. to twierdzenie jest prawdziwe dla całej dziedziny kompu- terowej. Proste kontrolery i kierownice do gier mające funkcję przekazywania siły oczywiście są produkowane, ale na rynku nie występują żadne inne produkty kon- sumenckie tego rodzaju. Na początku tej dekady firma logitech eksperymentowała z myszkami komputero- wymi z serii ifeel, które reagowały na „zmianę” podłoża pod kursorem. Na przykład przesunięcie i umieszczenie kursora na łączu użytkownik mógł odczuwać jak prze- sunięcie myszki na gumową powierzchnię. Nie słyszeliśmy o dalszym rozwoju tej technologii, a firma logitech już nie produkuje tych myszek. Chociaż ta technologia była bardzo ciekawa, nikt nigdy nie wymyślił, do czego tak naprawdę może się przy- dać. Prawdopodobnie z tego właśnie powodu się nie przyjęła. W swoim tradycyjnym znaczeniu tekstury są reprezentowane w internecie w spo- sób niewystarczający. klikanie to najbardziej interaktywna odpowiedź komputera, jedyna, jaką możesz poczuć. jednak tekstury można nie tylko poczuć, można je także zobaczyć. Posągi mogą być ubrane w swobodnie opadające, pofalowane szaty wyryte w kamie- niu. Podświadomie doskonale zdajemy sobie sprawę, że dotykając szat posągu, po- czujemy jedynie gładką, twardą powierzchnię (patrz rySuNeK 2.23). odbieramy je jednak jak reprezentację prawdziwych ubrań, ponieważ szaty z kamienia, jak i praw- dziwe, mają wspólne niektóre cechy wyglądu. Wzory i tekstury są ze sobą powiązane. Często wzór może tworzyć (symulować) teks- turę w sposób niezamierzony i odwrotnie, wiele tekstur w sposób naturalny może formować wzory składające się z powtórzeń jednego motywu. tekstury niekoniecznie powstały na podstawie zdjęć, lecz w sposób oczywisty przy- pominają wzory zapożyczone z przyrody i otaczającego nas świata. tekstury utwo- rzone z punktów przywodzą na myśl chropowatą powierzchnię, a rozmyte kwadraty przypominają materiał typu flanela. inne wzory mogą pochodzić prosto ze starych, zdobionych firan. ogólnie projekt viridity wywiera pozytywne wrażenie — kojarzy się z komfortowym krzesłem, które zachęca, by na nim spocząć. rySuNeK 2.23. te rzeźby mają fakturę mającą imitować szaty 76 ROZDZIAŁ  2 / pROjektOwAnIe kontrast Nieumiejętne użycie monotonnej gamy kolorów może prowadzić do powstania problemów. jeśli na stronie znajduje się zbyt wiele kolorów i szczegółów, należy li- czyć się z kłopotami związanymi z kontrastem. odpowiedni kontrast jest wymagany, aby można było łatwo odróżniać poszczególne elementy: jeśli jest on zbyt mały, elementy te będą zlewać się ze sobą, a tekst będzie nieczytelny. zbyt duży kontrast powoduje z kolei, że oglądający czuje się przytłoczo- ny dominującymi, narzucającymi się obiektami. WySoKi KontRASt zbyt wysokie kontrasty pojawiające się w projekcie prowadzą do „tłoku” wizualnego. Niski kontrast kolorystyczny w projekcie viridity sprawdza się, ponieważ kontrast zna- czeniowy uzyskiwany jest poprzez użycie odpowiednich tekstów i czcionek. Szerszy zakres kolorów użytych w tym projekcie wydawałby się przesadny (rySuNeK 2.24). Przez wieki książki i gazety drukowano czarnymi czcionkami na białym tle. Chociaż kolorowy atrament istnieje od bardzo dawna, czarny i biały tworzą największy moż- liwy do osiągnięcia kontrast i zapewniają największą wygodę czytania. Generalnie ta sama zasada pozostaje aktualna w przypadku ekranu. Największy kontrast otrzymuje się, umieszczając czarny tekst na białym tle. jednak istnieją tu wyjątki, co wynika z faktu, że monitor komputera emituje światło, a wydruk papierowy — nie. z monitorami związane są pewne ograniczenia. jasny ekran lCD używany w ciemnym pomieszczeniu może emitować zbyt intensyw- ne światło powodujące uczucie dyskomfortu u oglądającego. Próba czytania tekstu z ekranu w takich warunkach to próba wytrzymałości wzrokowej dla użytkownika. Użycie kolorów w projekcie stawia przed tobą kolejne zadania dotyczące kontrastu. Niektóre zestawienia kolorów będą wywoływały wrażenie migotania będące wynikiem zjawiska noszącego nazwę jednoczesnego kontrastu. Gdy umieścisz obok siebie próbki dwóch dopełniających się kolorów, na przykład niebieskiego i pomarańczowego lub czerwonego i zielonego, uzyskasz największy kontrast, a granica pomiędzy kolorami będzie szczególnie intensywna (rySuNeK 2.25). W miejscu łączenia dwóch kolorów dopełniających z powodu kontrastu występuje nieprzyjemne napięcie optyczne. jednak w mniej intensywnej formie jednoczesny kontrast może być cennym narzę- dziem do wzbogacania projektu i wprowadzania w nim subtelności. żółto-pomarań- czowy element będzie wydawał się bardziej pomarańczowy na żółtym tle, a bardziej żółty, gdy umieścisz go na tle pomarańczowym lub czerwonym (patrz rySuNeK 2.26). Poprzez otoczenie ciemnego obszaru kolorami jeszcze ciemniejszymi optycznie roz- jaśniasz ten obszar. Nisko nasycony czerwony kolor może wydać się jaśniejszy, gdy prezentowany jest na szarym tle. rySuNeK 2.24. duży kontrast kolorystyczny koli- duje z bardzo szczegółowymi wzorami i tekstura- mi projektu viridity rySuNeK 2.25. zjawisko jednoczesnego kon- trastu powoduje migotanie krawędzi obszarów o kolorach podstawowych rySuNeK 2.26. ten sam żółto-pomarańczowy kolor będzie wydawał się bardziej pomarańczowy na żółtym tle, a bardziej żółty, gdy umieścisz go na tle czerwonym viridity 77 niSKi KontRASt zbyt niska kontrastowość, którą charakteryzują się niektóre projekty, powoduje, że strona wydaje się przygaszona i zbyt monotonna. kontrast jest potrzebny, aby wpro- wadzić odrobinę więcej wyrazu i wyróżnić pewne obszary i elementy. Monotonne odcienie zieleni w projekcie viridity rozciągają się od najjaśniejszych do najciemniej- szych. Użycie mniejszej ilości odcieni zakłóciłoby grę elementów graficznych, zni- weczyło rozbłyski oraz pola, na których oko może odpocząć. W rezultacie mogłoby zrujnować całą równowagę wizualną (patrz rySuNeK 2.27). Niską kontrastowość stosuje się często w celu zachowania subtelności projektu. Pik- sele są stosunkowo duże — za duże do celów projektowych. linia nigdy nie może być cieńsza niż jeden piksel, ponieważ piksela nie można podzielić. jednak poprzez zmniejszenie kontrastowości linii można doprowadzić do osłabienia jej znaczenia, a więc sprawić, że wyda się ona cieńsza (rySuNeK 2.28). analogicznie poprzez zmniejszenie ogólnego kontrastu pomiędzy elementami-skład- nikami projektu uzyskuje się efekt wyciszenia i osłabienia znaczenia układu kompo- zycyjnego. fragment tekstu o mniejszym znaczeniu można osłabić wizualnie, nadając mu mniej kontrastujący z otoczeniem kolor, a nieaktywne ikonki lub łącza można zastąpić ich niskokontrastowymi wersjami, które sprawiają wrażenie mniej ważnych, niedostępnych. Wzbogacony o wiedzę z zakresu efektów możliwych do uzyskania w projektach przy zastosowaniu niskiego kontrastu musisz pamiętać o tym, że niski kontrast powinien być stosowany w sposób odpowiedni i rozsądny. Dla użytkowników o sokolim wzro- ku przeczytanie szarego tekstu umieszczonego na trochę ciemniejszym, lecz również szarym tle nie będzie stanowiło żadnego problemu, lecz osoba o słabszym wzroku będzie musiała prawdopodobnie powiększyć znacznie rozmiar tekstu. tekst w kolo- rze czarnym może być lepszym wyborem, ponieważ zwiększysz w ten sposób jego czytelność i wyodrębnisz go z tła. Na czytelność wpływ ma także kontrast. różne odcienie to różne wartości jasności. Czysty żółty jest jaśniejszy niż czysty niebieski, zatem żółty tekst na białym tle może być nieczytelny nawet dla Sokolego oka. dAltonizm kolejny aspekt, który warto rozważyć, to wpływ niskiego kontrastu na zdolność widzenia przez osoby dotknięte daltonizmem (patrz rySuNKi 2.29A i 2.29B). Wy- stępuje kilka form zaburzeń widzenia kolorów i wiele ich odmian. Dwie najczęściej występujące to: o Protanomalia (deuteranomalia) — w przypadku tego zaburzenia, lżejszego z dwóch omawianych, oglądający postrzega większość barw, lecz jego zdolność rozróżnienia pewnych kolorów jest mniejsza. rySuNeK 2.27. Projekt viridity w wersji nisko- kontrastowej rySuNeK 2.28. Rozjaśnienie krawędzi powoduje, że pozornie wydają się one cieńsze 78 ROZDZIAŁ  2 / pROjektOwAnIe o Protanopia (deuteranopia) — ta forma daltonizmu jest rzadziej spotykana, lecz jej objawy są cięższe. osoby, które na nią cierpią, mają kłopoty z postrzega- niem koloru czerwonego i zielonego, co pozostawia je w świecie barw żółtych, brązowych i niebieskich. Schorzenie to nosi także nazwę dyschromii. Wymienione tu rodzaje zaburzeń widzenia kolorów mają pewne podgrupy. Część osób cierpi na częściową lub całkowitą niezdolność postrzegania pewnych konfi gu- racji koloru czerwonego, zielonego, rzadko niebieskiego. ogólnie daltonizm dotyka 1 na 12 osób. znacznie częściej na tę chorobę cierpią mężczyźni. Co dzieje się, gdy użytkownik z zaburzeniami widzenia kolorów ogląda projekt, w którym występują kolory spoza zakresu jego widzenia? Może mieć miejsce sytu- acja, w której misternie dobrana paleta barw wprowadza daltonistę w zakłopotanie — zdarza się to, jeśli projektant przekazuje informacje przy użyciu kolorów. jeśli pro- sisz daltonistę, aby kliknął czerwony przycisk, a on widzi tylko brązowe lub czarne, popełniasz nietakt. W wielu sytuacjach element danego koloru zleje się po prostu z otaczającym go tłem, a wrażenie kontrastu, które ma człowiek o prawidłowym wi- dzeniu, nie jest tak silne w przypadku daltonisty. Nie istnieje całkowicie niezawodna metoda, za pomocą której projektanci mogliby symulować widzenie daltonisty. Przekształcenie projektu do skali szarości mogłoby się wydawać oczywistym posunięciem, ale, niestety, takie przybliżenie nie oddaje do- kładnie tego, co widzi większość osób cierpiących na tę chorobę. Dostępne są różne fi ltry, które symulują wiele typów daltonizmu, lecz generowany przez nie obraz jest tylko pewnym przybliżeniem. Daltonizm to dolegliwość bardzo indywidualna i jej charakterystyka różni się w zależności od osoby. Co można zrobić, jeśli tak naprawdę nie da się przetestować projektu pod kątem tego problemu? Wskazówka numer 2 zaleceń Web Content accessibility Guidelines (www.w3.org/TR/WCAG10/#gl-color) mówi, że dowolne informacje przekazywane przy użyciu kolorów muszą być także przekazywane w przynajmniej jeden inny spo- sób. Na przykład łącze może być oznaczone kolorem niebieskim, ale oprócz tego warto je także podkreślić. Przycisk może być zielony, ale powinien być także pokazany za pomocą ikonki lub opisany tekstem. tekst ostrzeżenia może być czerwony, ale powinien być umieszczony w jednolitej, pogrubionej ramce itd. Spójność i jedność Projektowanie z myślą o wizualnej spójności oznacza równe traktowanie wszystkich aspektów kompozycji. Projekt w rodzaju viridity mógłby łatwo zmienić swój cha- rakter na bardzo przytłaczający i zbyt niejednoznacznie intensywny, jeśli autorka nie rozważyłaby gry tekstur i kolorów, czcionek i wzorów. Ponieważ laura Macarthur poświęciła szczególną uwagę równowadze elementów kompozycji, wynik jej pracy jest o wiele bardziej zachwycający niż suma składników kompozycji. rySuNeK 2.29A. główny projekt ogrodu zen widziany przez filtr symulujący jedną z form protanopii rySuNeK 2.29B. Podstawowy projekt tej witryny widziany przez filtr symulujący zaburzenia per- cepcji kolorów Uwaga w witrynie Colorblind web page Filter (pod  adresem http://www.colorfilter.wickline.org) znajduje się filtr symulujący widzenie z zabu- rzeniami percepcji kolorów. viridity 79 Charlotte lambert, projektant www.csszengarden.com/068 Ballade wyobraźnia, która wodzi oko wzdłuż ścieżki PierWotNy Charakter oGroDU zeN miał wiele wspólnego z kontemplacją. Stała się ona początkiem dla projektu Ballade graficzki Charlotte lambert. lambert przechadza się po ogrodzie. jej wyobraźnia płynie jak rzeka, a po drodze odkrywa wiele znaczących miejsc i przedmio- tów — schodki, mostek, kota wyskakującego z zarośli. Przechodząc od wyobraźni do pióra, Charlotte stworzyła kilka szkiców pomocnych w dopracowaniu wizji projektu. Na ich podstawie powstały obrazy rzeczy, które napotkała podczas przechadzki. Użyła tuszu, białej farby, papieru i kartonu po n-paku piwa, a następnie stworzyła w programie Photoshop obrazy przygotowane do użycia na stronie internetowej. 80 ROZDZIAŁ  2 / pROjektOwAnIe prowadzenie wzroku Dobry projekt graficzny charakteryzuje się tym, że wzrok podąża przez istotne ele- menty, postrzegając je w logicznej kolejności w sposób podświadomy, tak że oglą- dający nawet nie zdąży zorientować się, że jego oczy są wodzone. jest to jeden ze sposobów, w jaki projektanci przekazują informacje bez zbytniej nachalności. aby móc wodzić oko, trzeba dysponować pewnymi środkami, które pozwolą zbu- dować ścieżkę dla wzroku. tymi środkami są obrazy oraz treść. W projekcie Ballade mamy przykład czytelnej, jakże eleganckiej ścieżki wizualnej. Ustawienie elementów nawigacyjnych, łączy do archiwum oraz zasobów po lewej stronie spowodowało oddzielenie części nawigacyjnej od głównej zawartości (patrz rySuNeK 2.30). Większość osób oglądających strony internetowe przyzwyczajona jest do tego, że łącza nawigacyjne znajdują się po lewej stronie ekranu lub w jego górnej części. Umieszczenie łączy w tych miejscach pozwala użytkownikowi szybko przejść do zapoznawania się z główną zawartością witryny. W swoim projekcie pani lambert prowadzi widzów od sekcji do sekcji tak, jakby dosłownie przechadzali się po ogrodzie. Przechodzą oni przez portyk (rySuNeK 2.31) i schodzą schodami (rySuNeK 2.32). każdy fragment ogrodu ma swój niepowtarzalny wygląd i wiele miejsca na zawartość. Nagłówki informują o treści informacji w każdej sekcji, jednocześnie integrując znaczenie przekazywanej treści ze ścieżką wizualną. innym ważnym środkiem wodzenia oka jest przeznaczenie miejsca na odpoczynek. zwykle osiąga się to dzięki pozostawieniu obok tekstu wystarczająco dużej ilości wol- nego miejsca (rySuNeK 2.33). kluczowe fragmenty tekstu oraz układu graficznego można oznaczyć kolorem, a ułożenie kształtów oraz linii skupia uwagę oglądającego i wyznacza kierunki. twórczyni projektu Ballade skłoniła się ku umieszczeniu głównej zawartości na bia- łych blokach ekranu, dzięki czemu uzyskany kontrast służy czytaniu, a tekst można przesuwać w poziomie, co jest zbawienne dla oka mogącego odpocząć na białych obszarach, przez które przechodzi. i chociaż gama kolorów jest tu niesłychanie ubo- ga, bo obejmuje tylko kolor brązowy, czarny i biały, to pozostaje dla odbiorcy pewną subtelną, intrygującą zagadką, czy jest to ogród zimowy, czy jesienny. to pytanie pod- trzymuje jego zainteresowanie — szuka on więcej wskazówek. rySuNeK 2.30. główna zawartość strony Ballade została oddzielona od elementów nawigacyj- nych i pomocniczych. jest to jeden ze sposobów skupiania uwagi oglądającego na zawartości i prowadzenia jego wzroku po istotnych elemen- tach strony rySuNeK 2.31. obraz portyku pochodzący z pro- jektu Ballade. Rysunek świetnie wzbogaca projekt rySuNeK 2.32. od drzwi wejściowych do scho- dów — projekt prowadzi widza zarówno w sensie metaforycznym, jak i dosłownym ballade 81 Na końcu trzeba wspomnieć o liściach (rySuNeK 2.34), mostkach i odciskach łap (ry- SuNeK 2.35), będących przykładami oryginalnych kształtów włączonych do projektu. one jeszcze bardziej
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Zen stosowania CSS. Źródło oświecenia dla projektantów stron WWW
Autor:
,

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: