Профессия «Веб-дизайнер»

Веб-дизайнер отвечает за то, чтобы сайт или приложение были привлекательными, удобными и функциональными. Он разрабатывает макеты страниц, подбирает шрифты, цвета и изображения, а также создает анимацию и интерактивные элементы. «Московская академия дизайн-профессий Pentaschooll» — это учебное заведение, где вы сможете пройти обучение и освоить новую профессию веб-дизайнера с присвоением диплома о профессиональной переподготовке.

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

Краткая программа курса «Веб-дизайнер»:

1. Создание лендинга на Figma и многостраничного сайта на Tilda. UI-дизайн лендинга.
2. Проектирование интернет-магазина. Создание сценариев.
3. Adobe Photoshop для дизайнера интерфейсов.
4. Работа с анимационными роликами в Adobe After Effects.
5. Основы 3d-графики Cinema 4d.
6. Личный бренд и позиционирование дизайнера.

В результате вы освоите техники создания привлекательных и функциональных сайтов и приложений и соберете портфолио из своих работ, которое будет важным инструментом при поиске работы.

1. Введение в профессию «Дизайнер интерфейсов»

Содержание курса:

• Задачи и особенности работы UX/UI-дизайнера.
• Типичные ошибки начинающих дизайнеров и как их избежать.
• Этапы разработки цифрового продукта.
• Предпроектный анализ и основы работы с заказчиком.
• Интерфейс редактора Figma.

Задания на курсе:

• Выбрать тему проекта, подобрать референсы и провести анализ конкурентов.
• Создать мудборд в Figma.
• Собрать в конструкторе форму обратной связи для лендинга.

Результат:

• Поймете, чем занимается UX-UI-дизайнер, и узнаете, какие навыки, знания и профессиональные программы вам понадобятся в работе.
• Познакомитесь с онлайн-редактором Figma и выполните в нем первые задания.

4 часа теории
11 часов практики

2. Создание лендинга в Figma. UX-дизайн. Композиция. Создание прототипа

Содержание курса:

• Основные понятия UX-дизайна и основы юзабилити.
• Создание User-flow — пользовательских сценариев.
• Основы веб-композиции: визуальный вес, баланс, масштаб, статика и динамика.
• Создание прототипов и работа с компонентами в Figma.

Задания на курсе:

• Провести анализ User-flow нескольких сайтов, а затем создать пользовательский сценарий для своего проекта.
• Повторить прототип учебного проекта по уроку, а затем создать собственный прототип лендинга и настроить компоненты.

Результат:

• Изучите основные принципы юзабилити, правила веб-композиции и базовые понятия UX-проектирования.

8 часов теории
12 часов практики

3. UI-дизайн лендинга. Создание графической концепции

Содержание курса:

• Основы типографики: работа со шрифтами и стилями.
• Работа с цветом и изображениями, подбор цветовой палитры.
• Создание адаптивного дизайна для веб-версии лендинга.

Задания на курсе:

• Повторить настройку цветовых и текстовых стилей, как в уроке.
• Создать UI-дизайн для своего проекта.
• Сделать адаптивную версию лендинга для своего проекта.

Результат:

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

9 часов теории
12 часов практики

4. Основы дизайна сайтов

Содержание курса:

• Виды сайтов и особенности проектирования e-commerce.
• Для чего нужны дизайн-системы.
• Основные этапы проектирования интернет-магазина.
• Анализ конкурентов.
• Создание User-flow для интернет-магазина.

Задания на курсе:

• Провести анализ конкурентов по пользовательским сценариям и сделать выводы.
• Проанализировать сайты конкурентов (визуальная и функциональная составляющая).
• Создать детализированный User-flow, составить мудборды и ТЗ для каждой страницы сценария.

Результат:

• Рассмотрите все ключевые этапы проектирования сайтов и научитесь проводить конкурентный анализ.

4 часа теории
10 часов практики

5. Интернет-магазин. Создание прототипа. Главная страница

Содержание курса:

• Настройка сетки и компонентов в Figma.
• Разработка главной страницы сайта: расположение блоков и правила композиции.

Задания на курсе:

• Создать прототипы главной страницы для учебного и собственного проекта.

Результат:

• Узнаете, как проектировать в Figma компоненты главной страницы интернет-магазина.

7 часов теории
13 часов практики

