В ходе урока дети изучают ключевые инструменты для создания прототипов, а также как управлять состояниями и переходами элементов интерфейса. Задание — оживить кнопку из предыдущего задания, интегрировать её в основной экран и протестировать интерактивный прототип. Это позволит им понять, как пользователь будет взаимодействовать с приложением.
В итоге мы стремимся к созданию интерфейса с единственной функциональной кнопочкой. Нажатие на эту кнопку позволит пользователю выполнить необходимую операцию.
Ученики на курсе: - Обретут навыки создания ассоциативных карт и матриц, помогающих определять концепцию нового продукта;
- Изучат мудборды, освоят их применение для визуализации идей и их представления клиентам;
- Познакомятся с методами подбора изображений для проектов, найдут источники вдохновения и материалов;
- Освоят базовые принципы композиции и использования модульных сеток в дизайне.
Программа модуля включает:— Обучение работе с компоновкой элементов в пространстве интерфейса;
— Освоение принципов создания резиновых и адаптивных веб-страниц;
— Развитие умений в выборе сочетаний шрифтов и цветовой гаммы для сайта;
— Практика разработки дизайн-проектов.
В конце первого модуля обучения подростки применят знания, разработав промо-страницу и её версию для смартфонов на выбранную тему.
Пример занятия:На занятии разбираются основные инструменты Figma. Ученикам предлагается изучить существующую форму ввода (блок, где пользователь оставляет свои данные и нажимает на кнопку для связи с менеджером), проанализировать недочеты и нарушения композиции и собрать новую форму, используя полученные навыки о композиции и цвете, а также аргументировать свои решения и предложить дополнительную функциональность формы.
При проектировании формы ввода дети учатся создавать простейшие элементы дизайна – поля ввода, кнопки, селекторы, элементы навигации.
В результате должна получиться гармоничная, понятная и минималистичная форма ввода, верно организованная в слоях.
Методический план модуля:- Создание мудборда, матрицы позиционирования и ассоциативного ряда к проекту. Исправление ошибок, допущенных на макетах и в баннерах, создание верных композиционных решений. Работа с организацией всех слоев на макете.
- Типографика – подбор шрифтовых пар, основные принципы работы с типографикой. Шрифтовые стили. Подбор размеров для текста на проекте.
- Создание одной страницы сайта в трендовой стилистике. Создание рекламного баннера, используя полученные знания по основам композиции, типографики и цвета.
- Создание сторис для мобильной версии.
- Создание палитр и стилей для проекта.
- Работа с библиотеками стилей. Организация стилей в проекте.
- Основные принципы организации проектов и макетов в Figma.
- Проработка мудборда (доска настроения) для заказчика. Создание одностраничного рекламного сайта для определенного бренда. Создание мобильной версии сайта.
- Создание дизайн-системы и организация UI кита.
- Навыки поиска, редактирования и подбора графических элементов для проекта.
- Работа с ТЗ от заказчика.