Spis treści tytułem wstępu ....... 001 strona prywatna ....... 051 typografia ........... 129 07 / podział stron firma projektowa ...... 055 tła fotograficzne ....... 135 według komponentów 01 / inspiracja wydarzenie .......... 059 strukturalnych 220 002 turystyka i podróże ..... 063 05 / podział stron według zakładki ............. 221 e -commerce .......... 067 stylów i motywów 139 inspiracja w procesie przyciski ............. 225 wizytówka firmowa ..... 072 twórczym ......... 003 przejrzysty ........... 140 formularze ........... 229 narzędzia internetowe .. 075 minimalistyczny ....... 145 przyjazne strony główne . 236 oprogramowanie 02 / podstawy projektowania szkic ............... 150 funkcjonalne stopki .... 240 internetowe ....... 078 007 kolaż ............... 154 pokazy slajdów ........ 246 nieruchomości ........ 083 ilustrowany .......... 160 błąd 404 ............. 252 akcent .............. 009 portfolio . . . . . . . . . . . . . 087 typograficzny ......... 166 kontrast ............. 012 wkrótce ............. 092 jednolite barwy ....... 171 skorowidz harmonia ............ 016 t -shirt ............... 096 tekstylia ............. 177 praw autorskich .... 255 wyrównanie .......... 020 katalog ............. 100 drewno ............. 185 powtórzenie .......... 024 nurt ................ 027 04 / podział stron 06 / podział stron według według składników stylów strukturalnych 193 03 / podział stron wizualnych 103 według typów nietypowa nawigacja ... 194 slogan .............. 104 030 nietypowy układ ....... 199 światło .............. 109 pseudoflash .......... 205 aplikacja na iphone’a ... 031 iPhone jako ozdobnik ... 114 przewijanie w poziomie .. 210 niezależny twórca ...... 036 łącza do serwisów jedna strona .......... 214 zespół muzyczny ...... 041 społecznościowych .. 119 blog ................ 045 ikony ............... 123 tytułem wstępu Z perspektywy projektanta internet jest jed- i nie stanowi już obowiązkowego środowiska Dynamika internetu, o której wspomina Autor, nym z najbardziej dynamicznie zmieniających dla stron, które mają „robić wrażenie”. Niesa- bywa bronią obosieczną. Strony, które jeszcze się mediów. Style pojawiają się i odchodzą mowitym motorem zmian był też rozwój plat- wczoraj tętniły życiem, dziś są zamknięte bądź w szalonym tempie, a każdy dzień przynosi form mobilnych. Sieć się zmienia… jak zwykle! też uległy daleko idącym przeobrażeniom. nowe rozwiązania techniczne, które stają się Branża internetowa oferuje nieprzebrane moż- Zdajemy sobie sprawę, że część przykłado- fundamentem dla kolejnych trendów i moty- liwości nauki oraz rozwoju i właśnie to sprawia, wych projektów przedstawionych w książce już wów, stosowanych na niezliczonych stronach że zarówno ja, jak i wielu innych projektantów w chwili wydania będzie nieaktualna. Mamy WWW. Jestem zafascynowany postępem w tej jesteśmy od niej uzależnieni. jednak nadzieję, że zamieszczone ilustracje dziedzinie. Zwłaszcza ubiegły rok był udany Właśnie to uzależnienie skłania mnie do spełnią swoją funkcję. Niektóre nieaktualne dla internetowego designu. Wiele charaktery- obsesyjnego analizowania trendów i stylów, strony można też odnaleźć w archiwach WWW, stycznych cech „internetu 2.0”, takich jak po- a potem redagowania na ich podstawie książ- takich jak http://archive.org/web/web.php. wszechnie stosowane pseudotrójwymiarowe ki. Już dziś myślę o tym, co może się pojawić opaski czy efekty szkła odeszły w niepamięć, w trzecim i czwartym wydaniu. Ta dociekliwość, — redakcja a ich miejsce zajęły bardziej przemyślane, do- a także nienasycony apetyt na rozwój i nowe skonalsze style. informacje stanowią charakterystyczne cechy Uwaga: Jeśli chciałbyś przesłać swoje projekty do Trudno mi zarazem nie nawiązać do zmian, ludzi z branży projektowej. To właśnie dzięki ewentualnego zamieszczenia w kolejnych książ- kach, odwiedź stronę http://TheWebDesignersIdea- jakie dokonały się w czasie od wydania pierw- nim możesz wyszukać w Google rozwiązanie Book.com i zapisz się do listy mailingowej. Dwa razy szego tomu Web Designer’s Idea Book, zwłasz- niemal każdego problemu związanego z pro- do roku otrzymasz informacje o nowych edycjach cza pod względem technicznym. Rosnąca po- jektowaniem. Tworzymy społeczność pasjo- książek, zaproszenia do zgłaszania propozycji i inne informacje związane z tymi publikacjami. Zgłasza- pularność JavaScriptu oraz bibliotek takich jak natów, która nie boi się dzielić wiedzą. Mam nie projektów jest darmowe, wygodne i dostępne jQuery zdecydowanie odcisnęły swoje piętno nadzieję, że ta książka będzie choćby drobnym dla każdego. Nawet jeśli masz wrażenie, że prowa- na wizerunku stron. Flash, choć nadal obecny, wkładem w rozwój tej społeczności. dzisz działalność na zbyt małą skalę — nie wahaj się. Zależy mi na tym, aby prezentować także mniej coraz częściej pojawia się w roli platformy do znane strony. Moje książki mają odzwierciedlać to, tworzenia rozmaitych narzędzi deweloperskich — Patrick McNeil co dzieje się w internecie, a nie być galerią najkosz- towniejszych projektów. 001 / inspiracja w procesie twórczym inspiracja Jedno z najczęściej zadawanych mi pytań dotyczy tego, w jaki sposób czer- pać 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 za- czerpnię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Ę WIWISEKCJA PROJEKTÓW DO JEDNEGO PROJEKTU Punktem odniesienia dla inspiracji powinien Inspiruj się, ale nie kopiuj. Granica pomiędzy in- Jeśli spodobał Ci się jakiś projekt i pomyślałeś więc być nie cały projekt, ale jego składniki, spiracją a naśladownictwem jest bardzo cien- sobie: „Mógłbym zrobić coś podobnego!”, to które są interesujące z punktu widzenia Two- ka, zaś codzienne obcowanie z mrowiem roz- nie poprzestawaj na nim. Poszukaj innych pro- jej pracy. Zwróć uwagę na to, w jaki sposób maitych prac i projektów dodatkowo ją zaciera. jektów — o kolorystyce, strukturze albo treści inni projektanci rozwiązali interesujące Cię Przy takim bogactwie źródeł znalezienie inspi- podobnych do tego, który zamierzasz stworzyć. problemy i wykorzystaj te konkretne aspekty racji jest dziś bardzo proste. Sam internet jest Twoim celem powinno być wykorzystanie naj- ich pomysłów we własnej koncepcji. Weźmy przecież kopalnią pomysłów na strony WWW. lepszych składników każdego z nich i połącze- choćby przykładową stronę internetową (ry- Wprawdzie nie istnieje konkretny przepis na nie różnych koncepcji w jedną, spójną całość. sunek 1. na następnej stronie), na podstawie czerpanie inspiracji z poszanowaniem czyjejś Zacznij od wyobrażenia sobie nowego której można poczynić następujące ogólne pracy, ale dzięki kilku prostym zasadom moż- projektu jako połączenia elementów, które spostrzeżenia: na uniknąć literalnego powielania dokonań in- Cię zainspirowały. Pomyśl nad makietą no- • Nagłówek nie został wyodrębniony za po- nych autorów. Opowiem o tym na przykładzie wej strony i zastanów się nad tym, jakie style mocą kontrastujących barw lub ramek, jak projektu strony internetowej, który niedawno można byłoby zastosować dla poszczególnych to ma miejsce w większości stron WWW. zrealizowałem. Przekonasz się, że pomimo iż elementów. Idea polega nie na tym, aby wybrać • Paleta kolorów jest stosunkowo ograni- czerpałem z różnych źródeł inspiracji, otrzyma- jeden z projektów źródłowych i go wiernie sko- czona i zawiera wiele subtelnych przejść ny projekt wygląda oryginalnie i świeżo. Zanim piować, lecz raczej aby znaleźć pewien zestaw tonalnych. jednak przystąpię do omawiania tego przykła- komponentów, które będą współgrały w nowy, • Wyraźny slogan reklamowy nie pozostawia du, przyjrzyjmy się wspólnie kilku kluczowym ciekawy sposób. Zanim jeszcze zaczniesz two- wątpliwości co do celu istnienia strony. koncepcjom właściwego korzystania ze źródeł. rzyć wstępne szkice, powinieneś mieć garść • Pod dużym pokazem slajdów zamieszczo- świeżych pomysłów, które pozwolą Ci opra- no przejrzysty zestaw ikon, informujący cować coś nowego — a co najważniejsze — je- o aktualnie wyświetlonym slajdzie. dynego w swoim rodzaju. 003 Rysunek 2. Rysunek 1. Rysunek 3. 004 • Mnóstwo pustej (konkretnie szarej) prze- Rysunek 2. z wyróżnionymi kilkoma kluczo- Najpierw proponuję jednak, abyś przyjrzał się strzeni sprawia, że strona sprawia przyja- wymi składnikami stanowi świetny przykład gotowemu szablonowi, pokazanemu na ry- zne, zachęcające wrażenie. takiej prostej analizy. sunku 3. Gdy rozpoczynałem pracę nad tym szab- WYBÓR NAJCIEKAWSZYCH DETALI TWORZENIE NOWEGO PROJEKTU lonem, pomyślałem, że warto byłoby stworzyć Gdy znajdziesz jakieś inspirujące projekty, Przyjrzyjmy się teraz praktycznej realizacji tej stronę nowoczesną, o przemyślanej strukturze, przyjrzyj się im i wybierz te komponenty, które koncepcji na przykładzie procesu tworzenia wielofunkcyjną i umożliwiającą prezentowa- w głównej mierze decydują o ich atrakcyjności. szablonu, jaki zaprojektowałem dla serwisu nie różnych treści, nie wyłączając możliwości Przypatrz się gradientom, efektom świetlnym, http://themeforest.net. Przy kreowaniu szab- prowadzenia bloga. Na podstawie tych zało- typografii — wszystkim subtelnym detalom, lonu inspirowałem się wyglądem kilku znako- żeń zacząłem wstępnie wyobrażać sobie for- które sprawiają, że projekt „żyje”. Zastanów się, mitych stron internetowych. Za chwilę zade- mę projektu. co sprawia, że oglądana strona jest tak dobra. monstruję ich wpływ na jego końcowy kształt. Rysunek 4. Inspiracja Rysunek 5. Projekt Rysunek 6. Inspiracja Rysunek 7. Projekt 005 Rysunek 8. Inspiracja Rysunek 9. Projekt Następnie wybrałem kilka stron interneto- został potraktowany przez innych. Istnieje PODSUMOWANIE wych, które posłużyły mi jako źródło inspiracji: mnóstwo sposobów na to, aby nadać danemu W gotowym projekcie można dostrzec podo- • FreelanceSwitch składnikowi strony indywidualny rys — moż- bieństwa do różnych źródeł inspiracji, które • Aviary na to osiągnąć na przykład poprzez subtelne przyczyniły się do jego powstania, ale całość • PsdTuts+ zmiany w konfiguracji i układzie treści (rysunki wygląda oryginalnie, świeżo i nie sprawia wra- 6. oraz 7.). żenia kalki jednego z pierwowzorów. Niektórzy Inspiracja 1. FreelanceSwitch być może stwierdzą, że moja propozycja po- To, co przede wszystkim przypadło mi do gustu Inspiracja 3. PsdTuts+ lega na tworzeniu swoistego Frankensteina w projekcie tej strony, to pasek nawigacji: duży Najważniejszym elementem zapożyczonym ze skrawków różnych pomysłów. Oczywiście, i czytelny, mieszczący dodatkowe informacje z tego projektu jest stopka: bardzo duża, zawie- jeśli ograniczysz się do posklejania kilku ka- o każdym odsyłaczu. Ponadto tło paska składa rająca dodatkowe informacje i najważniejsze wałków zaczerpniętych z różnych stron, to się z kilku warstw, rozciągających się od góry odsyłacze. Moją uwagę zwróciło też powtórzo- uzyskany efekt raczej pozytywnie nie zaskoczy. do dołu, co nadaje stronie atrakcyjny wygląd ne logo, postanowiłem więc wypróbować po- Omawiane podejście wymaga ujednolicenia (rysunki 4. oraz 5.). dobne rozwiązanie w stopce mojego projektu poszczególnych komponentów poprzez na- (rysunki 8. oraz 9.). Inspiracja 2. Aviary danie im wspólnego stylu, to zaś oznacza, że Duży panel wyboru treści pośrodku strony w żadnym momencie nie powinieneś tracić głównej doskonale sprawdza się w praktyce, z oczu projektu jako całości. Podsumowując: więc pomyślałem, że podobne rozwiązanie inspiruj się, ale nie kopiuj! mogłoby być sercem mojego projektu. Jest to dość powszechnie spotykany komponent, ale zawsze warto się przyjrzeć, w jaki sposób 006 / akcent • kontrast • harmonia • wyrównanie • powtórzenie • nurt podstawy projektowania W swoim podejściu do analizy projektów i nauki projektowania zawsze wychodzę z prostego założenia: o wiele bardziej lubię analizować konkretne przykłady i rozwiązania realnych problemów projektowych, aniżeli dyskuto- wać o abstrakcyjnych i trudno definiowalnych koncepcjach. Dzięki analizie rzeczywistych przykładów zyskujemy praktyczną wiedzę o podstawach pro- jektowania. Taka filozofia sprawdza się nie tylko u początkujących, lecz także zaawansowanych projektantów. Przekonałem się niejednokrotnie, że każdy powrót do podstaw pozwala mi odkryć coś nowego; coś, dzięki czemu zy- skuję szerszą perspektywę. Odnoszę też wrażenie, że zawsze, gdy tylko mam problemy z jakimś projektem, muszę po prostu krytycznie przeanalizować go pod kątem podstawowych zasad, aby znaleźć błąd, który przeoczyłem. Przy opracowywaniu informacji o podstawowych aspektach projekto- wania, przedstawionych w tym rozdziale, korzystałem z książki Basics of Design Lisy Graham. Jest to szkolny podręcznik, który zawsze stanowił dla mnie źródło podstawowych informacji na ten temat. Według Lisy każdy projekt powinien być tworzony z myślą o kilku fundamentalnych kwestiach: 000077