Ультимативная подборка для поиска референсов, часть первая.

Привет! Меня зовут Олег Бухтияр, я ex-Design Lead в hh.ru, а сейчас работаю в кипрском стартапе Anymaster, где в одиночку отвечаю за весь дизайн — а значит, я работаю с широким спектром задач, в чем мне очень помогают референсы.

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

🔹 Refero — совершенно крутой сервис с гораздо более удобными фильтрами, чем в том самом Mobbin. Пилит его Миша Беспалов.

🔹 Appshots — довольно приятный сайт, но смущает что местами практически полная копия Mobbin, при том что с фильтрами там все не хорошо.

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

🔹 Pageflows — есть подборка сайтов, мобильных приложений и даже писем. Есть скринкасты флоу с таймкодами. Главной своей особенностью они называют полный цикл погружения в продукт от магазина приложений до писем.

🔹 Call to Inspiration — устроен своеобразным образом: сначала выбираешь нужный тебе паттерн, а потом в перемешку с рекламой тебе показывают рандомные скрины, причём чаще не целого экрана, а только выбранного элемента.

🔹 Pttrns — довольно древний сервис, в котором собраны как мобильные, так и веб-интерфейсы. Совершенно тупо, что нет возможности потыкать, пока не купишь подписку.

🔹 Auto Interfaces — подборка автомобильных интерфейсов.

🔹 Interface in Game — подборка игровых интерфейсов.

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

🔹 Pushkeen AI — большая подборка пуш-уведомлений от различных сервисов. Автор — Сергей Терно. Очень круто собранный сервис, в котором можно найти ту самую формулировку для своего пуша 😉

🔹 Шаблоны для Bootstrap — неочевидный способ найти референсы. Лично пользуюсь, когда нужны примеры сложных интерфейсов, типа таблиц и админок. По ссылке один из неплохих шаблонов.

🔹 Darkmode Design — подборка сайтов исключительно с темной темой оформления.

🔹 Navbar Gallery — подборка навигации и шапок сайтов.

🔹 Footer Design — а это уже подборка футеров! Странно, что у них не один создатель 😅

🔹 Stack Sorted — библиотечка UI-элементов с разных реальных сайтов.

🔹 Appmotion — скринкасты приложений с лучшими анимациями.

🔹 Либа — библиотека интерфейсных текстов (на русском).

🔹 Design Systems Surf — это однозначно мой фаворит. Очень стильный и сделанный с душой сайт от белорусского дизайнера Ilya Greben. Кажется, тут собрано всё, что нужно знать про дизайн-системы:

- Популярные ДС и ссылки на них.

- Гайды по доступности, типографике и цветам.

- Раздел с компонентами и ссылками на эти компоненты в разных ДС. - Подробные спецификации по компонентам.

🔹 Redesigning Design — подробный гайд по созданию ДС с нуля от Ness Grixti. Покрывает все важные темы от ресерча до ведения спеков.

🔹 The Component Gallery — кажется, самая полная коллекция веб-компонентов с привязкой к этим компонентам в разных ДС. Плюс большая база самих ДС с фильтрами по технологиям и фичам. Создатель — Iain Bean.

🔹 Storybook — известный инструмент, в котором фронтендерам удобно создавать компоненты и дизайн-системы. У них есть обширный глоссарий, где собраны основные веб-компоненты. Круто, что сразу можно провалиться в доступные библиотеки и потыкать эти компоненты.

🔹 Design Systems for Figma — подборка дизайн-систем существующих продуктов в Figma.

🔹 Design Systems News — тут можно подписаться на новости из мира дизайн-систем.

🔹 Design Systems Index — и на закуску подборка почти из 300 дизайн-систем, с разбивкой на категории и ссылками.

🔗 Вторая часть про коммуникационный дизайн уже опубликована.

🔗 Также советую подборку сервисов, которые заявляют себя как "Убийцы" Pinterest.