18. Мастер-класс по работе с референсами | Бесплатное обучение Figma Фигма

YOUTUBE · 23.11.2025 03:21

Ключевые темы и таймкоды

Введение в работу с референсами

0:00

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

Проблемы традиционного дизайн-процесса

0:59

Традиционный процесс включает отбор множества референсов и генерацию идей.
Такой подход может быть долгим и неэффективным.
Предлагается более быстрый и осознанный метод работы с референсами.

Примеры дизайнов, созданных по новому методу

1:50

Демонстрация дизайнов, созданных учениками автора.
Метод основан на четырёх основах: типографике, цвете, стиле и композиции.
Сочетание этих основ позволяет создавать уникальные решения.

Анализ типографики

3:22

Рекомендации по анализу типа гарнитуры, жирности, штриха, стилистики, валика, курсивности, межбуквенного расстояния и настроения типографики.
Важность учёта настроения, передаваемого типографикой.

Анализ стиля

4:29

Стиль включает визуальные решения, такие как градиенты, эффекты шума, текстуры, размытия, тени.
Избегание добавления объектов, которые не были частью композиции изначально.

Анализ цвета и композиции

5:23

Рекомендации по выделению цветов в референсе и их процентному соотношению.
Анализ заполненного и свободного пространства, ориентации макета.
Советы по адаптации референсов для разных макетов.

Практические советы

8:14

Совет меньше думать и больше делать.
Ограничение времени на создание концепции, например, 30 минут.
Использование вопроса «а что, если?» для экспериментов.

Переход к практике

9:29

Подготовка к практике с использованием референса.
Условия: использование стандартных шрифтовых гарнитур, размер фрейма 1280x800.
Начало подбора референсов для горизонтального формата.

Выбор композиции и цвета

10:56

Используйте одно решение для композиции, чтобы избежать сложностей с адаптацией.
Не используйте несколько референсов цветов, выберите один и работайте с ним.
Пример референса: простая композиция с зелёным и фиолетовым цветами.

Анализ цветов

11:55

Белый цвет «слоновая кость» хорошо сочетается с зелёным, но не с фиолетовым.
Зелёный цвет хорошо смотрится на светло- и тёмно-фиолетовом, но не на белом.
Чёрный цвет используется только на светло-фиолетовом.

Выбор типографики

13:01

Обратите внимание на шрифты с засечками и наклонные шрифты.
Гарнитура гротеск и свободное написание с большой буквы.
Плотная сборка текста с большой буквы.

Выбор стиля

15:08

Стиль включает полосы, линии, стрелки, обработку фотографий, швейцарскую типографику, иллюстрации, градиенты и эффекты стекла.
Пример стиля: обработка фотографий.

Работа с расположением объектов

16:33

Используйте квадратики для разметки расположения объектов.
Заполняйте макет контентом, не обязательно используя кнопки или текст.
Учитывайте фон и другие элементы макета.

Перенос контента на фрейм

19:18

Переносите контент на фрейм, сохраняя разделение на левую и правую части.
Регулируйте размеры элементов и расстояния между ними.
Адаптируйте контент под размер макета.

Завершение макета

22:32

Добавляйте недостающий контент, используя квадратики для обозначения мест.
Корректируйте расстояния между элементами.
Завершайте макет, учитывая все детали.

Размещение контента и иконок

23:25

Размещение иконок и кнопки.
Изменение заливки и обводки элементов.
Уменьшение размера текста до 16 пикселей.

Вставка иконок и кнопки «Попробовать бесплатно»

24:55

Использование плагина «Физ Айконс» для иконок.
Размещение кнопки «Попробовать бесплатно».
Копирование стиля обводки для кнопки.

Работа с текстом и референсами

26:51

Вставка актуального текста и трендовых постов.
Выравнивание текста по центру.
Изменение направления текста для сохранения его положения при уменьшении размера.

Настройка размеров текста и иконок

28:32

Проверка размеров текста и иконок.
Дублирование элементов с учётом референсов.
Добавление разделительной линии и текста.

Работа с фотографиями

30:49

Увеличение размера фотографий.
Сокращение расстояния между элементами.
Замена контента и продление элементов.

Завершение работы над композицией

32:26

Подведение итогов работы над композицией.
Переход к работе с цветом и типографикой.

Настройка типографики

32:46

Выбор стиля типографики с заглавными буквами и жирным шрифтом.
Настройка межбуквенного и межстрочного расстояния.
Копирование стилей для остальных элементов.

Завершающие настройки

35:38

Проверка и корректировка настроек текста.
Завершение работы над типографикой.

Работа с текстом и шрифтами

35:45

Обсуждение использования второго референса и настроек шрифта.
Настройка выравнивания и размера гарнитуры, установка 130%.
Удаление ненужного текста и перенос настроек.

Коррекция композиции

36:40

Проверка плотности текста и внесение небольших правок.
Копирование стилей с помощью Alt+Ctrl+C и Alt+Ctrl+V.
Продолжение работы с композицией.

Достижение однородности макета

37:42

Создание единого стиля для всех элементов макета.
Применение одинаковых правил для заголовков и наборного текста.
Эксперименты с размерами элементов для улучшения внешнего вида.

Добавление иконок

39:21

Размещение иконок по центру строк.
Настройка отступов и положения иконок.

Работа с изображениями и цветами

40:25

Добавление изображения с помощью плагина «A Splash».
Настройка непрозрачности и корректирующего слоя.
Выбор цветовой палитры и экспериментирование с цветами.

Детализация цветового оформления

42:20

Применение розового, тёмно-фиолетового и чёрного цветов.
Эксперименты с непрозрачностью и кадрированием изображения.
Выравнивание элементов и проверка визуального эффекта.

Завершение работы с цветом

45:50

Добавление дополнительной фотографии с помощью «A Splash».
Возможность изменения цвета на любой другой.
Финальная проверка и корректировка макета.

Работа с фотографией

47:02

Увеличение размера фотографии для лучшего восприятия.
Настройка параметров наложения для соответствия цвету фона.
Продолжение экспериментов с параметрами наложения для достижения желаемого эффекта.

Работа с оверлеем и референсами

48:06

Обсуждение результата работы с оверлеем: результат не идеален, но неплох.
Подчёркивание квадратичной типографики и ровных углов в работе.
Упоминание о возможности окрашивания полоски в другой цвет.

Использование референсов

49:05

Объяснение, что использование референсов не является воровством, а скорее адаптацией идей других дизайнеров.
Пример адаптации типографики, цвета и расположения объектов из работ других дизайнеров.
Подчёркивание важности минимизации размышлений при создании концепции.

Практические советы

50:04

Рекомендация начать практиковаться, используя предоставленные правила и контент.
Призыв делиться своими концепциями в социальных сетях.
Напоминание о важности грамотной работы для ускорения процессов создания концепций.

Расширение вдохновения

51:01

Совет расширять границы вдохновения, используя различные источники: плакаты, журналы, книги, архитектуру.
Рекомендация экспериментировать и задавать себе вопрос «а что если?».
Завершение мастер-класса с пожеланием успехов.