
- •Дмитрий кирсанов
- •Глава I. Техминимум 18
- •Глава II. Основы дизайна 56
- •Глава III. Дизайн веб-сайтов 131
- •Глава IV. Веб-графика 175
- •Оглавление
- •II.1 Пространственные отношения (78)
- •II.10 Нюансировка (172)
- •V.3 Галерея (323)
- •Предисловие
- •Что здесь есть и чего здесь нет
- •Примеры
- •Соглашения
- •Сверим часы
- •Как выбрать дизайнера
- •Почему эта тема?
- •Сам себе Гутенберг
- •Глава I. Техминимум
- •Кодировки текста
- •Однобайтовые кодировки
- •Семейство 8859
- •Двухбайтовые кодировки
- •История
- •В начале был sgml
- •Прикладная философия
- •Золотой век
- •Html плюс
- •Идолы рынка
- •Бяки и буки
- •Три, четыре...
- •Синтаксис
- •Подстановки
- •Минимальный документ
- •Текстовая разметка
- •Ссылки и привязки
- •Изображения и объекты
- •Национальные особенности
- •Согласование кодировок
- •Среды и доступность
- •Доступность: таблицы
- •Как писать alt-тексты
- •Доступность: изображения-карты
- •Мета-данные и поиск
- •Мертвая зона
- •Принципы
- •Возможности
- •Модульный html
- •Режем по живому
- •Сборно-панельный сайт
- •Например
- •Синтаксис
- •Уровни соответствия
- •Конверсия
- •Надстройки
- •Графика
- •Вектор в Интернете
- •На все четыре стороны
- •Палитры
- •Системы представления цвета
- •Программирование
- •Динамический html
- •Модульные технологии
- •Динамические страницы
- •Глава II. Основы дизайна
- •Как учиться дизайну
- •Дизайн и «чужое творчество»
- •Материалы и инструменты
- •Пространственные отношения
- •Относительность размера
- •Форма и размер
- •Искусство выравнивания текста
- •Цвет и размер
- •Текстура и размер
- •Пропорции
- •Золото и пластмасса
- •Пропорций простота
- •Микропропорции
- •Размещение
- •Одноуровневые элементы
- •Разноуровневые элементы
- •Плотность
- •Пол и характер
- •Плотность текста
- •В нужное время и в нужном месте
- •Дизайн Пизанской башни
- •Прямоугольники
- •Круги и закругления
- •Кривые Безье
- •Бесформенность
- •Как устроен цвет
- •Прогулка по цветовому кругу
- •Главные цвета
- •Восприятие цвета
- •Сочетаемость цветов
- •Текст и фон
- •Текстуры
- •Плоский цвет
- •Геометрические текстуры
- •Пиксельные текстуры
- •Фотографические текстуры
- •Материальные текстуры
- •Шрифт и текст
- •Элементы шрифта.
- •Гарнитура, начертание, шрифт
- •Виды начертаний
- •Шрифты и время.
- •Переходные шрифты
- •Новая антиква
- •Кларендон
- •Новые рубленые
- •Маятник гуманизма
- •Подбор Шрифтов
- •Единство противоположностей
- •Слишком декоративные шрифты
- •Развивая тему
- •Шрифты и названия
- •Параметры Набора
- •Прописные и строчные
- •Интервалы
- •Выравнивание и отступы
- •Размещение
- •Чья случайность лучше?
- •Текст как текстура
- •Единство
- •Академический стиль
- •В полный рост
- •Размещение
- •Текстура
- •Центр масс системы
- •Правило рычага
- •Контраст
- •Контраст — это продолжение единства другими средствами
- •Одномерный контраст
- •Многомерный контраст
- •Аспекты контраста
- •Расстояние
- •Расположение
- •Текстура
- •Динамика
- •Динамика явная
- •Ветер по Гауссу
- •Динамика совсем явная
- •Динамика неявная
- •Нюансировка
- •Пространственные отношения
- •Глава III. Дизайн веб-сайтов
- •Преграды и препоны
- •От общего к частному
- •Типы сайтов
- •Первый шаг
- •В мире .Org
- •Скорей любите нас
- •Бесплатный сыр
- •Устройство сайта
- •Неупорядоченный континуум
- •Топология сайта
- •Распределение материала
- •Фреймы и окна
- •Первая страница
- •Всплеск и вскрик
- •Формат страницы
- •Заметки о полях
- •Во первых строках
- •У голубого экрана
- •Если тебе дадут линованную бумагу — пиши поперек
- •Ступеньки ригидности
- •Заглавия и заголовки
- •Заглавие
- •Заголовки: логика
- •Заголовки: дизайн
- •Разделители
- •Баннеры
- •Навигация
- •Общий обзор
- •Семантика
- •Разновидности одинаковости
- •По ту сторону кнопок
- •Символы и метафоры
- •Особые случаи
- •Динамическая навигация
- •Блоки текста
- •Коренные шрифты
- •Все шрифты ношу с собой
- •Осторожно: кириллица
- •Другие параметры
- •Правила набора текстов
- •Расстановка пробелов
- •Неразрываемые пробелы
- •Текстовые выделения
- •Спецсимволы
- •Позиционирование
- •Дурная наследственность
- •Двойное дно
- •Белое место
- •Фэйсом об тэйбл
- •Позиционирование в css
- •Глава IV. Веб-графика
- •Техника
- •Палитра и диффузия
- •Цветовые границы
- •Экранный анти-алиасинг
- •Пиксельные эффекты
- •Оптимизация
- •Взболтать и настоять
- •Чудное мгновенье
- •Функции
- •Выставочная графика
- •Как не надо делать фон
- •Прогладить с изнанки
- •Одномерные фоны
- •Одним куском
- •Логотипы
- •Диалектика формы
- •На единицу площади
- •Про что картинка?
- •Символ и слово
- •Аспекты логотипа
- •Текстура
- •Баннеры
- •Сколько натикало?
- •Форматы
- •В нужное время и в нужном месте
- •Слева при входе
- •В начале было что-то
- •Собственная гордость
- •Удар ниже пояса
- •Смена поколений
- •На килограмм живого веса
- •Рынок визуалов
- •Трехмерность
- •Император иллюзий
- •Пластмассовый призрак
- •Скульптура или барельеф
- •Искусство искажений
- •Нетекстурирующие эффекты
- •Текстурирующие эффекты
- •Логотип
- •Цветовая схема
- •Входные цвета
- •Информационные цвета
- •Первая страница
- •Карты на стол
- •Навигация
- •Логотип
- •Первая страница
- •Внутренние страницы
- •Галерея
- •15. (Книги России 1) www.Books.Ru
- •Индекс Символы.
- •А(латиница).
Правило рычага
Эта стройная теория осложняется множеством факторов. Прежде всего, центр равновесия редко кажется расположенным посередине между двумя объектами — обычно он смещен в сторону того, который кажется нам тяжелее и компактнее (т.е. плотнее). Наиболее динамично и интересно выглядят именно те композиции, в которых баланс достигается не симметричными и равными по плотности группами объектов, а равновесием тяжелого «ядра» и асимметрично расположенной, менее плотной «периферии» . Взгляните, к примеру, на рис. 15 на стр. 99:
158
балансировка здесь происходит по диагонали, так что плотный верхний правый угол уравновешивает весь легкий, разреженный низ композиции. Центр равновесия в данном случае никак не выделен, его положение можно указать лишь приблизительно.
Во многих случаях, напротив, выгодно визуализировать центр баланса, сделать его активным участником композиционных отношений. Для этого достаточно поместить неподалеку от предполагаемого центра баланса некий третий объект, желательно с иным доминирующим аспектом плотности, — центр моментально сместится и «прилипнет» к этому новому объекту. Довольно трудно уловить момент, когда третий объект, удаляясь от исходного центра равновесия, перестанет перетягивать центр на себя и превратится из «оси» в один из «рычагов» системы.
Рассмотрим небольшой пример. На сайте books.ru (стр. 330) темно-синяя вертикальная полоса слева вводит сильную асимметрию и нуждается в противовесе. Однако поскольку эта полоса занимает лишь около четверти ширины всей страницы, противовесу этому совсем не обязательно быть таким же тяжелым, как и сама полоса. Открытое еще Архимедом правило рычага позволяет ограничиться легким горизонтальным разделителем, смещенным к правому краю страницы (рис. 40). Центр равновесия здесь вычисляется совсем не по законам физики; его стягивает на себя граница синего и белого, — т. е. правый край синей полосы, вообще представляющий собой самую сильную вертикаль в композиции.
В этом примере, пожалуй, разумнее говорить не о плотности и равновесии цвета вообще, а об отдельном балансе синего, который имеет в этой композиции не центр, а, скорее, вертикальную ось равновесия. Второй главный цвет на странице — оранжевый — сбалансирован совсем по-иному: яркий, тяжелый логотип в левом верхнем углу уравновешивается несколькими легкими пятнами оранжевых ссылок и заголовков на странице, а также бледной и размытой (и не совсем оранжевой) полосой с фотографией книжной полки. Опять-таки вопреки физическим законам оранжевый круг с черным полумесяцем в логотипе становится в сознании воспринимающего центром «оранжевого равновесия» — и именно поэтому он помещен точно на оси равновесия синего.
Рис. 40
Тяжелая,
но компактная темная полоса по левому
краю страниц books.ru
(пример
15)
уравновешивается
легкой, но вынесенной далеко вправо
асимметричной линейкой — разделителем
блоков текста (значком
на физических чертежах обозначают
центр масс)
159
В более сложных случаях центры равновесия разных аспектов могут не совпадать. При этом смещение по одному аспекту должно компенсироваться противоположным смещением по другому, и аспекты эти должны быть как-то связаны между собой (как связаны, например, пары контрастных цветов или шрифтов). Центр масс «второго порядка», образованный центрами масс разных аспектов композиции, сам может быть расположен достаточно близко к геометрическому центру страницы (тогда композиция кажется нам симметричной, хотя бы даже о симметрии в математическом смысле речи не шло) или, наоборот, довольно далеко от него (тогда страница кажется резко асимметричной — но притом все же сбалансированной).
Наконец, при балансировке всей страницы и любого ее участка надо обязательно принимать во внимание силу тяжести — силу, в нашем сознании не менее всемирную, чем в физике (и направленную, разумеется, сверху вниз). Мы уже видели, что центр равновесия композиции логично уподобить центру масс тела, — что позволяет понять, почему некоторые композиции кажутся нам легкими и воздушными (центр масс у них смещен вверх относительно геометрического центра), а другие тяжелыми (центр масс смещен вниз).
Все приведенные выше рассуждения в полной мере относятся и к дизайну веб-страниц. Однако нужно учитывать, что средняя страница не видна в окне броузера вся целиком, поэтому сильно разнесенные по вертикали элементы уже не могут взаимодействовать и уравновешивать друг друга. Высоту окна, в котором будет рассматривать вашу страницу пользователь, заранее предсказать невозможно, но вы должны сделать все от вас зависящее, чтобы баланс композиции не нарушался даже при минимальных размерах окна (стр. 193). Частью инстинктивно, частью сознательно большинство веб-дизайнеров решают эту проблему тем, что пользуются горизонтальными отношениями баланса намного активнее, чем вертикальными.