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