- •Дмитрий кирсанов
- •Глава 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
- •Индекс Символы.
- •А(латиница).
Информационные цвета
Если не считать черный (в названии компании), сплэш-страница ограничена двумя I цветами — что, очевидно, является абсолютным минимумом для любой страницы. Поскольку к этому моменту уже было ясно, что белый цвет на сайте использоваться не будет, передо мной встала задача поиска третьего нейтрального цвета, на который бы пришлась основная нагрузка на информационно насыщенных страницах.
Оливковый цвет (#666633), которым залит фон на всем сайте за исключением сплэш-страницы, представляет собой дальнейший сдвиг в область желтого (Н = 60) и дальнейшее снижение насыщенности (S — 128). Хотя соблазн поискать для фона почти нейтральный, едва зеленоватый серый был велик, я все же решил не разбивать общую цветовую гамму сайта, своей насыщенностью компенсирующую темноватый колорит и узость тонового диапазона.
Однако на первой же странице сайта (www.kirsanov.com/main.html , рис. 79 на цветной вкладке) выяснилось, что цвета логотипа слишком активны и слишком прочно связаны друг с другом, чтобы играть сколько-нибудь заметную роль в композиции. За пределами сплэш-страницы эта цветовая пара годится разве что на роль акцента, украшения, второстепенного декоративного элемента.
Для информационной части страницы нужны как минимум три цвета, считая фоновый и черный. Поэтому одновременно с оливковым мне пришлось искать еще один цвет, для которого я в конце концов выбрал просто более светлый оттенок фонового цвета (#979774). Этот цвет используется для ссылок, горизонтальных линеек, заголовков и прочих вспомогательных элементов.
Таким образом, четыре зеленых цвета распадаются на две группы: насыщенную контрастирующую пару цветов в логотипе и пару совпадающих по тону, не слишком контрастных и насыщенных «информационных» цветов. Каждый цвет в этой системе знает свое место и свою роль, знает, как ему относиться к ближайшим и более отдаленным
310
соседям. Задача построения логичной и уравновешенной цветовой системы была, как мне кажется, решена удовлетворительно.
Цветовая схема сайта была тем его аспектом, который вызвал наибольший интерес у его посетителей, — чьи комментарии, надо признаться, не были единодушными. Большинству откликнувшихся цвета понравились, и некоторые даже называли цветовое решение главным достоинством моего дизайна. Другие, однако, жаловались на трудность чтения текста на довольно-таки темном фоне (особенно это относится к названию сайта на сплэш-странице) и общий «тусклый и однообразный» колорит. В свою защиту я могу сказать, что в первую очередь мною двигало стремление как можно дальше уйти от доминирующей в любительском веб-дизайне цветовой пестроты и безвкусицы, — и, даже если я зашел в этом слишком далеко, сайт, надеюсь, все же может быть поучителен своей цветовой бескомпромиссностью.
Первая страница
Возвращаясь к обсуждавшимся на стр. 182 проблемам стиля и отношения к пользователю, я прежде всего должен признаться, что известное противоречие между прикладной функцией сайта (привлечение заказчиков) и эстетическими представлениями его автора не стало в данном случае поводом к каким бы то ни было конфликтам. Мне не приходилось как-либо сдерживать «творческие порывы» или бояться опасаясь отпугнуть посетителей художественной «заумью». Если с эстетической точки зрения сайт этот (как и любой другой) можно критиковать, то по крайней мере своим отношением к зрителю и читателю я старался не подавать повода к малейшему недовольству.
Как это ни странно, но именно тот факт, что это мой собственный проект, за который мне ни перед кем не нужно отчитываться, заставлял меня быть особенно осторожным в выборе художественных средств и нетерпимым ко всему, что может быть воспринято как дешевая «загадочность» или претенциозность. Интересен в этом отношении текстовый аспект сайта. Большинство сайтов, имеющих хоть какое-то отношение к дизайну, отличаются чрезвычайным немногословием и нарочитой недоговоренностью формулировок. Навигация на таких сайтах, как правило, и без того затрудненная нестандартным дизайном, превращается иногда в утомительную головоломку из-за невозможности понять, на какой странице вы находитесь и что хочет сказать ею автор сайта. Психология «хэппенинга», уместная в объектах чистого искусства, превращается в позу в том случае, когда работа дизайнера должна выполнять не только эстетическую функцию.
311
Рис. 80
Четырехчленная структура страницы иллюстрируется четырьмя фотографическими визуалами, сменяющими друг друга «перекатыванием» (стр. 213)