6. Интернет-магазин. Создание прототипа. Сценарий выбора товара

Содержание курса:

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

Задания на курсе:

• Создать прототип страницы каталога, результата выдачи и карточки товара.

Результат:

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

10 часов теории
13 часов практики

7. Интернет-магазин. Создание прототипа. Сценарий покупки

Содержание курса:

• Составляющие сценария покупки в интернет-магазине.
• Разработка страниц корзины в Figma.

Задания на курсе:

• Создать страницы сценария покупки для своего проекта.

Результат:

• Научитесь проектировать сценарий покупки на сайте и узнаете, какой функционал необходим на страницах оформления заказа.

2 часа теории
4 часа практики

8. Интернет-магазин. UI-дизайн и создание интерактивного прототипа

Содержание курса:

• Типографика и стили: как подобрать шрифты для проекта.
• Создание интерактивного UX-прототипа в Figma.
• Работа с цветом, векторной и растровой графикой в Figma.

Задания на курсе:

• Повторить настройку стилей и интерактивный прототип из урока.
• Создать интерактивный прототип в Figma для своего проекта, подобрать для него цветовую палитру и изображения, нарисовать иконки.

Результат:

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

7 часов теории
13 часов практики

9. Контент сайта. Adobe Photoshop для дизайнера интерфейсов, часть 1

Содержание курса:

• Интерфейс Adobe Photoshop и применение редактора в UI/UX дизайне.
• Автоматические и базовые инструменты обтравки в Adobe Photoshop.
• Инструменты для работы с цветом и фоном: слой-заливка, кисти, ластик и т. д.

Задания на курсе:

• Создать в Adobe Photoshop десктопную и мобильную версию баннера.
• Создать баннер для слайдера.
• Создать сложную композицию с векторными объектами, градиентами и фото.

Результат:

• Познакомитесь с основными функциями и инструментами Adobe Photoshop, научитесь применять их в работе над сайтами.

5 часов теории
11 часов практики

10. Контент сайта. Adobe Photoshop для дизайнера интерфейсов, часть 2

Содержание курса:

• Инструменты коррекции в Adobe Photoshop: корректирующие слои, настройка экспозиции и яркости, кривые и др.
• Пакетная обработка фотографий: изменение размера, экшены.
• Ретушь изображений в Adobe Photoshop.

Задания на курсе:

• Выполнить обработку и коррекцию фото в Adobe Photoshop.
• Создать сложный коллаж для страницы «Ошибка 404»

Результат:

• Научитесь использовать инструменты коррекции, выполнять ретушь и пакетную обработку в Adobe Photoshop.

3 часа теории
8 часов практики

11. Завершение проекта. Анимация, передача разработчикам

Содержание курса:

• Анимация интерфейсов в Figma, основные паттерны микроанимации.
• Подготовка UI-kit и передача макета в разработку.
• Презентация проекта и оформление портфолио.

Задания на курсе:

• Сделать анимированный прототип для своего проекта.
• Подготовить макет для передачи в разработку.

Результат:

• Научитесь использовать анимацию интерфейса в дизайне сайтов.
• Завершите ваш проект интернет-магазина, подготовите финальный дизайн-макет и UI-kit.

3 часа теории
10 часов практики

12. Дизайн сайтов на Tilda. Интерфейс и возможности

Содержание курса:

• Конструкторы сайтов и сфера их применения.
• Начало работы в конструкторе Tilda.
• Регистрация и создание сайта в Tilda.
• Основные элементы и возможности интерфейса.
• Основы веб-дизайна на Tilda: текст, изображения, меню, навигация и другие элементы.

Задания на курсе:

• Завести аккаунт на Tilda, создать первую страницу и добавить на нее блоки.
• Создать на сайте еще одну страницу по инструкции.

Результат:

• Изучите основные возможности конструктора сайтов Tilda и освоите его интерфейс.

4 часа теории
10 часов практики

13. Создание лендинга и многостраничного сайта на Tilda

Содержание курса:

• Что такое Zero-block в Tilda и для каких задач они подходят.
• Создание лендинга в Tilda.
• Создание многостраничных сайтов в Tilda.

Задания на курсе:

• Собрать лендинг на Tilda не менее чем из 10 блоков по типовой структуре.
• Создать на основе лендинга многостраничный сайт.

