Курс Веб Дизайн в Figma. Основы Ui Ux дизайна на практике

5Premium-PLUS

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

Начать обучение Регистрация

О курсе - Чему Вы научитесь?

Практический курс по веб дизайну для начинающих - от основ и теории до применения знаний на практике и создания работ в портфолио. Изучение редактора Figma. Веб-дизайн: атомарный дизайн, типографика, работа с цветом, создание концепта дизайна сайта и т.д. Практика создания макетов по ТЗ: этап брифа, создание прототипа, отрисовка дизайна, подготовка к вёрстке.

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

Далее теория веб-дизайна: основные законы и правила, по которым работает web-дизайнер. Основные принципы создания дизайн-макетов.

Чему вы научитесь

  • Углубленное изучение Figma - с нуля до профессионала
  • Основы веб дизайна
  • Создание дизайн концепций (концептов) сайтов
  • Основы атомарного дизайна
  • Принципы теории цвета и как составить свою палитру
  • Как и где искать фото для дизайна
  • Введение в типографику (искусство оформления текста)
  • Основы Ui/Ux дизайна на практике
  • Прототипирование
  • Создание лендинга по ТЗ
  • Создание интернет-магазина по ТЗ
  • Исследование продукта
  • Понимание целевой аудитории
  • Формирование стайл гайда проекта
  • Создание презентации своей работы
  • План развития в профессии
  • Способы заработка для веб дизайнера

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

Отрисуете адаптивный макет под основные разрешения смартфонов и планшетов. Создадите стайл гайд (style guide - файл-руководство по стилям) для разработчиков и полностью подготовите работу к вёрстке.

В конце создадите презентацию своей работы и вместе с преподавателем выложите её на Behance (Бихайнс - это сообщество дизайнеров, иллюстраторов и фотографов со всего мира). И у вас будет работа в портфеле (или готовое портфолио), которую можно показывать потенциальным заказчикам. А также узнаете, где можно найти заказы и работу веб-дизайнера и план развития в профессии.

Для максимального эффекта от обучения курс состоит не только из уроков по дизайну, но и из домашних заданий. Без выполнения домашних заданий теряется смысл обучения. Простой просмотр видео не даст 100% результата, только работа и практика сделают из вас настоящего веб дизайнера!

Для кого этот курс
  • Для тех, кто никогда не изучал веб дизайн, но хотел бы начать - обучение веб-дизайну с нуля
  • Для начинающих веб дизайнеров
  • Для тех, кто хочет узнать о процессе создания дизайна больше, чем дается на ютубе
  • Для тех, кто хочет получить актуальные навыки в профессии, создать портфолио и стать более востребованным на рынке IT-профессий

Начать обучение

План курса

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

развернуть все

свернуть все

Введение - О курсе Веб Дизайн в Figma. Основы Ui Ux дизайна на практике
1. Знакомство с Figma
  • 1.1 Скачать Figma и зарегистрироваться в программе05:14
  • 1.2 Структура файлов10:44
  • 1.3 Обзор интерфейса программы03:23
  • 1.4 Сохранение и передача файла09:39
  • 1.5 Комьюнити03:45
  • 1.6 Горячие клавиши01:39
  • 1.7 Move tool, Scale tool02:17
  • 1.8 Прямоугольник + Овал08:26
  • 1.9 Полигон + Звезда02:49
  • 1.10 Изображения08:56
  • 1.11 Заливка + Градиент07:45
  • 1.12 Выравнивание объектов05:16
  • 1.13 Маска05:55
  • 1.14 Эффекты03:52
  • 1.15 Обводка03:59
  • 1.16 Перо18:07
  • 1.17 Инструмент "Текст"08:33
  • 1.18 Группа10:11
  • 1.19 Frame10:44
  • 1.20 Булевы группы03:13
  • 1.21 Эффекты наложения04:55
  • 1.22 Экспорт05:24
  • 1.23 Плагины04:42
  • 1.24 Стили11:24
  • 1.25 Constraints (Ограничения/привязки) Часть 119:13
  • 1.26 Constraints (Ограничения/привязки) Часть 214:03
  • 1.27 Сетки. Часть 104:47
  • 1.28 Сетки. Часть 214:11
  • 1.29 Компоненты07:54
  • 1.30 Selection Colors03:47
  • 1.31 Auto Layout24:08
2. Практика работы в Figma
  • 2.1 Основы атомарного дизайна13:04
  • 2.2 Создание атомов и молекул09:20
  • 2.3 Создание организмов02:38
  • 2.4 Откуда черпать вдохновение07:27
3. Теория веб-дизайна
  • 3.1 Типографика24:59
  • 3.2 Типографика практика + ДЗ09:30
  • 3.3 Сетки и направляющие в дизайне05:00
  • 3.4 Теория цвета05:00
  • 3.5 Где брать картинки для веб дизайна09:39
  • 3.6 Как подбирать картинки для проектов08:26
  • 3.7 Выравнивание объектов08:19
  • 3.8 Правило внутреннего и внешнего07:32
  • 3.9 Иерархия в веб дизайне08:06
