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

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

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

074-0 fm-Rus.qxd  19.02.00  13:35  Page i

ii

Fresh Styles for
Web Designers: 
Eye Candy 
from the
Underground

Curt Cloninger

201 West 103rd Street 
Indianapolis, Indiana 46290

074-0 fm-Rus.qxd  19.02.00  13:35  Page ii

iii

Свежие стили
Webдизайна:

как сделать

из вашего сайта

«конфетку»

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

Москва 

074-0 fm-Rus.qxd  19.02.00  13:35  Page iii

УДК 004.92:004.738.5

ББК 32.973.202

К50

Клонингер К.

К50
Свежие стили Web-дизайна: как сделать из вашего сайта «конфетку»: Пер с англ. – М.: ДМК
Пресс. – 2
с.: ил. (Серия «Web-дизайн»).

ISBN 5-94074-154-1

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

Книга будет полезна всем, кто интересуется вопросами создания современных, запоминаю
щихся, коммерчески успешных Web-страниц. 

Authorized translation from the English language edition, entitled Fresh Styles for Web Designers:

Eye Candy from the Underground by Cloninger, Curt, published by Pearson Education, Inc., publishing
as New Riders, Copyright @

All rights reserved. No part of this book may be reproduced or transmitted in any form or by any

means, electronic or mechanical, including photocopying, recording or by any information storage
retrieval system, without permission from Pearson Education, Inc.

Все права защишены. Любая часть этой книги не может быть воспроизведена в какой бы то

ни было форме и какими бы то ни было средствами без письменного разрешения владельцев
авторских прав.

Материал, изложенный в данной книге, многократно проверен. Но, поскольку вероятность

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

ISBN 0-7357-1074-0 (англ.)
© New Riders Publishing

ISBN 5-94074-154-1 (рус.)
© Перевод на русский язык, оформление 

ДМК Пресс

074-0 fm-Rus.qxd  19.02.00  13:35  Page iv

50

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

074-0 fm-Rus.qxd  19.02.00  13:35  Page v

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

074-0 fm-Rus.qxd  19.02.00  13:35  Page vi

содержание

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

074-0 fm-Rus.qxd  19.02.00  13:35  Page vii

содержание

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

074-0 fm-Rus.qxd  19.02.00  13:35  Page viii

содержание

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

074-0 fm-Rus.qxd  19.02.00  13:35  Page ix

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

x

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

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

074-0 fm-Rus.qxd  19.02.00  13:35  Page x