CTA CREW
Алексей Осипенко, UX/UI/Web-дизайнер, руководитель проектов в Индивидуальное предпринимательство частная практика фриланс · 16.02
Привет, коллеги! Сегодня в рубрике «Лайфхак» разберем, как правильно использовать референсы в дизайне. Это не про копирование, а про то, как учиться у лучших, вдохновляться, создавать и решать задачи.
Что такое референсы и зачем они нужны?
Референсы — это примеры работ, которые помогают понять тренды, найти идеи и избежать ошибок.
— Экономят время:не надо изобретать велосипед.
— Упрощают коммуникацию:покажите клиенту, что вы оба хотите.
— Прокачивают насмотренность: чем больше видишь — тем лучше.
Как искать референсы?
— Определите задачу: без четкого запроса легко утонуть в Pinterest.
— Используйте правильные ресурсы: Behance, Dribbble, Awwwards, но не забывайте про реальные продукты (приложения, сайты).
— Собирайте вне рамок: архитектура, природа, искусство тоже могут дать идеи для интерфейса.
Как анализировать?
1.Разбирайте референсы как конструктор:
— Композиция: как расположены блоки — акценты и пространство?
— Контент, вектора, цет, типографика: почему выбраны эти сочетания?
— Интерактивность: как работают анимации и переходы?
— Целевая аудитория: кому это подходит и почему?
2. Вытаскивайте принципы, а не детали.
3.Референсы ≠ Копирование
Важно адаптировать идеи под свой контекст: учитывайте бренд и ценности проекта, тестируйте решения (то, что работает у других, может не подойти вам), добавляйте уникальность — даже маленькая деталь сделает дизайн вашим.
Лайфхаки из практики
— Создайте библиотеку: сохраняйте примеры в Notion, Pinterest или Figma. Добавляйте теги: «навигация», «цветовые схемы», «микроанимации».
— Обсуждайте с командой: показывайте референсы на планерках, чтобы синхронизировать видение.
— Изучайте плохие примеры: анализируйте, что не работает, и избегайте этих ошибок.
— Метод «Франкенштейн»: смешайте референс из e-commerce с паттернами из такси-приложения: получите неочевидное решение.
— Ловушка для перфекциониста: если застряли — откройте референсы из другой сферы (например, инфографика Роскосмоса).
— Правило 3х5: 5 минут на поиск, 5 на анализ, 5 на эскиз. Таймер — против прокрастинации.
Осторожно: ловушки!
— Перегруз: 100 500 референсов парализуют. Ограничьте выбор 5-7 примерами.
— Потеря стиля: не дайте чужим работам «задушить» ваш почерк.
— Авторские права: вдохновляйтесь, но не копируйте элементы.
Пример из жизни
Сейчас мы работаем над системой тарифов для юридических и физических лиц в личном кабинете в рамках проекта турплатформы. Пользователь, публикующий объявление на платформе, может выбрать подходящий тариф. Тарифы динамические — они адаптируются под разные задачи пользователя. Процесс выбора тарифа с прогрессивным раскрытием полей: сначала пользователь видит базовые параметры, а затем, при необходимости, может углубиться в детали.
Чтобы сделать процесс выбора тарифов максимально понятным и удобным, черпали вдохновение из референсов нескольких источников:
→ Яндекс.Облако и Selectel — их подход к пошаговому раскрытию информации помог нам организовать структуру тарифов. Мы начали с показа ключевых параметров, чтобы не перегружать пользователя, а затем добавили возможность детального изучения через интерактивные элементы.
→ Тинькофф Бизнес — их система тарифов для корпоративных клиентов вдохновила нас на использование четких визуальных маркеров (например, цветовых индикаторов) для обозначения выгодности или популярности тарифа. Это поможет пользователю быстрее ориентироваться в выборе.
→ Авито.Бизнес — здесь взяли идею динамического расчета стоимости услуг. Например, если пользователь выбирает дополнительные опции (например, продвижение объявления), сумма автоматически пересчитывается, что делает процесс прозрачным и понятным.
→ Ozon для бизнеса — интерфейс вдохновил нас на создание удобного переключателя между тарифами для физлиц и юрлиц. Мы добавили простой тумблер, который позволяет быстро переключаться между типами учетных записей, сохраняя контекст выбора.
→ Мегафон и МТС — подход к оформлению тарифных сеток с использованием сравнительных таблиц поможет сделать раздел «Сравнить тарифы» более информативным.
Учитесь у других, фильтруйте идеи и превращай
Диана Иващенко
· 16.02
у вас там "г" на обложке съехала =)
ответить
Александр Игнатенко
· 16.02
Отличная статья!
ответить
еще контент автора
еще контент автора
CTA CREW
Алексей Осипенко, UX/UI/Web-дизайнер, руководитель проектов в Индивидуальное предпринимательство частная практика фриланс · 16.02
войдите, чтобы увидеть
и подписаться на интересных профи