Курс Веб Дизайн в 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 и зарегистрироваться в программе02:04
  • 1.2 Структура файлов10:06
  • 1.3 Обзор интерфейса программы05:19
  • 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
  • 56 видео
  • 9 часов
online_course
new
4.9
  • 74 видео
  • 7 часов
online_course
new
5
  • 97 видео
  • 34 часа

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

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

Yana Semashka

Все отлично!! Отличная подача, было приятно послушать.

Анна Каплина

Классный курс! Спокойно, вдумчиво, доходчиво объясняется... Очень понравилась подача материала преподавателем. Конечно же увидеть и прослушать мало. Необходимо все полученные знания сразу же "пропускать через руки"...

Анастасия Пятилетова

Интересный и наполненный курс. Много полезной информации.

Екатерина

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

Ecaterina Morozan

спасибо, было интересно!

Анастасия Андреящева

Спасибо за полученные знания. Вы Евгений помогли мне решить многие вопросы, которые возникли при моём самом начале преображения в новой сфере деятельности, которая восхищает всегда. Очень много мотивации для того чтобы не останавливаться на достигнутом. Это был 2 пройденный курс, и теперь у меня есть приличная база на которую можно опереться. Желаю большого кол-ва идей для творчества :D

Ольга Васильева

Отличный курс. Вся информация доступным языком

Ксения Замулина

Очень подробный курс. Все понятно и доступно. Спасибо разработчикам.

Yevhen Dibrovskyi

Все супер!

DevPro

Полный разбор инструментов Фигмы! Очень помогло не бояться эту программу и значительно ускорить работу. Большое спасибо!

Виктор Чадченко

Привет. Огромное спасибо за вашу работу. У вас получились очень качественные материалы. Материалы изложены понятным, доступным языком без воды и лишнего пафоса. Это не первые курсы которые я прохожу, и хочу признаться что мне жаль что я начинал обучение не по таким материалам как ваши. Многие вещи мне стали понятны благодаря именно вам. Теперь когда у меня просят совета, рекомендую им ваши курсы. Ребята будьте уверенны вы реально одни из лучших. Спасибо за ваш труд и наш рост.

Иван Рашуга

Очень полезный курс, много развернутой информации. Спасибо!

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

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

Валерий

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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