- Статьи
- 3 мин на чтение
- 38
Как подбирать референсы для концептуального дизайна
Привет👋, я Лера, продуктовый дизайнер. Когда перед тобой чистый лист, легко растеряться: с чего начать? Как понять, что понравится клиенту? Как избежать бесконечных правок?
В Uprock меня научили системному подходу к подбору референсов — и это изменило мою работу. Расскажу, как собирать вдохновение осознанно, а не наугад.
🔷 Зачем вообще нужны референсы?
Референсы — это не про копирование, а про:
- Снижение тревоги (больше не страшно начинать с нуля)
- Скорость работы (меньше проб и ошибок)
- Понимание с клиентом (визуальные примеры = меньше споров)
Какие бывают референсы?
- Стилевые (атмосфера): Цвета, шрифты, текстурыФото, иллюстрации, анимации
- Функциональные (логика): Навигация, фильтры, формы, сикроанимации, адаптив
Примеры мудбордов
Мудборд — это «сборная солянка» стилевых референсов, которая задает тон проекту.
🔷 Пошаговый метод подбора референсов
✅ Этап 1. Глубокий брифинг с клиентом
Прежде чем искать картинки, задайте 5 ключевых вопросов:
- Кто ваша аудитория? (Возраст, привычки, боли)
- Какие сайты вам нравятся? (Пусть клиент покажет 2-3 примера)
- Что должно быть на главной? (Приоритеты по блокам)
- Какие эмоции должен вызывать сайт? (Доверие? Драйв? Уют?)
- Есть ли фирменный стиль? (Если да — берем за основу, если нет — разрабатываем)
Лайфхак: Попросите клиента прислать 3 слова, которые описывают будущий сайт. Например: «современный, минималистичный, технологичный».
✅ Этап 2. Анализ конкурентов
Не копируем, а выявляем тренды ниши. Смотрите:
- Цветовые схемы (Корпоративные сайты часто в синих, детские — в ярких)
- Расположение CTA-кнопок (Где их размещают? Какой цвет работает?)
- Популярные форматы контента (Видео? 3D? Иллюстрации?)
Пример: Если делаете сайт для премиум-бренда, обратите внимание на:
- Темные фоны с золотым
- Минималистичную типографику
- Плавные анимации
✅ Этап 3. Сбор референсов
Где искать?
Как искать? Важно! Сохраняйте не только скриншоты, но и ссылки. Используйте:
- Figma (для мудборда)
- Notion (для каталогизации)
- Pinterest (для быстрых подборок)
✅ Этап 4. Создание мудборда
- Группируем референсы по категориям: цвета, шрифты, фото, UI-элементы.
- Добавляем комментарии:”Этот градиент — для акцентных кнопок””Такой шрифт — для заголовков”
- Выделяем 3 ключевых принципа. Например:Светлый фон + темно-синие акцентыГеометричные иллюстрацииПлавные переходы между секциями
Пример мудборда в Figma
✅ Этап 5. Обсуждение с клиентом
Показывайте мудборд как историю:
- Начинайте с эмоций: “Мы выбрали теплые тона, чтобы передать уют вашего кафе”.
- Подкрепляйте примерами: “Вот как выглядит подобный шрифт на реальном сайте”.
- Предлагайте альтернативы: “Можем пойти в сторону ярких акцентов — вот как это работает”.
Совет: Если клиент просит «сделать как у конкурента», объясните разницу: «У них целевая аудитория — подростки, а у вас — взрослые. Давайте сохраним идею, но адаптируем стиль».
🔷 Частые ошибки
❌ Брать первый попавшийся пример → Ищите 5-10 вариантов для каждого элемента.❌ Копировать без адаптации → Берите идею, но перерабатывайте под свой продукт.❌ Забывать про функционал → Красивый дизайн ≠ удобный интерфейс.
🔷 Вывод
Референсы — это ваш компас в мире дизайна. Системный подход (брифинг → анализ → мудборд) экономит часы работы и снижает количество правок.
Главное:
- Сначала поймите задачу.
- Ищите и вдохновение, и практичные решения.
- Всегда адаптируйте идеи под проект.
Попробуйте этот метод в следующем проекте — и вы удивитесь, насколько проще станет процесс!✨
- Источник:
- dsgners.ru
