Веб-дизайн для недизайнеров

Об авторе
Благодарности
Предисловие
Введение
Глава 1
Если из всех глав выбирать одну, то лучше эту
Внешний вид - ничто. Функционал - всё
Хорош ли дизайн? Измеряйте
Показывайте свой дизайн - и пусть оценивают!
Готовые решения по улучшению дизайна
Избавляйтесь от беспорядка в дизайне -
улучшайте внешний вид
Глава 2
Теория и принципы веб-дизайна
Раздел 2.1 Сетка
Готовые решения
Сетки в программах для создания мокапов
Сетки для веб-дизайна
Живой пример
Раздел 2.2 Цвет
Готовые решения
Ограничьте цветовую схему
Используйте цвет для акцентирования
Не забывайте про контраст
Находите палитры на специальных сайтах
Живой пример
Раздел 2.3 Типографика
Основы типографики
Категории шрифтов
Межстрочный интервал и высота строки
Кернинг и межбуквенный интервал
Принципы типографики
Используйте в дизайне не более двух гарнитур
Избегайте выравнивания по ширине или по центру
Выравнивание по центру может вызывать
сложности
Длина строки
Готовые решения
Бесплатные ресурсы для выбора шрифтов
Сайты с отобранными шрифтами
Живой пример
Раздел 2.4 Белое пространство
Базовые тезисы о белом пространстве
Белое пространство улучшает восприятие
Белое пространство облегчает чтение
Белое пространство усиливает Call-to-action
Белое пространство задает изысканный тон
Немного теории
Интервалы между строк
Пространство между элементами
Пространство между группами элементов
Готовые решения
Удваивайте белое пространство между элементами
Убедитесь в оптимальном размере межстрочных
интервалов
Живой пример
Раздел 2.5 Макет и иерархия живой пример
Раздел 2.6 Текст
Живой пример
Раздел 2.7
Пользовательский опыт
До начала дизайна
Конкурентный анализ
Опросы и интервью
В процессе дизайна
Вайрфреймы, прототипы и юзабилити-
тестирование
После запуска проекта
Регулярное юзабилити-тестирование
Готовые решения
Помогите пользователю действовать, как хотите
вы
Обращайте внимание на размер сайта
Выполняйте юзабилити-тестирование
Включайте аналитику
Живой пример
Раздел 2.8
Изображения и художественные элементы
основы
Фотографии и иконки не обязательны
Лица как мощный инструмент
Обращайте внимание на размер файлов
Внимательно выбирайте стоковые фотографии
Иконки
Готовые решения
Сайты стоковых фото
Художественное оформление (иконки, графика и
иллюстрации)
Живой пример
Раздел 2.9
Дополнительные нюансы
Начинайте с простого
Ориентируйтесь на "Правило третей"
Избегайте чистого черного
Свет должен падать сверху
Контраст подчеркивает главное
Меняем фон - изменяем цвет
Будьте внимательны при наложении текста
на изображение
Советы при проектировании порядка
действий пользователя
Глава 3
Процесс дизайна и выработка профессионального
видения
Раздел 3.1
Поиск вдохновения
Раздел 3.2
Планирование
Раздел 3.3
Прототипы
Создание вайрфрейма мокап вашего дизайна
Раздел З.4
Получение обратной связи
Оценка дизайна свежим взглядом
Рекомендации по сбору обратной связи
Демонстрация вашего дизайна друзьям и семье
Демонстрация дизайна незнакомым людям
Раздел 3.5
Код дизайна
Не старайтесь быть оригинальным
Используйте фреймворк CSS
Не забывайте: дизайн должен быть
отзывчивым
Уделите внимание размеру сайта
Используйте аналитику
Глава 4
Предубеждения
Глава 5
Дополнительные ресурсы
книги
Блоги и онлайн-журналы онлайн-курсы
Примеры для вдохновения
Ресурсы для работы с цветом
Ресурсы шрифтов
Ресурсы изображений
CSS-фреймворки
Веб-аналитика
Создание вайрфреймов
Сбор обратной связи
Заключение
Ссылки