Web-design-Kirsanov

www.samouchiteli.ru

Как писать alt-тексты.........................................................................................................................................................................................	26
Доступность: изображения-карты...................................................................................................................................................................	26
Мета-данные и поиск....................................................................................................................	27
Мертвая зона.......................................................................................................................................................................................................	27
CSS.......................................................................	28
Принципы .....................................................................................................................................	29
Возможности.................................................................................................................................	29
Модульный HTML ..........................................................................................................................	30
Режем по живому ...............................................................................................................................................................................................	30
Сборно-панельный сайт ....................................................................................................................................................................................	30
Рис. 1............................................................................................................................................	31
Например.............................................................................................................................................................................................................	31
XML.......................................................................	32
Синтаксис......................................................................................................................................	32
DTD.......................................................................................................................................................................................................................	32
Уровни соответствия .........................................................................................................................................................................................	33
Конверсия ............................................................................................................................................................................................................	34
Надстройки ...................................................................................................................................	34
XLL.......................................................................................................................................................................................................................	34
XSL .......................................................................................................................................................................................................................	35
Графика...................................................................	36
Вектор ...........................................................................................................................................	36
Вектор в Интернете............................................................................................................................................................................................	37
Растр .....................................................................................................................................................................................................................	38
На все четыре стороны......................................................................................................................................................................................	38
Цвета.....................................................................................................................................................................................................................	38
Палитры ...............................................................................................................................................................................................................	39
Системы представления цвета .........................................................................................................................................................................	39
Программирование..........................................................	40
JavaScript ......................................................................................................................................	40
Динамический HTML........................................................................................................................................................................................	40
Модульные технологии ................................................................................................................	41
Динамические страницы ..............................................................................................................	43
Глава II. Основы дизайна .........................................................................................	44
Как учиться дизайну..........................................................................................................................................................................................	45
Дизайн и «чужое творчество»..........................................................................................................................................................................	45
Материалы и инструменты...............................................................................................................................................................................	46
Пространственные отношения................................................	46
Размер...........................................................................................................................................	46
Относительность размера .................................................................................................................................................................................	47
Форма и размер...................................................................................................................................................................................................	47
Рис. 2............................................................................................................................................	47
Рис. 3............................................................................................................................................	48
Искусство выравнивания текста......................................................................................................................................................................	48
Рис. 4............................................................................................................................................	48
Цвет и размер......................................................................................................................................................................................................	48
Текстура и размер...............................................................................................................................................................................................	49
Рис. 5............................................................................................................................................	49
Пропорции ....................................................................................................................................	49
Рис. 6............................................................................................................................................	49
Золото и пластмасса...........................................................................................................................................................................................	49
Пропорций простота..........................................................................................................................................................................................	50
Рис. 7............................................................................................................................................	50
Микропропорции ...............................................................................................................................................................................................	50
Размещение ..................................................................................................................................	51
Одноуровневые элементы.................................................................................................................................................................................	51
Рис. 8............................................................................................................................................	52
Разноуровневые элементы................................................................................................................................................................................	53
Плотность......................................................................................................................................	53
Пол И характер ...................................................................................................................................................................................................	53
Плотность текста................................................................................................................................................................................................	54
В нужное время и в нужном месте..................................................................................................................................................................	54
Форма.....................................................................	55
Рис. 9............................................................................................................................................	55
Прямые .........................................................................................................................................	56

Рис. 10..........................................................................................................................................	56
Рис. 11..........................................................................................................................................	57
Рис. 12..........................................................................................................................................	57

www.samouchiteli.ru

