Isbn 5-93286-003-0

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

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

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

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

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

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

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

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

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

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

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

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

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

ISBN 5-93286-003-0

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

ISBN 5-93286-003-0

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

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

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

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

193148, Санкт-Петербург, ул.Пинегина, 4. тел. [phone] Лицензия ЛП №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)

Дата добавления: 2015-07-26