Веб-дизайн для недизайнеров [Трэйси Осборн] (pdf) читать онлайн

Tlgm: @it_boooks

Tlgm: @it_boooks

Tlgm: @it_boooks

ВЕБ-ДИЗАЙН
Д ЛЯ НЕДИЗАЙНЕРОВ

Трэйси Осборн

2022

Tlgm: @it_boooks

Трэйси Осборн
Веб-дизайн для недизайнеров
Перевел с английского Д. Брайт
Руководитель дивизиона
Ю. Сергиенко
Руководитель проекта
А. Киреева
Ведущий редактор
Е. Строганова
Литературный редактор
О. Морозова
Художественный редактор
В. Мостипан
Корректоры
Н. Сидорова, Г. Шкатова
Верстка
Л. Соловьева
ББК 32.988.02-018
УДК 004.738.5

Осборн Трэйси
О-72 Веб-дизайн для недизайнеров. — СПб.: Питер, 2022. — 176 с.: ил.
ISBN 978-5-4461-1917-2
Пора сделать веб-разработку доступной для всех. Забавное, полезное и насыщенное информацией
руководство охватывает все ключевые принципы дизайна, передовые практики, полезные шоткаты,
профессиональные советы, реальные примеры и базовые знания программирования, необходимые для
создания красивого веб-сайта, которым вы будете уверенно делиться со всем миром. Почему? Потому
что вы научитесь разрабатывать современные сайты!
«Веб-дизайн для недизайнеров» содержит все необходимое, чтобы вы чувствовали себя комфортно,
занимаясь веб-разработкой, в том числе множество реальных примеров веб-сайтов, которые должны
вдохновлять и мотивировать. Не нужно тратить время и деньги на дорогого графического дизайнера, эта
книга проведет вас через основы, воспользовавшись самыми быстрыми шоткатами, – вы все сделаете
сами, и прямо сейчас.

16+ (В соответствии с Федеральным законом от 29 декабря 2010 г. № 436-ФЗ.)

ISBN 978-1718501386 англ.
© 2021 by Tracy Osborn. Hello Web Design:
Design Fundamentals and Shortcuts for Non-Designers, ISBN 9781718501386,
published by No Starch Press Inc. 245 8th Street, San Francisco, California United States 94103
ISBN 978-5-4461-1917-2
© Перевод на русский язык ООО «Прогресс книга», 2022
© Издание на русском языке, оформление ООО «Прогресс книга», 2022
Права на издание получены по соглашению с No Starch Press. Все права защищены. Никакая часть данной книги не
может быть воспроизведена в какой бы то ни было форме без письменного разрешения владельцев авторских прав.
Информация, содержащаяся в данной книге, получена из источников, рассматриваемых издательством как надежные. Тем не менее, имея в виду возможные человеческие или технические ошибки, издательство не может гарантировать абсолютную точность и полноту приводимых сведений и не несет ответственности за возможные ошибки,
связанные с использованием книги.
Издательство не несет ответственности за доступность материалов, ссылки на которые вы можете найти в этой
книге. На момент подготовки книги к изданию все ссылки на интернет-ресурсы были действующими.

Изготовлено в России. Изготовитель: ООО «Прогресс книга».
Место нахождения и фактический адрес: 194044, Россия, г. Санкт-Петербург,
Б. Сампсониевский пр., д. 29А, пом. 52. Тел.: +78127037373.
Дата изготовления: 06.2022. Наименование: книжная продукция. Срок годности: не ограничен.
Налоговая льгота — общероссийский классификатор продукции ОК 034-2014,
58.11.12 — Книги печатные профессиональные, технические и научные.
Импортер в Беларусь: ООО «ПИТЕР М», 220020, РБ, г. Минск, ул. Тимирязева, д. 121/3, к. 214, тел./факс: 208 80 01.
Подписано в печать 22.04.22. Формат 70×100/16. Бумага офсетная. Усл. п. л. 14,190. Тираж 1500. Заказ 0000.

Tlgm: @it_boooks

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

Tlgm: @it_boooks

Tlgm: @it_boooks

ОБ АВТ ОРЕ

Трэйси Осборн — дизайнер, разработчик и предприниматель
из Торонто, Канада. Сайты она начала создавать уже в 12 лет
и всегда испытывала тягу к компьютерам, интернету и всем
предоставляемым ими возможностям.

Трэйси окончила Калифорнийский государственный Политехнический университет в Сан-Луис-Обиспо, получив степень
бакалавра в области искусства и дизайна со специализацией
в сфере графического дизайна. После она пять лет проработала дизайнером, освоила программирование и в конечном
итоге запустила собственный стартап WeddingLovely.
Она регулярно участвует в технологических конференциях,
в том числе выступала с основными докладами на O’Reilly’s
Fluent Conference 2016, EuroPython 2017 и DjangoCon US 2017.



7

Tlgm: @it_boooks

Tlgm: @it_boooks

К РАТ КОЕ ОГЛАВЛЕ Н ИЕ
ГЛАВА 1
ЕСЛИ ИЗ ВСЕХ ГЛАВ ВЫБИРАТЬ ОДНУ, ТО ЛУЧШЕ ЭТУ

21

ГЛАВА 2
ТЕОРИЯ И ПРИНЦИПЫ ВЕБ-ДИЗАЙНА

29

ГЛАВА 3
ПРОЦЕСС ДИЗАЙНА И ВЫРАБОТКА
ПРОФЕССИОНАЛЬНОГО ВИДЕНИЯ

123

ГЛАВА 4
ПРЕДУБЕЖДЕНИЯ

165

ГЛАВА 5
ДОПОЛНИТЕЛЬНЫЕ РЕСУРСЫ

169

Tlgm: @it_boooks

ОГЛАВЛЕНИЕ
ОБ АВТОРЕ

7

БЛАГОДАРНОСТИ

15

ПРЕДИСЛОВИЕ

16

ВВЕДЕНИЕ

18

ГЛАВА 1

Если из всех глав выбирать одну, то лучше эту
ВНЕШНИЙ ВИД — НИЧТО, ФУНКЦИОНАЛ — ВСЁ

21

ГОТОВЫЕ РЕШЕНИЯ ПО УЛУЧШЕНИЮ ДИЗАЙНА

21
23
23
24

Избавляйтесь от беспорядка в дизайне —
улучшайте внешний вид

24

Хорош ли дизайн? Измеряйте
Показывайте свой дизайн — и пусть оценивают!

ГЛАВА 2

Теория и принципы веб-дизайна
РАЗДЕЛ 2.1

СЕ Т К А
ГОТОВЫЕ РЕШЕНИЯ

Сетки в программах для создания мокапов
Сетки для веб-дизайна
ЖИВОЙ ПРИМЕР
РАЗДЕЛ 2.2

ЦВ Е Т
ГОТОВЫЕ РЕШЕНИЯ

Ограничьте цветовую схему
Используйте цвет для акцентирования
Не забывайте про контраст
Находите палитры на специальных сайтах
ЖИВОЙ ПРИМЕР

10



29
31
31
34
34
36
38
40
40
47
47
48
48
49
52

Tlgm: @it_boooks

РАЗДЕЛ 2.3

Т ИП О Г РАФ ИК А
ОСНОВЫ ТИПОГРАФИКИ

Категории шрифтов
Межстрочный интервал и высота строки
Кернинг и межбуквенный интервал
ПРИНЦИПЫ ТИПОГРАФИКИ

Используйте в дизайне не более двух гарнитур
Избегайте выравнивания по ширине или по центру
Выравнивание по центру может вызывать
сложности
Длина строки
ГОТОВЫЕ РЕШЕНИЯ

Бесплатные ресурсы для выбора шрифтов
Сайты с отобранными шрифтами
ЖИВОЙ ПРИМЕР
РАЗДЕЛ 2.4

БЕ ЛО Е П РО С Т РА Н С Т В О
БАЗОВЫЕ ТЕЗИСЫ О БЕЛОМ ПРОСТРАНСТВЕ

Белое пространство улучшает восприятие
Белое пространство облегчает чтение
Белое пространство усиливает Call-to-action
Белое пространство задает изысканный тон
НЕМНОГО ТЕОРИИ

Интервалы между строк
Пространство между элементами
Пространство между группами элементов
ГОТОВЫЕ РЕШЕНИЯ

Удваивайте белое пространство между элементами
Убедитесь в оптимальном размере
межстрочных интервалов
ЖИВОЙ ПРИМЕР
РАЗДЕЛ 2.5

М АКЕ Т И ИЕРА РХ И Я
ЖИВОЙ ПРИМЕР
РАЗДЕЛ 2.6

Т Е КСТ
ЖИВОЙ ПРИМЕР
РАЗДЕЛ 2.7

П О ЛЬЗ О В АТ ЕЛ Ь С К И Й О П Ы Т
ДО НАЧАЛА ДИЗАЙНА

55
55
56
56
58
59
60
60
61
62
63
63
63
65
67
68
68
70
70
70
72
73
74
74
74
75
76
76
76
76
79
79
84
86
86
92
94
94
94



11

Tlgm: @it_boooks

Конкурентный анализ
Опросы и интервью
В ПРОЦЕССЕ ДИЗАЙНА

Вайрфреймы, прототипы
и юзабилити-тестирование
ПОСЛЕ ЗАПУСКА ПРОЕКТА

Регулярное юзабилити-тестирование
ГОТОВЫЕ РЕШЕНИЯ

Помогите пользователю действовать,
как хотите вы
Обращайте внимание на размер сайта
Выполняйте юзабилити-тестирование
Включайте аналитику
ЖИВОЙ ПРИМЕР
РАЗДЕЛ 2.8

ИЗО Б РА Ж ЕН И Я И Х УД О Ж ЕС Т В ЕН Н Ы Е Э Л ЕМЕ НТЫ
ОСНОВЫ

Фотографии и иконки не обязательны
Лица как мощный инструмент
Обращайте внимание на размер файлов
Внимательно выбирайте стоковые фотографии
Иконки
ГОТОВЫЕ РЕШЕНИЯ

Сайты стоковых фото
Художественное оформление (иконки, графика и иллюстрации)
ЖИВОЙ ПРИМЕР
РАЗДЕЛ 2.9

Д О П О Л Н И Т ЕЛ Ь Н Ы Е Н Ю А Н С Ы
НАЧИНАЙТЕ С ПРОСТОГО
ОРИЕНТИРУЙТЕСЬ НА «ПРАВИЛО ТРЕТЕЙ»
ИЗБЕГАЙТЕ ЧИСТОГО ЧЕРНОГО
СВЕТ ДОЛЖЕН ПАДАТЬ СВЕРХУ
КОНТРАСТ ПОДЧЕРКИВАЕТ ГЛАВНОЕ
МЕНЯЕМ ФОН — ИЗМЕНЯЕМ ЦВЕТ
БУДЬТЕ ВНИМАТЕЛЬНЫ ПРИ НАЛОЖЕНИИ ТЕКСТА
НА ИЗОБРАЖЕНИЕ
СОВЕТЫ ПРИ ПРОЕКТИРОВАНИИ ПОРЯДКА
ДЕЙСТВИЙ ПОЛЬЗОВАТЕЛЯ

12



95
96
96
97
97
98
98
98
100
100
100
101
102
102
103
104
105
105
107
108
109
109
110
111
113
113
113
114
116
117
117
118
119
120

Tlgm: @it_boooks

ГЛ А В А 3

Процесс дизайна и выработка
профессионального видения
РАЗДЕЛ 3.1

П О ИСК В Д О Х Н О В ЕН И Я
РАЗДЕЛ 3.2

П ЛАНИРО В А Н И Е
РАЗДЕЛ 3.3

П РО ТО Т ИП Ы
СОЗДАНИЕ ВАЙРФРЕЙМА
МОКАП ВАШЕГО ДИЗАЙНА
РАЗДЕЛ 3.4

П О ЛУ Ч Е НИЕ О Б РАТ Н О Й С В Я З И
ОЦЕНКА ДИЗАЙНА СВЕЖИМ ВЗГЛЯДОМ
РЕКОМЕНДАЦИИ ПО СБОРУ ОБРАТНОЙ СВЯЗИ

Демонстрация вашего дизайна друзьям и семье
Демонстрация дизайна незнакомым людям
РАЗДЕЛ 3.5

КО Д Д ИЗАЙ Н А
НЕ СТАРАЙТЕСЬ БЫТЬ ОРИГИНАЛЬНЫМ
ИСПОЛЬЗУЙТЕ ФРЕЙМВОРК CSS
НЕ ЗАБЫВАЙТЕ: ДИЗАЙН ДОЛЖЕН БЫТЬ ОТЗЫВЧИВЫМ
УДЕЛИТЕ ВНИМАНИЕ РАЗМЕРУ САЙТА
ИСПОЛЬЗУЙТЕ АНАЛИТИКУ

123
124
124
133
133
137
137
142
147
152
152
153
154
155
155
157
157
157
158
159
160
161

ГЛ А В А 4

Предубеждения

165

ГЛ А В А 5

Дополнительные ресурсы
КНИГИ
БЛОГИ И ОНЛАЙН-ЖУРНАЛЫ
ОНЛАЙН-КУРСЫ

169
169
170
171



13

Tlgm: @it_boooks

ПРИМЕРЫ ДЛЯ ВДОХНОВЕНИЯ
РЕСУРСЫ ДЛЯ РАБОТЫ С ЦВЕТОМ
РЕСУРСЫ ШРИФТОВ
РЕСУРСЫ ИЗОБРАЖЕНИЙ
CSS-ФРЕЙМВОРКИ
ВЕБ-АНАЛИТИКА
СОЗДАНИЕ ВАЙРФРЕЙМОВ
СБОР ОБРАТНОЙ СВЯЗИ
ЗАКЛЮЧЕНИЕ
ССЫЛКИ

171
172
172
173
173
173
173
174
174
174

Tlgm: @it_boooks

Б Л А Г О Д А РН ОС Т И

Эта книга создавалась несколько лет. Благодарю всех, кто
слушал мои презентации, давал обратную связь, поддерживал идеи и ­помог воплотить этот проект в жизнь.

В особенности выражаю искреннюю признательность всем,
кто пошел на финансовые риски и поддержал кампанию по
сбору средств на Kickstarter для выпуска книги. Собрав более
700 участников, эта кампания стала самой большой из всех
проведенных мной ранее. Для меня очень ценно, что люди
хотели поддержать деньгами и даже подбадривали меня,
пока книга готовилась.
Отдельно благодарю издательство No Starch Press за то,
что рискнули и добавили эту книгу в свою коллекцию. С их
помощью «Веб-дизайн для недизайнеров» охватит гораздо
большую аудиторию, чем я могла ожидать. Я глубоко
признательна им за сотрудничество и все те бесчисленные
часы, проведенные в стремлении сделать лучше книгу и ее
содержание.

Tlgm: @it_boooks

ПР Е Д ИСЛОВИЕ

Всякий раз, погружаясь в мир Семантической паутины1, я замечал, что существует два фундаментально разных подхода.
Один из них основан на утверждении, что абсолютно все во
Вселенной должно иметь теоретическое объяснение. Второй
же подход не такой жесткий, он позволяет сосредоточиться
лишь на самых распространенных явлениях — относящихся
к людям, местам, событиям и т. п. Обычно большего и не требуется. Согласно данной теории, лишь около 80 % явлений
в этом мире имеют фактическое применение. Попытка же
систематизировать оставшиеся 20 % потребует несоизмеримо бóльших усилий.
Мне этот подход всегда нравился. Я считаю, что он применим ко множеству начинаний. Написание кода, рисование,
кулинария — во многих областях можно набрать неплохую
скорость просто за счет базовых навыков, а затем уже в течение жизни оттачивать мастерство. Но нам необязательно
становиться мастерами в каждом деле. Мне, например, вполне хватает удовлетворительного уровня навыков во многих
сферах. Это позволяет сделать приоритетными те вещи,
которым я действительно готов посвящать свое время.
1

Семантическая паутина — надстройка над существующей Всемирной

паутиной, придуманная для того, чтобы сделать информацию
удобной как для машинной обработки, так и для чтения обычным
человеком.

16

П РЕДИСЛОВИЕ

Tlgm: @it_boooks

Пусть веб-дизайн не является для вас приоритетом. Возможно, вы решили удвоить усилия в программировании. Но это
не значит, что вам придется совсем отказаться от веб-дизайна. Вы сможете создавать нечто вполне качественное…
благодаря этой книге.
Трэйси разбирается во всех основах веб-дизайна, так что
вам не придется искать и осмысливать информацию самостоятельно. Она в течение многих лет обучалась, впитывала
знания и практиковала, и теперь перед вами бережно собранные и переработанные те самые, наиболее полезные
80 процентов.
Эту книгу можно рассматривать как набор чит-кодов. Кратко, по делу, при этом изложено все, что нужно для становления компетентным веб-дизайнером.
Скажите новой книге: «Здравствуй, веб-дизайн!»

— Джереми Кит
Автор Resilient Web Design и сооснователь Clearleft

Tlgm: @it_boooks

В В Е Д Е Н ИЕ

Это не типичная книга для начинающего дизайнера.

Книги для новичков чаще всего предполагают, что в конечном итоге вы собираетесь стать специалистом. Учебники по
программированию исходят из идеи, что вы хотите получить
работу программиста или компьютерного инженера, а учебники по ­дизайну — что вы планируете стать полноценным
дизайнером.
Но что, если вам нужно изучить дизайн лишь на столько,
сколько будет достаточно для продвижения своей «недизайнерской» карьеры?
Я верю в возможность вывода ваших навыков за границы
текущей парадигмы. Мой личный опыт не вписывается ни
в одну отдельную категорию — у меня есть степень в области искусства и дизайна, я разрабатываю сайты и приложения на Python, а еще я основала стартап и управляла им.
Обладание небольшим, но достаточным багажом знаний во
множестве областей стало ключевым фактором в построении моей карьеры.