Дизайн Пизанской башни .................................................................................................................................................................................	57
Прямоугольники ...........................................................................................................................	58
Круги и закругления.....................................................................................................................	59
Рис. 14..........................................................................................................................................	60
Кривые Безье................................................................................................................................	60
Рис. 15..........................................................................................................................................	61
Бесформенность ...........................................................................................................................	61
Рис. 16..........................................................................................................................................	61
Рис. 17..........................................................................................................................................	62
Цвет...............................................................................................................................................	62
Рис. 18..........................................................................................................................................	63
Как устроен цвет...........................................................................................................................	63
Рис. 19..........................................................................................................................................	64
Прогулка по цветовому кругу.......................................................................................................	65
Ну и что?..............................................................................................................................................................................................................	66
Главные цвета .....................................................................................................................................................................................................	66
Восприятие цвета ...............................................................................................................................................................................................	66
Сочетаемость цветов .........................................................................................................................................................................................	67
Рис. 20..........................................................................................................................................	68
Рис. 21..........................................................................................................................................	68
Текст и фон ...................................................................................................................................	69
Рис. 22..........................................................................................................................................	69
Текстуры .......................................................................................................................................	70
Плоский цвет.......................................................................................................................................................................................................	71
Геометрические текстуры.................................................................................................................................................................................	72
Пиксельные текстуры........................................................................................................................................................................................	72
Рис. 25..........................................................................................................................................	72
Фотографические текстуры..............................................................................................................................................................................	72
Рис. 26..........................................................................................................................................	73
Материальные текстуры...............................................................................................................	73
Шрифт и текст.............................................................	74
Элементы шрифта.........................................................................................................................	75
Гарнитура, начертание, шрифт ........................................................................................................................................................................	75
Systema naturae....................................................................................................................................................................................................	75
Виды начертаний................................................................................................................................................................................................	76
Рис. 27..........................................................................................................................................	76
Шрифты и время...........................................................................................................................	76
Рис. 29..........................................................................................................................................	77
Рис. 30..........................................................................................................................................	78
Рис. 31..........................................................................................................................................	78
Переходные шрифты .........................................................................................................................................................................................	79
Новая антиква .....................................................................................................................................................................................................	79
Рис. 32..........................................................................................................................................	79
Кларендон............................................................................................................................................................................................................	79
Новые рубленые .................................................................................................................................................................................................	80
Маятник гуманизма ...........................................................................................................................................................................................	80
Рис. 33..........................................................................................................................................	80
Рис. 34..........................................................................................................................................	81
Рис. 35..........................................................................................................................................	81
Подбор Шрифтов ...............................................................................................................................................................................................	82
Единство противоположностей .......................................................................................................................................................................	82
Слишком декоративные шрифты ....................................................................................................................................................................	83
Развивая тему......................................................................................................................................................................................................	83
Шрифты и названия...........................................................................................................................................................................................	84
Рис. 36..........................................................................................................................................	84
Параметры Набора...........................................................................................................................................................................................	84
Кегль.....................................................................................................................................................................................................................	85
Прописные и строчные......................................................................................................................................................................................	85
Интервалы ...........................................................................................................................................................................................................	86
Рис. 37..........................................................................................................................................	86
Рис. 38..........................................................................................................................................	87
Выравнивание и отступы ..................................................................................................................................................................................	88
Размещение .........................................................................................................................................................................................................	88
Рис. 39..........................................................................................................................................	89
Чья случайность лучше? ...................................................................................................................................................................................	89
Цвет ......................................................................................................................................................................................................................	90
Текст как текстура..............................................................................................................................................................................................	90
Единство..................................................................	90

Content is king......................................................................................................................................................................................................	91
Академический стиль ........................................................................................................................................................................................	91

www.samouchiteli.ru

