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

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

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

ii

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

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

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

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

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

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

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

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

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

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

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

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

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

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

iii

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

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

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

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

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

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

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

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

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

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

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

Примеры.

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

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

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

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

Индекс (337)

Предисловие

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

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