Как я собираю рефы и чем они полезны

В этой статье я хотел бы поговорить о том, как я собираю рефы. Это субъективное, личное мнение, и методы могут различаться у разных людей: кто-то собирает мудборды, кто-то делает скриншоты, а кто-то полностью полагается на свою фантазию. Однако для себя я выбрал определённый подход, который эффективно работает в моих проектах.

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

Предположим, им нужен сайт, и у них уже есть рендеры и прототип. Что делать дальше? Где искать вдохновение для проекта?

На помощь приходит множество ресурсов — это могут быть блоги, онлайн-платформы и личный опыт. Для себя я выделил пять основных источника, которые закрывают все вопросы, связанные с поиском референсов и помогают мне в реализации проектов.

Где я беру рефы:

Awwwards
CSS Design Awards
Pinterest
Behance
Codrops

Что чаще всего ищу:

Комбинации блоков
Шрифты
Цвета
Анимации

На что я не обращаю большого внимания:

Тематика сайта
Язык

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

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

Что дальше? После того как место хранения определено, начинается сам процесс сбора. Я собираю цвета, шрифты, анимации и композиционные решения, которые встречаю в похожих проектах или просто считаю уместными. Это словно пазл — по кусочкам формируется общая визуальная концепция.

Теперь разберём основные площадки, их плюсы и минусы, а также где и как их лучше применять.

Awwwards и CSS Design Awards. Эти две платформы похожи между собой: на них собраны актуальные работы, получившие награды и признание за дизайн, креативность и техническую реализацию.

Плюсы (что обычно можно найти):
- Комбинации блоков
- Цветовые решения
- Анимации

Минусы:
- Шрифты — чаще всего они либо платные, либо не поддерживают кириллицу
- Сложности в реализации — многие решения требуют глубоких знаний в HTML, CSS, JS и других технологиях


Pinterest и Behance. Эти площадки также схожи между собой, но у каждой есть своя специфика:

- Behance больше ориентирован на демонстрацию полноценных проектов, включая процесс работы и концепцию. Здесь можно найти детально проработанные макеты, UI-киты и даже бесплатные шрифты от авторов.

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

Плюсы (что обычно можно найти):
- Комбинации блоков
- Шрифты (на Behance можно встретить бесплатные)
- Цветовые решения

Минусы:
- Не самые свежие решения — в рекомендациях часто попадаются популярные и кликабельные проекты, которые могут быть уже заезженными. Чтобы найти что-то актуальное, придётся покопаться.

Codrops. Codrops — это скорее специализированный блог, где можно найти актуальные технические решения и эффекты, которые часто встречаются на Awwwards. Здесь дизайнеры и разработчики делятся тем, как они реализовывали проекты, анимации и визуальные эффекты.

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

Плюсы:
- Актуальные решения
- Подробные разборы эффектов и анимаций
- Полезно для вдохновения и реализации нестандартных идей

Минусы:
- Требует технических знаний — многие решения связаны с HTML, CSS, JS, что может усложнить их внедрение для дизайнеров без опыта в коде

Почему я не обращаю внимание на тематику сайта?

Всё просто — ограничения в выборе.
Допустим, мы разрабатываем сайт для архитектурного бюро.

Чаще всего это:
- Минимализм
- Мелкие шрифты или комбинация крупных заголовков с мелким параграфом
- Рендеры
- Палитра чаще всего без ярких акцентов

Если ориентироваться только на такие проекты, можно упереться в рамки шаблонных решений. Сайт будет удобным, но ничем не выделится среди конкурентов.

Поэтому основное внимание при поиске референсов я уделяю:
- Композиции
- Типографике
- Пространству (воздуху)
- Расположению элементов

При этом тематика проекта не так важна. Я могу найти интересное решение как в дизайне агентства, так и в портфолио фотографа или интернет-магазине одежды. Главное — сама компоновка и взаимодействие элементов, а не их содержимое.

А что с языком?

Я часто использую английский текст на первых этапах дизайна, потому что:

• Это помогает взглянуть на композицию без привязки к смыслу
• Не отвлекает от восприятия структуры и баланса
• Позволяет быстрее прийти к нужному решению

Заключение

После того как я определился, где и что искать, я начинаю собирать нужные референсы:
- Анимации
- Шрифты
- Композиции
- Цветовые палитры

Такой подход помогает мне находить свежие идеи и реализовывать проекты с интересными решениями.

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