Привет, коллеги! Сегодня в рубрике «Лайфхак» разберем, как правильно использовать референсы в дизайне. Это не про копирование, а про то, как учиться у лучших, вдохновляться, создавать и решать задачи.

Что такое референсы и зачем они нужны?

Референсы — это примеры работ, которые помогают понять тренды, найти идеи и избежать ошибок.

— Экономят время:не надо изобретать велосипед.

— Упрощают коммуникацию:покажите клиенту, что вы оба хотите.

— Прокачивают насмотренность: чем больше видишь — тем лучше.

Как искать референсы?

— Определите задачу: без четкого запроса легко утонуть в Pinterest.

— Используйте правильные ресурсы: Behance, Dribbble, Awwwards, но не забывайте про реальные продукты (приложения, сайты).

— Собирайте вне рамок: архитектура, природа, искусство тоже могут дать идеи для интерфейса.

Как анализировать?

1.Разбирайте референсы как конструктор:

— Композиция: как расположены блоки — акценты и пространство?

— Контент, вектора, цет, типографика: почему выбраны эти сочетания?

— Интерактивность: как работают анимации и переходы?

— Целевая аудитория: кому это подходит и почему?

2. Вытаскивайте принципы, а не детали.

3.Референсы ≠ Копирование

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

Лайфхаки из практики

— Создайте библиотеку: сохраняйте примеры в Notion, Pinterest или Figma. Добавляйте теги: «навигация», «цветовые схемы», «микроанимации».

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

— Изучайте плохие примеры: анализируйте, что не работает, и избегайте этих ошибок.

— Метод «Франкенштейн»: смешайте референс из e-commerce с паттернами из такси-приложения: получите неочевидное решение.

— Ловушка для перфекциониста: если застряли — откройте референсы из другой сферы (например, инфографика Роскосмоса).

— Правило 3х5: 5 минут на поиск, 5 на анализ, 5 на эскиз. Таймер — против прокрастинации.

Осторожно: ловушки!

— Перегруз: 100 500 референсов парализуют. Ограничьте выбор 5-7 примерами.

— Потеря стиля: не дайте чужим работам «задушить» ваш почерк.

— Авторские права: вдохновляйтесь, но не копируйте элементы.

Пример из жизни

Сейчас мы работаем над системой тарифов для юридических и физических лиц в личном кабинете в рамках проекта турплатформы. Пользователь, публикующий объявление на платформе, может выбрать подходящий тариф. Тарифы динамические — они адаптируются под разные задачи пользователя. Процесс выбора тарифа с прогрессивным раскрытием полей: сначала пользователь видит базовые параметры, а затем, при необходимости, может углубиться в детали.

Чтобы сделать процесс выбора тарифов максимально понятным и удобным, черпали вдохновение из референсов нескольких источников:

→ Яндекс.Облако и Selectel — их подход к пошаговому раскрытию информации помог нам организовать структуру тарифов. Мы начали с показа ключевых параметров, чтобы не перегружать пользователя, а затем добавили возможность детального изучения через интерактивные элементы.

→ Тинькофф Бизнес — их система тарифов для корпоративных клиентов вдохновила нас на использование четких визуальных маркеров (например, цветовых индикаторов) для обозначения выгодности или популярности тарифа. Это поможет пользователю быстрее ориентироваться в выборе.

→ Авито.Бизнес — здесь взяли идею динамического расчета стоимости услуг. Например, если пользователь выбирает дополнительные опции (например, продвижение объявления), сумма автоматически пересчитывается, что делает процесс прозрачным и понятным.

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

→ Мегафон и МТС — подход к оформлению тарифных сеток с использованием сравнительных таблиц поможет сделать раздел «Сравнить тарифы» более информативным.

Учитесь у других, фильтруйте идеи и превращай