4. Практика. Создание дизайн-концепции сайта (Шот)
  • 4.1 Что такое дизайн концепт07:13
  • 4.2 Практика создания дизайн концепта сайта36:40
5. Практика. Создание лендинга. Бюджет 250$
  • 5.1 Техническое задание проекта (ТЗ)07:07
  • 5.2 Подробнее о брифах03:00
  • 5.3 Порядок выполнения проекта09:14
  • 5.4 Определение целевой аудитории06:44
  • 5.5 Аналитика конкурентов09:22
  • 5.6 Создание прототипа сайта. Теория03:17
  • 5.7 Создание прототипа сайта. Практика32:05
  • 5.8 Создание концепта сайта40:09
  • 5.9 Создаем блоки с информацией25:02
  • 5.10 Создаем блок тарифов, форму связи и футер21:13
  • 5.11 Работа со слоями. Доработка дизайна13:25
  • 5.12 Адаптив дизайна под планшет20:35
  • 5.13 Создание мобильной версии дизайна18:36
  • 5.14 Создание модальных окон + ДЗ13:26
  • 5.15 Готовим работу к верстке. Стайл Гайд + ДЗ05:46
  • 5.16 Этапы работы над проектом на фрилансе05:36
  • 5.17 Создание личного кабинета (задание)05:00
6. Практика. Создание дизайна интернет- магазина. Бюджет 400$
  • 6.1 Получение ТЗ05:06
  • 6.2 Создание концепта интернет магазина14:21
  • 6.3 Создание основных блоков главной страницы24:39
  • 6.4 Создание рекламного баннера и формы подписки10:04
  • 6.5 Создание футера16:38
  • 6.6 Проверка дизайна главной05:25
  • 6.7 Страница выдачи товара30:22
  • 6.8 Создание страницы товара. Карточка товара38:52
  • 6.9 Создание модального окна09:22
  • 6.10 Создание корзины10:30
  • 6.11 Создаем страницу оплаты17:41
7. Создание кликабельного макета
  • 7.1 Введение в прототипирование в Figma27:16
  • 7.2 Создание кликабельного макета17:40
8. Адаптивная версия дизайна интернет-магазина
  • 8.1 Адаптация главной31:14
  • 8.2 Адаптив страницы выдачи товаров12:33
  • 8.3 Адаптив карточки товара + ДЗ11:32
  • 8.4 Адаптив корзины07:30
  • 8.5 Адаптив страницы оплаты08:45
  • 8.6 Создаем открытое меню в мобильной версии сайта05:59
  • 8.7 Проверка на ошибки04:41
  • 8.8 Создание стайл гайда03:52
9. Оформление работ в портфолио
  • 9.1 Обзор кейсов05:58
  • 9.2 Оформление кейса по лендингу19:38
  • 9.3 Презентация кейса05:54
10. Где и как найти работу веб дизайнера
  • 10.1 Где и как искать работу Веб дизайнера10:00
  • 10.2 Неочевидные способы дохода для веб дизайнера13:00
11. Итоги курса - что делать дальше
  • 11.1 Что делать дальше05:00
Завершение курса - Получение Сертификата


Студенты также изучают

online_course
new
online_course
new
5
  • 52 видео
  • 8 часов
online_course
new
4.9
  • 74 видео
  • 7 часов
online_course
new
5
  • 97 видео
  • 34 часа
online_course
new
5
  • 84 видео
  • 27 часов

Отзывы студентов о курсе

Мы собрали отзывы учеников, прошедших онлайн курс. Оставьте свой отзыв после прохождения Курса Веб Дизайн в Figma. Основы Ui Ux дизайна на практике.

07.12.2021
Ольга Дерюшева

Курс достаточно понятный. Хорошо пояснительный много практики что мне было очень даже необходимо. Спасибо огромное

17.11.2021
Валерий

Безусловно хороший курс, дающий все необходимые базовые знания, основы по UX/UI-дизайну и обучающий навыку работы с Figma. Нет "воды", всё строго по делу. И Автор однозначно прав, озвучивая мысль о том, что останавливаться на достигнутом нельзя и нужно двигаться в своём развитии дальше.

02.11.2021
Оксана Сизинцева

Крутая подача информации. Понравилось что проходило обучение постепенно. А не когда на тебя вываливают всю информацию сразу. Много полезной информации. Благодарю за курс)

Начать обучение

Преподаватель

Course Author
Евгений Марфель

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

  • Практикующий веб-дизайнер и разработчик сайтов

"Я уже обучил многих студентов и хочу поделиться своими знаниями по софту для дизайнера и профессии веб-дизайнер с тобой.

Помни, что мы должны решать проблемы пользователей и быть им полезными в первую очередь. И только после этого мы должны делать “красоту”.

Знаю Фигму и умею ею пользоваться на 100%. Рассказываю о том, как не только пользоваться компонентами, а еще и работать с ними в комплексе с плагинами, привязками, стилями - от этого работа становится намного приятнее и быстрее.

В любой, даже самой простой работе, я работаю именно так и это сильно экономит время. В курсах именно этому и обучаю."

Всего заданий: 91

Видеоуроки: 85


Продолжительность: ~18 часов