Курс Веб Дизайн в 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 дизайна на практике.

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

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

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

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

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

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

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

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

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

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

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


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