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