Результат:

• Научитесь использовать Zero-block и комбинировать их со стандартными блоками Tilda.

4 часа теории
14 часов практики

14. Создание интернет-магазина и сайта курса обучения на Tilda

Содержание курса:

• Создание интернет-магазина и сайта для продажи курса на Tilda.
• SEO, сбор данных и аналитика на сайтах, собранных в конструкторе.
• Лайфхаки эксперта по работе в Tilda.

Задания на курсе:

• Создать простой многостраничный интернет-магазин одежды или овощей/фруктов. Создать сайт для продажи курса.
• Настроить на сайтах прием данных через 5 разных форм, установить счетчики и настроить редиректы.

Результат:

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

5 часов теории
14 часов практики

15. Особенности работы с мобильными приложениями

Содержание курса:

• Как и зачем создаются мобильные приложения
• Пользовательские паттерны
• Проектирование мобильного приложения: создание User Story и проектирование User Flow
• Стандартная структура приложений и принципы навигации
• Создание прототипа мобильного приложения на основе гайдлайнов IOS и Android

Задания на курсе:

• Провести анализ приложений-конкурентов и создать на его основе User Flow (пользовательский сценарий).
• Создать прототип мобильного приложения для своего проекта.

Результат:

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

5 часов теории
13 часов практики

16. Мобильное приложение. Проектирование

Содержание курса:

• Начало работы над проектом приложения: бриф и техническое задание.
• Анализ визуальной концепции приложений-конкурентов.
• Создание презентаций и мудбордов по проекту.
• Проектирование User Flow мобильного приложения: этапы и базовая логика.

Задания на курсе:

• Сформулировать вопросы брифа для заказчика.
• Провести анализ конкурентов и составить по итогам этого презентацию и мудборд.
• Создать User Flow для учебного проекта.

Результат:

• Научитесь составлять бриф и ТЗ на разработку, вести проект на всех основных этапах.

5 часов теории
10 часов практики

17. Мобильное приложение. Создание прототипа и UI-дизайн

Содержание курса:

• Подготовка к wireframe-проектированию и создание прототипа главного экрана.
• Создание кликабельного прототипа приложения.
• Особенности UI-дизайна для мобильных приложений.
• Подбор цветов и работа с анимацией.
• Создание UI-kit и подготовка прототипа к передаче в разработку.

Задания на курсе:

• Создать wireframe-прототипы нескольких экранов приложения.
• Создать кликабельный прототип приложения.
• Выполнить основные элементы UI-дизайна приложения.

Результат:

• Научитесь создавать wireframe-прототипы и кликабельные прототипы экранов приложения в Figma.

9 часов теории
17 часов практики

18. UX-исследования и аналитика

Содержание курса:

• Структура продуктовой команды и роль дизайнера в ней.
• Как связаны бизнес-задачи и задачи исследований.
• Виды и методы исследований.
• Что такое аналитика данных.
• Количественные методы исследований и правила их проведения.
• Качественные методы исследований и правила их проведения.

Задания на курсе:

• Определить, какая информация нужна для исследования.
• Сформулировать гипотезы и составить план исследования.
• Составить план в работе с аналитикой для решения задачи.
• Составить анкету для интервью.
• Провести интервью и по его результатам сформулировать план изменений карточки товара.

Результат:

• Разберете, как проводятся количественные и качественные исследования, узнаете, что такое аналитика данных.
• Научитесь составлять анкеты, проводить интервью и анализировать ответы респондентов.

15 часов теории
25 часов практики

19. Мобильное приложение. Продуктовый подход. Прототип

Содержание курса:

• Этапы проектирования User Story: постановка задачи, составление брифа, создание персон.
• Формирование User Story по итогам UX-исследования.
• Конкурентный анализ, сценарии и формирование User Flow.
• Создание и тестирование прототипа приложения.

Задания на курсе:

• Провести и описать UX-исследование, составить полную схему сценариев User Story.
• Провести анализ конкурентов и оформить выводы по его итогам.
• Создать структурированный User Flow.
• Создать кликабельный прототип приложения и подготовить его к тестированию.
• Провести тестирование прототипа, зафиксировать и исправить ошибки.

Результат:

• Создадите полную схему пользовательских сценариев и научитесь совмещать разные User Story в одном интерфейсе.

15 часов теории
25 часов практики

