Онлайн-курс «Дизайн для фронтендеров»

Разработчик должен понимать принципы дизайна интерфейсов и пользовательского опыта, чтобы своевременно вносить изменения и создавать продукты, которые не только отлично функционируют, но и максимально устраивают пользователей. Уверенность в навыках дизайна позволит работать эффективно, сократит время разработки и повысит качество финального продукта. Этот курс проекта «HTML Academy» проводится для фронтендеров, которые хотят разобраться в принципах UX/UI.

Во время обучения вы научитесь прототипировать в Figma макеты сайтов, адаптированные под разные устройства и экраны, узнаете о современных тенденциях в веб-дизайне и научитесь создавать понятный интерфейс, выбирая эстетически привлекательные визуальные решения. Особенностью подготовки на курсе является практический подход и акцент на реальные проекты. Преподаватели являются экспертами в и помогут быстро развить навыки дизайна.

Краткая программа курса «Дизайн для фронтендеров»:

1. Работа с веб-макетом в Figma.
2. Правила композиции в дизайне интерфейсов.
3. Особенности работы с текстом. Лайфхаки и секреты, которые помогут настроить текстовую часть.
4. Улучшение интерфейса с помощью добавления анимации.
5. Почему важен пользовательский опыт и какую он играет роль в разработке.

В результате вы обучитесь навыкам, которыми должен владеть middle и станете разработчиком, способным создавать веб-приложения и сайты с понятным интерфейсом и улучшенным пользовательским опытом.

Раздел 1.Работа с Фигмой

Разберёмся, почему разработчику важно понимать основы дизайна и как применять эти знания на практике. Научимся работать с базовыми инструментами в Фигме.

‍Введение

• Зачем разработчикам понимать дизайн.
• ‍Работа с макетом: настройка раскладки, выравниваний и параметров
• Инструменты работы со слоями.
• Кейс: создание карточки товара.
• Задание: создание гибкой карточки новости.
• Кейс: создаём гибкую карточку новости.

Работа с макетом: стили и компоненты, работа библиотек

• Инструменты работы со стилями и компонентами
• Кейс: создание компонента инпута.
• Задание: создание компонента кнопки.
• Кейс: создаём компонент кнопки.‍
• Тест по первому разделу.
• Дополнительные материалы.

Раздел 2. Сетка и ритм

Познакомимся с базовыми правилами композиции в дизайне. Научимся работать с сеткой и выстраивать ритм в макетах.

• Базовые правила композиции в дизайне интерфейсов.
• Какие бывают сетки и в чём их отличие.
• Модульность: что такое блоки и колонки.
• Почему 8px сетка — стандарт индустрии.
• Понятие вертикального ритма в дизайне интерфейсов.
• Тест: применение сеток.
• Кейс: создание раскладки страницы по сетке.
• Задание: расположение элементов по сетке.
• Кейс: эталонная реализация раскладки по сетке.
• Тест по второму разделу.
• Дополнительные материалы.

Раздел 3. Типографика

Разберёмся в принципах работы с текстом. Рассмотрим виды шрифтов и их основные параметры, научимся подбирать шрифтовые пары и выстраивать иерархию контента.

Шрифты и шрифтовые пары

• Типографика в интерфейсах: какие бывают виды шрифтов.
• Шрифтовые пары: как сочетать шрифты.
• Задание: подбор шрифтовых пар.
• Кейс: подбираем шрифтовые пары.‍

Работа с текстом в дизайне интерфейсов

• Иерархия контента: как управлять размером, чтобы создать понятный интерфейс.
• Фишки и секреты, которые помогут правильно настроить текст в макете.
• Где брать шрифты для проекта?
• Кейс: работа с текстовыми элементами.
• Задание: типографика в макете.
• Кейс: выстраиваем типографику в макете.
• Тест по третьему разделу.

Раздел 4. Цвет

Погрузимся в основы теории цвета, изучим принципы контрастности и доступности интерфейсов. Узнаем, какие правила нужно соблюдать, чтобы доработать макет без дизайнера.

Теория цвета в понятии цветового пространства:

• Основы теории цвета: палитры, оттенки, восприятие.
• Цветовые пространства и особенности работы с ними.
• Задание: построение цветовой палитры для сайта.
• Кейс: создаём цветовую палитру для сайта, эталонная реализация.‍

Работа с цветом в дизайне интерфейсов:

• Принципы контрастности и доступности при работе с цветом.
• Правильный нейминг и работа с цветовыми стилями в Фигме.
• Основные принципы для правильного выстраивания акцентов с помощью цвета.
• Задание: работа с акцентами.
• Кейс: работаем с акцентами.
• Советы, которые помогут самостоятельно доработать макет.
• Кейс: исправление ошибок в готовом макете.
• Задание: исправление ошибок в макете и добавление состояний для кнопок.
• Кейс: исправляем ошибки в готовом макете и добавляем состояния для кнопок.
• Тест по четвёртому разделу.

Раздел 5. Адаптив

Разберёмся, как адаптировать сайт для широких/мобильных экранов и как продумать пограничные состояния интерфейсов без готовых макетов и помощи дизайнера.‍

• Принципы адаптива: как перестраивать макет.
• Паттерны интерфейса мобильного дизайна.
• Адаптация текста.
• Как адаптировать макет в Фигме.
• Кейс: создание мобильной версии из десктопной.
• Задание: создание мобильной версии интерфейса для десктопного макета.
• Кейс: создаём мобильную версию интерфейса для десктопного макета.
• Тест по пятому разделу.
• Дополнительные материалы.

Раздел 6. Анимация

Научимся улучшать интерфейс с помощью анимирования. Узнаем, какие анимации использовать для разных задач и как не испортить дизайн, пытаясь его улучшить.‍

• Анатомия UI-анимации.
• Задачи анимации.
• Кейс: анимирование интерактивных элементов.
• Задание: анимирование интерактивных частей интерфейса.
• Кейс: анимируем интерактивные части интерфейса.
• Тест по шестому разделу.
• Дополнительные материалы.

Раздел 7. Пользовательский опыт

Разберёмся, что такое пользовательский опыт, почему он важен и какую роль играет в этом деле разработчик. Познакомимся с принципами UX и изучим примеры хороших и плохих интерфейсов.

• ‍Введение в принципы UX.
• Стандартные UX-паттерны в дизайне интерфейсов.
• Обратная связь в интерфейсе: как сделать продукт бесшовным, понятным и дружелюбным.
• Контекст в UX: в какой ситуации пользователь может использовать интерфейс.
• Пустые состояния: как не ставить пользователей в тупик при работе с интерфейсом.
• Тест по седьмому разделу.

Раздел 8. Итоговый раздел

• Подведём итоги курса и закрепим полученные знания на практике.
• Итоги курса.
• Правила, которые нужно соблюдать для подготовки хорошего интерфейса.
• Задание: доработки макета сайта.
• Кейс: дорабатываем макет сайта.

Финальный тест по всей программе курса.

• Формат
  Самостоятельно
  Видеоуроки / PDF-пособие/книга
  Обучение в ЛК на сайте автора
• Демодоступ
• Уровень сложности
  Для опытных
• Когда вы будете учиться
  В любой день в любое время
• Домашние задания
  Есть
• Сопровождение
  Куратором
• Общение с группой
  Форум или чат внутри ЛК
• Техническая поддержка
  В рабочее времяЧат внутри ЛК
• Что понадобится для обучения
  Необходимые знания: базовый HTML/CSS