Все курсы в одном комплекте: wd-m.ru/bundle
Создание сайта от А до Я: goo.gl/ankxq9
Всем привет, друзья! Сегодня мы создадим дизайн многостраничного сайта в Figma на реальном примере. На странице урока вы можете скачать материалы курса, посмотреть результат и ознакомиться со всеми используемыми инструментами.
Файлы урока, исходники, результат: webdesign-master.ru/blog/web-...
Таймкоды:
Знакомство с проектом, обзор материалов, инструментов и ТЗ
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
3 июн 2024
