Галерея

Этот раздел — не каталог URL-адресов, а альбом репродукций всех упоминавшихся ранее страниц, достойных внимания читателя и как примеры образцового дизайна, и как иллюстрации к обсуждавшимся в книге темам.

Изображение каждой страницы снабжено перечислением самых заметных особенностей ее дизайна со ссылками (но­мера страниц в скобках) на те разделы книги, где излагается соответствующий теоретический материал. Обратные ссыл­ки вида «пример такой-то» ведут из основного текста книги на номер в Галерее.

Автор, к сожалению, не может гарантировать, что по приведенным ни­же адресам вы найдете те самые страницы, чьи копии здесь приведены. За время, прошедшее с момента написания книги, дизайн этих страниц мог измениться, они могли переехать по другому адресу или вообще ис­чезнуть.

1. www.avsi.com/avalanche/company/index.html

Дизайн на основе прямоугольни­ков, прямоугольники с закруг­лениями (99); тонкие рамки без изменения фонового цвета и толстые рамки с заливкой (96); линии-разделители (93); неповторяющееся фоновое изо­бражение (236)

2. www.elliottdickens.com

Сплэш-страница (192) дизай­нерского сайта (182) пригла­шает пользователя привести окно броузера к определенным размерам (198), чтобы он мог оценить необычную конструк­цию следующих страниц (см. ниже)

3. www.elliottdickens.com/browser.cgi

Первая страница того же сай­та с большим фотографиче­ским визуалом (288), обрезан­ным краем окна и тем самым подсказывающим зрителю глав­ную особенность сайта — рас­положение страницы «лежа» с горизонтальной прокруткой вместо привычной вертикаль­ной (197); на этой и сле­дующих страницах черно-белые фотографии противопоставле­ны ярким, насыщенным цветам фона

325

4. www.finemagazine.com/fine1/music/torih.htm

Разноуровневые заголовки (202), скрепленные системой прямых линий в роли «вспомо­гательных построений» (94); подчеркивание вплотную к бук­вам как прием оформления тек­ста (94); широкий капитель­ный (126) шрифт с малень­кими засечками в сочетании с каллиграфическим курсивом (136); страница в открытом с помощью JavaScript окне фик­сированного размера без эле­ментов интерфейса броузера (199); фотографический фон с размывкой (300), выполняю­щий одновременно роль визуала страницы (288)

5. www.prophetcomm.com/iconoclast/

«Декадентская» текстура, имитирующая осыпание и де­градацию материала (122); парадоксальное стремление за­труднить чтение, чтобы сде­лать его более интересным, сходное с применением отри­цательного эмфазиса в заго­ловках (202); сложная ком­бинация растровых искажений (296)

326

6. www.metadesign.com

Контраст тесноты и даже частичного наложения в за­головке с разреженной ком­позицией страницы и обили­ем пустот (90); использован «новый гуманистический» ру­бленый шрифт Меtа, разра­ботанный основателем этой дизайн-студии Эриком Шпикерманном (133); размывка по Гауссу (299) помогает переве­сти текст заголовка на второй план восприятия

8. www.aboutus.miningco.com

Композиция с выраженным про­тивостоянием центра и пери­ферии стилизована под «диа­грамму»: наклонные (94) ли­нии «выносок», сознавая иро­нию приема (93), тактично не доходят до назначенных им фигур в «толпе», составленной из купленных в специализиро­ванном агентстве фотографий (76)

7. www.metadesign.com/metawho/index.htm

Горизонтальная линия в роли разделителя (93); локальные ссылки, ведущие от разделов длинного документа в его нача­ло (195); «выдернутая» цита­та (pull-out quote), сообщающая основную мысль раздела (228)

9. www.microsoft.com/license/opendrive/

Рисованная графика (23Э) в качестве визуала (288), интегрированная в заголовок внутренней страницы сайта (202) размывкой краев «на фо­тографический манер» (299)

10. www.splashtech.com

Если логотип фирмы Splash (англ. «всплеск») страдает излишней иллюстративностью в ущерб простоте и симво­лизму (267), то в визуале первой страницы (288) та же самая идея, реализованная с фотографическим реализмом (119), парадоксальным обра­зом превращается во впечатля­ющий символ, вокруг которого выстраиваются все остальные элементы

328

11. www.supercede.com/prodserv/scfjava.html

Неповторяющееся фоновое изо­бражение визуализирует «сило­вые линии» восприятия инфор­мации переднего плана (264); имитация типографского то­чечного растра позволяет фо­ну сохранить фотографическую размытость в GIF-файле с двухцветной палитрой (264); в графических кнопках панели навигации использован «гума­нистический» рубленый шрифт (133)

12. www.wps.ru

Прямоугольники с толстым контуром (97); последователь­ное скругление всех углов (99); «старый» доконструктивистский рубленый шрифт Гермес (130) в кнопках навигации; комбинация растровых эффек­тов (295) для имитации «под­порченной» черно-белой фото­графии

329

13. www.bdaweb.com

Серый и белый цвета тек­ста, контрастирующие с ярко-оранжевым в логотипе и слу­жебных элементах (116); на­ложение и цветовой кон­траст букв в логотипе (143); карта движений восприятия (167); принцип «отрицатель­ного эмфазиса» для заголовка страницы (202); интеграция фотографии размывкой краев (299); нюансы (1Т1): «l» в «international» выровнено по вер­тикальному краю «а» логоти­па, игнорируя «хвостик»; едва заметная тень, отходящая от оранжевой плашки логотипа, поддерживает диагональность композиции

14. www.capstonestudio.com

Простая по композиции сплэш-страница наглядно демонстри­рует принципы интеграции фо­тографики: монохромная, но с тоновым компонентом середи­на противопоставлена черно-белой периферии (297); тема прямых линий как вспомога­тельных построений (94)

330