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

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

ГЛАВА 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 за то,
что рискнули и добавили эту