В полный рост.....................................................................................................................................................................................................	93
Форма ...................................................................................................................................................................................................................	93
Размещение .........................................................................................................................................................................................................	93
Цвет ......................................................................................................................................................................................................................	93
Шрифт ..................................................................................................................................................................................................................	93
Текстура...............................................................................................................................................................................................................	94
Баланс....................................................................	94
Центр масс системы...........................................................................................................................................................................................	94
Правило рычага ..................................................................................................................................................................................................	95
Рис. 40..........................................................................................................................................	95
Контраст..................................................................	96
Контраст — это продолжение единства другими средствами ...................................................................................................................	96
Одномерный контраст......................................................................................................................................................................................	96
Многомерный контраст.....................................................................................................................................................................................	97
Рис. 41..........................................................................................................................................	97
Рис. 42..........................................................................................................................................	98
Рис. 43..........................................................................................................................................	98
Аспекты контраста........................................................................................................................	99
Форма ...................................................................................................................................................................................................................	99
Размер...................................................................................................................................................................................................................	99
Расстояние...........................................................................................................................................................................................................	99
Расположение......................................................................................................................................................................................................	99
Цвет ......................................................................................................................................................................................................................	99
Текстура...............................................................................................................................................................................................................	99
Шрифт ...............................................................................................................................................................................................................	100
Динамика.................................................................	100
Рис. 44........................................................................................................................................	101
Динамика явная ...............................................................................................................................................................................................	101
Ветер по Гауссу ...............................................................................................................................................................................................	101
Динамика совсем явная..................................................................................................................................................................................	102
Динамика неявная ...........................................................................................................................................................................................	102
Рис. 45........................................................................................................................................	103
Нюансировка..............................................................	103
Пространственные отношения......................................................................................................................................................................	104
Цвет ...................................................................................................................................................................................................................	104
Шрифт ...............................................................................................................................................................................................................	105
Глава III. Дизайн веб-сайтов ..................................................................................	105
Преграды и препоны.......................................................................................................................................................................................	105
От общего к частному ....................................................................................................................................................................................	106
Типы сайтов..............................................................	106
Первый шаг ......................................................................................................................................................................................................	107
Рис. 46........................................................................................................................................	107
В мире .org........................................................................................................................................................................................................	107
Скорей любите нас..........................................................................................................................................................................................	108
Бесплатный сыр...............................................................................................................................................................................................	109
Устройство сайта.........................................................	109
Неупорядоченный континуум ....................................................................................................	110
Топология сайта..........................................................................................................................	110
Рис. 47........................................................................................................................................	110
Распределение материала..........................................................................................................	111
Фреймы и окна.................................................................................................................................................................................................	112
Первая страница.........................................................................................................................	113
Всплеск и вскрик.............................................................................................................................................................................................	113
Формат страницы..........................................................	114
The frame of reference.................................................................................................................	114
Заметки о полях...............................................................................................................................................................................................	115
Во первых строках ..........................................................................................................................................................................................	115
У голубого экрана ...........................................................................................................................................................................................	116
Если тебе дадут линованную бумагу — пиши поперек ...........................................................................................................................	116
Ступеньки ригидности ................................................................................................................	116
Заглавия и заголовки.....................................................	118
Заглавие......................................................................................................................................	118
Заголовки: логика ......................................................................................................................	118
Заголовки: дизайн ......................................................................................................................	119
Разделители................................................................................................................................	120
Рис. 48........................................................................................................................................	120

Баннеры ......................................................................................................................................

120

www.samouchiteli.ru

