Свежие стили Web-дизайна: как сделать из вашего сайта «конфетку»

Курт Клонингер

Свежие стили Web-дизайна
Как сделать из вашего сайта «конфетку»

Fresh Styles for
Web Designers: 
Eye Candy 
from the
Underground

Curt Cloninger

201 West 103rd Street 
Indianapolis, Indiana 46290

Свежие стили
Webдизайна:
как сделать
из вашего сайта
«конфетку»

Курт Клонингер

Москва 

2-е издание,
электронное

2022

УДК 004.92:004.738.5
ББК 32.973.202
К50

К50
Клонингер, Курт.

Свежие стили Web-дизайна: как сделать из вашего сайта «конфетку» / К. Клонин-
гер ; пер. с англ. М. В. Ермолиной. — 2-е изд., эл. — 1 файл pdf : 251 с. — Москва : ДМК 
Пресс, 2022. — (Web-дизайн). — Систем. требования: Adobe Reader XI либо Adobe 
Digital Editions 4.5 ; экран 10". — Текст : электронный.

ISBN 978-5-89818-246-5

Существующая литература по Web-дизайну является скорее литературой по Web-программированию 
и проблемам, связанным с разработкой удобного пользовательского интерфейса. 
А эта книга целиком и полностью посвящена эстетической стороне дизайна. На примере наиболее 
интересных, с точки зрения автора, стилей современного Web-дизайна рассматривается, как 
объединение вербальных, зрительных и акустических средств позволяет достичь максимального 
воздействия на посетителя Сети. В каждой главе описывается один из нетрадиционных стилей, 
приводится множество примеров и ссылки на известные коммерческие сайты, созданные в этом 
стиле, дается подробный анализ применяемых технических приемов. Представлено большое 
количество практических советов для тех, кто решил воспользоваться каким-либо из предложен-
ных стилей. Детально обсуждаются особенности подготовки графики, расположение материала 
на Web-странице, выбор цветовой гаммы и многие другие проблемы.
Книга будет полезна всем, кто интересуется вопросами создания современных, запоминаю-
щихся, коммерчески успешных Web-страниц.

УДК 004.92:004.738.5 
ББК 32.973.202

В соответствии со ст. 1299 и 1301 ГК РФ при устранении ограничений, установленных техническими средствами защиты авторских 
прав, правообладатель вправе требовать от нарушителя возмещения убытков или выплаты компенсации.

ISBN 978-5-89818-246-5
© New Riders Publishing 
©  Перевод на русский язык, оформление ДМК Пресс

v

Краткое содержание

Глава 1. Введение
2

Глава 2. Готический органический стиль
10

Глава 3. Табличный пиктографический стиль
36

Глава 4. Стиль «низкокачественный грандж»
52

Глава 5. Стиль бумажных пакетов
68

Глава 6. Мондриановский плакатный стиль
84

Глава 7. Цифровой панкроковый стиль
100

Глава 8. Суперминиатюрный городской стиль
122

Глава 9. Стиль HTMинимаLизма
136

Глава 10. Стиль чертежей и моделей
162

Глава 11. Стиль 1950х «Привет, Китти!»
176

Глава 12. Заключение
192

vi

Содержание

1
Введение
2

Web похожа на… Web
3
Проблемы: приверженность, 
подражательство и печать
4
Проблема 1: приверженцы практичности
4
Проблема 2: синдром «один размер 
подходит всем»
5
Проблема 3: вирус печатного оформления
8
Решение: личная увлеченность
8

2
Готический органический стиль
10

Симметрия – это смерть: Entropy8
14
Хаос создает коммерцию: Conscience Records
19
За бархатным канатом: Джанет Джексон
22
«Реалистические» текстуры
25
Изображения переднего плана 
с неровными границами
27
Прозрачные анимированные GIFизображения
28
Контролируемый размер окна
30
Намеренное использование 
вертикальной прокрутки
32
Сайты, упоминаемые в этой главе
34

3
Табличный пиктографический стиль
36

Майк Сина: Майс ван дер Рое встречает 
Кид Эй
39
Nike для женщин: бизнеспроект
43
Новостной портал Сербии: 
эстетичная практичность
45
Расположение геометрических форм 
под углом, кратным 45°
46
Шаг 1: сохранить в формате GIF
47
Шаг 2: сохранить в качестве Flashанимации
47
Сочетание фотографии с табличными схемами
48
Использование фрагментов изображений
49
Сайты, упоминаемые в этой главе
50

