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

266 Pages·2013·34.578 MB·Polish

by  Patrick McNeil

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