Все курсы в одном комплекте: https://wd-m.ru/bundle Создание сайта от А до Я: https://wd-m.ru/createsite Это полный курс "веб дизайн в Figma" на реальном примере для начинающих. Сегодня мы создадим дизайн многостраничного сайта в Figma на реальном примере. На странице урока вы можете скачать материалы курса, посмотреть результат и ознакомиться со всеми используемыми инструментами. Материалы урока (результат, исходники): https://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 Добавляем полосу отбивки от подвала ВКонтакте: https://vk.com/jediweb Телеграм: https://t.me/jediweb Дзен: https://dzen.ru/jediweb