Трэйси Осборн - Веб-дизайн для недизайнеров

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

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

ГЛ А В А --">