Навигация................................................................	121
Общий обзор ...............................................................................................................................	121
Семантика ...................................................................................................................................	122
Дизайн.........................................................................................................................................	123
Рис. 49........................................................................................................................................	123
Разновидности одинаковости........................................................................................................................................................................	123
По ту сторону кнопок .....................................................................................................................................................................................	124
Символы и метафоры .....................................................................................................................................................................................	124
Рис. 50........................................................................................................................................	125
Особые случаи .................................................................................................................................................................................................	125
Динамическая навигация...........................................................................................................	126
Рис. 51........................................................................................................................................	126
Блоки текста.............................................................	127
Кегль ...........................................................................................................................................	127
Шрифт .........................................................................................................................................	128
Коренные шрифты ..........................................................................................................................................................................................	129
Все шрифты ношу с собой.............................................................................................................................................................................	129
Осторожно: кириллица...................................................................................................................................................................................	130
Цвет.............................................................................................................................................	131
Ссылки ........................................................................................................................................	131
Другие параметры ......................................................................................................................	132
When all else fails ........................................................................................................................	133
Правила набора текстов .............................................................................................................	134
Расстановка пробелов.....................................................................................................................................................................................	134
Неразрываемые пробелы................................................................................................................................................................................	134
Текстовые выделения .....................................................................................................................................................................................	135
Спецсимволы ...................................................................................................................................................................................................	135
Позиционирование.........................................................	136
Таблицы и распорки ...................................................................................................................	136
Дурная наследственность ..............................................................................................................................................................................	137
Двойное дно .....................................................................................................................................................................................................	138
Белое место.......................................................................................................................................................................................................	138
Фэйсом об тэйбл..............................................................................................................................................................................................	139
Рис. 52........................................................................................................................................	140
Позиционирование в CSS ...........................................................................................................	140
Глава IV. Веб-графика.............................................................................................	141
Техника..................................................................	142
Палитра и диффузия ..................................................................................................................	142
Цветовые границы......................................................................................................................	144
Рис. 55........................................................................................................................................	144
Рис. 56........................................................................................................................................	145
Экранный анти-алиасинг ...............................................................................................................................................................................	145
Из-под пятницы суббота ................................................................................................................................................................................	145
Пиксельные эффекты.................................................................................................................	146
ОПТИМИЗАЦИЯ ...........................................................................................................................	147
JPEG...................................................................................................................................................................................................................	147
Взболтать и настоять ......................................................................................................................................................................................	148
Чудное мгновенье ...........................................................................................................................................................................................	149
Рис. 57........................................................................................................................................	149
Blow up........................................................................................................................................	149
Функции..................................................................	150
Выставочная графика.................................................................................................................	150
Фоны ...........................................................................................................................................	150
Как не надо делать фон ..................................................................................................................................................................................	151
Прогладить с изнанки.....................................................................................................................................................................................	151
Рис. 58........................................................................................................................................	152
Рис. 59........................................................................................................................................	153
Одномерные фоны ..........................................................................................................................................................................................	153
Одним куском ..................................................................................................................................................................................................	154
Рис. 60........................................................................................................................................	154
ЛОГОТИПЫ ..................................................................................................................................	155
Диалектика формы.....................................................................................................................	155
На единицу площади ......................................................................................................................................................................................	156
Про что картинка?...........................................................................................................................................................................................	157
Символ и слово................................................................................................................................................................................................	157
Аспекты логотипа ...........................................................................................................................................................................................	158
Форма ................................................................................................................................................................................................................	158

Рис. 63........................................................................................................................................	158
Рис. 64........................................................................................................................................	159

www.samouchiteli.ru

