Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00114 007917 15367346 na godz. na dobę w sumie
Projektowanie WWW. Księga pomysłów. #2 - książka
Projektowanie WWW. Księga pomysłów. #2 - książka
Autor: Liczba stron: 264
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-4771-2 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> grafika komputerowa >> web design
Porównaj ceny (książka, ebook, audiobook).

Źródło inspiracji dla każdego projektanta WWW!

Liczba stron internetowych w dalszym ciągu rośnie lawinowo. W trakcie wędrówki po sieci znajdziesz strony czarno-białe, kolorowe, w układach jedno- i wielokolumnowych, przeznaczone dla urządzeń mobilnych, poświęcone sylwetkom znanych ludzi lub miejsc, a także pasjom, zdarzeniom, szczęściu oraz nieszczęściu. Skąd czerpać pomysły na nowe strony? Jak podejść do procesu ich projektowania, aby spełnić oczekiwania użytkownika i klienta? To pytania, które stawiają sobie projektanci - pytania, na które ciężko było znaleźć dobrą odpowiedź...

Aż do teraz. W Twoje ręce trafia rewelacyjna książka, która natchnie Cię dziesiątkami pomysłów na kolejną witrynę. Wiedza w niej zawarta pozwoli Ci zrozumieć, jak zadbać o harmonię Twojej strony oraz w jaki sposób wykorzystać kontrast czy akcenty. W czasie lektury dowiesz się, na co zwrócić uwagę przy projektowaniu strony poświęconej turystyce, a na co, jeżeli będzie to strona zespołu muzycznego. Ponadto poznasz różne podejścia do projektowania stron - od minimalistycznego po stawiające na grafikę i multimedia. Ta książka to obowiązkowa pozycja dla każdego projektanta stron internetowych. Dzięki niej już nigdy nie będziesz cierpiał na brak weny!

Ta książka pozwoli Ci:

Niepowtarzalna książka poświęcona projektowaniu stron internetowych!

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

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)

Gdzie kupić całą publikację:

Projektowanie WWW. Księga pomysłów. #2
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ą: