Создание дизайна сайта в Figma на реальном примере. Большой курс

Это полный курс "веб дизайн в Figma" на реальном примере для начинающих. Сегодня мы создадим дизайн многостраничного сайта в Figma на реальном примере. На странице урока вы можете скачать материалы курса, посмотреть результат и ознакомиться со всеми используемыми инструментами.

Таймкоды:

Знакомство с проектом, обзор материалов, инструментов и ТЗ
00:00 Начало урока
00:14 Обзор материалов курса, технического задания и структуры сайта (Mind map)
10:50 Обзор программы Pencil для создания схем и прототипов
13:56 Подробный разбор структуры сайта и дополнительные требования в ТЗ

Прототипирование
26:30 Для чего нужен этап прототипирования
28:30 Настройка приложения для прототипирования
30:34 Прототипирование главной страницы сайта
1:09:30 Прототипирование страницы «Проекты»
1:12:30 Прототип страницы отдельного проекта
1:17:34 Прототип страницы «Услуги»
1:21:49 Прототипирование универсальной страницы
1:23:45 Прототипирование страницы «Блог»
1:25:36 Прототип блока «О компании»
1:38:48 Экспорт страниц из Pencil в растр

Создание дизайна главной страницы сайта в Figma
1:41:12 Создание нового документа Figma
1:45:33 Создание дизайна шапки сайта
2:46:11 Определение цветовых стилей в Figma
2:47:18 Создание дизайна секции «Нам доверяют»
3:10:00 Создание кнопки в Figma с помощью Auto Layout
3:16:08 Создание дизайна секции «Лучшие работы»
3:19:08 Создание дизайна верхней части секции «Лучшие работы»
3:31:00 Создание айтемов (карточек лучших работ)
4:02:10 Добавление и доработка кнопки на основе Auto Layout в Figma
4:09:04 Создание дизайна секции «Нам доверяют»
4:12:37 Дизайн "ленивого" слайдера слева
4:22:11 Дизайн описания и декоративная отбивка
4:25:08 Настраиваем предпросмотр SVG в Windows
4:27:13 Работа с иконками в дизайне и векторизация
4:30:30 Дизайн карточек преимущества (айтемы) и доработка секции
4:49:16 Создание дизайна секции «Наши партнёры»
4:54:47 Дизайн карточек партнёров (айтемы)
5:06:47 Создание дизайна секции «Наш блог»
5:09:41 Дизайн карточек постов (айтемы блога)
5:20:32 Фиксим стили текста в дизайне и создаем компонент заголовка
5:24:07 Дата публикации как элемент Auto Layout Figma и остальные карточки
5:32:49 Создание дизайна пагинации слайдера постов
5:36:51 Важные доработки дизайна
5:40:38 Создание дизайна подвала сайта (Footer)
5:41:24 Обзор и настройка программы-пипетки
5:42:51 Дизайн контента в подвале (текст, меню)
6:02:36 Как правильно подогнать высоту макета Figma
6:05:28 Дизайн социальной секции с иконками в Footer
6:14:04 Определение Footer как компонент Figma

Создание шапки сайта для внутренных страниц
6:15:23 Новый фрейм, стиль сетки и компонент Footer
6:17:28 Создание дизайна шапки на внутренних страницах
6:21:34 Дизайн подложки с мягкой тенью и социальные иконки

Создание дизайна страницы «Наши проекты»
6:31:32 Создание дизайна страницы «Наши проекты»
6:32:47 Дизайн заголовка страницы
6:39:01 Дорабатываем прототип
6:40:23 Дизайн карточек (айтемов)
6:50:27 Про оптимизацию рабочего процесса
6:53:56 Организация и репит айтемов
6:56:27 Подбиваем высоту макета

Создание дизайна страницы проекта
6:58:45 Приступаем к созданию дизайна страницы проекта
6:59:46 Дизайн верхней части (Breadcrumbs и Адрес)
7:03:10 Создание дизайна слайдера фотографий
7:11:30 Дизайн контентной части
7:11:58 Дизайн текстовой части (слева) и доработки
7:26:25 Дизайн правой части страницы проекта

Создание дизайна страницы услуг
7:45:56 Обзор прототипа страницы услуг
7:46:48 Добавляем в дизайн универсальные блоки и сетку
7:48:53 Создание карточек (айтемов) услуг
8:09:33 Добавляем кнопку «Оформить заявку»

Создание дизайна универсальной страницы
8:12:53 Обзор дизайна универсальной страницы

Создание дизайна страницы блога
8:16:44 Приступаем к дизайну блога
8:20:02 Добавление компонента Figma (карточка блога)
8:21:14 Дублирование и наполнение карточек блога
8:24:47 Дизайн пагинации (Pagination)

Создание дизайна блока «О компании»
8:33:40 Создание дизайна страницы «О компании»
8:35:50 Создание дизайна бокового меню
8:42:12 Дизайн контентной части страницы «О компании»
8:51:17 Создание кнопки «Наверх» в дизайне
8:55:03 Приступаем к дизайну страницы «Наши преимущества»
8:58:23 Создание сетки внутри сетки в Figma
9:00:11 Дизайн айтемов преимуществ
9:12:13 Подготовка и экспорт оптимизированной SVG-иконки
9:18:08 Дизайн остальных айтемов преимуществ
9:27:14 Создание дизайна страницы «Наши партнёры»
9:29:11 Создание айтемов страницы «Наши партнёры»
9:39:36 Приступаем к созданию дизайна страницы «Обратная связь»
9:41:30 Дизайн формы обратной связи
9:48:15 Создание дизайна секции «Контакты»
9:59:00 Добавляем полосу отбивки от подвала

[rerijpe]

Ого-го десять часов! Сколько же вложенно трудочасов автора ?! Рэспэкт.

[denistverdokhlebov]

Я вот сейчас скажу без преувеличения и честно - дружище, ты самородок в этой сфере, как минимум в ру сообществе! Спасибо тебе огромное за твои труды. Я на этом канале, почти с самого его основания, как мне кажется. Столько лет прошло, а я не перестаю восхищаться тем, что ты делаешь. Дай бог тебе здоровья и успехов! Респект тебе!

[ggtikdc]

Вы просто лучший, такого огромного количества информации ещё не находила, а тут такое и ещё бесплатное

[nbgmjgw]

О, боже, где я раньше была, и где были Вы??? Я в таком шоке от Ваших уроков, от Вашего огромного труда, Вы так меня вдохновили! Сто лет назад я увлеклась сайтами. Раньше не было ни таких уроков, ни видео, ничего не было! Приходилось штудировать книги, которые могла купить. Прошло время и все мои сайты морально устарели. Как делать их на современном уровне было непонятно. Так, что-то пыталась изменять, применять разные шаблоны, движки, вордпресс и т.д. А тут Ваши уроки!
Так все понятно, интересно, увлекательно! Правда не все сразу удается, где-то путалась в слоях, компонентах, текстах, стилях. И вроде все похоже, но все не так! Приходилось несколько раз все переделывать заново. Но с каждым разом приходило все лучшее и лучшее понимание, как все это делается. У меня еще другие клавиши работают, чем у Вас. Например, показать сетку - у меня Шифт+G, у Вас другое. Вот это другое у меня уничтожало всю работу. Хорошо, я еще догадалась сохранять текущие версии. Даже если что-то пропало, то не насовсем. И я еще учусь!
Спасибо Вам ОГРРРРРОМНОЕ! Я теперь больная на всю голову Вашими уроками, ни о чем другом думать не могу. Сижу часами тут, забывая обо всем. И теперь я знаю, у меня все получится!

[jydeeii]

Среди других видео-уроков на ютубе длительностью по 15 минут, твой курс как золотой кубок! Молодец!

[bsdzhqc]

Самый лучший урок по дизайну во всем интернете! Где Вы были раньше! Огромное спасибо за Ваш труд и щедрость!

[bratikkurit]

Сегодня один из лучших дней октября!
Не посмотрел пока ни минуты, но видео на 10 часов с таким названием заставляет поверить в то, что я освою фигму уже благодарю автору!

[xltqvlz]

Как же круто, начал заниматься дизайном и попал на это чудо, круто

[strax]

Ещё не смотрел, но огромный плюс каналу и Вам в карму. Спасибо.

[eqqidjx]

Долго не могла найти хороший урок по разработке структуры сайта и прототипа, и просто в восторге, что нашла ваше видео☺ Спасибо за ваш труд!

[m_rotschopf]

Я в восторге. Все ясно, понятно, четко и интересно! Огромное спасибо за потрясающую работу.)

[anastasiab]

Очень интересно смотреть. Приятная подача и столько полезной информации. Спасибо!

[nscqsfw]

Придерживаемся простой тактики - лайк, коммент))
Спасибо за невероятный труд!!

[lbxyrdb]

Спасибо, за действительно отличную обучалку по дизайну в Фигме!

[MrMegaOriginal]

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

[eukeeva]

Классный курс, а главное - отличный учитель, всё в доступной форме, всё по полочкам.

[cyjkyqc]

это просто гениально! и СТОЛЬКО труда и времени вложено! бесценно! миллион а ещё грамотная речь, высокий интеллект и талант преподавать! Восторг!!! благодаря этому видео я сама экстренные сроки стану профи))))

[guska]

Реально крутой курс. Благодарю от всей души! Редко пишу комментарии, но за такую огромною проделанную работу можно и написать:)

[evilmac]

Спасибо Вам большое за данные уроки! Разложили все по полочкам, все логично, постепенно, шаг за шагом! Вам респект!

[natalyadorosh]

Спасибо Вам большое! Прекрасный урок, очень детальный, я бы даже сказала дотошный. А это очень здорово. Я очень рада что попала к Вам на канал!