Дизайнерские решения, принимаемые разработчиками, оказывают существенное влияние на восприятие сайта пользователями. Освоив язык дизайна, вы сможете принимать полноценное участие в создании оформления, сотрудничать с коллегами-дизайнерами и обосновывать выбор тех или иных подходов при создании приложений.
Книга раскрывает основные принципы дизайна и особенности пользовательского восприятия, которые должен знать каждый веб-разработчик. Читателю определенно понравится, как автор демонстрирует новые идеи на примерах популярных сайтов и пользовательских интерфейсов. Откройте методы исследования поведения юзеров и научитесь использовать цвет, типографику и верстку для создания удобных и привлекательных веб-интерфейсов. К концу книги вы поймете, что хорошее чувство дизайна действительно является ценным подспорьем для разработчика!
Author(s): Стефани Стимак
Series: Библиотека программиста
Edition: 1
Publisher: Питер
Year: 2024
Language: Russian
Commentary: Publisher's PDF
Pages: 304
City: СПб.
Tags: Web Applications; Design; Color; User Research; Fonts; Web Design; A/B Testing; User eXperience
Предисловие
Введение
Благодарности
О книге
Кому адресована эта книга
Структура издания
От издательства
Об авторе
Иллюстрация на обложке
ЧАСТЬ I. ОСНОВЫ ДИЗАЙНА
Глава 1. Преодоление разрыва между дизайном и разработкой
1.1. Почему разработчикам полезно знать основы дизайна и проектирования пользовательского опыта
1.1.1. Улучшение взаимодействия и коммуникации
1.1.2. Понимание причин лежащих в основе дизайнерских решений
1.1.3. Написание лучшего кода благодаря пониманию основ визуального дизайна
1.1.4. Более качественный код (и дизайн) благодаря меньшей зависимости от сторонних фреймворков
1.1.5. Пользовательский опыт и разработка
1.2. Путь к пониманию лучшего дизайна и пользовательского опыта
1.2.1. Процесс разработки дизайна рассматриваемый в книге
1.2.2. Профессиональные дизайнеры против умного дизайна
1.2.3. Объединяем все вместе
Резюме
Глава 2. Основные принципы дизайна
2.1. Принципы дизайна
2.1.1. Близость
2.1.2. Выравнивание
2.1.3. Повторение
2.1.4. Контраст
2.1.5. Баланс
2.2. Основы дизайна для проектирования пользовательского опыта и не только
Резюме
ЧАСТЬ II. ПОЛЬЗОВАТЕЛЬСКИЙ ОПЫТ
Глава 3. Основы пользовательского опыта
3.1. Пользовательский опыт не ограничивается визуальным дизайном
3.2. Что такое пользовательский опыт
3.3. Роли специалистов в области UXпроектирования
3.3.1. Исследование пользователей
3.3.2. Проектирование пользовательского опыта
3.3.3. UXписатели
3.4. Методологии проектирования пользовательского опыта
3.4.1. Дизайн ориентированный на пользователя
3.4.2. Модель «двойного алмаза»
3.5. Углубленное изучение практик проектирования пользовательского опыта
Резюме
Глава 4. Исследование пользователей
4.1. Введение в исследования пользовательских потребностей
4.1.1. Исследование пользователей кажется дорогостоящим однако неудача обходится еще дороже
4.1.2. Сбор исходных данных
4.1.3. Персоны пользователей
4.1.4. Потребности пользователей
4.1.5. Определение целей сайта: согласование пользовательских и бизнесцелей
4.1.6. Постановка SMARTцелей
4.2. Стратегии проведения пользовательских исследований
4.2.1. Качественные и количественные исследования
4.2.2. Отношение и поведение пользователя
4.2.3. Методы исследования пользователей
4.2.4. Исследование как непрерывный процесс
Резюме
Глава 5. Проектирование пользовательского опыта
5.1. Информационная архитектура
5.1.1. Картирование сайта
5.1.2. Контентанализ и аудит
5.2. Пользовательские сценарии и пути
5.2.1. Пользовательские сценарии
5.2.2. Пути пользователей
5.3. Разработка дизайна сайта и приложения
5.3.1. Создание вайрфреймов
5.3.2. Дизайн пользовательского интерфейса и цветные макеты
5.3.3. Прототипирование
Резюме
ЧАСТЬ III. ЭЛЕМЕНТЫ ВИЗУАЛЬНОГО ДИЗАЙНА
Глава 6. Создание макета и композиция
6.1. Создание структуры сайта
6.2. Использование сетки
6.2.1. Определение сетки
6.2.2. Размеры сетки
6.3. Выбор макета
6.3.1. Использование одноколоночных шаблонов
6.3.2. Распространенные многоколоночные шаблоны
6.3.3. Паттерны чтения
6.4. Использование пустого пространства
6.5. Соображения по поводу отзывчивого дизайна
6.5.1. Разработка дизайна для мобильных устройств
6.5.2. Разработка дизайна для многоэкранных и складных устройств
Резюме
Глава 7. Улучшение макета сайта с помощью анимации
7.1. Зачем нужна анимация
7.1.1. Повышение удобства использования
7.1.2. Создание запоминающихся взаимодействий
7.1.3. Использование анимации в качестве украшения вызывающего эмоциональный отклик
7.2. Когда стоит использовать анимацию
7.2.1. Предоставление подсказок для навигации по сайту
7.2.2. Предоставление пользователям обратной связи при их взаимодействии с элементами пользовательского интерфейса
7.2.3. Навигация и переходы между страницами
7.2.4. Указание статуса выполняемой задачи
7.2.5. Думайте на перспективу
7.3. Планирование анимаций
7.3.1. Создание раскадровки
7.4. Технические аспекты анимации
7.4.1. Соображения по поводу производительности
7.4.2. Соображения по поводу доступности
Резюме
Глава 8. Использование типографики на вебсайте
8.1. Основы типографики
8.1.1. Различие между гарнитурой и шрифтом
8.1.2. Различные классификации шрифтов
8.1.3. Стили и вес шрифтов
8.2. Выбор шрифта для вебпроекта
8.2.1. Характеристики хорошего вебшрифта
8.2.2. Сопряжение шрифтов и гарнитур
8.2.3. Создание набора параметров шрифта
8.2.4. Задание размеров шрифтов
8.2.5. Создание вертикального ритма
8.2.6. Обеспечение удобочитаемости
Резюме
Глава 9. Теория цвета
9.1. Терминология теории цвета
9.1.1. Тень оттенок и тональность
9.1.2. Теплые и холодные цвета
9.1.3. Тон насыщенность и светлота
9.2. Цветовой круг
9.2.1. Цветовые отношения
9.2.2. Изучайте разные примеры использования цветов
9.3. Психология цвета
9.4. Выбор и применение цветовой схемы
9.5. Руководство по выбору и применению цветовой схемы
9.6. Соображения доступности
9.6.1. Тестирование цветового контраста
9.6.2. При обозначении состояния или статуса нельзя полагаться только на цвет
9.7. Цветовые режимы для веб
9.7.1. Режимы RGB и RGBA
9.7.2. Шестнадцатеричные цветовые коды
9.7.3. Режимы HSL и HSLA
9.7.4. Режимы CIE Lab и LCH
9.7.5. Выбор цветового режима
9.8. Несоответствие цветов на разных экранах
Резюме
Глава 10. Построение сайта
10.1. Требования к сайту проекта
10.2. Организация контента с помощью вайрфрейма
10.3. Создание системы сеток и задание расстояний
10.4. Выбор типографики
10.5. Задание вертикального ритма
10.6. Выбор изображений
10.6.1. Использование изображений для задания тона
10.6.2. Наложение текста поверх изображений
10.7. Выбор и применение цветовой палитры
10.8. Завершающие штрихи
10.9. Отзывчивый дизайн
10.9.1. Дизайн сайта для планшета восьмиколоночная сетка
10.9.2. Дизайн сайта для мобильного устройства четырехколоночная сетка
10.9.3. Дизайн по принципу Mobile First
Резюме
ЧАСТЬ IV. ПОСЛЕ РАЗРАБОТКИ ВИЗУАЛЬНОГО ДИЗАЙНА
Глава 11. Тестирование проверка и итерации
11.1. Цикл проектирования
11.1.1. Замена существующего дизайна
11.1.2. Минимально жизнеспособный продукт
11.1.3. Оценка готовности дизайна к тестированию
11.2. Виды тестирования
11.2.1. Проведение интервью с клиентами
11.2.2. Тестирование в производственной среде
11.2.3. A/Bтестирование
11.2.4. Поэтапное развертывание
11.2.5. Методы первоначального исследования пользователей
11.3. Применение результатов тестирования
Резюме
Глава 12. Решения разработчиков и пользовательский опыт
12.1. Влияние написанного кода
12.1.1. Важность написания качественного HTMLкода
12.1.2. Производительность и загрузка страниц
12.1.3. Вебтехнологии не имеющие кроссбраузерной поддержки
12.2. Продукты ориентированные на разработчиков
Резюме
Приложение. Дополнительные ресурсы
Пользовательский опыт
Структура сетки и макет
Анимация
Типографика
Цвет
Тестирование дизайна
