Осборн Трэйси - Веб-дизайн для недизайнеров [2022, PDF, RUS]

Примеры страниц

Оглавление

ОБ АВТОРЕ 7
БЛАГОДАРНОСТИ 15
ПРЕДИСЛОВИЕ 16
ВВЕДЕНИЕ 18
ГЛАВА 1
Если из всех глав выбирать одну, то лучше эту 21
ВНЕШНИЙ ВИД — НИЧТО, ФУНКЦИОНАЛ — ВСЁ 21
Хорош ли дизайн? Измеряйте 23
Показывайте свой дизайн — и пусть оценивают! 23
ГОТОВЫЕ РЕШЕНИЯ ПО УЛУЧШЕНИЮ ДИЗАЙНА 24
Избавляйтесь от беспорядка в дизайне —
улучшайте внешний вид 24
ГЛАВА 2
Теория и принципы веб-дизайна 29
РАЗДЕЛ 2.1 31
С Е Т К А 31
ГОТОВЫЕ РЕШЕНИЯ 34
Сетки в программах для создания мокапов 34
Сетки для веб-дизайна 36
ЖИВОЙ ПРИМЕР 38
РАЗДЕЛ 2.2 40
Ц В Е Т 40
ГОТОВЫЕ РЕШЕНИЯ 47
Ограничьте цветовую схему 47
Используйте цвет для акцентирования 48
Не забывайте про контраст 48
Находите палитры на специальных сайтах 49
ЖИВОЙ ПРИМЕР 52
РАЗДЕЛ 2.3 55
Т И П О Г РА Ф И К А 55
ОСНОВЫ ТИПОГРАФИКИ 56
Категории шрифтов 56
Межстрочный интервал и высота строки 58
Кернинг и межбуквенный интервал 59
ПРИНЦИПЫ ТИПОГРАФИКИ 60
Используйте в дизайне не более двух гарнитур 60
Избегайте выравнивания по ширине или по центру 61
Выравнивание по центру может вызывать
сложности 62
Длина строки 63
ГОТОВЫЕ РЕШЕНИЯ 63
Бесплатные ресурсы для выбора шрифтов 63
Сайты с отобранными шрифтами 65
ЖИВОЙ ПРИМЕР 67
РАЗДЕЛ 2.4 68
Б Е Л О Е П Р О С Т Р А Н С Т В О 68
БАЗОВЫЕ ТЕЗИСЫ О БЕЛОМ ПРОСТРАНСТВЕ 70
Белое пространство улучшает восприятие 70
Белое пространство облегчает чтение 70
Белое пространство усиливает Call-to-action 72
Белое пространство задает изысканный тон 73
НЕМНОГО ТЕОРИИ 74
Интервалы между строк 74
Пространство между элементами 74
Пространство между группами элементов 75
ГОТОВЫЕ РЕШЕНИЯ 76
Удваивайте белое пространство между элементами 76
Убедитесь в оптимальном размере
межстрочных интервалов 76
ЖИВОЙ ПРИМЕР 76
РАЗДЕЛ 2.5 79
М А К Е Т И И Е РА РХ И Я 79
ЖИВОЙ ПРИМЕР 84
РАЗДЕЛ 2.6 86
Т Е К С Т 86
ЖИВОЙ ПРИМЕР 92
РАЗДЕЛ 2.7 94
П О Л Ь З О В АТ Е Л Ь С К И Й О П Ы Т 94
ДО НАЧАЛА ДИЗАЙНА 94
Конкурентный анализ 95
Опросы и интервью 96
В ПРОЦЕССЕ ДИЗАЙНА 96
Вайрфреймы, прототипы
и юзабилити-тестирование 97
ПОСЛЕ ЗАПУСКА ПРОЕКТА 97
Регулярное юзабилити-тестирование 98
ГОТОВЫЕ РЕШЕНИЯ 98
Помогите пользователю действовать,
как хотите вы 98
Обращайте внимание на размер сайта 100
Выполняйте юзабилити-тестирование 100
Включайте аналитику 100
ЖИВОЙ ПРИМЕР 101
РАЗДЕЛ 2.8 102
И З О Б РА Ж Е Н И Я И Х УД О Ж Е С Т В Е Н Н Ы Е Э Л Е М Е Н Т Ы 102
ОСНОВЫ 103
Фотографии и иконки не обязательны 104
Лица как мощный инструмент 105
Обращайте внимание на размер файлов 105
Внимательно выбирайте стоковые фотографии 107
Иконки 108
ГОТОВЫЕ РЕШЕНИЯ 109
Сайты стоковых фото 109
Художественное оформление (иконки, графика и иллюстрации) 110
ЖИВОЙ ПРИМЕР 111
РАЗДЕЛ 2.9 113
Д О П О Л Н И Т Е Л Ь Н Ы Е Н Ю А Н С Ы 113
НАЧИНАЙТЕ С ПРОСТОГО 113
ОРИЕНТИРУЙТЕСЬ НА «ПРАВИЛО ТРЕТЕЙ» 114
ИЗБЕГАЙТЕ ЧИСТОГО ЧЕРНОГО 116
СВЕТ ДОЛЖЕН ПАДАТЬ СВЕРХУ 117
КОНТРАСТ ПОДЧЕРКИВАЕТ ГЛАВНОЕ 117
МЕНЯЕМ ФОН — ИЗМЕНЯЕМ ЦВЕТ 118
БУДЬТЕ ВНИМАТЕЛЬНЫ ПРИ НАЛОЖЕНИИ ТЕКСТА
НА ИЗОБРАЖЕНИЕ 119
СОВЕТЫ ПРИ ПРОЕКТИРОВАНИИ ПОРЯДКА
ДЕЙСТВИЙ ПОЛЬЗОВАТЕЛЯ 120
ГЛАВА 3
Процесс дизайна и выработка
профессионального видения 123
РАЗДЕЛ 3.1 124
П О И С К В Д О Х Н О В Е Н И Я 124
РАЗДЕЛ 3.2 133
П Л А Н И Р О В А Н И Е 133
РАЗДЕЛ 3.3 137
П Р О ТО Т И П Ы 137
СОЗДАНИЕ ВАЙРФРЕЙМА 142
МОКАП ВАШЕГО ДИЗАЙНА 147
РАЗДЕЛ 3.4 152
П О Л У Ч Е Н И Е О Б Р АТ Н О Й С В Я З И 152
ОЦЕНКА ДИЗАЙНА СВЕЖИМ ВЗГЛЯДОМ 153
РЕКОМЕНДАЦИИ ПО СБОРУ ОБРАТНОЙ СВЯЗИ 154
Демонстрация вашего дизайна друзьям и семье 155
Демонстрация дизайна незнакомым людям 155
РАЗДЕЛ 3.5 157
К О Д Д И З А Й Н А 157
НЕ СТАРАЙТЕСЬ БЫТЬ ОРИГИНАЛЬНЫМ 157
ИСПОЛЬЗУЙТЕ ФРЕЙМВОРК CSS 158
НЕ ЗАБЫВАЙТЕ: ДИЗАЙН ДОЛЖЕН БЫТЬ ОТЗЫВЧИВЫМ 159
УДЕЛИТЕ ВНИМАНИЕ РАЗМЕРУ САЙТА 160
ИСПОЛЬЗУЙТЕ АНАЛИТИКУ 161
ГЛАВА 4
Предубеждения 165
ГЛАВА 5
Дополнительные ресурсы 169
КНИГИ 169
БЛОГИ И ОНЛАЙН-ЖУРНАЛЫ 170
ОНЛАЙН-КУРСЫ 171
ПРИМЕРЫ ДЛЯ ВДОХНОВЕНИЯ 171
РЕСУРСЫ ДЛЯ РАБОТЫ С ЦВЕТОМ 172
РЕСУРСЫ ШРИФТОВ 172
РЕСУРСЫ ИЗОБРАЖЕНИЙ 173
CSS-ФРЕЙМВОРКИ 173
ВЕБ-АНАЛИТИКА 173
СОЗДАНИЕ ВАЙРФРЕЙМОВ 173
СБОР ОБРАТНОЙ СВЯЗИ 174
ЗАКЛЮЧЕНИЕ 174
ССЫЛКИ 174