Курс «Веб-дизайн для детей 9-13 лет»

Веб-дизайн — это то направление, которое позволяет детям в своих проектах воплощать в жизнь идеи и фантазии. Графический дизайн для детей — это не просто интересное и увлекательное занятие, но и возможность развить творческие способности, научить их мыслить креативно и нестандартно, а еще получить навыки, которые востребованы в индустрии информационных технологий. Этот онлайн-курс по веб-дизайну для детей — обучение верстке сайтов: с нуля до загрузки на хостинг.

Курс проводится рамках образовательного проекта «Онлайн-школа программирования для детей «Пиксель». На уроках ребенок будет изучать графические редакторы, учиться разработке макета, работе с визуалом, шрифтами и другими элементами лендинга. При обучении применяются актуальные образовательные технологии. Программа разбита на отдельные модули — так детям проще понимать о чем идет речь и переходить к более сложному материалу.

Краткое содержание онлайн-курса «Веб-дизайн для детей 9-13 лет»:

1. Изучение основ визуала: правила композиции, цвета, типографики.
2. Знакомство с Figma.
3. Анимация и плагины для работы.
4. Текст и наборы иллюстраций в Figma.
5. Основы работы с конструктором сайтов — Tilda.

Если ребенок много времени проводит за компьютером, интересуется новыми технологиями и хочет научиться создавать сайты, то этот курс поможет в этом. Дети раскроют свои творческие способности и получат важные навыки, которые пригодятся им во взрослой жизни.

Модуль 1. Знакомство с Figma

• На первом модуле курса по веб-дизайну ученики познакомятся с основами визуала: правилами композиции, типографики, цвета. Также будут изучены основные инструменты в Figma – платформе, с помощью которой создаются макеты сайтов и приложений. Полученные знания и навыки позволят собирать трендовые сайты и рекламные страницы товаров, используя принципы построения сбалансированной композиции и практики хорошего пользовательского опыта.

Ученики на занятиях:

• Научатся составлять ассоциативную карту, матрицу посыла бренда (инструменты для определения стилистики будущего продукта).
• Узнают, что такое мудборд, как работать с ним и доносить свою идею заказчикам.
• Узнают основы композиции и правила работы с модульными сетками.
• Научатся самостоятельно настраивать сетки и гармонично распределять по ним объекты.
• Получат навыки подбора шрифтовых пар и цветовых палитр для проекта.
• Будут закреплять навыки на практике, создавая новые проекты.

В результате первого модуля, используя полученные навыки, ученики создадут первый лендинг (сайт-одностраничник, созданный в рекламных целях) и его мобильную версию на заданную тематику.

Пример занятия:

• На уроке разбираются основные инструменты Figma. Ученикам предлагается изучить существующую форму ввода (блок, где пользователь оставляет свои данные и нажимает на кнопку для связи с менеджером), проанализировать недочеты и нарушения композиции и собрать новую форму, используя полученные навыки о композиции и цвете.
• При проектировании формы ввода дети учатся создавать простейшие элементы дизайна – поля ввода, кнопки. В результате должна получиться гармоничная, понятная и минималистичная форма ввода, верно организованная в слоях.

Методический план модуля:

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

Модуль 2. Создание прототипов

• На втором модуле курса по веб-дизайну ученики познакомятся с основами прототипирования в Figma, изучат варианты анимации, освоят плагины для работы над проектами. Дети также изучат пользовательские сценарии, основы построения проекта, проведут первые исследования в сфере Юзабилити и паттернов веб-дизайна. Ребята научатся проводить аудит и делать редизайн устаревших сайтов. Полученные знания и навыки позволят в дальнейшем создавать кликабельные прототипы сайтов и мобильных приложений, создавать редизайн на основе исследований.

Ученики на занятиях:

• Освоят основные варианты анимации в Figma.
• Изучат пользовательские сценарии и научатся создавать их, исходя из потребностей пользователей.
• Узнают, как усовершенствовать дизайн, самостоятельно проведут редизайн сайта.
• Научатся использовать плагины в работе над проектами.
• Изучат основы прототипирования.
• Закрепят навыки на практике, создавая новые проекты.

В результате второго модуля, используя полученные навыки, ученики создадут кликабельные прототипы сайта и мобильного приложения из 3-5 экранов.

Пример занятия:

• На одном из уроков мы разберем основные инструменты прототипирования, состояния компонентов и их переходы. Ученики смогут анимировать кнопку из задачи прошлого модуля, собрать главный экран с кнопкой и посмотреть его прототип с кликабельными элементами.
• Изучая основы прототипирования, ребята будут прослеживать логику сценария и поведения пользователя при взаимодействии с интерфейсом.
• В результате должен получиться экран с кнопкой, при клике на которую пользователь сможет совершить целевое действие.

Методический план модуля:

• Прототипирование в Figma. Состояния элементов в прототипе.
• Виды анимации в Figma.
• Изучение пользовательских сценариев.
• Паттерны взаимодействия и Юзабилити.
• Виды исследований. Аудит приложения.
• Изучение готовых сайтов. Гипотезы и редизайн.
• Плагины и применение их в работе над проектом.
• Проектирование иконок в Figma.
• Прототипирование сайта. Навигация, переходы между страницами.
• Создание мини-приложения. Часть 1: особенности работы над мобильным приложением.
• Создание мини-приложения. Часть 2: работа над пользовательским сценарием и паттернами.
• Прототипирование мобильного приложения.

Модуль 3. Создание сайта

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

Ученики на занятиях:

• Освоят основные правила верстки текста (копирайтинга).
• Изучат самые популярные стили в веб-дизайне.
• Узнают, что такое продукт и как с ним работать.
• Научатся использовать иллюстрации в своих проектах.
• Изучат новые приемы анимационных эффектов в Figma.
• Будут закреплять навыки на практике, создавая новые проекты.

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

Пример занятия:

• На занятии разбираются основные стили веб-дизайна. Ученикам предлагается сначала угадать, в каких стилях выполнены сайты на тренажере насмотренности, затем создать один экран в выбранном стиле. Сделать экран кликабельным и проверить прототип. При изучении стилей ученики смогут увидеть основные различия и особенности направлений.
• В результате должен получиться экран с кнопкой в одном из стилей веб-дизайна.

Методический план модуля:

• Верстка текста. Роль текста в дизайне.
• Композиция и стили в веб-дизайне. Минимализм.
• Стили в веб-дизайне. Глассморфизм.
• Эффекты в фигме. Маски.
• Анимация в интерфейсе. Параллакс.
• Бизнес-эмпатия. Тренажер насмотренности.
• Что такое продукт и как с ним работать.
• Иллюстрации для интерфейса.
• Создание лендинга в конструкторе сайтов Tilda.
• Все инструменты работы в Figma.
• Создание сайта танцевального клуба с параллакс-эффектом.
• Прототипирование сайта танцевального клуба.

• Формат
  Самостоятельно с наставником
  Видеоуроки
  Обучение в ЛК на сайте автора
• Количество уроков
  1
• Уровень сложности
  Для новичков
• Когда вы будете учиться
  В любой день в любое время
• Домашние задания
  Есть
• Документ об обучении
  Сертификат Освоение программы курса
• Сопровождение
  Куратором
• Техническая поддержка
  В рабочее времяЧат в ВКЧат в мессенджереЭлектронная почтаТелефон