JET School

Курс UI/UX дизайна

uiuxfigmauser interfacedesignwireframeprototype

Описание курса

UI/UX Дизайн Курс предназначен для подростков в возрасте от 11 до 16 лет и представляет собой 6-месячную практическую и творчески ориентированную образовательную программу, проходящую в формате 3 занятий в неделю (каждое по 2 часа, 2 очных + 1 онлайн).

Программа охватывает шесть основных модулей:

  1. Основы UI/UX и Figma – Интерфейс Figma, фреймы, цвет, типографика и визуальная иерархия. Студенты создают дизайн главного экрана и экрана блокировки мобильного телефона.
  2. Адаптивный дизайн и система стилей – Мобильные, планшетные и десктопные версии, сетки и системы стилей, плагины Figma. Создается многостраничный адаптивный дизайн веб-сайта.
  3. Компоненты и дизайн-системы – Компоненты, переменные, эффекты и Material Design система. Студенты создают собственные дизайн-системы и библиотеку компонентов.
  4. Пользовательское исследование и основы UX – Дизайн-мышление, методы пользовательских исследований, персоны и карты эмпатии, принципы доступности. Проводится исследование для приложения Study Planner.
  5. Дизайн мобильных приложений и Wireframing – Пользовательские потоки, wireframe и low-fidelity дизайн. Студенты работают над реальными проектами.
  6. Прототипирование и создание портфолио – Интерактивные прототипы, микро-взаимодействия, командная работа и Behance-портфолио. С финальным проектом создается полнофункциональный дизайн.

Учебный процесс построен полностью практически — студенты работают над реальными проектами, пошагово изучают процесс дизайна различных приложений и сайтов, развивают как UI, так и UX навыки, используя новую технологию искусственного интеллекта Figma — инструмент Make AI. Этот инструмент преобразует статические дизайны в интерактивные прототипы и функциональный код с помощью простых текстовых запросов, ускоряя процесс дизайна. Таким образом, студенты реализуют проекты более эффективно и современно, используя инновационные AI-технологии.

Курс не только обучает студентов инструментам дизайна — он также развивает креативность, аналитическое мышление, визуальную коммуникацию и навыки решения проблем, создавая прочный фундамент для будущей профессиональной карьеры в области UI/UX.

  • Что такое UI/UX дизайн? Введение в Figma
  • Основы Figma
  • Что такое Frame и как им пользоваться ?
  • Цвета, теория цвета. Как применять в дизайне?
  • Основы типографики: шрифты, иерархия, читабельность
  • Простой дизайн-проект
  • Инструменты и ресурсы Figma
  • Мини-проект: Дизайн главного экрана и экрана блокировки мобильного телефона
  • Переключиться на адаптивный дизайн — версия для настольных компьютеров
  • труктура дизайн-файла, создание страницы руководства по стилю (style guide)
  • Mobile дизайн
  • Дизайн планшета
  • Простой адаптивный дизайн целевой страницы сайта
  • Figma плагины и полезные плагины
  • Многостраничный адаптивный дизайн
  • Введение в компоненты
  • Свойства компонентов
  • Что такое Grid и как применяется в дизайне
  • Эффекты, градиенты, работа с изображениями
  • Переменные (variables) и стили
  • Spacing, radius, opacity, position
  • Что такое дизайн-система? О материал дизайн-системе
  • Создание собственной дизайн-системы
  • Процесс дизайн-мышления: Empathize, Define, Ideate, Prototype, Test
  • Методы исследования пользователей (interviews, surveys)
  • Создание пользовательских персон и карт эмпатии в Figma
  • Формы и стиль валидации
  • Основы доступности: дизайн для всех
  • Мини-проект: Исследуйте и создайте персонажи для приложения Study Planner
  • Презентация результатов исследования и обсуждение идей
  • Создание дизайна мобильного приложения
  • Информационная архитектура: логическая организация контента
  • Пользовательские flow: картирование пользовательских путей через интерфейсы
  • Введение в Wireframing: low-fidelity дизайн
  • Мини-проект: Подготовка wireframe для мобильного приложения доставки
  • Практика
  • Мини-проект: разработка мобильного банковского приложения
  • Практика
  • Введение в прототипирование: делаем дизайны интерактивными
  • Микро-взаимодействия: hover effects, button states, loading
  • Как создавать различные типы слайдеров
  • Командная работа в Figma: шеринг, комментирование, разрешения и создание профессионального профиля на Behance для дизайн-портфолио
  • Контроль версий и как должен передаваться design handoff разработчикам
  • Навыки презентации: объяснение ваших дизайнерских решений
  • Финальный проект

Записаться на курс

Требуемые навыки

Пользование компьютером

Пользователи, владеющие компьютером на хорошем уровне

Знание английского языка

Знания английского языка на начальном уровне

Логическое мышление

Способные анализировать проблемы и находить верные решения

Преподаватели курса

Наши профессиональные и опытные преподаватели

Team member Инджи Гусейнли

Инджи Гусейнли

Инструктор

Team member Саадат Шукюрлу

Саадат Шукюрлу

Инструктор

Наши другие курсы