- Сообщения
- 6 005
- Реакции
- 18
Автор: Webdesign Master
Название:Создание дизайна сайта в Figma на реальном примере. Большой курс (2021)
Описание:
Всем привет, друзья! Сегодня мы создадим дизайн многостраничного сайта в Figma на реальном примере. На странице урока вы можете скачать материалы курса, посмотреть результат и ознакомиться со всеми используемыми инструментами.
// Знакомство с проектом, обзор материалов, инструментов и ТЗ
00:00 Начало урока
00:14 Обзор материалов курса, технического задания и структуры сайта (Mind map)
10:50 Обзор программы Pencil для создания схем и прототипов
13:56 Подробный разбор структуры сайта и дополнительные требования в ТЗ
// Прототипирование
26:30 Для чего нужен этап прототипирования
28:30 Настройка приложения для прототипирования
30:34 Прототипирование главной страницы сайта
1:09: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 Подбиваем высоту макета
Смотреть на Youtube:
Название:Создание дизайна сайта в Figma на реальном примере. Большой курс (2021)
Описание:
Всем привет, друзья! Сегодня мы создадим дизайн многостраничного сайта в Figma на реальном примере. На странице урока вы можете скачать материалы курса, посмотреть результат и ознакомиться со всеми используемыми инструментами.
// Знакомство с проектом, обзор материалов, инструментов и ТЗ
00:00 Начало урока
00:14 Обзор материалов курса, технического задания и структуры сайта (Mind map)
10:50 Обзор программы Pencil для создания схем и прототипов
13:56 Подробный разбор структуры сайта и дополнительные требования в ТЗ
// Прототипирование
26:30 Для чего нужен этап прототипирования
28:30 Настройка приложения для прототипирования
30:34 Прототипирование главной страницы сайта
1:09: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 Подбиваем высоту макета
Смотреть на Youtube:
Скрытый контент, чтобы его посмотреть необходимо быть авторизованным.