Где искать веб-референсы

Как выбирать источник референсов под конкретную задачу: веб-паттерны, продуктовые сценарии, визуальное направление или творческий ориентир

Исследования
Refframe Team7 мин
Awwwards, Behance, Pinterest, Dribbble, Muzli, сайты и закладки собираются в папку референсов

Референсы для веб-дизайна лучше искать по типу задачи. Refframe подходит для веб-секций и собственной библиотеки, Refero и Mobbin - для экранов и продуктовых сценариев, Cosmos - для широкого визуального поиска, Awwwards - для выразительных сайтов, а Pinterest - для раннего исследования, визуальных ассоциаций и мудбордов.

Сначала сформулируйте вопрос

Запрос "красивые сайты" почти всегда даёт слишком широкий результат. Полезнее искать ответ: как показать сложный продукт на первом экране, как сравнить тарифы, как выстроить доверие в финансовом сервисе. Такой вопрос задаёт критерий отбора и помогает не копить случайные картинки.

Какой источник выбрать

  • Refframe - когда нужны конкретные веб-секции, стили, индустрии, эффекты, собственные загрузки и доски.
  • Refero - когда важны реальные экраны веб- и iOS-продуктов, паттерны и пользовательские сценарии.
  • Mobbin - когда нужно изучить последовательность экранов, анимации, историю продукта или командное обсуждение.
  • Cosmos - когда направление ещё не определено и нужны широкие визуальные ассоциации.
  • Awwwards - когда нужен ориентир по арт-дирекшену, выразительности и уровню исполнения цельного сайта.
  • Pinterest - на раннем этапе исследования, когда нужны широкие визуальные ассоциации, связанные идеи и мудборд; для повторяемого поиска веб-паттернов затем переходите к специализированному каталогу.

Как отбирать найденное

Сохраните 6-12 примеров, которые отвечают на один вопрос. Для каждого запишите источник и короткую причину: что именно работает, при каких условиях и какой риск есть у решения. Сравнивайте не только внешний вид, но и иерархию, содержание, доказательства, действие пользователя и доступность.

Как не превратить доску в склад

Разделяйте временные проектные доски и постоянные доски паттернов. Используйте небольшой общий словарь тегов. Раз в неделю удаляйте дубли и слабые примеры. В презентацию переносите не всё найденное, а несколько групп решений с объяснением компромиссов.

Проверьте источник на одном брифе

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

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

Источники

  1. Каталог Refframe, Refframe
  2. Refero, Refero
  3. Mobbin, Mobbin
  4. Cosmos, Cosmos
  5. Awwwards, Awwwards
  6. Введение в Pinterest, Pinterest
  7. Доски Pinterest, Pinterest