Darmowy fragment publikacji:
• Kup książkę
• Poleć książkę
• Oceń książkę
• Księgarnia internetowa
• Lubię to! » Nasza społeczność
Spis treści
tytułem wstępu . . . . . . . 001
01 / inspiracja
002
inspiracja w procesie
twórczym . . . . . . . . . 003
02 / podstawy projektowania
007
akcent . . . . . . . . . . . . . . 009
kontrast . . . . . . . . . . . . . 012
harmonia . . . . . . . . . . . . 016
wyrównanie . . . . . . . . . . 020
powtórzenie . . . . . . . . . . 024
nurt . . . . . . . . . . . . . . . . 027
03 / podział stron
według typów
030
aplikacja na iphone’a . . . 031
niezależny twórca . . . . . . 036
zespół muzyczny . . . . . . 041
blog . . . . . . . . . . . . . . . . 045
strona prywatna . . . . . . . 051
firma projektowa . . . . . . 055
wydarzenie . . . . . . . . . . 059
turystyka i podróże . . . . . 063
e ‑commerce . . . . . . . . . . 067
wizytówka firmowa . . . . . 072
narzędzia internetowe . . 075
oprogramowanie
internetowe . . . . . . . 078
nieruchomości . . . . . . . . 083
portfolio . . . . . . . . . . . . . 087
wkrótce . . . . . . . . . . . . . 092
t ‑shirt . . . . . . . . . . . . . . . 096
katalog . . . . . . . . . . . . . 100
04 / podział stron
według składników
wizualnych
103
slogan . . . . . . . . . . . . . . 104
światło . . . . . . . . . . . . . . 109
iPhone jako ozdobnik . . . 114
łącza do serwisów
społecznościowych . . 119
ikony . . . . . . . . . . . . . . . 123
typografia . . . . . . . . . . . 129
tła fotograficzne . . . . . . . 135
05 / podział stron według
stylów i motywów
139
przejrzysty . . . . . . . . . . . 140
minimalistyczny . . . . . . . 145
szkic . . . . . . . . . . . . . . . 150
kolaż . . . . . . . . . . . . . . . 154
ilustrowany . . . . . . . . . . 160
typograficzny . . . . . . . . . 166
jednolite barwy . . . . . . . 171
tekstylia . . . . . . . . . . . . . 177
drewno . . . . . . . . . . . . . 185
06 / podział stron według
stylów strukturalnych 193
nietypowa nawigacja . . . 194
nietypowy układ . . . . . . . 199
pseudoflash . . . . . . . . . . 205
przewijanie w poziomie . . 210
jedna strona . . . . . . . . . . 214
07 / podział stron
według komponentów
strukturalnych
220
zakładki . . . . . . . . . . . . . 221
przyciski . . . . . . . . . . . . . 225
formularze . . . . . . . . . . . 229
przyjazne strony główne . 236
funkcjonalne stopki . . . . 240
pokazy slajdów . . . . . . . . 246
błąd 404 . . . . . . . . . . . . . 252
skorowidz
praw autorskich . . . . 255
/ akcent • kontrast • harmonia • wyrównanie • powtórzenie • nurt
podstawy projektowania
W swoim podejściu do analizy projektów i nauki projektowania zawsze
wychodzę z prostego założenia: o wiele bardziej lubię analizować konkretne
przykłady i rozwiązania realnych problemów projektowych, aniżeli dyskuto-
wać o abstrakcyjnych i trudno definiowalnych koncepcjach. Dzięki analizie
rzeczywistych przykładów zyskujemy praktyczną wiedzę o podstawach pro-
jektowania. Taka filozofia sprawdza się nie tylko u początkujących, lecz także
zaawansowanych projektantów. Przekonałem się niejednokrotnie, że każdy
powrót do podstaw pozwala mi odkryć coś nowego; coś, dzięki czemu zy-
skuję szerszą perspektywę. Odnoszę też wrażenie, że zawsze, gdy tylko mam
problemy z jakimś projektem, muszę po prostu krytycznie przeanalizować
go pod kątem podstawowych zasad, aby znaleźć błąd, który przeoczyłem.
Przy opracowywaniu informacji o podstawowych aspektach projekto-
wania, przedstawionych w tym rozdziale, korzystałem z książki Basics of
Design Lisy Graham. Jest to szkolny podręcznik, który zawsze stanowił dla
mnie źródło podstawowych informacji na ten temat. Według Lisy każdy
projekt powinien być tworzony z myślą o kilku fundamentalnych kwestiach:
007
007
akcencie, kontraście, harmonii, wyrównaniu, powtórzeniu oraz nurcie. Im
bardziej przemyślane będą te składniki, tym projekt ma większe szanse,
aby być lepszy. Jeśli któreś z nich zostaną zaniedbane, rezultat będzie na
ogół mizerny. Powrót do podstaw pozwala skoncentrować wzrok i umysł
na tworzeniu doskonałego projektu.
Trzeba oczywiście pamiętać, że postępowanie w myśl sprawdzonego
przepisu nie musi gwarantować sukcesu. Innymi słowy, nie traktuj po-
niższych wskazówek jako niezawodnej receptury. Mogę jednak z czystym
sumieniem powiedzieć, że podane niżej sugestie są dla mnie bodźcem do
doskonalenia własnych projektów i ułatwiają zrozumienie tego, dlaczego
niektóre koncepcje sprawdzają się w praktyce, a inne nie.
W tej części książki zgromadziłem przykłady stron, które moim zda-
niem najlepiej odzwierciedlają omawiane kwestie i robią to w możliwie
różnorodny sposób. W niektórych przypadkach zastosowanie określonych
rozwiązań jest oczywiste, w innych trzeba zwrócić uwagę na subtelności.
Właśnie dlatego uwielbiam przykłady z życia wzięte: znacznie lepiej nadają
się one do zilustrowania określonych koncepcji niż teorie, gdyż praktyka
często rozmija się z podręcznikowymi wzorcami.
008
/ podstawy projektowania
akcent • kontrast • harmonia • wyrównanie • powtórzenie • nurt
akcent
Akcent to po prostu sposób wyróżnienia szcze-
gólnie istotnych składników strony. W wielu
przypadkach ma on ścisły związek z hierar-
chią ważności elementów, a niekiedy bywa
z nią tożsamy. To oznacza, że chcąc zaakcen-
tować określone treści, musisz przed opra-
cowaniem projektu przeanalizować przede
wszystkim jego zawartość i zdecydować, któ-
re informacje są najważniejsze, a które mniej
istotne. Dopiero na tej podstawie można zbu-
dować projekt, uwzględniający dostrzeżone
zależności. Doskonałym sposobem na wyło-
nienie składników wymagających zaakcento-
wania jest stworzenie spisu elementów stro-
ny i ponumerowanie ich według ważności. Na
podstawie otrzymanej listy należy następnie
przygotować projekt w taki sposób, aby od-
zwierciedlał opracowaną strukturę. W ten spo-
sób można uniknąć bezcelowych prób wyróż-
nienia wszystkiego na siłę. Ponadto przy takim
podejściu łatwiej uniknąć pułapki stworzenia
niezamierzonej hierarchii ważności. Zawsze
lepiej podjąć świadomą decyzję co do tego,
które elementy będą odgrywać dominującą
rolę pod względem wizualnym, aniżeli pozo-
stawiać takie kwestie przypadkowi. Jeśli bę-
dziesz chciał zaakcentować wszystko, to w re-
zultacie nie wyróżnisz niczego. Przyjrzyjmy się
kilku praktycznym przykładom, aby się przeko-
nać, jakie działania podjęli projektanci w celu
stworzenia wizualnej hierarchii treści zamiesz-
czonych na stronie.
Bryan Connor (rysunek 1.)
Strona Bryana Connora jest doskonałą ilu-
stracją praktycznego zastosowania akcen-
tów. Jej najważniejszym elementem jest naj-
nowszy wpis z bloga autora. Zauważ, że jest
to jedyny tekst umieszczony na białym tle, zaś
jego nagłówek jest bardzo duży i znajduje się
w pobliżu górnej części projektu, dzięki cze-
mu całość silnie kontrastuje z resztą. To znak,
że autor miał konkretne intencje i po prostu
chciał zwrócić uwagę na dokładnie ten ele-
ment. Choć może się wydawać, że w przypad-
ku takich stron równie ważne powinny być
przykłady prac z portfolio albo informacje tele-
adresowe, to — jak już wspomniałem — próba
wyróżnienia wszystkiego sprawia, że poszcze-
gólne elementy po prostu się zlewają.
Digitalmash (rysunek 2.)
Ta strona stanowi kolejny dobry przykład umie-
jętnego zaakcentowania elementów w celu
pokierowania odbiorem treści przez widza.
Duży, dominujący napis umieszczony na sa-
mej górze strony (podobnie jak w poprzednim
przypadku) nie pozostawia wątpliwości co do
intencji właściciela: strona ma pomagać w po-
zyskiwaniu klientów. Z pewnością nie jest to
projekt o charakterze rodzinnym, nie ma też on
na celu zaprezentowania przyjaciołom zdjęć
zamieszczonych w serwisie Flickr czy wyeks-
ponowania najnowszego wpisu na Twitterze.
Ten serwis ma przyciągać potencjalnych zlece-
niodawców. Zastanów się, jaki jest cel strony,
którą projektujesz, i jak powinieneś rozłożyć
na niej akcenty, aby ów cel wyeksponować.
Cold Stone Creamery (rysunek 3.)
Ta strona została zaprojektowana według
dość powszechnego szablonu, opierające-
go się na efektywnym rozłożeniu akcentów.
009
Projekt zaczyna się klasycznym nagłówkiem
zawierającym logo oraz główne odnośniki,
lecz już odrobinę niżej mamy do czynienia
z mniej typowym, silnie wyeksponowanym
bannerem. W miarę przechodzenia do dolnej
części strony ważność poszczególnych ele-
mentów maleje i jest kontrolowana głównie
poprzez przydzielenie im coraz mniejszej ilości
miejsca. W tym projekcie mamy do czynienia
z hierarchią o trzech poziomach. Na innych
stronach może ich być więcej, choć nie jest
to regułą.
Rysunek 2. http://www.digitalmash.com
Rysunek 1. http://www.bryanconnor.com
Rysunek 3. http://www.coldstonecreamery.com
Rysunek 4. http://www.greencircleshoppingcenter.com
010
Duży, animowany banner od razu przyciąga wzrok i pozwala właści-
cielom strony zwrócić uwagę odbiorcy na to, co uważają za najbardziej
istotne. Kolejny segment jest zagospodarowany już znacznie gęściej
i zawiera trzy komunikaty umieszczone w osobnych ramkach. To zagęsz-
czenie oznacza zarazem, że podane tutaj informacje odbiorca zauważy
w drugiej kolejności. Zasadniczo hierarchia ważności powinna odzwier-
ciedlać naturalny sposób odbioru strony przez widza: od góry do dołu.
Nie ma sensu z nim walczyć; lepiej wykorzystać go na swoją korzyść.
http://www.serj.ca
http://www.atebits.com
http://stonetire.com
http://www.smartosc.com
011
/ podstawy projektowania
akcent • kontrast • harmonia • wyrównanie • powtórzenie • nurt
kontrast
Kontrast to wizualna różnica między dwoma
elementami lub większą ich liczbą. Silnie kon-
trastujące elementy wydają się wyraźniejsze,
a zarazem odrębne, zaś elementy o małym
kontraście sprawiają wrażenie podobnych
i zlewają się. Kontrast można uzyskać w ra-
mach wielu różnych właściwości, takich jak
kolor, rozmiar, położenie, dobór krojów pisma
oraz ich grubości. Umiejętne zastosowanie
kontrastu wprowadza pożądane zróżnicowa-
nie i pozwala uniknąć monotonii. Kontrast
może też zwracać uwagę na określone elemen-
ty, a tym samym pełnić rolę wizualnego ak-
centu. Zwróć uwagę, że już teraz pojawiają się
nam relacje między omawianymi atrybutami:
kontrast może być wykorzystany jako akcent,
może wpływać na nurt, czyli kolejność odbioru
treści, a także na inne aspekty projektu.
Kontrast może mieć bardzo ważny wpływ
na hierarchię strony, jest więc często używa-
ny do akcentowania. W rezultacie może on
decydować o wizualnej ważności poszczegól-
nych składników projektu i przyciągać uwagę
do komunikatów, kontrolek albo kluczowych
012
informacji o serwisie. Jak zawsze, tak i w tym
przypadku należy wziąć pod uwagę cel kon-
kretnego projektu oraz związane z nim wy-
mogi. Zwrócenie uwagi na określone elemen-
ty za pośrednictwem kontrastu powinno być
przemyślane i celowe. Przyjrzyjmy się kilku
przykładowym projektom, aby się przekonać,
w jaki sposób wykorzystano w nich kontrast.
Twe4ked Studios (rysunek 1.)
Dwa duże zielone przyciski tak silnie kontra-
stują z resztą strony, że nie sposób ich prze-
gapić. Są to najważniejsze aktywne elementy
projektu, a ich rozmiar oraz kolor sprawiają,
że aż kłują w oczy. Najwyraźniej projektantowi
tej strony zależało na dwóch kwestiach: aby
użytkownik zapoznał się z jego portfolio albo
aby się z nim skontaktował. Kontrast został
wykorzystany jeszcze w kilku innych miejscach
tego projektu. Na przykład krótki wstęp został
potraktowany priorytetowo: nie tylko zajmu-
je całą szerokość strony, lecz został złożony
największym krojem pisma, a w rezultacie
wyraźnie dominuje nad górną częścią strony.
U góry tekst jest czarny i umieszczony na bia-
łym tle, zaś na dole jest dokładnie na odwrót.
Ten kontrast sprawia, że treść zamieszczona
w górnej części wydaje się bardziej istotna,
co zostało dodatkowo podkreślone różnicami
w gęstości pisma. Tekst w dolnej części jest
złożony znacznie ciaśniej, przez co jest odbie-
rany jako drugorzędny. To zadziwiające, jak
ważnym aspektem projektu jest kontrast i jak
trudno uniknąć jego zastosowania.
Be the Middle Man (rysunek 2.)
Ta strona stanowi kolejny przykład tego, że ra-
dykalne zastosowanie kontrastu może wpły-
wać na hierarchię treści i rzutować na działa-
nia użytkownika. Projektant wyraźnie zachęca
odbiorcę do sprawdzenia możliwości wyszuki-
warki, gdyż jest to bezsprzecznie najistotniej-
szy element na ekranie. Cel działania strony
jest więc bardzo jasny. Kolejny ciekawy aspekt
tego projektu to stopniowy wzrost zagęszcze-
nia tekstu w dolnej części. To także pewien
sposób na płynne zwiększenie kontrastu, który
koresponduje z naturalnym sposobem korzy-
stania ze strony przez użytkownika. Jeśli od-
biorca zada sobie trud, aby przeczytać stronę
do końca, to można założyć, że jego zaintere-
sowanie tematem stopniowo wzrasta (choć
z drugiej strony może też oznaczać, że nie jest
w stanie znaleźć tego, czego potrzebuje). Jest
więc logiczne, że strona stara się zaoferować
mu coraz więcej, aby spełnić jego wymagania.
Rysunek 1. http://twe4ked.com
Rysunek 2. http://www.bethemiddleman.com
http://www.swgraphic.com/v2
013
http://www.pokeseo.com
http://www.onebyfourstudio.com
http://www.mediacontour.com
014
http://andrewlindstrom.com
http://www.allisclear.com
http://www.tunnel7.com
015
/ podstawy projektowania
akcent • kontrast • harmonia • wyrównanie • powtórzenie • nurt
harmonia
Harmonia wynika ze sposobu ułożenia ele-
mentów projektu oraz ich wpływu na rozkład
ciężaru optycznego w obrębie strony. Harmo-
nia ma bardzo istotny wpływ na równowagę
projektu. Zgrupowanie kilku elementów ma
pewną wizualną wagę, która na ogół powinna
zostać zrównoważona poprzez umiejscowie-
nie podobnego ciężaru po przeciwnej stronie.
Zaniedbanie tego aspektu może sprawić, że
projekt będzie sprawiał wrażenie niestabilne-
go, choć niekoniecznie musi to być wadą. Bez
wątpienia brak równowagi można skutecznie
wykorzystać. Niemniej jednak subtelne wra-
żenie stabilności, jakie sprawia harmonijnie
zrównoważony projekt, na ogół jest odbierane
jako korzystniejsze.
Do kwestii harmonii można podejść dwoja-
ko: w ujęciu symetrycznym i asymetrycznym. Za
chwilę przyjrzymy się przykładom każdego z nich.
HARMONIA SYMETRYCZNA
Harmonię w projekcie symetrycznym osiąga
się wówczas, gdy jedna połowa jest natural-
nym odbiciem drugiej, a co za tym idzie — oby-
016
dwie mają taki sam ciężar wizualny. Na stro-
nach internetowych taki efekt na ogół uzyskuje
się poprzez podzielenie ekranu na pół w pio-
nie i nadanie obydwu połowom porównywal-
nego ciężaru. Jak zwykle wolę zilustrować to
na przykładach, przyjrzyjmy się więc jednej
z tego typu stron.
MINT Wheels (rysunek 1.)
W przypadku tego projektu symetria idzie w pa-
rze z treścią i sprawia bardzo naturalne wraże-
nie. Zauważ, że w luksusowych samochodach
kładzie się szczególny nacisk na osiągnięcie
idealnej harmonii parametrów. Takie pojaz-
dy są wręcz ucieleśnieniem stabilności i rów-
nowagi, jakie tylko można osiągnąć w trakcie
jazdy. Jeśli spojrzeć na to z tej perspektywy, to
symetryczny projekt doskonale korespondu-
je z wrażeniami towarzyszącymi prowadzeniu
tego typu auta. Zwróć uwagę na logo, które
znajduje się na samej górze strony, i to dokład-
nie pośrodku. Taki zabieg nie tylko ułatwia
osiągnięcie symetrii, lecz pozwala umiejsco-
wić znak firmowy w kluczowym miejscu strony
(u góry i pośrodku zarazem). Projekt jest przej-
rzysty, elegancki i doskonale pasuje do treści.
HARMONIA ASYMETRYCZNA
Harmonię w projekcie asymetrycznym można
osiągnąć wówczas, gdy ciężar optyczny strony
jest rozłożony równo względem jej osi, lecz po-
szczególne elementy zgromadzone na jednej
połowie nie są lustrzanym odbiciem drugiej.
To dość zawiły opis, więc może inaczej: asy-
metryczna równowaga to wynik rozmieszcze-
nia elementów o różnym ciężarze wizualnym
w taki sposób, aby wzajemnie się równoważyły.
Ta definicja również wydaje mi się mniej przej-
rzysta niż konkretne przykłady, przyjrzyjmy się
więc zastosowaniu tej koncepcji w praktyce.
Dallas Baptist University (rysunek 2.)
Harmonia asymetryczna jest bardzo często
spotykana w projektach internetowych, gdyż
stanowi bardziej naturalną formę dla prezen-
towanych treści. W tym przypadku asymetrycz-
na równowaga obejmuje właściwie całą stro-
nę, począwszy od nagłówka. Logo równoważy
główne elementy nawigacyjne (które zostały
umiejscowione tam, gdzie zwykle wstawia się
logo). Jest ono też dość wysokie i ciemne, więc
pomimo stosunkowo niewielkich rozmiarów
stanowi skuteczną przeciwwagę dla odsyłaczy.
Z kolei ramka powitalna poniżej zdjęcia jest
większa niż ramka „Quick Facts” po jej prawej
stronie, ale za to ta druga jest ciaśniej zagospo-
darowana tekstem. Większa ramka jest więc
równoważona mniejszą, ale cięższą optycznie.
Campaign Monitor (rysunek 3.)
W niektórych przypadkach najsensowniejsze
wyjście polega na osiągnięciu równowagi po-
przez połączenie obydwu opisanych podejść.
Dokładnie z tego samego założenia wyszedł
projektant strony głównej serwisu Campaign
Monitor. W górnej części mamy do czynienia
z harmonią asymetryczną: blok tekstu został
zrównoważony zdjęciem. Poniżej jednak wi-
dzimy już zupełnie inne podejście — zarówno
sześć elementów w środkowym segmencie,
jak i logo w segmencie dolnym zostały ułożone
idealnie symetrycznie.
Harmonia jest jednym z subtelniejszych
aspektów projektu — dla wielu ludzi także jed-
nym z najbardziej instynktownych do zasto-
sowania. Jeśli odnosisz wrażenie, że projekt
wygląda źle, zastanów się, czy nie mógłbyś go
zrównoważyć poprzez zminimalizowanie kon-
trastów. Może to oznaczać na przykład zmody-
fikowanie dwóch głównych elementów w taki
sposób, aby lepiej do siebie pasowały, bądź
użycie zestawu lżejszych komponentów, które
będą równoważyły jeden cięższy. Czy projekt
sprawia wrażenie, jak gdyby miał się przewró-
cić? Czy jest optycznie niestabilny? Tego typu
pytania powinieneś sobie zadawać, jeśli na-
potkasz problemy z harmonią projektu.
Rysunek 1. http://www.mintwheels.com
Rysunek 2. http://whydbu.dbu.edu
017
Rysunek 3. http://campaignmonitor.com/designers
http://viminteractive.com
http://www.nationalbreastcancer.org
018
http://bunton.com.au
http://www.visualelixir.com
http://www.mdswebstudios.com
http://www.typejockeys.com
019
/ podstawy projektowania
akcent • kontrast • harmonia • wyrównanie • powtórzenie • nurt
wyrównanie
Wyrównanie polega na ustawieniu elemen-
tów w taki sposób, aby ich krawędzie (albo
obramowania) naturalnie do siebie pasowa-
ły. Przy takiej aranżacji — nazywanej niekiedy
siatką — składniki strony nabierają spójności
i tworzą większą całość. Z kolei niewyrówna-
ne elementy sprawiają wrażenie oderwanych
i burzą integralną strukturę strony, na której
zwykle nam zależy. Przykładem wyrównania
elementów może być dopasowanie położe-
nia górnych brzegów kolumn albo ustawienie
kilku kolejnych ramek w pionie w taki sposób,
aby ich lewe krawędzie tworzyły jedną linię.
Są to dość ewidentne kwestie, lecz w struktu-
rze strony można stosować znacznie bardziej
skomplikowane wyrównania, umożliwiające
uzyskanie jednolitego, atrakcyjnego wizualnie
projektu.
Omawiana kwestia jest szczególnie istotna
dla tych projektantów, którzy sami zajmują się
kodowaniem tworzonych stron. Często oka-
zuje się bowiem, że w trakcie przekształcania
makiety na prawdziwą, w pełni funkcjonalną
stronę trudno jest zachować oryginalny układ
i wyrównanie obiektów. Wierne odzwiercied-
lenie struktury źródłowej jest nie tylko sporym
wyzwaniem, lecz niesie za sobą także ryzyko
przeoczenia misternie skomponowanych de-
tali. Znajomość mechanizmów rządzących
projektem na tym poziomie bardzo pomaga
także przy współpracy z deweloperem.
Design Without Frontiers (rysunek 1.)
Ta strona może być traktowana jako wzorco-
wy przykład posługiwania się wyrównaniem
w projektowaniu na potrzeby internetu. Celo-
we, konsekwentne przestrzeganie reguł spra-
wiło, że projekt sprawia bardzo przejrzyste,
harmonijne wrażenie. Na przykład szerokość
logo jest identyczna jak szerokość kolumny
z głównym tekstem i umieszczonymi w niej ty-
tułami. Dzięki takiemu rozwiązaniu wystarczy
prześledzić układ krawędzi, aby domyślić się
zamiarów projektanta. Skrupulatne wyrów-
nanie komponentów przyczyniło się w tym
przypadku do powstania doskonale zrówno-
ważonego projektu.
Indextwo (rysunek 2.)
Do wyrównywania nie trzeba podchodzić aż
tak radykalnie. Ten aspekt projektowania
niekiedy uwzględnia się niejako samorzutnie,
a kiedy indziej można go rozmyślnie zignoro-
wać. W projekcie przykładowej strony można
wyróżnić trzy zasadnicze kolumny. W ramach
tych kolumn rozmieszczone zostały wszystkie
warstwy projektu. To ważne, gdyż często się
zdarza, że spójność poszczególnych warstw
jest tracona wskutek zaniedbań w kwestii
wyrównania. Zauważ, że choć nawigacja
w nagłówku łamie nadrzędną strukturę ko-
lumn, to separator między dwoma pierwszymi
odsyłaczami wypada dokładnie na krawędzi
jednej z nich. Jest to doskonały przykład zła-
mania reguł z myślą o konkretnym celu. Jeśli
projektant zdecydowałby się zwęzić nawigację,
poszczególne odsyłacze stałyby się mniejsze,
a przez to mniej wygodne w obsłudze.
020
http://leihu.com
Rysunek 1. http://www.designwithoutfrontiers.com
http://www.rawcoach.be
Rysunek 2. http://www.indextwo.com
021
http://macallanridge.com
http://www.onebitwonder.com
http://theurbanmama.com
022
http://www.goodbytes.be
http://onehub.com
023
/ podstawy projektowania
akcent • kontrast • harmonia • wyrównanie • powtórzenie • nurt
powtórzenie
Istotą powtórzenia jest wielokrotne użycie
danego elementu na różne sposoby. Projekty,
w których zastosowano powtórzenie, nabiera-
ją szczególnej spójności. Powtarzalność może
dotyczyć różnych aspektów projektu, takich jak
kolor, kształt, układ linii, dobór krojów pisma,
ilustracji, a także ogólnego stylu strony. W wie-
lu przypadkach powtórzenie okazuje się szale-
nie istotne, gdyż projekt pozbawiony regular-
ności na ogół sprawia wrażenie niejednolitego.
Ogromną zaletą powtórzeń jest przewidy-
walność. Konsekwencja stylistyczna najważ-
niejszych elementów projektu sprawia, że użyt-
kownik szybko uczy się oczekiwać konkretnych
efektów swoich działań. Niestety, wiele serwi-
sów WWW jest niespójnych wizualnie: każda
podstrona stanowi nowe doświadczenie i nie
ma wspólnej formuły działania.
Vim Interactive (rysunek 1.)
W tym projekcie można wyróżnić tyle przykła-
dów powtarzalności elementów, że omówie-
nie ich wszystkich zajęłoby kilka stron książki.
Postanowiłem więc zwrócić uwagę jedynie na
te mniej oczywiste. Jednym z nich jest zasto-
sowanie regularnych odstępów. Zwróć uwagę
na marginesy między tekstem i krawędziami
ramek informacyjnych, a zwłaszcza na ich wi-
zualną spójność z odstępami w innych miej-
scach strony. Ta harmonia przekłada się na
bardzo przejrzysty, czytelny projekt. Zauważ,
że to jedno proste, choć być może trudne do
uchwycenia rozwiązanie zdecydowanie uproś-
ciło odbiór strony, cechującej się dość złożoną
strukturą. Kolejnym interesującym elementem
tego projektu, który został wielokrotnie powtó-
rzony, jest podwójny układ elementów teks-
towych: większym napisom zawsze towarzy-
szy mniejszy napis pomocniczy. Na przykład
pod logotypem znajduje się mniejszy slogan
reklamowy, pod dużym numerem telefonu
widnieje zachęta do skorzystania z niego, duży
napis obok mapy zaopatrzono w wyjaśnie-
nie złożone znacznie drobniejszym pismem,
a każda z ramek „LEARN MORE” zawiera nagłó-
wek i nieco mniejszy tekst informacyjny. Taki
układ sprawia bardzo przewidywalne wraże-
nie. Użytkownik korzystający z tego typu strony
wie, czego może oczekiwać, a powtarzalność
kluczowych elementów działa uspokajająco.
024
http://www.rawsterne.co.uk
Rysunek 1. http://viminteractive.com
http://www.spoongraphics.co.uk
http://mocapoke.com
http://www.ukpads.com
025
http://www.garretthoffmann.com
http://www.nathanhackley.com
http://anderbose.com
026
/ podstawy projektowania
akcent • kontrast • harmonia • wyrównanie • powtórzenie • nurt
nurt
Nurt to ścieżka, którą podąża wzrok odbiorcy
w obrębie projektu. Jej przebieg zależy w głów-
nej mierze od sposobu zaakcentowania pew-
nych elementów oraz rozkładu kontrastów.
Można powiedzieć, że ten swoisty „kierunek
zwiedzania” stanowi konsekwencję pozosta-
łych aspektów projektu.
Przy analizie nurtu zawsze warto brać pod
uwagę naturalny porządek rzeczy. Na podsta-
wie wyników badań wiemy, że sposób odbioru
treści przez użytkowników jest dość przewi-
dywalny. Wzrok odbiorcy na ogół analizuje
stronę od lewej do prawej i od góry do dołu.
To dlatego strona internetowa, w której tekst
został wyrównany do prawej krawędzi, wydaje
się nam — czytającym od lewej do prawej —
taka dziwaczna. W postępowaniu wbrew na-
turalnemu porządkowi nie ma nic złego; trzeba
po prostu uwzględnić konsekwencje takich
decyzji. Chodzi o to, że rozsądniej jest płynąć
zgodnie z naturalnym nurtem, niż starać się za
wszelką cenę iść pod prąd.
Nurt — dobry albo zły — można wyróżnić
na każdej stronie. Co decyduje o tym, że nurt
strony jest zły? Ja w trakcie wybierania stron
będących przykładem poprawnego nurtu po-
stawiłem sobie odwrotne pytanie: a co sprawia,
że jest dobry? I zacząłem szukać takich stron,
których obsługa przebiegała płynnie, wygod-
nie i tak naturalnie, jak to tylko możliwe. Strona
może być skomplikowana, lecz jej struktura po-
winna być podporządkowana komfortowi ob-
sługi; tak abym nie czuł się jak bila miotana po
wszystkich zakamarkach stołu. Z mojego punk-
tu widzenia płynny nurt jest lepszy od skoko-
wego. Owszem, wzrok człowieka w naturalny
sposób przeskakuje między różnymi elemen-
tami projektu, lecz strona cechująca się płyn-
nym nurtem będzie zachęcała do korzystania
z niej w ustalony sposób i kierowała wzrokiem
tak, aby podsycać zainteresowanie odbiorcy.
Wilson Doors (rysunek 1.)
Ten serwis stanowi przykład dobrze zaaran-
żowanego nurtu. Z pewnością pomaga w tym
fakt, że strona główna nie jest przeładowana
informacjami, a liczba opcji do wyboru — ra-
czej niewielka. Wzrok najpierw dostrzega duże,
ciekawe zdjęcie, które sugestywnie informuje
o ofercie producenta. Kolejnym przystankiem
jest lewa dolna część projektu, a po zapoznaniu
się z nią uwaga ponownie skupia się na głów-
nym zdjęciu. Ta elegancko zaaranżowana pętla
ułatwia wstępne zaznajomienie się z treścią
strony oraz dostępnymi możliwościami, a zara-
zem zachęca do bliższego zapoznania. Zauważ,
że pętla obejmuje wszystkie najważniejsze
elementy strony, a tym samym gwarantuje, iż
użytkownik znajdzie to, czego szuka. Warto też
zwrócić uwagę na fakt, że główne odsyłacze
zaprojektowano w nienarzucający się sposób.
W przeciwnym razie konkurowałyby one o miej-
sce w pętli i odwracały uwagę użytkownika od
najważniejszych informacji na stronie.
Zapętlony nurt można dostrzec także
w wielu innych przykładach przedstawionych
w tym rozdziale. Jak już wspomniałem, nurt
jest rezultatem strategicznego zastosowania
pozostałych aspektów projektu, a zarazem jed-
ną z tych kwestii, o której najłatwiej zapomnieć.
Jeśli odnoszę wrażenie, że projekt jest zły, to
analiza jego nurtu może odpowiedzieć na py-
tanie, dlaczego tak się dzieje.
027
Rysunek 1. http://www.wilsondoors.com
http://www.recaper.com
http://www.fontex.org
028
http://www.gcntv.org
Pobierz darmowy fragment (pdf)
