На этом направлении дети освоят один из самых популярных и полезных инструментов для создания макетов сайтов и приложений — графический редактор Figma. Курс наполнен как необходимыми теоретическими знаниями, так и практикой — разработкой макета сайта интернет-магазина игрушек.
На занятиях мы спроектируем главную страницу интернет-магазина, а также ее мобильную версию, создадим внутренние страницы и сделаем переходы между ними. Часть курса посвящена знакомству с основами UX/UI-дизайна и построению логики работы сайта. Ребята соберут целую цепочку интерактивных страниц, научатся анимировать элементы сайта и познакомятся с возможностями Figma для проектирования многостраничных сайтов.
Ребята узнают:- Чем занимается UX/UI-дизайнер;
- Из каких элементов состоит интерфейс интернет-магазина;
- Как продумать логическую цепочку работы сайта;
- Как разработать мобильную версию сайта;
- Какие инструменты Figma помогут создать интерактивный макет сайта.
Модуль состоит из 5 занятий по 1,5 часа, которые знакомят детей с увлекательным миром проектирования сайтов, учат основам UX/UI-дизайна и разработке “живого” макета сайта с помощью онлайн-редактора Figma.
Пример занятия:На уроке мы разберем, из чего состоит сайт интернет-магазина, его основные элементы и страницы, на примерах существующих сайтов. Соберем главную страницу из заготовок (логотип, корзина, поиск, слайдер, карточка товара, горизонтальное меню и др.), как пазл из кусочков, и “раскрасим” получившийся макет главной страницы с помощью инструментов Figma.
Методический план модуля:- Из чего состоит сайт интернет-магазина. Создание прототипа и дизайна главной страницы сайта в Figma;
- Создание интерактивных элементов дизайна сайта. Компоненты, стили, прототипы Figma;
- Мобильная версия главной страницы сайта. Привязки в Figma;
- Внутренние страницы сайта: "О нас", "Доставка и оплата", "Каталог", "карточка товара", "Контакты";
- Корзина, заказ товара. Кликабельный прототип и анимация интерфейса в Figma.