Projektowanie WWW #2. Księga pomysłów [PDF]

Zitiervorschau

Spis treści tytułem wstępu . . . . . . . 001 01 / inspiracja 002 inspiracja w procesie twórczym . . . . . . . . . 003 02 / podstawy projektowania 007 akcent . . . . kontrast . . . harmonia . . wyrównanie powtórzenie nurt . . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

009 012 016 020 024 027

03 / podział stron według typów 030 aplikacja na iphone’a niezależny twórca . . . zespół muzyczny . . . blog . . . . . . . . . . . . .

. . . .

. . . .

. . . .

031 036 041 045

strona prywatna . . . . . firma projektowa . . . . wydarzenie . . . . . . . . turystyka i podróże . . . e-commerce . . . . . . . . wizytówka firmowa . . . narzędzia internetowe oprogramowanie internetowe . . . . . nieruchomości . . . . . . portfolio . . . . . . . . . . . wkrótce . . . . . . . . . . . t-shirt . . . . . . . . . . . . . katalog . . . . . . . . . . . 04 / podział stron według składników wizualnych slogan . . . . . . . . . . . . światło . . . . . . . . . . . . iPhone jako ozdobnik . łącza do serwisów społecznościowych ikony . . . . . . . . . . . . .

. . . . . . .

. . . . . . .

051 055 059 063 067 072 075

. . . . . .

. . . . . .

078 083 087 092 096 100

103 . . 104 . . 109 . . 114 . . 119 . . 123

typografia . . . . . . . . . . . 129 tła fotograficzne . . . . . . . 135 05 / podział stron według stylów i motywów 139 przejrzysty . . . . minimalistyczny szkic . . . . . . . . kolaż . . . . . . . . ilustrowany . . . typograficzny . . jednolite barwy tekstylia . . . . . . drewno . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

140 145 150 154 160 166 171 177 185

06 / podział stron według stylów strukturalnych 193 nietypowa nawigacja . nietypowy układ . . . . . pseudoflash . . . . . . . . przewijanie w poziomie jedna strona . . . . . . . .

. . . . .

. . . . .

194 199 205 210 214

07 / podział stron według komponentów strukturalnych 220 zakładki . . . . . . . . . . . . przyciski . . . . . . . . . . . . formularze . . . . . . . . . . przyjazne strony główne funkcjonalne stopki . . . pokazy slajdów . . . . . . . błąd 404 . . . . . . . . . . . .

. . . . . . .

221 225 229 236 240 246 252

skorowidz praw autorskich . . . . 255

tytułem wstępu Z perspektywy projektanta internet jest jednym z najbardziej dynamicznie zmieniających się mediów. Style pojawiają się i odchodzą

i nie stanowi już obowiązkowego środowiska dla stron, które mają „robić wrażenie”. Niesamowitym motorem zmian był też rozwój plat-

Dynamika internetu, o której wspomina Autor, bywa bronią obosieczną. Strony, które jeszcze wczoraj tętniły życiem, dziś są zamknięte bądź

w szalonym tempie, a każdy dzień przynosi nowe rozwiązania techniczne, które stają się fundamentem dla kolejnych trendów i motywów, stosowanych na niezliczonych stronach

form mobilnych. Sieć się zmienia… jak zwykle! Branża internetowa oferuje nieprzebrane możliwości nauki oraz rozwoju i właśnie to sprawia, że zarówno ja, jak i wielu innych projektantów jesteśmy od niej uzależnieni.

też uległy daleko idącym przeobrażeniom. Zdajemy sobie sprawę, że część przykładowych projektów przedstawionych w książce już w chwili wydania będzie nieaktualna. Mamy

WWW. Jestem zafascynowany postępem w tej dziedzinie. Zwłaszcza ubiegły rok był udany dla internetowego designu. Wiele charakterystycznych cech „internetu 2.0”, takich jak po-

Właśnie to uzależnienie skłania mnie do obsesyjnego analizowania trendów i stylów, a potem redagowania na ich podstawie książ-

wszechnie stosowane pseudotrójwymiarowe opaski czy efekty szkła odeszły w niepamięć, a ich miejsce zajęły bardziej przemyślane, doskonalsze style. Trudno mi zarazem nie nawiązać do zmian,

ki. Już dziś myślę o tym, co może się pojawić w trzecim i czwartym wydaniu. Ta dociekliwość, a także nienasycony apetyt na rozwój i nowe informacje stanowią charakterystyczne cechy ludzi z branży projektowej. To właśnie dzięki

jakie dokonały się w czasie od wydania pierwszego tomu Web Designer’s Idea Book, zwłaszcza pod względem technicznym. Rosnąca popularność JavaScriptu oraz bibliotek takich jak

nim możesz wyszukać w Google rozwiązanie niemal każdego problemu związanego z projektowaniem. Tworzymy społeczność pasjonatów, która nie boi się dzielić wiedzą. Mam

jQuery zdecydowanie odcisnęły swoje piętno na wizerunku stron. Flash, choć nadal obecny, coraz częściej pojawia się w roli platformy do tworzenia rozmaitych narzędzi deweloperskich

nadzieję, że ta książka będzie choćby drobnym wkładem w rozwój tej społeczności. — Patrick McNeil

jednak nadzieję, że zamieszczone ilustracje spełnią swoją funkcję. Niektóre nieaktualne strony można też odnaleźć w archiwach WWW, takich jak http://archive.org/web/web.php. — redakcja Uwaga: Jeśli chciałbyś przesłać swoje projekty do ewentualnego zamieszczenia w kolejnych książkach, odwiedź stronę http://TheWebDesignersIdeaBook.com i zapisz się do listy mailingowej. Dwa razy do roku otrzymasz informacje o nowych edycjach książek, zaproszenia do zgłaszania propozycji i inne informacje związane z tymi publikacjami. Zgłaszanie projektów jest darmowe, wygodne i dostępne dla każdego. Nawet jeśli masz wrażenie, że prowadzisz działalność na zbyt małą skalę — nie wahaj się. Zależy mi na tym, aby prezentować także mniej znane strony. Moje książki mają odzwierciedlać to, co dzieje się w internecie, a nie być galerią najkosztowniejszych projektów.

001

/

inspiracja w procesie twórczym

inspiracja Jedno z najczęściej zadawanych mi pytań dotyczy tego, w jaki sposób czerpać inspirację z prac innych twórców, aby nie powielać, czy wręcz nie kraść cudzych pomysłów. Pod pewnymi względami odpowiedź na to pytanie jest oczywista: po prostu ich nie kradnij! Diabeł tkwi jednak w szczegółach. W którym momencie inspiracja zaczyna być kradzieżą? Granice są bardzo nieostre, zwłaszcza jeśli wziąć pod uwagę fakt, że nie działamy w próżni. Każdy projekt powstaje pod wpływem wcześniejszych prac, którymi jesteśmy otoczeni. To zagadnienie poruszał w swoich publikacjach między innymi Marko Prljić, projektant stron WWW. Marko jest też autorem tego rozdziału, w którym krok po kroku zapoznasz się z procesem tworzenia nowego projektu. Przy okazji przekonasz się, że koncepcje, podejścia i składniki zaczerpnięte z różnych miejsc mogą dać początek nowej, oryginalnej pracy. Chciałbym, aby ta książka była dla Ciebie inspiracją, a zarazem zachętą do czerpania pomysłów od innych, jednak bez ich dosłownego kopiowania.

002

/

inspiracja inspiracja w procesie twórczym

inspiracja w procesie twórczym Marko Prljić

NIE OGRANICZAJ SIĘ DO JEDNEGO PROJEKTU

Inspiruj się, ale nie kopiuj. Granica pomiędzy in-

Jeśli spodobał Ci się jakiś projekt i pomyślałeś

spiracją a naśladownictwem jest bardzo cienka, zaś codzienne obcowanie z mrowiem rozmaitych prac i projektów dodatkowo ją zaciera. Przy takim bogactwie źródeł znalezienie inspiracji jest dziś bardzo proste. Sam internet jest

sobie: „Mógłbym zrobić coś podobnego!”, to nie poprzestawaj na nim. Poszukaj innych projektów — o kolorystyce, strukturze albo treści podobnych do tego, który zamierzasz stworzyć.

przecież kopalnią pomysłów na strony WWW. Wprawdzie nie istnieje konkretny przepis na czerpanie inspiracji z poszanowaniem czyjejś pracy, ale dzięki kilku prostym zasadom można uniknąć literalnego powielania dokonań innych autorów. Opowiem o tym na przykładzie projektu strony internetowej, który niedawno zrealizowałem. Przekonasz się, że pomimo iż

Twoim celem powinno być wykorzystanie najlepszych składników każdego z nich i połączenie różnych koncepcji w jedną, spójną całość. Zacznij od wyobrażenia sobie nowego projektu jako połączenia elementów, które Cię zainspirowały. Pomyśl nad makietą nowej strony i zastanów się nad tym, jakie style można byłoby zastosować dla poszczególnych elementów. Idea polega nie na tym, aby wybrać

czerpałem z różnych źródeł inspiracji, otrzymany projekt wygląda oryginalnie i świeżo. Zanim jednak przystąpię do omawiania tego przykładu, przyjrzyjmy się wspólnie kilku kluczowym

jeden z projektów źródłowych i go wiernie skopiować, lecz raczej aby znaleźć pewien zestaw komponentów, które będą współgrały w nowy, ciekawy sposób. Zanim jeszcze zaczniesz two-

koncepcjom właściwego korzystania ze źródeł.

rzyć wstępne szkice, powinieneś mieć garść świeżych pomysłów, które pozwolą Ci opracować coś nowego — a co najważniejsze — jedynego w swoim rodzaju.

WIWISEKCJA PROJEKTÓW Punktem odniesienia dla inspiracji powinien więc być nie cały projekt, ale jego składniki, które są interesujące z punktu widzenia Twojej pracy. Zwróć uwagę na to, w jaki sposób inni projektanci rozwiązali interesujące Cię problemy i wykorzystaj te konkretne aspekty ich pomysłów we własnej koncepcji. Weźmy choćby przykładową stronę internetową (rysunek 1. na następnej stronie), na podstawie której można poczynić następujące ogólne spostrzeżenia:

• Nagłówek nie został wyodrębniony za pomocą kontrastujących barw lub ramek, jak to ma miejsce w większości stron WWW. • Paleta kolorów jest stosunkowo ograniczona i zawiera wiele subtelnych przejść tonalnych. • Wyraźny slogan reklamowy nie pozostawia wątpliwości co do celu istnienia strony.

• Pod dużym pokazem slajdów zamieszczono przejrzysty zestaw ikon, informujący o aktualnie wyświetlonym slajdzie.

003

Rysunek 2.

Rysunek 1.

004

Rysunek 3.

• Mnóstwo pustej (konkretnie szarej) prze-

Rysunek 2. z wyróżnionymi kilkoma kluczo-

strzeni sprawia, że strona sprawia przyjazne, zachęcające wrażenie.

wymi składnikami stanowi świetny przykład

gotowemu szablonowi, pokazanemu na ry-

takiej prostej analizy.

Najpierw proponuję jednak, abyś przyjrzał się

WYBÓR NAJCIEKAWSZYCH DETALI

TWORZENIE NOWEGO PROJEKTU

sunku 3. Gdy rozpoczynałem pracę nad tym szablonem, pomyślałem, że warto byłoby stworzyć

Gdy znajdziesz jakieś inspirujące projekty, przyjrzyj się im i wybierz te komponenty, które w głównej mierze decydują o ich atrakcyjności.

Przyjrzyjmy się teraz praktycznej realizacji tej koncepcji na przykładzie procesu tworzenia szablonu, jaki zaprojektowałem dla serwisu

stronę nowoczesną, o przemyślanej strukturze, wielofunkcyjną i umożliwiającą prezentowanie różnych treści, nie wyłączając możliwości

Przypatrz się gradientom, efektom świetlnym, typografii — wszystkim subtelnym detalom, które sprawiają, że projekt „żyje”. Zastanów się, co sprawia, że oglądana strona jest tak dobra.

http://themeforest.net. Przy kreowaniu szablonu inspirowałem się wyglądem kilku znakomitych stron internetowych. Za chwilę zademonstruję ich wpływ na jego końcowy kształt.

prowadzenia bloga. Na podstawie tych założeń zacząłem wstępnie wyobrażać sobie formę projektu.

Rysunek 4. Inspiracja

Rysunek 5. Projekt

Rysunek 6. Inspiracja

Rysunek 7. Projekt

005

Rysunek 9. Projekt

Rysunek 8. Inspiracja

Następnie wybrałem kilka stron internetowych, które posłużyły mi jako źródło inspiracji: • FreelanceSwitch

• Aviary • PsdTuts+ Inspiracja 1. FreelanceSwitch To, co przede wszystkim przypadło mi do gustu w projekcie tej strony, to pasek nawigacji: duży i czytelny, mieszczący dodatkowe informacje o każdym odsyłaczu. Ponadto tło paska składa się z kilku warstw, rozciągających się od góry do dołu, co nadaje stronie atrakcyjny wygląd (rysunki 4. oraz 5.). Inspiracja 2. Aviary Duży panel wyboru treści pośrodku strony głównej doskonale sprawdza się w praktyce, więc pomyślałem, że podobne rozwiązanie mogłoby być sercem mojego projektu. Jest to dość powszechnie spotykany komponent, ale zawsze warto się przyjrzeć, w jaki sposób

006

został potraktowany przez innych. Istnieje mnóstwo sposobów na to, aby nadać danemu składnikowi strony indywidualny rys — można to osiągnąć na przykład poprzez subtelne zmiany w konfiguracji i układzie treści (rysunki 6. oraz 7.). Inspiracja 3. PsdTuts+ Najważniejszym elementem zapożyczonym z tego projektu jest stopka: bardzo duża, zawierająca dodatkowe informacje i najważniejsze odsyłacze. Moją uwagę zwróciło też powtórzone logo, postanowiłem więc wypróbować podobne rozwiązanie w stopce mojego projektu (rysunki 8. oraz 9.).

PODSUMOWANIE W gotowym projekcie można dostrzec podobieństwa do różnych źródeł inspiracji, które przyczyniły się do jego powstania, ale całość wygląda oryginalnie, świeżo i nie sprawia wrażenia kalki jednego z pierwowzorów. Niektórzy być może stwierdzą, że moja propozycja polega na tworzeniu swoistego Frankensteina ze skrawków różnych pomysłów. Oczywiście, jeśli ograniczysz się do posklejania kilku kawałków zaczerpniętych z różnych stron, to uzyskany efekt raczej pozytywnie nie zaskoczy. Omawiane podejście wymaga ujednolicenia poszczególnych komponentów poprzez nadanie im wspólnego stylu, to zaś oznacza, że w żadnym momencie nie powinieneś tracić z oczu projektu jako całości. Podsumowując: inspiruj się, ale nie kopiuj!

/

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 dyskutować o abstrakcyjnych i trudno definiowalnych koncepcjach. Dzięki analizie rzeczywistych przykładów zyskujemy praktyczną wiedzę o podstawach projektowania. 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 zyskuję 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 projektowania, 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

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 poniż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 zdaniem 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 szczególnie istotnych składników strony. W wielu przypadkach ma on ścisły związek z hierar-

rolę pod względem wizualnym, aniżeli pozostawiać takie kwestie przypadkowi. Jeśli będziesz chciał zaakcentować wszystko, to w re-

chią ważności elementów, a niekiedy bywa z nią tożsamy. To oznacza, że chcąc zaakcentować określone treści, musisz przed opracowaniem projektu przeanalizować przede

zultacie nie wyróżnisz niczego. Przyjrzyjmy się kilku praktycznym przykładom, aby się przekonać, jakie działania podjęli projektanci w celu stworzenia wizualnej hierarchii treści zamiesz-

wszystkim jego zawartość i zdecydować, które informacje są najważniejsze, a które mniej istotne. Dopiero na tej podstawie można zbudować projekt, uwzględniający dostrzeżone

czonych na stronie.

zależności. Doskonałym sposobem na wyłonienie składników wymagających zaakcentowania jest stworzenie spisu elementów strony i ponumerowanie ich według ważności. Na podstawie otrzymanej listy należy następnie przygotować projekt w taki sposób, aby odzwierciedlał opracowaną strukturę. W ten sposó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ą

Bryan Connor (rysunek 1.) Strona Bryana Connora jest doskonałą ilustracją praktycznego zastosowania akcen-

wyróżnienia wszystkiego sprawia, że poszczególne elementy po prostu się zlewają. Digitalmash (rysunek 2.) Ta strona stanowi kolejny dobry przykład umiejętnego zaakcentowania elementów w celu pokierowania odbiorem treści przez widza. Duży, dominujący napis umieszczony na samej górze strony (podobnie jak w poprzednim przypadku) nie pozostawia wątpliwości co do intencji właściciela: strona ma pomagać w po-

tów. Jej najważniejszym elementem jest najnowszy 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-

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 wyeksponowania najnowszego wpisu na Twitterze. Ten serwis ma przyciągać potencjalnych zlece-

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-

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ć.

ment. Choć może się wydawać, że w przypadku takich stron równie ważne powinny być przykłady prac z portfolio albo informacje teleadresowe, to — jak już wspomniałem — próba

Cold Stone Creamery (rysunek 3.) Ta strona została zaprojektowana według dość powszechnego szablonu, opierającego się na efektywnym rozłożeniu akcentów. 009

Projekt zaczyna się klasycznym nagłówkiem

bannerem. W miarę przechodzenia do dolnej

miejsca. W tym projekcie mamy do czynienia

zawierającym logo oraz główne odnośniki, lecz już odrobinę niżej mamy do czynienia

części strony ważność poszczególnych ele-

z hierarchią o trzech poziomach. Na innych

mentów maleje i jest kontrolowana głównie poprzez przydzielenie im coraz mniejszej ilości

stronach może ich być więcej, choć nie jest to regułą.

z mniej typowym, silnie wyeksponowanym

Rysunek 2. http://www.digitalmash.com

Rysunek 1. http://www.bryanconnor.com

Rysunek 3. http://www.coldstonecreamery.com

010

Rysunek 4. http://www.greencircleshoppingcenter.com

Duży, animowany banner od razu przyciąga wzrok i pozwala właścicielom 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ęszczenie oznacza zarazem, że podane tutaj informacje odbiorca zauważy w drugiej kolejności. Zasadniczo hierarchia ważności powinna odzwierciedlać 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 kontrastujące elementy wydają się wyraźniejsze,

informacji o serwisie. Jak zawsze, tak i w tym przypadku należy wziąć pod uwagę cel konkretnego projektu oraz związane z nim wy-

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

a zarazem odrębne, zaś elementy o małym kontraście sprawiają wrażenie podobnych i zlewają się. Kontrast można uzyskać w ramach wielu różnych właściwości, takich jak

mogi. Zwrócenie uwagi na określone elementy 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.

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-

kolor, rozmiar, położenie, dobór krojów pisma oraz ich grubości. Umiejętne zastosowanie kontrastu wprowadza pożądane zróżnicowanie i pozwala uniknąć monotonii. Kontrast może też zwracać uwagę na określone elementy, a tym samym pełnić rolę wizualnego akcentu. 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żywany do akcentowania. W rezultacie może on decydować o wizualnej ważności poszczególnych składników projektu i przyciągać uwagę do komunikatów, kontrolek albo kluczowych 012

Twe4ked Studios (rysunek 1.) Dwa duże zielone przyciski tak silnie kontra-

rany jako drugorzędny. To zadziwiające, jak ważnym aspektem projektu jest kontrast i jak trudno uniknąć jego zastosowania.

stują z resztą strony, że nie sposób ich przegapić. 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

Be the Middle Man (rysunek 2.) Ta strona stanowi kolejny przykład tego, że ra-

aby się z nim skontaktował. Kontrast został wykorzystany jeszcze w kilku innych miejscach tego projektu. Na przykład krótki wstęp został

warki, gdyż jest to bezsprzecznie najistotniejszy element na ekranie. Cel działania strony jest więc bardzo jasny. Kolejny ciekawy aspekt

potraktowany priorytetowo: nie tylko zajmuje całą szerokość strony, lecz został złożony największym krojem pisma, a w rezultacie wyraźnie dominuje nad górną częścią strony.

tego projektu to stopniowy wzrost zagęszczenia tekstu w dolnej części. To także pewien sposób na płynne zwiększenie kontrastu, który koresponduje z naturalnym sposobem korzy-

dykalne zastosowanie kontrastu może wpływać na hierarchię treści i rzutować na działania użytkownika. Projektant wyraźnie zachęca odbiorcę do sprawdzenia możliwości wyszuki-

biorca zada sobie trud, aby przeczytać stronę do końca, to można założyć, że jego zaintere-

stania ze strony przez użytkownika. Jeśli od-

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ć

