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

Создание сайта от А до Я (комплексный курс): https://goo.gl/ankxq9
Создание интернет-магазина от А до Я: https://goo.gl/7mDqYD
Создание крутого слайдера (+посадка на CMS): https://bit.ly/jVLyQ8

Всем привет, друзья! Сегодня мы создадим дизайн многостраничного сайта в 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/agragregra
Twitter: https://twitter.com/agragregra