Символы

Индекс

Www.vivid.com

Www.verso.com

Www.tlg.com

Книги России 1) www.books.ru

Www.capstonestudio.com

Www.bdaweb.com

Www.wps.ru

Www.splashtech.com

Www.aboutus.miningco.com

Www.metadesign.com

Www.elliottdickens.com

Галерея

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

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

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

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

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

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

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); сложная ком­бинация растровых искажений (296)

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

Композиция с выраженным про­тивостоянием центра и пери­ферии стилизована под «диа­грамму»: наклонные (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)

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

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

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

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

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

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

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

16. www.ideo.com/net3/ideo.htm

Регулярная решетка контрас­тирует с псевдослучайной разбросанностью содержимого клеток (87); почти монохром­ная гамма близких по то­ну синих во всех элементах дизайна, кроме нарочито яр­ких разноцветных фотографий (111); «лежачее» расположе­ние страницы (см. также при­мер 3) подчеркнуто горизон­тальной размывкой заголовка «IDEO» вверху (300); навига­ционная панель слева построе­на на основе общего для всех кнопок размытого фотографи­ческого фона (210)

17/ www.chess.ibm.сom/learn/html/e.html

Сбалансированная цветовая гамма, построенная на кон­трасте мягко-оливкового и си­него (115); комбинация гео­метрической (горизонтальные полоски) и фотографической текстур (118); композиция прошита пунктирными соеди­нительными линиями, стилизо­ванными под чертеж или ра­диосхему (94); фото земно­го шара из космоса (фон под спортсменом) вводит ду­гу большого радиуса (98), сво­ей наклонностью (98) под­держивающей динамику визуа­ла (168); имитация фотогра­фической «глубины резкости» (299) придает выпуклость фи­гуре атлета; фотографический визуал интегрирован в компо­зицию размывкой краев (289)

«Декадентская» материальная текстура фона имитирует пятна и потертости, «осыпа­ние» графического визуала слева (121); почти полное отсут­ствие выравниваний элементов по вертикали (87); при всем при том композиция страницы полностью уравновешена по лю­бому из своих аспектов (155); кегль шрифта в навигацион­ных кнопках внизу — на пре­деле видимости (138); увели­чение трекинга (141) и ис­пользование стиля «все заглав­ные» в надписях мелким кеглем (140); «гуманистический» ру­бленый шрифт (133)

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

б

Рис. 19

(к стр. 104)

Рис. 20

(к стр. 112)

Рис. 22 (к стр. 114)

Рис. 21

(к стр. 112)

Рис. 43

(к стр. 163)

Рис. 78

(к стр. 307)

Рис. 79

(к стр. 309)

Рис. 87

(к стр. 318)

Рис. 88 (к стр. 318 )

Рис. 89 (к стр. 319)

Рис. 90 (к стр. 320)

Рис. 91 (к стр.321)

Рис. 92 (к стр. 322)

’

и кавычки в английском языке 232
правила расстановки пробелов 228

‘

и кавычки в английском языке 232

правила расстановки пробелов 228

..., правила расстановки пробелов 228

:

во французском языке 230
правила расстановки пробелов 228

;

во французском языке 230
правила расстановки пробелов 228

Дата добавления: 2015-05-26