sowanie tematem stopniowo wzrasta (choć

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

014

http://www.mediacontour.com

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 elementów projektu oraz ich wpływu na rozkład ciężaru optycznego w obrębie strony. Harmonia 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 umiejscowienie podobnego ciężaru po przeciwnej stronie. Zaniedbanie tego aspektu może sprawić, że projekt będzie sprawiał wrażenie niestabilnego, 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ść dwojako: 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 naturalnym odbiciem drugiej, a co za tym idzie — oby016

dwie mają taki sam ciężar wizualny. Na stronach internetowych taki efekt na ogół uzyskuje się poprzez podzielenie ekranu na pół w pionie i nadanie obydwu połowom porównywalnego 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 parze z treścią i sprawia bardzo naturalne wrażenie. Zauważ, że w luksusowych samochodach kładzie się szczególny nacisk na osiągnięcie idealnej harmonii parametrów. Takie pojazdy są wręcz ucieleśnieniem stabilności i równowagi, jakie tylko można osiągnąć w trakcie jazdy. Jeśli spojrzeć na to z tej perspektywy, to symetryczny projekt doskonale koresponduje 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ładnie pośrodku. Taki zabieg nie tylko ułatwia osiągnięcie symetrii, lecz pozwala umiejscowić znak firmowy w kluczowym miejscu strony

(u góry i pośrodku zarazem). Projekt jest przejrzysty, 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 poszczególne elementy zgromadzone na jednej połowie nie są lustrzanym odbiciem drugiej. To dość zawiły opis, więc może inaczej: asymetryczna równowaga to wynik rozmieszczenia 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 przejrzysta 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 prezentowanych treści. W tym przypadku asymetryczna równowaga obejmuje właściwie całą stronę, 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 zagospodarowana 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 poprzez 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 widzimy 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

Rysunek 1. http://www.mintwheels.com

idealnie symetrycznie. Harmonia jest jednym z subtelniejszych aspektów projektu — dla wielu ludzi także jednym z najbardziej instynktownych do zastosowania. Jeśli odnosisz wrażenie, że projekt wygląda źle, zastanów się, czy nie mógłbyś go zrównoważyć poprzez zminimalizowanie kontrastów. Może to oznaczać na przykład zmodyfikowanie 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 napotkasz problemy z harmonią projektu. Rysunek 2. http://whydbu.dbu.edu

017

Rysunek 3. http://campaignmonitor.com/designers

http://viminteractive.com

018

http://www.nationalbreastcancer.org

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 elementów w taki sposób, aby ich krawędzie (albo obramowania) naturalnie do siebie pasowa-

stronę trudno jest zachować oryginalny układ i wyrównanie obiektów. Wierne odzwierciedlenie struktury źródłowej jest nie tylko sporym

Indextwo (rysunek 2.) Do wyrównywania nie trzeba podchodzić aż tak radykalnie. Ten aspekt projektowania

ły. Przy takiej aranżacji — nazywanej niekiedy siatką — składniki strony nabierają spójności i tworzą większą całość. Z kolei niewyrównane elementy sprawiają wrażenie oderwanych

wyzwaniem, lecz niesie za sobą także ryzyko przeoczenia misternie skomponowanych detali. Znajomość mechanizmów rządzących projektem na tym poziomie bardzo pomaga także przy współpracy z deweloperem.

niekiedy uwzględnia się niejako samorzutnie, a kiedy indziej można go rozmyślnie zignorować. W projekcie przykładowej strony można wyróżnić trzy zasadnicze kolumny. W ramach

i burzą integralną strukturę strony, na której zwykle nam zależy. Przykładem wyrównania elementów może być dopasowanie położenia 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 strukturze 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 okazuje się bowiem, że w trakcie przekształcania makiety na prawdziwą, w pełni funkcjonalną

020

Design Without Frontiers (rysunek 1.) Ta strona może być traktowana jako wzorcowy przykład posługiwania się wyrównaniem w projektowaniu na potrzeby internetu. Celowe, konsekwentne przestrzeganie reguł sprawił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 tytułami. Dzięki takiemu rozwiązaniu wystarczy prześledzić układ krawędzi, aby domyślić się zamiarów projektanta. Skrupulatne wyrównanie komponentów przyczyniło się w tym przypadku do powstania doskonale zrównoważonego projektu.

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ę kolumn, to separator między dwoma pierwszymi odsyłaczami wypada dokładnie na krawędzi jednej z nich. Jest to doskonały przykład złamania 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.

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

022

http://theurbanmama.com

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, nabierają 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-

zualną spójność z odstępami w innych miejscach strony. Ta harmonia przekłada się na bardzo przejrzysty, czytelny projekt. Zauważ,

lu przypadkach powtórzenie okazuje się szalenie istotne, gdyż projekt pozbawiony regularności na ogół sprawia wrażenie niejednolitego. Ogromną zaletą powtórzeń jest przewidy-

ż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

walność. Konsekwencja stylistyczna najważniejszych elementów projektu sprawia, że użytkownik szybko uczy się oczekiwać konkretnych efektów swoich działań. Niestety, wiele serwisów WWW jest niespójnych wizualnie: każda

tego projektu, który został wielokrotnie powtórzony, jest podwójny układ elementów tekstowych: większym napisom zawsze towarzyszy mniejszy napis pomocniczy. Na przykład pod logotypem znajduje się mniejszy slogan

podstrona stanowi nowe doświadczenie i nie ma wspólnej formuły działania.

reklamowy, pod dużym numerem telefonu widnieje zachęta do skorzystania z niego, duży napis obok mapy zaopatrzono w wyjaśnienie złożone znacznie drobniejszym pismem,

Vim Interactive (rysunek 1.) W tym projekcie można wyróżnić tyle przykładów powtarzalności elementów, że omówienie ich wszystkich zajęłoby kilka stron książki. Postanowiłem więc zwrócić uwagę jedynie na

024

te mniej oczywiste. Jednym z nich jest zastosowanie regularnych odstępów. Zwróć uwagę na marginesy między tekstem i krawędziami ramek informacyjnych, a zwłaszcza na ich wi-

wie, czego może oczekiwać, a powtarzalność kluczowych elementów działa uspokajająco.

a każda z ramek „LEARN MORE” zawiera nagłówek i nieco mniejszy tekst informacyjny. Taki układ sprawia bardzo przewidywalne wrażenie. Użytkownik korzystający z tego typu strony 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://anderbose.com

026

http://www.nathanhackley.com

/

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łównej mierze od sposobu zaakcentowania pew-

strony jest zły? Ja w trakcie wybierania stron będących przykładem poprawnego nurtu postawiłem sobie odwrotne pytanie: a co sprawia,

o ofercie producenta. Kolejnym przystankiem jest lewa dolna część projektu, a po zapoznaniu się z nią uwaga ponownie skupia się na głów-

nych elementów oraz rozkładu kontrastów. Można powiedzieć, że ten swoisty „kierunek zwiedzania” stanowi konsekwencję pozostałych aspektów projektu.

że jest dobry? I zacząłem szukać takich stron, których obsługa przebiegała płynnie, wygodnie i tak naturalnie, jak to tylko możliwe. Strona może być skomplikowana, lecz jej struktura po-

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 zarazem zachęca do bliższego zapoznania. Zauważ,

Przy analizie nurtu zawsze warto brać pod uwagę naturalny porządek rzeczy. Na podstawie wyników badań wiemy, że sposób odbioru treści przez użytkowników jest dość przewi-

winna być podporządkowana komfortowi obsługi; tak abym nie czuł się jak bila miotana po wszystkich zakamarkach stołu. Z mojego punktu widzenia płynny nurt jest lepszy od skoko-

ż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

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 —

wego. Owszem, wzrok człowieka w naturalny sposób przeskakuje między różnymi elementami projektu, lecz strona cechująca się płynnym nurtem będzie zachęcała do korzystania z niej w ustalony sposób i kierowała wzrokiem

zaprojektowano w nienarzucający się sposób. W przeciwnym razie konkurowałyby one o miejsce w pętli i odwracały uwagę użytkownika od najważniejszych informacji na stronie. Zapętlony nurt można dostrzec także

taka dziwaczna. W postępowaniu wbrew naturalnemu porządkowi nie ma nic złego; trzeba po prostu uwzględnić konsekwencje takich decyzji. Chodzi o to, że rozsądniej jest płynąć

tak, aby podsycać zainteresowanie odbiorcy.

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-

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

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 — raczej niewielka. Wzrok najpierw dostrzega duże, ciekawe zdjęcie, które sugestywnie informuje

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 pytanie, dlaczego tak się dzieje. 027

Rysunek 1. http://www.wilsondoors.com

http://www.fontex.org

028

http://www.recaper.com

http://www.gcntv.org

http://www.sofiaregalo.com http://hungryhowies.com

http://www.digitalnoon.com http://garyplayer.com

029

/

aplikacja na iphone’a • niezależny twórca • zespół muzyczny • blog • strona prywatna • firma projektowa • wydarzenie • turystyka i podróże • e-commerce • wizytówka firmowa • narzędzia internetowe • oprogramowanie internetowe • nieruchomości • portfolio • wkrótce • t-shirt • katalog

podział stron według typów Ktoś mógłby podać w wątpliwość sens przedstawiania małego, wyselekcjonowanego zestawu różnych typów stron w książce takiej jak ta, gdyż przekrojowe omówienie nawet podstawowych rodzajów witryn zajęłoby wiele takich tomów. Moim celem nie było jednak przedstawienie wszystkich potencjalnych odmian stron WWW. Z tym rozdziałem wiążę natomiast dwie nadzieje. Po pierwsze, chciałem wyróżnić kilka spośród najaktywniejszych nurtów w branży projektowej (na przykład strony poświęcone aplikacjom na iPhone’a) i w ten sposób dokonać przeglądu najgorętszych spośród aktualnych tematów. Po drugie, uważam, że każdy z wymienionych typów stron może być inspiracją dla projektu o dowolnej tematyce. Każdy z nich to zarazem pewna lekcja projektowania i każdy wymaga pokonania nieco innych przeszkód. Te lekcje i przeszkody dają się z łatwością przełożyć na problematykę związaną z innymi projektami. Nie zniechęcaj się do uważnego zapoznania się z tą częścią książki, nawet jeśli nie znalazł się w niej reprezentant Twojej niszy rynkowej. Po prostu przejrzyj przedstawione w niej koncepcje i czerp z nich inspirację! 030

/

podział stron według typów aplikacja na iphone’a • niezależny twórca • zespół muzyczny • blog • strona prywatna • firma projektowa • wydarzenie • turystyka i podróże • e-commerce • wizytówka firmowa • narzędzia internetowe • oprogramowanie internetowe • nieruchomości • portfolio • wkrótce • t-shirt • katalog

aplikacja na iphone’a Aplikacje dla telefonu iPhone przeżywają szczyty popularności i nic nie wskazuje na to, aby w najbliższej przyszłości miało się to zmie-

konkretnej grupy wiekowej, lecz jej estetyka bez wątpienia nawiązuje do pewnego kręgu zainteresowań. Krótko mówiąc, świetnie tra-

wybrane produkty. Pod wieloma względami przedstawione strony mogłyby stanowić studium skuteczności w nakłanianiu odbiorcy

nić. Wiele aplikacji jest niezwykle użytecznych, a znacząca większość z nich jest bardzo tania czy wręcz darmowa. Programy tego typu są też używane w ramach rozszerzonej kampanii wi-

fia w gusta odbiorców, którzy zainteresowani są parzeniem herbaty. Kolejnym przykładem strony zaadresowanej do ściśle określonej grupy odbiorców jest

do podjęcia oczekiwanej decyzji. Aż chce się zapytać, dlaczego inne strony internetowe nie są tak precyzyjnie ukierunkowane. W takim wydaniu znakomicie sprawdzałyby się na przy-

zerunkowej marki. Jednym z najważniejszych aspektów tworzenia aplikacji dla iPhone’a jest konieczność przygotowania wyjątkowo atrakcyjnej oprawy, zwłaszcza że sama firma Ap-

serwis Outpost (rysunek 2.). Ponieważ promowana na nim aplikacja stanowi rozszerzenie środowiska Basecamp, więc projekt strony w oczywisty sposób nawiązuje do wyglądu

kład serwisy z portfolio.

ple odrzuca propozycje, które nie spełniają wysokich standardów estetycznych. Nic więc dziwnego, że wiele stron promujących takie programy również prezentuje się nadzwyczaj elegancko.

tego środowiska: zastosowano nawet podobną kolorystykę, aby zaakcentować bliskie relacje między obydwoma projektami. W rezultacie strona sprawia wrażenie naturalnego rozszerzenia marki Basecamp.

Strony służące do promowania aplikacji adresowane są na ogół do precyzyjnie określonych grup odbiorców, a ich głównym celem jest skłonienie użytkownika do szybkie-

Zaprezentowane tutaj projekty znakomicie spełniają swoje główne funkcje, które polegają na zainteresowaniu klienta i zachęceniu go do zakupu. W pewnym sensie są to przecież mi-

go zakupu. Na przykład na stronie Tea Round (rysunek 1.) można nabyć aplikację związaną z parzeniem herbaty. Strona nie wygląda wprawdzie, jak gdyby była adresowana do

niaturowe sklepy internetowe, mające na celu skierowanie odbiorcy do „kasy”. To tłumaczy obecność dużych, czytelnych odsyłaczy do Apple App Store, gdzie można kupić i pobrać http://libertyboom.com

031

Rysunek 1. http://tearoundapp.com

Rysunek 2. http://www.outpostapp.com

http://www.ticatacgames.net/static/iphone_teaser

032

http://www.glasshouse-apps.com

uwagi od dewelopera Strony poświęcone aplikacjom dla iPhone’a wręcz proszą się o to, aby zamieścić na nich wirtualny telefon, który umożliwiałby wstępne zapoznanie się z aplikacją oraz jej działaniem. Można to zrobić na jeden z trzech sposobów: Wideoklip Zamiast projektować wirtualnego iPhone’a, na którym użytkownik mógłby wypróbować działanie aplikacji, można wybrać prostszy wariant, polegający na zamieszczeniu na stronie filmu prezentującego jej możliwości. Najwygodniej zrobić to we Flashu. Zamieszczenie filmu na stronie jest proste; znacznie kosztowniejsza będzie jednak obróbka i montaż materiału wideo. Emulator Flash Jeśli chciałbyś zapewnić użytkownikowi możliwość interakcji z wirtualnym telefonem, możesz opracować we Flashu animację naśladującą iPhone’a. Takie rozwiązanie jest jednak czasochłonne i będzie wymagało wprowadzenia zmian po każdej aktualizacji emulowanego programu. Prosty pokaz slajdów Kolejnym często spotykanym rozwiązaniem jest prosty pokaz slajdów. To doskonały pomysł, gdyż taki pokaz można łatwo zrealizować i często aktualizować bez większych (lub wręcz żadnych) nakładów finansowych. W rozdziale „iPhone jako ozdobnik” na stronie 114. znajdziesz wskazówki dotyczące projektowania stron, których głównym elementem jest iPhone.

http://syphone.selcukyilmaz.com

http://skimaps.planetreesoftware.com

033

http://www.momentoapp.com

http://www.baristaapp.com

http://www.2udoku.com

034

http://www.thermometerapp.com

http://tapbots.com/weightbot

http://www.futuretap.com/home/whereto-en

035

/

podział stron według typów aplikacja na iphone’a • niezależny twórca • zespół muzyczny • blog • strona prywatna • firma projektowa • wydarzenie • turystyka i podróże • e-commerce • wizytówka firmowa • narzędzia internetowe • oprogramowanie internetowe • nieruchomości • portfolio • wkrótce • t-shirt • katalog

niezależny twórca Strony internetowe tzw. wolnych strzelców (zwłaszcza projektantów WWW) to coś pośredniego między internetowym portfolio

są niesamowicie czytelne. Precyzja projektu, jego struktura i hierarchia elementów są absolutnie bez zarzutu. Slogan reklamowy jest

a serwisem dużej agencji projektowej. Takie strony muszą zawierać informacje o autorze, jego (lub jej) umiejętnościach oraz upewnić widza, że ma do czynienia z osobą profesjo-

znakomicie wyeksponowany, a cztery „pojemniki” w stopce prowadzą użytkownika za rękę do najważniejszych części serwisu. Podobną funkcjonalnością cechuje się strona Davida Jamesa (rysunek 2.), choć oczekiwany efekt został tutaj osiągnięty za pomocą zupełnie innych metod: autor po-

nalną i godną zaufania. Nie ma nic gorszego niż niesumienny freelancer. Jednym z najciekawszych przykładów stron należących do tej niszy jest serwis Hero for Hire autorstwa Roba Morrisa (rysunek 1.). Chyba każda nowa odsłona strony Roba wzbudza aplauz; zresztą całkiem zasłużenie — są to bowiem serwisy eleganckie, funkcjonalne i po prostu piękne. Projekty Roba często są naśladowane lub wręcz kopiowane. Co decyduje o ich niepowtarzalności? Przede wszystkim

036

stawił głównie na dostępność przykładowych projektów z portfolio. Niemniej jednak serwis jest bardzo uporządkowany, łatwy w odbiorze i stanowi świetną wizytówkę profesjonalizmu projektanta. Traxor Designs to kolejny interesujący przykład tego typu serwisu (rysunek 3.). Warto zwrócić uwagę na bardzo precyzyjnie

skonstruowane hasła reklamowe. Branża projektowa jest pełna nisz, wymagających ściśle określonych umiejętności. W tym przypadku wystarczy rzut oka na slogan, aby się przekonać, że autor skupia się przede wszystkim na projektowaniu oraz na pozycjonowaniu stron w wyszukiwarkach. Tak klarowny komunikat pomaga przyciągnąć klientów z dokładnie takimi zleceniami, jakich oczekuje projektant. Podobny kierunek obrał Ronnie San (rysunek 4.), o czym świadczy hasło „your website, simplified” („Twoja strona WWW, ale prościej”). Autor wie, że tworzenie stron WWW dla nieznających tematu jest procesem skomplikowanym i uciążliwym. Postanowił więc wyróżnić się w tłumie projektantów i zachęcić klientów wizją bezproblemowego stworzenia własnej strony internetowej.

Rysunek 1. http://www.digitalmash.com Rysunek 3. http://www.traxor-designs.com

Rysunek 2. http://www.djgd.co.uk

Rysunek 4. http://www.ronniesan.com

037

http://madebyelephant.com

http://www.patrickmonkel.nl

038

http://www.lynncyr.com

http://www.zivmeltzer.com

http://www.brizk.com

039

http://petehellyer.com

http://ryanplesko.com

http://larkef.com

040

/

podział stron według typów aplikacja na iphone’a • niezależny twórca • zespół muzyczny • blog • strona prywatna • firma projektowa • wydarzenie • turystyka i podróże • e-commerce • wizytówka firmowa • narzędzia internetowe • oprogramowanie internetowe • nieruchomości • portfolio • wkrótce • t-shirt • katalog

zespół muzyczny Jeśli chciałbyś kiedyś podjąć się ciekawego eksperymentu, to strony WWW zespołów muzycznych są ku temu doskonałą okazją. Proponuję, abyś zapoznał się z internetowymi wizytówkami kilku zespołów, których zupełnie nie znasz. Na podstawie tego, co na nich zobaczysz, postaraj się zrobić krótki opis stylów

korzenie serwisu MySpace to właśnie promocja zespołów muzycznych. Niemal na każdej z przykładowych stron znajdują się odsyłacze do MySpace, Facebooka i innych sieci; często zajmują one jedno z głównych miejsc na stro-

Zwłaszcza mało znani wykonawcy (albo stawiający pierwsze kroki) decydują się na bardzo silne wyeksponowanie nazwy zespołu, która

nie. Czy to oznacza, że jedna z najważniejszych funkcji, jakie może pełnić strona kapeli muzycz-

bywa największym, dominującym elementem strony. Na przykład strona zespołu The Iveys (rysunek 3.) oraz jej ozdobne obramowanie zajmuje niemal cały ekran.

muzycznych, jakie przypuszczalnie grają poszczególni wykonawcy. Każda muzyka ma określony nastrój, styl i tempo (wśród wielu innych cech, jakimi moż-

nej, polega na rozbudowywaniu siatki kontaktów w takich serwisach? Przypuszczalnie tak, zwłaszcza jeśli wziąć pod uwagę wyjątkowo cenne miejsca, w których na ogół umiejsco-

Niektórym zespołom zależy na stworzeniu radykalnych, eksperymentalnych projektów, których zadaniem jest odzwierciedlać ich nowatorski, niepowtarzalny styl muzyczny. Roz-

na ją opisać). Projekty stron także cechują się określoną estetyką. Doskonałym probierzem jakości projektu jest stylistyczna spójność obydwu mediów. Niemniej jednak przy dobieraniu pokaza-

wione są ich ikony. Kolejnym wspólnym mianownikiem omawianych stron jest dążenie do stworzenia indywidualnego stylu czy też wizualnego języka. Niektóre mają bardzo bogatą szatę graficzną

sądni projektanci starają się jednak nawet wówczas ująć projekt w pewne funkcjonalne ramy, które ułatwią odbiorcy zapoznanie się z informacjami o wykonawcy.

nych tutaj stron nie przykładałem do tego dopasowania szczególnie dużej wagi. Zależało mi raczej na zaprezentowaniu różnych trendów, rozwijających się w tej niszy gatunkowej. Przy

(jak strona Goodbye Elliot, rysunek 1.), inne są realizowane w myśl określonej maniery stylistycznej (jak strona Standard Thompson, rysunek 2.), jeszcze inne stawiają przede wszystkim

ich oglądaniu daje się zauważyć pewna prawidłowość, a mianowicie powszechna obecność serwisów społecznościowych, która nabiera szczególnej wymowy w świetle tego, że

na ozdobniki. Na podstawie projektów tych stron można wyciągnąć wniosek, że jedną z najważniejszych kwestii dla wielu zespołów jest marka. http://betterplacerecordings.com

041

Rysunek 2. http://www.standardthompson.com

uwagi od dewelopera Rysunek 1. http://www.goodbyeelliott.com

Przy realizacji projektów należących do konkretnych nisz gatunkowych trudno uciec od wykorzystania pewnych wspólnych elementów. Innymi słowy, zawartość pokrewnych stron jest na ogół bardzo podobna. Serwis MySpace na początku swego istnienia przyciągnął wiele zespołów muzycznych, gdyż był bardzo prosty w obsłudze, ułatwiał rozpowszechnianie informacji o wykonawcy oraz udostępnianie jego muzyki. Obecnie istnieje wiele zautomatyzowanych platform do tworzenia stron WWW, a wiele z nich jest przystosowanych do określonych rodzajów projektów. Nie inaczej jest w przypadku branży muzycznej. Doskonałym przykładem takiej platformy jest http://ebandlive.com. Kilka stron zaprezentowanych w tym rozdziale zostało zbudowanych właśnie na bazie tego rozwiązania. Przywołuję ten przykład dlatego, że wykorzystanie narzędzi tego typu może zdecydowanie uprościć zaprojektowanie strony zespołu muzycznego. Sprawdzają się one najlepiej wówczas, gdy z góry zaplanujesz wykorzystanie określonej platformy i przygotujesz projekt z myślą o jej funkcjonalności. Zważywszy na to, że większość początkujących zespołów muzycznych nie stać na to, aby zapłacić za stworzenie projektu autorskiego, jest to znakomite wyjście, które umożliwia zaoferowanie klientowi wielu przydatnych funkcji za przystępną cenę. Co więcej, budżet zaoszczędzony na korzystaniu z gotowych rozwiązań można poświęcić na projektowanie szaty graficznej, co przełoży się na bardziej estetyczny wygląd projektu.

Rysunek 3. http://www.theiveysmusic.com

042

http://www.rocketclub.info

http://10outoftenn.com

http://www.dimmn.com

http://www.jazzforme.de

043

044

http://www.sickcityclub.net

http://sourhaze.com/ep1

http://www.muddriverunion.com/index.htm

http://www.marianastrench.net

/

podział stron według typów aplikacja na iphone’a • niezależny twórca • zespół muzyczny • blog • strona prywatna • firma projektowa • wydarzenie • turystyka i podróże • e-commerce • wizytówka firmowa • narzędzia internetowe • oprogramowanie internetowe • nieruchomości • portfolio • wkrótce • t-shirt • katalog

blog Blogowanie jest bardzo żywotnym nurtem w obecnej generacji internetu. Kwintesencją blogowania jest tworzenie wspólnoty czytelni-

(rysunek 2.) posługuje się zrzutami ekranu, które dowodzą skuteczności publikowanych samouczków. Z kolei każdy wpis na blogu Sta-

Łatwo i przystępnie Niezależnie od tego, czy projektujesz bloga typu „pamiętnik mamusi”, czy dziennik z infor-

ków. Podobnie jak dowolna inna strona internetowa, blog musi umieć zainteresować widza „od pierwszego wejrzenia”. Poniżej znajdziesz najważniejsze wskazówki dotyczące projekto-

tement (rysunek 3.) ilustrowany jest kilkoma grafikami albo zdjęciami o odpowiednio dobranej tematyce, co pozwala stworzyć swoistą galerię obrazów.

macjami korporacyjnymi, idea jest taka sama: blog potrzebuje odbiorców, którzy będą subskrybowali aktualizacje, komentowali wpisy i udostępniali je innym.

wania blogów, które ułatwiają dotarcie z przekazem do odbiorcy. Ilustrowanie wpisów zachęca do ich czytania Blogowi stratedzy argumentują, że każdy wpis powinien być zatytułowany krótko i w sposób przykuwający uwagę. Choć rzeczywiście jest to skuteczna wskazówka, która zachęca do zapoznania się z treścią wpisu, to nie jedyna. Kolejny sposób na zwrócenie uwagi użytkownika polega na ozdobieniu każdego wpisu zdjęciami bądź ilustracjami. Każda ilustracja powinna być interesująca, sugestywna i związana z treścią notki. Na przykład blog Inspired Mag (rysunek 1.) ozdabia wszystkie wpisy specjalnie opracowanymi grafikami. Blog Design Shard

Wyróżnij pewną grupę artykułów Możesz to zrobić za pomocą prostej ramki, zmiany koloru, elementu graficznego albo dowolnego innego zabiegu estetycznego, który zwróci uwagę widza na wyodrębnioną część strony, w której należy zgromadzić najnowsze albo najpopularniejsze artykuły. Na blogu idsgn (rysunek 4.) najnowszy artykuł zwraca uwagę dużym zdjęciem oraz położeniem. Na stronie głównej bloga Upsidestudio (rysunek 5.) pokazany jest tylko jeden, najnowszy artykuł. Z kolei na blogu Snook (rysunek 6.) ostatni wpis jest wyeksponowany poprzez zastosowanie pogrubionego i powiększonego tekstu, a także przez niewielką zmianę położenia względem pozostałych. Rysunek 1. http://www.inspiredm.com

045

Ułatw im to — pozwól użytkownikowi osiąg-

rozmieszczone są w kilku różnych, łatwo do-

Udostępnianie: Oprócz łączy do komentarzy

nąć oczekiwany cel poprzez zastosowanie wygodnych, tradycyjnych odsyłaczy i elementów graficznych.

stępnych miejscach.

każdy wpis powinien umożliwiać łatwe publikowanie prowadzącego doń adresu URL w serwisach społecznościowych. Na ogół używa się w tym celu łącza w postaci logo danego ser-

Subskrypcja: Ikona RSS stała się jednym z kluczowych elementów każdego bloga. Dobrze jest umieścić ją u góry, pośrodku i na dole projektu. Po jej kliknięciu na ekranie powinna pojawić się strona oferująca kilka różnych wariantów subskrypcji. Na przykład na blogu Upsidestudio (rysunek 5.) ikony RSS

Rysunek 2. http://www.designshard.com

046

Komentarze: Każdy wpis powinien być zaopatrzony w łącze odsyłające bezpośrednio do formularza umożliwiającego wysyłanie komentarzy. Zachęć użytkownika do komentowania poprzez umieszczenie przy wpisie licznika komentarzy lub uwagi: „Bądź pierwszym, który

wisu. Po kliknięciu go na ekranie wyświetla się okienko wraz ze wszystkimi informacjami, które są niezbędne do udostępnienia wpisu.

skomentuje ten wpis”. Niektórzy czytelnicy lubią dołączać do trwających konwersacji, inni natomiast wolą jako pierwsi dzielić się swoimi uwagami.

Rysunek 3. http://www.theoldstate.com/blog

Rysunek 4. http://www.idsgn.org

Rysunek 5. http://upsidestudio.com

047

http://www.havocinspired.co.uk

uwagi od dewelopera Z punktu widzenia dewelopera jedna z największych przeszkód w opracowaniu kodu bloga wynika z zawiłości niektórych projektów, które przygotowywane są przez grafików. Bardzo często się zdarza, że koncepcja aranżacji Rysunek 6. http://snook.ca

treści jest nieelastyczna, przesadnie skomplikowana i niemal zawsze wymaga zastosowania dziwnych, animowanych przejść. Zderzenie wizji opracowanej z takim rozmachem z rzeczywistą funkcjonalnością platform blogowych w rodzaju WordPressa może być frustrujące. Grafik, który nigdy nie miał styczności z programowaniem, często decyduje się na stworzenie projektu kłopotliwego i kosztownego w realizacji. Tymczasem misja projektanta bloga polega raczej na upraszczaniu (choć oczywiście z zachowaniem odpowiedniej estetyki) i skupieniu się na użytkowej stronie projektu, która by ułatwiała odbiór treści przez użytkownika. Jako projektant powinieneś na własną rękę opracować jeden albo dwa projekty w postaci szablonów (tematów graficznych) dla WordPressa, gdyż w ten sposób najłatwiej jest się przekonać, na czym polegają jego ograniczenia i jak działa dynamiczna strona internetowa. Jestem przekonany, że autorzy

http://razvanphotography.com

najlepszych szablonów sami zmierzyli się z takim zadaniem i doskonale znają możliwości tej popularnej platformy.

048

http://jasonsantamaria.com

http://beyondjazz.net

049

http://exp.horizontal.mykl.nl

http://blog.cocoia.com

050

http://roquealonso.org

/

podział stron według typów aplikacja na iphone’a • niezależny twórca • zespół muzyczny • blog • strona prywatna • firma projektowa • wydarzenie • turystyka i podróże • e-commerce • wizytówka firmowa • narzędzia internetowe • oprogramowanie internetowe • nieruchomości • portfolio • wkrótce • t-shirt • katalog

strona prywatna Idea osobistych stron WWW sięga do samych początków internetu, czyli do czasów, gdy posiadanie takiej witryny było dowodem na

osobie. Oprócz typowych przykładów projektów z portfolio widzimy tutaj także nawiązania do życia osobistego, które nadają tej wizytówce

Niezależnie od tego, czy chcesz stworzyć stronę dla małego dziecka, czy zależy Ci na stworzeniu wizytówki o półprofesjonalnym

opanowanie wiedzy tajemnej i gdy większość ludzi nie umiała nawet przeglądać stron, a co dopiero projektować. Obecnie osobiste strony internetowe są bardzo rozpowszechnione.

bardziej prywatny charakter, pasujący do omawianej kategorii. Przypuszczalnie najciekawszym aspektem tej strony są mechanizmy automatycznej aktualizacji. Zwróć uwagę na łącza do

charakterze, zestaw przykładowych stron powinien być dla Ciebie ciekawym materiałem do studiów nad rozwiązaniami stosowanymi przez innych projektantów.

Kombinacja WordPressa i kilku kluczowych rozszerzeń (pluginów) pozwala bardzo szybko stworzyć ładną i łatwą do aktualizowania stronę. Jeśli podłączysz do niej serwisy takie jak Flickr, Last.fm czy Twitter, goście strony będą

serwisów społecznościowych, które umożliwiają czytelnikom nawiązanie kontaktu z autorem za pośrednictwem wybranej platformy. Kolejnym ciekawym przykładem projektu należącego do tej kategorii (a przy tym pozba-

mogli dowiedzieć się na Twój temat wszystkiego, co dusza zapragnie. To zresztą zasadnicza różnica, która dzieli tego typu wizytówkę od portfolio bądź stron

wionym aspektów biznesowych) jest strona Trista oraz Jen Chiappisi (rysunek 2.). Początkowo był to blog weselny, który z czasem przekształcił się w prywatną stronę nowożeńców,

o bardziej biznesowym charakterze. Personalne strony WWW umożliwiają odwiedzającym bliższe poznanie ich właściciela, a ich wartość nie ogranicza się do kwestii zawodowych, lecz

za pośrednictwem której dzielą się oni swymi przeżyciami z rodziną i przyjaciółmi. Choć takie strony mają relatywnie małe grono odbiorców, to nadal powinny być funkcjonalne. Wystar-

ma wyraźny rys osobisty, zachęcający rodzinę i przyjaciół do śledzenia najnowszych przygód i wydarzeń w życiu autora. Strona Chrisa Sloana (rysunek 1.) to inter-

czy wziąć pod uwagę choćby rozpiętość wieku czytelników, aby zrozumieć, jak ważna jest przystępność tego typu projektów (a także ich czytelność — nie należy stosować na nich zbyt

netowy dom projektanta i dewelopera w jednej

drobnego tekstu).

http://www.havocinspired.co.uk

051

052

Rysunek 1. http://chrissloan.info

Rysunek 2. http://www.chiappisi.com

http://www.jasongraphix.com

http://www.joedowdle.com

uwagi od dewelopera Treść omawianych stron internetowych skupia się raczej na kwestiach osobistych, ale to nie znaczy, że nie można na nich zamieścić garści najważniejszych informacji zawodowych. W szczególności mam tutaj na myśli jakąś formę CV. To świetny zabieg, zwłaszcza jeśli weźmie się pod uwagę fakt, że w ramach rutynowego procesu rekrutacyjnego pracodawcy często weryfikują swoich potencjalnych pracowników w internecie. Warto wiedzieć o kilku znakomitych serwisach, które ułatwiają przygotowanie życiorysu zawodowego w wersji internetowej. Taką funkcjonalność http://benjaminminnich.com

oferują między innymi strony http://Krop.com, http://ceevee.com oraz http:// innovativeresume.com. Jeśli bardzo potrzebujesz CV, które można byłoby opublikować w internecie, to nie przypuszczam, abyś chciał czekać na zaprzyjaźnionego programistę, który pomoże Ci je przygotować, ani też nie zdecydujesz się na improwizowanie czegoś samemu (w końcu to CV, tu nie ma miejsca na improwizacje). W takich przypadkach w sukurs przychodzą wymienione narzędzia, ułatwiające stworzenie eleganckiego życiorysu, który będzie Cię świetnie reprezentował online.

http://www.liamjmoore.com

http://www.neboo5.net

053

http://www.allaboutchris.co.uk

http://www.tjmapes.com

054

/

podział stron według typów aplikacja na iphone’a • niezależny twórca • zespół muzyczny • blog • strona prywatna • firma projektowa • wydarzenie • turystyka i podróże • e-commerce • wizytówka firmowa • narzędzia internetowe • oprogramowanie internetowe • nieruchomości • portfolio • wkrótce • t-shirt • katalog

firma projektowa Większość ludzi, którzy podjęli próbę założenia własnej strony internetowej, wie doskonale, że może to być sporym wyzwaniem. Nieraz słysza-

duchu, który eksponuje klasę realizowanych zleceń i dowodzi, że firma potrafi opracować projekt piękny i prosty zarazem.

łem od projektantów, że po opracowaniu kilku różnych wersji wypalali się do tego stopnia, iż zrezygnowani uruchamiali cokolwiek — byleby działało. Wydaje się, że nieskończona liczba

Kolejna bardzo funkcjonalna strona to wizytówka firmy Paramore Redd (rysunek 2.). Projektanci postawili w niej na sprawną komunikację i prostotę, które korespondują

możliwości prowadzi niekiedy do paraliżu decyzyjnego, z którego bardzo trudno wybrnąć. Wyobraź sobie, że masz do dyspozycji zespół kreatywnych ludzi, potrafiących wyczarować

z minimalistycznym stylem strony. Minimalizm wyraża się też w prostej filozofii agencji, która według sloganu reklamowego skupia się na efektywności działania.

niemal wszystko… Paradoksalnie, nadmiar możliwości może być źródłem frustracji. Świetnym przykładem takiej sytuacji jest dylemat, przed którym stoi każda agencja projektowa: jaki obrać wizerunek? Opisane rozterki stają się jeszcze trudniejsze do zniesienia, gdy ogląda się znakomicie zaprojektowane strony agencji reklamowych, doskonale trafiające z komunikatem do klien-

Dla kontrastu strona Saizen Media Studios (rysunek 3.) dowodzi, że bogatsze wizualnie rozwiązania także mogą być skuteczne. Widać tu zarazem pewną konsekwencję: przepych firmowej wizytówki świetnie pasuje do bardzo

ta. Przykładem takiej strony jest serwis agencji Grow (rysunek 1.). Ta strona została opracowana w popularnym ostatnio, minimalistycznym

styl prezentacji w ogóle by nie pasował do wizerunku tej agencji.

atrakcyjnych wizualnie animowanych stron, projektowanych z wykorzystaniem technologii Flash, w których studio się specjalizuje. Biorąc pod uwagę portfolio, minimalistyczny

http://komodomedia.com

055

Rysunek 1. http://www.thisisgrow.com

Rysunek 2. http://paramoreredd.com

Rysunek 3. http://www.saizenmedia.com

http://www.syck.com

056

http://www.aspect-webdesign.com

http://madebyrocket.com

http://www.24-7media.de

http://definecreative.com.au

http://www.zaum.co.uk

057

http://www.thinkcw.com

http://www.periscope.com

http://junecloud.com

http://www.area17.com

058

/

podział stron według typów aplikacja na iphone’a • niezależny twórca • zespół muzyczny • blog • strona prywatna • firma projektowa • wydarzenie • turystyka i podróże • e-commerce • wizytówka firmowa • narzędzia internetowe • oprogramowanie internetowe • nieruchomości • portfolio • wkrótce • t-shirt • katalog

wydarzenie Strony poświęcone różnym wydarzeniom wydają się być tworzone według wspólnego schematu. Projekty należące do tego gatunku

Association (rysunek 2.) również została zaprojektowana z wykorzystaniem motywów graficznych nawiązujących do specyfiki wy-

są na ogół dość ciężkie optycznie (chodzi mi tutaj o zastosowanie dużej liczby zdjęć), a przy tym skupione na ściśle określonym temacie. Poruszane zagadnienia najczęściej zognisko-

darzenia. Choć styl jest oczywiście zupełnie inny niż w przypadku serwisu targowego, to cel działania obydwu stron jest taki sam. Ich zadanie polega na przedstawieniu atmosfery zda-

wane są wokół głównego wydarzenia, co oczywiście nie powinno dziwić. Biorąc pod uwagę różnorodność tematów, którym poświęcone są przykładowe strony, ich stylistyczne podobieństwo jest wręcz zaskakujące.

rzenia i poinformowaniu odbiorcy o tym, czego może się spodziewać na miejscu. Opisywana strona wygląda przebojowo i nowocześnie, co sugeruje, że na wykładach będą poruszane

Weźmy na przykład serwis Portage County Randolph Fair (rysunek 1.). Byłem na kilku targach regionalnych i muszę przyznać, że jestem pod ogromnym wrażeniem adekwatności tej strony internetowej. Choć sam projekt nie jest może najwyższych lotów, to bez wątpienia doskonale oddaje typowo amerykańską pragmatyczność i gościnność, z których słyną tego typu imprezy. Strona ma odrobinę patriotyczny wydźwięk, z domieszką stylu retro. Strona poświęcona serii wykładów zorganizowanych przez American Marketing

Nic dziwnego, że w takich projektach raczej nie spotyka się np. nietypowych kontrolek nawigacyjnych, a strony są przejrzyste i łatwe w obsłudze.

najnowsze informacje z danej dziedziny, a nie odgrzewane teorie sprzed pięciu lat. Porównajmy teraz obydwie te strony z serwisem Pecha Kucha (rysunek 3.). Ta impreza jest adresowana do ludzi kreatywnych, a projekt strony z całą pewnością to odzwierciedla. Wydaje się, że przy projektowaniu stron poświęconych rozmaitym wydarzeniom nie sposób uciec od nawiązań do tego, czego potencjalni uczestnicy oczekują od danej imprezy. Czy powinniśmy się jednak temu dziwić? To przecież jedna z tych sytuacji, gdy spełnienie oczekiwań odbiorcy jest logiczne i oczywiste. Rysunek 1. http://www.randolphfair.com

059

http://www.festivalboreal.com

Rysunek 2. http://www.uabama.com/lectures

http://blogsville.us

Rysunek 3. http://www.doyoupk.org

060

http://www.therustyball.com

http://naias.com

uwagi od dewelopera Jeśli organizujesz jakąś imprezę i jesteś zainteresowany stworzeniem strony internetowej, która by ją promowała, to przypuszczalnie skonsultujesz z programistą możliwość zaimplementowania systemu rejestracji online. Zanim jednak zdecydujesz się na takie rozwiązanie, powinieneś zdać sobie sprawę z tego, że stworzenie takiego systemu może być dość trudne. Owszem, w pewnych sytuacjach da się zastosować relatywnie prosty mechanizm, ale jeśli spodziewasz się dużej liczby uczestników albo też jeśli uczestnictwo w imprezie podlega rozmaitym regułom, to opracowanie dobrze działającego systemu rejestracji zapewne okaże się znacznie trudniejsze i bardziej kosztowne, niż mogłoby się wydawać. Nie chcę oczywiście zniechęcać Cię do tego typu koncepcji, raczej chcę uświadomić skalę problemu. Zarządzanie organizacją imprez to osobna gałąź biznesu. Dwa ciekawe narzędzia, które do tego służą, znajdziesz pod adresami http://eventbrite.com oraz http://epicevent.com. http://summercamp.carsonified.com

061

http://www.reelrocktour.com

http://stackoverflow.carsonified.com

http://www.visitsalford.info/foodfestival

062

/

podział stron według typów aplikacja na iphone’a • niezależny twórca • zespół muzyczny • blog • strona prywatna • firma projektowa • wydarzenie • turystyka i podróże • e-commerce • wizytówka firmowa • narzędzia internetowe • oprogramowanie internetowe • nieruchomości • portfolio • wkrótce • t-shirt • katalog

turystyka i podróże Zważywszy na kaliber branży turystycznej, aż dziw bierze, jak trudno podróżującym znaleźć w internecie wartościowe informacje. Być może wynika to z rozmaitych konfliktów interesów (na przykład tego, która restauracja powinna być pierwsza na liście) albo z bardziej prozaicznych przyczyn: ludzie będą wyjeżdżać

popularności serwisów takich jak yelp.com czy Mapy Google wyszukiwanie miejscowych atrakcji powinno być znacznie przyjemniejsze, ale niestety… Na szczęście istnieje kil-

map Google, opracowana specjalnie dla turystów przyjeżdżających do miasta. Z nieco bardziej tradycyjnym wykonaniem

ka pozytywnych przykładów, które stanowią przeciwieństwo tego niewesołego wizerunku. Przyjrzyjmy się im i zastanówmy, w jaki sposób

podobnego pomysłu można się zapoznać na stronie Savour Durham (rysunek 2.). Mamy tutaj dostęp do dobrze zorganizowanych informacji (kalendarz, mapy, bilety), a łącza

można osiągnąć sukces w specyficznej dziedzinie, jaką są strony poświęcone turystyce. Najbardziej nowatorskim spośród pokazanych tutaj przykładów jest strona Oklahoma’s

sponsorowane zostały przedstawione w dość oczywisty sposób — w postaci logo w dolnej części strony. Jest to zresztą naprawdę ciekawe rozwiązanie, gdyż rozróżnienie, która firma

O ile kupno biletów lotniczych, rezerwowanie hoteli i wynajem samochodów przez internet nie sprawia większego problemu, to zare-

City Bricktown (rysunek 1.). Serwis umożliwia przeglądanie mapy centrum miasta w poszukiwaniu rozmaitych atrakcji, a funkcjonalność interfejsu znacznie wykracza ponad typowy zestaw możliwości. Dzięki zdjęciom i użytecznym

wykupiła na stronie przestrzeń reklamową, a która została wyróżniona przez autorów strony ze względu na wyjątkowe walory oferty, czasami bywa bardzo trudne. Innymi słowy, nawet najgorsza restauracja może wykupić

zerwowanie innych atrakcji, np. miejscowych obiektów do zwiedzania albo stolika w restauracji przyjaznej dla dzieci, wcale nie jest takie proste. W trakcie planowania niedawnej wy-

informacjom możesz bardzo szybko domyślić się charakteru różnych miejsc. Oprócz tego możesz wyświetlić współrzędne geograficzne każdego z nich, co pozwala na przykład łatwo

przestrzeń reklamową w poczesnym miejscu strony, lecz takie ogłoszenie nie jest przecież w żadnej mierze porównywalne do wysokiego miejsca w niezależnym rankingu. Podsumowu-

cieczki na Florydę byłem bardzo zawiedziony niedostatkiem rzetelnych informacji w internecie. Można pomyśleć, że dzięki rosnącej

odnaleźć atrakcje znajdujące się w pobliżu Twojego hotelu, a także te, do których można wygodnie dotrzeć. To coś jak luksusowa wersja

jąc, dobrze jest zachować w projekcie wyraźny podział między niezależnymi, wartościowymi informacjami a materiałami sponsorowanymi.

na przykład na Florydę nawet pomimo braku ciekawych stron z informacjami na temat tego regionu. Podróżnicy oprócz internetu mają do dyspozycji inne dobre źródła informacji — ogromną bazę wiedzy na ten temat stanowią przewodniki turystyczne.

063

Rysunek 1. http://www.welcometobricktown.com

Rysunek 2. http://www.gatesopen.ca

064

http://www.sani-resort.com

http://www.campingilfrutteto.it

http://www.definitelydubai.com

http://www.amsterdam-bed-and-breakfasts.com

065

http://www.paristaylorhotel.com

http://treasureislandcasino.com

http://www.barceloraval.com

http://www.trappfamily.com

066

http://www.icystraitpoint.com

/

podział stron według typów aplikacja na iphone’a • niezależny twórca • zespół muzyczny • blog • strona prywatna • firma projektowa • wydarzenie • turystyka i podróże • e-commerce • wizytówka firmowa • narzędzia internetowe • oprogramowanie internetowe • nieruchomości • portfolio • wkrótce • t-shirt • katalog

e-commerce Strony sklepów internetowych — chyba bardziej niż jakiekolwiek inne serwisy — kierują się surowymi liczbami. Handel w internecie jest w pewnym sensie wyjątkowy ze względu na jego mierzalność. Nakład pracy niezbędny do prześledzenia drogi wszystkich klientów sklepów sieci Walmart z uwzględnieniem tego, co każdy z nich oglądał w trakcie wizyty, byłby as-

wyciągniesz jakieś wnioski i znajdziesz wśród nich coś dla siebie —zarówno skutecznego, jak i atrakcyjnego wizualnie. Przeciętność — takim słowem można opisać większość sklepów internetowych. Minimalizm jest wśród nich bardzo rzadko spotykany, ale strona Asphaltgold (rysunek 1.) jest chlubnym wyjątkiem od tej reguły. Ponieważ

bogatszą szatą graficzną, choć równie nietypową i funkcjonalną. Podobnie jak w poprzednim przypadku, projekt strony świetnie nawiązuje do rodzaju produktów oraz do specyfiki odbiorców, do których są one kierowane. Na tych przykładach doskonale widać zalety małego sklepu, a szczególnie możliwość zaadresowania oferty do ściśle określonej grupy klientów. Dzięki temu serwis może działać skuteczniej

tronomiczny. Tymczasem każdy sklep internetowy umożliwia tworzenie dzienników zdarzeń, zawierających nieprzebrane morze informacji

sklep internetowy wymaga do działania bardzo wielu elementów, to niezmiernie rzadko brane jest pod uwagę podejście minimalistycz-

o działaniach podejmowanych przez użytkowników. Nic nie stoi na przeszkodzie, aby sprawdzić, w jaki sposób zmiana koloru przycisków wpłynęła na poziom sprzedaży. W rezultacie na stronach sklepów internetowych na ogół

ne. Z tego samego względu witryna sklepu utrzymana w takiej stylistyce wygląda bardzo nietypowo. W myśl idei stron typu portfolio w tym przypadku towar, a mianowicie obuwie, potraktowano trochę jak małe dzieło sztuki.

mniejszą wagę przykłada się do estetyki projektu (dla samej estetyki) niż do efektywności. Tym bardziej więc warto zwrócić uwagę na kilka naprawdę pięknych sklepów internetowych,

Jest to zupełnie zrozumiałe, jeśli wziąć pod uwagę wyrafinowaną stylistykę projektu. Ponadto całość jest nie tylko bardzo praktyczna z punktu widzenia aktualizacji oferty, ale do-

kiem niestandardowych rozwiązań wizualnych. W tym przypadku przekaz strony koncentruje się na tym, dlaczego warto używać wyrobu ReadyHang zamiast typowych produktów tego

zaprezentowanych w tym rozdziale. Choć nie zamierzam tutaj argumentować, jakie rozwiązania przekładają się na wzrost sprzedaży, to na podstawie podanych przykładów z pewnością

skonale odzwierciedla oczekiwania potencjalnych klientów. Dla odmiany po stylu minimalistycznym serwis yayadog.com (rysunek 2.) pyszni się

typu. Prostota komunikacji i troska o detale sprawia, że całość robi znakomite wrażenie.

i lepiej skłaniać odwiedzających do dokonania zakupów. Liczba produktów w ofertach sklepów internetowych może być bardzo różna. Na przykład sklep ReadyHang (rysunek 3.) oferuje tylko… jeden produkt. Przy tak specjalistycznej ofercie można się pokusić o zastosowanie cał-

067

Rysunek 2. http://www.yayadog.com

Rysunek 1. http://www.asphaltgold.de

http://www.letscollect.co.uk Rysunek 3. http://www.readyhang.com

068

uwagi od dewelopera Ileż razy potencjalni zleceniodawcy mówili mi: „Mam coś, co chciałbym sprzedawać w internecie. Jak to zrobić?”. Oczywiście pierwsze, co przychodzi mi wówczas do głowy, to wizje makabrycznie skomplikowanych platform handlu internetowego. Gdy już wytłumaczę klientowi, że sklep internetowy jest najbardziej złożoną spośród różnych rodzajów stron WWW, a emocje opadną, przypominam sobie, iż istnieją przecież znakomite narzędzia, które ułatwiają realizację takiego zadania. Ba, gdy postanowiłem, że sam będę promował i sprzedawał swoją pierwszą książkę, skonfigurowałem sklep w ramach platformy bigcartel.com. W ciągu około dwóch godzin miałem gotowy, działający sklep z własnym logo i dobraną przeze mnie kolorystyką, umieściłem w nim swój produkt i byłem gotów do działania. Trudno o łatwiejsze rozwiązanie! Big Cartel to nie jedyny serwis umożliwiający tworzenie skutecznych i miłych dla oka sklepów internetowych. Kolejnym przykładem serwisu tego typu — równie prostego w obsłudze — jest shoplify.com.

http://www.threadless.com

http://www.onetribe.com

069

http://www.twelvesouth.com

http://ridefourever.com

070

http://www.creativesoutfitter.com

http://jaqkcellars.com http://www.teapot.cl

http://www.matthewwilliamson.com http://www.uniqlo.co.uk

071

/

podział stron według typów aplikacja na iphone’a • niezależny twórca • zespół muzyczny • blog • strona prywatna • firma projektowa • wydarzenie • turystyka i podróże • e-commerce • wizytówka firmowa • narzędzia internetowe • oprogramowanie internetowe • nieruchomości • portfolio • wkrótce • t-shirt • katalog

wizytówka firmowa Nazwa w zasadzie mówi wszystko. Trudno o trafniejsze określenie dla projektów stron firmowych, zrealizowanych w duchu minima-

o skuteczności pomysłu. Zamiast podawać na stronie głównej jak najwięcej informacji, Tim po prostu zamieścił na niej odsyłacze do serwi-

listycznym (także pod względem treści) i na ogół w ramach bardzo niewielkiej przestrzeni. Podobnie jak w przypadku zwykłej wizytówki, takie strony zawierają niewielką ilość infor-

sów społecznościowych i innych usług online, z których korzysta. W rezultacie strona stała się miniaturowym, specjalistycznym systemem zarządzania treścią.

macji i prezentują je w zwięzły i bardzo bezpośredni sposób. Powodów wyboru tak prostej formy dla firmowej strony WWW może być kilka, od prozaicznej potrzeby przekazania tylko naj-

Kolejny ciekawy przykład to strona Appenstein (rysunek 2.). Co prawda nie ma tutaj podanego nazwiska autora, ale mamy inne kluczowe elementy, takie jak numer telefonu

ważniejszych danych o firmie do braku czasu na realizację większego projektu. Niezależnie od przyczyn te skondensowane pigułki informacyjne mogą być niesamowicie skuteczne. Choć papierowe wizytówki są małe, nigdy nie odniosłem wrażenia, że brakuje na nich czegoś istotnego; przeciwnie — zawsze znajdowałem tam wszystko, czego potrzebowałem. Podobnie jest z tego typu stronami. Mikrostrona Tima Van Damme’a (rysunek 1.) zapoczątkowała pewien styl, który jest obecnie powszechnie powielany, co świadczy 072

http://www.leandaryan.com

i przegląd najważniejszych umiejętności. Przy tak dużym zapotrzebowaniu na deweloperów dla iPhone’a właściciel strony nie musi być bardziej wylewny, aby przyciągnąć uwagę klientów. Jednym z bardziej charakterystycznych przykładów tego typu projektów jest strona Waquasa Ashrafa (rysunek 3.). Czy do stworzenia takiej strony skłonił go brak większej ilości informacji i przykładowych projektów? Czy raczej świadczy ona o tym, że autor jest lakoniczny aż do bólu i nie lubi trwonić czasu i wysiłku ponad to, co absolutnie konieczne?

http://www.jonwardweb.co.uk

Rysunek 1. http://timvandamme.com Rysunek 2. http://appenstein.com

http://www.jordankeating.com

Rysunek 3. http://waqasashraf.com

http://www.ultimate-mediagroup.nl

http://andycroll.com

073

http://rogieking.com http://brisdom.com/evertslagter

uwagi od dewelopera Jeśli zamierzasz stworzyć stronę firmową w postaci wizytówki, to najprawdopodobniej będziesz realizował projekt we własnym zakresie. Owszem, może się zdarzyć, że właściciel firmy zechce zapłacić komuś za wykonanie takiego zlecenia, lecz w większości przypadków ten styl jest adresowany do jednoosobowych przedsięwzięć. Przy realizacji takich stron wielu projektantów uświadamia sobie, że pozornie błahe sztuczki, takie jak rozwijane menu czy ruchome ikony, w rzeczywistości są o wiele bardziej skomplikowane w implementacji, niż na to wyglądają, a uzyskanie estetycznego rezultatu wymaga umiejętnego zastosowania języka HTML, CSS i JavaScriptu. Na szczęście istnieje darmowy szablon dla WordPressa, który umożliwia błyskawiczne stworzenie strony tego typu. Znajdziesz go pod adresem http://templatic.com/freethemes/quick-mini-site-for-non-bloggers-using-visiting-card-free-premium-wordpress-theme. Dla ambitnych projektantów (albo doświadczonych programistów) jest to doskonały punkt wyjścia do dalszej pracy, gdyż przykładowemu szablonowi można dość łatwo nadać dowolny inny wygląd, zachowując jego funkcjonalność.

074

http://bitminers.com

/

podział stron według typów aplikacja na iphone’a • niezależny twórca • zespół muzyczny • blog • strona prywatna • firma projektowa • wydarzenie • turystyka i podróże • e-commerce • wizytówka firmowa • narzędzia internetowe • oprogramowanie internetowe • nieruchomości • portfolio • wkrótce • t-shirt • katalog

narzędzia internetowe Narzędzia internetowe to — umownie rzecz biorąc — proste aplikacje (na ogół hostowane),które spełniają konkretne funk-

ofertę strona CeeVee, która służy do tworzenia życiorysów online. Dzięki zwięzłemu i precyzyjnemu zdefiniowaniu oferty można lepiej

Strona Stay Valid (rysunek 5.) prezentuje podobne podejście jak projekt Shortwave — jest prosta i konkretna, zwłaszcza nagłówek

cje. Na przykład strona SonarHQ (rysunek 1.) umożliwia tworzenie i prowadzenie sondaży w internecie, strona CeeVee (rysunek 2.) służy do tworzenia życiorysów online, zaś WROI (rysunek 3.) to dość rozbudowane narzędzie do tworzenia statystyk korzystania z łącz. Wy-

i szybciej dotrzeć do odbiorcy. W przeciwnym razie trudno skupić jego uwagę. Strona Shortwave (rysunek 4.) ma postać pojedynczej kolumny. Taki układ treści jest

na stronie głównej. Wystarczy rzut oka, aby się przekonać, czego można od niej oczekiwać, i jedno kliknięcie, aby wypróbować ofertę. Projektant zrezygnował z konstruowania skompli-

mienione aplikacje oferują funkcje stanowiące odpowiednik specjalnego komponentu stro-

obecnie dość niespotykany. W miarę rosnącej popularności monitorów panoramicznych wąskie, jednokolumnowe szablony odeszły w niepamięć. Tymczasem ta strona przypomi-

kowanych sloganów marketingowych. Jego głównym celem było zachęcenie użytkownika do wypróbowania produktu.

ny internetowej i zastępują inne rozwiązania, w które mogą być wyposażone gotowe sklepy internetowe albo platformy blogowe. Wspólną cechą tego typu stron jest duży nacisk na łatwość sprzedaży oferowanego pro-

na, że jeśli nie mamy wiele do zakomunikowania, to lepiej podać najważniejsze informacje w prostej, zwięzłej formie, aniżeli projektować coś, co będzie przerostem formy nad treścią. Wyobraźmy sobie na przykład niezależnego

duktu. Spójrz choćby na stronę SonarHQ, na której dostrzega się przede wszystkim cztery duże słowa: „Create your survey site” („Stwórz stronę z własną ankietą”). Nie trzeba dopraw-

projektanta, który za pośrednictwem sztucznie przerośniętej strony chce sprawić wrażenie, że w rzeczywistości prowadzi dużą agencję reklamową. Po co? Promuj to, co rzeczywiście

dy zagłębiać się w szczegółowe informacje, aby się domyślić, że autorzy projektu oferują aplikację do tworzenia starych, dobrych ankiet. W kilku słowach wyjaśnia też swoją

oferujesz — w tym przypadku aplikację internetową o ściśle określonej funkcjonalności, która jest w stanie na siebie zarobić dzięki bardzo precyzyjnie określonej grupie docelowej. http://thurlyapp.com

075

Rysunek 1. http://www.sonarhq.com

Rysunek 2. http://ceevee.com

Rysunek 3. http://www.w3roi.com

076

Rysunek 4. http://shortwaveapp.com

Rysunek 5. http://www.stayvalid.com

http://wufoo.com

http://heywatch.com

http://www.buzzsprout.com

077

/

podział stron według typów aplikacja na iphone’a • niezależny twórca • zespół muzyczny • blog • strona prywatna • firma projektowa • wydarzenie • turystyka i podróże • e-commerce • wizytówka firmowa • narzędzia internetowe • oprogramowanie internetowe • nieruchomości • portfolio • wkrótce • t-shirt • katalog

oprogramowanie internetowe Tego rodzaju serwisy — w odróżnieniu od małych, prostych aplikacji — oferują o wiele bardziej rozbudowane funkcje: zwykle są to platformy umożliwiające tworzenie kompletnych

078

i niemal za każdym razem jest eksponowany w bardzo podobny sposób. Zasadnicza różnica pomiędzy oczekiwania-

przycisków zajmuje drugorzędne miejsce w hierarchii strony, lecz jest znacznie bogatsza pod względem treści. Zgromadzono w niej

stron internetowych bądź świadczące autonomiczne usługi innego rodzaju. O ile na przykład ankiety internetowe zwykle stanowią kom-

mi takiego klienta, który szuka wszechstronnej platformy internetowej, a takiego, który potrzebuje jedynie prostego narzędzia, to zapotrzebowanie na większą ilość informacji. Każda

garść istotnych informacji przemawiających za wyborem promowanego rozwiązania. Jednymi z kluczowych argumentów, wyróżnionych z zasadniczego tekstu, są elastyczność

ponent dużych projektów, o tyle platformy handlowe takie jak Kartel (rysunek 1.) czy LemonStand (rysunek 2.) umożliwiają stworzenie w pełni funkcjonalnego, kompletnego ser-

z nich może mieć ogromny wpływ na to, czy potencjalny nabywca zdecyduje się na zakup oferowanego produktu. Czy sklep internetowy obsługuje tzw. dropshipping (sklep jest wów-

oraz możliwość rozszerzenia funkcjonalności produktu. Jest oczywiste, że autorzy LemonStand będą podkreślali atuty swojej oferty, zaś ewentualne niedostatki starali się przedstawić

wisu WWW. Z kolei serwisy Campaign Monitor (rysunek 3.) czy The Invoice Machine (rysunek 4.) oferują usługi online o specyficznym profilu, które także niekoniecznie muszą wchodzić w skład ogólnodostępnej strony internetowej.

czas tylko pośrednikiem w realizacji zlecenia)? Czy moduł obsługi kont e-mail umożliwia ich automatyczną weryfikację? W przypadku takich serwisów o zainteresowaniu klienta ofertą mogą decydować konkretne rozwiązania.

w korzystnym świetle. (W ramach małej dygresji — takie podejście jest często stosowane w handlu. Na przykład Coca-Cola po nieudanym eksperymencie ze zmianą formuły napoju i późniejszym powrocie do oryginal-

Wspólną cechą tego typu serwisów oraz stron poświęconych narzędziom internetowym jest podporządkowanie formy i treści skłanianiu klienta do dokonania zakupu. Każ-

Serwis LemonStand to doskonały przykład projektu, który udziela odpowiedzi na pewne pytania, zanim jeszcze one padną. Strona główna oferuje klientowi krótki przegląd

nego smaku przez pewien czas sprzedawała swój flagowy produkt pod nazwą „Coca-Cola Classic”. W ten sposób firma starała się nadać niepowodzeniu pozytywny wydźwięk). Za-

dy z zaprezentowanych przykładów zawiera krótkie hasło reklamowe, które informuje użytkownika o roli i funkcji serwisu. Nawet więcej: slogan stał się ich kluczowym elementem

możliwości produktu i zachęca do podjęcia jednego z dwóch działań — albo zapoznania się z przewodnikiem informacyjnym, albo pobrania darmowej wersji beta. Sekcja poniżej

uważ, że strona główna LemonStand mogłaby z powodzeniem pełnić rolę jednostronicowej ulotki promocyjnej produktu, zawierającej odpowiedzi na najważniejsze pytania.

Opisane podejście można zastosować także w odniesieniu do innych rodzajów stron WWW, np. osobistych portfolio, serwisów agencji reklamowych i wizytówek producentów, na których na ogół stawia się większy nacisk na ładną szatę graficzną niż na argumenty marketingowe.

Rysunek 1. http://www.kartel.co.nz

Rysunek 2. http://lemonstandapp.com

Rysunek 3. http://www.campaignmonitor.com

http://www.notableapp.com

079

Rysunek 4. http://invoicemachine.com

080

http://feedafever.com

uwagi od dewelopera Grafik pracujący nad wizualną stroną aplikacji internetowych powinien przede wszystkim zwrócić uwagę na funkcjonalność. Często się zdarza, że projektanci przychodzą do mnie z najdziwniejszymi pomysłami na interfejsy, które mają spełniać bardzo proste zadania. W większości przypadków żądaną funkcję można byłoby zrealizować za pomocą prostej, zwykłej kontrolki (np. rozwijanego menu, pola wyboru albo suwaka). Jak widać, potrzeba kreatywności i dążenie do odmienności mogą utrudniać realizację najprostszych celów i znacząco zwiększyć koszty projektu. W ramach doskonalenia umiejętności praktycznych dobry projektant powinien zapoznać się z różnymi rodzajami kontrolek, stosowanymi w rozmaitych interfejsach. Doskonałą bazą popularnych rozwiązań tego typu jest serwis http://ui-patterns.com. Kolejnym ważnym aspektem realizacji omawianych projektów jest stosowanie oprogramowania ułatwiającego testowanie funkcjonalności i użyteczności. Wystarczy się przyjrzeć, w jaki sposób użytkownicy posługują się różnymi interfejsami, aby zdać sobie sprawę z tego, jak ważna jest wygoda i prostota obsługi projektu. Doskonałym, a zarazem bardzo tanim narzędziem do wykonywania takich testów jest aplikacja Silverback (http://silverbackapp. com). Z kolei program TechSmith’s Morae (http://www.techsmith.com/morae. html) stanowi droższą, ale bardziej wszechstronną propozycję.

http://www.easytasker.com

http://www.cubescripts.com

081

http://www.splash360.com

http://www.interactive-business.com.au

082

/

podział stron według typów aplikacja na iphone’a • niezależny twórca • zespół muzyczny • blog • strona prywatna • firma projektowa • wydarzenie • turystyka i podróże • e-commerce • wizytówka firmowa • narzędzia internetowe • oprogramowanie internetowe • nieruchomości • portfolio • wkrótce • t-shirt • katalog

nieruchomości Strony internetowe w tej branży już niemal tradycyjnie reprezentują niski poziom, lecz na szczęście nie wszystkie. Znalazłem kilka

którzy najprawdopodobniej szukają swojego pierwszego domu i chcieliby mieszkać w sercu miasta. Grupa docelowa drugiego serwisu jest

trafiają w specyfikę branży, że doskonale pełnią rolę „pierwszego kontaktu”. Potencjalni klienci, którzy zdecydują się odwiedzić nie-

takich, które dowodzą, że na internetowym rynku nieruchomości również można trafić na prawdziwe perełki. Jednym z ciekawszych aspektów prezen-

równie oczywista: są to młode małżeństwa po trzydziestce, z małymi dziećmi. Moim celem jest tutaj przypomnienie projektantom pracującym nad stronami dla deweloperów i biur

ruchomość po zapoznaniu się z jedną z tych stron, będą z góry pozytywnie nastawieni, a z punktu widzenia sprzedawcy jest to fantastyczna zaleta.

towanego zestawu stron są bardzo czytelne nawiązania do konkretnego grona odbiorców. Przynajmniej mam nadzieję, że określone zabiegi stylistyczne zostały zastosowane

nieruchomości, że powinni bardzo uważnie określić docelową grupę odbiorców, albowiem zastosowane rozwiązania mogą albo idealnie trafić w czyjś gust, a przez to ułatwić sprze-

Kolejna strona, która również została skrojona z myślą o konkretnej grupie odbiorców — choć tym razem nie indywidualnych — to serwis Province West (rysunek 3.). Tym razem

celowo, gdyż niezależnie od rzeczywistych intencji autorów bardzo czytelnie odwołują się one do określonych grup demograficznych. Porównajmy dwie przykładowe strony, aby się o tym przekonać: The Pier (rysunek

daż, albo zupełnie kogoś zniechęcić. Jest to znakomity przykład tego, że znajomość grupy docelowej dla promowanego produktu powinna mieć decydujący wpływ na formę projektu. Omawiany rodzaj stron jest bezsprzecznie poświęcony sprzedaży, dlatego wszystko, co nie ma z nią związku, powinno zostać usunię-

mamy do czynienia z projektem adresowanym do profesjonalnych brokerów i inwestorów, który świetnie kontrastuje z wymienionymi stronami o profilu konsumenckim. Dla bardziej konserwatywnych odbiorców zastosowano

1.) oraz CP Homes at Archer’s Rock (rysunek 2.). Pierwsza bez wątpienia adresowana jest do młodych, dwudziestokilkuletnich ludzi,

te. Obydwie wymienione strony tak dobrze

natomiast prostą nawigację, wyrafinowany styl (kojarzący się z pewnością i stabilnością) oraz stonowaną paletę kolorów.

083

Rysunek 1. http://www.lifesabounce.com

Rysunek 3. http://www.provincewest.com

Rysunek 2. http://www.cphomesatarchersrock.com

084

http://www.championllc.com

http://www.bornliving.com

http://breedenhomes.com

http://www.hillwoodresidential.com

http://www.chrisfenemore.com

085

http://www.jprealtyservices.com

http://www.mpwproperties.com

http://www.alghadeer.ae

086

/

podział stron według typów aplikacja na iphone’a • niezależny twórca • zespół muzyczny • blog • strona prywatna • firma projektowa • wydarzenie • turystyka i podróże • e-commerce • wizytówka firmowa • narzędzia internetowe • oprogramowanie internetowe • nieruchomości • portfolio • wkrótce • t-shirt • katalog

portfolio Odnoszę wrażenie, że każda potencjalna zaleta stron tego typu może być obrócona w wadę. Z jednej strony portfolio można zaprojektować

gdzie rzeczywiście mają one sens). Wybrane przeze mnie strony cechują się wyrafinowaną bezpośredniością, która nadaje im konkretny,

