- •Дмитрий кирсанов
- •Глава 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
- •Индекс Символы.
- •А(латиница).
Текстура
Не будет большим преувеличением сказать, что текстура, в особенности негеометрическая и нерегулярная, есть само воплощение разбросанности, прямая противоположность единству. Поэтому и правила «техники безопасности» при работе с текстурами особенно строги. Плоский цвет и фотографические текстуры (стр. 118) хорошо сочетаются друг с другом, но материальные текстуры можно использовать только при действительной необходимости и не больше одной на всю композицию.
Кроме перечисленных здесь аспектов, необходимо ограничивать количество фокусов внимания композиции — элементов, которые выступают на фоне своего окружения или областей, к которым ведут силовые линии восприятия (стр. 167). Если же таких фокусов несколько, они должны очевидным образом выстраиваться в иерархическую систему, так чтобы на каждом уровне иерархии за внимание зрителя не боролись несколько элементов сразу.
Напоследок я хотел бы еще раз подчеркнуть важность принципа единства — самого простого по формулировке и, возможно, самого сложного для соблюдения. Настоящим дизайнером сможет стать только тот, кто на Собственном опыте убедился, что педантичное самоповторение, безжалостное втискивание материала в прокрустово ложе структуры и суровое подавление позывов к украшательству действительно дают лучшие результаты, чем поверхностно понимаемая «творческая свобода».
Баланс
Единство и баланс — два главных свойства, отличающих творения человека от созданий природы. Понимание этого было особенно сильно у людей эпохи античности — в те Времена, когда лишь тонкая пленка культуры покрывала первозданный хаос космоса, творения человека, чтобы
156
остаться в памяти поколений, должны были отличаться
совершенно особой строгостью, симметрией и сбалансированностью частей.
С веками понятие баланса становилось все расплывчатее и неопределеннее; все меньше оставалось в нем чистой геометрической симметрии и все больше — достаточно вольно понимаемой «соразмерности» и «уравновешенности». Собственно симметрия не особо популярна и сейчас, однако без более общего понятия баланса вы не обойдетесь ни в веб-дизайне, ни в любом другом визуальном искусстве. Есть великолепные композиции, производящие на неискушенного зрителя отчетливое впечатление асимметрии и даже хаотичности. Но хаотичность эта не естественная (см. также стр. 146), а художественная, тщательно выверенная, основанная на строгом выполнении законов баланса — пусть субъективных, но оттого не менее требовательных.
Центр масс системы
Что же это за законы? Прежде всего, давайте вспомним понятие плотности размещения материала, введенное в разделе о пространственных отношениях (стр. 89). Вспомнив физическое определение плотности как массы, деленной на объем, мы увидим, что о плотности можно говорить в нескольких разных смыслах — в зависимости от того, чему мы приписываем свойство иметь «массу».
В частности, элементы композиции могут различаться по информационной плотности (насыщенности информацией), плотности текстурной, цветовой, шрифтовой и т. д. К примеру, цветовая плотность в данной точке определяется тем, насколько ее цвет контрастен на фоне своего ближайшего окружения и на фоне общего, «среднего» цветового тона страницы, а также тем, насколько пестро, дробно или, наоборот, равномерно распределен цвет вблизи этой точки.
Карты разных видов плотности в одной и той же композиции, наложенные друг на друга, покажут нам совпадение пиков и провалов в одних частях и расхождение в других. Можно предположить, что самыми гармоничными кажутся такие композиции, в которых распределения плотности в разных аспектах не совпадают, но скоординированы друг с другом. Например, яркие цветовые пятна заголовков (вершины на карте цветовой плотности) не
157
совпадают с абзацами текста (сгустками плотности текстовой), но всегда занимают относительно них одно и то же положение.
При такой трактовке плотность становится величиной многомерной, а в композиции открывается множество интереснейших отношений, зависимостей и влияний. Так, помимо вершин и провалов плотности, большое значение имеет преимущественное направление (градиент) увеличения или уменьшения плотности — например, по одному из аспектов плотность может более или менее равномерно уменьшаться сверху вниз, а по другому — слева направо. Если большинство аспектов плотности достигают максимума в одной и той же точке, мы получаем ярко выраженный фокус, центр внимания. Важными элементами композиции становятся также линии резкого перехода плотности. Наконец, пара сгущений по какому-то из аспектов плотности, расположенных на некотором расстоянии друг от друга, вводят простейший вид баланса, т. е. равновесия относительно некоторого центра.
Для баланса, очевидно, нужны как минимум три действующих лица: два объекта, связанных балансным отношением, и центр масс, относительно которого они уравновешены. Центр этот может быть воображаемой точкой, а может и совпадать с каким-то видимым элементом. Добавление третьего объекта с его плотностью смещает центр баланса точно так же, как смещается центр масс системы из двух тел при добавлении третьего. Вся композиция становится уравновешенной тогда, когда сгустки плотности по каждому из «измерений» (по цвету, текстуре и т.д.) разнесены достаточно далеко, обеспечивая устойчивость соответствующих центров масс, а центры масс скоординированы и либо лежат в непосредственной близости друг от друга, либо сами образуют уравновешенную конфигурацию.