содержание

vii

4
Стиль «низкокачественный грандж»
52

Приблизиться к печати настолько, 
насколько нужно
54
Персональные сайты Сакси: 
псевдофункциональность финского 
производства
55
Коммерция в стиле грандж: Nokian Tyres
60
Сочетание GIFизображений 
на переднем/заднем плане
61
Имитация строчной развертки
63
Кисти для пятен
64
Движение внутри коллажа
65
Сайты, упоминаемые в этой главе
66

5
Стиль бумажных пакетов
68

Сайт Kipple компании Funny Garbage: 
Макгайвер занимается Webискусством
71
P2: дети растут
74
Сайт Levi's Vintage: революция будет 
продвигаться на рынок
77
gURL и KaChing: 25 % стиля бумажных пакетов
78
Текстуры бумажных пакетов
80
Намеренная неровность 
и небрежные границы
82
Разумное использование цвета
82
Кочующая панель навигации
83
Сайты, упоминаемые в этой главе
83

6
Мондриановский плакатный стиль
84

Музей Vitra Design и архив стиля Bauhaus: 
дизайн на службе у дизайна
88
617: джедай моды
90
Американский институт 
графического искусства
91
Lundstrom Architecture: создан для того, 
чтобы поражать
92

содержание

viii

Целостное оформление окна браузера
94
Размещение при помощи фреймов
94
Полноэкранное решение во Flash
95
Решение с фиксированным размером
96
Решение с использованием 
самораскрывающихся окон
96
Элементы навигации, интегрированные 
в общее оформление страницы
97
Выбор цветовой палитры
98
Сайты, упоминаемые в этой главе
99

7
Цифровой панкроковый стиль
100

Краткий курс ориентирования в дезориентации
103
Ложная неисправность
104
Обманная навигация
106
Отсутствующие 
или неверно работающие указатели
108
Постоянное движение и шум
112
Нетрадиционная обрезка 
и увеличение изображения
113
Нестандартное мультимедиа
115
Полноэкранное управление
116
Функции наведения курсора мыши
118
Старый жуткий крупный HTMLтекст
119
Сайты, упоминаемые в этой главе
120

8
Суперминиатюрный городской стиль
122

Kaliber 10000: Бог проявляется в мелочах
124
flipflopflyin: все дело в идее
125
dbdb: на станции метро
127
cnn.com/CAREER: будем работать за пикселы
128
Крошечные растровые человечки, здания 
и предметы
130
Растровые шрифты
131
Дробление страницы
133
Сайты, упоминаемые в этой главе
135

9
Стиль HTMинимаLизма
136

Просто для продажи: 37signals
139
gettyone: продавать стало просто
142

содержание

ix

A List Apart: лучший способ чтения через CSS
146
endquote: иногда ничто – 
это действительно круто
148
Jovino: принцип относительности
149
Управление шрифтами в CSS
151
Комбинации цветов
153
Надувной алфавит
157
Табличные шрифты
158
Сайты, упоминаемые в этой главе
160

10 Стиль чертежей и моделей
162

Майк Янг: дух в машине
165
chapter3: темный оттенок светлого
167
Hyperprism и MTV2 UK: 
пространственная навигация
168
Mercury Vehicles: раскройте свою душу
171
3Dпрограммы
172
Крохотный неразборчивый шрифт
174
Сайты, упоминаемые в этой главе
175

11 Стиль 1950х «Привет, Китти!»
176

Эми Францесчини: добро пожаловать 
в мою мечту
178
Post Tool: изобильный минимализм/
минималистическое изобилие
183
Avant Card и You Grow Girl: коммерция 
с проказливой улыбкой
185
Крохотные трехмерные круглые человечки/
большой трехмерный шрифт
187
Округлые, естественные границы
188
Пастельная палитра
188
Шрифты 50х/искусство 50х
189
Сайты, упоминаемые в этой главе
190

12 Заключение
192

Кондитеры стали плотниками
193
Это переживание, болван
194
Сеть похожа на вечеринку
196

Предметный указатель
199

замечание относительно URL

x

Сеть – это постоянно изменяющийся поток идей, проектов или перепроектировок. 
Сайты развиваются и угасают. Одни перемещаются на другое место, 
другие исчезают. К тому времени, когда вы прочитаете эту книгу, некоторые 
из описанных в ней сайтов, конечно же, изменятся, а другие и вовсе
уйдут в небытие.
Постоянное изменение информационной среды может внести сумятицу
в книги, посвященные Сети, а следовательно, и в умы читателей этих книг.
Вы узнаете о примере интересного дизайна или технологической новинке,
бросаетесь к браузеру и обнаруживаете, что на сайте больше нет того, что
описано в книге.
К счастью, в большинстве случаев потери можно свести к минимуму: если 
какая-то страница исчезла, попробуйте свести ее URL к более простой
форме. Например, если браузер не может найти адрес www.yahoo.com/
games/thrills/, обратитесь к его простейшей форме www.yahoo.com, и попробуйте 
там определить местонахождение нужной страницы.
Я приложу все усилия, чтобы сохранить всю информацию, относящуюся
к книге, на странице по адресу www.lab404.com/dan/ вместе со ссылками на
существующие примеры разнообразных стилей. Но если вы читаете эту книгу 
в 2010 году, напечатанные здесь снимки экранов могут оказаться единственным 
воспоминанием о той Сети, какой она когда-то была.

Web и печатные издания:
замечание относительно URL

об авторе

xi

Об авторе

Курт Клонингер (Curt Cloninger) – это Web-дизайнер, писатель и сетевой

художник. Среди прочих коммерческих проектов в его портфолио входит занимающий 
призовые места сайт integritymusic.com. Курт также активно участвует 
в тематических Internet-конференциях и регулярно печатает свои статьи 
в электронных журналах по дизайну, например A List Apart. Его работы

выставлялись в Музее изображений и звука (Museum of Image and Sound)

в Сан-Пауло, Бразилия; они хранятся в архивах на сайте rhizome.org и публикуются 
в изданиях по цифровому искусству, таких как On/Off и Neural.

Курт обитает по адресу lab404.com, играет по адресу playdamage.org и продолжает 
придерживаться еретических убеждений о том, что красота означает 
практичность.

посвящения

xii

Посвящения

Моему отцу. В то время как другие отцы играли в гольф в кантри-клубах,

ты вырезал в подвале гномов и ящериц из кривых кусков топляка. Появление 
этой книги частично и твоя заслуга.

Иисусу, мета-создателю. Ты заложил краеугольный камень земли, когда

запели утренние звезды и радостно вскрикнули ангелы. Ты мое пламя и топ-

ливо.

благодарности

xiii

Благодарности

Большое спасибо Джошуа Дэвису (Joshua Davis), который создал сайт

dreamless.org, где я встретил Джеффри Зелдмана (Jeffrey Zeldman), который

предложил мне написать статью для alistapart.com, которую, в свою очередь,

прочитал Майкл Нолан (Michael Nolan), который затем предложил мне напи-

сать эту книгу. Благодарю всех людей, которым пришлось много вынести,

пока я трудился над ней, в частности, мою жену Жюли (Julie) и дочку Каро-

лину (Caroline). Спасибо Майклу Нолану и Карен Уайтхауз (Karen Whitehouse)

за то, что книга получилась великолепной. Спасибо Виктории Илзи (Victoria

Elzey) и Рафаэлю Оливасу (Rafael Olivas) за то, что они не позволили превра-

тить книгу в празднество неформалов. Спасибо Карлосу Сегура (Carlos

Segura) за оформление такого прекрасно единственного, единственно пре-

красного издания.

Большой поклон всем дизайнерам, упомянутым в этой книге, за ваш

вклад в развитие коммерческой Сети. Нам бы вашу страсть и гениальность.

01
введение
«Гитарный усилитель Marshall не просто
усиливает звук. Он искажает звук, добавляя
целый ряд новых гармоник, превращая
инструмент с натянутыми струнами в согнутый
лук. Конечно, можно попробовать преодолеть
это препятствие… Но такой звук стал, между
прочим, звуком Джимми Хендрикса. Этот звук
называется “электрической гитарой”.

…Поскольку большая часть нашего опыта так
или иначе опосредованна, мы необычайно
чувствительны к знакам другой среды.
Художники играют с этой чувствительностью,
придумывая новые формы и меняя старые.
Поэтому характерные для инструмента или
среды искажения, его слабости и ограничения
становятся важными источниками эмоций
и чувств».
Брайан Эно (Brian Eno) 

01 ВВЕДЕНИЕ