- •Дмитрий кирсанов
- •Глава 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 (см. цветную вкладку, стр. 336)
Сайт Quiotix невелик, большинство его страниц строятся по простейшей из возможных схем — логотип, навигационные ссылки, заголовок и основной текст. Поэтому следующая моя задача заключалась в создании «болванки» заголовка страницы, скоординированной с уже готовой навигационной панелью и блоком логотипа. При более внимательном изучении содержимого будущего сайта я понял, что идеальным решением было бы иметь на каждой странице по два заголовка, один из которых отмечал бы принадлежность страницы к одному из шести основных разделов (соответствующих шести кнопкам на навигационной панели), а второй относился бы непосредственно к тексту данной страницы.
Таким образом, мы имеем три элемента — два заголовка и строку навигационных ссылок, — которые нужно как-то расположить на «облачной» панели или в ее ближайших окрестностях. Очевидно, что если располагать заголовки друг под другом «в столбик», для всех трех элементов на панели уже не хватит места. После нескольких проб я решил вынести кнопки навигации вниз, убрав их с панели и изменив их цвет с черного на золотой (рис. 90 на цветной вкладке). Парадоксальным образом из элемента, отчетливо противопоставленного облачной панели, кнопки при этом превращаются в ее продолжение.
Вспомним наш анализ отношений контраста на стр. 161. Там мы пришли к выводу, что контрастная связь между элементами тем сильнее, чем больше у них противопоставленных друг другу (именно противопоставленных, а не просто несовпадающих) аспектов. Поэтому в данном случае вынос кнопок с навигационной панели не разрушает композицию, а, наоборот, делает ее более устойчивой и уравновешенной: к контрасту текста кнопок и текста в логотипе добавляются аспекты цвета (черный — золотой) и расположения (внутри панели — за ее пределами), а отношения между кнопками и самой панелью выводятся из аспекта цвета в более свойственный этой паре элементов (из-за их резко контрастных размеров) аспект расположения.
Возьмем теперь воображаемый циркуль, между ножек которого отложена только что найденная нами мера контраста текстовых элементов. Чтобы понять, как нужно оформлять два оставшихся элемента — заголовки раздела и текущей страницы, — достаточно отложить полученное «контрастное расстояние» от уже имеющегося элемента — кнопок
321
Рис. 91
(см. цветную вкладку, стр. 336)
навигации. Сделав это один раз, мы получаем аналог текста логотипа — только заглавные буквы, мелкий кегль, черный цвет (единственное отличие - набор вразрядку). Вторая «засечка» возвращает нас в исходную точку — к строчным буквам золотого цвета; правда, чтобы избежать тавтологии, от найденного набора параметров придется немного отступить, увеличив кегль шрифта (рис. 91 на цветной вкладке).
Согласно принципу асинхронности информационного и визуального эмфазиса в заголовках (стр. 202) мелкий шрифт должен применяться для заголовка текущей страницы, чья информационная актуальность выше, а более крупный — для «колонтитула» раздела, ибо последний, во-первых, повторяет текст одной из кнопок навигации, а во-вторых, сам повторяется на всех принадлежащих к этому разделу страницах и, следовательно, несет существенно меньше информации. В данном случае этот парадоксальный принцип («подчеркивай неважное») подкрепляется еще и тем практическим соображением, что длина заголовка страницы намного больше длины заголовка раздела и потому требует мелкого кегля.
Теперь нам остается решить последнюю задачу: как разграничить два заголовка, занимающих одну и ту же прямоугольную панель с фотографической подложкой? Обойтись без разграничения не получится, так как из-за контрастного форматирования и близкого расположения этих заголовков глаз все равно будет пытаться нащупать границу между ними. Из двух компонентов, составляющих панель, — белой подложки и полупрозрачной фотографии — разумно вторую оставить общей (объединение), а первую сохранить в фоне только одного из заголовков (противопоставление).
Сужение белой полосы влечет за собой уменьшение размера связанного с ней логотипа, чему также можно найти оправдание — на внутренних страницах сайта этому элементу лучше слегка уйти в тень, высвободив пространство для несущих информацию элементов (рис. 91). Такая конструкция панели хороша еще и тем, что разносит два сходных по оформлению текстовых элемента— название фирмы в логотипе и заглавие текущей страницы — по разным «этажам», не позволяя им конфликтовать.
Miscellanea
Мне осталось объяснить некоторые незначительные отличия рассмотренного выше дизайна от того, который вы найдете по адресу www.quiotix.com , и рассказать о некоторых особенностях реализации сайта.
Заметных изменений в дизайне было два. По просьбе клиента, которому показалось, что верхняя панель на внутренних страницах перетяжелена, я отнес строку кнопок навигации
322
Рис. 92
(см. цветную вкладку, стр. 336)
(a)
(б)
Рис. 93
QEWS и пет, или Об относительности странных и заглавных
в низ страницы, поместив ее над нижней «облачной» панелью (кстати, копирайт и адрес для связи еще на предыдущем этапе были с этой панели убраны и помещены под ней в виде HTML-текста).
Хотя отдельно взятая верхняя панель при этом проиграла, отношения в треугольнике «логотип — пара заголовков — кнопки навигации» растянулись тем самым на всю площадь страницы, сделав ее конструкцию более устойчивой.
Это, однако, повлекло за собой и изменение отношений в паре заголовков раздела и страницы на верхней панели. Центровка каждого из этих заголовков по вертикали внутри отведенной им полосы начала казаться слишком прямолинейным, неустойчивым именно благодаря своей симметрии решением. Чтобы страница в этой позе не заваливалась набок, мне пришлось отвести чуть в сторону одну из ее подпорок — а именно, уменьшить размер заголовка раздела и прибить его к правому верхнему углу отведенной для него полосы (рис. 92 на цветной вкладке).
Не обошлось и без конфликта между соображениями единообразия дизайна, требующими писать заголовки разделов только строчными буквами, и устоявшимся обозначением одного из продуктов фирмы — Quiotix Embedded Web Server, сокращенно QEWS. В споре между заказчиком, отстаивавшим привычное написание заглавными в колонтитуле соответствующего раздела сервера, и дизайнером, ратовавшим за единообразие строчных букв, был достигнут компромисс: заглавные «Q» и «Е» были уменьшены до размера строчных, а штрихи их пропорционально утолщены. Полученное в результате гибридное «QEWS» интересно сравнить с набранным натуральными строчными буквами заголовком «news» (рис. 93).
Как можно видеть на рис. 92 на цветной вкладке, внутритекстовые заголовки оформлены изменением начертания и цвета (желтый полужирный курсив), — но без изменения кегля, так как любой крупный шрифт вступил бы в немедленный конфликт с мелким шрифтом графического заголовка страницы. Узость колонки с текстом не позволяет использовать какие бы то ни было приемы верстки с горизонтальными втяжками, поэтому для списков с маркерами мне пришлось отказаться от использования тега UL, ограничившись добавлением в начало каждого абзаца списка маленького желтого графического прямоугольника. В конце 1997 года, когда создавался сайт, полагаться на использование CSS было еще рискованно; теперь для той же цели лучше было бы воспользоваться обычными тегами UL и LI, у которых с помощью CSS подавлены нежелательные отступы и маркеры по умолчанию заменены на графические вставки.
323