- •Дмитрий кирсанов
- •Глава 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
- •Индекс Символы.
- •А(латиница).
Пол и характер
Плотность размещения материала может быть весьма и весьма различной, и в значительной мере от нее зависят общий стиль и настроение, создаваемое композицией. Деловые, энергичные страницы требуют более тесного расположения, чем страницы художественного, развлекательного и вообще «неторопливого» характера. На последних пространство, разделяющее элементы, является полноправным элементом композиции, вносящим свой вклад в общее впечатление, и сравнительно много его (нередко значительно больше, чем несущих информацию элементов) именно потому, что, будучи пустым, оно требует некоторой компенсации количеством за свое отсутствующее качество.
Артистического склада страницы гораздо свободнее используют не только увеличенные промежутки между элементами, но и нулевые и даже отрицательные (т. е. сопряжение элементов вплотную и наложение их друг на друга). Часто на одной и той же странице можно видеть вплотную прижатые друг к другу заголовок и текст, с частично подстеленной под них фотографией, отделенные сравнительно большим
90
пространством от соседних элементов. Такой рваный, синкопический ритм плотности бывает совершенно необходим для свободного и выразительного звучания материала (пример 6, см. раздел «Галерея» на стр. 323).
Вообще говоря, чем больше пустого места окружает объект, тем более подчеркнуто, полновесно он участвует в композиции. Поэтому даже самая что ни на есть деловая страница, которая, казалось бы, не может себе позволить тратить пространство впустую, не обходится без вариаций плотности — разрежений и «дырок», необходимых для подчеркивания ключевых элементов (логотипа, заголовков).
Плотность текста
Особо стоит упомянуть об отношениях с окружающим пространством такого неизбежного в любой композиции элемента, как колонка текста. Программисты — авторы броузеров и других систем отображения текста на компьютере, по всей видимости, были уверены, что в книгах текст снабжается полями исключительно для удобства работы печатных машин и что в компьютере можно прекрасно обойтись без этого атавизма. На самом деле это, конечно, не так, и исследования показали, что пустые поля справа и слева от столбца текста совершенно необходимы для комфортного чтения. Вот почему первым шагом, ведущим в веб-дизайне от «академического» стиля по умолчанию (стр. 150), должно быть помещение текста в колонку с достаточной величины полями вокруг нее.
Плотность — одна из важнейших характеристик любой текстуры, в том числе и текстуры текста (стр. 148), а выбор расстояний между буквами — один из интереснейших случаев размещения одноуровневых элементов, о которых мы говорили на стр. 85. Поэтому любая композиция, включающая в себя хотя бы один абзац текста, может устанавливать сложные отношения между внутритекстовой плотностью и плотностью размещения элементов на странице.
Есть еще одна тонкость, касающаяся использования пустого пространства в веб-дизайне. Поскольку на компьютерах пользователей веб-страница проявляется постепенно, возникает из пустоты, сама пустота уже не может работать столь же активно, как в других визуальных жанрах. Если вы оставите на странице слишком большой пустой интервал, расположенный в непривычном месте, многие зрители будут подсознательно ожидать появления в этом месте какого-то элемента, который просто еще не подошел из сети, — и когда они поймут, в чем был ваш истинный замысел, впечатление будет уже подпорчено (см. также стр. 170).