20. Мобильное приложение. Продуктовый подход. Визуальная концепция

Содержание курса:

• Создание визуальной концепции мобильного приложения. Мудборд, исследование.
• Анимация интерфейса.
• Создание UI-дизайна и дизайн-системы.
• Завершение работы над приложением и передача дизайна в разработку.

Задания на курсе:

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

Результат:

• Поработаете над визуальным оформлением приложения и подготовите прототипы и дизайн для передачи в разработку.

12 часов теории
15 часов практики

21. Анимация в Adobe After Effects

Содержание курса:

• Базовые инструменты редактора Adobe After Effects.
• Работа со слоями, масками, прекомпозициями.
• Внедрение анимационных элементов на практике: кеинг и шейповая анимация.
• Трекинг: что это и как выполняется.
• Работа с полным циклом создания анимационного ролика.
• Текстовая анимация и работа с 3D-элементами.
• Монтаж и композитинг ролика.

Задания на курсе:

• Создать 3 простых ролика с разными ресайзами.
• Создать анимированный ролик с добавлением 3D-объектов.
• Ролик с применением шейповой анимации.
• Создать ролики с применением спецэффектов, Альфа и Luma маски, анимации текста.
• Подобрать референсы для проекта и собрать их на доске в Miro.
• Создать 3D-анимацию с объектом и текстом.
• Создать ролик с применением превизуализации (нарезки референсов), блокинга и композитинга.

Результат:

• Научитесь работать с анимационными роликами в Adobe After Effects на всех этапах — от подбора референсов до монтажа и выстраивания композиции.

13 часов теории
35 часов практики

22. Личный бренд дизайнера

Содержание курса:

• Личный бренд и позиционирование дизайнера.
• Портфолио дизайнера.
• Основные ресурсы для поиска клиентов.
• Ценообразование в дизайне: как рассчитать стоимость услуг и составить прайс-лист.
• Коммуникация с заказчиком на каждом этапе работы над проектом.
• Правовые аспекты в работе дизайнера.

Задания на курсе:

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

Результат:

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

8 часов теории
12 часов практики

23. Основы 3d-графики Cinema 4d

Содержание курса:

• Основные функции и интерфейс Cinema 4D, установка программы.
• Поиск и внедрение готовых моделей (ассетов) в проект.
• Работа с камерой, источниками света в сцене, текстурами и материалами.
• 12 принципов анимации Уолта Диснея и современные принципы анимации в motion-дизайне.
• Ключи, графики и кривые при создании анимации.
• Анимация камеры и специальные приемы.
• Работа с объемным текстом (инструмент MoText).
• Рисование и редактирование сплайнов.
• Рендеринг сцен, кадра и дорожки.

Задания на курсе:

• Скачать и установить Cinema 4D на свой компьютер.
• Создать простую композицию в Cinema 4D, настроить камеру и свет.
• Внедрить в проект несколько ассетов, а по желанию — применить текстуры.
• Выполнить анимацию простых геометрических фигур и камеры с различным ускорением и затуханием движения.
• Создать объемный текст, используя изученные в модуле инструменты.
• Создать анимацию по референсам (повторить траекторию движения объектов и камеры) и выполнить ее рендеринг.

Результат:

• Освоите основные приемы создания анимации в Cinema 4D и попробуете использовать их в своем проекте.

13 часов теории
35 часов практики

24. Разработка пользовательского сценария мобильного приложения. Практикум

Содержание курса:

• Этапы проектирования визуальной концепции.
• Исследование целевой аудитории.
• Анализ конкурентов.
• Создание User Flow.
• Создание кликабельного прототипа.
• Создание визуальной концепции и анимации сценария.

Результат:

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

Задания на курсе:

• Провести интервью с представителями целевой аудитории. Сделать выводы и сформировать User Story.
• Проанализировать не менее 3-х сценариев в приложениях конкурентов, выбрать нужные для вашего проекта решения и детали.
• Создать User Flow для вашего приложения в виде простой схемы.
• Создать сценарий приложения на основе гайдлайнов и простых форм.
• Провести тестирование прототипа на 3-4 пользователях и описать его результаты.
• Подобрать референсы к прототипу и оформить их в виде мудбордов.
• Полностью отрисовать один из сценариев, выбрать цвета и шрифты, добавить иконки.

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