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

Все курсы в одном комплекте: wd-m.ru/bundle
Веб-дизайн с нейросетями: wd-m.ru/design
Это полный курс "веб дизайн в Figma" на реальном примере для начинающих. Сегодня мы создадим дизайн многостраничного сайта в Figma на реальном примере. На странице урока вы можете скачать материалы курса, посмотреть результат и ознакомиться со всеми используемыми инструментами.
Страница урока: webdesign-master.ru/blog/web-design/sozdanie-dizaina-v-fgma-woodtech.html
Таймкоды:
Знакомство с проектом, обзор материалов, инструментов и ТЗ
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 Добавляем полосу отбивки от подвала
ВКонтакте: jediweb
Телеграм: t.me/jediweb
Дзен: dzen.ru/jediweb

[@wdm]

💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses

[@ИгорьЛатуха]

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

[@wdm]

Ну, после монтажа обычно остаётся 50% от записанного материала) Это только запись, там ещё «небольшой» бэкстейдж есть :D

[@ЮраЮнкевич-щ5ы]

Он профессионал высокого класса, такие за 15 минут это делают, это нам нужны годы чтобы такое сделать.

[@ЮраЮнкевич-щ5ы]

@shoto эти люди учились и практиковались оооочень много, они профи мастера, для таких это легко

[@denistverdokhlebov3059]

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

[@provetrus]

Поддерживаю и плюсую 100500 раз :)

[@evgeniydanilchenko7781]

Это действительно так, присоединяюсь к мнению!

[@ОльгаОльга-й1с4и]

Алексей, Спасибо огромное за знания, которыми Вы с нами делитесь! 🙏

[@ВалентинаАхметзянова-ь4ю]

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

[@Svetlanahehehehe]

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

[@РоманАндреевич-м1с]

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

[@ЕленаБирюкова-ц9м]

Огромное спасибо за ВАШ труд и щедрость. Каждый вечер с удовольствием продвигаюсь по Вашему курсу. Все получается!!! Вы просто очень талантливый педагог.

[@МаринаИльющенкова-ч4з]

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

[@fatdrell3286]

Спасибо большое. Искренне вам благодарен ! Я просмотрел все 10 часов. Полностью повторил что вы делали. Приятный голос и манера подачи материала. Для себя открыл много нового и полезного. Всем рекомендую.)

[@barashik_229]

чел..... это топ 1 по практическим и теоритическим знаниям!!!! спасибо за труды!!

[@bratikkurit8618]

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

[@леройдженкинс-п1ю]

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

[@user-ly3mc9nj7v]

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

[@Mirona_Wright]

Это видео, просто подарок судьбы! Все что хотела узнать, но не могла найти, всеее есть. Благодарю тебя, добрый человек!!! 🙏🙌

[@andreylirey7991]

Дай бог тебе здоровья человечище

[@КаринаМитор]

Спасибо огромное автору! Очень полезный материал для начинающего дизайнера!❤

[@НаргизаШадиматова]

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

[@fangamesoriginal7519]

Редко пишу комментарии.. Но это просто шедеврально!!❤

[@MrMegaOriginal]

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

[@bibimoi_ru]

10 часов??? Вот это уровень, респект однозначно

[@yurkaronin]

афигеть! 10 часов?! жжость )))) Обзательно все просмотрю, но точно не за 1 заход ))) Хорошо что таймкоды есть ) Спасибки за интересное видео. Как всегда круто!

[@ЛенаГежа-о4с]

Ваш 10 часовой урок больше, чем курс фирмы в школе, в которой я учусь😅😢 уже круто, буду смотреть с удовольствием

[@Taran_Dima]

Спасибо! Посмотрел, сразу купил набор курсов. огонь!

[@eukeeva]

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

[@SerginioRogov]

спасибо за такой крутой урок. Это мое начало изучения Фигмы. И это был упер мастер класс. Успехов тебе! Я сделала все как было на видео. Все получилось.

[@indiana_di]

Дякую вам за урок! Дуже легко та детально була подана інформація. Це скарб. Бажаю вам розвитку.

[@evilmac6171]

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

[@natalyadorosh4803]

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

[@КириллГруздев-у3д]

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

[@АленаПроценко-п3з]

Я это сделала! Огромное спасибо вам за курс, даете возможность изучить веб-дизайн качественно и бесплатно!

[@АлександрРусин-м5и]

Супер. Ссё четко разжованно понятно быстро. Лучший учитель на просторах ютуба). Подписался буду смотреть))

[@ShadowScoRpi]

Ого, я в восторге! Чуть головой не двинулся. Это реально здорово, как раз такого видео и ждал. ЗЫ: Как в народе говорится: респект и уважуха!!!

[@strax6667]

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

[@ИгорьЖуравлев-ж8ш]

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

[@ЭльдарТанишев]

Спасибо за супер видеоурок с 0 до полной реализации.

[@seirant]

ого, круто. Походу у меня растянется на неделю)). Спасибо

[@bulba1995]

Очень интересный курс, я вам признателен, 3 часа прошло и очень хочется досмотреть и пройти до конца все .

[@m_rotschopf]

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

[@Дарья-ф9б5т]

Спасибо видео очень полезное! ❤️ Столько всего знаю, а структурировать работу и вообще начать что-то было сложно, уже отчаилась и честно решила, что может разработка вообще не моё, но ваше видео заставило передумать. И не могу не отметить то насколько у вас приятный голос)

[@guska8710]

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

[@anastasiab213]

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

[@SVV55]

ух ты! более 10 часов: и наработаться можно и выспаться.. думаю в недельку уложусь! Спасибо!

[@fobiya-d9b]

Я человек простой - увидел 10часовое видео - лайк подписка. Я хз как ты не заебываешься столько записывать) З.Ы. Сделай деление не этапы,хотяб глобальные, навигация в больших видео очень помогает!

[@IgorBobyrev]

Присоединяюсь к хвалебным словам по поводу урока, хотел бы поделиться восхищением от собственно работы дизайнера - мне очень понравилась эта работа! Дизайн вызывает очень приятные эмоции - выдержанность, спокойная уверенность, очень тактично, уместно показанный статус. Ничего лишнего и не скучно, смотрится достаточно современно. Как быть, если мне нравится такой стиль, а у заказчика другое видение?

[@Jumajtau]

Огромнейший труд, спасибо.

[@manik7777]

...Вы ориентир к чему нужно стремится! Большое спасибо! С уважением!

[@aleksandrkokin6065]

Очень круто, спасибо

[@ДаняВаня-с3н]

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

[@nox27-13]

Большое спасибо за Ваш труд и за приятную речь!

[@eugemagic573]

🔥большое спасибо за такой подробный урок! Очень круто и полезно!

[@nagvall]

Огромное спасибо за такой труд.

[@kseniyafilimonova6650]

Спасибо за ваш титанический труд!!!👍

[@ВалентинаВасильева-м7с]

Спасибо за отличное видео! Кладезь ценной информации💥

[@ТатьянаДронова-б3я]

Лучший подарок на Новый Год - рекомендация Ютюб этого канала, сразу подписка! 🎉👏😁 Это высочайший уровень, профи, да ещё учишь от души! ❣️😀 Огромная благодарность, будь безмерно счастлив, всех благ! 🙏 Пошла смотреть дальше 😀

[@LaLu85558]

Афигеть... я очень благодарна за эту колосальную работу!!!

[@АнастасияШабалина-й6ш]

Спасибо большое, редкость.

[@serground5323]

Ох, как много хорошего контента, будет чем заняться, холодными осенне-зимними вечерами)

[@English-for-every-child]

Спасибо большое☀️! Очень полезное видео👏👍👏

[@s.ilvery]

Спасибо автору) Проделана огромная работа

[@tw1x234]

Мне кажется я не смогу посмотреть полностью этот ролик:) придется каждый день по чу чуть смотреть)

[@SergRogev]

Спасибо за ваши труды, очень полезно!

[@lxbcho]

Добротный дизайн

[@ireneme3492]

спасибо за отличный и подробный курс, автор проделал титаническую работу!

[@arturisoyan3722]

5 часов позади). Двигаемся дальше. Спасибо за полезную информацию

[@ИринаГуринович-к8т]

Спасибо за Ваш труд!

[@СнежанаНижник-п4ы]

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

[@wdm]

Item - это какая-то единица из набора. Например, есть набор в блоке новостей. Отдельная единица, карточка новости, будет айтемом. Дословный перевод - Элемент.

[@СнежанаНижник-п4ы]

​@@wdm Спасибо большое)

[@azaternis]

Пока что лучший контент!

[@zhanna1585]

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

[@JuliiaPolyviana]

Большое спасибо!

[@alenasergeevna4305]

Спасибо за ваш труд

[@azakgcool]

Спасибо вам за ваши уроки!

[@Mikhail13freedom]

Это было очень круто! Благодарю!💥

[@andreyermash8923]

Я учусь на дизайнера и тут узнал новое

[@sauronin2058]

Лайк, и коммент, слишком годный контент, так еще и 10 часов

[@JemesLukas]

Спасибо огромное отличный курс

[@kashirin_vsevolod]

Класс, как раз проект делаю по этой тематике:) спасибо

[@polinabardina990]

Очень крутой курс спасибо автору, но удобнее конечно если бы было разбито на несколько видео.

[@amorousss99]

Спасибо за видео

[@bratikkurit8618]

Автор - мастер! Топ!

[@alexKaprushaDev]

Как всегда лучший!!

[@gruqens1792]

Круто круто круто❤

[@GordanoBruno]

Спасибо за труд!

[@Татьяна-у7ю8ь]

огромная благодарность!

[@vredinka8024]

Я подписалась! Крутой ролик

[@fosttterrr8485]

спасибо вам❤

[@agrosales4054]

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

[@Hacker-cw7gz]

Респект за такой урок

[@ВикторияАвдеева-н2ц]

Огромное спасибо за урок!!! Прототипы же такие можно делать в фигме?

[@wdm]

Да без проблем, можно и в Figma делать.

[@NeGovoriNet]

Спасибо тебе большое!

[@MrStavr555]

Благодарствую, это не то что Скилфактори со своими хипстерами за деньги немалые типа "учит".

[@yal2983]

Конспектировать 10 часов это сильно

[@aaffbdefdfab]

Включил скорость 0,25 чтобы точно ничего не пропустить.

[@СветланаШаркова-й4ц]

интересно, я одна такая промахивалась когда ctrl+shift+4 надо было, умудрялась ctrl+shift+3, и потом не понимала шо тыканула,мудохалась. А назад ctrl+z не работает, инфаркт ловила.😥😥😥

[@kcmatrica7210]

Круть неимоверная

[@Андрей-к5г6х]

Замечательный курс спасибо! Возникла накладка с pencil vet 3.1.1. Temlate предложенный автором не устанавливается. Было бы здорово этот вопрос решить а так велом очень полезный курс Автору большое спасибо!

[@wdm]

Здравствуйте. Стабильная версия программы 3.1.0 на странице урока.

[@НинаСил]

Вы святой! ❤

[@НикитаАлександров-о5ц]

вСЕ ОЧЕНЬ ХАРАШО)

[@tamotodua8868]

Wow wow wow merci besucoup😮❤🙏

[@МадинаКудухова-п7д]

Здраствуйте! Шикарный курс, спасибо! Такой вопрос) Мобильную версию надо разрабатывать с нуля или ее можно подогнать во время верстки?

[@wdm]

Здравствуйте. Если есть пунктик в ТЗ. Обычно в процессе верстки.

[@МадинаКудухова-п7д]

@@wdm Добрый день) Я чисто дизайн разрабатываю, верстку делает другой и он попросил меня мобильную версию тоже сделать и я не понимаю почему, если во время верстки он сам может это сделать🤷🏻‍♀️

[@wdm]

@@МадинаКудухова-п7д часто это может быть обусловлено ТЗ. Клиент хочет видеть результат для различных экранов. Если в техническом задании это указано, мобильный дизайн также следует сделать.

[@МадинаКудухова-п7д]

@@wdm Понятно, спасибо большое)))