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

Некоторые иллюстрации я взял в интернете

Номер страниц предшествует тексту

Серия «Библиотека дизайнера»

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

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

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

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

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

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

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

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

К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 Блоки текста (215) Кегль(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.1www.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. Самое трудное в любом деле — не как, а что, и вместо составления инструкций по тем или иным эффектам в той или иной программе я рассказываю о том, какие оформительские эффекты в принципе возможны, где они уместны и как воспринимаются зрителем. Конечно, в чистом виде такой сугубо теоретический подход труднореа­лизуем. Чтобы позволить себе роскошь не учить инструкции, дизайнер должен свободно ориентироваться в существующих дизайнерских техно­логиях и программах. Кроме того, нужно учитывать, что в веб-дизайне «как» сильно влияет на «что»: компьютер не только великолепно спра­вляется с техникой традиционного дизайна, но и открывает множество новых эффектов, новых возможностей, новых способов комбинирования материала. Поэтому дизайнер, не имеющий представления о специфиче­ских возможностях компьютера, вряд ли сможет создать на нем что-нибудь конкурентоспособное.

Поиск по сайту: