niezawodne zasady web designu. projektowanie spektakularnych witryn internetowych. wydanie ii full version.pdf

(108265 KB) Pobierz
758735030 UNPDF
758735030.002.png
Ty t uł oryginału: The Principles of Beautiful Web Design by Jason Beaird
Tłumaczenie: Maciej Reszotnik
ISBN: 978-83-246-3590-0
© Helion S.A. 2012.
Authorized Polish translation of the English edition of The Principles of Beautiful Web Design, 2nd
Edition ISBN 9780980576894 © 2010, SitePoint Pty. Ltd. This translation is published and sold by
permission of O'Reilly Media, Inc., the owner of all rights to publish and sell the same.
All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means,
electronic or mechanical, including photocopying, recording or by any information storage retrieval system,
without permission from the Publisher.
Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej
publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną,
fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje
naruszenie praw autorskich niniejszej publikacji.
Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich
właścicieli.
Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były
kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane
z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie
ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji
zawartych w książce.
Wydawnictwo HELION
ul. Kościuszki 1c, 44-100 GLIWICE
tel. 32 231 22 19, 32 230 98 63
e-mail: helion@helion.pl
WWW: http://helion.pl (księgarnia internetowa, katalog książek)
Drogi Czytelniku!
Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres
http://helion.pl/user/opinie/niezaw
Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.
Printed in Poland.
• Kup książkę
• Poleć książkę
• Oceń książkę
• Księgarnia internetowa
758735030.003.png
Spis treści
Przedmowa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11
Dla kogo jest ta książka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Co tu znajdziesz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Strona internetowa książki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Errata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Podziękowania . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Konwencje typograiczne użyte w książce . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Przykładowy kod. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Wskazówki, ciekawostki i ostrzeżenia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Rozdział 1 Układ i kompozycja . . . . . . . . . . . . . . . . . 17
Proces projektowania . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Poznawanie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Poszukiwanie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Implementacja . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Wyznaczanie dobrego stylu. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .21
Anatomia stron internetowych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Teoria siatki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Reguła trójpodziału. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
960 Grid System . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Równowaga . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .31
Równowaga symetryczna . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .31
Równowaga asymetryczna . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Jedność . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Bliskość . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Powtórzenia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Wyróżnienie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Rozmieszczenie. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Ciągłość . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Izolacja. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Kontrast . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Proporcje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Podstawowe układy stron . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .41
Układ lewokolumnowy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Układ prawokolumnowy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Układ trójkolumnowy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
758735030.004.png
8
Niezawodne zasady web designu. Projektowanie spektakularnych witryn internetowych
W poszukiwaniu natchnienia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Teczka z pomysłami . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Nowoczesne trendy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Styl beznawigacyjny . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Ekspansywna stopka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Minimalizm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Zmiana rozmiaru: układy stałe, płynne i reaktywne . . . . . . . . . . . . . . . . . . . . . . 48
Stała szerokość . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Szerokość płynna . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Alternatywa: układ reaktywny . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Rozdzielczość ekranu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Praktyczne wykorzystanie: Southern Savers . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Początek. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Rozdział 2 Kolor . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Psychologia koloru . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Kolorystyczne skojarzenia — symbolika koloru . . . . . . . . . . . . . . . . . . . . . . . 60
Temperatura barwowa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Wartość chromatyczna . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Saturacja . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Podstawy teorii koloru . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Czerwony, żółty i niebieski czy CMYK? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Schematy kolorów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .71
Monochromatyczny schemat kolorów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Analogiczny schemat kolorów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Dopełnieniowy schemat kolorów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Inne schematy kolorów — dopełnieniowy rozdzielony, triada i tetrada . . . . . 83
Inne możliwości . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Tworzenie palety . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Notacja szesnastkowa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Narzędzia i zasoby . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Color Scheme Designer 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Adobe Kuler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
COLOURlovers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Color Stream — aplikacja na iPhone’a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Pictaculous . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .91
Colour Contrast Check . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Praktyczne wykorzystanie: kolor oszczędności. . . . . . . . . . . . . . . . . . . . . . . . . . 93
758735030.005.png
Spis treści
9
Rozdział 3 Tekstura . . . . . . . . . . . . . . . . . . . . . . . . . 97
Punkt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Linia. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Figury . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .101
Zaokrąglone wierzchołki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .103
Obrót . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .105
Figury a kompozycja. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .106
Objętość i głębia. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .108
Perspektywa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .108
Proporcje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .109
Światło i cień . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Deseń. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .113
Tworzenie faktury. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .118
Podstarzały, znoszony, nostalgiczny styl . . . . . . . . . . . . . . . . . . . . . . . . . . .118
Czysto — ziarnisto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .121
Własnoręcznie zrobiony album . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .123
Kapryśny styl kreskówkowy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .125
Tekstura minimalistyczna . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .127
Wyznaczanie nowych trendów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .128
Praktyczne wykorzystanie: wycinanie i oszczędzanie . . . . . . . . . . . . . . . . . . . . .129
Rozdział 4 Typograia. . . . . . . . . . . . . . . . . . . . . . . 133
Font a sieć . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .135
Zastępowanie fontu obrazem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .137
Deklaracja @font-face . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .139
Samodzielne hostowanie fontów. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .139
Hosting fontów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .140
sIFR i Cufón . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .141
Anatomia liter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .142
Odstępy w tekście . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .144
Odstępy w poziomie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .144
Odstępy w pionie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .146
Wyrównanie tekstu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .146
Kroje pisma — różnice. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .148
Kroje szeryfowe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .149
Kroje bezszeryfowe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .151
Kroje odręczne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .153
Krój stały . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .154
758735030.001.png

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin