Что здесь есть и чего здесь нет. Веб-дизайн: книга Дмитрия Кирсанова

Дмитрий КИРСАНОВ

Веб-дизайн: книга Дмитрия Кирсанова

Главный редактор

Дизайн книги, иллюстрации

Верстка, корректура, индекс

Александр Галунов

Дмитрий Кирсанов

Алина Кирсанова

К43 Кирсанов Д.

Веб-дизайн: книга Дмитрия Кирсанова. — СПб: Символ-Плюс, 1999 — 376 с.: цв. ил.

ISBN 5-93286-003-0

Книга автора бестселлера «Факс-модем: от покупки и подключения до выхода в Интернет» - Дмитрия Кирсанова (www.kirsanov.com) - первый полный курс веб-дизайна на русском языке, написанный профессиональным дизайнером. От теоретических основ визуального дизайна до интернетовских технологий и приемов практической работы над сайтом - все это есть в книге, написанной по­нятно, подробно и увлекательно. Издание будет полезно не только начинающим создателям сайтов, но и дизайнерам, работающим в более традиционных облас­тях, специалистам по рекламе и маркетингу, художникам, программистам, - и, конечно же, всем творческим и любознательным людям.

ISBN 5-93286-003-0

©Дмитрий Кирсанов, 1999

© Издательство Символ-Плюс, 1999

Все права на данное издание защищены законодательством Российской Федерации, включая право на полное или частичное воспроизведение в любой форме. Все товарные знаки или зарегистрированные товарные знаки, упоминаемые в настоящем издании, яв­ляются собственностью соответствующих фирм.

Издательство Символ-Плюс

193148, Санкт-Петербург, ул.Пинегина, 4. тел. (812) 567-8775 Лицензия ЛП №000054 от 25.12.98

Подписано в печать 24.02.99. Формат 70X90 '/16. Бумага офсетная

Печать офсетная. Объем 23 п.л. Тираж 4000 экз. Заказ № 65

Отпечатано с готовых диапозитивов в Академической типографии «Наука» РАН 199034, Санкт-Петербург, 9 линия, 12

оглавление. 7

Предисловие. 9

Что здесь есть и чего здесь нет. 9

Примеры.. 9

Соглашения. 9

О вас. 10

Сверим часы.. 10

Как выбрать дизайнера. 11

Обо мне. 11

Почему эта тема?. 11

Сам себе Гутенберг. 12

Глава I. Техминимум.. 12

Кодировки текста. 12

ASCII. 12

Однобайтовые кодировки. 13

Семейство 8859. 13

Двухбайтовые кодировки. 13

ISO 10646 и UTF-8. 14

HTML.. 14

История. 14

В начале был SGML.. 14

Прикладная философия. 14

Золотой век. 15

HTML плюс. 15

Идолы рынка. 15

Бяки и буки. 15

Те же и Microsoft 16

Три, четыре... 16

Синтаксис. 16

Подстановки. 17

Минимальный документ. 17

Текстовая разметка. 17

Ссылки и привязки. 17

Формы.. 17

Изображения и объекты.. 18

Таблицы.. 18

Фреймы.. 18

Национальные особенности. 18

Согласование кодировок. 18

Среды и доступность. 18

Доступность: таблицы.. 19

Как писать alt-тексты.. 19

Доступность: изображения-карты.. 19

Мета-данные и поиск. 19

Мертвая зона. 20

CSS. 20

Принципы.. 21

Возможности. 21

Модульный HTML.. 21

Режем по живому. 21

Сборно-панельный сайт. 22

Рис. 1. 22

Например. 22

XML.. 23

Синтаксис. 23

DTD.. 23

Уровни соответствия. 24

Конверсия. 24

Надстройки. 24

XLL.. 24

XSL.. 25

Графика. 25

Вектор. 25

Вектор в Интернете. 26

Растр. 26

На все четыре стороны.. 27

Цвета. 27

Палитры.. 27

Системы представления цвета. 27

Программирование. 28

JavaScript 28

Динамический HTML.. 28

Модульные технологии. 29

Динамические страницы.. 30

Глава II. Основы дизайна. 30

Как учиться дизайну. 31

Дизайн и «чужое творчество». 31

Материалы и инструменты.. 31

Пространственные отношения. 31

Размер. 32

Относительность размера. 32

Форма и размер. 32

Рис. 2. 32

Рис. 3. 33

Искусство выравнивания текста. 33

Рис. 4. 33

Цвет и размер. 33

Текстура и размер. 33

Рис. 5. 33

Пропорции. 34

Рис. 6. 34

Золото и пластмасса. 34

Пропорций простота. 34

Рис. 7. 34

Микропропорции. 35

Размещение. 35

Одноуровневые элементы.. 35

Рис. 8. 36

Разноуровневые элементы.. 36

Плотность. 36

Пол И характер. 36

Плотность текста. 37

В нужное время и в нужном месте. 37

Форма. 37

Рис. 9. 37

Прямые. 38

Рис. 10. 38

Рис. 11. 39

Рис. 12. 39

Дизайн Пизанской башни. 39

Прямоугольники. 39

Круги и закругления. 40

Рис. 14. 41

Кривые Безье. 41

Рис. 15. 42

Бесформенность. 42

Рис. 16. 42

Рис. 17. 42

Цвет. 43

Рис. 18. 43

Как устроен цвет. 43

Рис. 19. 44

Прогулка по цветовому кругу. 44

Ну и что?. 45

Главные цвета. 45

Восприятие цвета. 45

Сочетаемость цветов. 45

Рис. 20. 46

Рис. 21. 46

Текст и фон. 46

Рис. 22. 47

Текстуры.. 48

Плоский цвет. 48

Геометрические текстуры.. 48

Пиксельные текстуры.. 49

Рис. 25. 49

Фотографические текстуры.. 49

Рис. 26. 49

Материальные текстуры.. 50

Шрифт и текст. 50

Элементы шрифта. 51

Гарнитура, начертание, шрифт. 51

Systema naturae. 51

Виды начертаний. 51

Рис. 27. 51

Шрифты и время. 52

Рис. 29. 52

Рис. 30. 52

Рис. 31. 53

Переходные шрифты.. 53

Новая антиква. 53

Рис. 32. 53

Кларендон. 54

Новые рубленые. 54

Маятник гуманизма. 54

Рис. 33. 54

Рис. 34. 55

Рис. 35. 55

Подбор Шрифтов. 55

Единство противоположностей. 56

Слишком декоративные шрифты.. 56

Развивая тему. 56

Шрифты и названия. 57

Рис. 36. 57

Параметры Набора. 57

Кегль. 57

Прописные и строчные. 58

Интервалы.. 58

Рис. 37. 58

Рис. 38. 58

Выравнивание и отступы.. 59

Размещение. 59

Рис. 39. 60

Чья случайность лучше?. 60

Цвет. 60

Текст как текстура. 60

Единство. 61

Content is king. 61

Академический стиль. 61

В полный рост. 62

Форма. 62

Размещение. 62

Цвет. 62

Шрифт. 63

Текстура. 63

Баланс. 63

Центр масс системы.. 63

Правило рычага. 63

Рис. 40. 64

Контраст. 64

Контраст — это продолжение единства другими средствами. 64

Одномерный контраст. 64

Многомерный контраст. 65

Рис. 41. 65

Рис. 42. 65

Рис. 43. 66

Аспекты контраста. 66

Форма. 66

Размер. 66

Расстояние. 66

Расположение. 66

Цвет. 66

Текстура. 67

Шрифт. 67

Динамика. 67

Рис. 44. 67

Динамика явная. 67

Ветер по Гауссу. 68

Динамика совсем явная. 68

Динамика неявная. 68

Рис. 45. 69

Нюансировка. 69

Пространственные отношения. 70

Цвет. 70

Шрифт. 70

Глава III. Дизайн веб-сайтов. 70

Преграды и препоны.. 70

От общего к частному. 71

Типы сайтов. 71

Первый шаг. 71

Рис. 46. 71

В мире.org. 72

Скорей любите нас. 72

Бесплатный сыр. 72

Устройство сайта. 73

Неупорядоченный континуум.. 73

Топология сайта. 73

Рис. 47. 73

Распределение материала. 74

Фреймы и окна. 74

Первая страница. 75

Всплеск и вскрик. 75

Формат страницы.. 76

The frame of reference. 76

Заметки о полях. 76

Во первых строках. 76

У голубого экрана. 77

Если тебе дадут линованную бумагу — пиши поперек. 77

Ступеньки ригидности. 77

Заглавия и заголовки. 78

Заглавие. 78

Заголовки: логика. 78

Заголовки: дизайн. 79

Разделители. 79

Рис. 48. 79

Баннеры.. 80

Навигация. 80

Общий обзор. 80

Семантика. 81

Дизайн. 81

Рис. 49. 82

Разновидности одинаковости. 82

По ту сторону кнопок. 82

Символы и метафоры.. 82

Рис. 50. 83

Особые случаи. 83

Динамическая навигация. 83

Рис. 51. 83

Блоки текста. 84

Кегль. 84

Шрифт. 85

Коренные шрифты.. 85

Все шрифты ношу с собой. 86

Осторожно: кириллица. 86

Цвет. 86

Ссылки. 87

Другие параметры.. 87

When all else fails. 88

Правила набора текстов. 88

Расстановка пробелов. 88

Неразрываемые пробелы.. 88

Текстовые выделения. 89

Спецсимволы.. 89

Позиционирование. 90

Таблицы и распорки. 90

Дурная наследственность. 90

Двойное дно. 91

Белое место. 91

Фэйсом об тэйбл. 91

Рис. 52. 92

Позиционирование в CSS. 92

Глава IV. Веб-графика. 93

Техника. 93

Палитра и диффузия. 93

Цветовые границы.. 94

Рис. 55. 95

Рис. 56. 95

Экранный анти-алиасинг. 95

Из-под пятницы суббота. 95

Пиксельные эффекты.. 96

ОПТИМИЗАЦИЯ.. 96

JPEG.. 97

Взболтать и настоять. 97

Чудное мгновенье. 98

Рис. 57. 98

Blow up. 98

Функции. 98

Выставочная графика. 98

Фоны.. 99

Как не надо делать фон. 99

Прогладить с изнанки. 99

Рис. 58. 100

Рис. 59. 100

Одномерные фоны.. 100

Одним куском.. 101

Рис. 60. 101

ЛОГОТИПЫ... 101

Диалектика формы.. 102

На единицу площади. 103

Про что картинка?. 103

Символ и слово. 103

Аспекты логотипа. 104

Форма. 104

Рис. 63. 104

Рис. 64. 104

Рис. 65. 104

Шрифт. 105

Рис. 66. 105

Текстура. 106

Рис. 67. 106

Баннеры.. 106

Сколько натикало?. 106

Форматы.. 107

В нужное время и в нужном месте. 107

Слева при входе. 107

Рис. 68. 109

В начале было что-то. 109

Собственная гордость. 109

Рис. 69. 109

Рис. 70. 110

Рис. 71. 110

Удар ниже пояса. 110

Смена поколений. 111

На килограмм живого веса. 111

Acknowledgements. 111

Рис. 72. 111

Визуал. 111

Рынок визуалов. 112

Рис. 74. 112

Приемы.. 112

Трехмерность. 113

Император иллюзий. 113

Пластмассовый призрак. 113

Скульптура или барельеф.. 113

Рис. 75. 114

Искусство искажений. 114

Нетекстурирующие эффекты.. 114

Текстурирующие эффекты.. 116

Рис. 76 «Большой, но за пять или маленький, но за три». 116

Примеры.. 117

www.kirsanov.com.. 117

Логотип. 117

Рис. 77 Генезис логотипа. 118

Рис. 78 (см. цветную вкладку, стр. 335) 118

Цветовая схема. 118

Входные цвета. 118

Рис. 79 (см. цветную вкладку, стр. 335) 119

Информационные цвета. 119

Первая страница. 119

Рис. 80. 120

Карты на стол. 120

Навигация. 120

Рис. 81. 120

Рис. 82. 121

www.quiotix.com.. 121

Логотип. 121

Рис. 83. 122

Рис. 84. 122

Рис. 85. 122

Первая страница. 122

Рис. 86 Эволюция буквы «Q». 123

Рис. 87 (см. Цветную вкладку, стр. 336) 123

Рис. 88 (см. цветную вкладку, стр. 336) 123

Рис. 89. 123

Внутренние страницы.. 124

Рис. 90 (см. цветную вкладку, стр. 336) 124

Рис. 91. 124

Miscellanea. 124

Рис. 92. 125

Рис. 93. 125

Галерея. 125

1. www.avsi.com/avalanche/company/index.html 125

2. www.elliottdickens.com.. 126

3. www.elliottdickens.com/browser.cgi 126

4. www.finemagazine.com/fine1/music/torih.htm.. 126

5. www.prophetcomm.com/iconoclast/ 126

6. www.metadesign.com.. 127

8. www.aboutus.miningco.com.. 127

7. www.metadesign.com/metawho/index.htm.. 127

9. www.microsoft.com/license/opendrive/ 128

10. www.splashtech.com.. 128

11. www.supercede.com/prodserv/scfjava.html 128

12. www.wps.ru. 128

13. www.bdaweb.com.. 129

14. www.capstonestudio.com.. 129

15. (Книги России 1) www.books.ru. 129

16. www.ideo.com/net3/ideo.htm.. 130

17/ www.chess.ibm.сom/learn/html/e.html 130

18.www.tlg.com.. 131

19. www.verso.com.. 131

20. www.vivid.com.. 132

Рис. 19. 132

Рис. 20. 132

Рис. 22 (к стр. 114) 132

Рис. 21. 133

Рис. 43. 133

Рис. 78. 133

Рис. 79. 133

Рис. 87. 134

Рис. 88 (к стр. 318 ) 134

Рис. 89 (к стр. 319) 134

Рис. 90 (к стр. 320) 134

Рис. 91 (к стр.321) 134

Рис. 92 (к стр. 322) 134

Индекс. 135

Символы. 135

А(латиница). 136

в. 136

С. 136

D. 137

E.. 137

F. 138

G.. 138

Н. 138

I. 139

J. 139

К. 140

L. 140

М... 140

N. 140

O. 141

Р. 141

Q. 141

R. 141

S. 141

Т. 142

U. 142

V. 142

W. 142

X. 144

Z. 144

Б. 145

В. 147

Г. 148

д. 149

Е. 150

Ж. 150

3. 150

И. 151

К. 151

Л. 154

М. 155

Н. 156

О. 156

П. 157

Р. 159

С. 161

Т. 162

У. 164

Ф. 164

Х. 165

Ц. 165

Ч. 166

Ш. 166

Э. 167

Я. 167

оглавление

i

Предисловие (1) Что здесь есть и чего здесь нет (1) Примеры (2) Соглашения (3) Пара слов о словах (4) О вас (5) Сверим часы (6) Как выбрать дизайнера (8) Обо мне (9) Почему эта тема? (10) Сам себе Гутенберг (11) Книга как технология (12)

Техминимум.

1.1 Кодировки Текста (14) ASCII (15) Однобайтовые кодиров­ки (15) Так и срослось (17) Семейство 8859 (17) Двухбайтовые коди­ровки (18) ISO 10646 и UTF-8 (18)

1.2 HTML (19) История (19) В начале был SGML (19) Прикладная философия (21) Золотой век (22) HTML плюс (23) Идолы рынка (23) Бяки и буки (24) Те же и Microsoft (25) Три, четыре... (26) Синтаксис (27) Подстановки (28) Минимальный документ (29) Текстовая разметка (29) Ссылки и привязки (30) Формы (30) Изображения и объекты (31) Таблицы (32) Фреймы (32) Национальные особенности (32) Согласование кодировок (33) Среды и доступность (34) Доступ­ность: таблицы (35) Как писать alt-тексты (35) Доступность: изображения-карты (37) Мета-данные и поиск (38) Мертвая зона (38) Сухой ос­таток (39)

1.3 CSS (40) Принципы (41) Возможности (42) Модульный HTML (43) Режем по живому (44) Сборно-панельный сайт (44) Например (46)

1.4 XML (47) Синтаксис (48) DTD (48) Уровни соответствия (50) Конверсия (51) Надстройки (52) XLL (52) XSL (53)

1.5 Графика (55) Вектор (56) Вектор в Интернете (57) 3D (59) Растр (59) На все четыре стороны (60) Цвета (60) Палитры (61) Системы представления цвета (62)

1.6 Программирование (63) JavaScript (64) Динамический HTML (65) Модульные технологии (67) Динамические стра­ницы (71)

Основы дизайна.

Как учиться дизайну (75) Дизайн и «чужое творчество» (76) Материалы и инструменты (77)

II.1 Пространственные отношения (78)

Размер (78) Относительность размера (79) Форма и размер (79) Искусство выравнивания текста (80) Цвет и размер (81) Текстура и размер (81) Про­порции (82) Золото и пластмасса (82) Пропорций простота (83) Микро­пропорции (84) Размещение (84) Одноуровневые элементы (85) Разно­уровневые элементы (88) Плотность (89) Пол и характер (89) Плотность текста (90) В нужное время и в нужном месте (90)

II.2 Форма (91) Прямые (92) Дизайн Пизанской башни (94) Прямоугольни­ки (94) Круги и закругления (97) Кривые Безье (99) Бесфор­менность (100)

ii

II.3 Цвет (101) Как устроен цвет (103) Прогулка по цветовому кругу (105) Ну и что? (108) Главные цвета (108) Восприятие цвета (109) Сочета­емость цветов (ПО) Текст и фон (113)

II.4 текстуры (116) Плоский цвет (117) Геометрические текстуры (118) Пиксельные текстуры (119) Фотографические текстуры (119) Материальные текстуры (120)

II.5 Шрифт и текст (122) Элементы шрифта (124) Гарнитура, начер­тание, шрифт (124) Systema naturae (124) Виды начертаний (125) Шрифты и время (126) Классическая антиква (127) Переходные шрифты (129) Но­вая антиква (129) Кларендон (130) Новые рубленые (131) Маятник гуманиз­ма (131) Подбор шрифтов (133) Единство противоположностей (134) Слишком декоративные шрифты (134) Развивая тему (135) Шрифты и на­звания (137) Параметры набора (138) Кегль (138) Прописные и строч­ные (140) Интервалы (141) Выравнивание и отступы (144) Размещение (145) Чья случайность лучше? (146) Цвет (147) Текст как текстура (148)

II.6 ЕДИНСТВО (149) Content is king (150) Академический стиль (150) В полный рост (153)

II.7 Баланс (155) Центр масс системы (156) Правило рычага (157)

II.8 Контраст (159) Контраст — это продолжение единства другими сред­ствами (160) Одномерный контраст (160) Многомерный кон­траст (161) Аспекты контраста (163)

II.9 Динамика (167) Динамика явная (168) Ветер по Гауссу (169) Динамика совсем явная (169) Динамика неявная (170)

II.10 Нюансировка (172)

Дизайн веб-сайтов. (175)

Преграды и препоны (176) От общего к частному (178)

III.1 Типы сайтов (179) Первый шаг (179) В мире.org (ISO) Скорей любите нас (181) Бесплатный сыр (182)

III.2 Устройство сайта (184) Неупорядоченный континуум (184) Топология сайта (185) Распределение материала (186) Фреймы и окна (188) Первая страница (190) Всплеск и вскрик (191)

III.3 Формат станицы (192) The frame of reference (193) За­метки о полях (194) Во первых строках (195) У голубого экрана (196) Если тебе дадут линованную бумагу — пиши поперек (196) Ступеньки ригидности (197)

III.4 Заглавия и Заголовки (199) Заглавие (199) Заголов­ки: логика (200) Заголовки: дизайн (201) Разделители (203) Баннеры (204)

iii

III.5 Навигация (205) Общий обзор (206) Семантика (207) Дизайн (208)

Разновидности одинаковости (209) По ту сторону кнопок (210) Симво­лы и метафоры (210) Особые случаи (212) Динамическая навига­ция (213)

III.6 Блоки текста (2 15) Кегль (216) Шрифт (218) Коренные шрифты (220)

Все шрифты ношу с собой (221) Осторожно: кириллица (222) Цвет (223) Ссылки (224) Другие параметры (225) When all else fails (227) Правила набора текстов (228) Расстановка пробелов (228) Неразры­ваемые пробелы (229) Текстовые выделения (230) Спецсимволы (230)

III.7 Позиционирование (233) Таблицы и распорки (234) Дурная наследственность (235) Двойное дно (236) Белое место (237) Фэйсом об тэйбл (238) Позиционирование в CSS (240)

Веб-графика. (243)

IV.1 Техника (244) Палитра и диффузия (245) Цветовые границы (247)

Экранный анти-алиасинг (249) Из-под пятницы суббота (249) Пиксель­ные эффекты (251) Оптимизация (252) JPEG (252) GIF (253) Взбол­тать и настоять (254) Чудное мгновенье (255) Blow up (256)

IV.2 Функции (257) Выставочная графика (257) Фоны (259) Как не надо

делать фон (259) Прогладить с изнанки (261) Одномерные фоны (262) Одним куском (263) Логотипы (264) Диалектика формы (266) На единицу площади (267) Про что картинка? (267) Символ и слово (268) Аспекты логотипа (269) Баннеры (275) Сколько натикало? (275) Форматы (277) В нужное время и в нужном месте (277) Слева при входе (279) Больше жизни (279) Пьеса в трех действиях (280) В начале было что-то (282) Собственная гордость (283) Удар ниже пояса (284) Смена поколений (286) На килограмм живого веса (286) Acknowledgements (287) Визуал (288) Рынок визуалов (288)

IV.3 Приемы (290) Трехмерность (290) Император иллюзий (291) Пластмассо­вый призрак (292) Скульптура или барельеф (293) Искусство искаже­ний (295) Что упало, то пропало (295) Нетекстурируюшие эффекты (296) Текстурирующие эффекты (299)

Примеры.

V.1 www .kirsanov.com (304) Логотип (304) Цветовая схе­ма (307) Входные цвета (307) Информационные цвета (309) Первая страница (310) Карты на стол (310) Навигация (312)

V.2 http://www.quiotix.com (314) Логотип (315) Первая страница (317)

Внутренние страницы (320) Miscellanea (321)

V.3 Галерея (323)

Индекс (337)

Предисловие

Предлагаемая вашему вниманию книга задумывалась не как практическое руководство по веб-дизайну, а скорее как учебник общего дизайна на част­ном материале веб-сайтов. Иначе говоря, я пишу о том, как сделать что-то (в том числе сайт) красиво, а не о том, как что-то сделать.

Слово «дизайн» в последние годы необычайно девальвиро­валось. Лишь постепенно интернетовская публика начинает осознавать, что даже с приставкой «веб-» это понятие отнюдь не является синонимом для языка HTML, сетево­го программирования на Java или компьютерной верстки. Поэтому в моей книге вы не найдете ни справочника по HTML, ни описаний последних версий Adobe Photoshop или Microsoft FrontPage. Самое трудное в любом деле — не как, а что, и вместо составления инструкций по тем или иным эффектам в той или иной программе я рассказываю о том, какие оформительские эффекты в принципе возможны, где они уместны и как воспринимаются зрителем. Конечно, в чистом виде такой сугубо теоретический подход труднореа­лизуем. Чтобы позволить себе роскошь не учить инструкции, дизайнер должен свободно ориентироваться в существующих дизайнерских техно­логиях и программах. Кроме того, нужно учитывать, что в веб-дизайне «как» сильно влияет на «что»: компьютер не только великолепно спра­вляется с техникой традиционного дизайна, но и открывает множество новых эффектов, новых возможностей, новых способов комбинирования материала. Поэтому дизайнер, не имеющий представления о специфиче­ских возможностях компьютера, вряд ли сможет создать на нем что-нибудь конкурентоспособное.

Что здесь есть и чего здесь нет

Книга начи­нается с обзора основных технологий, имеющих отно­шение к веб-дизайну: текстовых кодировок, языков раз­метки (HTML и XML), способов представления графики (векторные и растровые форматы) и технологий Интернет-программирования (сценарии, модули и динамические стра­ницы).

Большинство упоминаемых технологий должны быть (по крайней мере, по названию) знакомы любому, кого спо­собна заинтересовать тема книги. Поэтому цель гл. 1 — не в том, чтобы обучить читателя каким-то практическим навыкам; не претендует она и на роль полновесного те­оретического введения. Моей целью было лишь освежить

в вашей памяти важнейшие свойства, возможности и огра­ничения интернетовских технологий, а самое главное — показать их в сравнении друг с другом и в динамике их развития, стимулируя тем самым целостное восприятие, позволяющее ясно увидеть место и роль каждого отдельного языка или стандарта.

Гораздо систематичнее подается в книге курс собственно визуального дизайна, начинающийся в гл. II с обзора аб­страктных материалов дизайнера (формы, цвета, текстуры, шрифта) и используемых в дизайне инструментов (контра­ста, баланса, динамики, нюансировки). Все эти понятия исследуются как в теории, так и в приложении к практике компьютерного и, в особенности, веб-дизайна. Вместе с тем веб-сайт как объект дизайна имеет множество особенно­стей, не выводимых из общих принципов и заслуживающих поэтому отдельной главы (гл. III). Наконец, ряд полудизайнерских, полутехнических вопросов, связанных с созданием компьютерной графики, обсуждается в гл. IV. Такая структура материала основана не на вычитанных где-то схе­мах, а исключительно на моем собственном опыте практического осво­ения, теоретического осмысления и последующего преподавания основ дизайна. Три центральные главы книги во многом построены на материале моих ежемесячных англоязычных статей, публикуемых на www.webreference.сom/cHafo/, — и, разумеется, на основе читатель­ских откликов, вопросов, поправок и дополнений к этим статьям. Конечно, сюжет этого произведения не пытается повторять все зигзаги истории мо­его дизайнерского самообразования. Однако я старался, чтобы план книги как можно точнее соответствовал сложившейся у меня системе понятий и оценок.

При всем при том, наверное, мне все же не удастся избежать упреков в непоследовательности и эклектичности. Отчасти я пошел на это на­меренно; абсолютно симметричные построения нежизненны, и здоровая доля разбросанности, асимметрии и даже нелогичности помогает усвоению материала — при условии, что нелогичность эта художественная, объ­ясняющаяся композиционными соображениями, а не слабым владением материалом. Вместе с тем обилие перекрестных ссылок и подробный пред­метный указатель сделают, я надеюсь, нетрудным поиск в книге нужной информации.

Примеры

Как любой учебник, эта книга не могла обойтись без примеров обсуждаемых понятий и приемов дизайна. Возможно, кому-то покажется, что примеров этих маловато для книги такого объема. На это я могу возра­зить, что большинство примеров используются в тексте по нескольку раз, в каждом случае иллюстрируя что-то новое. Это и понятно: ведь любая реальная дизайнерская работа пользуется всем арсеналом средств, доступных ее автору,

поэтому при внимательном анализе из нее можно извлечь очень много поучительного.

Но главная причина все же не в этом. Если я пишу кни­гу о дизайне, я делаю это в предположении, что даже тщательно подобранный визуальный ряд без текста недоста­точен для овладения дизайнерским мастерством. Образцы хорошего дизайна время от времени попадаются на глаза любому, но даже если вы способны безошибочно отличать их от посредственности, для перехода «пассивного» знания в «активное» недостаточно рассматривания картинок — необ­ходимо их осмысление, результат которого выразить в чисто визуальной форме уже невозможно. Парадоксальное изоби­лие текста в книге на абсолютно визуальную тему должно, как мне представляется, эффективно работать в том числе и благодаря своей кажущейся нелогичности.

Не слишком много на страницах этой книги и иллюстраций. Мне бы хотелось, чтобы обсуждаемые в тексте принципы каждый читатель иллюстрировал для себя мысленно — виденными им самим образцами дизайна или даже идеями своих собственных композиций. Я пытаюсь не направлять ваше творческое мышление в то или иное русло, а хочу лишь разбудить его невизуальными (и потому, возможно, по-особому эффективными) стимулами. Поэтому я доба­влял иллюстрации в основном там, где они действительно необходимы для понимания, и размещал их не в разрыв текста, а на полях.

Определенную пользу начинающий дизайнер смог бы извлечь и из книги, реализующей противоположный подход, — альбома лучших дизайнерских работ, сгруппированных по авторам или по жанрам, с минимумом текста. Такой сборник, наверное, стал бы хорошим дополнением к настоящей книге, однако вряд ли смог бы заменить ее.

Веб-сайты имеют неприятную привычку периодически ме­нять дизайн, а иногда просто исчезать без следа. Поэтому все примеры снабжены иллюстрациями, показывающими, как выглядела обсуждаемая страница в тот момент, когда она попалась мне на глаза (стр. 323). В гл. V обсуждаются также несколько моих собственных работ, — о которых я, естественно, могу рассказать намного подробнее и интерес­нее, чем о любых других, и которые потому пришлись очень кстати для закрепления всего, что изучалось в теоретических главах.

Соглашения

Кое-какие особенности верстки и ком­позиции книги, очевидно, требуют пояснения. Заголовки и подзаголовки идут в тексте без номеров, но снабжены

номерами в оглавлении (стр. I). Хотя все перекрестные ссылки в тексте используют номера страниц, а не разде­лов, для облегчения ориентировки в верхнем колонтитуле каждой страницы приведен номер текущего раздела (в фор­ме «глава.раздел.подраздел»). Абзацы, набранные петитом (мелким шрифтом), обычно содержат второстепенный или более узкоспециальный материал, хотя иногда я пользовался этим приемом выделения просто как средством пунктуации для предотвращения монотонности.