że umiejętności autora są odwrotnie proporcjonalne do objętości tekstu zamieszczonego na stronie. Portfolio Marka jest proste, treściwe,

supernowocześnie i potraktować jako swoistą wizję autora na temat tego, czego możemy oczekiwać po internecie przyszłości. Z drugiej jednak strony wiele eksperymentalnych

rzeczowy charakter. Portfolio Briana Hoffa (rysunek 1.) to fantastyczny przykład tego, że portfolio może być zarazem finezyjne i merytoryczne. Najważniejsze

a jednocześnie bardzo eleganckie. W ramach przykładu z drugiej strony spektrum możliwości proponuję zapoznanie się z portfolio Ruya Adorno (rysunek 3.). Nie je-

portfolio bywa niesamowicie kłopotliwych w przeglądaniu i obsłudze. Tak czy owak każdy projektant potrzebuje portfolio, które będzie dzień i noc służyło wszystkim zainteresowa-

umiejętności autora są podane pogrubionym tekstem i zaczynają się od rzucającej się w oczy deklaracji: „Jestem projektantem-grafikiem” (co z miejsca eliminuje pytanie: „Czym zajmuje

stem wielkim fanem portfolio wykonanych we Flashu, zwłaszcza jeśli zostały wyposażone w mało intuicyjną nawigację. Postanowiłem jednak zamieścić tę stronę w książce,

nym jego usługami. Trzeba jednak pamiętać o tym, że nieprzemyślany projekt może nie odzwierciedlać umiejętności autora bądź szufladkować go nie do końca tak, jak by sobie tego życzył. Spośród wszystkich rodzajów stron zapre-

się autor?”). Choć bardzo wiele portfolio skupia się przede wszystkim na przykładach prac, to w tym przypadku — oprócz łatwego dostępu do galerii — autor zdecydował się też rzucić trochę światła na swoją osobę.

gdy odkryłem, że jej obsługa i związana z nią zabawa wciągnęły mnie na dłużej. Jeśli uda Ci się zachęcić kogoś do zabawy na swojej stronie internetowej, a przy okazji zaprezentujesz mu przykłady swoich prac, to znako-

Mark Dearman (rysunek 2.) zastosował moje ulubione podejście do konstrukcji portfolio i potraktował swoje prace absolutnie pierwszoplanowo. Ponieważ twórczość autora

micie — zwłaszcza jeśli projektujesz we Flashu i zależy Ci na tego typu zleceniach. Innymi słowy, mamy tutaj idealną zbieżność celu i stylu przy zachowaniu prostoty oraz wygody użyt-

mówi sama za siebie, całość nie wymaga większego komentarza. Czasami odnoszę wrażenie,

kowania strony.

zentowanych w tej książce ten był dla mnie najtrudniejszy, jeśli chodzi o dobór przykładów. Czasy skomplikowanych portfolio wykonanych w technologii Flash już dawno minęły (choć oczywiście nadal się je spotyka tam,

087

Rysunek 2. http://www.markdearman.com

Rysunek 1. http://www.brianhoff.net

Rysunek 3. http://www.ruyadorno.com

088

http://www.dosbros.nl

uwagi od dewelopera Nieustannie szukam narzędzi, które pozwoliłyby mi wykonywać określone zadania szybciej i wydajniej. Nie wątpię, że potrafisz stworzyć zapierające dech w piersiach portfolio, ale nie oszukujmy się: mało kto ma czas, aby taki projekt zrealizować. W takich przypadkach w sukurs przychodzą internetowe narzędzia do automatycznego tworzenia galerii. Prace niektórych twórców są tak dobre, że nie wymagają bardziej wyrafinowanej oprawy. Inni mogą po prostu skorzystać z okazji i stworzyć coś, co będzie im służyło przez czas potrzebny do stworzenia okrop… no dobrze, wspaniałej prezentacji prac we Flashu! Moje ulubione narzędzie do tworzenia portfolio online — choć dostępne jedynie za zaproszeniem — to The Behance Network (http://behance.net). Godny uwagi jest też prosty i klarowny serwis http://carbonmade.com oraz najnowsze narzędzie do tworzenia galerii, dostępne w ramach serwisu http:// Krop.com. Każde z nich nie tylko umożliwia stworzenie portfolio, lecz także ułatwia popularyzację prac.

http://www.toby-powell.co.uk

http://www.susiemcconnell.com

089

http://two24studios.com

http://www.yodabaz.com

http://www.pyttel.sk

090

http://www.shadddales.com

http://sjhunter.net

http://www.alexcohaniuc.com

http://www.ermanerkur.com

http://www.danieloliver.co.uk

091

/

podział stron według typów aplikacja na iphone’a • niezależny twórca • zespół muzyczny • blog • strona prywatna • firma projektowa • wydarzenie • turystyka i podróże • e-commerce • wizytówka firmowa • narzędzia internetowe • oprogramowanie internetowe • nieruchomości • portfolio • wkrótce • t-shirt • katalog

wkrótce Strony zatytułowane „wkrótce” z pewnością nie są nowym wynalazkiem, ale dawno już pożegnaliśmy się z epoką, kiedy główną ozdo-

nie to zarazem świetny „dopalacz” do kampanii promocyjnej w chwili uruchomienia projektu. Niektórzy autorzy wybierają inne podej-

z właścicielem strony. W tym przypadku użytkownik może odwiedzić Luke’a na jednym z kilku popularnych serwisów społecznościowych.

bą komunikatu informującego o tym, że być może kiedyś w tym miejscu coś powstanie (ale o tym, czy rzeczywiście tak będzie, musisz przekonać się sam), był migający, żółty znak symbolizujący roboty drogowe. Zupełnie jak

ście: nawet jeśli ich strony nie oferują jeszcze wszystkiego, czego może oczekiwać odwiedzający, to proponują w zamian przynajmniej jedną, najważniejszą informację. Doskonałym

Autor przypuszczalnie nie chce robić kampanii e-mailowej po uruchomieniu strony, więc zrezygnował z formularza rejestracyjnego, aby jednak nie zniechęcać ewentualnych gości, zapro-

przykładem takiego rozwiązania jest strona Designgraphy (rysunek 1.). Choć strona na razie nie jest jeszcze gotowa, to zapewnia informację, dzięki której odwiedziny na niej nie są zupełnie bezproduktywne. Kolejna popularna taktyka, z którą spotka-

ponował im inny sposób na to, aby mogli się z nim skontaktować. Ci, którzy chcieliby zainwestować więcej czasu i energii w opracowanie strony zachę-

gdyby autor sprawdzał cierpliwość odbiorców! We współczesnym internecie strona „wkrótce” została zaprzężona do pracy. Jeśli w ten czy inny sposób ktoś trafi na jakąś część serwisu bądź na stronę główną, która nie jest jeszcze gotowa, to należy zrobić wszystko, aby ten fakt jakoś spożytkować. Jednym z najprostszych elementów, spo-

łem się na przykład na stronie Luke’a Bearda (rysunek 2.), polega na wskazaniu odwiedzającemu innych sposobów skontaktowania się

cającej do powtórnych odwiedzin, powinni zapoznać się z rozwiązaniem zastosowanym w serwisie SolidShops (rysunek 3.). W tym przypadku mamy do czynienia z niemal w pełni funkcjonalnym serwisem.

http://www.fireexchange.com

http://www.firenetworks.co

tykanych niemal na każdej stronie tego typu, jest formularz umożliwiający zarejestrowanie adresu e-mail. Trudno o lepszą okazję marketingową: skoro ktoś trafia na stronę i jest na tyle zainteresowany jej przyszłą treścią, że chce być poinformowany, kiedy się ona ukaże, to możesz bez obaw skontaktować się z nim, gdy materiał zostanie opublikowany. Takie rozwiąza092

Rysunek 1. http://www.syrrup.com

Rysunek 2. http://www.lukesbeard.com

http://www.upstatedesign.org

Rysunek 3. http://www.solidshops.com

093

uwagi od dewelopera Zdaję sobie sprawę, że niełatwo jest wygospodarować czas na stworzenie dobrej strony typu: „Zapraszamy wkrótce”, wyposażonej w formularz umożliwiający zarejestrowanie adresu e-mail i inne gadżety. Zwłaszcza że zajęcie się kluczowymi aspektami realizowanego projektu jest o wiele bardziej kuszące… Jeśli jesteś projektantem albo właścicielem strony i chciałbyś skłonić programistę do stworzenia funkcjonalnej strony tego typu, to jednym z najlepszych sposobów jest wykorzystanie gotowego rozwiązania, które przyspieszy realizację takiego projektu. Możesz na przykład użyć jednego z wielu szablonów stron przygotowanych na bazie platformy WordPress. Najbardziej ulubionymi przeze mnie są projekty CSSjockey (http://wordpress.org/extend/plugins/custom-coming-soon-page/) oraz Launchpad (http://themeshaper.com/2008/01/23/ wordpress-domain-parking-theme/). Te gotowe propozycje pozwolą Ci uzyskać satysfakcjonujący efekt minimalnym nakładem pracy ze strony dewelopera. Krótko mówiąc, zalecam stworzenie projektu na podstawie jednego z istniejących szablonów.

http://www.branchesdesign.co.uk

http://www.freshdeals.com

http://www.shortinc.com

094

http://squidchef.com http://birdboxx.com

http://wordpress-workshops.com

http://www.formmule.com

095

/

podział stron według typów aplikacja na iphone’a • niezależny twórca • zespół muzyczny • blog • strona prywatna • firma projektowa • wydarzenie • turystyka i podróże • e-commerce • wizytówka firmowa • narzędzia internetowe • oprogramowanie internetowe • nieruchomości • portfolio • wkrótce • t-shirt • katalog

t-shirt Jest to chyba jedna z moich najbardziej ulubionych kategorii stron, gdyż — podobnie jak wielu ludzi — jestem uzależniony od kupowania pod-

starcza, lecz tutaj do kompletu mamy bardzo oryginalny projekt, świetnie korespondujący ze stylistyką odzieży. Ponieważ mamy do czynie-

spieszyć proces zakupów. Natłok funkcji i opcji w typowych sklepach internetowych często przesadnie komplikuje ich obsługę i czyni ją

koszulków. Przy zbieraniu przykładów z tej kategorii celowo pominąłem strony cieszące się ogromną popularnością, takie jak Threadless czy Woot. Skupiłem się raczej na bardziej niety-

nia ze sklepem internetowym, trudno nie docenić kreatywności autorów projektu. Implementacja nawet najprostszego typowego sklepu internetowego wymaga ogromnego nakładu

uciążliwą. Okazuje się niejednokrotnie, że strona jest bardziej złożona, niż to konieczne. Tymczasem łatwość obsługi i przystępność tego projektu mogą stanowić wzór do naśla-

powych propozycjach, które na ten popularny gatunek projektów pozwalają spojrzeć z innej perspektywy. Jeśli zamierzasz uruchomić sklep internetowy, w którym chciałbyś sprzedawać

pracy, a tutaj mamy do czynienia z ręcznie rysowanymi elementami i nierównymi krawędziami, które z pewnością przysporzyły dodatkowych komplikacji. Podsumowując, od strony

dowania. Na przykład trzy zakładki znajdujące się w górnej części strony umożliwiają użytkownikowi błyskawiczne wyświetlenie tej linii produktów, która go interesuje. Łatwość użyt-

bawełniane dzieła sztuki, to poniżej znajdziesz kilka pomysłów do przemyślenia. Jednym z moich ulubionych jest serwis Yellow Bird Project (rysunek 1.). Koncepcja strony jest zupełnie nietypowa i stanowi zaskakującą

funkcjonalnej serwis realizuje wszystkie zadania zwykłego sklepu internetowego, lecz został ozdobiony nietypowymi motywami pasującymi stylistycznie do oferty, które sprawiają, że przeglądanie projektów koszulek i ich kupo-

kowania zachęca do robienia zakupów, a przecież dokładnie o to chodzi właścicielowi strony.

odmianę standardowych sklepów z koszulkami. Otóż wszystkie koszulki w tym serwisie są zaprojektowane przez niezależnych artystów rockowych. Innymi słowy, klient może przebie-

wanie staje się czystą przyjemnością. Kolejna strona, z której warto czerpać inspirację, to Unreal Cotton (rysunek 2.). Strona jest utrzymana w konwencji bliskiej minimalistycznej i cechuje się wzorcową czytelnością.

rać w pomysłach opracowanych przez wykonawców spoza głównego nurtu. Sama oferta, choćby najbardziej pomysłowa, raczej (przynajmniej w większości przypadków) nie wy-

Treść jest rzeczowa i spójna, obsługa przystępna, a ofertę łatwo się przegląda. Projektanci zrobili wszystko, aby usprawnić oraz przyhttp://www.wuwi.com

096

Rysunek 2. http://www.unrealcotton.com

Rysunek 1. http://www.yellowbirdproject.com

http://www.cosmicsoda.com

097

http://www.milkandeggsco.com http://www.ittybittee.com

https://www.drippinginfat.com

098

http://www.gotmojo.co.uk

http://200nipples.com

http://www.riptapparel.com

099

/

podział stron według typów aplikacja na iphone’a • niezależny twórca • zespół muzyczny • blog • strona prywatna • firma projektowa • wydarzenie • turystyka i podróże • e-commerce • wizytówka firmowa • narzędzia internetowe • oprogramowanie internetowe • nieruchomości • portfolio • wkrótce • t-shirt • katalog

katalog Strony katalogowe rzadko bywają obiektem bliższego zainteresowania. Wiele z nich to istne zagłębia spamu, a ich istnienie wydaje się być

były one przystępne dla użytkownika. Zauważ, że na takich stronach nie da się poczynić założeń co do tego, czego będzie szukał potencjal-

podyktowane jedynie chęcią wygenerowania jak największego ruchu. Otrzymałem jednak kiedyś od pewnego studia listę zaprojektowanych przez nich stron katalogowych i już

ny odbiorca. To stawia wymóg, aby stosować na nich mechanizmy ułatwiające ludziom dotarcie do żądanych treści tak szybko i wygodnie, jak to tylko możliwe.

po chwili wiedziałem, że znajdę wśród nich ciekawe przykłady do zaprezentowania w tej książce. Te strony nie tylko wyglądają atrakcyjnie, lecz sprawiają także wrażenie, jak gdyby rzeczywiście miały służyć użytkownikowi. Im

Serwis Store Envy (rysunek 1.) może być tego świetnym przykładem. Wydaje się pozornie, że jego struktura jest prosta, lecz jeśli wziąć pod uwagę olbrzymią ilość informacji,

bliżej je analizowałem, tym bardziej byłem przekonany, że projektantom udało się podnieść jakość tego typu projektów na niespotykany dotychczas poziom.

trudno nie być pod wrażeniem przystępności obsługi. Koncepcja polega na tym, aby użytkownik przeglądał zasoby serwisu tak długo, aż znajdzie coś, co mu się spodoba. Potem zaś może łatwo przeglądać kolejne łącza o podob-

Choć większość z nas raczej nie będzie miała okazji, aby zaprojektować stronę katalogową, to możemy zaczerpnąć z ich projektów wiele cennych pomysłów. Przede wszystkim

nej tematyce. Konstrukcja serwisu sprawia, że łatwo o przypadkowe, ciekawe odkrycia. Inne strony mają bardziej sztampową mechanikę, ale idea pozostaje ta sama: każda z nich ma na

celem tego rodzaju stron jest udostępnienie ogromnej ilości informacji w taki sposób, aby

celu usprawnienie przeszukiwania ogromnej ilości danych. http://www.patriciaferreira.com

100

Rysunek 1. http://www.storenvy.com

http://www.aroundme.com

101

http://www.theuxbookmark.com

http://www.freshdeals.com

http://www.practicelink.com

102

/

slogan • światło • iPhone jako ozdobnik • łącza do serwisów społecznościowych • ikony • typografia • tła fotograficzne

podział stron według składników wizualnych Składniki projektów mogą mieć rozmaite kształty, rozmiary oraz style. Niektórych używa się na fali aktualnych trendów, inne są stosowane z konieczności. To, co najbardziej mnie fascynuje w komponentach opisanych w tym rozdziale, to fakt, że każdy z nich jest przystosowany do pełnienia określonej funkcji — przynajmniej teoretycznie, bo choć ich zasadnicze role są jasno i wyraźnie określone, równie dobrze można je zastosować mimowolnie, bez większego namysłu (oczywiście w tej książce skupimy się na przemyślanych zastosowaniach). Mam głęboką nadzieję, że projektanci przeglądający przykłady przedstawione w tym rozdziale potraktują je nie jako klisze do bezrefleksyjnego naśladowania, lecz jako narzędzia, których można skutecznie użyć we właściwym momencie. Proszę jedynie o to, abyś stosował je intencjonalnie i z namysłem — to naprawdę nie wymaga wielkiego wysiłku, a przyniesie Ci długoterminowe korzyści. „Pomyśl, zanim zaprojektujesz” — a końcowy projekt zawsze będzie lepszy. 103

/

podział stron według składników wizualnych slogan • światło • iPhone jako ozdobnik • łącza do serwisów społecznościowych • ikony • typografia • tła fotograficzne

slogan Wprawdzie nie jest to książka o marketingu, lecz przy poruszanych w niej zagadnieniach trudno choćby nie napomknąć o kwestii ha-

podsumowania misji organizacji stanowi dowód na przemyślaną i skuteczną strategię jej działania. Przyjrzyjmy się kilku praktycznym

okrętów podwodnych. Teoretycznie tekst jest lapidarny, ale skonstruowany tak, że z jednej strony od razu wiemy, czy trafiliśmy we właś-

seł reklamowych. Dobre, nośne hasło na ogół powinno być krótkie (gdyż łatwo zapada w pamięć). Przykłady krótkich, skondensowanych haseł to: „Jestem projektantem WWW”, „Zbu-

przykładom realizacji omawianych koncepcji. Slogan („darmowe informacje dla marketingu i projektantów”) na stronie Concept Feedback (rysunek 1.) stanowi kwintesencję

ciwe miejsce, a z drugiej — jesteśmy sympatycznie zachęceni do bliższego zapoznania. Informacja zawarta na stronie Kindred Spirits (rysunek 3.) jest dłuższa, co w pewnym

dujemy Twój dom” itp. W tym rozdziale zapoznasz się z przykładami serwisów, w których slogan reklamowy zajmuje bardzo istotne miejsce — na ogół na głównej stronie projektu.

celu jej istnienia. Od razu wiadomo, do kogo adresowany jest projekt, a kluczowe słówko „darmowe” pozwala przełamać najbardziej typowe obawy przed wypróbowaniem produktu,

stopniu zmniejsza szanse na to, że zostanie przeczytana. W jakimś stopniu rekompensuje to miejsce, w którym została umieszczona, oraz duży, czytelny krój pisma. Ponadto jest to

Zwięzłość przekazu sprawia, że slogan pełni niezwykle istotną funkcję komunikacyjną. Większość odwiedzających szybko traci zainteresowanie treścią strony i stara się jak najefektywniej wykorzystać spędzony na niej czas.

a mianowicie te związane z kosztami. Jeden z moich ulubionych przykładów trafionego sloganu reklamowego na stronie niezależnego projektanta to ten na stronie Andrewa Bardena (rysunek 2.), który krótko

raczej kompletna definicja misji, a nie slogan, w pełni jednak zgadzam się z obraną koncepcją, ponieważ podsumowanie celu działalności tej organizacji w kilku słowach byłoby bardzo trudne.

Choć lwia część użytkowników nie traktowałaby swego zachowania w kategoriach „maksymalizacji efektywności”, dokładnie tak można je określić. Pomyśl tylko, jak ważne jest intui-

stwierdza: „Cześć. Lubię projektować”. Choć hasło pozostawia sporą swobodę interpretacji w kwestii ulubionego medium twórcy, to jest zarazem na tyle konkretne, że nie mamy wątpliwości, czy autor jest np. programistą, właś-

Slogan jest niezastąpionym narzędziem do komunikowania celu istnienia strony. Warto więc opracować go tak, aby był intuicyjnie zrozumiały, i zaprezentować w sposób gwa-

cyjne zrozumienie roli organizacji, która stoi za oglądaną stroną internetową. Można powiedzieć, że możliwość zwięzłego, treściwego

104

cicielem sklepu zatrudniającego setkę ludzi, czy też dystrybutorem części zamiennych do

rantujący skuteczność przekazu.

Rysunek 1. http://www.conceptfeedback.com

Rysunek 2. http://www.periscopecreative.com

http://www.patrickmonkel.nl

Rysunek 3. http://kindredspiritstn.org

105

http://www.performanceedgepartners.com http://rawkes.com

http://www.smalldotstudios.com http://www.antidecaf.com

106

http://www.design-manchester.co.uk

http://www.arcticcat.com/snow

107

http://www.skrotskystudio.com

http://www.studiow.com.my

http://www.reinvigorate.net

http://wtmworldwide.com

108

/

podział stron według składników wizualnych slogan • światło • iPhone jako ozdobnik • łącza do serwisów społecznościowych • ikony • typografia • tła fotograficzne

światło Światło i efekty świetlne na stronach internetowych mogą być bardzo skutecznymi środkami wyrazu. Początkujący w tej dziedzinie powinni zwrócić uwagę przede wszystkim na to, że tytułowe pojęcie bardzo rzadko jest traktowane literalnie czy stereotypowo — nie chodzi tu o zdjęcia świecących żarówek czy żyrandoli, lecz raczej o projekty przesycone światłem o bardzo specyficznej atmosferze. Przyjrzyjmy się kilku przykładom stron internetowych, aby zapoznać się z dokonaniami w tej trudno uchwytnej dziedzinie. Strona Strutta (rysunek 1.) stanowi rewelacyjny przykład wykorzystania iluminacji w projekcie. Przypuszczam, że autor użył jej po części nieświadomie — być może jako rozszerzenie i uatrakcyjnienie popularnej „szklanej” stylistyki. Niezależnie od wszystkiego efekt końcowy sprawia wrażenie, jak gdyby strona

emanowała światłem. W tym przypadku światło zostało użyte nie tylko jako motyw spajający cały projekt, lecz także zwracający uwagę na kluczowe aspekty strony. Film wprowadzający — najważniejszy element na tej stronie pod względem marketingowym — został wyeksponowany poprzez kontrast z bardzo jasnym tłem. Kolejny subtelny przykład zastosowania tego stylu można znaleźć na stronie Pizza Inn (rysunek 2.). W tym przypadku chodzi mi głównie o serię świetlistych smug, stanowiącą ciekawy akcent na czerwonym gradiencie w tle. Podobnie jak w poprzednim przypadku, wątpię, aby projektant zastosował ów efekt z myślą o iluminacji, ale dokładnie tak należałoby go zaklasyfikować. Świetlne akcenty dodatkowo eksponują treść strony, urozmaicają ją i nadają jej plastyczny, przestrzenny charakter.

http://ryanmcmaster.com

109

Rysunek 2. http://www.pizzainn.com

Rysunek 1. http://strutta.com

http://trystentertainment.com

110

http://www.zionseven.net

http://neutroncreations.com

http://www.digitalgurus.co.uk

http://tomatogallery.yzx.se

http://www.addnoise.nl

111

http://www.mdxinteractive.com

uwagi od dewelopera Choć praktyczna implementacja takiego stylu nie powinna mieć istotnego wpływu na koszt realizacji projektu, w pewnych przypadkach może to być dość uciążliwe. Jeśli iluminacja strony opiera się na jasnych otoczkach wokół obiektów oraz mnóstwie gradientów, to przygotuj się na kłopoty. Otoczki i poświaty to zmora deweloperów, zwłaszcza jeśli obwiedzione nimi obiekty mają reagować zmianą wyglądu na wskazanie ich kursorem myszy albo zmieniać się w inny sposób po wykonaniu określonych działań przez użytkownika. Zastanów się, czy i w jaki sposób efekty poświaty mogą ingerować w strukturę otaczających je elementów (przynajmniej w chwili interakcji z użytkownikiem). Na przykład nałożenie przycisku otoczonego poświatą na tło z gradientem oznacza konieczność zastosowania jednego z dwóch rozwiązań: albo użycia częściowo przezroczystych elementów graficznych (co wymaga znajomości kruczków związanych z obsługą formatu PNG), albo umieszczenia fragmentu tła w grafice przycisku — to zaś rodzi konieczność bardzo precyzyjnego dopasowania poszczególnych elementów. Podsumowując, nie jest to przeszkoda nie do pokonania — trzeba jedynie pamiętać, że gradienty, cienie i aureole mogą wymagać szczególnie uważnego traktowania, aby nie powodowały problemów. http://www.factoria.me

112

http://www.harlandwilliams.com

http://cannonballcommunications.com

http://kissmetrics.com

http://adcapitalindustries.com

113

/

podział stron według składników wizualnych slogan • światło • iPhone jako ozdobnik • łącza do serwisów społecznościowych • ikony • typografia • tła fotograficzne

iPhone jako ozdobnik Na popularność wizerunku iPhone’a, wykorzystywanego w roli ozdobnika na niezliczonych stronach internetowych, składają się trzy kwe-

potrzebne, gdyż stanowi on tutaj akcent czysto estetyczny. Z drugiej strony urządzenie świetnie wpisuje się w biurkowy pejzaż w nagłówku,

stie. Pierwsza i najważniejsza — urządzenie jest po prostu piękne. Moja poprzednia, rozkładana komórka wygląda przy nim jak grat. Po drugie, iPhone święci obecnie triumfy

a zarazem stanowi ciekawy sposób na zaprezentowanie materiału wideo. Strona Arat (rysunek 2.) to wizytówka firmy programistycznej, która zajmuje się tworze-

popularności. Można zatem powiedzieć, że strony, na których pojawia się jego zdjęcie, starają się zyskać na fali panującej mody. Wreszcie po trzecie, wiele stron oferuje mate-

niem aplikacji na Maca oraz iPhone’a. Trudno się zatem dziwić obecności zdjęcia smartfonu na stronie głównej. Moją uwagę zwrócił jednak zapadający w pamięć detal w postaci odbicia

riały związane z iPhonem, więc zamieszczenie jego eleganckiego zdjęcia w projekcie stanowi oczywisty sposób na poinformowanie o tym użytkownika. Strona Gelattina (rysunek 1.) to znakomity

pod urządzeniem. Pozornie banalny zabieg sprawia, że zdjęcie wygląda bardzo naturalnie i przypomina o tym, że mamy do czynienia z namacalnym, trójwymiarowym przedmiotem. Dzięki nałożeniu zdjęcia telefonu „na

przykład zastosowania takiego elementu. Przyznam, że w tym przypadku można polemizować, czy użycie zdjęcia iPhone’a było w ogóle

zakładkę” z ciemniejszym nagłówkiem całość sprawia subtelne wrażenie głębi.

Rysunek 1. http://www.gelattina.com

114

Rysunek 2. http://arat.cz

http://www.bottlerocketapps.com

http://www.cellar-app.com

115

uwagi od dewelopera Implementacja tego stylu w dużej mierze podyktowana jest sposobem zastosowania. Jeśli jest to po prostu ozdobnik, który nie pełni żadnych dodatkowych funkcji i nie reaguje na działania użytkownika, to sprawa jest bardzo prosta. Jeżeli jednak zależy Ci na tym, aby był to interaktywny element strony, który naśladuje działanie prawdziwego iPhone’a albo stanowi oprawę do odtwarzanych filmów wideo, to nie obejdzie się bez dodatkowych kosztów. Z filmami sprawa jest stosunkowo prosta: odtwarzacz we Flashu można osadzić na stronie dokładnie w miejscu, w którym znajduje się ekran urządzenia. To naprawdę nic skomplikowanego. Jeśli preferujesz wariant interaktywny, przejrzyj zasoby serwisu Yahoo!, w których można znaleźć fenomenalne grafiki, umożliwiające stworzenie w pełni funkcjonalnego projektu. Cały zestaw można pobrać za darmo pod adresem http://developer.yahoo.com/ypatterns/about/stencils/.

http://icedcocoa.com

116

http://www.imagemakers.uk.com

http://www.liftux.com

http://www.cinemobits.com.br

http://www.magnateinteractive.com

http://www.mockdraftapp.com

117

http://www.rovingbird.com/touringmobilis-nl

http://www.flipside5.com

118

/

podział stron według składników wizualnych slogan • światło • iPhone jako ozdobnik • łącza do serwisów społecznościowych • ikony • typografia • tła fotograficzne

łącza do serwisów społecznościowych Trudno się dziwić, że łącza do serwisów społecznościowych zagościły na niemal wszystkich stronach WWW. Od serwisów korporacyj-

Kolejna taktyka polega na ulokowaniu ikon w wyeksponowanym miejscu na samej górze strony, podobnie jak jest to w serwisie

nych do blogów — wszędzie można napotkać odsyłacze do Twittera, Facebooka i innych platform tego typu. Istnieje nieprzebrana liczba darmowych zestawów ikon, które w tym

Aus120 (rysunek 2.). W tym przypadku łącza znajdują się w prawym górnym rogu, w jednym z najcenniejszych, strategicznych obszarów projektu. Świadczy to o tym, że na omawia-

celu opracowano. Ja natomiast postanowiłem przyjrzeć się przykładom ich wkomponowania w projekty stron. Jedna z najczęściej spotykanych strategii

nej stronie (a także wielu innych, w których zastosowano takie rozwiązanie) użytkownicy serwisów społecznościowych są traktowani priorytetowo. Podobna koncepcja została wy-

polega na umiejscowieniu łącz w postaci listy na samym dole strony. Takie rozwiązanie zostało zastosowane na przykład na stronach Kim Burgess (rysunek 1.) czy Lisy Bun (rysunek 2.). Taki schemat stał się bardzo popularny

korzystana na stronie Michaela Austina (rysunek 4.), choć w tym przypadku można mówić o jeszcze bardziej dobitnym wyeksponowaniu ikon (że nie wspomnę o okienku z najnowszym wpisem z Twittera w prawym górnym rogu). Na innych stronach — takich jak miniaturowa wizytówka Johna Philipsa (rysunek 5.) —

i jest w ten lub inny sposób stosowany w stopkach wielu stron internetowych. Jest to zarazem bardzo logiczne wyjście: po zapoznaniu się ze stroną użytkownik może wybrać jedno z łącz prowadzących w inne miejsca związane z jej treścią bądź zapoznać się bliżej z autorem.

omawiane łącza stanowią dosłownie treść projektu. Można powiedzieć, że strona odgrywa

http://www.albertlo.com

tutaj rolę miniportalu, kierującego odwiedzających do różnych serwisów społecznościowych używanych przez autora.

119

Rysunek 2. http://www.lisabun.com

Rysunek 1. http://www.kimburgess.info

Rysunek 4. http://maustingraphics.com

120

Rysunek 3. http://www.aus120.com

uwagi od dewelopera Serwisy społecznościowe przeżywają prawdziwy rozkwit, więc powszechna obecność ich logo oraz łączy na stronach internetowych nie powinna być dla nikogo zaskoczeniem. Problemy techniczne związane z umieszczeniem ich na stronie są bardzo niewielkie (praktycznie żadne), nie mają one więc większego wpływu na koszt opracowania projektu. Choć zamieszczenie na stronie zwykłych łącz do serwisów nie stanowi problemu, to wyświetlanie aktualnych komunikatów z takiego źródła nie jest już takie proste. Sama implementacja mechanizmów RSS nie wymaga dużo pracy — znacznie gorzej jest z prezentowaniem i aktualizowaniem informacji na żywo. Takie rozwiązania wymagają na ogół osobistego skontaktowania się z serwisem źródłowym. Trzeba też zdawać sobie sprawę z konsekwencji ewentualnej awarii usług, na którą nie będziesz miał żadnego wpływu. Jeśli chodzi o ikony serwisów społecznościowych, to do moich ulubionych (i darmowych) należą:

• Zestaw rozszerzony Komodo Media:

http://adellecharles.com

http://www.komodomedia.com/blog/2009/06/social-network-icon-pack

• Owalne ikony Vikiworks: http://vikiworks.com/2007/07/28/social-bookmark-iconset-part-2/

• „Szkicowane” ikony z serwisu Jankoatwarpspeed.com: http://www.jankoatwarpspeed.com/post/2008/10/20/Handycons-a-free-hand-drawn-social-media-icon-set.aspx oraz http://www. jankoatwarpspeed.com/post/2009/02/23/Handycons-2-another-free-hand-drawn-icon-set.aspx.

http://www.cucweb.org

Rysunek 5. http://www.johnphillips.me

121

http://www.kmkzband.com

http://www.visualgroove.net

http://www.levikoi.com http://3diddi.com

122

/

podział stron według składników wizualnych slogan • światło • iPhone jako ozdobnik • łącza do serwisów społecznościowych • ikony • typografia • tła fotograficzne

ikony Ikony są dla internetu tym, czym dla motoryzacji symbole na maskach samochodów (a przynajmniej czym były owe symbole w latach 70.).

biblioteki ikon, wtapiają się w treść tak dobrze, że nie sposób domyślić się ich źródła. Wydaje się raczej, że musiały być stworzone spe-

części, z powodzeniem pełnią funkcje komunikacyjne. Ponieważ ta część strony jest trochę gęściej zaaranżowana, ikony pomagają roz-

Pomimo niewielkich rozmiarów ikony mogą przekazywać tak wiele informacji, że aż się proszą, aby ich używać. Nic więc dziwnego, że projektanci korzystają z nich na najróżniejsze

cjalnie na potrzeby tego projektu. Funkcjonalność ikon w dużej mierze uzależniona jest od ich symboliki, lecz w tym przypadku nawiązuje ona do typowych motywów. Innymi

dzielić rozmieszczoną w niej treść i ułatwiają szybkie odnalezienie potrzebnych informacji. Porównajmy opisaną stronę do portfolio Lieve’a Sonkego (rysunek 3.). W tym przypad-

sposoby. Na potrzeby tego rozdziału wybrałem kilka ciekawych przykładów, które ilustrują walory ikon w zakresie komunikacji w pigułce. Jednym z moich ulubionych przykładów

słowy, zastosowane ikony opierają się na tradycyjnych symbolach, którym nadano świeżą, oryginalną formę. Warto pamiętać o tym, że ikony nie mu-

jest strona 53 Mondays (rysunek 1.). Odręcznie rysowane symbole przełamują tradycyjne trendy, które polegają na tworzeniu superdokładnych miniaturek i idealnie wpisują się w stylistykę strony. Choć pochodzą z darmowej

szą narzucać stylu całej strony i równie dobrze sprawdzają się jako elementy pomocnicze. Znakomitym dowodem na poparcie tej tezy jest strona Grooveshark VIP (rysunek 2.). Mimo że ikony znajdują się jedynie w jej dolnej

ku można mówić o projekcie wręcz zbudowanym na ikonach: są one większe niż zwykle i umieszczone na swego rodzaju półkach niczym trofea zachęcające, aby je podziwiać. Rola poszczególnych ikon w zasadzie nie wymaga wyjaśnień, stąd też ich opisy są relatywnie niewielkie. Czytelne odwołania do znanych motywów sprawiają, że ich funkcjonalności trudno cokolwiek zarzucić.

123

Rysunek 2. http://vip.grooveshark.com

Rysunek 1. http://53mondays.com

http://www.thepeachdesign.com

124

http://theiconlab.com

Rysunek 3. http://www.id83.nl

uwagi od dewelopera Z punktu widzenia programisty ikony nie nastręczają wielu problemów w trakcie implementacji. Postanowiłem więc raczej podsunąć Ci adresy kilku ciekawych stron, ułatwiających odnalezienie ikon w żądanym stylu (przy założeniu, że szukasz gotowego zestawu). Serwis Iconfinder.net oferuje rewelacyjną wyszukiwarkę ikon, która zaspokoi niemal wszystkie typowe potrzeby. Gdy podejmiesz już decyzję co do stylu strony, skorzystaj z wyszukiwarki i sprawdź, czy uda Ci się znaleźć gotowy zestaw ikon, który będzie do niego pasował. Jeśli opracowujesz szatę graficzną aplikacji, to być może zainteresuje Cię jeden z najpopularniejszych zestawów ikon, dostępny pod adresem famfamfam.com. Jest to olbrzymi zbiór symboli (około 1000), a co najważniejsze — darmowy. Przestrzeganie norm bywa niekiedy przydatne — choćby dlatego, że umożliwia czerpanie z zasobów opracowanych zgodnie z konkretnymi standardami, np. ze strony feedicons.com można pobrać darmowe, standardowe ikony RSS. Zapoznaj się też z materiałami zgromadzonymi na stronie 119., wśród których znajdziesz adresy stron z ciekawymi ikonami serwisów społecznoś-

http://getconcentrating.com

ciowych.

125

http://www.gositewave.com

http://www.ebandlive.com

http://www.jp3design.com

126

http://nmiciano.com

http://www.easyink.com.au

http://velthy.net

http://www.southernmedia.net

127

http://www.topazti.com

128

http://www.shape5.com

/

podział stron według składników wizualnych slogan • światło • iPhone jako ozdobnik • łącza do serwisów społecznościowych • ikony • typografia • tła fotograficzne

typografia Typografia na stronach internetowych zawsze podlegała pewnym ograniczeniom albo bywała ignorowana. Potrafiła też doprowadzić do

konieczność stosowania pomocniczych grafik i sprawia, że ten nieskomplikowany skądinąd projekt jest znacznie ciekawszy. Owszem,

białej gorączki projektantów — zwłaszcza tych, którzy chcieli przenieść do internetu opracowane w programie graficznym arcydzieła liternictwa. Ich wysmakowane projekty, które

aranżacja pozostałych elementów nie jest bez znaczenia, ale swą urodę projekt zawdzięcza w głównej mierze właśnie liternictwu. Strona coDesign (rysunek 2.) jest znakomi-

powstawały najczęściej w Photoshopie, nie wytrzymywały zderzenia z brutalnymi realiami środowiska WWW. Obecnie istnieje jednak wiele narzędzi, które umożliwiają twórcom dość wierne odwzorowanie na stronach internetowych liternictwa, zwłaszcza jeśli zostanie ono

tym przykładem tego, że ograniczenia związane ze specyfiką typografii internetowej można sprytnie obejść. Nie zastosowano na niej żadnych sztuczek, umożliwiających wykorzysta-

przygotowane z uwzględnieniem pewnych nieuniknionych restrykcji . Bariery, jakie nakłada typografia interne-

nie niestandardowych krojów pisma. Zamiast tego autor zdecydował się skorzystać wyłącznie z „bezpiecznych” krojów i opracował projekt tak, aby do niego pasowały. W rezultacie strona jest lekka (pod względem ilości kodu),

towa, bywają gorzką pigułką do przełknięcia, ale przykłady przedstawione w tej części rozdziału dowodzą, że estetyka nie stoi na straconej pozycji. Jednym z moich ulubionych przy-

a jej wykonanie od strony programistycznej zapewne nie zajęło wiele czasu (także jej aktualizacja będzie tańsza). Takie projekty przypominają mi, jak ważne jest, aby grafik od czasu do

kładów jest strona Darrena Hoyta (rysunek 1.). Pięknie zaprojektowane nagłówki stanowią prawdziwą ozdobę i nadają stronie niepowtarzalny styl. Ich obecność w zasadzie eliminuje

czasu samodzielnie opracował kod jakiejś strony. Świadomość ograniczeń środowiska WWW zdecydowanie ułatwia stworzenie projektu, który będzie można zrealizować bez przeszkód.

http://jbradforddillon.com

129

Rysunek 1. http://www.darrenhoyt.com

Rysunek 2. http://thecodesign.org

130

http://beargraphics.co.uk

uwagi od dewelopera Dla początkujących projektantów typografia w internecie może być prawdziwym utrapieniem. Na szczęście jej ograniczenia można obejść na kilka różnych, dość wygodnych w implementacji sposobów, dzięki którym nie trzeba uciekać się do sztuczek w rodzaju tworzenia ozdobnych nagłówków w postaci obrazków. Istnieją trzy narzędzia umożliwiające wyświetlanie krojów pisma spoza bezpiecznej palety krojów: sIFT (http://www.mikeindustries.com/blog/sifr), cufón (http://cufon.shoqolate.com/generate) oraz Typekit (http://typekit.com). Dwa pierwsze są darmowe, zaś ostatni to projekt komercyjny. Z narzędzia sIFT korzystałem na wielu stronach internetowych. Jest ono proste do zainstalowania, a po skonfigurowaniu staje się praktycznie bezobsługowe: wskazany tekst jest dynamicznie wyświetlany w żądanym kroju pisma. Komplikacje pojawiają się w chwili, gdy wymienione narzędzia używane są do generowania napisów na niejednolitych tłach. Jest to coś, na co należy koniecznie zwrócić uwagę, aby projekt mógł być z powodzeniem zrealizowany i aby nie sprawiał problemów przy aktualizacji. Chodzi przecież nie tyle o to, czy jakiegoś kroju pisma da się użyć na stronie, ale raczej o to, jak kosztowne będzie jej późniejsze utrzymanie i obsługa. Niemniej jednak automatyczne narzędzia — takie jak podane przed chwilą — pozwalają obniżyć koszty przy zachowaniu znakomitej estetyki projektu.

http://www.behoff.com

http://ligatureloopandstem.com

131

http://www.typechart.com

132

http://www.thevileplutocrat.com

http://www.integritystl.com

http://www.piscataqua.com/index.aspx

http://www.lovefreelancing.com

http://www.squarefour.net

133

http://malwin-faber.de

134

http://www.votedougducey.com

/

podział stron według składników wizualnych slogan • światło • iPhone jako ozdobnik • łącza do serwisów społecznościowych • ikony • typografia • tła fotograficzne

tła fotograficzne Zastosowanie na stronach WWW zdjęć albo innego rodzaju złożonych teł graficznych (zamiast zwykłych, jednobarwnych oraz prostych

jednocześnie jest składnikiem pierwszego planu. Treść strony została zaaranżowana tak, aby pozostawić mu wolne miejsce (a przynajmniej

jednak uważam, że warto wspomnieć o aktualnych koncepcjach, aby się przekonać, że coś tak prostego jak tło można zaprząc do

gradientów) ma dość długą tradycję. Z perspektywy projektanta takie rozwiązanie daje ciekawe możliwości i umożliwia zrealizowanie interesujących koncepcji artystycznych.

jego części, gdyż niektóre pierwszoplanowe detale w pewnym stopniu go przysłaniają). Można powiedzieć, że z punktu widzenia struktury strony kwiat znajduje się gdzieś pośrodku.

pracy w kreatywny, niestandardowy sposób. Pomysłowość w tym względzie zachęca mnie do ponownego spojrzenia na podstawowe składniki projektów, które niekiedy stosuję bez

Tradycyjne podejście polegało na prostym, a zarazem eleganckim wkomponowaniu takiego tła w stronę. Na przykład serwisy Leaf Tea Shop & Bar (rysunek 1.) oraz The Creative

Podobny efekt widzimy na stronie Noaha Shradera (rysunek 4.). Zdjęcie w tle jest tutaj pełnoprawnym elementem treści. Ta dynamiczna aranżacja sprawia, że tło nabiera

większego namysłu.

Dot (rysunek 2.) mają bardzo skomplikowane tła, które w naturalny sposób wymuszają uproszczenie pierwszego planu. Zdjęcia tworzą nastrój stron i poniekąd informują widza o celu ich istnienia. Choć takiemu schematowi

szczególnego znaczenia. Ogólnie rzecz biorąc, opisany zabieg stylistyczny nadaje stronie indywidualny, unikatowy wygląd, a zarazem pozwala zachować szczególny minimalizm, który upraszcza komunikację i nadaje projektowi

trudno coś zarzucić, wielu projektantów zaczęło z nim eksperymentować. Sprawy przybierają ciekawszy obrót, gdy tło fotograficzne staje się elementem treści. Na

przejrzysty nurt. To niezwykłe, że w tak wąskiej dziedzinie, jaką są tła fotograficzne, dzieje się coś tak ciekawego i pomysłowego. Jestem pewien,

przykład na stronie Rommila Santiago (rysunek 3.) kwiat teoretycznie znajduje się w tle, ale

że próby przełamania skostniałych schematów były podejmowane wcześniej, niemniej

http://www.bensky.co.uk

135

Rysunek 1. http://www.thisisleaf.co.uk

http://www.housetopmedia.com

136

http://blog.newsok.com/afghanistan-iraq/mikes-blog

Rysunek 2. http://www.njwebdesign.co.za

uwagi od dewelopera Deweloperzy na ogół z rezerwą podchodzą do projektów, które wymagają łączenia niektórych części tła z główną treścią strony. Jeśli obiekty znajdujące się ponad tłem muszą dać się przesuwać, to nieodzowne będzie zastosowanie przezroczystych obrazów PNG. Jeżeli mogą pozostać nieruchome, przezroczystość można niekiedy zasymulować poprzez odpowiednie rozmieszczenie elementów graficznych. PNG to format podobny do JPEG oraz GIF, lecz w odróżnieniu od nich umożliwia zastosowanie kanału przezroczystości (alfa). To oznacza, że obraz zapisany w tym formacie może być w różnym stopniu przejrzysty, podobnie jak to ma miejsce w przypadku obiektów graficznych w Photoshopie. Niestety, Rysunek 3. http://www.rommil.com

obsługa tego formatu przez niektóre przeglądarki jest kłopotliwa — zwłaszcza stary, dobry Internet Explorer będzie wymagał pewnych poprawek (jedną z najlepszych można znaleźć pod tym adresem: http://www.twinhelix.com/ css/iepngfix). Nie jest to jednak bardzo poważna przeszkoda; trzeba jedynie pamiętać, że deweloper będzie zmuszony do zastosowania kilku trików. Z drugiej strony koszt ich implementacji nie powinien być zbyt wielki.

Rysunek 4. http://www.noahshrader.com

http://www.davyknowles.com

http://www.albus.fi

137

http://www.superieur-graphique.com

http://www.dettaglio.co.uk

http://v1.maykelloomans.com

http://www.lightqube.co.uk

http://www.schlossanger.de

138

/

przejrzysty • minimalistyczny • szkic • kolaż • ilustrowany • typograficzny • jednolite barwy • tekstylia • drewno

podział stron według stylów i motywów Ktoś mógłby zauważyć, że style i motywy to jedno i to samo (choćby z tego względu, że zestawiłem te słowa w jednym zdaniu), lecz w rzeczywistości — choć ich znaczenie jest rzeczywiście pokrewne — dzielą je pewne różnice. Otóż z mojego punktu widzenia styl reprezentuje ogólną koncepcję projektu, która niekoniecznie musi wymagać używania określonych rodzajów elementów. Na przykład „projekt w stylu retro” nie narzuca zastosowania konkretnych zdjęć czy obrazów. W przypadku motywów jest nieco inaczej — motyw sam w sobie dyktuje konkretne środki wyrazu. Na przykład motyw szkicowy nie obejdzie się bez odręcznie rysowanych elementów. Może prościej: style i motywy to różne podejścia do opracowania projektu strony. Ktoś może opracować stronę minimalistyczną w stylu retro albo ilustrowaną, a zarazem przejrzystą. W gruncie rzeczy chodzi jednak nie o nazewnictwo, a o to, aby poznać podstawowe konwencje stylistyczne i umieć je właściwie zastosować. 139

/

podział stron według stylów i motywów przejrzysty • minimalistyczny • szkic • kolaż • ilustrowany • typograficzny • jednolite barwy • tekstylia • drewno

przejrzysty Jeśli miałbym wybrać jeden styl — czy też jedno podejście do sposobu projektowania — to zdecydowanie wskazałbym właśnie ten. Przy-

od stereotypów krążących na temat agencji reklamowych, a ich strona stanowi silny element tej strategii. Wręcz trudno mi sobie wyob-

kłady zaprezentowane w tej części rozdziału są dla mnie nie tylko reprezentantami pewnego stylu, ale również wzorcami czytelności i funkcjonalności. Projekty z przejrzystym stylem

razić skuteczniejszą koncepcję wizerunkową. Owszem, typowe agencje mają swoją rację bytu, ale jest też duży popyt na antyagencje (podobnie jak na niezależnych projektantów lub na przykład licealistów dorabiających so-

ocierają się wprawdzie o minimalizm, jednak ich nadrzędnym celem jest nie tyle ograniczenie środków wyrazu do minimum, co nadanie im krystalicznie czystej postaci. W rezultacie strony utrzymane w tej konwencji są miłe dla oka i przyjazne w obsłudze. To niezrównane wzory pod względem dopracowania i funkcjonalności. Jako pierwszy przykład tego stylu weźmy stronę Nosotros (rysunek 1.). Konsekwentnie użyte w ramach całego projektu detale w połączeniu z lekką formą sprawiają, że strona jest wyjątkowa. Abstrakcyjna nazwa oraz intrygująco nieokreślone logo w połączeniu ze sloganem zamieszczonym na stronie głównej pozwalają się domyślać podejścia autorów do pracy. Przede wszystkim twórcy odcinają się 140

bie projektowaniem stron). Przejrzystość tego projektu budzi zaufanie i stanowi dla klienta najlepszy dowód na to, że autorzy nie rzucają słów na wiatr. Strona NanoIntegris to świetny przykład siły wymowy przejrzystych projektów. Pomimo niezbyt pasjonującej gałęzi przemysłu firmie udało się stworzyć wizerunek nowoczesnego przedsiębiorstwa posługującego się najnowszymi zdobyczami techniki. Produkty firmy zostały przedstawione klarownie i przystępnie, bez używania dość powszechnego żargonu technicznego, którym często przesycone są opisy złożonych, nowoczesnych procesów i produktów.

http://www.brianhoff.net

Rysunek 2. http://www.nanointegris.com

Rysunek 1. http://www.nosotroshq.com

http://eighty8four.com

141

http://www.jamiegregory.co.uk

http://kiwithemes.com

142

http://fusionads.net

http://nihongoup.com

http://www.rihardsonline.com

http://www.hotgloo.com

http://www.prothemedesign.com

http://www.admkids.com

143

http://www.paperrep.com

http://www.superuserstudio.com

http://www.pixelflips.com

144

/

podział stron według stylów i motywów przejrzysty • minimalistyczny • szkic • kolaż • ilustrowany • typograficzny • jednolite barwy • tekstylia • drewno

minimalistyczny Styl minimalistyczny zawsze cieszył się popularnością i do dziś uznawany jest jako jeden z najskuteczniejszych i najlepiej odbiera-

jektów, minimalistyczny styl jest doskonałym wyborem: odbiorca może się skupić na podziwianiu prac autora (a nie udziwnionego mo-

łożeń projektu, tak jak miało to miejsce choćby w przypadku ich własnej strony. Wybór stylu minimalistycznego prezentuje agencję jako

nych stylów w projektach stron internetowych. Nic dziwnego, ponieważ konwencja minimalistyczna umożliwia tworzenie bardzo funkcjonalnych, a zarazem ponadczasowych serwi-

tywu graficznego, który mógłby na przykład naśladować wygląd e-maila). W tym przypadku styl nie mówi wiele o autorze i nie narzuca konkretnego odbioru treści, lecz realizuje pragmatyczny cel: ma jak najlepiej eksponować prezentowane prace i stanowić dla nich elegancką oprawę.

skuteczny, efektywny zespół nastawiony na realizację konkretnych celów. Oczywiście, teraz już tylko od autorów zależy, czy spełnią te oczekiwania, ale wymowa strony jest jed-

sów WWW. Projekty tego typu są też na ogół łatwiejsze do oprogramowania i utrzymania. Nie daj się jednak zwieść pozorom: pod względem wizualnym zaprojektowanie strony w tym

Strona agencji retrostrobe (rysunek 2.)

noznaczna. Kolejny przykład omawianej konwencji to strona Sreski (rysunek 3.). Choć tradycyjny, minimalistyczny styl skłania do stosowa-

stanowi kolejny ciekawy sposób interpretacji omawianego stylu, a zarazem dowodzi, że „minimalistyczny” nie musi oznaczać „ubogi”, „nudny” czy po prostu mało zajmujący. Mamy tutaj stronę, która stanowi zarazem przy-

nia białego tła, to ten przykład dowodzi, że tło w ciemniejszym odcieniu albo w innym kolorze nie koliduje z ideą minimalizmu. Ascetyczna oprawa omawianej strony eksponuje prezentowane prace. To, co najbardziej urzekło

omawianego stylu. Oprócz minimalistycznej konwencji cechuje się wyjątkowo nietypowym układem elementów oraz systemem nawiga-

kład tego, w jaki sposób projektanci agencji mogą podejść do realizacji zlecenia. Odnoszę wrażenie, że po zapoznaniu się ze wstępną koncepcją starają się oni znaleźć najlepszą,

cji. Ponieważ celem strony jest ekspozycja pro-

najskuteczniejszą metodę na osiągnięcie za-

mnie w tym projekcie, to zaadaptowanie treści pod kątem zdjęć. Po co przycinać długie fotografie do postaci kwadratu, skoro można je zaprezentować w pełnej krasie? To naprawdę oryginalne podejście.

stylu wcale nie jest proste, wymaga olbrzymiej dbałości o detale i bystrego oka, wyczulonego na subtelności. Strona Inbox Awards (rysunek 1.) — projektanta e-maili oraz biuletynów elektronicznych — jest interesującym przykładem

145

Rysunek 1. http://www.inboxaward.com

Rysunek 2. http://www.retrostrobe.com

Rysunek 3. http://www.sreski.com

146

http://nathancarnes.com

http://www.fourthfloorinteractive.com

http://www.pfxcontracts.net

http://www.conetrees.com

http://robertsonuk.net

147

http://www.playout.pt

http://www.studiozfilms.com

http://www.ryanjclose.com

148

http://plsr.net

http://www.diografic.com

http://www.airbnb.com

http://www.rozner.pl

http://lensco.be

149

/

podział stron według stylów i motywów przejrzysty • minimalistyczny • szkic • kolaż • ilustrowany • typograficzny • jednolite barwy • tekstylia • drewno

szkic Jeden z najskuteczniejszych sposobów na stworzenie wyjątkowego projektu polega na zastosowaniu elementów rysowanych odręcznie. Nic dziwnego: dwoje różnych ludzi nie narysuje tego samego tematu w identyczny sposób. Nawet jeśli poprosimy dwóch rysowników, aby uwiecznili tę samą scenę, to użyją

150

ny rękami zapalonych internautów, a nie mistrzów kodu. Kto wie, może to nawet prawda? Tylko że to nie ma większego znaczenia. Chodzi o promocję produktu, którą wspiera konkretny wizerunek strony. W innych przypadkach, np. na stronie Camelii Dobrin (rysunek 2.), koncepcja jest tak

ilustracje stanowią nie tylko ozdobę, lecz także informują odbiorcę, czym zajmuje się autorka. Ręcznie rysowane elementy mogą też bezpośrednio nawiązywać do głównej misji strony. Tak jest na przykład w przypadku projektu Greenville (rysunek 4.). Instytucje zajmujące się opieką medyczną mają twardy orzech do zgryzienia, jeśli chodzi o promocję określone-

zupełnie innych technik, innych kompozycji i nadadzą swoim pracom odrębny, indywidualny rys. Z tego względu omawiany styl trafił na sporą liczbę stron WWW. Przyjrzyjmy się

oczywista, że nie budzi wątpliwości. Mamy do czynienia z portfolio, które powinno jak najlepiej prezentować umiejętności autorki. Już sam rysunek na stronie głównej jest wyjątko-

kilku takim przykładom. Swobodna konwencja strony Twiggy (rysunek 1.) sprawia wyjątkowe wrażenie; trudno porównać ją do jakiejkolwiek innej strony internetowej. W tym przypadku styl znakomi-

wy i świetnie przedstawia indywidualny styl ilustratorki. Z bardzo podobnym podejściem mamy do czynienia na innych tego typu stronach, np. w portfolio Jesette Dayate (rysunek 3.). Także i tutaj już na podstawie szaty graficz-

strony. Taki styl wyróżnia instytucję (zwłaszcza w ramach jej branży) i ociepla jej wizerunek w oczach odbiorcy. Stylistyka tego projektu ma sympatyczny, osobisty charakter, który przełamuje skostniałe stereotypy dotyczące

cie buduje niezobowiązującą, luźną atmosferę. Projekt sprawia wrażenie, jakby był stworzo-

nej projektu możemy się zapoznać z niepowtarzalnym stylem artystki. Zamieszczone w nim

branży medycznej.

go wizerunku, gdyż często są postrzegane jako bezduszne. Być może właśnie to piętno miało wpływ na wybór ręcznie rysowanego stylu

Rysunek 2. http://www.camellie.com Rysunek 1. http://twiggy.carsonified.com

Rysunek 4. http://www.happyingreenville.com

Rysunek 3. http://www.crayonslife.com

http://ami.wookypooky.com

151

uwagi od dewelopera Jest to jeden z tych stylów, których implementacja może być albo koszmarem, albo nie nastręczać żadnych szczególnych trudności. Pod wieloma względami jest to kwestia projektu. Oto kilka istotnych spraw, od których w dużej mierze zależy, czy programista będzie chciał Cię udusić… Jak wiele elementów projektu trzeba będzie tworzyć odręcznie od zera przy każdej aktualizacji treści strony? (Mogą to być na przykład odręcznie pisane albo rysowane nagłówki). Po pewnym czasie takie aktualizacje staną się bardzo uciążliwe, byłoby więc wspaniale, gdyby obejmowały jedynie to, co konieczne. Doskonałym sposobem na uniknięcie tego problemu jest zastosowanie krojów pisma z grupy pisanek, które można umieścić na stronie za pośrednictwem narzędzi opisanych w części poświęconej typografii (patrz strona 129.), bądź stworzenie niepowtarzalnego fontu na podstawie własnego odręcznego stylu pisma za pomocą ciekawego generatora fontów, dostępnego na stronie http://www.yourfonts.com.

http://www.rawcoach.be

Kolejna istotna kwestia to zachodzące na siebie obiekty oraz niestandardowe wyrównanie elementów. Jeśli projekt „rysunkowy” zawiera elementy, które na siebie zachodzą, bądź motywy składające się z kilku części, to wiedz, że ich implementacja będzie wymagała dodatkowego nakładu pracy. Podsumowując, realizacja projektu w tym stylu nie powinna kosztować fortuny, pod warunkiem że zostanie on dobrze przemyślany.

http://www.tylergaw.com

152

http://mesonprojekt.com

http://www.albertocerriteno.com

http://www.espiratecnologias.com

http://www.chrisspooner.com

http://www.ebandlive.com/users/dirtydozenbrassband803

153

/

podział stron według stylów i motywów przejrzysty • minimalistyczny • szkic • kolaż • ilustrowany • typograficzny • jednolite barwy • tekstylia • drewno

kolaż Kolaż to jeden z tych stylów, które po prostu nigdy nie wychodzą z mody. Projekty utrzymane w tej bardzo uniwersalnej konwencji składają

każdej z nich połączyli różne elementy w klasyczny, sprawdzony sposób, lecz otrzymali diametralnie różne efekty. Być może właśnie ela-

w tym celu motywy często nawiązują do pierwszego półwiecza XIX wieku i stanowią wysmakowany estetycznie sposób na skojarzenie tre-

się z wielu elementów o różnym znaczeniu. Łącznie tworzą one zbiór, który jest nie tylko interesujący pod względem wizualnym, ale zawiera także wiele cennych informacji o treści

styczność i pojemność tego stylu tłumaczy jego niesłabnącą popularność. Na wielu stronach kolaż jest używany głównie w celach ozdobnych. Chcę przez to

ści strony z tą epoką. Doskonałym przykładem projektu z tego nurtu jest strona Sign Shop (rysunek 5.). Kolaż jest zarazem jedną z bardziej nad-

strony oraz jej autorach. Zwróć uwagę na niezwykle zróżnicowaną tematykę prezentowanych projektów. Ta różnorodność jest jednym z najciekawszych aspektów przykładowego

powiedzieć, że ich autorzy kładą większy nacisk na wygląd niż na ukryte znaczenia. Na stronie Matta Northama (rysunek 4.) oraz Duirwaigh Studios (rysunek 3.) omawiany styl ma

używanych konwencji stylistycznych i odnoszę wrażenie, że projektanci często sięgają po niego z braku innych pomysłów na stronę. Innymi słowy, traktują go jako swego rodza-

zbioru. Na przykład na stronie Real Sangria (rysunek 1.) kolaż został wykorzystany do zwrócenia uwagi widza na kluczowy element projektu, zaś na stronie Adam’s Magic (rysunek 2.)

za zadanie uatrakcyjnić projekt i nadać mu oryginalny wygląd. Owszem, kolaże na tych stronach mają bardzo charakterystyczny styl i nastrój, lecz w gruncie rzeczy całość jest raczej sztuką dla sztuki. Jedno z najpopularniejszych zastosowań kolaży na stronach internetowych polega na stworzeniu atmosfery w stylu retro. Używane

ju wyjście awaryjne. Tym cenniejsze są więc dobrze przemyślane przykłady użycia kolaży, które dowodzą, że nie należy ich pochopnie skreślać z biblioteki używanych stylów.

jest utrzymany w znacznie lżejszej konwencji, a przecież obydwie te strony zostały wykonane z użyciem tych samych technik. Autorzy

154

Rysunek 1. http://real-sangria.com

Rysunek 2. http://www.adamsmagic.com

Rysunek 3. http://www.Duirwaigh.com

Rysunek 4. http://www.mattnortham.com

155

Rysunek 5. http://www.signshopmarketing.com

http://chirp.twitter.com

156

http://www.carbonsugar.com

uwagi od dewelopera Problemy z implementacją projektów w stylu collage wiążą się głównie z zastosowaniem przezroczystych obrazów, o czym pisałem już w części poświęconej tłom fotograficznym na stronie 135. Poza tym wpływ omawianego stylu na czasochłonność projektu w dużej mierze zależy od jego specyfiki. Jeśli kolaże znajdują się w autonomicznych obszarach strony, najprawdopodobniej można będzie potraktować je jako zwykłe, statyczne obrazy. Jeśli dla odmiany wplecione są w treść i przekraczają granice innych elementów, to ich implementacja będzie wymagała uwzględnienia dodatkowych czynników. Nic dziwnego, że wielu deweloperów uważa, iż projekty, w których kolaże wykraczają poza obramowania innych elementów, są kłopotliwe w realizacji. Odpowiednie pozycjonowanie za pomocą CSS w połączeniu z zastosowaniem przezroczystych obrazów PNG powinno jednak załatwić sprawę. Prawdziwy problem leży gdzie indziej, a mianowicie w bardzo wymagającej szacie graficznej tego typu stron. Chodzi mi o to, że treść przeplata się w nich z grafiką, a to wymusza na deweloperze odwzorowanie projektu źródłowego z chirurgiczną precyzją. To właśnie ta dokładność w dużej mierze odpowiada za wzrost kosztów stworzenia funkcjonalnego projektu na http://www.bbc.co.uk/cbbc/tracybeaker

http://bigskynj.com

podstawie materiałów źródłowych.

http://arose.biz

157

http://www.comfortbrothers.com

158

http://zionsnowboards.com

http://www.joaozanatta.com.br

http://www.swimmingwithbabies.com

http://blog.spoongraphics.co.uk

159

/

podział stron według stylów i motywów przejrzysty • minimalistyczny • szkic • kolaż • ilustrowany • typograficzny • jednolite barwy • tekstylia • drewno

ilustrowany Talent ilustracyjny bywa przydatnym narzędziem w pracy projektanta. Jedną z największych korzyści, które płyną z umiejętności rysowania, jest możliwość dodania do projektu szczypty oryginalności. W świecie cyfrowym, w którym szalenie trudno przyciągnąć uwagę użytkownika na dłużej, każdy sposób na wyróżnienie się jest dobry. Przyjrzyjmy się stronie zaprojektowanej przez moich przyjaciół z firmy FireHost (rysunek 1.). Trudno doprawdy fascynować się usługami hostingowymi, więc bez większej przesady można powiedzieć, że to domena

160

wym tle. Uważam, że uzyskany efekt stanowi świetny kompromis pomiędzy ekspozycją motywu a tradycyjną funkcjonalnością. Na stronie Lionite (rysunek 2.) ilustrowane motywy przenikają właściwie każdy aspekt projektu. Delikatna, prosta i uporządkowana kreska sprawia, że pomimo przesycenia ilustracjami strona nie jest przesadnie krzykliwa. Zastosowana konwencja doskonale oddaje podejście autorów i sprawia, że odbiorca ma wrażenie obcowania z żywymi, normalny-

maniaków komputerowych. Tymczasem projekt wspomnianej strony, w którym główne role grają spersonifikowane usługi, serwery, zabez-

mi ludźmi, a nie z kolejną odmianą serwisu ze zdjęciami, opatrzoną fotografią sztucznie uśmiechniętej pani z telefonem, która stara się robić wrażenie pomocnej. Kilka projektów autorstwa Saizen Media

pieczenia i hakerzy, wnosi prawdziwy powiew oryginalności do tego schematu. Komiksowy styl ilustracji oraz animacji sprawia, że strona jest dynamiczna i zarazem charakterystyczna.

Studios (rysunki 3., 4. oraz 5.) dowodzi, że projekt strony WWW może być dziełem sztuki. Tego rodzaju realizacje nie są być może w zasięgu większości z nas, ale nic nie stoi na przeszko-

Projekt całości został dopasowany do stylistyki komiksowych bohaterów, ale na szczęście projektant nie przesadził i na przykład nie umieścił wszystkich napisów w dymkach albo na rastro-

dzie, aby się nimi inspirować. Warto się przekonać, że pomysły, które wielu projektantom wydają się nierealne, w rzeczywistości można z powodzeniem zrealizować.

http://www.francescomugnai.com

Rysunek 2. http://www.lionite.com Rysunek 1. http://www.firehost.com

http://www.edelwwweiss.com

http://www.launchmind.com

161

Rysunek 3. http://www.emergence-day.com

http://kiwi-app.net

162

http://insectropolis.com

Rysunek 4. http://www.saizenmedia.com/FFIV

Rysunek 5. http://www.saizenmedia.com/nightwish

http://shauninman.com

http://www.cupcakecarousel.co.uk

http://culturapositiva.com

163

http://www.sunskool.com

http://events.carsonified.com

http://tomatic.com

164

http://www.mikimottes.com

http://www.2pitch.com

http://www.amitkhera.com

165

/

podział stron według stylów i motywów przejrzysty • minimalistyczny • szkic • kolaż • ilustrowany • typograficzny • jednolite barwy • tekstylia • drewno

typograficzny Tę część rozdziału poświęciłem projektom, w których główną rolę odgrywa typografia. Większość z nich można w zasadzie potrakto-

z bardzo czytelną hierarchią sprawiają, że ta miniaturowa strona wygląda niezwykle przejrzyście. O ironio, przykłady takie jak ten wyglą-

wać jako strony minimalistyczne; być może jest to po prostu inne spojrzenie na tę samą konwencję artystyczną. Różnica, choć drobna, polega na eleganckim zastosowaniu typografii.

dają na bardzo proste w realizacji, lecz w praktyce uzyskanie tak dobrego efektu za pomocą niemal czystego tekstu wymaga ogromnego nakładu pracy. Strona agencji projektowej Buckenmeyer

Na przykład osobista wizytówka, będąca zarazem portfolio Shaya Howego (rysunek 1.) jest bez wątpienia utrzymana w minimalistycznym stylu. Cechują ją jednolite barwy, rozdzie-

& Co. (rysunek 3.) to dość zaskakujący przykład praktycznej implementacji omawianego stylu. Zaskakujący, gdyż lwia część projektan-

lenie treści za pomocą linii oraz typografia użyta w roli jednego z głównych elementów projektu. Szczególną funkcję pełni tutaj logotyp, którego wysmakowana prostota wpływa na nastrój całości. Ogromną zaletą tego rodza-

tów promujących swoje usługi nie umie się oprzeć pokusie i przedstawia próbki swoich umiejętności w postaci bogatej stylistycznie strony. Tymczasem ten minimalistyczny serwis, w którym główną rolę odgrywa liternictwo,

ju projektów jest krótki czas ładowania i przystępna forma treści. Kolejnym z moich ulubionych przykładów stron „typograficznych” jest wizytówka Johny’ego Favourite’a (rysu-

prezentuje zupełnie inne podejście do oprawy wizualnej. Projekt sprawia wrażenie odważnego i pewnego siebie, a zarazem jest konserwatywny i budzi zaufanie. To zadziwiające, jak

nek 2.). Tekst został tutaj potraktowany w elegancki, wyjątkowo estetyczny sposób, a prosta, kontrastowa paleta barw w połączeniu

wiele intencji autorów można odczytać tylko na podstawie wybranego stylu. http://www.endemit.si

166

Rysunek 2. http://dj.johnyfavourite.co.uk

Rysunek 1. http://www.shayhowe.com

Rysunek 3. http://www.miguelbuckenmeyer.com

http://www.wedesignwise.com

167

uwagi od dewelopera Najbardziej oczywiste ograniczenia związane z wyborem omawianego stylu dotyczą użycia krojów pisma, tzw. bezpiecznych do stosowania w internecie. Jeśli temat ten jest Ci mało znany, sugeruję odwiedziny na stronie http:// www.typetester.org. Przekonasz się wówczas, jak niewielkie możliwości ma typografia internetowa. Na wszystko jednak jest sposób. Narzędzia umożliwiające obejście uciążliwych ograniczeń zostały pokrótce przedstawione na stronie 129 w części zatytułowanej „typografia”. Jeśli tworzysz projekt opierający się w dużej mierze na typografii, a zwłaszcza jeśli liternictwo ma być najbardziej widowiskowym elementem strony, to użycie wyłącznie krojów bezpiecznych byłoby zbyt pragmatyczne. W takiej sytuacji najrozsądniejszym wyjściem jest stworzenie strony, która oprócz krojów bezpiecznych zawiera także niestandardowe, nowoczesne liternictwo, uzyskane dzięki wspomnianym trikom typograficznym.

http://www.nkbookreviews.com

168

http://www.min-style.de

http://www.unieq.nl

http://m1k3.net

http://www.leandaryan.com

http://www.gesteves.com

169

http://de-online.co.uk

http://www.brandedcode.com

http://www.sabeapp.com http://www.syrrup.com

170

/

podział stron według stylów i motywów przejrzysty • minimalistyczny • szkic • kolaż • ilustrowany • typograficzny • jednolite barwy • tekstylia • drewno

jednolite barwy Sporą popularnością na stronach WWW cieszy się ostatnio trend polegający na stosowaniu dużych, jednolicie zabarwionych obszarów.

W efekcie powstała strona czytelna, przejrzysta i po prostu piękna. Kolejnym znakomitym przykładem wybiór-

Zamiast użycia deseni albo ozdobnych ramek wielu projektantów decyduje się na prostsze rozwiązanie i konstruuje projekt z monochromatycznych, jednolitych kształtów. Choć w sa-

czego potraktowania tego stylu jest strona IntuitionHQ (rysunek 2.). Dominujące obszary jednolitych barw zostały przełamane eleganckimi, pseudotrójwymiarowymi elementami,

mym trendzie jako takim trudno doszukiwać się jakichś głębszych znaczeń, to warto po prostu przyjrzeć się temu, w jaki sposób przejawia się on w praktyce.

na których wyeksponowano najważniejsze informacje. Projektant podkreślił przestrzenną stylistykę strony łagodnym gradientem w tle oraz delikatnym „nabłyszczeniem” logo. Jak

Po pierwsze, choć idea polega na stosowaniu tytułowych „jednolitych barw”, to nie znaczy, że trzeba wykazywać się przy tym żelazną konsekwencją, a wprost przeciwnie — każdy projektant może zinterpretować ją na swój

widać, sztuka polega na tym, aby znaleźć właściwy kompromis pomiędzy dosłowną interpretacją stylu a własnymi regułami projektowania. Niemniej jednak w wielu przypadkach omawiana konwencja jest interpretowana

sposób. Doskonałym przykładem takiej interpretacji jest strona Remix (rysunek 1.). Choć pozornie przeważają na niej barwy jednolite, to po uważniejszym przyjrzeniu się projektowi

bardziej literalnie. Na przykład na stronie zatytułowanej „99%” (rysunek 3.) praktycznie wszystkie barwne elementy mają jednolity kolor, skonfigurowany za pomocą stylów tła

dostrzegamy, że tak naprawdę wcale nie są takie gładkie! Sztuczka polega na zastosowaniu bardzo subtelnych gradientów, które jedynie minimalnie różnią się od gładkich kolorów.

w arkuszu CSS. Akurat ta strona jest bardzo bogata pod względem treści, więc ozdobniki zostały rozsądnie zmarginalizowane, aby nie odwracać uwagi od prezentowanych informa-

cji. Ponadto dzięki nielicznym obrazkom projekty takie jak ten błyskawicznie się wczytują.

http://www.theglasgowcollective.com

171

Rysunek 2. http://www.intuitionhq.com

Rysunek 1. http://www.remixcreative.net

http://www.alingham.com

172

http://www.helveticbrands.ch

http://www.ibgdg.com

uwagi od dewelopera Nie będzie chyba wielkim zaskoczeniem, jeśli napiszę, że strony skonstruowane na bazie elementów w jednolitych barwach są na ogół bardzo proste do realizacji, a specyfika tego stylu sprawia, iż większość z nich wczytuje się w mgnieniu oka. Dla odmiany strony o cięższej szacie graficznej (z kolażami, fakturą drewna albo tkanin) są zbudowane z wielu dużych zdjęć oraz ilustracji. Taka Rysunek 3. http://the99percent.com

konstrukcja znacznie zwiększa ich objętość oraz wydłuża czas wczytywania. Użytkownikom szerokopasmowych łącz internetowych może się wydawać, że nie jest to może poważny problem, ale w tej branży liczą się sekundy. Liczne badania dowiodły, że wolniej wczytująca się strona zniechęca odbiorców (i zmniejsza obroty w sklepach internetowych). Zarysowany tutaj problem został opisany szerzej w serwisie http://peer1.com pod adresem http://www.peer1.com/node/365*. Przy zastosowaniu omawianego stylu można więc liczyć na skrócenie czasu wczytywania strony, zaś sam styl świetnie sprawdza się w projektach wymagających dużej elastyczności (takich jak sklepy internetowe) Jeśli zastanawiasz się, dlaczego Twoja strona wolno się wczytuje, zapoznaj się z fantastycznym rozszerzeniem Yahoo! YSlow do przeglądarki Firefox, dostępnym pod adresem http://developer.yahoo.com/yslow. Na koniec dodam jeszcze, że na czas ładowania strony hosting może mieć większy wpływ niż sam projekt. Warto o tym pamiętać przy ewentualnym cięciu kosztów na usługi hostingowe.

http://www.kadlac.com * Materiał w języku angielskim — przyp. tłum.

173

http://www.thinkcage.com

http://rawkes.com

174

http://www.cubedroute.com

http://baltimoregreenworks.com

http://www.creativitea.co.uk

http://www.photographyserved.com

http://www.creativecomponent.com

175

http://cramerdev.com

http://new.smilezonedentist.com

http://kolor-designs.com

176

/

podział stron według stylów i motywów przejrzysty • minimalistyczny • szkic • kolaż • ilustrowany • typograficzny • jednolite barwy • tekstylia • drewno

tekstylia Strona z motywem tekstylnym to nic innego jak projekt wykorzystujący faktury tkanin. Ten ciekawy motyw wydaje się ostatnio zyskiwać

że autorzy strony zdecydowali się na taką konwencję. Na stronach większości amerykańskich kościołów przeważają spokojne,

na popularności i pojawia się na bardzo różnych rodzajach stron internetowych. Główny powód tej ekspansji jest podobny jak w przypadku wielu innych popularnych obecnie stylów: chęć oswojenia cyfrowej domeny

organiczne motywy, które mają pewne cechy wspólne z zaprezentowanym przykładem. One także nawiązują do współczesnych trendów, aczkolwiek daje się w nich zauważyć nieco

i stworzenia miejsca, które będzie wyglądało ciepło, przyjaźnie i zachęcająco. Pomyśl o ciężkich, betonowych ławkach, stawianych w przestrzeni miejskiej. Choć z urbanistycznego punktu widzenia być może wyglądają dobrze i funkcjonalnie, to nie są wygodne ani też nie skłaniają do chwili relaksu. Przez analogię strony w przyjaznym, ciepłym stylu na ogół są postrzegane jako zachęcające do odwiedzin.

większa domieszka tradycjonalizmu, na tyle jednak subtelna, aby nie zniechęcała młodego pokolenia wiernych. Przykładem bardzo subtelnej interpretacji omawianego stylu jest portfolio Tomaža Žlendera (rysunek 2.). Choć motywy odzieżowe pojawiają się na całej stronie, to nie przytłaczają swoją obecnością. Faktury tkanin ożywiają projekt, wzbogacają go i nadają mu nutkę

Pierwszorzędnym przykładem zastosowania motywu tkaninowego jest strona Fourth Avenue Church (rysunek 1.). Serdeczna, ciepła

elegancji. Projektant Bruno Duarte na swojej stronie WWW (rysunek 3.) również użył tkanin w roli pomocniczej. Motywy tekstylne mogą stanowić naturalną przeciwwagę dla ściśle

i gościnna strona powinna być marzeniem każdego małego kościoła. Skojarzenia narzucają się same i doprawdy trudno się dziwić,

technicznego medium, jakim jest internet, bo czyż może być coś mniej zaawansowanego technologicznie niż tradycyjne tkaniny? http://feedstitch.com

177

Rysunek 1. http://fourthavenuechurch.org

Rysunek 2. http://www.tomazzlender.com

178

Rysunek 3. http://www.mormasso.com

http://sitesquared.com

http://www.uniqueofficenyc.com

http://www.texturelovers.com

http://www.catherinecolebrook.com

179

uwagi od dewelopera Implementacja motywów tekstylnych wiąże się w zasadzie z jednym zasadniczym problemem, a mianowicie dopasowaniem motywów graficznych. Na wielu stronach w tym stylu wykorzystane są zdjęcia bądź zeskanowane fragmenty prawdziwych tkanin. Takie projekty na ogół wymagają dopasowania motywów z dokładnością co do piksela. Nie jest to oczywiście cecha dotycząca wyłącznie tego stylu, choć bez wątpienia bardzo powszechna w jego ramach. Nie jest to także problem nie do rozwiązania, choć będzie wymagał od dewelopera poświęcenia nieco większej ilości czasu i pracy na idealne pocięcie oraz precyzyjne dopasowanie poszczególnych składników. Także projektant powinien uważnie przeanalizować gotową stronę, aby mieć pewność, że jego zamysły zostały dobrze oddane w postaci kodu. Jeśli chciałbyś ułatwić życie programiście, pamiętaj o elementach zbiegających się pod różnymi kątami i nakładających się na siebie. Jeśli takie elementy będą wymagały zastosowania przezroczystych obrazków, oznacza to kolejne drobne problemy do rozwiązania. Pamiętaj, że warstwy na stronie internetowej nie zachowują się tak elegancko jak w Photoshopie. Ba, już sama obsługa przezroczystości w Internet Explorerze wymaga zastosowania jednego czy dwóch drobnych trików.

http://www.ribbonsofred.com

http://www.uniqueofficenyc.com

180

http://www.thomasmaxsondesign.com/project04/process/final

http://toriseye.quodis.com

http://www.gandrweb.com

http://broadersheet.com

http://www.eeci2009.com

181

http://www.lealea.net

http://www.ectomachine.com

http://www.kukkakontti.fi

182

http://squaredeye.com

http://www.larissameek.com

http://www.scottboms.com

183

http://creativestance.com

http://www.thespiritoftoys.com

184

/

podział stron według stylów i motywów przejrzysty • minimalistyczny • szkic • kolaż • ilustrowany • typograficzny • jednolite barwy • tekstylia • drewno

drewno Jednym z najistotniejszych powodów zastosowania faktur drewna w projektach stron internetowych jest chęć stworzenia określonej atmosfery. Drewno bez wątpienia może być użyte w celach czysto estetycznych wyłącznie po to, aby nadać projektowi określony wygląd. No dobrze. Jaką zatem atmosferę można dzię-

nie dzwoni do serwisu, dopóki coś się nie zepsuje… Nic dziwnego więc, że wsparcie techniczne cieszy się tak złą sławą. Zastosowanie motywów drewna w projekcie wspomnianej strony pozwala trochę ocieplić wizerunek fir-

tacie winiarnia sprawia wrażenie cenionej i profesjonalnej, a zarazem nie wydaje się snobistyczna. Oczywiste nawiązania do na-

my serwisowo-informatycznej. Zamiast ekipy jajogłowych, którzy gotowi są szydzić z Twojej

tury i drewnianych beczek, w których dojrzewa wino, świetnie korespondują z obranym motywem graficznym. Na stronie osobistej Brenta Lafreniera

niewiedzy, widzimy przedsiębiorstwo zatrudniające zwykłych ludzi, którzy po prostu lubią pomagać. Zwróć też uwagę na rodzaj zastosowanej faktury: nie jest to pretensjonalne

(rysunek 3.) motywy drewniane zostały użyte głównie w celach dekoracyjnych i wpisują się w niezobowiązującą atmosferę całego projektu, którą podkreśla kilka innych ozdobnych

skany efekt jest całkiem przekonujący. Jako były pracownik pionu IT (zatrudniony niegdyś na stanowisku inżyniera sieci) jestem świadomy piętna, jakie ciąży na działach pomocy

„designerskie” drewno, lecz raczej takie, które budzi skojarzenia z domem. Na stronie Rocky Creek Winery (rysunek 2.) motyw drewna został wykorzystany do stworzenia zupełnie innej atmosfery. Projekt jest

elementów, np. sympatyczna ilustracja w górnej części lub brak wielkich liter w powitaniu. Wszystkie te drobiazgi złożyły się na przystępny, przyjazny projekt, który bez wątpienia oddaje osobowość jego autora.

technicznej. No cóż, nie oszukujmy się: nikt

elegancki, ale nie ocieka luksusem. W rezul-

ki niemu uzyskać? Możliwości są naprawdę spore, przyjrzyjmy się więc kilku diametralnie różnym przykładom. Na stronie Kinetic Technology Group (rysunek 1.) motywów drewna nie brakuje, a uzy-

185

Rysunek 2. http://www.rockycreekwinery.ca

Rysunek 3. http://www.tnerb.com

Rysunek 1. http://www.kinetictg.com

186

http://www.focadesign.com.br

http://mariuszciesla.com

187

uwagi od dewelopera W przypadku stron z motywami drewnianymi deweloper zapewne poprosi Cię o przygotowanie „bezszwowego”, powtarzającego się tła. Owszem, możesz zrzucić to zadanie na barki dewelopera i liczyć na to, że uzyskany efekt będzie poprawny, lecz o prawidłowy wygląd tła lepiej zatroszczyć się samemu. W ten sposób ułatwisz pracę deweloperowi i będziesz miał gwarancję uzyskania dokładnie takiego efektu, na jakim Ci zależy. Tło z drewnianym motywem można stworzyć także w postaci jednego dużego obrazka, lecz to rozwiązanie także nie jest pozbawione wad. Lepiej przygotować mniejszą teksturę, lecz w taki sposób, aby można ją było cyklicznie powtarzać. Wielu projektantów, z którymi rozmawiałem, nie ma pojęcia, jak to zrobić. Tymczasem to pozornie niewykonalne zadanie okaże się całkiem proste, gdy zapoznasz się z filtrem Offset (Przesunięcie) w Photoshopie. Na stronie Tutorial Blog znajduje się znakomity artykuł, w którym krok po kroku opisano proces tworzenia takiego tła: http://tutorialblog.org/ make-repeating-seamless-tile-backgrounds-with-photoshop*. Przygotowanie gotowych tekstur to doskonały sposób na ułatwienie życia programiście i zaskarbienie sobie jego sympatii. * Materiał w języku angielskim — przyp. tłum.

http://www.truckhunt.com

http://www.ernesthemingwaycollection.com

188

http://www.bcandullo.com

http://www.jonnyhaynes.com

http://www.chanellehenry.com

189

http://cellarthief.com

190

http://www.milenkaya.org

http://www.professionalkitchensnj.com

http://www.arunpattnaik.com

http://parkplacetexas.com

http://www.mikeprecious.com/work/index.php?workdetail=wb-candybouquet

191

http://www.ltmoses.com

192

http://www.plexusdesign.co.uk

/

nietypowa nawigacja • nietypowy układ • pseudoflash • przewijanie w poziomie • jedna strona

podział stron według stylów strukturalnych Jeśli miałbym polecić komuś przeczytanie tylko jednej części tej książki, ale takiej, która skłoniłaby go do nieszablonowego myślenia, to byłby to właśnie ten rozdział. Odnoszę wrażenie, że dyskusje nad strukturą stron często polegają na starciu dwóch skrajnie odmiennych stanowisk. Według pierwszego wszystkie rozwiązania, które można określić jako „atypowe”, są zbędne i przyczyniają się do pogorszenia funkcjonalności serwisu. Druga strona utrzymuje, że dobrze jest łamać reguły i znajdować skuteczne rozwiązania, które wykraczają poza utarte schematy. I właśnie to podoba mi się w tym rozdziale najbardziej: konieczność ponownego spojrzenia na zasadnicze kwestie. Czy nawigacja na pewno musi być na samej górze? Czy projekt wymaga więcej niż jednej strony? A gdyby tak strona przewijała się w poziomie? Tak wiele pytań, tak mało czasu. To właśnie te dylematy zawsze budzą najgorętsze dyskusje na blogu Design Meltdown i to właśnie one nieodmiennie cieszą się największym zainteresowaniem. Przypuszczam, że dzieje się tak dlatego, iż stanowią cenne źródło inspiracji. 193

/

podział stron według stylów strukturalnych nietypowa nawigacja • nietypowy układ • pseudoflash • przewijanie w poziomie • jedna strona

nietypowa nawigacja Chęć przełamania norm, wypracowania nowego stylu czy po prostu zaprojektowania naprawdę oryginalnej strony internetowej skłania projektantów do eksperymentowa-

194

są umiejscowione w prawym górnym rogu, a pomocnicza nawigacja — po lewej stronie. Są to pewne normy, do których wielu projektan-

sposób na przyciągnięcie oczekiwanej klienteli. Kolejnym przykładem stylu kontestującego ogólnie przyjęte normy jest jeden z projektów

nia z nietypowymi systemami nawigacji. Wiele takich eksperymentów prowadzi do dziwacznych i niepraktycznych rozwiązań, niektóre

tów i użytkowników zdążyło już przywyknąć. Po co więc je łamać? Jedynym racjonalnym powodem jest poprawienie wygody obsługi. O ironio, nawet jeśli jakiś projekt ma na-

Nalin Design (rysunek 1.), który wyróżnia się wyjątkowym systemem nawigacji. Z kolei prywatna strona Benny’ego Martinsona (rysunek 3.) może być potraktowana jako

jednak rzeczywiście mogą stać się zaczątkiem nowatorskich metod, które sprawiają, że strona jest nie tylko bardziej interesująca, lecz i wygodniejsza w obsłudze.

prawdę wygodną (albo niewygodną) nawigację, to w przypadku eksperymentalnych rozwiązań trudno to stwierdzić od razu. Tak jest na przykład z projektem JPEG Interacti-

dość praktyczne podejście do eksperymentalnej nawigacji, która została sprowadzona do trzech głównych łączy. Zamiast typowej strony głównej zawierającej dużą ilość treści

Zastosowanie słowa „nietypowa” w nagłówku tej części rozdziału sugeruje, że istnieją pewne standardy, które w przypadku przykładowych stron zostały złamane. To prawda. Na typowych stronach logo znajduje się w lewym górnym rogu, u góry są główne odsyłacze ułożone poziomo, pola logowania

ve (rysunek 2.). Mamy tutaj przykład bardzo nietypowej nawigacji, którą można docenić dopiero po pewnym czasie użytkowania. Proces odkrywania kolejnych informacji jest tutaj sztuką samą w sobie. Zważywszy na rodzaj

autor zastosował rozwiązanie, które szybko i wygodnie kieruje użytkownika do tej części serwisu, która interesuje go najbardziej: informacji o autorze, portfolio albo danych kontaktowych.

zleceń, w jakich specjalizuje się agencja stojąca za tym projektem, stanowi on znakomity

Rysunek 1. http://www.nalindesign.com

Rysunek 1 (powiększenie) http://www.nalindesign.com

195

Rysunek 2. http://www.jpeg.cn

Rysunek 3. http://www.bennymartinson.com

http://www.radovleugel.com

196

http://www.cake-factory.com

http://www.1.nalindesign.com

http://www.organicgrid.com

http://andyshaw.me

http://searchinsidevideo.com

http://www.sarahmoody.org.uk

197

uwagi od dewelopera Trudno o coś bardziej ekscytującego — a zarazem irytującego — niż uporczywe próby wynalezienia nowych mechanizmów nawigacji przez projektantów. Pragmatyczny deweloper będzie sceptycznie podchodził do każdej próby odejścia od utartych schematów. Z kolei wizjonerzy dostrzegą w takiej propozycji wyzwanie i będą się starali mu sprostać. Jeśli planujesz wyposażenie strony w niestandardowe mechanizmy nawigacji, nigdy nie zapominaj o wygodzie użytkownika. Jeżeli udziwniony interfejs sprawi, że strona będzie bardzo niepraktyczna, lepiej pomyśl o innym rozwiązaniu. Przygotuj się też, że tego rodzaju podejście wymaga otwartości — także na bardzo krytyczne komentarze. Z pewnością nie jest to jeden z tych stylów, które wybiera się dla kaprysu. Trzeba mieć ku temu konkretny powód, zaś opracowany sposób nawigacji powinien ułatwiać http://www.rsabroker.com/movingstories

odbiór treści, a nie go utrudniać. Jeśli zależy Ci na tym, aby goście Twojej strony mogli poznać promowany na niej produkt w niesztampowy sposób, to eksperymentalna nawigacja może stanowić fantastyczny pomysł na jego zaprezentowanie. Z drugiej strony, jeżeli projektujesz sklep internetowy, to lepiej dobrze przemyśl, zanim wypróbujesz coś oryginalnego, gdyż wyszukany system obsługi klientów może zniechęcać do dokonywania zakupów…

http://www.uberdm.com

198

/

podział stron według stylów strukturalnych nietypowa nawigacja • nietypowy układ • pseudoflash • przewijanie w poziomie • jedna strona

nietypowy układ Odnoszę wrażenie, że już sama wzmianka o nietypowym szablonie strony budzi sprzeczne reakcje. Wielu ludzi traktuje takie projekty jako kompletnie nieudane i denerwujące, inni uważają je za świeże i nowatorskie — właśnie takie, jakich szukali. W tej części rozdziału postanowiłem więc przedstawić kilka najciekaw-

nią cały ekran i po prostu fenomenalnie spełnia swoje zadanie. Podoba mi się zwłaszcza to, że pomimo niestandardowego układu treści strona nic nie straciła na użyteczności. Serwis Paddocks Education (rysunek 2.) stanowi nieco bardziej praktyczny przykład omawianego stylu. Niektóre kluczowe elemen-

szych przykładów niesztampowych układów treści, jakie udało mi się znaleźć. Projekt strony BigKid (rysunek 1.) jest prosty, lecz bardzo niestandardowy. Za wyjątkiem

ty zostały zaprojektowane zgodnie ze sprawdzonymi rozwiązaniami: logo znajduje się w lewym górnym rogu (podobnie jak przycisk zachęcający do rejestracji), główne odsyłacze

logo w lewym górnym rogu nie ma on w zasadzie nic wspólnego z typowymi stronami internetowymi. Autorom projektu udało się jednak sprawić, że całość robi wrażenie dzieła sztuki. Być może jest to zasługa pięknych zdjęć albo

umiejscowiono na górze, zaś dodatkowe informacje i łącza trafiły do stopki. Dla odmiany główny obszar strony został zaprojektowany z fantazją, odróżniającą go od innych stron tego typu. Projektant postanowił więc trochę

eleganckich ramek, które przypominają prawdziwe oprawy. Niezależnie od przyczyn projekt serwisu wspaniale eksponuje treść, wypełnia

zaryzykować, ale nie zrezygnował przy tym z kilku sprawdzonych patentów.

http://www.nextbigleap.com

199

Rysunek 1. http://www.bigkid.co.nz

http://www.multiways.com

200

http://www.grondecki.pl

Rysunek 2. http://paddockseducation.com

http://realtimeracing.org

http://visualkultura.com

http://www.lanaehale.com/home

201

uwagi od dewelopera W odróżnieniu od propozycji niestandardowych form nawigacji (patrz strona 194.) projekty w tym stylu raczej nie zostaną źle przyjęte przez dewelopera. Wielu deweloperów pozornie niechętnie podchodzi do nietypowych rozwiązań, lecz jeśli Twoja propozycja okaże się praktyczna i będzie uwzględniała potrzeby użytkownika, to z pewnością zostanie doceniona. Pod wieloma względami deweloperzy są bardziej kreatywni, niż się powszechnie sądzi — szkopuł w tym, że ich inwencja przejawia się głównie przy rozwiązywaniu problemów technicznych, a nie graficznych. Dobry programista z pewnością doceni jednak ciekawy projekt. Jeśli Twoja koncepcja strony uwzględnia potrzeby użytkownika, a złamanie powszechnie obowiązujących norm ma

http://www.digitalic.org/portfolio

na celu poprawę wygody obsługi, to znaczy, że warto nad nią popracować. Wykorzystaj ten atut i uargumentuj sens niestandardowego projektu jego funkcjonalnością, a nie oryginalnością.

http://www.tmsportmanagement.com

http://www.rdbrown.me.uk

202

http://www.xische.com

http://f91w.com

http://www.lyricalmedia.com

http://www.finalcutters.com

http://www.nvlstudio.com

203

http://www.soeppainting.com

http://www.rabbleandrouser.com

http://designspasm.net

http://www.classicsapp.com

204

/

podział stron według stylów strukturalnych nietypowa nawigacja • nietypowy układ • pseudoflash • przewijanie w poziomie • jedna strona

pseudoflash Nie będę tutaj wyrokował o spadku popularności Flasha czy o jego schyłku, lecz przyznam, że w ostatnim czasie znacząco wzrosła liczba stron o funkcjonalności zbliżonej wprawdzie do Flasha, lecz uzyskanej za pomocą starego,

opracowanych we Flashu, zostały także wyposażone w interfejs wiernie naśladujący projekty flashowe. Po co używać HTML i CSS do realizacji projektu, który imituje możliwości Flasha? Moim

dobrego JavaScriptu. Rozwój narzędzi w rodzaju jQuery, script.aculo czy MochiKit umożliwił wygodną realizację takich projektów znacz-

zdaniem z dwóch powodów. Pierwszym są umiejętności. Flash to specyficzna nisza w branży projektowej, a znajomość tego środo-

nie mniejszym nakładem czasu i pieniędzy. W wielu przypadkach naśladownictwo Flasha ogranicza się do drobiazgów w rodzaju płynnej zmiany wyglądu elementów nawigacyjnych bądź do wyświetlania eleganckich

wiska była motorem niejednej kariery. Opanowanie obsługi Flasha zajmuje mnóstwo czasu, a realizacja poprawnych, funkcjonalnych projektów — jeszcze dłużej. Jeśli dodać do tego

„dymków” po wskazaniu myszą określonych kontrolek. Powstało mnóstwo drobnych skryptów i usprawnień, które odpowiadają za interakcję ze stroną i ułatwiają tworzenie pięknych, atrakcyjnych projektów. W tej części rozdziału przedstawię jednak nieco bardziej ambitne zastosowania omawianego stylu. Zaprezentowane przykłady starają się w pełni odzwierciedlać funkcjonalność i możliwości serwisów

niezbędną mieszankę zdolności technicznych i talentu artystycznego, tworzenie we Flashu może być jednym z najtrudniejszych wyzwań, jeśli chodzi o projektowanie na potrzeby WWW. Ponieważ JavaScript jest znany większej liczbie ludzi, stał się więc niejako bardziej racjonalnym wyborem.

zacja stron pod kątem ich działania. Owszem, poczyniono ogromne postępy, jeśli chodzi o udostępnienie treści stron Flash mechanizmom indeksacyjnym wyszukiwarek, i opracowano kilka skutecznych metod tego rodzaju działań. Tylko że jeśli celem autorów strony jest jak najskuteczniejsze pozycjonowanie serwisu, to po co w ogóle męczyć się z platformą projektową, przy której jest to tak uciążliwe? I na tym polega piękno pseudoflashowych serwisów: w gruncie rzeczy są to strony HTML stylizowane za pomocą CSS i animowane przy użyciu JavaScriptu. To oznacza, że wyszukiwarki widzą treść strony bez ozdobników i bez dodatkowych nakładów pracy. Od strony praktycznej trudno mi nie przyklasnąć takiemu rozwiązaniu. Trudno się też dziwić, że jego popularność rośnie i zapewne będzie nadal rosnąć w najbliższych latach.

Drugą, zapewne bardziej istotną przyczyną wzrostu popularności naśladujących technologię Flash są wyszukiwarki, a także optymali-

205

http://www.siebennull.com

http://www.tuckinteractiv.com

206

http://www.floridaflourish.com

http://eyedraw.eu

uwagi od dewelopera Z punktu widzenia grafika perspektywa realizacji takiego projektu może być bardzo kusząca, lecz przed podjęciem decyzji warto dobrze ją przemyśleć. Wykonanie strony w tym stylu jest nie tylko droższe i bardziej czasochłonne, niż mogłoby się wydawać, lecz może też być dość trudne. To kolejna sytuacja, w której praktyczne doświadczenie w realizacji stron WWW przekłada się na większe szanse powodzenia w zastosowaniu omawianego stylu. Jednym z najlepszych sposobów na zapoznanie się z jego tajnikami jest stopniowe poznawanie możliwości i efektów biblioteki jQuery. Ich znajomość umożliwia stworzenie projektu zbudowanego na racjonalnych podstawach, a nie na koncepcjach wziętych „z sufitu”. Z biblioteką efektów jQuery możesz się zapoznać pod adresem http://api.jquery.com/ category/effects. Jeśli chcesz wywrzeć naprawdę doskonałe wrażenie na deweloperze, http://www.ladeq.it

przyjdź do niego z projektem i odpowiednimi przykładami kodu, realizującymi żądane funkcje. To nie tylko doskonały sposób na przedstawienie programiście swoich oczekiwań, ale także na okazanie szacunku dla jego pracy oraz udowodnienie, że ze swojej strony zrobiłeś wszystko, co możliwe, aby nie porywać się z motyką na słońce.

http://www.joshsmithdesign.com

http://www.howarths.nl

207

http://www.seankeenan.org.uk

http://meetjohnvon.com

208

http://www.gavincastleton.com

http://www.johnantoni.com

http://www.alexarts.ru/en

http://www.chameleon—home.com http://www.sursly.com

209

/

podział stron według stylów strukturalnych nietypowa nawigacja • nietypowy układ • pseudoflash • przewijanie w poziomie • jedna strona

przewijanie w poziomie

210

Dla wielu projektantów poziome przewijanie strony w ogóle nie wchodzi w rachubę i nawet przez myśl im nie przejdzie, aby je wypróbo-

naprawdę trudno się w niej pogubić pomimo niestandardowej poziomej nawigacji. Przewijanie w poziomie służy także stro-

w serwisie Pinchot Forest (rysunek 3.). To kolejny przykład strony, która może być wzorem płynnego bocznego przewijania i która

wać. Ma to swoje racjonalne uzasadnienie, gdyż internauci są przywiązani do przewijania treści strony w górę i w dół. W pewnych przypadkach poziome przewijanie może być jednak bardzo korzystnym rozwiązaniem, czego

nom poświęconym fotografii, takim jak portfolio Melissy Marie Hernandez (rysunek 2.). Zdjęcia prezentują się w tej postaci wyjątkowo dobrze: ich długi, nieprzerwany ciąg spra-

dla odmiany wyposażona jest w statyczny pasek menu. W wielu projektach tego typu nawigacja jest powielana na każdej podstronie, zaś na innych trzeba wrócić na stronę główną

przykładem jest prywatna strona Claire Baxter (rysunek 1.). Strona Claire stanowi świetny przykład

wia fantastyczne wrażenie. Układ oraz rozmiar fotografii na stronie Melissy zostały dobrane w taki sposób, że po obejrzeniu jednego zdjęcia widoczny fragment kolejnego aż kusi, aby

przed wybraniem jednej z pozostałych opcji. Tymczasem w tym przypadku logo oraz główne łącza nawigacyjne przez cały czas pozostają w miejscu. To fantastyczny pomysł na

tego, że projekt składający się zaledwie z jednej strony może być równie dynamiczny w obsłudze, jak tradycyjny serwis składający się z wielu podstron, w dodatku animowanych w atrakcyjny, animowany sposób. To jedna

je kliknąć. Ta sugestywna zachęta sprawiła, że z przyjemnością przeglądałem galerię po galerii… a przecież z pewnością o to chodziło autorce przedstawiającej swoje prace potencjalnym klientom.

praktyczną implementację omawianego stylu, który nie tylko nie utrudnia obsługi, ale sprawia, że odwiedziny na stronie stają się czymś wyjątkowym.

z tych stron, którą trzeba odwiedzić, aby móc ją docenić. Wszystko działa błyskawicznie, płynnie i jest niesamowicie przejrzyste. Co więcej,

Choć nie spodziewałem się znalezienia poziomo przewijanej strony w branży nieruchomości, właśnie takie rozwiązanie napotkałem

Rysunek 1. http://www.vanityclaire.com

Rysunek 2. http://www.melissamariehernandez.com

http://cyberwoven.com

211

uwagi od dewelopera Choć w karierze dewelopera miałem już do czynienia z wieloma różnymi projektami, to jakoś nigdy nie nadarzyła mi się okazja, aby zrealizować tego typu stronę. Z góry przyznam jednak, że jeśli będę miał sposobność współpracy z grafikiem, który zaproponuje mi wykonanie serwisu z użyciem omawianego rozwiązania, raczej nie będę zachwycony. Uważam bowiem, że może ono powodować ogromne problemy z obsługą projektu i chaos od strony technicznej. Już samo wyłączenie pionowego paska przewijania, a pozostawienie poziomego — choć brzmi banalnie — wcale nie jest takie proste. Jeśli wziąć pod uwagę fakt, że przeglądarki są zaprojektowane pod kątem przewijania treści w pionie, sztuczna zmiana tego zachowania wymaga wyjątkowej finezji. Jeśli rzeczywiście uważasz, że jest to dobry pomysł, to koniecznie uwzględnij rozmiar prezentowanych materiałów oraz ich wygląd w przeglądarkach, których okna nie będą zajmowały całego ekranu (tak jak oglądasz je na swoim najnowszym 30-calowym monitorze). Jeżeli będziesz potrafił opracować racjonalny projekt z uwzględnieniem jego naturalnych ograniRysunek 3. http://www.pinchotforest.com

http://www.hasrimy.com

212

czeń, Twój deweloper z pewnością spojrzy na niego łaskawszym wzrokiem.

http://www.avilasoto.com

http://album.alexflueras.ro

213

/

podział stron według stylów strukturalnych nietypowa nawigacja • nietypowy układ • pseudoflash • przewijanie w poziomie • jedna strona

jedna strona Projekty składające się tylko z jednej strony mogą pełnić tyle różnych funkcji, że doprawdy trudno jest wymyślić w tej kwestii coś nowego lub powiedzieć coś, co nie zostało jeszcze powiedziane. Mimo wszystko przykłady zgromadzone w tej części rozdziału dowodzą, że nawet w tej dziedzinie da się zrealizować jakąś oryginalną, interesującą koncepcję. Wiele spośród pokazanych tutaj projektów można zaklasyfikować do stylu minimalistycznego, co zresztą świetnie wpisuje się w ideę zamieszczenia wszystkiego na jednej stronie. Co więcej, niejedna z nich mogłaby z powodzeniem zostać rozbudowana do kilku stron, gdyby projektanci zdecydowali się sztucznie rozdmuchać ich treść… Tymczasem ich ostateczny wygląd jest w dużej mierze wypadkową efektywności oraz wygody użytkowania — z naciskiem na szybkość wczytywania oraz prezentowania informacji.

214

Doskonałym przykładem tego stylu jest portfolio Jacka Blooma (rysunek 1.). Ten jednostronicowy projekt pod wieloma względami sprawdza się naprawdę znakomicie. Przede wszystkim został zrealizowany w quasi-minimalistycznym stylu. Napisałem „quasi”, gdyż strona nie jest zupełnie pozbawiona ozdobników, lecz w gruncie rzeczy jej struktura jest bardzo prosta. (Zwróć uwagę na liternictwo, które nie tylko jest nośnikiem treści, lecz stanowi także ozdobę projektu). To nie jedyny pomysł na umieszczenie całej treści na jednym ekranie. Witryna NineFlavors (rysunek 2.) w zasadzie składa się z pojedynczej strony, a zmiana jej zawartości polega na zastosowaniu różnych sztuczek z animowaniem fragmentów projektu. Takie rozwiązanie skłania jednak do zastanowienia: w zasadzie dlaczego nie umieszczono poszczególnych sekcji na osobnych stronach? Trudno o jed-

noznaczną odpowiedź. Moim zdaniem czasami chodzi o zmianę perspektywy. Skłonienie potencjalnego klienta do przejrzenia materiałów, przykładów i zrealizowanych zleceń zgromadzonych na stronie agencji reklamowej bywa kłopotliwe. Przypuszczam, że właśnie stąd pojawił się pomysł, aby po kliknięciu wyróżnionego łącza odbiorca został zaskoczony nowym materiałem, który pojawił się „znikąd”. Być może odniesie on nawet wrażenie, że przejrzenie informacji podanych w taki sposób będzie mniej czasochłonne niż zapoznanie się z wieloma podstronami wczytywanymi oddzielnie. Interaktywna forma zachęca go do klikania kolejnych odsyłaczy, a tym samym do przejrzenia prezentowanych treści. Jest to więc ciekawy sposób na przedstawienie odbiorcy sporej ilości danych w pigułce, który pozwala uniknąć błądzenia po morzu informacji.

Rysunek 1. http://oldergraphicdesigner.com Rysunek 2. http://www.nineflavors.com

http://www.kaabstudios.com

http://samanthacliffe.com

215

http://socialsnack.com

216

http://www.holtedesign.no

http://www.brian-eagan.com

http://www.contrabrand.net

http://lancamjewellery.co.uk

http://www.draftmedia.de

217

http://pixelmanya.com

http://www.thismortalmagic.com

218

http://byroxanne.com

http://www.fajnechlopaki.com

http://www.ultimate-media.nl

http://www.gnoso.com

http://www.brizk.com

219

/

zakładki • przyciski • formularze • przyjazne strony główne • funkcjonalne stopki • pokazy slajdów • błąd 404

podział stron według komponentów strukturalnych Jeden z najlepszych sposobów na przeanalizowanie projektu polega na podzieleniu go na funkcjonalne komponenty. To podejście sprawdza się oczywiście lepiej przy wykańczaniu projektu niż na etapie inspiracji. Tak czy owak w pewnym momencie będziesz jednak chciał umieścić na stronie jakiś widget i zaczniesz szukać nowych ciekawych pomysłów, jak to zrobić. Niniejszy rozdział w pewnym sensie odzwierciedla bieżące trendy w projektowaniu z trochę nietypowej perspektywy. Na przykład jakość gotowych komponentów interfejsu dostępnych w ramach biblioteki jQuery sprawiła, że znacznie częściej spotyka się ostatnio kontrolki w postaci rozwijanego menu (wcześniej także było ich niemało, lecz obecnie przeżywają prawdziwy rozkwit). Nawet tak prosty komponent jak zakładka zyskał na popularności ze względu na łatwość implementacji. Nowoczesne rozwiązania skłaniają do budowania stron z gotowych składników, zaprojektowanych przez innych, co sprawia, że tworzenie niestandardowej oprawy i wdrażanie nietypowych pomysłów są dziś ważniejsze niż kiedykolwiek wcześniej. 220

/

podział stron według komponentów strukturalnych zakładki • przyciski • formularze • przyjazne strony główne • funkcjonalne stopki • pokazy slajdów • błąd 404

zakładki Zakładki są bardzo prostym sposobem na zarządzanie treścią strony i ułatwiają jej tematyczny podział. Jednocześnie wskazują one Twoje miejsce pobytu na stronie. Nic dziwnego, że są to jedne z najczęściej używanych komponentów, którym nadaje się najróżniejsze formy. Pomimo ich powszechności nadal można zna-

Kolejna ważna kwestia to wspólny, jednolity motyw całego projektu. Bywa i tak, że zakładki nie muszą odgrywać dwóch ról i pełnić wyrafinowanych funkcji. Tak jest na przykład w przypadku portfolio Frana Boota (rysunek 2.) czy strony The CSS Blog (rysunek 3.). Zakładki na tych stronach nie mają rewolucyjnego cha-

leźć przykłady ciekawych, inspirujących zakładek, które skłaniają do eksperymentowania z nowymi pomysłami. Powtarzalność zakładek może stanowić

rakteru, jednak idealnie wtapiają się w wygląd projektu. Niektórzy projektanci traktują zakładki w interesujący, nietypowy sposób — tworzą

klamrę wizualnie spajającą cały projekt, jak to ma miejsce w przypadku strony ClothMoth (rysunek 1.). Zakładki są tu wystylizowane na tradycyjne wszywki do ubrań, co jest znakomitym uzupełnieniem odzieżowego, trochę prze-

na przykład boczne menu, które tylko pozornie wygląda na zwykły zbiór prostokątnych łączy. Takie rozwiązania zostały zastosowane na przykład na stronach IM Design (rysunek 4.) czy MetaLab (rysunek 5.). Boczne menu to w tym

rysowanego motywu. W rezultacie odgrywają podwójną rolę — funkcjonalną oraz estetyczną, będącą uzupełnieniem stylistyki strony. Choć sam projekt nie wyróżnia się może niczym szczególnym, to bezsprzecznie został prze-

przypadku nie tylko zakładki, lecz także system nawigacji, który ułatwia odnalezienie się w ramach struktury serwisu, co może być bardzo przydatne w przypadku gości, trafiających

myślany i zrealizowany w atrakcyjny sposób.

bezpośrednio na podstrony za pośrednictwem wyszukiwarek lub udostępnionych łączy. http://quirkylotus.com

221

Rysunek 1. http://www.clothmoth.com

Rysunek 2. http://www.narfstuff.co.uk/portfolio

222

Rysunek 3. http://thecssblog.com

Rysunek 4. http://www.imdesignuk.com

Rysunek 5. http://www.metalabdesign.com

http://www.piensaenpixels.com

http://www.msites.com

223

uwagi od dewelopera Jeden z najpopularniejszych wariantów zaawansowanych zakładek to tzw. „rozsuwane drzwi”. Polega on na przekształceniu zwykłych list wypunktowanych w piękne animowane odsyłacze z graficznym tłem. Ze szczegółowym opisem tej techniki można się zapoznać na stronie A List Apart pod adresem http://www.alistapart.com/articles/slidingdoors. W ramach wspomnianego pomysłu można łączyć zwykły tekst z graficznym tłem bądź użyć elementów graficznych z naniesionymi na nie napisami. Żadne z tych rozwiązań nie jest szczególnie kłopotliwe w implementacji i każde można zrealizować tak, aby było stosunkowo elastyczne. Trzeba jednak wziąć pod uwagę fakt, że zakładki są na ogół rozmieszczane poziomo, więc należy je zaprojektować z uwzględnieniem dostępnego miejsca. Problem zakładek można też na wiele sposobów rozwiązać za pomocą biblioteki jQuery (http://jqueryui.com/demos/tabs). Takie podejście sprawdza http://www.manisheriar.com

się głównie wówczas, gdy zakładki mają wtapiać się w treść i dynamicznie adaptować do działań użytkownika bez konieczności przeładowywania strony (w odróżnieniu od zakładek CSS, które są po prostu elementem ogólnego szablonu, a ich kliknięcie powoduje wyświetlenie nowej podstrony serwisu).

224

/

podział stron według komponentów strukturalnych zakładki • przyciski • formularze • przyjazne strony główne • funkcjonalne stopki • pokazy slajdów • błąd 404

przyciski Jeśli zajrzałeś od razu do tej części książki, to przypuszczam, że tworzysz właśnie przyciski do jakiejś strony internetowej i zastanawiasz

w jeden, jak to ma miejsce na stronie Go Freelance (rysunek 2.). Na innych stronach, np. MailChimp (rysunek 4.) czy NCover (rysunek 5.),

się, w jaki sposób ten prosty komponent został potraktowany przez innych projektantów. Być może zależy Ci na tym, aby przycisk pełnił swoją funkcję, a jednocześnie nie wyglądał

przyciski zawierają dodatkowe wskazówki i są przy tym odpowiednio duże. Dzięki temu nie ograniczają się do prostego komunikatu, lecz precyzyjnie informują użytkownika, co stanie się po kliknięciu. To może być bardzo skutecz-

jak najzwyklejszy nudny odsyłacz. Owszem, zawsze można użyć domyślnych stylów przycisków przeglądarki, ale co w tym ciekawego? Na niektórych stronach przyciski mają kla-

ny sposób na przyciągnięcie uwagi, a zarazem zachęcenie użytkownika do odwiedzenia konkretnego miejsca w serwisie.

syczną postać, a jedyne modyfikacje polegają na poprawieniu ich czytelności i wygody użytkowania, tak jak ma to miejsce na stronach Airbnb (rysunek 1.) czy Notable (rysunek 3.). Zastosowane na nich przyciski są dość stan-

Nie powinno być zaskoczeniem, że wszystkie przyciski w zaprezentowanych przykładach są większe i lepiej wyeksponowane niż w przypadku stylów domyślnych. Stanowią one znakomity dowód tego, że ten dość często igno-

dardowe pod względem stylistycznym, lecz świetnie pasują do konwencji graficznej projektu, są bardzo czytelne i bez porównania lepsze niż domyślne.

rowany detal można przetworzyć na różne ciekawe sposoby, aby osiągnąć zamierzony efekt. Zapoznaj się też z kolejną częścią tego roz-

W niektórych projektach stosuje się interesujące zabiegi stylistyczne, które polegają na przykład na połączeniu dwóch przycisków

działu, poświęconą formularzom (strona 229.), gdyż wiele z zamieszczonych w niej przykładów jest wyposażonych w nietypowe przyciski.

http://www.ascendsport.com

http://www.nanastreak.com/webdesignersidea/ eBandLive

225

Rysunek 2. http://www.gofreelance.org

Rysunek 1. http://www.airbnb.com

Rysunek 3. http://www.notableapp.com

226

http://www.serj.ca

Rysunek 4. http://www.mailchimp.com

Rysunek 5. http://www.ncover.com

http://www.sonarhq.com http://theimagescanners.com

227

http://www.uploadpie.com

http://www.storenvy.com

http://www.1stchoiceaccommodations.com

http://www.classicplanestv.com http://www.jamiebicknell.com

228

/

podział stron według komponentów strukturalnych zakładki • przyciski • formularze • przyjazne strony główne • funkcjonalne stopki • pokazy slajdów • błąd 404

formularze Nie ma innego podstawowego elementu HTML, który przysparzałby tylu problemów co formularze, a właściwie ich kontrolki, ta-

trolek nie stanowiło problemu. Przy takim rozmiarze kontrolki są bardzo proste w obsłudze i czytelne (nie ma nic gorszego niż wczytywanie

Na niektórych stronach spotyka się wręcz niesamowicie udziwnione sposoby maskowania tradycyjnych składników formularzy. Weź-

kie jak pola tekstowe, listy rozwijane, przyciski (wyboru oraz zwykłe) i pola opcji. Tworzenie formularzy od dawna jest zmorą deweloperów, gdyż projektanci zawsze starają się choćby

się w wyświetloną drobnym maczkiem treść pola tekstowego!). W projekcie formularzy na tej stronie nie ma nic przełomowego, zostały one jednak naprawdę fantastycznie wplecione w pozostałą część projektu.

my na przykład stronę rejestracji w serwisie Firsthost (rysunek 3.). Suwaki na tej stronie w rzeczywistości zastępują przyciski wyboru, gdyż umożliwiają użytkownikowi wskazanie

w najprostszy (z ich punktu widzenia) sposób uatrakcyjnić ich wygląd. Podobnie jak w przypadku typografii internetowej, projektowanie formularzy wymaga zrozumienia ograniczeń

Strona Kartel (rysunek 2.) reprezentuje inne podejście w uatrakcyjnianiu kontrolek formularzy. Zamiast przetwarzać same kon-

tylko jednej, konkretnej opcji. W obydwu przypadkach efekt jest ten sam, więc po co utrudniać pracę (także deweloperowi, który zapewne musiał zdrowo pokombinować nad tym

związanych ze stylizacją ich elementów. Przykłady zgromadzone w tej części rozdziału dowodzą jednak, że formularze mogą być piękne i bardzo funkcjonalne. Na stronie GuiFied (rysunek 1.) widzimy

trolki, projektanci postanowili zająć się otaczającymi je elementami, których wygląd można zmieniać w o wiele większym zakresie. W rezultacie, choć same kontrolki wyglądają niemal dokładnie tak jak w przypadku stylu do-

rozwiązaniem)? Można argumentować, że zastosowanie suwaka sugeruje użytkownikowi zmianę „większego kalibru” niż w przypadku przycisków, gdyż nie tylko umożliwia on wskazanie jednej z opcji, lecz wizualnie sugeruje

formularz, w którym standardowe kontrolki zostały zmodyfikowane tak, że wyglądają naprawdę ślicznie. Pierwsze, co rzuca się w oczy, to ich rozmiar. Ponieważ formularz składa się

myślnego, idealnie pasują do uproszczonych stylistycznie pól formularza. Jest to znakomity przykład realizacji projektu w ramach znanych ograniczeń — z myślą o oszczędności

wykluczenie wszystkich pozostałych. W tym przypadku suwaki mają zapewne ułatwiać użytkownikowi oszacowanie wpływu dokonanych wyborów na końcową cenę produktu.

z dość niewielkiej liczby pól, powiększenie kon-

czasu i pieniędzy.

229

Rysunek 2. http://www.kartel.co.nz

Rysunek 1. http://guified.com

http://www.traditionalboundaries.com

230

http://www.iseatz.com

http://strutta.com

uwagi od dewelopera Formularze są chyba jednym z najbardziej uciążliwych elementów HTML. Raz, że w każdej przeglądarce są wyświetlane nieco inaczej, a dwa — stylizowanie ich za pomocą CSS daje bardzo niejednorodne rezultaty. Jeśli zdecydujesz się na zaprojektowanie formularzy z użyciem zaokrąglonych narożników, cieni i poświat, to obawiam się, że deweloper nie będzie zachwycony… Przy formularzach warto dobrze przemyśleć strategię działania. Czy bardzo nietypowe kontrolki są naprawdę konieczne? Być może subtelna stylizacja zupełnie wystarczy? Oczywiście, jeśli zależy Ci na tym, aby formularz w nagłówku albo stopce idealnie pasował do stylu strony, to istnieją pewne sztuczki, które umożliwiają praktyczną realizację niemal dowolnego pomysłu. Powiem więcej: możliwe jest właściwie wszystko — to tylko kwestia kosztów. Nie wierzysz? Obejrzyj kontrolki ComponentArt: http://www.componentart. com/products/silverlight/editors. Wygodną zmianę wyglądu formularzy umożliwia także skrypt Niceforms (http://www.emblematiq.com/lab/niceforms). Biblioteka jQuery jest pod tym względem niezwykle pomocna. Zapoznaj się choćby z pluginem jqTransform (http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform) albo sztuczką uelastyczniającą obsługę pól tekstowych (http://www.unwrongest.com/projects/elastic). Nie sposób też nie wspomnieć o możliwościach bibliotek jQuery UI (http://jqueryui.com/demos) oraz the Yahoo! UI (http:// developer.yahoo.com/yui). Rysunek 3. http://www.firehost.com

231

http://graphik.fi

http://wpcoder.com

http://www.ecolect.net

232

http://www.behance.net

http://thecssblog.com

http://www.airbornehealth.com

233

http://www.actionmethod.com

http://www.campaignhq.co.nz

http://www.holdsworthdesign.com

234

http://www.modalinc.com

http://www.jayhollywood.com.au

235

/

podział stron według komponentów strukturalnych zakładki • przyciski • formularze • przyjazne strony główne • funkcjonalne stopki • pokazy slajdów • błąd 404

przyjazne strony główne Ten rozdział byłby niepełny, gdybym nie wspomniał w nim o doświadczeniach płynących z użytkowania stron (tzw. user experience), co zresztą jest tematem tak obszernym, że z powodzeniem stanowiłoby materiał na osobną książkę. Pozwolę więc sobie jedynie na krótki komentarz: zależało mi na tym, aby pokazać strony, które niekoniecznie powielają utarte schematy, ale za to są bardzo przyjazne dla odbiorcy. Rozpocznę od strony Bohemian Coding

236

programów. Jest to projekt skupiony na potrzebach użytkownika, a nie sklep, z góry narzucający odbiorcom treści, które w mniemaniu autorów mogą być dla nich istotne. Kilka innych przykładów w tym rozdziale zostało zrealizowanych w podobnej konwencji „minimalistycznego przewodnika”. Projekt LA Music Blog (rysunek 2.) nie tylko wyróżnia się przyjazną stroną główną, lecz

Nieco inną strategię zastosowano w serwisie Blend (rysunek 3.). W tym przypadku na stronie głównej pojawiają się strzępki ciekawych informacji z różnych działów, które zachęcają odbiorcę do odwiedzenia jednego z nich. W tym przypadku najważniejszą zaletą ergonomii serwisu jest przejrzysta hierarchia informacji.

zdecydowanie podnosi poprzeczkę w ramach swojej niszy gatunkowej: serwisy pełniące

Stronę główną można zaprojektować na nieskończenie wiele sposobów. Zaprezentowane w tym rozdziale przykłady to zaledwie

(rysunek 1.). Już nawet szata graficzna projektu jest niesamowicie czytelna i przyjazna, podobnie jak cała strona. Zamiast zapełniać projekt sloganami reklamowymi albo chwalić się wyjątkowymi umiejętnościami, autorzy po

funkcje kalendarzy czy blogów miejskich często są przeładowane informacjami, a przez to mało użyteczne. W tym przypadku również nie można narzekać na brak treści, została ona jednak podzielona w tak wygodny spo-

wierzchołek góry lodowej interesujących możliwości. Jak zwykle kluczem do sukcesu jest opracowanie projektu z myślą o odbiorcy oraz o jego oczekiwaniach. Warto też zapoznać się z logami, na podstawie których można spraw-

prostu proponują użytkownikowi zapoznanie się z tym, co może go najbardziej interesować. W rezultacie odbiorca sam decyduje się na nieco uważniejsze przyjrzenie się najciekaw-

sób, że łatwo ją przeglądać i czytać. Kolorystyczna segregacja wiadomości sprawia, że użytkownik szybko dociera do potrzebnych informacji, a po krótkiej chwili korzysta się

szym dla niego aspektom proponowanych

z niej intuicyjnie.

dzić, które podstrony cieszą się największą popularnością, a potem ułatwić odbiorcom życie i opracować stronę główną tak, aby znalezienie potrzebnych materiałów było jak najprostsze.

Rysunek 1. http://www.bohemiancoding.com

Rysunek 2. http://lamusicblog.com

Rysunek 3. http://www.blend.uk.com

http://www.elixirgraphics.com

237

http://www.seydesign.com

http://www.needanelectrician.co.nz

http://www.nanastreak.com/webdesignersidea/ LowertownPrintingCompany

http://www.lindtexcellence.com

238

http://www.taoeffect.com

http://www.teoskaffa.com

239

/

podział stron według komponentów strukturalnych zakładki • przyciski • formularze • przyjazne strony główne • funkcjonalne stopki • pokazy slajdów • błąd 404

funkcjonalne stopki Stopka bywa jednym z najbardziej niedocenianych składników strony internetowej. Bardzo często ich treść ogranicza się do informacji o prawach autorskich, logo i garści odsyłaczy do najważniejszych podstron oraz adnotacji prawnych. Tymczasem — o ironio — czytelnik, który dociera do tak lapidarnej stopki na samym końcu strony (co najprawdopodobniej oznacza, że nie zignorował treści, lecz się z nią uważnie zapoznał), jest zostawiony samemu sobie i nie wie, co zrobić dalej. Wielu projektantów zdaje sobie z tego sprawę i tworzy znacznie bardziej rozbudowane stopki, które sugerują odbiorcy zapoznanie się z innymi polecanymi materiałami. Dość naturalnym efektem ubocznym poprawiania funkcjonalności stopek jest ich powiększanie. Niektóre mogą zająć nawet cały ekran, co skłania do zastanowienia, gdzie w zasadzie stopka się zaczyna, a gdzie się kończy. Na przykład na stronie Jasona Santa Marii (rysunek 1.) stopka dzieli się na dwie części:

240

zwykłą i tę ciekawszą, z przydatnymi informacjami. Obydwie ułatwiają czytelnikowi trafienie do innych, potencjalnie interesujących części serwisu i pełnią rolę wbudowanego miniportalu. Stopka strony Fusionware Design (rysunek 2.) zawiera dość nietypowy element, a mianowicie formularz kontaktowy. Formularze zwykle umieszcza się na osobnych stronach, lecz tutaj projektantowi najwyraźniej zależało na tej formie kontaktu, gdyż stosowne kontrolki znajdują się w dolnej części każdej podstrony. Kolejną nietypową cechą tej stopki jest przycisk zachęcający do skorzystania z usług projektanta. To rzadkość na tle typowych stopek, które na ogół zawierają odsyłacze do innych materiałów, umożliwiają subskrypcję biuletynu i pełnią inne, podrzędne funkcje. Tutaj zaś mamy do czynienia z konkretną propozycją oraz narzędziami, które umożliwiają jej zrealizowanie. Jest to nietypowe rozwiązanie, ale w tym przypadku okazuje się bardzo trafne.

http://rockbeatspaper.com

Rysunek 1. http://www.airbnb.com

Rysunek 2. http://fusionwaredesign.com

http://www.jointmedias.com

241

http://kolor-designs.com/blog

http://gandrweb.com/one

242

http://www.gievesandhawkes.com

http://www.trippingwords.com

http://www.endoscopia.com

http://elliotjaystocks.com

243

http://www.filesharehq.com

http://socialsnack.com

244

http://designmess.com

http://bradcolbow.com

http://www.raddsigns.com

245

/

podział stron według komponentów strukturalnych zakładki • przyciski • formularze • przyjazne strony główne • funkcjonalne stopki • pokazy slajdów • błąd 404

pokazy slajdów Pokazy slajdów już na dobre zagościły na wielu stronach internetowych i cieszą się coraz większą popularnością. Przypuszczam, że dzie-

temu większą kontrolę nad sposobem prezentacji materiałów, co umożliwia zaaranżowanie ciekawej, wciągającej historii.

je się tak z dwóch powodów: po pierwsze, są stosunkowo łatwe do zaimplementowania — istnieje wiele gotowych skryptów, które bardzo ten proces upraszczają. Drugi powód to

Strona Emotech (rysunek 1.) stanowi dość typowy przykład implementacji tego stylu. Pokaz został tutaj zrealizowany w postaci szerokiego okienka w górnej części, którego zawartość (zdjęcia oraz tekst) przewija się na boki. Po obu stronach okienka znajdują się strzałki,

niesłabnąca tendencja do zamieszczania na stronach jak największej ilości treści. W rezultacie wielu projektantów i właścicieli stron stara się upchnąć na stronie głównej wszystko,

246

które sugerują możliwość wyświetlenia poprzedniego oraz następnego slajdu. Można

projektanci umieścili trzy kropki, które odpowiadają kolejnym slajdom oraz umożliwiają ich ręczne przełączanie. Kolejny pomysł, który dowodzi, że nawet kreatywnie zinterpretowany standard może wyglądać świeżo i interesująco, został zastosowany na stronie głównej serwisu Cubicle Ninjas (rysunek 3.). O nietypowości tego pokazu decydują dwie kwestie. Przede wszystkim autorzy dali użytkownikowi całkowicie wolną rękę: kolejne slajdy nie wyświetlają się same, lecz oczekują na działanie ze strony odbiorcy. Po drugie, na pierwszy rzut oka trudno w ogóle dostrzec, że mamy do czynienia z pokazem

co się da. Czasami prowadzi to do przesady, lecz w pewnych sytuacjach umiejętnie zastosowany pokaz slajdów rzeczywiście stanowi elegancki sposób na zaprezentowanie większej ilości materiałów.

powiedzieć, że zastosowane tutaj rozwiązanie jest jednym z bardziej klasycznych, jeśli chodzi o pokazy slajdów. Nieco mniej tradycyjnym podejściem wykazali się projektanci strony Kodu (rysunek 3.).

Jedną z zalet tego rozwiązania jest uproszczenie konstrukcji strony, która zamiast długiego, wąskiego paska przewijanego w pionie umożliwia odbiorcy przyswajanie informacji

W tym przypadku pokaz nie ma kształtu prostokąta, lecz zawiera zdjęcie telefonu iPhone, które częściowo przesłania nagłówek strony. Przejścia między slajdami to już typowe, ani-

kolejnej strony. Tymczasem moim oczom ukazała się animacja oraz kolejny slajd. Takie subtelne innowacje poprawiają ergonomię użytkowania, a zarazem umożliwiają dopasowanie

krok po kroku. Z kolei projektant ma dzięki

mowane wygaszenia, zaś w miejsce strzałek

pokazu do konkretnych potrzeb.

slajdów! Gdy kliknąłem przycisk zamieszczony w okienku pokazu, oczekiwałem wczytania

Rysunek 1. http://www.emotech.com.au

Rysunek 2. http://cubicleninjas.com

http://www.steveprezant.com

Rysunek 3. http://www.kodu.co.uk

247

http://www.falcon-nw.com

http://www.interdevil.com

http://pandathemes.com http://www.mindmeister.com

248

http://www.blamomedia.ca

uwagi od dewelopera Jeśli zależy Ci na zamieszczeniu na stronie eleganckiego pokazu slajdów, to zapewne zainteresują Cię przede wszystkim różne rozwiązania oparte na języku JavaScript. Szczególną uwagę warto zwrócić na ogromną bibliotekę pokazów slajdów wykonanych za pomocą jQuery (http://plugins.jquery.com). To narzędzie ma naprawdę niezwykłe możliwości. Jeżeli chciałbyś zrealizować projekt z ciekawszymi, bardziej zaawansowanymi animacjami czy efektami tekstowymi, to przypuszczam, że powinieneś raczej zdecydować się na klip we Flashu. To oczywiście nie problem, choć jego wykonanie wymaga zupełnie innych umiejętności i na ogół zajmuje więcej czasu. Warto o tym pamiętać przy analizie budżetu i wpływu zastosowanych rozwiązań na koszt projektu. Niekiedy lepiej wybrać prostszy wariant w JavaScript, który pozwoli uzyskać żądany efekt znacznie mniejszym kosztem.

http://www.radiumlabs.com

249

http://www.elevationchurch.org

http://www.fmair.com

http://otrophies.com

250

http://www.treemolabs.com

http://divita.eu

http://www.nevilledesign.com

251

/

podział stron według komponentów strukturalnych zakładki • przyciski • formularze • przyjazne strony główne • funkcjonalne stopki • pokazy slajdów • błąd 404

błąd 404 Zaprojektowanie strony informującej o błędzie 404 to zapewne jedna z ostatnich rzeczy, która może przyjść do głowy projektantowi,

zasadniczo nie istnieje, ale zamiast po prostu arbitralnie skierować go gdzie indziej, wypełnili „nieistniejącą” stronę przydatnymi infor-

a większość deweloperów (ze mną włącznie) także nie pali się do jej implementacji. Przykłady zgromadzone w tej części rozdziału są więc w pewnym sensie niezwykłe: ich autorom

macjami oraz funkcjami. Zaryzykuję stwierdzenie, że są to najczęściej czytane materiały bądź takie, na zaprezentowaniu których autorom szczególnie zależało. To się nazywa maksymalizacja efektów!

nie tylko chciało się stworzyć stronę 404, lecz w dodatku nadali jej bardzo atrakcyjną, praktyczną, a czasami także zabawną formę. Strona 404 w serwisie Carsonified (rysunek

Błąd 404 na stronie Graphik (rysunek 3.) wygląda nieco inaczej (choć takie podejście także jest dość popularne), a mianowicie su-

1.) wspaniale wpisuje się w charakter projektu i jest bardzo przyjemna dla oka. Co więcej, na stronie znalazły się łącza, ułatwiające użytkownikowi odnalezienie potrzebnych materiałów. W ten sposób autorzy zrobili wszystko, aby nie

geruje odwiedziny na stronie głównej i rozpoczęcie poszukiwań od początku. W sumie to nie taki zły pomysł: skoro użytkownik odwiedził jakąś stronę, to być może poświęci chwilę na to, aby dać jej jeszcze jedną szan-

zmarnować potencjalnej okazji do pozyskania nowego odbiorcy. Strona 404 w serwisie Studio Weber (rysunek 2.) została zrealizowana z nieco innym

sę. To rozwiązanie szczególnie dobrze sprawdza się w serwisach zawierających stosunkowo niewiele treści, gdyż ewentualny błąd tak czy owak będzie zmuszał użytkownika do powrotu na stronę główną.

nastawieniem. Autorzy uprzejmie informują gościa, że znalazł się właśnie w miejscu, które

252

http://www.fhoke.com

http://www.ndesign-studio.com

Rysunek 1 http://www.carsonified.com

Rysunek 2. http://www.studioweber.com

http://www.monolinea.com

Rysunek 3. http://graphik.fi

253

254

http://www.tylergaw.com

http://www.shayhowe.com

http://www.pixelthread.co.uk

http://www.dockerydesign.com

skorowidz praw autorskich s. 010 http://www.bryanconnor.com Bryan Connor © 2009 s. 010 http://www.coldstonecreamery.com © 2009 TargetScope Inc. s. 010 http://www.digitalmash.com Rob Morris © 2009 s. 010 http://www.greencircleshoppingcenter.com Green Circle 2009 s. 011 http://www.atebits.com Tim Van Damme © 2009 s. 011 http://www.serj.ca Serj Kozlov © 2009 s. 011 http://www.smartosc.com Copyright © 2003 – 2009 SmartOSC Cors. Wszystkie prawa zastrzeżone. s. 011 http://stonetire.com Brad Haynes © 2009 s. 013 http://www.swgraphic.com/v2 SW Graphic © 2009 s. 013 http://twe4ked.com Odin Dutton © 2009 s. 013 http://www.bethemiddleman.com Bethemiddleman © 2009 s. 014 http://www.onebyfourstudio.com One by Four © 2009 s. 014 http://www.pokeseo.com Tanner Christensen © 2009 s. 014 http://www.mediacontour.com Media Contour © 2009 s. 015 http://www.tunnel7.com tunnel 7 © 2009

s. 015 http://andrewlindstrom.com Andrew Lindstrom © 2009 s. 015 http://www.allisclear.com Clear Network © 2009 s. 017 http://www.mintwheels.com SiteWave.Com © 2009 s. 017 http://whydbu.dbu.edu © 2009 TargetScope Inc. s. 018 http://campaignmonitor.com/designers Brad Haynes © 2009 s. 018 http://viminteractive.com VIM Interactive, LLC © 2009 s. 018 http://www.nationalbreastcancer.org © 2009 FireHost Inc. s. 019 http://bunton.com.au Sean Bunton © 2009 s. 019 http://www.mdswebstudios.com MDS Web Studios © 2009 s. 019 http://www.visualelixir.com Jim Gunardson © 2009 s. 019 http://www.typejockeys.com Typejockeys © 2009 s. 021 http://www.designwithoutfrontiers.com Kostas Mavropalias © 2009 s. 021 http://www.rawcoach.be Lensco | Lennart Schoors © 2009 s. 021 http://leihu.com ©1974 – forever & a day James Mathias s. 021 http://www.indextwo.com David Trang © 2009

s. 022 http://www.onebitwonder.com One Bit Increment © 2009 s. 022 http://macallanridge.com Paramore|Redd © 2009 s. 022 http://theurbanmama.com theurbanmama © 2009 s. 023 http://www.goodbytes.be GoodBytes.be © 2009 s. 023 http://onehub.com © 2009 Onehub Inc. Wszystkie prawa zastrzeżone. s. 024 http://www.rawsterne.co.uk John Rawsterne © 2009 s. 025 http://viminteractive.com VIM Interactive, LLC © 2009 s. 025 http://mocapoke.com Dan Hill © 2009 s. 025 http://www.spoongraphics.co.uk Chris Spooner © 2009 s. 025 http://www.ukpads.com Teabag Studios © 2009 s. 026 http://www.garretthoffmann.com Integrity © 2009 s. 026 http://anderbose.com Brad Haynes © 2009 s. 026 http://www.nathanhackley.com Nathan Hackley © 2009 s. 028 http://www.fontex.org Rade Joksimovic © 2009 s. 028 http://www.wilsondoors.com Openfield Creative © 2009

255

s. 028 http://www.gcntv.org Global Christian Network © 2009 s. 028 http://www.recaper.com Mubashar Iqbal © 2009 s. 029 http://www.sofiaregalo.com Sofia Regalo © 2009 s. 029 http://garyplayer.com Paramore|Redd © 2009 s. 029 http://hungryhowies.com © 2009 TargetScope Inc. s. 029 http://www.digitalnoon.com Nick Kutateli © 2009 s. 031 http://libertyboom.com © 2009 Magnate Interactive s. 032 http://tearoundapp.com We Collaborate / Crafty Corp © 2009 s. 032 http://www.ticatacgames.net/static/iphone_teaser Treemo Labs © 2009 s. 032 http://www.outpostapp.com David Kaneda © 2009 s. 032 http://www.glasshouse-apps.com Glasshouse Apps © 2009 s. 033 http://syphone.selcukyilmaz.com selcuk yilmaz © 2009 s. 033 http://skimaps.planetreesoftware.com Lennart Schoors © 2010 s. 034 http://www.baristaapp.com Glasshouse Apps © 2009 s. 034 http://www.momentoapp.com d3i © 2009 s. 034 http://www.2udoku.com Toopia © 2009 s. 035 http://www.thermometerapp.com Toopia © 2009 s. 035 http://www.futuretap.com/home/ whereto-en FutureTap © 2009 s. 035 http://tapbots.com/weightbot Tapbots, LLC © 2009 s. 037 http://www.digitalmash.com Rob Morris © 2009 s. 037 http://www.djgd.co.uk David James © 2009 s. 037 http://www.traxor-designs.com Traxor Designs © 2010 s. 037 http://www.ronniesan.com © 2009 by Ronnie Garcia s. 038 http://www.patrickmonkel.nl Monk Design © 2009

256

s. 038 http://madebyelephant.com Tim Van Damme © 2009 s. 038 http://www.lynncyr.com Lynn Cyr © 1996 – 2010 s. 039 http://www.zivmeltzer.com Ziv Meltzer © 2009 s. 039 http://www.brizk.com Kai Brach © 2009 s. 040 http://petehellyer.com Pete Hellyer © 2009 s. 040 http://larkef.com Larkef © 2009 s. 040 http://ryanplesko.com Ryan Plesko © 2009 s. 041 http://betterplacerecordings.com Elliot Jay Stocks © 2009 s. 042 http://www.goodbyeelliott.com Dan Behrens © 2009 s. 042 http://www.standardthompson.com Dan Behrens © 2009 s. 042 http://www.theiveysmusic.com Darcy Fray © 2009 s. 043 http://www.rocketclub.info Dan Behrens © 2009 s. 043 http://www.dimmn.com Dan Behrens © 2009 s. 043 http://10outoftenn.com Otterball © 2009 s. 043 http://www.jazzforme.de Marco Rullkoetter AGD © 2009 s. 044 http://www.sickcityclub.net Zaum & Brown © 2009 s. 044 http://www.muddriverunion.com/index.htm hitcents.com © 2009 s. 044 http://sourhaze.com/ep1 Elliot Jay Stocks © 2009 s. 044 http://www.marianastrench.net Marianas Trench © 2009 s. 045 http://www.inspiredm.com Inspired Magazine © 2009 s. 046 http://www.designshard.com Max Stanworth © 2009 s. 046 http://www.theoldstate.com/blog The Old State LLC © 2009 s. 047 http://www.idsgn.org idsgn © 2009 s. 047 http://upsidestudio.com J. David Link © 2009 s. 048 http://snook.ca Jonathan Snook © 2009 s. 048 http://razvanphotography.com Razvan Horeanga © 2009 s. 048 http://www.havocinspired.co.uk Copyright © 2009 — Havoc Inspired — Ryan Taylor

s. 049 http://jasonsantamaria.com Jason Santa Maria © 2001 – 2009 s. 049 http://beyondjazz.net Lennart Schoors © 2009 s. 050 http://blog.cocoia.com Cocoia © 2009 s. 050 http://exp.horizontal.mykl.nl © 2009 Maykel Loomans. Wszystkie prawa zastrzeżone. s. 050 http://roquealonso.org Roque Alonso © 2008 – 2009 s. 051 http://www.havocinspired.co.uk Ryan Taylor © 2009 s. 052 http://chrissloan.info Chris Sloan © 2009 s. 052 http://www.jasongraphix.com Jason Beaird © 2009 s. 052 http://www.chiappisi.com Fourth Floor Interactive © 2009 s. 052 http://www.joedowdle.com Otterball © 2009 s. 053 http://benjaminminnich.com BenjaminMinnich© 2009 s. 053 http://www.liamjmoore.com Liam J Moore © 2009 s. 053 http://www.neboo5.net Branko Sabaric © 2009 s. 054 http://www.tjmapes.com TJ Mapes © 2009 s. 054 http://www.allaboutchris.co.uk Chris Lowry © 2009 s. 055 http://komodomedia.com Rogie King © 2009 s. 056 http://www.thisisgrow.com Grow Interactive © 2009 s. 056 http://www.saizenmedia.com Saizen Media Studios © 2009 s. 056 http://www.syck.com Syck © 2009 s. 056 http://paramoreredd.com Paramore|Redd © 2009 s. 056 http://www.aspect-webdesign.com AspectWebdesign © 2009 s. 057 http://www.24-7media.de 247mediastudios © 2009 s. 057 http://definecreative.com.au Define Creative © 2009 s. 057 http://madebyrocket.com © rocket 2009 s. 057 http://www.zaum.co.uk Zaum & Brown © 2009 s. 058 http://www.thinkcw.com C+W © 2009 s. 058 http://www.area17.com AREA17 © 2009

s. 058 http://www.periscope.com PERISCOPE © 2009 s. 058 http://junecloud.com © 2009 Junecloud LLC s. 059 http://www.randolphfair.com IBG Design Group © 2009 s. 060 http://www.uabama.com/lectures UAB | AMA © 2009 s. 060 http://www.doyoupk.org Openfield Creative © 2009 s. 060 http://www.festivalboreal.com Jorge Mesa © 2009 s. 060 http://blogsville.us Jesse Friedman © 2009 s. 060 http://www.therustyball.com Openfield Creative © 2009 s. 061 http://summercamp.carsonified.com Carsonified © 2009 s. 061 http://naias.com Openfield Creative © 2009 s. 062 http://www.reelrocktour.com branodn todd wilson © 2009 s. 062 http://www.visitsalford.info/foodfestival Dave Cunningham © 2009 s. 062 http://stackoverflow.carsonified.com Carsonified © 2009 s. 064 http://www.welcometobricktown.com Funnel Design Group © 2009 s. 064 http://www.gatesopen.ca Lucky Cat Design © 2009 s. 064 http://www.sani-resort.com Sani Resorts © 2009 s. 065 http://www.definitelydubai.com Dubai Tourism & Xische Studios © 2009 s. 065 http://www.campingilfrutteto.it il Frutteto © 2009 s. 065 http://www.amsterdam-bed-and-break-fasts. com Amsterdam Bed and Breakfasts © 2009 s. 066 http://treasureislandcasino.com PERISCOPE © 2009 s. 066 http://www.trappfamily.com Trapp Family Lodge | Tag New Media © 2009 s. 066 http://www.paristaylorhotel.com Notio Web Design © 2009 s. 066 http://www.barceloraval.com Barcelo © 2009 s. 066 http://www.icystraitpoint.com G Lamson © 2009 s. 068 http://www.asphaltgold.de asphaltgold sneakerstore © 2009

s. 068 http://www.readyhang.com ReadyHang.com © 2009. Design: UD+M, uberdm.com s. 068 http://www.yayadog.com yayadog © 2009 s. 068 http://www.letscollect.co.uk James Stewart www.letscollect.co.uk © 2009 s. 069 http://www.threadless.com © 2010, Threadless, a skinnyCorp LLC company. Wszystkie prawa do projektów odzieży zastrzeżone. s. 069 http://www.onetribe.com OneTribe © 2009 s. 070 http://www.twelvesouth.com © 2009 Twelve South LLC s. 070 http://ridefourever.com brandon todd wilson © 2009 s. 070 http://www.creativesoutfitter.com Behance, LLC © 2009 s. 071 http://www.teapot.cl Andrea Pérez Dalannays © 2009 s. 071 http://www.uniqlo.co.uk Uniqlo © 2009 s. 071 http://jaqkcellars.com JAQK Cellars © 2009 s. 071 http://www.matthewwilliamson.com Matthew Williamson © 2009 s. 072 http://www.leandaryan.com Leanda Ryan © 2009 s. 072 http://www.jonwardweb.co.uk jonwardweb © 2009 s. 073 http://timvandamme.com Tim Van Damme © 2009 s. 073 http://waqasashraf.com Waqas Ashraf © 2009 s. 073 http://www.ultimate-mediagroup.nl ultimate media group © 2009 s. 073 http://appenstein.com Appenstein, LLC © 2009 s. 073 http://www.jordankeating.com jordankeating © 2009 s. 073 http://andycroll.com Andy Croll © 2009 s. 074 http://brisdom.com/evertslagter Evert Slagter © 2009 s. 074 http://rogieking.com Rogie King © 2009 s. 074 http://bitminers.com BitMiners LLC © 2009 s. 075 http://thurlyapp.com elixirgraphics © 2009 s. 076 http://www.sonarhq.com Boost Ltd © 2009 s. 076 http://www.w3roi.com Awio Web Services LLC © 2009 s. 076 http://ceevee.com CeeVee © 2009 s. 076 http://shortwaveapp.com Shaun Inman © 2009

s. 077 http://www.stayvalid.com nickhand.net © 2009 s. 077 http://heywatch.com Particles © 2009 s. 077 http://wufoo.com Infinity Box Inc. © 2009 s. 077 http://www.buzzsprout.com Molehill © 2009 s. 079 http://www.kartel.co.nz Boost Ltd © 2009 s. 079 http://www.campaignmonitor.com Campaign Monitor © 2009 s. 079 http://lemonstandapp.com Limewheel Creative Inc. © 2009 s. 079 http://www.notableapp.com ZURB © 2009 s. 080 http://invoicemachine.com Bombia Design AB © 2009 s. 080 http://feedafever.com Shaun Inman © 2009 s. 081 http://www.cubescripts.com ©CubeScripts. com s. 081 http://www.easytasker.com LB Digital © 2009 s. 082 http://www.interactive-business.com.au MBG Interactive © 2010 s. 082 http://www.splash360.com Splash360 Incorporated © 2009 s. 084 http://www.lifesabounce.com WeLove72 © 2009 s. 084 http://www.cphomesatarchersrock.com CP Homes at Archers Rock © 2009 s. 084 http://www.provincewest.com SiteWave.Com © 2009 s. 084 http://www.championllc.com G Lamson © 2009 s. 085 http://www.bornliving.com Miguel Ripoll (www.miguelripoll.com) © 2009 s. 085 http://www.hillwoodresidential.com Concussion Interactive © 2009 s. 085 http://breedenhomes.com Origen Creatives © 2009 s. 085 http://www.chrisfenemore.com Chris Fenemore © 2009 s. 086 http://www.jprealtyservices.com JP Realty Services © 2009 s. 086 http://www.alghadeer.ae © 2009 Sorouh s. 086 http://www.mpwproperties.com G Lamson © 2009 s. 088 http://www.brianhoff.net Brian Hoff / TDC Brand © 2009 s. 088 http://www.ruyadorno.com Ruy Adorno

257

s. 088 http://www.markdearman.com Mark Dearman © 2009 s. 088 http://www.dosbros.nl ruud puylaert @ 2009 s. 089 http://www.toby-powell.co.uk Toby Powell © 2009 s. 089 http://www.susiemcconnell.com Susie McConnell © 2009 s. 090 http://www.pyttel.sk Roman Pittner © 2009 s. 090 http://two24studios.com Jason Walker © 2009 s. 090 http://www.yodabaz.com Basile Tournier © 2009 s. 090 http://www.shadddales.com Shadd Dales © 2009 s. 091 http://www.alexcohaniuc.com Alex Cohaniuc © 2009 s. 091 http://www.danieloliver.co.uk Daniel Oliver © 2009 s. 091 http://sjhunter.net Adam Lloyd © 2009 s. 091 http://www.ermanerkur.com Erman Erkur © 2009 s. 092 http://www.firenetworks.com FireHost © 2009 s. 092 http://www.fireexchange.com FireHost © 2009 s. 093 http://www.syrrup.com Jennifer Yen © 2009 s. 093 http://www.solidshops.com Joris Hens / Dries Droesbeke © 2009 s. 093 http://www.lukesbeard.com Lukesbeard © 2009 s. 093 http://www.upstatedesign.org Tyler Finck © 2009 s. 094 http://www.freshdeals.com Fresh Deals © 2009 s. 094 http://www.branchesdesign.co.uk Branches Design © 2009 s. 094 http://www.shortinc.com Abuse the System, Inc. © 2009 s. 095 http://birdboxx.com © 2009 birdboxmedia. com & idokungfoo.com s. 095 http://wordpress-workshops.com WordPress Workshops © 2009 s. 095 http://squidchef.com Piotr Godek © 2009 s. 095 http://www.formmule.com Formmule © 2009 s. 096 http://www.wuwi.com Bindoff Media © 2010

258

s. 097 http://www.yellowbirdproject.com www. goDynamo.com © 2009 s. 097 http://www.unrealcotton.com INSPIRE Creative Solutions © 2009 s. 097 http://www.cosmicsoda.com CosmicSoda © 2009 s. 098 http://www.milkandeggsco.com Milk and Eggs Co. © 2009 s. 098 https://www.drippinginfat.com WeLove72 © 2009 s. 098 http://www.ittybittee.com Ittybittee © 2009 s. 098 http://www.gotmojo.co.uk GotMojo © 2008 s. 099 http://www.riptapparel.com TJ Mapes © 2009 s. 099 http://200nipples.com Tiny Sauce, LLC © 2009 s. 100 http://www.patriciaferreira.com Patrícia Ferreira © 2009 s. 101 http://www.storenvy.com Storenvy © 2010 s. 101 http://www.aroundme.com Integrity © 2009 s. 102 http://www.theuxbookmark.com Abhay Rautela © 2009 s. 102 http://www.practicelink.com Integrity © 2009 s. 102 http://www.freshdeals.com Fresh Deals © 2009 s. 105 http://www.conceptfeedback.com Concept Feedback LLC © 2009 s. 105 http://www.periscopecreative.com Periscope Creative © 2009 s. 105 http://www.patrickmonkel.nl Monk Design © 2009 s. 105 http://kindredspiritstn.org Brad Haynes © 2009 s. 106 http://rawkes.com Rob Hawkes © 2009 s. 106 http://www.antidecaf.com Anders Johnsen © 2009 s. 106 http://www.performanceedgepartners.com © 2009 FireHost Inc. s. 106 http://www.smalldotstudios.com © Copyright 2009 Small Dot Studios s. 107 http://www.design-manchester.co.uk David Rushton © 2009 s. 107 http://www.arcticcat.com/snow PERISCOPE © 2009 s. 108 http://www.studiow.com.my Studio W © 2009 s. 108 http://wtmworldwide.com © 2010

s. 108 http://www.skrotskystudio.com Vadim Skrotsky Studio © 2009 s. 108 http://www.reinvigorate.net Reinvigorate © 2010 s. 109 http://ryanmcmaster.com Ryan McMaster © 2009 s. 110 http://strutta.com Strutta Media, Inc. © 2009 s. 110 http://trystentertainment.com Marie Bushbaum © 2009 s. 110 http://www.pizzainn.com © 2009 TargetScope Inc. s. 110 http://www.zionseven.net zionseven.net © 2009 s. 111 http://neutroncreations.com Tim Van Damme © 2009 s. 111 http://www.digitalgurus.co.uk WeLove72 © 2009 s. 111 http://tomatogallery.yzx.se Martin Ahlberger © 2009 s. 111 http://www.addnoise.nl Add Noise Internet & Design © 2009 s. 112 http://www.mdxinteractive.com MDX Interactive, LLC © 2009 s. 112 http://www.factoria.me Factoría Crossmedia © 2009 s. 113 http://cannonballcommunications.com Enso © 2009 s. 113 http://adcapitalindustries.com Logistetica © 2008 s. 113 http://www.harlandwilliams.com Harland Williams © 2009 s. 113 http://kissmetrics.com KISSmetrics © 2009 s. 114 http://www.gelattina.com Gelattina.com © 2009 s. 115 http://arat.cz Lukás Foldýna © 2009 s. 115 http://www.bottlerocketapps.com Bottle Rocket Apps © 2009 s. 115 http://www.cellar-app.com Glasshouse Apps © 2009 s. 116 http://icedcocoa.com Louis Harboe © 2009 s. 116 http://www.imagemakers.uk.com Imagemakers © 2009 s. 117 http://www.liftux.com Walmedia, LLC dba Lift © 2009 s. 117 http://www.magnateinteractive.com © 2009 Magnate Interactive

s. 117 http://www.cinemobits.com.br mobits © 2009 s. 117 http://www.mockdraftapp.com Tap Tapas © 2009 s. 118 http://www.flipside5.com FlipSide5, Inc. © 2008 – 2009 s. 118 http://www.rovingbird.com/touringmobilis-nl SHpartners bvba © 2009 s. 119 http://www.albertlo.com Albert Lo © 2009 s. 120 http://www.kimburgess.info Kim Burgess © 2009 s. 120 http://maustingraphics.com Michael Austin © 2009 s. 120 http://www.lisabun.com Lisa Bun © 2009 s. 120 http://www.aus120.com Design120 © 2009 s. 121 http://www.johnphillips.me John Phillips © 2009 s. 121 http://adellecharles.com Adelle Charles © 2010 s. 121 http://www.cucweb.org Chomolungma UNESCO Centre © 2009 s. 122 http://www.visualgroove.net Febby Tan © 2009 s. 122 http://3diddi.com dnna © 2009 s. 122 http://www.kmkzband.com Sterovisualdesign.p. com © 2009 s. 122 http://www.levikoi.com LeviKoi c 2009 s. 124 http://53mondays.com Lesly Garreau © 2009 s. 124 http://vip.grooveshark.com Escape Media Group © 2009 s. 124 http://www.thepeachdesign.com © 2010 THE PEACH DESIGN. Wszystkie prawa zastrzeżone. s. 125 http://www.id83.nl Lieve Sonke © 2009 s. 125 http://theiconlab.com elixir graphics © 2006 – 2009 s. 125 http://getconcentrating.com © rocket 2009 s. 126 http://www.gositewave.com SiteWave.Com © 2009 s. 126 http://www.jp3design.com Jason Peters, JP3 DESIGN © 2010 s. 126 http://www.ebandlive.com eBandLive © 2010 s. 126 http://nmiciano.com Noel Miciano © 2009 s. 127 http://www.easyink.com.au SimpleFlame © 2010 s. 127 http://www.southernmedia.net Southern Media © 2009 s. 127 http://velthy.net Stefan Velthuys © 2009

s. 128 http://www.topazti.com TOPAZ Technologies © 2009 s. 128 http://www.shape5.com Shape 5 LLC © 2009 s. 129 http://jbradforddillon.com J. Bradford Dillon © 2010 s. 130 http://www.darrenhoyt.com Darren Hoyt © 2009 s. 130 http://thecodesign.org Ryan Plesko © 2009 s. 130 http://beargraphics.co.uk David Emery © 2009 s. 131 http://www.behoff.com Brian Hoff Design, LLC © 2010 s. 131 http://ligatureloopandstem.com Ligature, Loop & Stem © 2009 s. 132 http://www.typechart.com Panduka Senaka © 2009 s. 132 http://www.thevileplutocrat.com 16toads Design © 2009 s. 133 http://www.integritystl.com Integrity © 2009 s. 133 http://www.squarefour.net squarefour © 2009 s. 133 http://www.piscataqua.com/index.aspx Piscataqua Savings Bank © 2010 s. 133 http://www.lovefreelancing.com Kai Brach © 2009 s. 134 http://malwin-faber.de Malwin Faber © 2009 s. 134 http://www.votedougducey.com/ FireHost Inc. © 2010 s. 135 http://www.bensky.co.uk Ben Sky © 2009 s. 136 http://www.thisisleaf.co.uk SB Studio © 2009 s. 136 http://blog.newsok.com/afghanistan-iraq/ mikes-blog Kristopher Kanaly © 2009 s. 136 http://www.housetopmedia.com Church Plant Media © 2010 s. 136 http://www.njwebdesign.co.za The Creative Dot © 2009 s. 137 http://www.rommil.com Rommil Santiago © 2009 s. 137 http://www.noahshrader.com Noah Shrader © 2009 s. 137 http://www.davyknowles.com Satsu Limited © 2009 s. 137 http://www.albus.fi Aleksi Partanen © 2009 s. 138 http://www.superieur-graphique.com Sven Stüber for Superieur Graphique © 2009 s. 138 http://v1.maykelloomans.com © 1985 – 2009 Maykel Loomans. Wszystkie prawa zastrzeżone.

s. 138 http://www.schlossanger.de Schlossanger Alp GmbH Co. Kg. © 2009 s. 138 http://www.dettaglio.co.uk We Love... © 2009 s. 138 http://www.lightqube.co.uk We Love... © 2009 s. 140 http://www.brianhoff.net Brian Hoff Design, LLC © 2010 s. 141 http://www.nosotroshq.com Juanma Teixido © 2009 s. 141 http://www.nanointegris.com Twist Systems Ltd © 2009 s. 141 http://eighty8four.com Eighty8Four, Inc © 2009 s. 142 http://www.jamiegregory.co.uk Jamie Gregory © 2010 s. 142 http://kiwithemes.com Elixir Graphics © 2009 s. 142 http://nihongoup.com Philip Seyfi © 2009 s. 142 http://fusionads.net Elliot Jay Stocks © 2009 s. 143 http://www.rihardsonline.com Rihards Steinbergs © 2009 s. 143 http://www.prothemedesign.com Pro Theme Design © 2009 s. 143 http://www.hotgloo.com HotGloo © 2009 s. 143 http://www.admkids.com PERISCOPE © 2009 s. 144 http://www.paperrep.com Central NationalGottesman Inc. © 2009 s. 144 http://www.pixelflips.com Phillip Lovelace © 2009 s. 144 http://www.superuserstudio.com Super User Studio © 2010 s. 146 http://www.inboxaward.com © INBOX AWARD s. 146 http://www.sreski.com Mark Dormand © 2009 s. 146 http://www.retrostrobe.com retrostrobe* © 2009 s. 146 http://nathancarnes.com Nathan Carnes © 2009 s. 147 http://www.pfxcontracts.net PFX Contracts Ltd © 2009 s. 147 http://www.conetrees.com Cone Trees © 2009 s. 147 http://www.fourthfloorinteractive.com Fourth Floor Interactive © 2009 s. 147 http://robertsonuk.net © 2009 robertsonuk. net s. 148 http://www.studiozfilms.com Studio+Z Films © 2010 s. 148 http://www.ryanjclose.com Ryan Close © 2009

259

s. 148 http://www.playout.pt Playout © 2009 · PLAYOUT.PT s. 148 http://plsr.net Jan Hendrik Weiss © 2009 s. 149 http://www.airbnb.com Airbnb, Inc © 2009 s. 149 http://lensco.be Lennart Schoors © 2009 s. 149 http://www.diografic.com Diografic© 2009 s. 149 http://www.rozner.pl Jacek Rozner © 2009 s. 151 http://twiggy.carsonified.com Carsonified © 2009 s. 151 http://www.crayonslife.com Jesusa Ayala Dayate © 2009 s. 151 http://www.camellie.com camellie © 2009 s. 151 http://www.happyingreenville.com Bon Secours St. Francis Health System © 2009 s. 151 http://ami.wookypooky.com Amelia Chen © 2009 s. 152 http://www.tylergaw.com Tyler Gaw © 2009 s. 152 http://www.rawcoach.be Lennart Schoors © 2009 s. 152 http://mesonprojekt.com Karl Francisco Fernandes © 2009 s. 153 http://www.albertocerriteno.com Alberto Cerriteno © 2009 s. 153 http://www.espiratecnologias.com Espira © 2009 s. 153 http://www.chrisspooner.com Chris Spooner © 2009 s. 153 http://www.ebandlive.com/users/dirtydozenbrassband803 eBandLive © 2010 s. 155 http://real-sangria.com Cread an MGSCOMM Company© 2009 s. 155 http://www.Duirwaigh.com Angi Sullins & Silas Toball, Duirwaigh, Inc. © 2009 s. 155 http://www.adamsmagic.com Adam Cope © 2009 s. 155 http://www.mattnortham.com Matt Northam © 2009 s. 156 http://www.signshopmarketing.com Graphic D-Signs, Inc. © 2009 s. 156 http://chirp.twitter.com Twitter © 2009 s. 156 http://www.carbonsugar.com Design120 © 2009 s. 157 http://www.bbc.co.uk/cbbc/tracybeaker BBC © 2009 s. 157 http://bigskynj.com Big Sky Associates, LLC. © 2009

260

s. 157 http://arose.biz A.R.O.S.E. © 2009 s. 158 http://www.comfortbrothers.com Comfort Brothers © 2009 s. 158 http://zionsnowboards.com brandon todd wilson © 2009 s. 159 http://blog.spoongraphics.co.uk Chris Spooner © 2009 s. 159 http://www.joaozanatta.com.br joaozanatta © 2009 s. 159 http://www.swimmingwithbabies.com Madhu Sharma © 2009 s. 160 http://www.francescomugnai.com FrancescoMugnai.com © 2009 s. 161 http://www.firehost.com © 2009 FireHost Inc. s. 161 http://www.edelwwweiss.com Delphine Pagès © 2009 s. 161 http://www.lionite.com lionite © 2009 s. 161 http://www.launchmind.com LaunchMind Ltd © 2009 s. 162 http://www.emergence-day.com Saizen Media Studios © 2009 s. 162 http://kiwi-app.net YourHead Software © 2009 s. 162 http://insectropolis.com Insectropolis © 2009 s. 163 http://www.saizenmedia.com/FFIV Saizen Media Studios © 2009 s. 163 http://www.saizenmedia.com/nightwish Saizen Media Studios © 2009 s. 163 http://shauninman.com Shaun Inman © 2009 s. 163 http://www.cupcakecarousel.co.uk cupcakecarousel © 2009 s. 163 http://culturapositiva.com Social Snack © 2009 s. 164 http://tomatic.com Thomas Marban © 2009 s. 164 http://www.sunskool.com Storm Sustainability © 2009 s. 164 http://events.carsonified.com Carsonified © 2009 s. 164 http://www.mikimottes.com Miki Mottes © 2009 s. 165 http://www.amitkhera.com www.amitkhera. com © 2009 s. 165 http://www.2pitch.com 2pitch © 2009 s. 166 http://www.endemit.si david praznik © 2009 s. 167 http://www.shayhowe.com Shay Howe © 2009

s. 167 http://www.miguelbuckenmeyer.com Miguel Buckenmeyer © 2009 s. 167 http://dj.johnyfavourite.co.uk Favourite Media © 2009 s. 167 http://www.wedesignwise.com Designwise © 2010 s. 168 http://www.nkbookreviews.com Nate Klaiber © 2009 s. 168 http://www.min-style.de Jann de Vries © 2009 s. 169 http://www.unieq.nl Dirk Leys © 2009 s. 169 http://www.gesteves.com Guillermo Esteves © 2009 s. 169 http://m1k3.net Michael Dick © 2010 s. 169 http://www.leandaryan.com Leanda Ryan © 2009 s. 170 http://www.brandedcode.com Micheil Smith © 2009 s. 170 http://www.syrrup.com Jennifer Yen © 2009 s. 170 http://de-online.co.uk David Emery © 2010 s. 170 http://www.sabeapp.com Cubedroute © 2009 s. 171 http://www.theglasgowcollective.com BigWaveDesign © 2009 s. 172 http://www.remixcreative.net Nik Gill © 2009 s. 172 http://www.alingham.com Al Ingham © 2010 s. 172 http://www.intuitionhq.com Boost New Media © 2009 s. 172 http://www.helveticbrands.ch David Pache © 2010 s. 173 http://the99percent.com Behance, LLC © 2009 s. 173 http://www.kadlac.com Kadlac Studios © 2009 s. 173 http://www.ibgdg.com IBG Design Group © 2009 s. 174 http://rawkes.com Rob Hawkes © 2009 s. 174 http://www.thinkcage.com Jason Zimdars © 2009 s. 174 http://www.cubedroute.com Cubedroute © 2009 s. 175 http://baltimoregreenworks.com Baltimore Green Works© 2009 s. 175 http://www.photographyserved.com Behance, LLC © 2009 s. 175 http://www.creativitea.co.uk Creativitea Limited © 2009 s. 175 http://www.creativecomponent.com © Creative Component, LLC 2009

s. 176 http://cramerdev.com © 2009 Cramer Development Inc. s. 176 http://kolor-designs.com Razvan Horeanga © 2009 s. 176 http://new.smilezonedentist.com Smile Zone Dental ©2010 s. 177 http://feedstitch.com Pointless Corp. / Viget Labs © 2009 s. 178 http://fourthavenuechurch.org Brad Haynes © 2009 s. 178 http://www.tomazzlender.com david praznik © 2009 s. 178 http://www.mormasso.com Mormasso © 2009 s. 179 http://sitesquared.com Sitesquared, LLC © 2009 s. 179 http://www.uniqueofficenyc.com Graphic D-Signs, Inc. © 2009 s. 179 http://www.texturelovers.com Max Stanworth © 2009 s. 179 http://www.catherinecolebrook.com Catherine Colebrook © 2009 s. 180 http://www.uniqueofficenyc.com Unique Office Solutions, Inc. © 2009 s. 180 http://www.ribbonsofred.com Ribbons of Red © 2009 s. 180 http://www.thomasmaxsondesign.com/project04/process/final Thomas Maxson © 2009 s. 181 http://toriseye.quodis.com Quodis © 2009 s. 181 http://broadersheet.com Broadersheet Ltd © 2009 s. 181 http://www.gandrweb.com GANDR Web © 2009 s. 181 http://www.eeci2009.com Whoooz! Webmedia © 2009 s. 182 http://www.lealea.net Lea Alcantara / Lealea Design © 2009 s. 182 http://www.kukkakontti.fi Aleksi Partanen © 2009 s. 182 http://www.ectomachine.com ECTOMACHINE © 2009 s. 182 http://squaredeye.com Squared Eye © 2009 s. 183 http://www.larissameek.com Larissa Meek © 2009 s. 183 http://www.scottboms.com Scott Boms © 2009

s. 184 http://www.thespiritoftoys.com SimpleFlame © 2010 s. 184 http://creativestance.com © 2009 creative stance s. 186 http://www.kinetictg.com Kinetic Technology Group © 2009 s. 186 http://www.rockycreekwinery.ca © Rocky Creek Winery Ltd. Wszystkie prawa zastrzeżone. s. 186 http://www.tnerb.com tnerb © 2009 s. 187 http://www.focadesign.com.br FOCADESIGN © 2009 s. 187 http://mariuszciesla.com Mariusz Ciesla © 2009 s. 188 http://www.ernesthemingwaycollection.com The Ernest Hemingway Collection® na mocy wyłącznej licencji udzielonej przez Hemingway Ltd. poprzez Fashion Licensing of America, Inc. 2009 s. 188 http://www.truckhunt.com FireHost © 2009 s. 188 http://www.bcandullo.com Brad Candullo © 2009 s. 189 http://www.jonnyhaynes.com Copyright © 2009 Jonny Haynes s. 189 http://www.chanellehenry.com Chanelle E Henry © 2009 s. 190 http://cellarthief.com SimpleFlame © 2010 s. 190 http://www.milenkaya.org © 2009 Mark Bult Design s. 191 http://www.arunpattnaik.com Arun Pattnaik © 2009 s. 191 http://www.mikeprecious.com/work/index. php?workdetail=wb-candybouquet © 2009 Mike Precious, Multimedia Designer s. 191 http://www.professionalkitchensnj.com Professional Kitchens © 2009 s. 191 http://parkplacetexas.com © 2009 TargetScope Inc. s. 192 http://www.ltmoses.com Lt. Moses Willard © 2009 s. 192 http://www.plexusdesign.co.uk Jenna Law © 2009 s. 195 http://www.nalindesign.com Andre Weier / NALINDESIGN.COM © 2009 s. 196 http://www.jpeg.cn JPEG Interactive © 2009 s. 196 http://www.bennymartinson.com Benny Martinson © 2008

s. 196 http://www.radovleugel.com Rado Vleugel Media © 2009 s. 196 http://www.cake-factory.com Thoughtomatic © 2009 s. 197 http://www.organicgrid.com Organic Grid © 2009 s. 197 http://andyshaw.me Andy Shaw © 2009 s. 197 http://www.1.nalindesign.com Andre Weier / NALINDESIGN.COM © 2009 s. 197 http://searchinsidevideo.com Dave Bowker © 2009 s. 197 http://www.sarahmoody.org.uk Sean Keenan © 2009 s. 198 http://www.rsabroker.com/movingstories RSA© 2009 s. 198 http://www.uberdm.com UD+M © 2009 s. 199 http://www.nextbigleap.com Fiaz Khan © 2009 s. 200 http://www.bigkid.co.nz BIGKID © 2009 s. 200 http://www.multiways.com multiways © 2009 s. 200 http://www.grondecki.pl Lukasz Grondecki © 2009 s. 200 http://paddockseducation.com Teabag Studios © 2009 s. 201 http://visualkultura.com Fran Rosa Soler © 2009 s. 201 http://realtimeracing.org Newclear Designs © 2009 s. 201 http://www.lanaehale.com/home Otterball © 2009 s. 202 http://www.rdbrown.me.uk Richard Brown © 2009 s. 202 http://www.digitalic.org/portfolio Digitalic © 2009 s. 202 http://www.tmsportmanagement.com TM Sportmanagement © 2009 s. 202 http://www.xische.com Xische Studios & Danish Farhan © 2009 s. 203 http://f91w.com Neil Scott © 2010 s. 203 http://www.finalcutters.com Digital Heaven Ltd © 2010 s. 203 http://www.lyricalmedia.com John O’Nolan © 2010 s. 203 http://www.nvlstudio.com Aleksi Partanen © 2009

261

s. 204 http://www.soeppainting.com Lightfin Studios © 2009 s. 204 http://www.classicsapp.com Andrew Kaz & Phill Ryu © 2009 s. 204 http://www.rabbleandrouser.com rabble+rouser, inc © 2008 s. 204 http://designspasm.net Sean Geng © 2009 s. 206 http://www.siebennull.com Marc Hinse | siebennull.com © 2009 s. 206 http://www.tuckinteractiv.com tuckinteractiv © 2009 s. 206 http://www.floridaflourish.com © 2010 Flourish Web Design s. 206 http://eyedraw.eu Piotr Godek © 2009 s. 207 http://www.ladeq.it LADEQ © 2009 s. 207 http://www.howarths.nl WeLove72 © 2009 s. 207 http://www.joshsmithdesign.com Josh Smith © 2008 s. 208 http://www.seankeenan.org.uk Sean Keenan © 2009 s. 208 http://meetjohnvon.com John P Gelety © 2009 s. 208 http://www.gavincastleton.com Tyler Finck © 2009 s. 209 http://www.johnantoni.com John Griffiths © 2009 s. 209 http://www.sursly.com Tyler Finck © 2009 s. 209 http://www.alexarts.ru/en Alexey Abramov © 2009 s. 209 http://www.chameleon-home.com PLUSX. de © 2009 s. 211 http://www.vanityclaire.com F. Claire Baxter © 2009 s. 211 http://www.melissamariehernandez.com Justin Lerner © 2009 s. 211 http://cyberwoven.com Cyberwoven © 2009 s. 212 http://www.pinchotforest.com Integritive © 2009 s. 212 http://www.hasrimy.com hasrimy.com © 2009 s. 213 http://www.avilasoto.com avilasoto © 2009 s. 213 http://album.alexflueras.ro Alex Flueras © 2009 s. 215 http://oldergraphicdesigner.com Older Graphic Designer © Jack Bloom 2009 s. 215 http://www.kaabstudios.com KAAB © 2010

262

s. 215 http://www.nineflavors.com NineFlavors.com © 2009 s. 215 http://samanthacliffe.com Samantha Cliffe & Elliot Jay Stocks © 2009 s. 216 http://socialsnack.com Social Snack © 2009 s. 216 http://www.holtedesign.no Holte Design © 2009 s. 217 http://www.contrabrand.net brandon todd wilson © 2009 s. 217 http://www.draftmedia.de Thomas Schröpfer © 2009 s. 217 http://www.brian-eagan.com Brian Eagan © 2009 s. 217 http://lancamjewellery.co.uk © 2009 robertsonuk.net s. 218 http://pixelmanya.com Dominik Mertz © 2009 s. 218 http://www.thismortalmagic.com Jan Pautsch.Lilienthal © 2009 s. 218 http://byroxanne.com Roxanne Labajo © 2009 s. 219 http://www.ultimate-media.nl ultimate media group © 2009 s. 219 http://www.brizk.com Kai Brach © 2009 s. 219 http://www.fajnechlopaki.com Fajne chlopaki © 2009 s. 219 http://www.gnoso.com Gnoso Inc © 2009 s. 221 http://quirkylotus.com quirkylotus © 2009 s. 222 http://www.clothmoth.com Ryan Foster © 2009 s. 222 http://www.narfstuff.co.uk/portfolio Fran Boot © 2009 s. 222 http://thecssblog.com Ignacio Ricci © 2009 s. 223 http://www.imdesignuk.com imdesign © 2009 s. 223 http://www.msites.com Molehill © 2009 s. 223 http://www.metalabdesign.com MetaLab Design Ltd © 2009 s. 223 http://www.piensaenpixels.com Jimena Catalina Gayo © 2009 s. 224 http://www.manisheriar.com Sheriar Designs © 2009 s. 225 http://www.ascendsport.com MG Nutritionals Pty Ltd © 2009 s. 225 http://www.nanastreak.com/webdesignersidea/eBandLive eBandLive © 2009 s. 226 http://www.airbnb.com Airbnb, Inc © 2009 s. 226 http://www.notableapp.com ZURB © 2009

s. 226 http://www.gofreelance.org Kai Brach © 2009 s. 226 http://www.serj.ca Serj Kozlov © 2009 s. 227 http://www.mailchimp.com Copyright © 2009 MailChimp s. 227 http://theimagescanners.com SimpleFlame © 2010 s. 227 http://www.ncover.com Gnoso Inc. © 2009 s. 227 http://www.sonarhq.com Boost Ltd © 2009 s. 228 http://www.uploadpie.com Upload Pie © 2009 s. 228 http://www.jamiebicknell.com Jamie Bicknell © 2009 s. 228 http://www.storenvy.com Storenvy © 2010 s. 228 http://www.1stchoiceaccommodations.com FireHost Inc. © 2010 s. 228 http://www.classicplanestv.com © 2009 HigherSites s. 230 http://guified.com GUIFIED © 2009 s. 230 http://www.traditionalboundaries.com Deep Blue Sky © 2009 s. 230 http://www.kartel.co.nz Boost Ltd © 2009 s. 230 http://www.iseatz.com © iSeatz s. 231 http://www.firehost.com © 2009 FireHost Inc. s. 231 http://strutta.com Strutta Media, Inc. © 2009 s. 232 http://wpcoder.com WPCoder © 2009 s. 232 http://www.ecolect.net Ecolect, Inc © 2009 s. 232 http://graphik.fi Viljami Salminen © 2009 s. 232 http://www.behance.net Behance, LLC © 2009 s. 233 http://thecssblog.com Ignacio Ricci © 2009 s. 233 http://www.airbornehealth.com Airborne © 2010 s. 234 http://www.actionmethod.com Behance, LLC © 2009 s. 234 http://www.holdsworthdesign.com © 2009 Holds’worth Design s. 234 http://www.campaignhq.co.nz Boost Ltd © 2009 s. 234 http://www.modalinc.com Modal, Inc. © 2009 s. 235 http://www.jayhollywood.com.au Jay Hollywood © 2010 s. 237 http://www.bohemiancoding.com Bohemian Coding © 2009 s. 237 http://www.blend.uk.com Blend Creative Ltd. © 2009

s. 237 http://lamusicblog.com LA Music Blog, LLC © 2009 s. 237 http://www.elixirgraphics.com elixir graphics © 2006 – 2009 s. 238 http://www.needanelectrician.co.nz Adrian Hodge © 2009 s. 238 http://www.lindtexcellence.com Lindt & Sprüngli (USA) © 2009 s. 238 http://www.seydesign.com seyDoggy © 2010 s. 238 http://www.nanastreak.com/webdesignersidea/LowertownPrintingCompany Lowertown Printing Company © 2010 s. 239 http://www.taoeffect.com JohnwithanH.com © 2009 s. 239 http://www.teoskaffa.com MGB © 2009 s. 240 http://rockbeatspaper.com Rockbeatspaper © 2004 – 2010 s. 241 http://www.airbnb.com Airbnb, Inc © 2009 s. 241 http://www.jointmedias.com Joint Medias Inc. © 2009 s. 241 http://fusionwaredesign.com fusionware design, llc © 2009 s. 242 http://gandrweb.com/one GANDR Web © 2010 s. 242 http://kolor-designs.com/blog Razvan Horeanga © 2009 s. 242 http://www.gievesandhawkes.com gievesandhawkes © 2009 s. 243 http://www.trippingwords.com Tripping Words © 2009

s. 243 http://www.endoscopia.com American Medical Endoscopy © 2009 s. 243 http://elliotjaystocks.com Elliot Jay Stocks © 2009 s. 244 http://socialsnack.com Social Snack © 2009 s. 244 http://www.filesharehq.com Slipstream Studio © 2009 s. 244 http://designmess.com Sean Geng © 2010 s. 245 http://www.raddsigns.com RAD designs, LLC © 2009 s. 245 http://bradcolbow.com Brad Colbow © 2009 s. 247 http://www.emotech.com.au emotech © 2009 s. 247 http://www.steveprezant.com Steve Prezant Photography © 2009 s. 247 http://www.kodu.co.uk Panduka Senaka © 2009 s. 247 http://cubicleninjas.com Cubicle Ninjas, LLC © 2009 s. 248 http://www.interdevil.com InterDevil.com (Artur Bobinski) Copyright © 2009. Wszystkie prawa zastrzeżone. s. 248 http://www.falcon-nw.com FireHost Inc. © 2010 s. 248 http://pandathemes.com Panda Themes © 2009 s. 248 http://www.mindmeister.com © 2009 MeisterLabs s. 249 http://www.blamomedia.ca blamomedia © 2009

s. 249 http://www.radiumlabs.com Radium © 2009 s. 250 http://www.fmair.com FM AIR © 2009 s. 250 http://otrophies.com SimpleFlame © 2010 s. 250 http://www.elevationchurch.org Elevation Church © 2009 s. 250 http://www.treemolabs.com Treemo Labs © 2009 s. 251 http://divita.eu Philip Seyfi © 2009 s. 251 http://www.nevilledesign.com Neville Design Group © 2009 s. 252 http://www.fhoke.com FHOKE Limited © 2009 s. 253 http://www.carsonified.com Carsonified © 2009 s. 253 http://www.studioweber.com StudioWEBER © 2009 s. 253 http://www.ndesign-studio.com N.Design Studio © 2009 s. 253 http://graphik.fi Viljami Salminen © 2009 s. 253 http://www.monolinea.com Kemie Guaida © 2009 s. 254 http://www.tylergaw.com Tyler Gaw © 2009 s. 254 http://www.pixelthread.co.uk Pixel Thread © 2009 s. 254 http://www.shayhowe.com Shay Howe © 2010 s. 254 http://www.dockerydesign.com Tyler Dockery © 2009

263