Аналогично тому, как дизайнерам полезно немного уметь
программировать, программисты (а также маркетологи,
продакт-менеджеры, продажники и т. д.) могут получить
пользу от изучения основ дизайна. Даже если вы не специа­
лизируетесь в дизайне, вам все равно приходится этим
заниматься в той или иной степени — будь то работа над
18

В ВЕДЕНИЕ

Tlgm: @it_boooks

презентациями, создание интерфейсов для программ и проектов или разработка личного веб-сайта. Если вы работаете
с дизайнерами, то наличие некоторого опыта в этой области
позволит более уверенно строить общение с ними и понимать их работу.

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

В этой книге мы исследуем не только теорию (и причины,
лежащие в основе некоторых принципов), но также познакомимся с готовыми решениями — «горячими клавишами» для
некоторых распространенных дизайнерских задач. Например, я расскажу немного о теории цвета, попутно дополнив
этот материал ресурсами, которые помогут вам выбирать
готовые великолепные палитры, не создавая их с нуля.
Подобная схема обучения будет сохраняться на протяжении
всей книги — множество готовых решений и некоторые пояснения, почему эти решения работают.
Я надеюсь, что к концу книги вы будете чувствовать себя
более уверенно в веб-дизайне. А если захотите стать

ВВЕДЕНИЕ

19

Tlgm: @it_boooks

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

— Трэйси

Tlgm: @it_boooks

1

ГЛАВА 1

ЕСЛИ ИЗ ВСЕХ ГЛАВ
ВЫБИРАТЬ ОДНУ, ТО ЛУЧШЕ ЭТУ

ЕСЛИ К ВАМ В РУКИ ПОПАЛА ЭТА КНИГА, а время есть только на прочтение одной главы, прочтите именно эту. Почему?
Потому что она показывает кратчайший путь для совершенствования своих дизайнерских решений.

Внешний вид — ничто, функционал — всё
Скорее всего, вы открыли эту книгу, чтобы найти способ
улучшить свои дизайнерские работы. Но прошу обратить
внимание: то, как работает ваш сайт, важнее того, как он
выглядит.

В качестве примера возьмите Craigslist. В течение многих лет
дизайн ­сайта практически не менялся и выглядит весьма
устаревшим (рис. 1-1).

Если бы внешний вид был самым важным критерием, то
Craigslist уже бы давно затмили другие, новые платформы
объявлений с более ярким дизайном. Тем не менее этот ресурс остается в топе среди сайтов тематических объявлений
потому, что он прост и удобен в использовании.
Без всяких ярких эффектов и отвлекающих баннеров
Craigslist ­максимально упрощает как размещение объявлений, так и их поиск.
Если из всех глав выбирать одну, то лучше эту

21

Tlgm: @it_boooks

Рис. 1-1. Craigslist по-прежнему лидирует в своем сегменте,
даже не имея современного дизайна

Если вы беспокоитесь, что ваш сайт излишне прост и не
выглядит «современным», то есть не соответствует всем
нынешним трендам, которые необязательно предполагают
«хороший» дизайн, — скажу вам уверенно: внешний вид сайта имеет куда меньшее значение, чем его способность эффективно удовлетворять запросы пользователей.

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

22

User eXperience, UX — восприятие и ответные действия пользователя, возникающие в результате использования или предстоящего
использования цифрового продукта, в том числе веб-сайта. Подробно
о пользовательском опыте см. в разделе 2.7. — Примеч. ред.

Глава 1

Tlgm: @it_boooks

­ олжен решать, и получение обратной связи от пользо­
д
вателей.

Хорош ли дизайн? Измеряйте

Невозможно отследить, насколько хорош дизайн, если не
знать его назначения. Различные типы дизайнерских решений преследуют различные цели. Например, вам нужно,
чтобы посетители:
yy заполняли форму;

yy просматривали страницу в среднем не менее 30 секунд;
yy подписывались на новости;
yy оставляли комментарий.

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

Показывайте свой дизайн —
и пусть оценивают!

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

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

23

Tlgm: @it_boooks

работает ваше решение, так как не видите его возможные
проблемы.

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

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

Готовые решения по улучшению дизайна
«Но, Трэйси, — можете сказать вы. — Я хочу, чтобы мой
­дизайн не только лучше работал, но и выглядел лучше».

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

Избавляйтесь от беспорядка в дизайне —
улучшайте внешний вид

Беспорядок, который порой присутствует в перегруженных, неорганизованных и хаотичных дизайнерских

24

Глава 1

Tlgm: @it_boooks

решениях, — проклятие для хорошего пользовательского
опыта. Поэтому избавление от беспорядка ведет к тому, что
ваш сайт и выглядит отлично, и ­работает хорошо.
Рассмотрим несколько небольших понятных принципов.
ИСПОЛЬЗУЙТЕ СЕТКУ

В большинстве дизайнов для уменьшения беспорядка
­используется сетка, которая формирует скелет общей
схемы размещения объектов и создает подсознательное
ощущение упорядоченности. Даже небольшая разница
в пикселях придает дизайну неряшливый и непрофес­
сиональный вид.
Эту тему мы рассмотрим подробнее в разделе 2.1.

НЕ ИСПОЛЬЗУЙТЕ МНОГО ЦВЕТОВ

Дизайн, в котором намешана куча цветов (24 оттенка синего, 5 оттенков красного и т. д.), смотрится перегруженным.
Установите определенную палитру и используйте только ее
цвета. Это позволит придать сайту более связный и целостный вид.
Эту тему мы рассмотрим подробнее в разделе 2.2.

ОГРАНИЧЬТЕСЬ ПАРОЙ ШРИФТОВ

Хотя вы можете использовать один шрифт для навигации,
другой для текста, еще один для кнопок, а четвертый для
заголовков — это лишь внесет в дизайн хаотичность. Ограничьте количество шрифтов, а для создания разнообразия
и расстановки акцентов используйте жирный, курсив, прописные буквы и другие варианты начертания.
Мы разберем эту тему более подробно в разделе 2.3.

Если из всех глав выбирать одну, то лучше эту

25

Tlgm: @it_boooks

УПРОЩАЙТЕ ТЕКСТ

Большие блоки текста создают беспорядок. Используйте
простые речевые конструкции и ограничивайте абзацы
до двух-трех предложений. Можете также разбивать текст,
добавляя маркеры и заголовки. В Сети читатели, как правило, просматривают текст бегло, и короткие абзацы лучше
удерживают их внимание.
Более подробно эту тему мы рассмотрим в разделе 2.6.

БОЛЬШЕ «ВОЗДУХА»

Дополнительное пространство на странице — прекрасный
способ избавиться от беспорядка. Одна из серьезнейших
ошибок молодых дизайнеров — в чрезмерно близком размещении элементов друг к другу. Добавление пространства
между элементами (текстом, виджетами, формами, кнопками, картинками) делает дизайн более читабельным, современным, воздушным и привлекательным.
Эту тему мы подробнее рассмотрим в разделе 2.4.

Все сказанное выше можно выразить одним предложением:

Убедитесь, что ваш дизайн работает
как надо, и уменьшите беспорядок везде,
где это возможно

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

Tlgm: @it_boooks

Tlgm: @it_boooks

Tlgm: @it_boooks

2

ГЛАВА 2

ТЕОРИЯ И ПРИНЦИПЫ
ВЕБ-ДИЗАЙНА

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

Я приведу несколько правил и идей, которые вам нужно
запомнить. Конечно же, в каждом правиле есть исключения,
и любое правило может быть нарушено. Но так как последующие разделы нацелены на новичков, мы все-таки будем
придерживаться данных принципов, а уже по мере роста
ваших дизайнерских навыков вы научитесь распознавать,
когда и какие правила можно не соблюдать.
По ходу углубленного разбора каждого раздела мы будем
применять эти принципы на примере небольшого виджета
(рис. 2-1).

Теория и принципы веб-дизайна

29

Tlgm: @it_boooks

Рис. 2-1. Недоработанный виджет. Нашей задачей будет его улучшить

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

Tlgm: @it_boooks

РАЗДЕЛ 2.1

СЕТКА

ПЕРВЫЙ ПРИНЦИП БУДЕТ ОЧЕНЬ ПРОСТ: выравнивайте
­элементы!

Вы могли слышать распространенную жалобу дизайнеров,
суть которой в следующем. Дизайнер создает идеальный
эскиз, выверенный до пикселя, и передает его разработ­чику.
Разработчик программирует этот дизайн, но тот в итоге
отличается от изначального эскиза на произвольную небольшую величину, например в два пикселя.
«Глупый дизайнер, — говорит разработчик. — Разве такая
мелочь имеет значение? Разницы почти не видно».

А соль вот в чем: небольшие отличия в пикселях действительно важны, особенно когда речь идет об элементах страницы. Если два элемента находятся рядом, но не полностью
выровнены друг относительно друга, то это может создать
едва уловимую взором «шероховатость», а в целом для дизайна — беспорядок (рис. 2-2).

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

31

Tlgm: @it_boooks

На сайте New York Times (рис. 2-3) для организации большого
объема информации используется пять основных колонок
(на рисунке выделены красным). Пробел между колонками
называется средником. Объекты внутри сетки могут охватывать несколько колонок, некоторые из них могут выходить
за сетку, но при этом все элементы в большей или меньшей
степени к ней «привязаны».

Рис. 2-2. Эти два скриншота почти одинаковы, но левый, где текст частично
не выровнен, выглядит менее цельным, а дизайн непрофессиональным

Рис. 2-3. На сайте New York Times сетка нужна для того, чтобы эффективно
организовать на домашней странице газетные заметки и большое число
элементов
32

Глава 2

Tlgm: @it_boooks

В дизайне вы можете использовать любое число колонок
(рис. 2-4), но чаще всего применяется сетка на 12 колонок —
она дает больше возможностей (рис. 2-5).

Также сетка пригодится при создании макета сайта, она
позволит вам размещать элементы в пределах опредленных
областей, а не в любом месте страницы.
Резюмируем: если у вас много элементов, выровняйте их
(по горизонтали, по вертикали или и так, и так), чтобы создать ощущение цельности.

Рис. 2-4. Сайт Gridset демонстрирует составную сетку 4+6
с направляющими линиями и без них
Теория и принципы веб-дизайна

33

Tlgm: @it_boooks

1

1

1

1

1

4

1

1

1

1

1

4

4

1

1

4
8

4

6

6

12

Рис. 2-5. Система 12-колоночной сетки в CSS-фреймворке Bootstrap

Готовые решения

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

Сетки в программах для создания мокапов

Если вы работаете над чем-то, что не будете собирать в CSS1,
то вам понадобится добавить в дизайн направляющие.

Все программы для создания мокапов2: Photoshop, Sketch или
GIMP — позволяют устанавливать направляющие, по которым удобно выравнивать элементы.
1

2

34

CSS (Cascading Style Sheets) — каскадные таблицы стилей. Язык разметки, используемый для визуального оформления веб-­сайтов. — Примеч.
ред.
Мокап (mock-up) — «макет», это графический набросок или актуальный графический дизайн сайта. Представляет структуру ­информации,
визуа­лизирует контент и демонстрирует основной функционал в статике. Мокапы используют для демонстрации заказчику законченного
вида будущего дизайна. — Примеч. ред.

Глава 2

Tlgm: @it_boooks

Если вы работаете над эскизом сайта, например в Photoshop,
то можете задействовать шаблоны сеток для выстраивания
структуры сайта, используя те же колонки, которые использовали бы в своей системе веб-фреймворка (рис. 2-6).

Направляющие также имеются в большинстве программ для
создания презентаций и других простых макетов, например
в Keynote (рис. 2-7).
Для создания слайдов вам необязательно добавлять
в ­структуру всю 12-колоночную сетку. Например, на слайдах,
представленных на рис. 2-7, используется всего несколько
направляющих, что вполне достаточно для размещения
элементов на отдельных страницах по одним и тем же
линиям.

Рис. 2-6. Направляющие можно устанавливать перетаскиванием по
линейкам в левой и верхней частях экрана Photoshop

Теория и принципы веб-дизайна

35

Tlgm: @it_boooks

Рис. 2-7. В Keynote тоже можно перетаскивать направляющие из полей
линеек. Аналогичные опции доступны во многих других программах

