Веб-дизайн и создание сайтов в Figma и Tilda
Ваш ребенок научится создавать продающие и функциональные сайты, блоги, интернет-магазины без навыков программирования.
Цель — формирование системы понятий, знаний, умений и навыков в области изучения веб-дизайна. Обучение включает в себя формирование навыков самостоятельной работы через методы проектирования и создания дизайна сайтов, приложений, контента для соц сетей для детей от 9 лет.

Курс содержит два больших раздела: Figma и Tilda.

Figma — онлайн-сервис для разработки интерфейсов и прототипирования с возможностью организации совместной работы в режиме реального времени.

Конструктор сайтов Tilda в свою очередь позволяет создать сайт или интернет-магазин без программирования.


В результате изучения курса ребята научатся:
  1. Создавать с нуля дизайн сайтов и приложений в Figma, конструировать сайты на Tilda;
  2. Создавать интерактивные прототипы с возможностью перемещаться по страницам сайта/приложения;
  3. Базово обрабатывать растровые изображения и создавать векторные иконки/иллюстрации с помощью масок, корректирующих слоев, boolean groups;
  4. Использовать в работе;
  5. Работать в команде (с тренером) благодаря возможности совместной работы в Figma;
  6. Создавать адаптивы для сайтов, с помощью который сайт будет выглядеть стильно как на большом экране, так и на телефоне;
  7. Создавать smart-анимацию, анимацию с помощью плагина Motion (в Figma), step-by-step и базовую анимацию в Tilda;
  8. Использовать плагины, благодаря которым работа в Figma станет в разы продуктивнее и интереснее;
  9. Пользоваться стилями и компонентами.


Курс включает в себя видео уроки, презентации, практикумы и контрольные проекты, которые позволяют проверить и закрепить полученные знания.

Данный курс будет полезен для ребят, которых привлекает творческая составляющая в создании сайтов.

На изучение данного курса на базовом уровне без дополнительных тем потребуется от 70 до 80 часов. На углубленном уровне с дополнительными темами - от 90 до 100 часов.
Процесс обучения
Курс разделен на 2 большие части:
Figma. Это онлайн-сервис для дизайнеров интерфейсов и веб-разработчиков. Разработка интерфейсов происходит в онлайн-приложении. У Figma низкие требования
к подготовке пользователя и мощный потенциал при относительной простоте.

На данном курсе ученик приобретет навыки пользования базовыми инструментами
и разовьет чувства стиля, симметрии, гармонии и красоты.

Выпускной проект: дизайн интернет-магазина.
Tilda. Это онлайн-конструктор. Создатели платформы придумали новый способ сделать сайт: его можно собирать из блоков. Можно не иметь навыки программиста и дизайнера, ошибиться сложно. Сайт получается красивым и с первых дней приносит пользу.

На курсе изучаются простейшие шаблоны сайтов, сайты-одностраничники, блоги, интернет-магазины. Дополнительно работает с платежными системами и СЕО продвижением.
Ученик научится не только работать по заданию, но и приобретет навыки общения с заказчиком и составления технического задания.

Выпускной проект: продающий сайт, блог или интернет-магазин.
Tilda
Figma
Программа обучения
На изучение данного курса на базовом уровне без дополнительных тем потребуется от 70 до 80 часов. На углубленном уровне с дополнительными темами - от 90 до 100 часов.
Figma
Модуль 1. Основы и интерфейс, 25 – 30 ч.

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

Основные темы:
  • Знакомство с Figma
  • Маски и режимы наложения
  • Перо
  • Плагины
  • Создание иллюстраций

К концу модуля ученик:
  1. Умеет рисовать пером простые формы, в том числе с закругленными углами;
  2. Знает, что такое маски, может, например, сделать "круглую аватарку";
  3. Умеет создавать все виды градиентов;
  4. Знает, как загрузить и запустить плагины;
  5. Умеет скачивать и вставлять картинки из интернета, в том числе иконки svg;
  6. Умеет редактировать текст;
  7. Знает, как удалять, копировать, вырезать объекты, как переставить слои местами.

Модуль 2. Макетирование и прототипирование, 15 – 20 ч.

Ребенок учится создавать интерактивные прототипы и расставлять акценты, работает над интернет-магазином.

Основные темы:
  • Модульная сетка
  • Акценты в веб дизайне
  • Создание макета адаптивного сайта
  • Создание прототипа в Figma
  • Проектирование в веб-дизайне
  • Макет страницы магазина в Figma
  • UI кит.

К концу изучения модуля ученик:
  1. Сделал хотя бы один маленький сайт и одно приложение;
  2. Умеет создавать интерактивные прототипы, переключаться по экранам;
  3. Уже хорошо понимает, зачем нужны фреймы;
  4. Умеет расставлять акценты в веб дизайне;
  5. Знаком с такими сайтами, как https://www.behance.net/, https://unsplash.com/, https://www.pinterest.com/, https://thenounproject.com/ или альтернативными.

Модуль 3. Продвинутые инструменты, 10 – 12 ч.

Ученик узнает про стили и компоненты, учится делать большие и понятные таблицы, списки. Также он изучает, как лучше организовать фильтры в интернет-магазине.

Основные темы:
  • Стили и Компоненты
  • Оформление работы в портфолио
  • Таблицы

К концу изучения модуля ученик:
  1. Умеет создавать стили и компоненты;
  2. Знает, как сделать инстанс компонента и как он взаимодействует с мастером компонентом;
  3. Знает, как сделать список;
  4. Умеет оформлять таблицы.
Tilda
Модуль 4. Основы создания сайтов, 18 – 20 ч.

Каждый ученик получает доступ к премиум аккаунту Tilda. Ребенок создает свой первый лендинг, учится работать с zero-блоками, которые выводят пользовательские возможности на новый уровень. Также ученик работает с каталогом, 3D визуалом.

Основные темы:
  • Знакомство с конструктором Тильда
  • Первый Landing
  • Знакомство с нулевым блоком
  • Создание одностраничного интернет-магазина
  • Работа с каталогом
  • Перенос макета из Figma

К концу изучения модуля ученик:
  1. Может создать лендинг на Тильда с использованием готовых блоков;
  2. Умеет работать с Zero-блоком и настраивать готовые блоки;
  3. Может защитить контент на сайте от копирования;
  4. Знает, как сделать email-рассылку
  5. Умеет переносить сайт из Figma в Tilda.

Модуль 5. Веб-анимация, 8 – 10 ч.

Ученик изучает различные визуальные эффекты, знакомится с простой анимацией и step-by-step animation.

Основные темы:
  1. Создание пошаговой анимации
  2. Эффект печатной машинки, эффект частиц, бегущая строка
  3. Пошаговая анимация.

К концу изучения модуля ученик:
  1. Может вставить на сайт базовую анимацию;
  2. Умеет настраивать step-by-step анимацию;
  3. Знаком с различными визуальными эффектами, например, эффектом частиц;
  4. Умеет применять на сайте html-блоки.

Модуль 6. Анализ и продвижение, 4 – 6 ч.

Ребенок знакомится с основами SEO-продвижения и изучает работу с Google Analytics.

Основные темы:
  • UTM-метки
  • Веб-аналитика сайта
  • Google Analytics
  • SEO продвижение сайта

К концу изучения модуля ученик:
  1. Умеет базово оптимизировать сайт для поисковых систем;
  2. Умеет подключать Google Search Console;
  3. Может создать свой рекламный аккаунт в Google Analytics.
Проекты учеников