Пора сделать веб-разработку доступной для всех. Забавное, полезное и насыщенное информацией руководство охватывает все ключевые принципы дизайна, передовые практики, полезные шоткаты, профессиональные советы, реальные примеры и базовые знания программирования, необходимые для создания красивого веб-сайта, которым вы будете уверенно делиться со всем миром. Почему? Потому что вы научитесь разрабатывать современные сайты!
«Веб-дизайн для недизайнеров» содержит все необходимое, чтобы вы чувствовали себя комфортно, занимаясь веб-разработкой, в том числе множество реальных примеров веб-сайтов, которые должны вдохновлять и мотивировать. Не нужно тратить время и деньги на дорогого графического дизайнера, эта книга проведет вас через основы, воспользовавшись самыми быстрыми шоткатами, – вы все сделаете сами, и прямо сейчас.
Author(s): Трэйси Осборн
Edition: 1
Publisher: Питер
Year: 2022
Language: Russian
Commentary: Vector PDF
Pages: 176
City: СПб.
Tags: User Experience; Color; Typography; Web Design; Design Thinking
Об авторе
Благодарности
Предисловие
Введение
Глава 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. Прототипы
Создание вайрфрейма
Мокап вашего дизайна
Раздел 3.4. Получение обратной связи
Оценка дизайна свежим взглядом
Рекомендации по сбору обратной связи
Демонстрация вашего дизайна друзьям и семье
Демонстрация дизайна незнакомым людям
Раздел 3.5. Код дизайна
Не старайтесь быть оригинальным
Используйте фреймворк CSS
Не забывайте: дизайн должен быть отзывчивым
Уделите внимание размеру сайта
Используйте аналитику
Глава 4. Предубеждения
Глава 5. Дополнительные ресурсы
Книги
Блоги и онлайн-журналы
Онлайн-курсы
Примеры для вдохновения
Ресурсы для работы с цветом
Ресурсы шрифтов
Ресурсы изображений
CSS-фреймворки
Веб-аналитика
Создание вайрфреймов
Сбор обратной связи
Заключение
Ссылки