Однако если вы проектируете нечто более сложное, то можете скачать много шаблонов с большим числом уже настроен­
ных колонок, например систему 960.gs (http://hellobks.com/hwd/4).

Сетки для веб-дизайна

Я настоятельно рекомендую использовать CSS-фреймворки,
включающие сетку, например:
Bootstrap (http://hellobks.com/hwd/5);
Foundation (http://hellobks.com/hwd/6);
Skeleton (http://hellobks.com/hwd/7);
mini.css (http://hellobks.com/hwd/8) или
PureCSS (http://hellobks.com/hwd/9) (рис. 2-8).

При использовании HTML-классов, ограничивающих дизайн
внутренней CSS-сеткой, ваши элементы будут естественным
образом выравниваться на странице относительно друг
друга (рис. 2-9). Только помните, что при добавлении в CSS
дополнительных внешних или внутренних отступов элементы могут быть выбиты из выравнивания.
36

Глава 2

Tlgm: @it_boooks

Рис. 2-8. Система сетки, включенная в CSS-фреймворк Bootstrap

Рис. 2-9. Некоторые из CSS-классов, включенные в Bootstrap для
выравнивания и размещения объектов по внутренней сетке

В CSS появился новый компонент, называемый CSS Grid
(очень удобно!), который позволяет легко выравнивать
элементы по сетке без использования CSS-фреймворка.
На момент написания книги CSS Grid находился на стадии
релиза и включения в большинство браузеров. И хоть
в данной книге не рассматривается CSS, использование
CSS Grid упростит реализацию дизайнов на основе сетки
(рис. 2-10).

Теория и принципы веб-дизайна

37

Tlgm: @it_boooks

Рис. 2-10. Документация по CSS Grid в Mozilla Developer Network
(http://hellobks.com/hwd/10)

Живой пример

Помните тот небольшой виджет, представленный в начале
главы? Пора обновить его дизайн, выровняв элементы
(рис. 2-11).

Рис. 2-11. Слева — оригинальный виджет, а справа мы выровняли границы
полей для ввода. Теперь виджет выглядит аккуратнее и упорядоченнее

38

Глава 2

Tlgm: @it_boooks

Хотя этот виджет все еще далек от совершенства (мы ведь
только в самом начале), уже заметно, что всего одно небольшое изменение дало существенный положительный эффект.
Теперь все внутренние элементы выровнены: заголовок,
текст, поля ввода данных, кнопка. Поля ввода данных несколько великоваты из-за отступов внутри формы, но все элементы
выровнены по сетке. По общему впечатлению виджет стал
более согласованным и менее беспорядочным.
Еще раз — только суть: в первую очередь выравнивайте
элементы. Добавляйте направляющие, чтобы выстраивать
элементы по невидимой сетке, и замечайте разницу даже
в несколько пикселей и нарушение выравнивания, которые
вносят в дизайн хаотичность. Временами можете отклоняться от правил и выходить за границы сетки, но ее использование для большинства элементов позволит добиться более
аккуратного и организованного дизайна.
А далее мы поговорим о цвете!

Tlgm: @it_boooks

РАЗДЕЛ 2.2

ЦВЕТ

ЦВЕТ ЯВЛЯЕТСЯ ОЧЕНЬ ВАЖНЫМ ЭЛЕМЕНТОМ ДИЗАЙНА,
но эта тема чрезвычайно обширна. Как выбрать подходящие
цвета, когда у нас в распоряжении весь спектр радуги?
Не зря теория цвета занимает в институтах целый семестр
обучения.

Когда я сама изучала теорию цвета, я должна была создать
идеальный градиент от черного к белому из 20 образцов
красок. Оптимальный способ решения этой задачи подразумевал создание 200 с лишним образцов: взять черную крас­
ку, добавить каплю белил, нарисовать образец… добавить
еще каплю белой краски, снова нарисовать образец… еще
каплю белой… очередной образец… а в конце — отобрать из
всех сотен получившихся образцов 20 идеальных, в порядке
градаций от белого к черному.

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

40

Глава 2

Tlgm: @it_boooks

Курсы по теории цвета включают в себя множество терминов, которые здесь мы опустим: цветовые схемы CMYK
и RGB, теория гармонии цвета и цветовой круг (цветовое
колесо), триадические и аналоговые цветовые схемы — все
это может вас очень быстро утомить. Я же планирую сделать
широкий обзор теории цвета максимально быстро
и комфортно для вас. В конце главы я назову ресурсы,
к которым можно обратиться, чтобы изучить весь представленный материал более тщательно.

Красный:
опасность,
важность, страсть

Оранжевый:
энергия, веселье,
общедоступность

Теория и принципы веб-дизайна

41

Tlgm: @it_boooks

Желтый:
дружелюбие,
счастье,
привлечение
внимания

Зеленый:
развитие, природа,
успех

Синий: доверие,
одобрение,
расслабление

42

Глава 2

Tlgm: @it_boooks

Фиолетовый:
роскошь,
романтика, тайна

Розовый:
легкомыслие,
невинность,
молодость

Коричневый:
устойчивость,
незатейливость,
приземленность

Теория и принципы веб-дизайна

43

Tlgm: @it_boooks

Черный: сила,
элегантность,
четкость

Белый: качество,
чистота, здоровье

Серый:
педантичность,
нейтральность,
профессионализм

44

Глава 2

Tlgm: @it_boooks

Слоновая кость:
миролюбие,
спокойствие,
изящество

Первая тема — это психология цвета, некий «трюк», который
можно использовать, чтобы ваша работа вызывала у окружающих различные чувства. Цвет влияет на восприятие
дизайна — на то, какие чувства он вызывает. В самых общих
чертах вот как воспринимаются определенные цвета:
yy красный: опасность, важность, страсть;

yy оранжевый: энергия, веселье, общедоступность;

yy желтый: дружелюбие, счастье, привлечение внимания;
yy зеленый: развитие, природа, успех;

yy синий: доверие, одобрение, расслабление;
yy фиолетовый: роскошь, романтика, тайна;

yy розовый: легкомыслие, невинность, молодость;

yy коричневый: устойчивость, незатейливость, приземленность;
yy черный: сила, элегантность, четкость;
yy белый: качество, чистота, здоровье;

yy серый: педантичность, нейтральность, профессионализм;

yy слоновая кость: миролюбие, спокойствие, изящество.
Теория и принципы веб-дизайна

45

Tlgm: @it_boooks

Когда вы хотите, чтобы дизайн вызывал ощущение успеха
и стабильности, то лучше использовать зеленый и синий1.
Сайт стильного современного отеля можно оформить в черных и фиолетовых цветах. Как правило, теплые цвета (оттенки красного и желтого) более энергичны и вызывающи, в то
время как холодные (оттенки синего и фиолетового) выражают стабильность и спокойствие.
Стоит отметить, что такие ассоциации присущи людям так
называемой западной культуры. Если вы разрабатываете дизайн для людей другой культуры, то лучше сперва и
­ зучить,
какие ассоциации вызывают различные цвета у ее представителей. Например, в Китае белый считается цветом траура,
тогда как на Западе в этом качестве выступает черный.

Вы также можете поиграть с насыщенностью цвета. К примеру, приглушенные оттенки на странице Keep Portland Weird
более спокойны и утонченны, нежели яркие насыщенные
цвета на сайте Citysets. В психологии цвета оттенки синего
относятся к расслаб­ляющим, но яркий, выразительный синий ощущается как энер­гичный (рис. 2-12).

Рис. 2-12. Голубой — приглушенный и спокойный, синий — яркий
и энергичный

Это не жесткие правила. Разумеется, даже при создании
спокойного, элегантного сайта вы сможете использовать
красный цвет.
1

46

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

Глава 2

Tlgm: @it_boooks

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

Готовые решения

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

Ограничьте цветовую схему

Старайтесь не выбирать цвета для дизайна случайным
образом. Ограничьтесь двумя-четырьмя цветами для
элементов сайта, так вы сделаете сайт менее перегруженным (рис. 2-13).

Рис. 2-13. На сайте Siminki используется ограниченная цветовая схема,
таким образом, он кажется более целостным
Теория и принципы веб-дизайна

47

Tlgm: @it_boooks

Используйте цвет для акцентирования
При построении цветовой палитры старайтесь не поддаваться желанию применить сразу все яркие цвета. Используйте,
к примеру, преимущественно серый или более натуральные
оттенки, добавив один яркий акцент, который позволит выделить важные элементы, не создавая хаоса в общем дизайне
(рис. 2-14).

Не забывайте про контраст

Светло-серый текст на белом фоне выглядит красиво, но
читается ужасно, особенно для людей с плохим зрением
(рис. 2-15). Цветной текст на цветном фоне также может создать сложности, если контраст будет недостаточным.

Рис. 2-14. На сайте Habita использованы сильные цветовые акценты

48

Глава 2

Tlgm: @it_boooks

Рис. 2-15. Светло-серый текст на белом фоне имеет низкий контраст
и трудно читается

Если сомневаетесь, используйте инструменты для проверки
контрастности, такие как WebAIM (http://hellobks.com/hwd/25).
Они помогут убедиться в читабельности текста.

Находите палитры на специальных сайтах

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

К примеру, Adobe Color CC создает палитру на основе выбранного вами базового цвета и различных цветовых схем —
я рекомендую «комплементарную» (рис. 2-16).

Теория и принципы веб-дизайна

49

Tlgm: @it_boooks

Рис. 2-16. Adobe Color CC (http://hellobks.com/hwd/28)

Сайт Material Design Palette (http://hellobks.com/hwd/29) автоматически отображает образец дизайна с выбранными цветами, что очень помогает визуализировать, как два цвета
работают вместе (рис. 2-17).

Есть еще одно интересное решение, Colormind (http://hellobks.
com/hwd/30), где генерация цветовых палитр происходит с помощью так называемого глубокого обучения. Здесь можно
перебирать готовые палитры, а также создавать их, устанавливая один или несколько определенных цветов (рис. 2-18).

50

Глава 2

Tlgm: @it_boooks

Рис. 2-17. Сайт Material Design Palette (http://hellobks.com/hwd/29)

Скриншоты продуктов Adobe перепечатаны с разрешения
Adobe Systems Incorporated.
Некоторые части этого раздела были воспроизведены на ­основе работы, созданной и предоставленной
Google, и ­использовались согласно условиям, описанным
в Creative Commons 3.0 Attribution License.

Имейте в виду, что при желании можете немного коррек­
тировать цвета в предустановленной палитре — они не
­заданы жестко. Я нередко сталкиваюсь с ситуацией, когда
мне нужно осветлить или затемнить оттенок, чтобы получить приемлемый контраст.

Теория и принципы веб-дизайна

51

Tlgm: @it_boooks

Рис. 2-18. Сайт Colormind (http://hellobks.com/hwd/30)

Живой пример
Не стоит излишне привязываться к одной цветовой палитре — применив ее цвета в своем дизайне, вы можете
обнаружить, что привычный излюбленный вариант не
оправдывает ваших ожиданий. Я обычно перебираю
по м
­ еньшей мере несколько вариантов палитр, пока
не нахожу ту, что производит наилучшее впечатление.

Давайте прогоним наш тестовый виджет через несколько
вариантов палитр (рис. 2-19).

Последний вариант — с хорошим контрастом и приятным
цветом текста, правильным цветовым акцентом на кнопке
и спокойным зеленым фоном — выглядит неплохо и определенно лучше исходной версии, где цвета вообще не было.

52

Глава 2

Tlgm: @it_boooks

Рис. 2-19. Перебор разных идей и вариантов, пока не найдено лучшее
решение
Теория и принципы веб-дизайна

53

Tlgm: @it_boooks

Хотите подробностей? Рекомендую свою любимую статью
по теории цвета для веб-дизайнеров под названием A Web
Developer Guide to Color, опубликованную в Smashing Magazine:
http://hellobks.com/hwd/31.

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

Tlgm: @it_boooks

РАЗДЕЛ 2.3

ТИПОГРАФИКА

ЕСЛИ В ДИЗАЙНЕ ПРИСУТСТВУЕТ ТЕКСТ, то вы имеете дело
с типографикой. Согласно Википедии, «Типогрˆафика — искусство оформления печатного текста, , свод строгих
правил, определяющих использование шрифтов в целях
создания наиболее понятного для восприятия читателем
текста». Говоря проще, текст должен быть привлекательным
и читаться легко.
Бывает, что шрифт красив, но не читабелен (сайты с новомодными тонкими и бледно-серыми шрифтами), а бывает,
что текст читается легко, но шрифты непривлекательны
(практически все сайты, где используются предустановленные системные шрифты). Преуспеть в обоих смыслах
не ­всегда легко, но есть много отличных подходов, которые
в этом помогут.

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

Вам может быть интересна разница между шрифтом и гарнитурой. Гарнитура — это «семейство», или набор, шрифтов.
Теория и принципы веб-дизайна

55

Tlgm: @it_boooks

Arial — это гарнитура, а Arial Bold — это шрифт. В связи
с этимданные термины зачастую используются взаимозаменяемо (если только вы не специалист в полиграфии), и мы
будем поступать так же.

Основы типографики

Начнем с рассмотрения нескольких важных терминов и понятий.

Категории шрифтов

Основное отличие между шрифтами состоит в наличии или
отсутствии у них засечек, представляющих собой мелкие декоративные элементы на концах букв1. Основной текст этой
книги напечатан шрифтом с засечками, а заголовки — рубленым шрифтом (рис. 2-20).

serif
Рис. 2-20. Рубленый шрифт Tisa Sans Pro — слева, шрифт с засечками
Tisa Pro — справа
1

56

В отечественной полиграфии традиционно применяются термины:
шрифты с ­засечками, или романские, и рубленые шрифты. Из зарубежной литературы в профессиональный обиход пришли термины серифные шрифты (с засечками), и sans serif (без засечек). — Примеч. ред.

Глава 2

Tlgm: @it_boooks

Как правило, печатный текст читается легче, если использованы шрифты с засечками, а текст на дисплее более
читабелен, если применены рубленые шрифты. Засечки
в печатном тексте помогают глазу цепляться за буквы и быстрее двигаться по строчкам, а вот дисплей мелкие засечки
воспроизводит плохо, и удобочитаемость снижается (хотя
с появлением новых экранов с хорошим разрешением это
отличие постепенно исчезает).
Шрифты можно дополнительно разбить на несколько категорий (рис. 2-21):
yy с плоскими засечками (slab serif) — эти засечки более квадратные и угловатые, чем стандартные;
yy моноширинные (monospace), где все буквы одного
кегля (размера), одинаковы по ширине (в отличие от
других гарнитур, где узкие буквы вроде «i» занимают
меньше места, чем широкие, вроде «m»).

yy акцидентные (display, экранные) — изысканные,
зачастую вычурные шрифты, не всегда удобочитаемые,
но вполне подходящие для создания акцентов — таких
как заголовки или крупный текст.

yy рукописные (handwritten) — шрифты, похожие на
написанные от руки. Их обычно используют в комбинации с акцидентными.

Рис. 2-21. Шрифт с плоскими засечками (Chaparral Pro),
моноширинный (Courier New), акцидентный (Buttermilk) и рукописный
(HanziPen TC)

Теория и принципы веб-дизайна

57

Tlgm: @it_boooks

Межстрочный интервал и высота строки
Убедитесь, что строки не расположены слишком близко друг
к другу, иначе текстовый блок будет выглядеть перегру­
женным. В типографике пространство между строками
текста абзаца называется межстрочным интервалом,
а в CSS — высотой строки (рис. 2-22).

Рис. 2-22. Излишняя плотность или разряженность текста снижают
читабельность. Пример в центре является оптимальным

Придерживайтесь золотой середины — текст сложно читать,
если межстрочные интервалы как слишком велики, так
и слишком малы. Дайте тексту немного «воздуха» — ровно
столько, чтобы повысить удобочитаемость и не перегружать
макет, но при этом не затруднять чтение. 1,6 — стандартный множитель для установки межстрочного интервала
(на­пример, размер шрифта 12 px — высота строки 19,2 px,
или размер шрифта 14 px — высота строки 22,4 px).
Экспериментируйте с межстрочным интервалом, чтобы
­подобрать оптимальный вариант в каждой конкретной
­ситуации.

58

Глава 2

Tlgm: @it_boooks

Кернинг и межбуквенный интервал
Кернинг — это процесс изменения расстояния между двумя
стоящими рядом буквами, а межбуквенный интервал — это
заданное расстояние между буквами определенного шрифта
(изменение этого параметра влияет на расстояние между
всеми соседними буквами в тексте, в то время как кернинг
изменяет расстояние только для одной пары букв). Как
и в случае с межстрочным интервалом, нам нужна золотая
середина. К счастью, значения межбуквенных интервалов
в браузере по умолчанию идеальны, при этом CSS позволяет настраивать расстояние между буквами, используя
свойство «межбуквенные пробелы» (letterspacing). Графические редакторы также дают возможность экспериментировать с кернингом. Крупные заголовки иногда смотрятся
инте­реснее при уменьшении межбуквенных интервалов,
а ­небольшой текст может выиграть от их ­увеличения
(рис. 2-23).

Рис. 2-23. Тесное расположение букв существенно усложняет чтение слов
и предложений

Теория и принципы веб-дизайна

59

Tlgm: @it_boooks

Принципы типографики
Теперь рассмотрим некоторые важные принципы, которые
необходимо помнить при работе с типографикой.

Используйте в дизайне не более
двух гарнитур

Использование множества гарнитур может породить хаос
и перегруженность макета. Упростите макет, выбрав одну
гарнитуру для заголовков и вторую — для основного
­текста. Так ваш дизайн станет намного аккуратнее. Создавать дополнительные стили в тексте вы можете с помощью
­жирного шрифта, курсива, верхнего регистра и прочих
­аналогичных приемов (рис. 2-24).

Рис. 2-24. Большое разнообразие гарнитур делает макет хаотичным (слева).
С меньшим числом гарнитур легче работать, а дизайн выглядит более
профессиональным

60

Глава 2

Tlgm: @it_boooks

Избегайте выравнивания по ширине
или по центру
Выровненный по ширине текст — это такой, который полностью вписывается в полосу (колонку). В этом случае текст
выравнивается по левому и правому полю одновременно.
Ориентируясь на раздел 2.1, в котором мы обсуждали выравнивание элементов, вы можете склониться к применению
выравнивания по ширине для получения ровной вертикальной линии справа (рис. 2-25).

Рис. 2-25. Текст с «рваным» правым краем (справа) читается легче, нежели
текст, выровненный по ширине (слева)

Однако текст, выровненный по ширине, создает ряд серьезных проблем:
yy при растягивании строки до полного формата полосы
между словами могут появиться несуразно большие
пробелы;

yy большие пробелы между словами могут выстраиваться вертикально друг за другом на нескольких строках,
образуя визуально неприглядные «реки» пустого пространства (рис. 2-26).

Теория и принципы веб-дизайна

61

Tlgm: @it_boooks

Если только у вас нет лишнего времени на настройки, применение выравнивания по ширине нецелесообразно. Лучше
примените выравнивание по левому краю (с «рваным» правым краем), чтобы обеспечить удобство чтения.

Рис. 2-26. Выровненный по ширине текст без переносов (слева) содержит
некрасивые дыры и «реки» пустого пространства (отмечены красным)

Выравнивание по центру
может вызывать сложности
Текст, выровненный по центру, может подойти для заголовков, но в случае сомнений лучше выравнивать все строки по
левому краю относительно сетки. Тем самым вы облегчите
чтение. Текстовые блоки, выровненные по центру, читаются
особенно сложно, потому что точка начала чтения в каждой
строке меняется (рис. 2-27).
62

Глава 2

Tlgm: @it_boooks

Рис. 2-27. Неровный левый
край центрированного
текста затрудняет чтение

Длина строки
Абзац будет намного сложнее читать, если его текст содержит больше 75 или меньше 45 символов в предложении.
­Убедитесь, что ваши абзацы имеют подходящую ширину
(или размер шрифта), чтобы строки были достаточной
­длины для оптимальной удобочитаемости (рис. 2-28).

Рис. 2-28. Чрезмерно длинные строки в абзацах сложно читаются

Готовые решения
Разобравшись со всей этой новой информацией, пора рассмотреть некоторые готовые решения, которые существенно
ускорят вашу работу с типографикой.

Бесплатные ресурсы для выбора шрифтов

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

63

Tlgm: @it_boooks

К счастью, такие сайты, как Google Fonts
(http://hellobks.com/hwd/32) (рис. 2-29) и Adobe Fonts
(http://hellobks.com/hwd/33) (рис. 2-30), предлагают прекрасный выбор шрифтов, которые можно использовать как для
веб-дизайна, так и для макетов в полиграфии. Google Fonts
позволяет скачивать шрифты, а предлагаемый Adobe функционал Creative Cloud делает веб-шифты Adobe доступными
для дизайна и в программах по созданию презентаций.

Рис. 2-29. Google Fonts (http://hellobks.com/hwd/32)

Скриншоты продуктов Adobe перепечатаны с разрешения
Adobe Systems Incorporated.
Части этой страницы воспроизведены из работы, созданной
и предоставленной Google, и использованы согласно условиям,
описанным в Creative Commons 3.0 Attribution License.

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

64

Глава 2

Tlgm: @it_boooks

Рис. 2-30. Adobe Fonts (http://hellobks.com/hwd/33)

Сайты с отобранными шрифтами
В одних только коллекциях Google Fonts и Adobe Fonts существуют тысячи гарнитур — как же выбрать наиболее подходящие именно вашему проекту?

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

Подобные ресурсы упрощают выбор подходящих для вашего
дизайна гарнитур, а также помогают найти наиболее красивые, созданные профессионалами шрифты (рис. 2-31).
Теория и принципы веб-дизайна

65

Tlgm: @it_boooks

Beautiful Web Type (http://hellobks.com/hwd/34)

Typewolf (http://hellobks.com/hwd/35)

Brick.im (http://hellobks.com/hwd/36)

Font Pair (http://hellobks.com/hwd/37)
66

Глава 2

Рис. 2-31. Несколько
сайтов, где отобраны
бесплатные шрифты
и рекомендуются
наилучшие варианты

Tlgm: @it_boooks

Живой пример
Вернемся к нашему виджету и ограничим его двумя шрифтами: один — с засечками, другой — рубленый (рис. 2-32).

Рис. 2-32. Новые шрифты, сочетающиеся друг с другом, придают виджету
более профессиональный вид

Эти новые шрифты (Tisa Pro и Tisa Sans Pro) выглядят более
профессионально и сочетаются куда лучше, чем четыре
шрифта, примененные в виджете ранее.
Как и цвет, типографика представляет собой огромную
и удивительную область. Надеюсь, что этот краткий раздел
неплохо осветил тему и теперь послужит хорошей основой
для дальнейшего изучения.

Сужая выбор шрифтов до тех, которые уже опробованы
другими, и уменьшая их число в своем дизайне, вы добьетесь
прекрасных результатов.
Далее мы займемся изучением белых пространств и насыщением дизайна свободным местом для «дыхания».

Tlgm: @it_boooks

РАЗДЕЛ 2.4

БЕЛОЕ ПРОСТРАНСТВО

ЕСЛИ ДЛЯ УЛУЧШЕНИЯ ДИЗАЙНА ВЫ РЕШИТЕ ИСПОЛЬЗОВАТЬ ВСЕГО ОДИН ИНСТРУМЕНТ, то я гарантирую: наиболее
значимым окажется белое пространство1. Это наилучшее
средство, чтобы избежать перегруженности в макете.
Белое пространство, иначе называемое негативным (negative space), представляет собой просто пустое пространство
(необязательно белого цвета). По сути это незаполненная
область страницы, совокупность всех пробелов между элементами (рис. 2-33, 2-34 и 2-35).
В процессе разработки дизайна вы можете ощутить необходимость заполнить макет информацией, ссылками
и прочими полезными элементами. В конце концов, белое
пространство — пространство, потраченное «зря», место,
куда вы могли бы добавить содержание, чтобы чита­тели
дольше остались на сайте или купили продукт.
Почему бы его не заполнить?
1

68

White space (белое пространство). В российской практике используются
термины «пустое пространство», «свободное пространство», «вайтспэйс». — Примеч. ред.

Глава 2

Tlgm: @it_boooks

Рис. 2-33. Белое пространство на сайте Squarespace

Рис. 2-34. Белое пространство (выделено красным) представляет область
страницы без содержания. Фоновые изображения и текстуры обычно
считаются белым пространством

Тем не менее нагруженный, перенасыщенный сайт — даже
с большим количеством информации — будет работать хуже,
чем тот, где упор сделан на простоту и «воздух». Белое пространство очень важно для улучшения общего впечатления
от дизайна и повышения его эффективности.

Теория и принципы веб-дизайна

69

Tlgm: @it_boooks

Рис. 2-35. Белым пространством также считается область между элементами
и строками текста

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

Белое пространство улучшает восприятие
Сайтами, перегруженными избыточной информацией, трудно пользоваться. Чем проще сайт, чем меньше он содержит
ненужных деталей, тем понятнее он пользователю
(рис. 2-36).

Белое пространство облегчает чтение

Здесь мы частично повторим материл последнего раздела,
тем самым его закрепив.
Помните межстрочный интервал, о котором мы говорили
в разделе о типографике? Такое белое пространство, как
межстрочный интервал, повышает удобочитаемость.
70

Глава 2

Tlgm: @it_boooks

Рис. 2-36. На Foursquare много белого пространства, и пользователь
сразу понимает, что читать и что ему делать на сайте.
Чем проще дизайн, тем меньше путаницы

Слишком маленький интерлиньяж приведет к тесноте строк,
а слишком большой также затруднит чтение, поэтому одно­
значно необходимо придерживаться золотой середины.
Достаточный объем «воздуха» между строками поможет
пользователям лучше воспринять то, что вы пытаетесь
­донести до них (рис. 2-37).
То же самое касается межбуквенных пробелов и кернинга.
Сделайте так, чтобы буквы не наезжали друг на друга,
но и не разбегались — облегчите чтение ваших текстов
(рис. 2-38).

Рис. 2-37. Текст с очень маленькими межстрочными интервалами читать
тяжелее
Теория и принципы веб-дизайна

71

Tlgm: @it_boooks

Рис. 2-38. Буквы, расположенные слишком тесно, сложно читать. Добавьте
немного «воздуха», чтобы облегчить чтение

Белое пространство усиливает Call-to-action
Чем более перегружен сайт, тем труднее пользователю разглядеть ваш Call-to-action1 . Независимо от того, какой элемент выступает в качестве Call-to-action, посетители сайта с большей
вероятностью увидят его и воспользуются, если такой элемент
окружить белым пространством. (рис. 2-39). Так пользователь
обратит внимание именно на Call-to-action и не станет переключаться на другие менее важные элементы.

Рис. 2-39. На сайте T4S вводный текст и кнопка выделяются за счет того, что
окружены обширным белым пространством
1

72

Call-to-action или CTA, буквально — «призыв к действию», — в электронной коммерции — элемент коммуникации (слово, кнопка, иконка,
баннер и др.), который призывает пользователя к взаимодействию:
покупке, подписке, заполнению формы, регистрации на сайте или
оформлению заявки. — Примеч. ред.

Глава 2

Tlgm: @it_boooks

Белое пространство задает изысканный тон
Открытые, пустые пространства ассоциируются с роскошью
и качеством, в то время как дизайн без «воздуха», с нагромождением элементов, наползающих друг на друга, производит впечатление дешевизны и хаоса — это как сравнивать
­витрину люксового магазина и оживленный блошиный
рынок.
Если вы хотите, чтобы ваш дизайн произвел впечатление
­роскошного, профессионального и элегантного, щедро
­используйте белое пространство (рис. 2-40 и 2-41).

Рис. 2-40. Перегруженные сайты, лишенные белого пространства,
выглядят дешево

Рис. 2-41. Сайт Helm, посвященный яхтингу, богат белым
пространством и потому выглядит роскошным
Теория и принципы веб-дизайна

73

Tlgm: @it_boooks

Немного теории
Как начинающий дизайнер вы инстинктивно будете экономно добавлять белое пространство, а не наоборот. Давайте
посмотрим, где взять то самое «пространство для маневра».

Интервалы между строк

Белое пространство начинается в основном тексте. Позвольте строкам «дышать». Убедитесь, что размер межстрочных
интервалов оптимален для удобства чтения (рис. 2-42).

Рис. 2-42. Белое пространство в виде межстрочных интервалов

Пространство между элементами
Разобравшись с основным текстом, можно перейти к пространству между элементами. Под ним подразумеваются
­области между содержанием и основным текстом, преды­
дущим и последующим абзацами или заголовком и абзацем — то есть между любыми соседними элементами
(рис. 2-43).

Пространство между отдельными элементами помогает
разделять их, чтобы глаз мог быстро выхватывать те или
иные элементы. На рис. 2-43 пространство между подпиской
74

Глава 2

Tlgm: @it_boooks

на новости (справа от заголовка статьи) и заголовком показывает нам, что это два разных элемента.

Рис. 2-43. Белое пространство в виде пробелов между элементами

Пространство между группами элементов

Если мы говорим о дизайне страницы в целом, нам нужно,
чтобы и вокруг групп элементов было достаточно свободного пространства. Это означает создание достаточного расстояния между колонками и рядами элементов, а также между
границами всех элементов страницы и границами ее контейнера, например окна браузера (рис. 2-44).

Рис. 2-44. Белое пространство в виде пробелов между группами
элементов
Теория и принципы веб-дизайна

75

Tlgm: @it_boooks

Готовые решения
Вот парочка простых советов для более эффективного использования белого пространства в дизайне.

Удваивайте белое пространство
между элементами

Добавьте больше белого пространства, чем кажется необходимым! Хотя есть риск переборщить, но на первых порах
­будет полезно взять за правило увеличивать расстояние
между элементами. Пробуйте каждый раз удваивать ту
­величину, которую инстинктивно находите подходящей.
­Выйдите за пределы комфортных для себя значений, сделайте перерыв, а затем оцените результат еще раз. То, что
­поначалу воспринималось излишне «дырявым», в итоге
может оказаться вполне нормальным и даже пропорциональным.

Убедитесь в оптимальном размере
межстрочных интервалов

Еще раз повторим информацию из раздела о типографике:
не забывайте устанавливать достаточные межстрочные
­интервалы, чтобы текст легко читался.

Живой пример

Уменьшение объемов белого пространства на моем личном
сайте показывает, насколько разительно белое пространство может изменить дизайн. Без белого пространства сайт
выглядит перегруженным и дилетантским. Добавление же
свободных областей, особенно добавление «воздуха» в центр
страницы, делает дизайн профессиональным и продуманным (рис. 2-45).
76

Глава 2

Tlgm: @it_boooks

Рис. 2-45. До и после добавления белого пространства на моем личном сайте.
Воздушный дизайн выглядит менее хаотичным

Теория и принципы веб-дизайна

77

Tlgm: @it_boooks

Теперь добавим в наш виджет побольше белого пространства: между отдельными строками текста и между отдельными элементами виджета (рис. 2-46).

Рис. 2-46. Добавление белого пространства между строками текста, между
элементами и вокруг элементов придает виджету более профессиональный
вид

Разве результат не выглядит более завершенным? Я также выровняла интервалы между элементами (равные пространства
между элементами внутри контейнера, равное расстояние от
заголовка до текста и от текста до формы). Такие пропорции
ликвидировали хаос и перегруженность.
Шрифт, цвет и выравнивание имеют большое значение, но
именно добавление «воздуха» в макеты — лучший инструмент в вашем арсенале, чтобы сделать дизайн аккуратным
и привлекательным.

Теперь предлагаю от небольших дизайнерских задач перейти к задачам макроуровня — займемся макетом в целом!

Tlgm: @it_boooks

РАЗДЕЛ 2.5

МАКЕТ И ИЕРАРХИЯ

В ПОСЛЕДНИХ НЕСКОЛЬКИХ РАЗДЕЛАХ РЕЧЬ ШЛА О КОНКРЕТНЫХ ВЕЩАХ: цвете, шрифте и белом пространстве.
Теперь же мы рассмотрим более абстрактные понятия:
макет и иерархию.

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

Элементы можно разместить буквально как угодно — как же
определить наиболее подходящее место для каждого?

В большинстве языков мы читаем слева направо, то есть
наши глаза естественным образом начинают просматривать
страницу с верхнего левого угла. Исследования показали, что
обычная схема просмотра сайтов пользователями повторяет
букву «F» (рис. 2-47 и рис. 2-48).

Теория и принципы веб-дизайна

79

Tlgm: @it_boooks

Рис. 2-47. Макет сайта Google Ventures — хороший пример следования
схеме «F»

1

3

2

4

5
Рис. 2-48. Тепловые карты, сделанные на основе отслеживания движения
глаз, демонстрируют, что пользователи просматривают сайты по схеме «F»

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

80

Глава 2

Tlgm: @it_boooks

А теперь о иерархии. Дизайнер должен помнить, что некоторые элементы сайта значимее других. Ваша задача — обозначить эту иерархию визуально, чтобы пользователи видели,
какие элементы важнее. По сути, визуальная иерархия направляет аудиторию и помогает ей решить, на что смотреть
в первую очередь (рис. 2-49).

Рис. 2-49. В левом блоке иерархии нет. Справа увеличенный размер одного
элемента выделяет его на фоне остальных

Части этой страницы воспроизведены из работы, созданной
и предоставленной Google, и использованы согласно условиям,
описанным в Creative Commons 3.0 Attribution License.
Страница без иерархии выглядит монотонной и скучной.
Есть несколько способов для обозначения важности и выделения объекта:

yy размер: объекты большего размера более важны и лучше привлекают внимание;
yy цвет: насыщенные цвета лучше видны в отличие от
бледных оттенков. Теплые цвета (красный, оранжевый,
желтый) более заметны, чем холодные (синий, фиолетовый, зеленый);

Теория и принципы веб-дизайна

81

Tlgm: @it_boooks

yy позиционирование: элементы, размещенные в верхнем левом углу, имеют более высокую важность;

yy контраст: элементы с сочетанием контрастных цветов
привлекают больше внимания, нежели монотонные;
yy белое пространство: элементы, расположенные
в ­центре белого пространства, выглядят более важ­
ными;

yy типографика: выбор шрифтов также может стать
индикатором иерархии. Использование одного шрифта
для заголовка и другого для текста создает визуальную
иерархию.

Типографика особенно важна в веб-дизайне. Посмотрите,
в следующем абзаце отсутствует визуальная иерархия, и по­
этому все фразы равнозначны:
У нас вечеринка! Приглашаем вас на очередную годовщину
Zuni Cafe. Мероприятие состоится в 18.00 в Zuni Cafe,
Нью-Йорк. Вход только в парадной одежде. Будем
благодарны за ответ.

Можно обозначить иерархию, добавив пробелы:
У нас вечеринка!

Приглашаем вас на очередную годовщину Zuni Cafe.
Мероприятие состоится в 18.00 в Zuni Cafe, Нью-Йорк.
Вход только в парадной одежде. Будем благодарны за ответ.

Если поиграть с типографикой и цветом, иерархия становится еще более очевидной:

У нас вечеринка!

Приглашаем вас на очередную годовщину Zuni Cafe.
Мероприятие состоится в 18.00 в Zuni Cafe, Нью-Йорк.
Вход только в

82

Глава 2

парадной одежде.

Будем благодарны за ответ.

Tlgm: @it_boooks

Все три версии читабельны, но последний пример визуально более интересен, и сразу становится очевидна иерархия
информации.

Как понять, верно ли вы установили иерархию в макете? Поможет так называемый тест с прищуриванием. Прищурьтесь,
глядя на свою работу, пока она не начнет расплываться.
Когда детали размыты, вы можете воспринимать элементы
макета только абстрактно. Вы сразу увидите, что всплывет
перед взором в первую очередь. На сайте New York Times
(рис. 2-50) выделяются логотип и изображения (особенно
оранжевая кнопка на объявлении, которая сама по себе не
идеальна, так как отвлекает от самого сайта). Среди содержимого колонок выделяются центральная картинка и крайняя статья слева — с самым крупным заголовком.

Рис. 2-50. Размытое изображение домашней страницы New York Times.
Когда текст становится нечитаемым, иерархию содержимого легко
проанализировать
Теория и принципы веб-дизайна

83

Tlgm: @it_boooks

Работая над дизайном, составьте список всех элементов
и ранжируйте их по степени важности. Затем посмотрите на
свой дизайн и ранжируйте элементы в зависимости от того,
насколько они выделяются в макете. Совпадают ли эти два
списка?

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

Если какой-либо элемент на странице должен выглядеть
более важным и быть выше с точки зрения визуальной
иерархии, то воспользуйтесь перечисленными ранее идеями — измените цвет или позиционирование, добавьте белое
пространство, улучшите типографику — играйте с дизайном,
пока элемент не станет визуально выделяться.
Если вы хотите нарушить схему «F» в своем проекте, то
можете задать нужную иерархию с помощью визуальных
инструментов, про которые я рассказывала. Например, привлечь внимание к элементу в верхней правой части экрана,
сделав его крупнее или ярче. Схема «F» неплоха для начинающих дизайнеров — типичное расположение элементов
обусловливает естественную иерархию. Сама же иерархия —
инструмент для того, чтобы ломать эту схему, сохраняя
естественность дизайна.

Живой пример

Обратимся к нашему виджету и посмотрим, как можно задать визуальную иерархию (рис. 2-51).

Два важных элемента, которые мы видим в первую очередь, —
это заголовок и кнопка авторизации. Заголовок отличается
от текста цветом и размером шрифта. Кнопка авторизации

84

Глава 2

Tlgm: @it_boooks

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

Рис. 2-51. Более яркий цвет кнопки авторизации выделяет ее
в визуальной иерархии. Мы же не хотим случайно сделать эту важную
кнопку незаметной!

Tlgm: @it_boooks

РАЗДЕЛ 2.6

ТЕКСТ

НА ПЕРВЫЙ ВЗГЛЯД РАЗГОВОР О ТЕКСТЕ в книге о дизайне
может показаться неуместным, но правильные решения
в отношении слов и текста в целом существенно влияют на
итоговую упорядоченность дизайна.

В этом разделе рассматриваются принципы оформления текста и приводится стратегия, применение которой побудит
пользователей с удовольствием читать ваши тексты, а следовательно, ваш дизайн будет работать.
Плотные абзацы текста усиливают ощущение перегруженности страницы, особенно когда текст просматривается на
экране (а не в печатном виде). Исследования показывают,
что онлайн-читатели в большинстве своем не читают содержимое сайтов «от корки до корки», а бегло просматривают.
Крупные куски текста с большой вероятностью будут пропущены (рис. 2-52).
Люди редко читают в Интернете слово за словом.
Вместо этого они сканируют содержимое страницы,
выхватывая отдельные слова и предложения.
How Users Read on the Web, Nielsen Norman Group
(http://hellobks.com/hwd/45)

86

Глава 2

Tlgm: @it_boooks

Рис. 2-52. Пользователи прочитают полностью только тот текст, который их
уже заинтересовал. В противном случае они лишь «просканируют» контент
в поиске чего-то, что зацепит внимание

Когда речь идет о контенте, то обычно справедлив принцип
«Чем меньше, тем лучше».

Да, при написании веб-контента велик соблазн уточнить
каждую деталь и использовать сложные профессиональные
выражения. Но вместо этого лучше использовать понятные
выражения и короткие фразы. Нужно писать так, чтобы и без
большого количества слов читатели понимали, что вы хотите им сказать. Большие куски текста — признак перегруженности. Хорошим правилом считается использовать не более
двух-трех предложений в каждом абзаце.
Старайтесь сокращать и упрощать огромные абзацы.
Вот отличный пример из книги Джайлса Колборна
Simple and Usable Web, Mobile, and Interaction Design
(http://hellobks.com/hwd/46).

Теория и принципы веб-дизайна

87

Tlgm: @it_boooks

Имейте в виду, что хотя Chrome для операционных систем Mac
и Windows тоже поддерживается, пользователям этого сайта
для получения лучших результатов рекомендуется использовать
последнюю версию браузера Firefox.

Этот текст технически верен и описывает все основные ­моменты, но содержит очень много слов. Его можно
­сократить:

Для получения лучших результатов используйте последнюю
версию Firefox. Chrome для Mac и Windows также
поддерживается.

Получилось так же корректно — здесь изложено все, что
мы хотели, но гораздо короче и легче для восприятия при
беглом чтении.

Когда дело доходит до написания текстов, сложно себя
ограничивать. Я все понимаю — вам хочется сказать так
много важного! Но помните: независимо от того, как много
вы напишете, читатель прочтет только 80, 100, ну, может,
200 слов — и это если сильно повезет.
Разместите больше текста, чем пользователь готов прочесть, — и он либо бегло пробежит взглядом, либо вообще
уйдет с сайта.
Если ценная информация запрятана глубоко внутри объемных текстов, то велик риск, что читатель истратит весь
лимит в 80 слов, не успев добраться до сути.

Чем больше контента вы размещаете, тем меньше контролируете, что же читатель воспримет на самом деле.
Если нет возможности сократить текст, то попробуйте разбить абзац на пункты. Вот пример:

88

Глава 2

Tlgm: @it_boooks

Мы внесли множество изменений: разделили главу, посвященную регистрации, на две части: о добавлении регистрации и об ассоциировании пользователей с объектами. Если
до этого она была огромной, то сейчас с ней работать куда
удобнее. Также были обновлены скриншоты админки, которые
теперь отображают новые стили Django 1.9. Помимо этого были
исправлены несколько мелких опечаток, а используемая нами
версия django-registration-redux повышена до 1.3. В довершение
ко всему, обновление коснулось и Введения.

Этот абзац будет гораздо удобнее читаться по пунктам:
Мы внесли множество изменений:

• Разделили главу, посвященную регистрации, на две части:
о добавлении регистрации и об ассоциировании пользователей с объектами. Если до этого она была огромной, то сейчас
с ней работать куда удобнее.
• Обновили скриншоты админки, которые теперь отображают
новые стили Django 1.9.
• Исправили несколько мелких опечаток и повысили используемую версию django-registration-redux до 1.3.
• Обновили Введение.

Маркеры и прочие визуальные элементы помогают читателю выхватывать из текстового блока интересные фрагменты, что повышает вероятность полного прочтения
материала.

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

Теория и принципы веб-дизайна

89

Tlgm: @it_boooks

Например:

Мы внесли множество изменений:

• Разделили главу, посвященную регистрации, на две части:
о добавлении регистрации и об ассоциировании пользователей с объектами. Ранее она была огромной, теперь же с ней
работать гораздо удобнее.
• Обновили скриншоты админки, которые теперь отображают
новые стили Django 1.9.
• Исправили несколько мелких опечаток и повысили используемую версию django-registration-redux до 1.3.
• Обновили Введение.

Наиболее важные части текста выделены жирным. Так
читателям при беглом просмотре легче выявлять наиболее
интересные фрагменты текста, чтобы потом перечитать,
если захочется.
И обратите внимание, что мы также изменили форматирование заголовка. Давайте более пристально посмотрим на
заголовки.

Один из лучших способов упорядочить контент — использовать заголовки. Заголовки должны выделяться на фоне
остального текста. Текст, снабженный заголовками, удобно
бегло просматривать и потом читать.

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

В качестве примера рассмотрим две версии моего сайта с ­рекламой других моих книг из серии Hello Web App.
На рис. 2-53 заголовок многословный и скучный. На рис. 2-54

90

Глава 2

Tlgm: @it_boooks

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

Рис. 2-53. Сайт Hello Web App с очень длинным заголовком. По смыслу он
верен, но совсем не цепляет

Рис. 2-54. Смысл этого заголовка не изменился, но он более интересный
и лаконичный. Самое же важное, что такой заголовок лучше работает с точки
зрения привлечения внимания к предлагаемой для читателя выгоде

Теория и принципы веб-дизайна

91

Tlgm: @it_boooks

Подобные изменения могут разительно повлиять на
результат. Согласно исследованию ресурса webprofits
(http://hellobks.com/hwd/47) (рис. 2-55), замена заголовков на те,
что демонстрируют выгоды продукта вместо его описания,
повысила показатель конверсии1 на 52,8 %.

Рис. 2-55. Переход на заголовки, говорящие о выгодах, привело
к повышению показателя конверсии на 52,8 %. Результат исследования
webprofits (http://hellobks.com/hwd/47)

Живой пример

Вернемся к нашему виджету! Изучив основы работы
с текстом, мы можем внести существенные изменения
(рис. 2-56).

Мы сократили количество текста, сделали его интересным
и привлекательным. Форма стала более дружественной,
язык — менее официальным, а кнопка вместо простой надписи Login («Авторизация») теперь призывает к действию Log
into your account («Войдите в свою учетную запись»). Все эти
изменения сделали текст удобочитаемым, призыв — более
понятным, функционал — не требующим долгого изучения.
1

92

Отношение числа посетителей сайта, выполнивших на нем какие-либо
целевые действия (например, покупку или регистрацию), к общему
числу посетителей сайта. — Примеч. ред.

Глава 2

Tlgm: @it_boooks

Рис. 2-56. Мы обновили тексты виджета, сделав контент более лаконичным,
понятным и интересным

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

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

Tlgm: @it_boooks

РАЗДЕЛ 2.7

ПОЛЬЗОВАТЕЛЬСКИЙ ОПЫТ

ЭТОТ РАЗДЕЛ ОБЪЕДИНИТ ВСЕ ВОЕДИНО. Усилия, которые
вы прилагаете, чтобы дизайн был простым и привлекательным, тексты лаконичными, а макеты понятны для навигации, — все это вместе взятое влияет на пользовательский
опыт.
Пользовательский опыт, который посетитель получает,
­взаимодействуя с вашим сайтом, и является наиболее важной целью дизайна.

Давайте разберем каждую составляющую пользовательского
опыта.

До начала дизайна

Перед тем как приступить к разработке дизайна, нужно ответить на несколько ключевых вопросов: кто ваш идеальный
пользователь? какова его личная цель? каковы ваши бизнес-цели? Исследование пользовательского опыта поможет
ответить на все эти вопросы.

94

Глава 2

Tlgm: @it_boooks

Например, посетитель вашего персонального сайта может
искать информацию о вашем бизнесе или работе (его личная
цель). При этом ваша бизнес-цель — сделать посетителей
сайта подписчиками своей новостной рассылки.
Другой пример. На странице нового приложения для iPhone
ваш пользователь ищет информацию об этом приложении
и возможность его скачать, а ваша бизнес-цель — получить
максимальное число скачиваний.
Мы всегда ориентируемся на два аспекта: достигает ли
­пользователь желаемого и достигаете ли вы своей бизнес-цели. Хорошо, когда ваш дизайн удовлетворяет обе
стороны.

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

Конкурентный анализ

Если коротко, то просто обратите внимание на своих конкурентов и проанализируйте, что у них получается хорошо,
а что не очень.

В разделе 3.1 «Поиск вдохновения» мы научимся подмечать на чужих сайтах удачные решения, которые можно
­применить в собственном дизайне. Анализ конкурентов
является важным этапом создания собственных решений —
таких, которые обеспечат положительный п
­ ользовательский
опыт. Анализ конкурентов дает вам эталон для подражания,
помогает реализовать их опыт на ­более высоком уровне
и впоследствии переманить ­клиентов.

Теория и принципы веб-дизайна

95

Tlgm: @it_boooks

Опросы и интервью
Как вы узнаете, чего хотят ваши клиенты и в чем нуждаются,
если не спросите у них самих? Многие веб-дизайнеры попадают в западню, берясь за разработку продукта для аудитории, которую не понимают. Например, вы принимаетесь за
приложение для планирования свадьбы, при том что свою
свадьбу еще не планировали. У вас, конечно, могут быть
кое-какие мысли и идеи на этот счет, но можно легко ошибиться, если не обсудите все с тем, кто реально планирует
свою свадьбу.
Вы должны очень ясно представлять, что ваш идеальный
пользователь хочет, каковы его потребности. Тогда вы
сможете спроектировать сайт так, что его посетители с легкостью будут решать свои задачи. А это, в свою очередь,
позволит и вам достигать того, чего хотите вы.

В процессе дизайна

Вряд ли вы захотите потратить время на реализацию дизайна в коде, а потом обнаружить, что посетители готового
сайта путаются в конкретном процессе или последовательности действий (например, при совершении покупки). Чтобы
избежать подобных ошибок, можно выполнить «пробный
пуск» проекта, используя вайрфреймы1, прототипы и юзабилити-тестирование.
1

96

Вайрфрейм (wireframe) — низкодетализированное некликабельное представление дизайна, четко показывающее основные группы
элементов, информационную структуру и описание взаимодействия
пользователя с интерфейсом и примерную визуализацию сайта.
Прототип — средне- или высоко­детализированное кликабельное
представление конечного продукта, имитирующее ­взаимодействие
пользователя с интерфейсом, как если бы это был готовый продукт.

Глава 2

Tlgm: @it_boooks

Вайрфреймы, прототипы
и юзабилити-тестирование
Вайрфреймы и прототипы представляют собой упрощенные эскизы вашего дизайна в низком качестве. Юзабилити-­
тестирование позволяет получить обратную связь по макету
сайта и взаимодействию с ним, прежде чем переходить
к полноценному дизайну. Мы изучим эти понятия более
подробно в разделе 3.3 «Прототипы».
С помощью вайрфреймов и прототипов вы можете создавать
черновые эскизы и показывать их другим для получения
обратной связи. Так вы поймете, хороши ли ваши решения
по макету и последовательности действий. Опыт и исследования показывают, что найти и исправить большие проблемы с юзабилити с помощью бумажного прототипа можно
не хуже, чем с экранным прототипом высокой точности.
Сэкономьте ценное время, протестировав макеты и последовательность действий на ранних этапах.

После запуска проекта

После запуска проекта необходимо отслеживать, действительно ли вы достигаете целей. Каков коэффициент
конверсии? Достаточно ли низок показатель отказов, то
есть процент людей, которые покинули сайт сразу после
загрузки? Получает ли сайт хорошие отзывы? Для ответа
на вопросы можно провести ряд тестов для измерения этих
показателей.

Теория и принципы веб-дизайна

97

Tlgm: @it_boooks

Регулярное юзабилити-тестирование
Важнейшим фактором организации хорошего пользовательского опыта является грамотный выбор сервисов аналитики
(таких как Google Analytics — http://hellobks.com/hwd/48) для
сбора данных, отражающих эффективность работы сайта
после запуска.

A/B-тестирование — это измерение эффективности изменений, внесенных в дизайн сайта, в сравнении с его текущей
версией (до внесения изменений). К примеру, можно проверить, с какой из двух версий заголовка совершается большее
число покупок на сайте. Подобные тесты можно выполнять
после запуска регулярно, чтобы постоянно вносить изменения в дизайн и улучшать работу сайта.
Юзабилити-тестирование — это процесс показа ваших
дизайнерских решений другим для получения обратной
связи и гарантии, что сайт удобен в использовании кому-то
еще, кроме вас. Более подробно эту тему мы разберем в раз­
деле 3.4 «Получение обратной связи».

Готовые решения

А теперь моя любимая часть: о главном, что нужно помнить,
когда речь идет о пользовательском опыте.

Помогите пользователю действовать,
как хотите вы

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

98

Глава 2

Tlgm: @it_boooks

Зачем делать кнопку «Отправить» тусклой, незаметной? ­Подобные кнопки должны быть яркими, чтобы
сделать ­очевидным призыв к отправке заполненной
­формы (рис. 2-57).

Ссылки на подписку на новости не должны затеряться
в тексте (помните, что люди просматривают сайты бегло).
Отображайте их на отдельной строке, чтобы они были более
заметны (рис. 2-58).

submit me

submit me

Рис. 2-57. Кнопка для отправки форм оченьважна (мы говорили об этом
в предыдущем разделе). Слева кнопку, не выделенную цветом, трудно сразу
заметить. Справа яркую кнопку сразу видно, и ею просто воспользоваться

I believe folks who know a bit
about design will be more
likely to hire a professional
designer when the time is
right. I’m a designer, and
even I hire designers for
things bigger than me. And if
you agree, you should join
my newsletter.

vs

I believe folks who know a bit
about design will be more
likely to hire a professional
designer when the time is
right. I’m a designer, and
even I hire designers for
things bigger than me.
If you agree, you should
join my newsletter.
email address

sign up

Рис. 2-58. Если вы хотите, чтобы на вашу рассылку подписывались, не
нужно прятать ссылку в тексте. Разместите ее обособленно и сделайте
отчетливо видимой

Теория и принципы веб-дизайна

99

Tlgm: @it_boooks

Обращайте внимание на размер сайта
Медленная загрузка приведет к тому, что пользователи будут покидать ваш сайт, так и не просмотрев его. Обращайте
внимание на размер изображений. Имея дома высокоскоростной интернет, легко забыть, что многие просматривают
сайты на смартфонах с медленным соединением или в кафетериях с ­перегруженной линией Wi-Fi. Также возьмите
в расчет JavaScript; работу сайта одинаково замедляет как
скачивание большого количества скриптов, так и медленно
работающие скрипты.

Проверьте работу своего сайта в разных браузерах и с разной
скоростью загрузки и убедитесь, что сайт грузится быстро.

Выполняйте юзабилити-тестирование

Юзабилити-тестирование мы разберем подробно в раз­
деле 3.4 «Получение обратной связи». Суть такова: демонстрируйте свой дизайн другим и собирайте их мнения, каким
бы трудным это ни казалось. Как дизайнеры мы естественным образом упускаем некоторые проблемы в своих работах,
поэтому важно уделять этой задаче достаточное внимание
и обнаруживать эти проблемы.

Включайте аналитику

Обязательно подключайте к своим сайтам сервисы для сбора
аналитики, чтобы можно было оценивать, как работает
дизайн после запуска. Рассмотрите, по крайней мере, использование Google Analytics (http://hellobks.com/hwd/48) или такой
платформы, как Segment (http://hellobks.com/hwd/49), которую
можно связать с Google Analytics и прочими аналогичными
платформами.

100

Глава 2

Tlgm: @it_boooks

Живой пример
Вернемся к нашему виджету (рис. 2-59). Мы видим, что кнопка авторизации здесь яркая и хорошо различима. Проблем
с отправкой формы у пользователей не возникнет.
Пользовательский опыт относится к тем вещам, которые
сложно описать в книге. Помните, вам нужно изо всех сил
стараться понять свою аудиторию, уделить внимание организации страниц сайта и перемещению пользователей по
сайту (а также убедиться, что это не вызывает сложностей).
Помимо этого необходимо собирать мнение пользователей
о вашем дизайне и отслеживать, насколько хорошо он работает после запуска.
Поздравляю читателей с завершением этого раздела!

Рис. 2-59. Пользовательский опыт идет рука об руку с визуальной иерархией.
Благодаря яркой контрастной кнопке форма теперь лучше приспособлена под
наши цели

Tlgm: @it_boooks

РАЗДЕЛ 2.8

ИЗОБРАЖЕНИЯ И ХУДОЖЕСТВЕННЫЕ
ЭЛЕМЕНТЫ

ДО СИХ ПОР МЫ РАБОТАЛИ ИСКЛЮЧИТЕЛЬНО С ЛИНИЯМИ,
рамками и текстом, но изображения (и такие художест­
венные элементы, как иконки и графика) тоже играют
важную роль. В этом разделе вы узнаете, где можно найти
изображения для своего проекта и как их эффективно использовать.
Первым делом мы разберемся с роялти и лицензирова­
нием. При том что большинство изображений в интернете
можно легко «Сохранить как» через контекстное меню, мы
не имеем права свободно использовать все, что найдем.
Изображения находятся под защитой авторских прав, и их
использование без разрешения правообладателя является
незаконным.
Здесь вам нужно иметь в виду следующие понятия:

yy Rights-managed images (изображения с управляемыми правами) должны включать дополнительные

102

Глава 2

Tlgm: @it_boooks

условия, указывающие доступные варианты использования изображения.

yy Royalty-free images (изображения без лицензионных отчислений). Их, как правило, можно бесплатно
использовать до тех пор, пока вы соблюдаете обозначенные условия. Например, многие бесплатные
изображения можно задействовать только при некоммерческом использовании, то есть нельзя вставлять их
в приложение, на котором вы потенциально зарабатываете деньги.

yy Creative commons — система, организованная для
создателей контента с целью сделать их работы доступными для использования без запроса официального разрешения. Изображения Creative commons могут
лицензироваться несколькими способами: требовать
указывать авторство, запретить производные (то есть
самостоятельное редактирование), запретить коммерческое использование или, наоборот, разрешить любое
использование.

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

Основы

Вкратце разберем основные принципы, о которых нужно
помнить, используя изображения в своих проектах.

Теория и принципы веб-дизайна

103

Tlgm: @it_boooks

Фотографии и иконки не обязательны
Не думайте, что вам обязательно нужно использовать
в дизайне фотографии людей. Шрифт и скриншоты вашего
продукта могут оказать не меньшее влияние (рис. 2-60).

Оперируя типографикой — различными шрифтами и сти­
лями, можно создать красивый и лаконичный сайт без нужды возиться с картинками.

Если вы создаете продукт для интернета, то такому продукту не нужно почти ничего, кроме скриншотов (рис. 2-61).
Художественные элементы и фотографии вы всегда успеете
добавить позже — начав с чистой, текстовой версии сайта,
вы ускорите его запуск, не утруждая себя всеми этими деталями.

Рис. 2-60. В изысканном успешном дизайне сайта Джона Грубера
Daring Fireball использован только текст (за исключением
единственного значка логотипа)

104

Глава 2

Tlgm: @it_boooks

Рис. 2-61. Сайт T4S лаконичен и содержит лишь скриншоты их продуктов

Лица как мощный инструмент

Счастливые лица вызывают позитивные эмоции. Злые же,
наоборот, пробуждают негатив. Используйте изображения
лиц, чтобы добавить в дизайн эмоции и привлечь внимание
посетителей к определенным частям страницы (рис. 2-62).
Это очень мощный инструмент в арсенале дизайнера.

Обращайте внимание на размер файлов

Изображения могут моментально увеличить размер сайта,
замедлив его загрузку. Это разочарует посетителей, и они
тут же улизнут. Кроме того, все больше устройств
переходят на использование retina-экранов (экраны
с повышенной плотностью пикселей). На таких экранах
фотографии и ­картинки в старых форматах выглядят
размытыми.

Теория и принципы веб-дизайна

105

Tlgm: @it_boooks

Рис. 2-62. Личный сайт Дэна Молла. Фотография Дэна привлекает наше
внимание, а направление его взгляда указывает на вводный текст

Несколько принципов на заметку:

yy Убедитесь, что ваши изображения имеют размер не
больше максимально возможного. Нет смысла вставлять картинку 2000px во фрейм 1200px.
yy Обеспечьте два набора изображений: стандартных
и альтернативу для retina-экранов. Настройте свой
HTML и CSS так, чтобы пользователи с retina-экранами загружали более детализированные изображения
в высоком качестве, а обладатели традиционных
дисплеев получали их уменьшенные версии.
Вот отличное руководство для реализации этого:
http://hellobks.com/hwd/54.

106

Глава 2

Tlgm: @it_boooks

Внимательно выбирайте стоковые
фотографии
По запросу «стоковые фото» в Google вы получите множество
сайтов, которые якобы предлагают отличные варианты (как
за деньги, так и бесплатно), но здесь будет много низкокачественных изображений. Загляните на некоторые глобальные
ресурсы, такие как iStock (рис. 2-63), но постарайтесь найти
там изображения, которые выглядят более естественно, чем
приведенное на рисунке (цифровое проектирование в будущем).

Рис. 2-63. На iStock (http://hellobks.com/hwd/53) есть много стоковых
изображений, но среди всего разнообразия стоит остерегаться слишком
вычурных и неестественных

Теория и принципы веб-дизайна

107

Tlgm: @it_boooks

Иконки
При том что изображения отлично подходят для фона
и крупных элементов, иконки выполняют скорее вспомогательную роль — это всего лишь мелкая графика, сопровож­
дающая текст и дизайн. Иконки вовсе не обязательны, но
могут придать проекту уникальность.
Иконки способствуют восприятию информации, создавая графическое представление контента. На сайте Kite
иконки, абстрактно представляющие содержание, ведут
посетителя к трем колонкам различных разделов ресурса
(рис. 2-64).

Естественно, здесь необходимо также уделить внимание вопросу лицензирования. Аналогично фотографиям, на иконки
тоже распространяется авторское право.

Рис. 2-64. Иконки на сайте Kite просты и в то же время эффективны

108

Глава 2

Tlgm: @it_boooks

Готовые решения

Сайты стоковых фото
Моим любимым ресурсом для поиска реалистичных фото
является Unsplash (http://hellobks.com/hwd/56) (рис. 2-65), где
размещаются изображения с открытой лицензией Creative
Commons.
Среди прочих аналогичных сайтов могу отметить IM Free
(http://hellobks.com/hwd/60), picjumbo (http://hellobks.com/hwd/61),
­iStock (http://hellobks.com/hwd/62), Gratisography
(http://hellobks.com/hwd/63) и PhotoPin
(http://hellobks.com/hwd/57) (рис. 2-66).

Рис. 2-65: Unsplash (http://hellobks.com/hwd/56) отлично подходит
в качестве источника реалистичных стоковых изображений

Теория и принципы веб-дизайна

109

Tlgm: @it_boooks

Рис. 2-66: Поиск по Flickr изображений с лицензией Creative Commons на
сайте PhotoPin (http://hellobks.com/hwd/57)

Художественное оформление
(иконки, графика и иллюстрации)

Чтобы с помощью иконок добавить изюминку в свой дизайн, идите либо на сайты с готовыми иконками, например
The Noun Project (http://hellobks.com/hwd/58) (рис. 2-67), либо
закажите их разработку на таких ресурсах, как Fiverr
(http://hellobks.com/hwd/59) (рис. 2-68) или Upwork
(http://hellobks.com/hwd/64).

Рис. 2-67. На сайте The Noun Project (http://hellobks.com/hwd/58) есть много
разных иконок с открытой лицензией Creative Commons, поэтому их можно
смело использовать в своих проектах
110

Глава 2

Tlgm: @it_boooks

Рис. 2-68. Хотите заказать разработку иконок? Обратитесь к таким ресурсам,
как Fiverr (http://hellobks.com/hwd/59)

Живой пример
Наш виджет уже стал удобочитаемым, грамотно структурированным и удобным в использовании. Теперь добавим
немного изящности с помощью фонового рисунка, легкого
затенения и забавной иконки — внешняя привлекательность виджета существенно возрастет (рис. 2-69). Зачастую
можно обойтись и без этих украшательств (лично я нередко
исключаю такую работу в мелких проектах), но здесь мы
видим, что немного потраченного на доработку дизайна времени вполне оправдано.
В завершение главы мы рассмотрим несколько «вкусных»
­дизайнерских приемов, не освещенных в предыдущих
­разделах.

Теория и принципы веб-дизайна

111

Tlgm: @it_boooks

Рис. 2-69. Наш виджет и так был неплох, но добавление фонового рисунка,
легкого затенения и забавной иконки подняло качество на новый уровень

Tlgm: @it_boooks

РАЗДЕЛ 2.9

ДОПОЛНИТЕЛЬНЫЕ НЮАНСЫ

ГЛАВУ МЫ ЗАКОНЧИМ тем, что рассмотрим некоторые любопытные дизайнерские приемы. Мы обобщим кое-что из
затронутого в предыдущих разделах, а также обсудим новое,
что нельзя было отнести ни к одной из рассмотренных ранее
тем. Все это очень интересно и должно добавить в вашу дизайнерскую работу больше красок.

Начинайте с простого

Если вы начинающий веб-дизайнер, осознанный выбор простых интерфейсов и дизайнерских решений сильно облегчит вам жизнь. Простые макеты, простой пользовательский
интерфейс (UI) и простые решения для пользовательского
опыта (UX) могут навеять скуку (хотя ничего скучного в них
нет!), но они эффективны и новичкам проще их реализовать
(рис. 2-70).
Не бойтесь начинать с малого — в конце концов, после первой итерации можно добавить дополнительные элементы
и внести изменения в дизайн.

Теория и принципы веб-дизайна

113

Tlgm: @it_boooks

Рис. 2-70. Сайт Appcanary прост и очень эффективен

Ориентируйтесь на «правило третей»
«Правило третей» — это принцип, обычно применяемый
в фотографии. Центральное расположение объекта делает
фотографию скучной. Рекомендуется разделить кадр на
три части по горизонтали или по вертикали. Эти линии или
точки их пересечения — отличные направляющие для размещения объектов на фото. Этот прием позволяет сделать
фотографии композиционно более интересными (рис. 2-71).
Этот принцип также применим и в веб-дизайне. Именно
­поэтому сайты с версткой в три колонки более привлекательны. По «правилу третей» также можно размещать
фоновые изображения и важные элементы (например,
лица) (рис. 2-72).

Конечно, это еще одно правило, которое можно (а зачастую
и нужно) нарушать, но и забывать о нем не стоит.

114

Глава 2

Tlgm: @it_boooks

Рис. 2-71: «Правило третей». Объекты находятся не в центре, а вдоль линий,
делящих фотографию на три части, или в точках их пересечения. Такой макет
смотрится более интересно

Рис. 2-72. Композиция фона страницы сайта Comovee построена по «правилу
третей»

Теория и принципы веб-дизайна

115

Tlgm: @it_boooks

Избегайте чистого черного
Чистый черный, который в природе не встречается, может
сделать ваш дизайн излишне строгим и неестественным.
Лучше использовать оттенки черного. В шестнадцатеричном представлении это может быть, например, #222222,
отлично подходящий для заголовков; #444444 — для текста.
При этом избегайте #000000. Также можете использовать
CSS-свойство RGBA (color: rgba(0,0,0,0.2);), что позволит
присвоить прозрачность тексту вместо использования чистого серого (рис. 2-73 и рис. 2-74).

Рис. 2-73. Черный цвет шрифта читабелен, но слишком строг и немного
напрягает зрение

Рис. 2-74. Темно-серый цвет шрифта тоже читабелен, при этом легче
воспринимается на экране компьютера
116

Глава 2

Tlgm: @it_boooks

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

Свет должен падать сверху

Если вы добавляете элементам дизайна тени или градиенты, то изображайте так, будто свет либо падает сверху, либо
направлен фронтально (рис. 2-75). Объекты, «подсвеченные»
снизу, выглядят неестественно, ведь обычно свет падает
сверху (солнце, лампы и т. д.) (рис. 2-76).

Рис. 2-75. Градиенты
«подсвечивания» сверху: будто
кнопка освещена естественным
светом

Рис. 2-76. Градиенты
«подсвечивания» снизу:
«освещение» кнопки выглядит
неестественно

Контраст подчеркивает главное
Работая с общим дизайном, виджетами и формами, вы можете экспериментировать с контрастом, выделяя (или приглушая) те или иные элементы. Это особенно хорошо работает
с элементами форм, когда нужно визуально обозначить, что
является заголовком поля, а что — вспомогательным текстом (рис. 2-77).

Теория и принципы веб-дизайна

117

Tlgm: @it_boooks

Рис. 2-77. Вспомогательный текст формы светлее, что указывает на его
меньшую значимость

Меняем фон — изменяем цвет

Красивый персиковый цвет в вашей палитре может не­
ожиданно оказаться коричневым, если фон вокруг станет
ярко-­оранжевым (рис. 2-78). И дело не в палитре, а в зрении — наше восприятие цвета определяется контекстом.
Смело изменяйте цвета палитры. Пусть цвет выглядит
таким, каким вы его определили, даже если меняете фон.
Палитра — это не то, что высечено в камне.

Рис. 2-78. Внутренние квадраты одного цвета. Но тот, что справа, выглядит
темнее — ближе к коричневому
118

Глава 2

Tlgm: @it_boooks

Будьте внимательны при наложении текста
на изображение
Мы разбирали типографику, удобочитаемость и изображения в разных разделах. Наложение текста на изображение
иногда вызывает сложности, так как картинка может ухудшить читабельность текста (а следовательно, то, насколько
хорошо работает ваш дизайн) (рис. 2-79). Если такая проблема возникла, попробуйте наложить поверх изображения прозрачный фон (обычно используется черный, но можно также
рассмотреть и белые тона) (рис. 2-80). Еще можно добавить
монотонную заливку позади текста или размыть фоновое
изображение.

Рис. 2-79. Фоновое изображение может сделать текст нечитаемым

Рис. 2-80. Затемнение фона обеспечивает читаемость текста
Теория и принципы веб-дизайна

119

Tlgm: @it_boooks

Советы при проектировании порядка
действий пользователя
Цель этой книги — научить проектировать веб-страницы,
которые будут побуждать нового посетителя сайта к совершению определенного действия. При этом мы не хотим, чтобы пользователь тратил время на изучение порядка шагов
на сайте для достижения результата.
Есть внутренние инструменты, которые будут использоваться многократно каждый день и которые позволяют
добиться компромисса между необходимостью освоения
посетителями порядка действий на сайте и повышением эффективности этих действий. Например, это может
быть использование сочетания клавиш или размещение
всей ­необходимой информации в одном месте, даже если
сайт ­будет выглядеть перегруженным и хаотичным. Блумбергский ­терминал хоть и пугает новичков, но незаменим
для экспертов. Он является примером, когда перегруженность профессионального интерфейса создана намеренно
(рис. 2-81).

Конечно, хорошо было бы иметь идеальный результат: создать дизайн, который будет и интуитивен, и красив, позволяя пользователям выполнять любую задачу максимально
быстро. Однако реальность такова, что обычно нам нужно
уступить либо в простоте, либо в функциональности. При
этом решение, чему отдать предпочтение, должно приниматься осознанно.
На этом главу с теорией и готовыми решениями, пожалуй,
можно закончить.
Раздел за разделом мы постепенно улучшали наш виджет.
­Смотрите, что получилось (рис. 2-82).

120

Глава 2

Tlgm: @it_boooks

Рис. 2-81. Дизайн блумбергского терминала перегружен и хаотичен. Но так
и задумано

Рис. 2-82. Наш виджет: как было — как стало. В каждом разделе мы вносили
улучшения, делая виджет более красивым и удобным

Смотрится отлично!

Tlgm: @it_boooks

Tlgm: @it_boooks

3

ГЛАВА 3

ПРОЦЕСС ДИЗАЙНА И ВЫРАБОТКА
ПРОФЕССИОНАЛЬНОГО ВИДЕНИЯ

ОСВОИВ ПРИНЦИПЫ ДИЗАЙНА и разобрав его составляющие, можно переходить к самому процессу. Если с предыдущими разделами вы получили целый поток теории, то
дальше вам предстоит соединить теорию с практикой, что
поможет реализовать ваши дизайнерские проекты.

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

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

ПРОЦЕСС ДИЗАЙНА

123

Tlgm: @it_boooks

РАЗДЕЛ 3.1

ПОИСК ВДОХНОВЕНИЯ

ЧТО НУЖНО СДЕЛАТЬ В ПЕРВУЮ ОЧЕРЕДЬ, начиная дизайн-проект?

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

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

Где найти такие примеры? Существует множество сайтов по
веб-дизайну, где собраны и находятся в общем доступе очень
хорошие решения (рис. 3-1).

124

Глава 3

Tlgm: @it_boooks

The Best Designs (http://hellobks.com/hwd/67)

Unmatched Style (http://hellobks.com/hwd/68)

Awwwards (http://hellobks.com/hwd/69)

Рис. 3-1. Несколько вариантов для поиска вдохновляющих примеров
веб-дизайна
ПРОЦЕСС ДИЗАЙНА

125

Tlgm: @it_boooks

Site Inspire (http://hellobks.com/hwd/70)
Рис. 3-1 (продолжение)

Разумеется, нельзя красть чужой дизайн. Даже если вы
найдете то, что, как вам кажется, стоит повторить, то не передирайте все «от корки до корки». Вы всегда можете вдохновиться макетом, цветовым решением, художественными
элементами или типографикой и применить те или иные решения в собственном дизайне. Уделяйте внимание не всему
проекту целиком, а конкретным понравившимся деталям.

При этом ваша задача как дизайнера не в том, чтобы каждый
раз «изобретать велосипед». Отмечая для себя признанные
в профессиональной среде и хорошо работающие решения,
вы сможете создавать макеты или программировать порядок действий на сайте, упрощая для пользователей навигацию.
При создании дизайна к серии книг Hello Web App я вдохновлялась прекрасными книгами серии A Book Apart (рис. 3-2).

126

Глава 3

Tlgm: @it_boooks

Рис. 3-2. Мои книги Hello Web App — сверху, а красиво оформленная
серия A Book Apart — снизу

Я очень горжусь своим дизайном для Hello Web App, но мне
вряд ли удалось бы добиться такого результата, не возьми я за основу A Book Apart. Рассмотрев эти книги, я лучше
представила оптимальный размер и плотность шрифта,
а едино­образные яркие цвета вдохновили дизайн обложки
Hello Web App.

ПРОЦЕСС ДИЗАЙНА

127

Tlgm: @it_boooks

Пабло Пикассо высказался отлично: «Хорошие художники
копируют, великие крадут». Когда вы находите нечто, что
вы хотели бы сделать сами — будь то выбор макета, цвета,
шрифта и т. д., — возьмите это в качестве основы для создания ­чего-то похожего, но не точной копии.

Лучшее, что можно сделать для совершенствования себя как
дизайнера, — это критически мыслить, глядя на чужие работы, и оценивать, что в них хорошо, а что — нет. Отличная
практика для поиска вдохновения!

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

Давайте возьмем в качестве примера дизайн домашней страницы GitHub (рис. 3-3).
Если оттолкнуться от принципов, представленных в главе 2
«Теория и принципы веб-дизайна», что, на ваш взгляд, здесь
сделано хорошо? Я выделила некоторые детали:
yy Много белого пространства. И сверху, и снизу заголовка, текста и формы большой объем белого пространства, что притягивает внимание и делает акцент
на содержании. При этом белого пространства как раз
в меру — ни много ни мало.

yy Форма регистрации выведена на передний план.
Не нужно переходить со страницы на страницу — на
GitHub легко пройти регистрацию прямо на первой
странице. Заметьте, поле «Имя пользователя» выделено по умолчанию — пользователь может начать вводить данные немедленно.

yy Важные слова выделены жирным и содержат ссылки на содержимое сайта. И opensource, и business

128

Глава 3

Tlgm: @it_boooks

Рис. 3-3. У сайта GitHub очень привлекательная домашняя страница —
отлично подходит для тренировки выбора хороших дизайнерских
решений

выделены жирным, более контрастным шрифтом
и являются гиперссылками. Вам сразу понятно, в каких
двух областях специализируется GitHub.

yy Прозрачный фоновый рисунок не дает белому
пространству выглядеть абсолютно пустым. Представьте, если бы фон был монотонно серым — дизайн
все равно выглядел бы хорошо, но не казался бы таким
изысканным. Тонкий узор наполняет белое пространство, придавая основному содержимому дополнительный лоск.

yy Для основной кнопки выбран яркий, приметный
цвет. Большая часть дизайна выполнена в темных и серых тонах, на фоне чего отчетливо выделяется ярко-зеленая кнопка «Отправить».

Какие еще удачные дизайнерские решения вы можете назвать?

ПРОЦЕСС ДИЗАЙНА

129

Tlgm: @it_boooks

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

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

Gulp

Rouge
Рис. 3-4. Удачные решения для домашних страниц нескольких проектов
с открытым исходным кодом — для вдохновения
130

Глава 3

Tlgm: @it_boooks

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

Наглядным образцом в главе 2 у нас выступал виджет. В этой
главе мы создадим домашнюю страницу для проекта с открытым исходным кодом. Начнем с поиска очевидно удачных
и визуально интересных домашних страниц других аналогичных проектов (рис. 3-4).

Travis CI

Mocha JS
Рис. 3-4 (продолжение)

ПРОЦЕСС ДИЗАЙНА

13 1

Tlgm: @it_boooks

Существует ряд трендов, которые будет кстати реализовать
и в нашем дизайне:
yy много белого пространства — домашние страницы
проектов с открытым исходным кодом довольно просты (по сравнению, например, с домашней страницей
газеты), а воздушный дизайнерский стиль приятно
контрастирует с другими сайтами, адресованными
разработчикам;

yy выбор ярких цветов — либо для фоновой заливки,
либо для подсвечивания на белом фоне важных элементов страницы;
yy внятные, выделяющиеся заголовки (заголовки,
которые объясняют применение тех или иных инструментов);
yy код в центре внимания — логично, что продукт, созданный для разработчиков, должен демонстрировать
свой код, начиная с домашней страницы, а не прятать
его.

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

Tlgm: @it_boooks

РАЗДЕЛ 3.2

ПЛАНИРОВАНИЕ

КОНЕЧНО, ПОЙМАВ ВДОХНОВЕНИЕ, МОЖНО НЕЗАМЕДЛИТЕЛЬНО БРОСИТЬСЯ ПИСАТЬ КОД и сразу начать создание
сайта. Но есть промежуточный этап дизайна — создание
плана, составление списка идей и эскизов макетов, а также
создание мокапа. Все это поможет вам обдумать больше идей
и создать качественный дизайн в меньшие сроки. Немного
усилий на старте сэкономят много времени впоследствии.
Вы сильно облегчите себе жизнь, если осуществите базовое
планирование до разработки эскизов и основного дизайна.
Сколько страниц вам нужно? Каким будет контент? Какие
потребуются формы и сколько должно быть полей?
Наш проект с открытым исходным кодом и со ссылками
на внешнюю документацию будет состоять всего из одной
домашней страницы, поэтому и план будет достаточно простым. Всего одна страница!
Составим список элементов, которые нам понадобятся на
странице:
yy логотип/название проекта;

yy заголовок, объясняющий суть проекта;
ПРОЦЕСС ДИЗАЙНА

133

Tlgm: @it_boooks

yy меню со ссылками на внешнюю документацию, ведущие на ресурс Read the Docs, страницу GitHub и Twitter
автора;
yy блок с кодом (демонстрирующий, насколько он прост
в установке);
yy три блока, более подробно описывающие преимущества и особенности продукта;
yy положительный отзыв участника проекта;
yy повтор меню в подвале сайта.

Большинство сайтов не отличаются такой же простотой.
Поэтому давайте продумаем и другой сценарий, например
сайт с портфолио дизайнера Джейн, где потребуется больше
страниц.

Сначала определим, какие именно страницы нужны для личного сайта Джейн:
yy домашняя страница: первая страница, которую видят
посетители, заходя на сайт;
yy страница «Обо мне»: углубленное знакомство с бэкграундом и опытом Джейн;
yy страница «Портфолио»: обзор проектов Джейн;

ƒƒ отдельные страницы проектов: для них будет
использоваться общий макет, значит, можно объединить их в одну категорию;

yy страница «Контакты»: страница с адресом и контактными данными Джейн.

Мы сходу видим, что здесь у нас пять основных типов страниц, для которых нужно разработать макеты. Определившись со списком основных страниц, нужно решить, что мы
хотим видеть на каждой.

134

Глава 3

Tlgm: @it_boooks

yy На всех страницах:

ƒƒ личный логотип или имя;

ƒƒ верхнее меню, перечисляющее все страницы сайта
верхнего уровня — только четыре основные страницы (без домашней и отдельных страниц портфолио);
ƒƒ меню в подвале сайта после основного содержимого
страницы.

yy Домашняя страница:

ƒƒ краткое, но яркое описание Джейн;
ƒƒ фотография Джейн.

yy Страница «Обо мне»:

ƒƒ абзац с более подробным описанием Джейн и ее
деятельности;
ƒƒ другая фотография Джейн.

yy Страница «Портфолио»:

ƒƒ несколько блоков — по одному для каждого проекта
Джейн: с фотографией/скриншотом проекта, названием и ссылкой на отдельную страницу проекта.

yy Отдельные страницы проектов:

ƒƒ изображение, представляющее проект;
ƒƒ подробное описание проекта;

ƒƒ ссылки на внешние ресурсы (код на GitHub, запущенный сайт и т. д.).

yy Страница «Контакты»:

ƒƒ краткий вступительный абзац;
ƒƒ e-mail и адрес;

ƒƒ форма обратной связи с полями «Имя», «E-mail», полем для обращения/вопроса и кнопкой «Отправить».
ПРОЦЕСС ДИЗАЙНА

135

Tlgm: @it_boooks

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

Tlgm: @it_boooks

РАЗДЕЛ 3.3

ПРОТОТИПЫ

ОПРОБОВАТЬ СВОИ ИДЕИ НА ПРОТОТИПАХ гораздо быстрее,
нежели на готовом сайте, поэтому не переходите сразу
к написанию кода. Обычно создание прототипа происходит
параллельно с поиском вдохновляющих примеров. Отмечайте интересные идеи по мере их нахождения и сразу делайте скетчи, чтобы оценить, могут ли те или иные решения
­вписаться в дизайн.

Создание скетча может испугать вас, но на деле это не так уж
и страшно. Возможно, вы уже видели скетчи сайтов — такие,
как на рис. 3-5.
Если хотите, то можете делать скетчи, подобные тому, что
приведен на этом рисунке, но на самом деле начальные
наброски создаются не так. Скетч — вещь абстрактная,
включает минимум деталей и требует вашего воображения,
чтобы собрать все воедино. Линии и прямоугольники —
их достаточно, чтобы зарисовать идеи макетов и увидеть
общий вид дизайна (рис. 3-6).

ПРОЦЕСС ДИЗАЙНА

137

Tlgm: @it_boooks

Рис. 3-5. Для скетча обычно не требуется так много деталей

Рис. 3-6. Скетчи с минимумом информации. Волнистые линии изображают
заголовки или крупный шрифт, линии — основной текст, прямоугольники —
это кнопки, а зачеркнутые прямоугольники — картинки
138

Глава 3

Tlgm: @it_boooks

Это позволяет легко и быстро зарисовывать свои замыслы.
Ниже приведем еще несколько примеров из проекта по изменению дизайна сайта Hello Web Books, которые я взяла из
своего блокнота (рис. 3-7).

Рис. 3-7. Черновики (оцифрованные) скетчей из моего блокнота,
в котором я планировала новый дизайн сайта Hello Web Books
ПРОЦЕСС ДИЗАЙНА

139

Tlgm: @it_boooks

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

Вы можете улучшить скетчи, добавив затенение или различные оттенки серого, но на начальном этапе лучше обойтись
без «украшательств». Никаких вычурных шрифтов, цветов
и точных размеров. Пусть на этой стадии все будет максимально просто, чтобы иметь время опробовать побольше
различных идей (рис. 3-8).
Вернемся к нашему типовому проекту и набросаем скетчи
нескольких первых вариантов макета домашней страницы
проекта с открытым исходным кодом (рис. 3-9).

Рис. 3-8. Скетчи на бумаге — это линии и прямоугольники, обозначающие
места для картинок и текста. Скетчи не должны быть слишком сложными

140

Глава 3

Tlgm: @it_boooks

Вы видите быстрые наброски двух макетов домашней
­страницы, но я советую делать больше разных вариантов. Чем больше макетов вы сделаете, тем больше идей
­сможете оценить. Это поможет вам более уверенно
выбрать нужную зарисовку (или зарисовки) для созда­
ния вайрфрейма.

Если сейчас у вас в работе нет конкретного проекта, то сделайте скетчи макетов ваших любимых веб-сайтов.
Отличная практика!

— лого и навигация
— заголовок
— блок кода
и контент
— выделение
— цитата
— лого и навигация
— блок кода
и заголовок
— цитата
— выделение
— CTA
Рис. 3-9. Пара быстрых зарисовок, отражающих две разные идеи для макета
домашней страницы проекта с открытым исходным кодом

ПРОЦЕСС ДИЗАЙНА

141

Tlgm: @it_boooks

Создание вайрфрейма
Теперь можно конкретизировать наши скетчи. Создание
вайрфрейма помогает создавать на основе зарисовок более
детальные шаблоны. Здесь мы уже лучше прорабатываем
дизайн, соблюдая реальные размеры и более точно определяя расстановку объектов.
Существует много различных программных решений в помощь на этом этапе (рис. 3-10).

GIMP (http://hellobks.com/hwd/77)

Sketch (http://hellobks.com/hwd/78)

Рис. 3-10. Несколько программных решений для создания вайрфреймов
142

Глава 3

Tlgm: @it_boooks

Бесплатные:
yy GIMP. Редактор изображений с открытым исходным
кодом: http://hellobks.com/hwd/77
yy Inkscape. Редактор векторной графики с открытым
исходным кодом: http://hellobks.com/hwd/81

Balsamiq (http://hellobks.com/hwd/79)

UXPin (http://hellobks.com/hwd/80)
Рис. 3-10 (продолжение)

ПРОЦЕСС ДИЗАЙНА

143

Tlgm: @it_boooks

Платные:
yy Adobe Illustrator или другие продукты Adobe.
http://hellobks.com/hwd/82

yy Sketch. http://hellobks.com/hwd/78

yy Программное обеспечение для создания презентаций, например Keynote (Mac) и PowerPoint
(Windows). Можно настроить кликабельные области,
которые будут вести на разные слайды или «страницы»
вашего сайта, чтобы ваши мокапы смотрелись более
интерактивно.
http://hellobks.com/hwd/83, http://hellobks.com/hwd/84
yy Balsamiq. Онлайн-программа для создания вайрфреймов. http://hellobks.com/hwd/79
yy UXPin. Онлайн-платформа для дизайна.
http://hellobks.com/hwd/80

Создание вайрфрейма находится между этапами создания
скетчей и мокапа. Мы пока еще не выбираем цвета и не ищем
шрифты — здесь мы просто продолжаем обдумывать макет
и последовательность действий.
Возвращаясь к домашней странице проекта с открытым исходным кодом, давайте возьмем мой любимый скетч и создадим на его основе вайрфрейм (рис. 3-11).
Мы возьмем макет в три колонки и начнем планировать
его содержимое (следим за тем, чтобы макет был простым,
понятным и интересным), выверяя интервалы и расположение элементов. Разобравшись с этим, можно переходить
к тестированию дизайна (см. раздел 3.4 «Получение обратной связи») и перебирать разные варианты, пока не найдем
наиболее подходящий.

144

Глава 3

Tlgm: @it_boooks

Рис. 3-11. Вайрфрейм, созданный на основе одного из скетчей.
Нет серьезного дизайна — только макет и интервалы

Мы все еще не принимали основных дизайнерских решений,
таких как выбор шрифтов, цвета и графики. Но с вайрфреймом уже можно собирать обратную связь и начинать писать
код сайта.
Важно использовать реальный контент — по возможности
избегайте lorem ipsum, или текста-«рыбы» (бессмысленного
текста, используемого в индустрии дизайна для замещения
реального). Вы всегда будете знать длину реального текста,
а фейковый вариант в итоге может оказаться короче или
длиннее настоящего.

ПРОЦЕСС ДИЗАЙНА

145

Tlgm: @it_boooks

Уделите внимание рассмотренным нами принципам
­создания текста — убедитесь, что он лаконичен, понятен и ­увлекателен. По мере прохождения этапов создания
скетчей, вайрфрейма и мокапа, пересматривая и тестируя
различные версии дизайна, вы должны также оценивать
и дорабатывать свои тексты.
Давайте посмотрим решение для другого проекта, чтобы
понять, как еще могут выглядеть вайрфреймы (рис. 3-12).

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

Рис. 3-12. Еще один пример вайрфрейма

146

Глава 3

Tlgm: @it_boooks

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

Мокап вашего дизайна

Вайрфреймы имеют низкую точность, но в специальных
дизайнерских программах мы можем создавать мокапы —
макеты высокой точности, чтобы заранее спланировать все
детали (шрифты, цвета, фон и прочее), прежде чем переходить к написанию кода.

Эта часть процесса может оказаться несколько сложнее, если
ранее вы не использовали соответствующие программы.
В главе 5 «Дополнительные ресурсы» я перечислю руководства и видеоуроки, посвященные выработке базовых навыков работы в основных дизайнерских программах.
А вот вам некоторые плюсы и минусы для принятия решения, тратить или нет дополнительное время на создание
мокапов:
Плюсы

yy Вы увидите (я надеюсь), как именно будет выглядеть
ваш дизайн, когда перейдете к его воплощению в HTML
и СSS.
yy Объекты можно легко перемещать и изменять, то есть
у вас есть возможность менять решения более оперативно, чем в случае с уже написанным кодом.

ПРОЦЕСС ДИЗАЙНА

147

Tlgm: @it_boooks

Минусы
yy Появляется дополнительный этап, который займет
лишнее время.

yy Так как вы делаете разработку для интернета, то итоговый дизайн должен быть отзывчивым, или респонсивным (то есть дизайн должен адаптироваться, чтобы
выглядеть красиво как на маленьких экранах, так и на
больших). Отзывчивый дизайн сложнее смоделировать,
так как большинство мокапов, создаваемых в специальных программах, статичны.
yy Вам потребуется создавать мокапы, показывающие, что
дизайн адаптируется к различным размерам экранов
(мобильным, компьютерным и т. д.).
yy Если вы не являетесь уверенным пользователем дизайнерских программ (или вам проще работать с кодом),
создание мокапов может занять больше времени, чем
написание кода в HTML или CSS.

Ваши мокапы должны включать все принятые ранее решения относительно текста и макета на основе ранее созданных вайрфреймов с дополнением графики, цветов, шрифтов
и прочих красивых дизайнерских штучек (рис. 3-13).

Теперь возьмем вайрфреймы нашей домашней страницы
и начнем добавлять цвета, шрифты и графические элементы.
Нам достаточно, чтобы первый вариант мокапа был всего
лишь хорош для запуска и демонстрации другим людям.
Позже можно будет экспериментировать с мокапом дальше
и постепенно улучшать дизайн (рис. 3-14).

148

Глава 3

Tlgm: @it_boooks

Рис. 3-13. Мокап, отражающий решения по выбору цветов, шрифтов
и графических элементов, созданный в программе Sketch

Когда устраивающий вас мокап готов, можете переходить
к ­тестированию и показу своего дизайна друзьям и близким
(более подробно разберем в следующем разделе). Это поможет убедиться, что вы не упустили какие-то важные вещи,
прежде чем переходить к написанию кода.

ПРОЦЕСС ДИЗАЙНА

149

Tlgm: @it_boooks

Рис. 3-14. Возвращаемся к нашему типовому проекту. Переходим от
вайрфрейма к мокапу, добавляя цвет, изображения, шрифты и прочие
стилевые решения. Этот пример пока еще достаточно прост, но уже работает
как наша первая версия. Можете запустить его и уже потом постепенно
вносить доработки

150

Глава 3

Tlgm: @it_boooks

На данном этапе уже можно скопировать дизайн домашней
страницы и создать мокапы других страниц (например,
страницы «О нас»), а также мокап, отражающий то, как будет
выглядеть сайт на маленьких экранах (рис. 3-15).

Рис. 3-15. Мокап, который мы создали, изменен. Теперь он отражает
то, как дизайн будет выглядеть на маленьком экране. Помните:
важно, чтобы ваши сайты одинаково хорошо работали и на экранах
миниатюрного размера

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

Tlgm: @it_boooks

РАЗДЕЛ 3.4

ПОЛУЧЕНИЕ ОБРАТНОЙ СВЯЗИ

ОЧЕНЬ СЛОЖНЫЙ, НО ОСОБЕННО ВАЖНЫЙ ЭТАП В РАЗРАБОТКЕ ДИЗАЙНА — получение обратной связи.

В отличие от программирования здесь нет простого ответа
«работает» или «не работает». Самостоятельно оценить,
успешен ли ваш дизайн, вы не сможете, поэтому лучше
собрать отзывы со стороны. Этот простой шаг может стать
самым сложным, потому что большинство людей по своей
природе боятся критики. Что, если людям не понравится
наша разработка? Что, если они найдут в ней проблемы?

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

Глава 3

Tlgm: @it_boooks

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

Оценка дизайна свежим взглядом

Прежде чем показывать свой проект другим людям, предоставьте себе возможность критически его оценить. Сделайте
перерыв (несколько часов или ночь), потом вернитесь и оцените свою работу, что поможет вам заметить потенциальные
проблемы и недочеты. Это самый простой способ получения
обратной связи, так как здесь вы имеете дело с весьма приятным человеком — самим собой!
Возвращаясь к дизайну, попытайтесь дистанцироваться
от своего дизайнерского «я» и поставить себя на место
потенциального пользователя. Все ли на сайте удобно для
пользователя? Читабелен и понятен ли текст? Является ли
сайт интуитивно понятным? Представьте, как сайт должен
использоваться, и оцените его с точки зрения успешного
пользовательского опыта — найдите все мелкие недочеты на раннем этапе, прежде чем показывать свой дизайн
­другим.
Еще одна уловка, как смотреть на дизайн по-новому, — это
сделать скриншот и развернуть его горизонтально. Макет
тот же, но ваш мозг утратит привычные ассоциации, что
повысит объективность оценки.

ПРОЦЕСС ДИЗАЙНА

153

Tlgm: @it_boooks

Рекомендации по сбору обратной связи
Вы можете показать свой дизайн кому-нибудь, получить
ответ «выглядит круто!», похлопать себя по плечу и переходить к другим делам. Но был ли этот отзыв по-настоящему
полезен?

Определитесь с тем, каковы конкретные цели сбора обратной связи. Возможно, вам нужна помощь в поиске проблем
дизайна, и вы открыты к отзывам в целом (положительным или отрицательным) либо совет по выбору лучшего
из двух вариантов. Еще возможно, что вы закончили проект
на 90 % и просто хотите сделать небольшие доработки перед ­выпуском.

Дайте своим рецензентам подробные инструкции о том, что
вам нужно, и побольше времени на анализ вашей работы.
Беглого взгляда на дизайн недостаточно. Человеку нужно
время, чтобы полноценно обдумать вашу работу. Быстрые
ответы с большой вероятностью вскроют лишь поверхностные проблемы или окажутся пустой похвалой.
Если вы получили только положительные отзывы,
спро­сите рецензентов, что же им не понравилось. Это
подтолк­нет их к более подробному ответу и покажет, что
вас инте­ресуют не только положительное мнение, но
и ­отрица­тельное.

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

Глава 3

Tlgm: @it_boooks

Демонстрация вашего дизайна
друзьям и семье
На пользу это или нет, но друзья и родные — самые дружелюбные люди, которым можно показать вашу работу. Самые
близкие, конечно, постараются вам угодить и дать положительный отзыв. Сразу объясните родным, что вам важно
услышать все оценки (как положительные, так и отрицательные).

Здорово, если вы сможете показать дизайн тем, кто максимально соответствует образу идеального пользователя (если
вы создаете инструмент для разработчиков, то друг-разработчик будет отличным рецензентом). Однако не стоит
ограничиваться этим правилом — UX-проблемы сайта может
обнаружить кто угодно.

Демонстрация дизайна
незнакомым людям

Несмотря на то что показывать вашу работу чужим людям намного сложнее, это позволит собрать более ценный
фидбэк, ведь эти люди не связаны с вами личными отноше­
ниями.
Где искать людей, которые согласятся оценить ваш труд?

yy Хакатоны, форумы и другие мероприятия. Меро­
прия­тия и встречи единомышленников представляют
отличную возможность собрать обратную связь по
вашей дизайнерской работе. Попросите кого-нибудь
вежливо, не затруднит ли его уделить 5–10 минут
­оценке вашего дизайна.

yy Онлайн-сообщества. Участники форумов и сообществ, таких как design_critiques на Reddit (http://hellobks.
com/hwd/85) и Bootstrapped.fm (http://hellobks.com/hwd/86),
могут оценить ваши эскизы, мокапы и ранние версии
ПРОЦЕСС ДИЗАЙНА

155

Tlgm: @it_boooks

дизайна. Здесь нужно иметь в виду, что из-за анонимности в интернет-среде некоторые пользователи склонны
к негативу. Так что будет особенно важным отобрать
из негативных отзывов действительно полезные.
И да, толстокожесть обя­зательна!

yy Сервисы онлайн-ревью. Есть немало сервисов, которые позволяют загрузить скриншот вашей работы для
получения обратной связи. Одним из примеров является Five Second Test (http://hellobks.com/hwd/87).

yy Люди в кафе и прочих местах. Хакатонов на горизонте не наблюдается? Попробуйте организовать сами
проверку юзабилити вашего сайта. Купите подарочную карту кафе, подойдите к посетителям, которые
выглядят наиболее позитивно, и попросите потратить
пять минут и оценить ваш сайт в обмен на подарочную
карту (как вариант, можно предложить кофе или что-то
еще). Обращение к незнакомым людям в общественном
месте может несколько пугать, но получение столь ценного отзыва от постороннего человека того стоит.

Велик соблазн этот этап пропустить, особенно если вы хотите следовать рекомендациям по MVP1 — запустить продукт
как ­можно быстрее. Тем не менее сбор обратной связи может
­существенно улучшить ваш дизайн и повысить юзаби­лити.
На этом этапе вы вполне можете обнаружить проблему,
­которая привела бы к срыву запуска сайта.
Если получение обратной связи от других людей вас пугает,
то уверяю: чем чаще вы это делаете, тем легче становится.
Ничего не бойтесь — собирайте обратную связь о своих
работах!
1

MVP (Minimum viable product) — минимально жизнеспособный продукт.
Самая ранняя версия продукта, в которой есть минимальный набор
функций, достаточный для презентации публике и проверки на первых
потребителях. — Примеч. ред.

Tlgm: @it_boooks

РАЗДЕЛ 3.5

КОД ДИЗАЙНА

ЕСЛИ БЫ КНИГА ВКЛЮЧАЛА КОД, то она увеличилась бы
втрое. И все же, пока вы здесь, я хочу поговорить о философии написания кода.

Не старайтесь быть оригинальным

Часто дизайнеры сетуют на то, что многие сайты выглядят
одинаково (рис. 3-16).

Как начинающему дизайнеру вам не стоит стремиться
к стопроцентной оригинальности. Используйте проверенные решения! Иногда и обычная структура сайта тоже может
быть преимуществом.
Когда станете опытным дизайнером, вы будете легко реализовывать новые и оригинальные задумки. Поначалу же вам
не нужно переживать о том, что ваш дизайн похож на чужой — ну, например, на такой, как красивый, хотя и похожий
на другие, сайт на рис. 3-16. Никто не обидится, если ваша
работа окажется похожей на чью-то другую (если только
вы не скопируете ее полностью — этого делать не надо!).

ПРОЦЕСС ДИЗАЙНА

157

Tlgm: @it_boooks

Помните: то, как работает ваш сайт, важнее того, как он
выглядит.

Изучайте правила и тренды — потом вы сможете их нарушать.

Рис. 3-16. Bootstrap — популярный фреймворк для дизайна, поэтому макеты
многих сайтов похожи друг на друга. Представленный сайт высмеивает этот
тренд

Используйте фреймворк CSS

Профессиональные дизайнеры и разработчики фронтенда1
зачастую насмехаются над фреймворками. В первую очередь
это касается Bootstrap (http://hellobks.com/hwd/5), но есть и другие «жертвы» — Skeleton (http://hellobks.com/hwd/7), Foundation
(http://hellobks.com/hwd/6) и PureCSS (http://hellobks.com/hwd/9).
Дело в том, что эти ­фреймворки ограничивают ваш дизайн;
1

158

В профессиональной среде еще используется термин «пользовательский интерфейс». — Примеч. ред.

Глава 3

Tlgm: @it_boooks

чтобы он соответствовал их плану, зачастую предлагают
встроенные решения (в итоге вы уже не создаете уникальный продукт) и могут раздувать ваш код ненужным CSS
и JavaScript.
И все же начинающим дизайнерам полезно использовать
фреймворк. Он экономит время, избавляя от лишней возни с CSS, макетами и внедрением передовых идей. Шаблоны, которые предлагают многие фреймворки (такие как
Bootstrap), — хорошая основа для начала. Вам не придется
тратить уйму времени на разработку каждого отдельного
элемента.
Вначале важнее всего разработать дизайн и как можно
быстрее запустить его в работу. А уменьшить размер кода
и доработать элементы всегда можно после запуска.

Не забывайте: дизайн должен быть
отзывчивым

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

Изучите медиазапросы (http://hellobks.com/hwd/89), чтобы уточнить правила CSS хотя бы для одного размера экрана.

Фреймворки обычно сопровождаются отзывчивыми утилитами. Это еще одна причина, почему я рекомендую их. Обратите внимание на функции, которые можно будет применить
в своем дизайне, например видимые/скрытые классы CSS
в Bootstrap, позволяющие показывать/скрывать элементы
в зависимости от размера экрана.
ПРОЦЕСС ДИЗАЙНА

159

Tlgm: @it_boooks

До запуска сайта оцените его дизайн в разных форматах
и убедитесь, что спроектированный порядок действий
можно реализовать для устройств с мониторами всех размеров, — ваш дизайн должен работать независимо от устройства (рис. 3-17). Написание кода для отзывчивого дизайна
занимает много времени, но это очень важно для эффективной работы дизайна. Не забывайте об этом!

Рис. 3-17. Chrome DevTools (http://hellobks.com/hwd/90) позволяет
просматривать дизайн в разных размерах прямо в браузере — нет нужды
иметь под рукой кучу устройств для оценки совместимости

Уделите внимание размеру сайта
Красивые изображения (для обычных и retina-экранов),
JavaScript, код фреймворка — что из вышеперечисленного
является причиной медленной загрузки сайта? Посмотрите,
как можно ужаться, — в противном случае медленная загрузка приведет к потере посетителей (рис. 3-18).
160

Глава 3

Tlgm: @it_boooks

Рис. 3-18. Chrome DevTools также показывает время загрузки сайта, позволяя
увидеть, что из его содержимого может замедлять его работу

Используйте аналитику
Нельзя просто запустить сайт и забыть про него — обязательно проследите после старта, как «живет» сайт.
­Насколько высок процент отказов (то есть число посетителей, которые уходят с сайта сразу после открытия)? Заходят
ли посетители на страницу «О нас»? Критически оценивать
дизайн может быть сложно, так как это будет качественная
оценка, которая во многом определяется интуицией и личными предпочтениями. В этом случае поможет веб-аналитика, которая позволит принимать решения уже на основе
коли­чественного анализа.

Золотым стандартом аналитики можно считать сервис Google
Analytics (http://hellobks.com/hwd/48), но есть и альтернативные
решения. К ним относится Segment (http://hellobks.com/hwd/49),
ПРОЦЕСС ДИЗАЙНА

16 1

Tlgm: @it_boooks

который позволяет привязывать другие сервисы аналитики,
включая Google Analytics, а также Mixpanel (http://hellobks.com/
hwd/91) и другие1.
Поздравляю с завершением главы! Большой объем информации я постаралась разбить на маленькие удобоваримые
части. Надеюсь, что к этому моменту вы уже чувствуете себя
более уверенно в отношении планирования, прототипирования и создания собственных проектов.

1

Не забудьте про инструменты Яндекс.Метрика. — Примеч. ред.

Tlgm: @it_boooks

Tlgm: @it_boooks

Tlgm: @it_boooks

4

ГЛАВА 4

ПРЕДУБЕЖДЕНИЯ

Дорогой читатель, я проработала в сфере дизайна и создания
сайтов уже около 20 лет, и даже сейчас каждый мой новый
проект сопровождается вот таким внутренним диалогом:
«чушь чушь чушь чушь чушь чушь чушь чушь чушь чушь чушь
чушь чушь чушь чушь чушь чушь чушь чушь чушь чушь чушь чушь
чушь чушь чушь чушь чушь чушь чушь чушь чушь чушь чушь чушь
чушь чушь чушь чушь … да!»

Иногда в конце стоит не «да!», а «может быть?», но изначальное «чушь!» звучит всегда.

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

Предубеждения

165

Tlgm: @it_boooks

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

Tlgm: @it_boooks

Tlgm: @it_boooks

Tlgm: @it_boooks

5

ГЛАВА 5

ДОПОЛНИТЕЛЬНЫЕ РЕСУРСЫ

Поздравляю, друг! Вы дошли до конца книги.

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

Книги

The Non-Designer’s Design Book 4th ed., Robin Williams
(Peachpit Press, 2014)1. Эту книгу можно назвать классикой.
В ней более подробно разбираются изученные нами принципы, а также традиционные концепции дизайна, которые
мы не затрагивали (такие как повторение, теория близости
и контраст).

Thinking with Type, 2nd ed. Revised and Expanded, Ellen
Lupton (Princeton Architectural Press, 2010). Подробное руководство по типографике и истории шрифтов, охватывающее
не только традиционную печатную типографику, но и ее
применение в веб-дизайне.
Don’t Make Me Think, Revisited: A Common Sense Approach
to Web Usability, 3rd ed., Steve Krug (New Riders, 2014)2.
1

2

Уильямс Робин. Дизайн. Книга для недизайнеров. — СПб.: Питер.
Круг Стив. Не заставляйте меня думать. Веб-юзабилити и здравый
смысл.
Дополнительные ресурсы

169

Tlgm: @it_boooks

В этой прекрасной книге читатель погружается в изучение
пользовательского опыта, информационного дизайна и юзабилити (удобства использования) сайтов. Она раскрывает
особенности поведения пользователей в интернете, зная
которые вы можете создавать более интуитивные и эффективные сайты.
A Book Apart: https://abookapart.com

Замечательные короткие книги объемом не более 150 страниц, раскрывающие практически все тематики веб-разработки: доступность, создание фронтенда, отзывчивый дизайн
и многое другое.

Блоги и онлайн-журналы

yy Smashing Magazine: https://smashingmagazine.com

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

yy A List Apart: https://alistapart.com

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

yy User Onboarding: https://useronboard.com

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

170

Глава 5

Tlgm: @it_boooks

Онлайн-курсы
yy Skillshare: https://skillshare.com/browse/design

Этот сайт предлагает широкий спектр видео и уроков
по дизайну, от изучения Adobe Illustrator и до освоения
дизайна логотипов, леттеринга и многого другого. Лучший из онлайн-ресурсов, предлагающий видеоуроки
по дизайну.

yy Спринты по теории с Джарродом Драйсдейлом
(Jarrod Drysdale): https://studiofellow.com/ theory-sprints

Отличный ресурс, помогающий дизайнерам улучшить
свои навыки. Если вы планируете и дальше совершенствоваться в дизайне, не пропустите.

Примеры для вдохновения
yy Dribbble: https://dribbble.com

Сайт, где дизайнеры делятся своими работами. Dribbble
предоставляет художникам и дизайнерам возможность
демонстрировать свои работы с отдельным фокусом на
мелких элементах или деталях дизайна.

yy Awwwards: https://awwwards.com

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

yy Unmatched Style: https://unmatchedstyle.com

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

Дополнительные ресурсы

171

Tlgm: @it_boooks

yy UI Patterns: https://uipatterns.io

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

Ресурсы для работы с цветом
ПОДБОР ПАЛИТР

Colormind: https://colormind.io

Adobe Color CC: https://color.adobe.com

Material Design Palette: https://materialpalette.com

ТЕОРИЯ ЦВЕТА

WebAIM Contrast Checker: https://bit.ly/1kVArrR

A Simple Web Developers Guide to Color: https://bit.ly/1RZzK6I

Ресурсы шрифтов
ПРИМЕРЫ ХОРОШИХ ШРИФТОВ

Font Pair: https://fontpair.co

Beautiful Web Type: https://beautifulwebtype.com
Typewolf: https://typewolf.com

Typ.io: https://typ.io/libraries/google

Canva Font Combinations: https://bit.ly/2fsSYA9
TypeSource: https://tobiasahlin.com/typesource

ВЕБ-ШРИФТЫ

Google Fonts: https://fonts.google.com
Adobe Fonts: https://fonts.adobe.com
Brick: https://brick.im
172

Глава 5

Tlgm: @it_boooks

Ресурсы изображений
Unsplash: https://unsplash.com

picjumbo: https://picjumbo.com

IM Free: https://imcreator.com/free

Gratisography: https://gratisography.com
iStock: https://istockphoto.com

Noun Project: https://thenounproject.com
Fiverr: https://fiverr.com

CSS-фреймворки

Bootstrap: https://getbootstrap.com

Foundation: https://foundation.zurb.com
Skeleton: https://getskeleton.com
PureCSS: https://purecss.io

mini.css: https://minicss.org

Веб-аналитика

Google Analytics: https://analytics.google.com
Segment: https://segment.com

Heap: https://heapanalytics.com

Mixpanel: https://mixpanel.com

Создание вайрфреймов
UXPin: https://uxpin.com

Balsamiq: https://balsamiq.com

InVision: https://invisionapp.com
GIMP: https://gimp.org

Sketch: https://sketchapp.com

Inkscape: https://inkscape.org

Adobe Products: https://adobe.com
Дополнительные ресурсы

173

Tlgm: @it_boooks

Сбор обратной связи
Five Second Test: https://fivesecondtest.com

Reddit: Design Critiques: https://reddit.com/r/design_critiques
Indie Hackers: https://indiehackers.com

Заключение

Буду рада общению с вами через Twitter Hello Web Books
(https://twitter.com/hellowebbooks) или мою личную страницу
(https://twitter.com/tracymakes).

Подробности о книге Hello Web Design можно найти на сайте
No Starch Press: https://nostarch.com/hello-web-design/.
Всего вам наилучшего!

Ссылки

Для справки ниже приведены упомянутые в книге сокращенные URL-адреса ссылок и их длинные версии.
ГЛАВА 1

http://craigslist.com/
РАЗДЕЛ 2.1

https://960.gs/
http://getbootstrap.com/css/
http://foundation.zurb.com/
http://getskeleton.com/
http://minicss.org/
http://purecss.io/
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

174

Глава 5

Tlgm: @it_boooks

РАЗДЕЛ 2.2

http://webaim.org/resources/contrastchecker/
https://color.adobe.com/
https://www.materialpalette.com http://colormind.io
https://www.smashingmagazine.com/2016/04/web-developer-guidecolor/
РАЗДЕЛ 2.3

https://fonts.google.com/
https://typekit.com/
http://beautifulwebtype.com
https://www.typewolf.com/google-fonts
http://brick.im/
http://fontpair.co/
https://www.nngroup.com/reports/how-people-read-webeyetracking-evidence/
РАЗДЕЛ 2.6

https://www.nngroup.com/articles/how-users-read-on-the-web/
http://www.simpleandusable.com/
https://www.webprofits.com.au/blog/case-study-headline/
РАЗДЕЛ 2.7

http://analytics.google.com
http://segment.com
РАЗДЕЛ 2.8

http://www.istockphoto.com
http://thenewcode.com/944/Responsive-Images-For-Retina-Usingsrcset-and-the-x-Designator
https://unsplash.com

Дополнительные ресурсы

175

Tlgm: @it_boooks

http://photopin.com
https://thenounproject.com
http://fiverr.com
http://imcreator.com/free
https://picjumbo.com/
https://istockphoto.com
http://www.gratisography.com/
http://upwork.com
РАЗДЕЛ 3.1

https://www.thebestdesigns.com/
http://unmatchedstyle.com/
https://www.awwwards.com/
https://www.siteinspire.com/ https://abookapart.com/
https://www.gimp.org/
https://www.sketchapp.com/
https://balsamiq.com/
https://www.uxpin.com/
https://inkscape.org
http://www.adobe.com
https://www.apple.com/keynote
https://products.office.com/en-us/powerpoint
РАЗДЕЛ 3.4

https://www.reddit.com/r/design_critiques/
http://discuss.bootstrapped.fm/
http://fivesecondtest.com/
РАЗДЕЛ 3.5

https://varvy.com/mobile/media-queries.html
https://developer.chrome.com/devtools
https://mixpanel.com/