- •Дмитрий кирсанов
- •Глава 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
- •Индекс Символы.
- •А(латиница).
Текст как текстура
Сходство этих двух слов не случайно. Текстура, определенная как форма, сложность которой превышаетет возможности одномоментного восприятия, находит в тексте свое самое яркое воплощение. Если не углубляться сразу же в чтение, а окинуть страницу беглым, «расфокусированным» взглядом, блоки текста предстанут перед вами как формы (стр. 91), заполненные специфической текстурой (стр. 116) серого цвета определенной яркости (стр. 101). (Разумеется, серым этот цвет будет только для черного текста на белом фоне или наоборот.)
Понятно, что параметры цвета и текстуры текстовых блоков зависят от выбора шрифта, начертания и всех тех параметров набора, о которых мы только что говорили. Каждый шрифт имеет свою текстуру, свой характерный узор — со своим собственным соотношением крупного и мелкого, с доминирующим направлением (вертикальным, горизонтальным, наклонным). Свойства эти обязательно должны учитываться при анализе текстурного решения страницы. Так, текстуру с мелкими четкими деталями не только нельзя использовать как фон для текста мелким кеглем (это очень затруднит чтение), но и лучше не помещать рядом с текстом — маловероятно, чтобы отчетливо различные, но близкие по активности текстуры гармонировали друг с другом (см. также стр. 120).
Главное свойство текстуры текста — это ее плотность, насыщенность, уровень серого. Этот параметр сильно зависит от кегля (мелкий шрифт кажется темнее), интерлиньяжа и выбора начертания шрифта. Чтобы не вводить отвлекающих темных пятен, для выделений в тексте лучше пользоваться не полужирным, а курсивом или (в русских текстах) разрядкой.
Варьирование плотности текстовых блоков позволяет разнообразить ритм восприятия и эффективно балансировать композицию. Но здесь, как и во всем остальном, нужно соблюдать принцип достаточного различия (стр. 153) — разница в плотности элементов должна бросаться в глаза, а небольшие, «подгоночные» вариации, скажем, интерлиньяжа
149
в двух соседних абзацах при сохранении шрифта и всех остальных параметров недопустимы.
Единство
Возможно, эту главу логичнее было бы начать с обзора общих принципов дизайна и только потом перейти к рассказу о материалах, из которых строится дизайн-композиция. Я поменял эти две части местами прежде всего для того, чтобы избежать беспредметности в теоретических рассуждениях. Почти все обсуждаемые ниже принципы уже упоминались, когда речь шла о форме, цвете, текстуре, шрифте; здесь нам нужно будет лишь обобщить сказанное и проиллюстрировать некоторыми примерами.
Самый важный, на мой взгляд, принцип, с которого я хотел бы начать, — это принцип единства, целостности и экономии средств. Формулировки этого принципа многочисленны и разнообразны: тут и «талант — это прежде всего чувство меры», и «не вводи лишних сущностей», и даже «висящее на стене ружье должно выстрелить». Все это — об одном и том же: всегда старайтесь пользоваться только тем, что уже введено в вашу композицию, экономьте, одергивайте себя и никогда не старайтесь добавить украшений по принципу «чтобы повеселее смотрелось». Коротко говоря, "если можешь не писать — не пиши».
Принцип этот удивителен тем, что необычайно плодотворен — несмотря на то, что формулировка его абсолютно
отицательна (т. е. говорит лишь о том, чего делать не надо).
Я хорошо понимаю, что подчас воздержание тяжелее любой работы — да и просто обидно запрещать себе делать то, что ты, как тебе кажется, умеешь делать не хуже других. Но факт остается фактом: только научившись видеть — и создавать — красоту простоты и одинаковости, можно позволить себе разнообразие и «поэтические вольности».
Таким образом, важнее всего этот принцип именно для начинающих дизайнеров — хотя, увы, как раз они чаще всего против него и грешат. Вот еще две подходящих к случаю сентенции, за резкость которых я заранее прошу прощения, но привести которые все же хочу: «не зная
150
языка, лучше помалкивать» или даже «молчи — за умного
сойдешь».
Content is king
Хорошо, скажете вы, но если ничего нельзя, то что же тогда можно? Чем пользоваться для оформления заголовков, иллюстраций, кнопок навигации?
Нельзя же просто взять и покидать весь материал на страницу, не задумываясь о красоте?
Само собой, нельзя. Дизайн есть работа, и работа нелегкая — часто размещение и оформление материала отнимают больше времени, чем даже его написание. Но вы должны осознать одну простую вещь: введение в композицию нового элемента в подавляющем большинстве случаев требует не «украшения», т. е. усложнения его, а, наоборот, упрощения, «обтесывания», отбрасывания лишнего, приведения к общему знаменателю. Разнообразия у вас и так будет предостаточно: его обеспечит сам материал, который вам нужно оформить, — материал, в большинстве случаев олицетворяющий собой хаос первого дня творения.
Конечно, я преувеличиваю. На самом деле только исходный материал — сам текст и иллюстрации, а также связи и зависимости частей будущего сайта — и может быть источником той логики и структуры, которую вы должны сделать видимой средствами дизайна. Или, по крайней мере, так должно бы быть в идеале. На практике же дизайнеру сплошь и рядом, прежде чем приниматься за оформление, приходится выполнять несвойственную ему функцию редактора и приводить в систему ворох более чем разнородного материала. И точно так же как «приведение в систему» есть не что иное, как уменьшение до минимума числа категорий и групп, на которые разлагается содержимое, так и дизайн есть по большей части сведение к минимуму набора средств, нужных для оформления этого содержимого.