Все ссылки — на страницы, номера глав, URL-адреса и т. п. — шрифтом и серым цветом. Ссылки вида «пример такой-то» относятся к одной из образцовых веб-страниц, собранных в «Галерее» в конце книги; если позволяет место, каждая ссылка на пример сопровождает­ся черно-белой копией обсуждаемой страницы на полях, а в «почти натуральную» величину все упомянутые в кни­ге сайты-примеры воспроизведены и пронумерованы на стр. 323—333 (частично на цветной вкладке). На цветную вкладку вынесены также несколько иллюстраций.

Кроме иллюстраций, заголовков и копий примеров, на полях изредка попадаются отдельные слова и фразы мелким шрифтом, — как правило, заготовленные в черновике кни­ги, но не нашедшие места в окончательном тексте и в то же время слишком удачные, чтобы от них отказаться. Вы можете относиться к ним, как вам больше нравится, — как к попыткам автора пошутить, еще одному уровню подзаго­ловков или просто удобному ориентиру для поиска нужного места в тексте методом «сканирования полей». Если все-таки местами поля будут казаться вам слишком пустыми — не стесняйтесь заполнять их своими собственными мыслями и комментариями!

Пара слов о словах — точнее, об используемых терминах. Не один раз мне приходилось придумывать русские названия для вещей, до сих пор существовавших только по-английски (кстати, все переводные термины обязательно сопровождаются английскими оригиналами в скобках), а ино­гда и вводить обозначения для своих собственных понятий и принципов. Я старался избегать обеих крайностей — и неудобоваримого, в советском сти­ле официоза (вроде «программное обеспечение» или «узел системы WEB»), и сетевого сленга («мэйл», «хомепага», «чат»), одинаково раздражающего как не знающих английского вообще, так и знающих его хорошо. Вме­сте с тем я охотно пользовался словечками вроде «скачать», «промотать» и даже «залинковать», привлекательными краткостью и выразительностью русской морфологии (хотя иногда в сочетании с нерусским корнем). Во­обще, способ рассказать о чем угодно на правильном и стилистически нейтральном русском языке существует всегда, нужно лишь не лениться поискать его.

Одно из главных технических понятий в этой книге — компьютерная программа для путешествий с сайта на сайт и просмотра веб-страниц — по-русски пишется двояко: браузер либо броузер. Я придерживаюсь второго варианта, который хотя и менее правилен с точки зрения произноше­ния английского «browser», все же лидирует по количеству употреблений в русскоязычных интернетовских текстах (статистика получена с помощью поисковых систем, стр. 38). Я также хочу заранее попросить прощения у тех, кому могут не понравиться выражения вроде «оба броузера» или «только в одном из броузеров», — относящиеся, само собой, к программам фирм Netscape и Microsoft. В книге, посвященной не Интернету в целом, а лишь визуальному веб-дизайну для массовой аудитории, я счел возмож­ным ограничиться этими двумя самыми распространенными графическими броузерами, вполне сознавая их неидеальность и не-единственность. Что же касается тех людей, которые броузерами пользуются, то для них (если не считать изредка встречающихся метафор типа «посетители сай­та», «жители Интернета» и т. п.) мне пришлось принять диковатую кальку «пользователи», — которая, как мне кажется, при всей своей нерусскости все же элегантнее давно уже ставших привычными этажерок вроде «телезрители» или «радиослушатели».

О вас

Кому может быть интересна эта книга? Как мне кажется, даже такие противоположные читатели, как профессиональ­ный веб-дизайнер с большим опытом и старшеклассник, только что сделавший свою первую страничку, смогут найти в этой книге что-то ценное (или хотя бы не скучное). Основная же часть моей аудитории находится, видимо, где-то посередине между этими двумя крайностями. Какие-то профессиональные знания или навыки в области веб-дизайна желательны, но не обязательны; гораздо важнее иметь запас терпения, усидчивости, а главное — интереса к предмету изучения.

Я надеюсь, что в какой-то своей части книга будет пред­ставлять интерес и для тех, кто не собирается пробовать себя в дизайне, но чья работа так или иначе связана с созданием сайтов, — для менеджеров проектов, про­граммистов, специалистов по рекламе и маркетингу. Имеет смысл также рекомендовать это произведение «бумажным» художникам и дизайнерам, желающим попробовать свои силы в веб-дизайне (но, возможно, еще не приступавшим даже к освоению компьютера).

Может быть, вас интересует вопрос — реально ли с помо­щью этой книги стать профессиональным дизайнером? Если я отвечу положительно, это не будет нескромностью просто потому, что дизайнером можно стать вообще не читая книг. Для этого нужны, помимо врожденной предрасположен­ности, всего лишь достаточное упорство и методичность в анализе чужих работ и в самостоятельных упражнениях.

