Веб-дизайн
Шрифт:
Рис. 92 (см. цветную вкладку, стр.336)
Рис. 93 QEWS и news, или об относительности строчных и заглавных
Это, однако, повлекло за собой и изменение отношений в паре заголовков раздела и страницы на верхней панели. Центровка каждого из этих заголовков по вертикали внутри отведенной им полосы
Не обошлось и без конфликта между соображениями единообразия дизайна, требующими писать заголовки разделов только строчными буквами, и устоявшимся обозначением одного из продуктов фирмы — Quiotix Embedded Web Server, сокращенно QEWS. В споре между заказчиком, отстаивавшим привычное написание заглавными в колонтитуле соответствующего раздела сервера, и дизайнером, ратовавшим за единообразие строчных букв, был достигнут компромисс: заглавные «Q» и «Е» были уменьшены до размера строчных, а штрихи их пропорционально утолщены. Полученное в результате гибридное «QEWS» интересно сравнить с набранным натуральными строчными буквами заголовком «news» (рис. 93).
Как можно видеть на рис. 92 на цветной вкладке, внутритекстовые заголовки оформлены изменением начертания и цвета (желтый полужирный курсив), — но без изменения кегля, так как любой крупный шрифт вступил бы в немедленный конфликт с мелким шрифтом графического заголовка страницы. Узость колонки с текстом не позволяет использовать какие бы то ни было приемы верстки с горизонтальными втяжками, поэтому для списков с маркерами мне пришлось отказаться от использования тега UL, ограничившись добавлением в начало каждого абзаца списка маленького желтого графического прямоугольника. В конце 1997 года, когда создавался сайт, полагаться на использование CSS было еще рискованно; теперь для той же цели лучше было бы воспользоваться обычными тегами UL и LI, у которых с помощью CSS подавлены нежелательные отступы и маркеры по умолчанию заменены на графические вставки.
Галерея
Этот раздел — не каталог URL-адресов, а альбом репродукций всех упоминавшихся ранее страниц, достойных внимания читателя и как примеры образцового дизайна, и как иллюстрации к обсуждавшимся в книге темам.
Изображение каждой страницы снабжено перечислением самых заметных особенностей ее дизайна со ссылками (номера страниц в скобках) на те разделы книги, где излагается соответствующий теоретический материал. Обратные ссылки вида «пример такой–то» ведут из основного текста книги на номер в Галерее.
Автор, к сожалению, не может гарантировать, что по приведенным ниже адресам вы найдете те самые страницы, чьи копии здесь приведены. За время, прошедшее с момента написания книги, дизайн этих страниц мог измениться, они могли переехать по другому адресу или вообще исчезнуть.
1 www.avsi.com/avalanche/company/index.html
Дизайн на основе прямоугольников, прямоугольники с закруглениями (99); тонкие рамки без изменения фонового цвета и толстые рамки с заливкой (96); линии–разделители (93); неповторяющееся фоновое изображение (236)
2 www.elliottdickens.com
Сплэш–страница (192) дизайнерского
3 www.elliottdickens.com/browser.cgi
Первая страница того же сайта с большим фотографическим визуалом (288), обрезанным краем окна и тем самым подсказывающим зрителю главную особенность сайта — расположение страницы «лежа» с горизонтальной прокруткой вместо привычной вертикальной (197); на этой и следующих страницах черно–белые фотографии противопоставлены ярким, насыщенным цветам фона
4 www.finemagazine.com/fine1/music/torih.htm
Разноуровневые заголовки (202), скрепленные системой прямых линий в роли «вспомогательных построений» (94); подчеркивание вплотную к буквам как прием оформления текста (94); широкий капительный (126) шрифт с маленькими засечками в сочетании с каллиграфическим курсивом (136); страница в открытом с помощью JavaScript окне фиксированного размера без элементов интерфейса броузера (199); фотографический фон с размывкой (300), выполняющий одновременно роль визуала страницы (288)
5 www.prophetcomm.com/iconoclast/
«Декадентская» текстура, имитирующая осыпание и деградацию материала (122); парадоксальное стремление затруднить чтение, чтобы сделать его более интересным; сходное с применением отрицательного эмфазиса в заголовках (202); сложная комбинация растровых искажений (29S)
6 http://www.metadesign.com/
Контраст тесноты и даже частичного наложения в заголовке с разреженной композицией страницы и обилием пустот (80); использован «новый гуманистический» рубленый шрифт Meta, разработанный основателем этой дизайн–студии Эриком Шпикерманном (133); размывка по Гауссу (299) помогает перевести текст заголовка на второй план восприятия
7 http://www.metadesign.com/metawho/index.htm