Рис. 65........................................................................................................................................		159
Шрифт ...............................................................................................................................................................................................................		160
Рис. 66........................................................................................................................................		160
Текстура............................................................................................................................................................................................................		161
Рис. 67........................................................................................................................................		162
Баннеры ......................................................................................................................................		162
Сколько натикало? ..........................................................................................................................................................................................		162
Форматы............................................................................................................................................................................................................		163
В нужное время и в нужном месте...............................................................................................................................................................		163
Слева при входе...............................................................................................................................................................................................		164
Рис. 68........................................................................................................................................		166
В начале было что-то......................................................................................................................................................................................		166
Собственная гордость.....................................................................................................................................................................................		167
Рис. 69........................................................................................................................................		167
Рис. 70........................................................................................................................................		167
Рис. 71........................................................................................................................................		168
Удар ниже пояса..............................................................................................................................................................................................		168
Смена поколений.............................................................................................................................................................................................		169
На килограмм живого веса ............................................................................................................................................................................		169
Acknowledgements...........................................................................................................................................................................................		169
Рис. 72........................................................................................................................................		170
Визуал.........................................................................................................................................		170
Рынок визуалов................................................................................................................................................................................................		170
Рис. 74........................................................................................................................................		171
Приемы...................................................................		172
Трехмерность..............................................................................................................................		172
Император иллюзий........................................................................................................................................................................................		172
Пластмассовый призрак .................................................................................................................................................................................		173
Скульптура или барельеф ..............................................................................................................................................................................		173
Рис. 75........................................................................................................................................		174
Искусство искажений .................................................................................................................		174
Нетекстурирующие эффекты ........................................................................................................................................................................		175
Текстурирующие эффекты ............................................................................................................................................................................		177
Рис. 76 «Большой,	но за пять или маленький, но за три» .....................................................	177
Примеры....................................................................................................................		178
www.kirsanov.com.........................................................		179
Логотип .......................................................................................................................................		179
Рис. 77 Генезис логотипа..........................................................................................................		180
Рис. 78 (см. цветную вкладку, стр. 335) ...................................................................................		180
Цветовая схема...........................................................................................................................		181
Входные цвета .................................................................................................................................................................................................		181
Рис. 79 (см. цветную вкладку, стр. 335)....................................................................................		181
Информационные цвета .................................................................................................................................................................................		182
Первая страница.........................................................................................................................		182
Рис. 80........................................................................................................................................		183
Карты на стол...................................................................................................................................................................................................		183
Навигация ...................................................................................................................................		184
Рис. 81........................................................................................................................................		184
Рис. 82........................................................................................................................................		185
www.quiotix.com..........................................................		185
Логотип .......................................................................................................................................		186
Рис. 83........................................................................................................................................		186
Рис. 84........................................................................................................................................		187
Рис. 85........................................................................................................................................		187
Первая страница.........................................................................................................................		187
Рис. 86 Эволюция	буквы «Q» ................................................................................................	188
Рис. 87 (см. Цветную вкладку, стр. 336) ...................................................................................		188
Рис. 88 (см. цветную вкладку, стр. 336)....................................................................................		188
Рис. 89........................................................................................................................................		189
Внутренние страницы.................................................................................................................		189
Рис. 90 (см. цветную вкладку, стр. 336)....................................................................................		189
Рис. 91........................................................................................................................................		190
Miscellanea ..................................................................................................................................		190
Рис. 92........................................................................................................................................		190
Рис. 93........................................................................................................................................		191
Галерея..................................................................		191

www.samouchiteli.ru

1. www.avsi.com/avalanche/company/index.html..........................................................................................................................................		192
2. www.elliottdickens.com........................................................................................................................................................................		192
3. www.elliottdickens.com/browser.cgi ..............................................................................................................................................		192
4. www.finemagazine.com/fine1/music/torih.htm...........................................................................................................................		193
5. www.prophetcomm.com/iconoclast/................................................................................................................................................		193
6. www.metadesign.com...................................................................................................................................................................................		194
8. www.aboutus.miningco.com........................................................................................................................................................................		194
7. www.metadesign.com/metawho/index.htm ................................................................................................................................................		194
9. www.microsoft.com/license/opendrive/......................................................................................................................................................		195
10. www.splashtech.com ..................................................................................................................................................................................		195
11. www.supercede.com/prodserv/scfjava.html..............................................................................................................................................		196
12. www.wps.ru.................................................................................................................................................................................................		196
13. www.bdaweb.com.......................................................................................................................................................................................		197
14. www.capstonestudio.com...........................................................................................................................................................................		197
15. (Книги России 1) www.books.ru.........................................................................................................................................................		198
16. www.ideo.com/net3/ideo.htm...........................................................................................................................................................		199
17/ www.chess.ibm.сom/learn/html/e.html.........................................................................................................................................		199
18.www.tlg.com ................................................................................................................................................................................................		200
19. www.verso.com...........................................................................................................................................................................................		201
20. www.vivid.com...........................................................................................................................................................................................		202
Рис. 19........................................................................................................................................		202
Рис. 20........................................................................................................................................		202
Рис. 22 (к стр. 114).....................................................................................................................		203
Рис. 21........................................................................................................................................		203
Рис. 43........................................................................................................................................		203
Рис. 78........................................................................................................................................		203
Рис. 79........................................................................................................................................		203
Рис. 87........................................................................................................................................	(к стр. 318)	204
Рис. 88		204
Рис. 89	(к стр. 319)..................................................................................................................	205
Рис. 90	(к стр. 320)..................................................................................................................	205
Рис. 91	(к стр.321)...................................................................................................................	205
Рис. 92	(к стр. 322)...................................................................................................................	205

Индекс........................................................................................................................	205
Символы. .....................................................................................................................................................................................................	205
А(латиница). ...............................................................................................................................................................................................	206
в.....................................................................................................................................................................................................................	207
С....................................................................................................................................................................................................................	207
D....................................................................................................................................................................................................................	208
E ....................................................................................................................................................................................................................	208
F ....................................................................................................................................................................................................................	209
G....................................................................................................................................................................................................................	209
Н....................................................................................................................................................................................................................	209
I. ....................................................................................................................................................................................................................	210
J.....................................................................................................................................................................................................................	210
К. ...................................................................................................................................................................................................................	211
L. ...................................................................................................................................................................................................................	211
М ...................................................................................................................................................................................................................	211
N....................................................................................................................................................................................................................	211
O. ..................................................................................................................................................................................................................	212
Р ....................................................................................................................................................................................................................	212
Q....................................................................................................................................................................................................................	212
R....................................................................................................................................................................................................................	212
S. ...................................................................................................................................................................................................................	212
Т. ...................................................................................................................................................................................................................	213
U....................................................................................................................................................................................................................	213
V....................................................................................................................................................................................................................	213
W...................................................................................................................................................................................................................	213
X....................................................................................................................................................................................................................	215
Z. ...................................................................................................................................................................................................................	215
Б. ...................................................................................................................................................................................................................	217
В....................................................................................................................................................................................................................	218
Г. ...................................................................................................................................................................................................................	219
д.....................................................................................................................................................................................................................	220
Е. ...................................................................................................................................................................................................................	221
Ж...................................................................................................................................................................................................................	222
3.....................................................................................................................................................................................................................	222
И....................................................................................................................................................................................................................	222
К. ...................................................................................................................................................................................................................	223
Л....................................................................................................................................................................................................................	225
М. ..................................................................................................................................................................................................................	226
Н....................................................................................................................................................................................................................	227
О....................................................................................................................................................................................................................	228

www.samouchiteli.ru

П....................................................................................................................................................................................................................	229
Р.....................................................................................................................................................................................................................	231
С....................................................................................................................................................................................................................	232
Т. ...................................................................................................................................................................................................................	234
У....................................................................................................................................................................................................................	236
Ф. ..................................................................................................................................................................................................................	236
Х....................................................................................................................................................................................................................	237
Ц....................................................................................................................................................................................................................	237
Ч. ...................................................................................................................................................................................................................	238
Ш...................................................................................................................................................................................................................	238
Э....................................................................................................................................................................................................................	239
Я. ...................................................................................................................................................................................................................	239

оглавление

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.2HTML (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.3CSS (40) Принципы (41) Возможности (42) Модульный HTML (43) Режем по живому (44) Сборно- панельный сайт (44) Например (46)

1.4XML (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	Цвет (101) Как устроен цвет (103) Прогулка по цветовому кругу (105) Ну и что? (108) Главные
II.3
цвета (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) Бесплатный сыр

www.samouchiteli.ru

(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.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)

1

Предисловие

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

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

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

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

Большинство упоминаемых технологий должны быть (по крайней мере, по названию) знакомы

www.samouchiteli.ru

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

2

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

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

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

Примеры

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

3

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

Но главная причина все же не в этом. Если я пишу книгу о дизайне, я делаю это в предположении, что

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

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

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

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

Соглашения

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

4