Дизайнера делают не книги, а его собственный талант и трудолюбие. Однако кое в чем, надеюсь, сможет помочь вам и эта книга — обобщение дизайнерского опыта, са­мим автором почерпнутого из практики, а не из книг или уроков.

Сверим часы

Есть, впрочем, еще несколько обяза­тельных условий для успешной веб-дизайнерской практики. Поскольку опыт большинства моих читателей, вероятно, ограничивается пока созданием страницы для себя или сво­ей фирмы, я начну с очевидного. Прежде чем приниматься за работу, ответьте честно сами себе: действительно ли у вас есть что сказать миру? Будет ли у вашей страницы достаточ­но посетителей, которым не придется жалеть о потерянном времени? Бессмысленные и бессодержательные сайты пло­хи не столько сами по себе (в конце концов, заходить на сайт или нет — личное дело каждого), сколько тем, что они снижают планку стандартов, «развращают» даже вполне талантливых сетевых журналистов, писателей и дизайнеров, которым уже не приходится прилагать больших усилий, чтобы блистать на таком фоне.

Сказанное относится, конечно, в первую очередь к русскоязычной части Интернета, незначительные размеры которой (в сравнении с Интернетом всемирным) делают ее похожей на «большую деревню», где все знают все про всех и где любой хоть сколько-нибудь заслуживающий внимания проект немедленно этого внимания удостаивается. В англоязычной вселен­ной страницы любительские и профессиональные давно живут в разных системах координат, и чтобы перейти из первой во вторую, необходим не только и не столько талант, сколько правильная оценка потребностей рынка и хорошая реклама.

Художественные способности, безусловно необходимые ди­зайнеру, обычно считаются чем-то сугубо врожденным — «талант либо есть, либо нет». Я же убежден в том, что врожденным является скорее интерес к этой сфере творче­ства — интерес, который вряд ли возможно искусственно стимулировать и без которого даже человек с задатками великого художника не сможет эти задатки развить до рабочего состояния. С другой стороны, искренний интерес и желание попробовать себя уже служат залогом того, что при определенном трудолюбии и методичности в упраж­нениях вы сможете достичь вполне профессионального уровня.

Бытующее представление о невозможности «научить художеству» происхо­дит, боюсь, от того, что мало кто (не исключая и автора этих строк) отчет­ливо понимает, как и чему нужно учить начинающего дизайнера в первую очередь. Помочь здесь может лишь хорошо проработанная теория дизайна, которая позволила бы построить логичный и последовательный учебный

курс. На лавры создателя такой теории я не претендую, но в необходимо­сти ее построения я убедился на собственном опыте. Вот почему в этой книге, задумывавшейся как учебник, встречаются элементы стиля научного исследования: чтобы совладать с материалом, мне приходилось на ходу вы­двигать и обосновывать гипотезы, искать подтверждения и аналогии, — и я, честно говоря, рассчитываю, что заразительная радость первооткрывателя восполнит то, что педагогический эффект книги теряет из-за неполноты и непоследовательности изложения.

Уровень компьютерной грамотности у веб-дизайнера дол­жен быть, само собой, несколько выше среднепользовательского, но даже для создания веб-сайта от начала до конца совсем не обязательно быть программистом (если это, ко­нечно, не динамический сайт вроде онлайнового магазина, требующий интенсивного программирования). Достаточно представлять себе, чем отличаются друг от друга основ­ные компьютерные технологии и для чего их лучше всего использовать. Главный же, на мой взгляд, признак компью­терно грамотного человека — понимание, чего в принципе можно потребовать от компьютера, а чего нельзя.

Без знания английского в этой профессии, хотя и с тру­дом, но все же можно обойтись: если программист, не читающий по-английски, быстро потеряет квалификацию, то дизайнеру даже для освоения нерусифицированных про­граммных продуктов вполне может хватить метода «научного тыка» в сочетании с интуицией. Знание основного языка современного Интернета дает, само собой, множество пре­имуществ: доступность большинства «бумажных» и сетевых дизайнерских публикаций, причастность к международному профессиональному сообществу дизайнеров, — и, конечно же, возможность наслаждаться лучшими образцами англо­язычного веб-дизайна во всей их полноте.

Намного полезнее, однако, для российского дизайнера хорошее владение его родным языком. Даже работая с за­казчиком, хорошо представляющим, что за сайт ему нужен, не стоит рассчитывать на идеальную подготовку текстов: в большинстве случаев дизайнеру приходится самому редак­тировать материалы, сочинять заголовки и вводные абзацы, формулировать надписи на кнопках навигации и т. п. По­ка что немногие из российских дизайн-студий, не говоря уж о дизайнерах-одиночках, могут позволить себе нани­мать для этой работы отдельного человека (по-английски его профессия называется copy writer). Поэтому отнюдь не гуманитарная (к сожалению) родословная большин­ства веб-дизайнеров (чаще всего «переквалифицировавших­ся в управдомы» из программистов) не лучшим образом

сказывается на удобопонятности, а зачастую и просто гра­мотности даже приличных по уровню дизайна сайтов.

Не нашли, что искали? Воспользуйтесь поиском: