Привет! Меня зовут Олег Бухтияр, я ex-Design Lead в hh.ru, а сейчас работаю в кипрском стартапе Anymaster, где в одиночку отвечаю за весь дизайн — а значит, я работаю с широким спектром задач, в чем мне очень помогают референсы.
Изначально эта подборка была опубликована у меня в телеграм-канале — @scrn_gallery, где я выкладываю подборки, рефы из реальной жизни и делюсь другими своими наблюдениями.
Эту подборку можно назвать около-продуктовой. Она в той или иной степени будет полезна всем, кто работает над цифровыми продуктам.
Когда ищешь тот самый флоу
Как по мне, главный секрет успеха 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.
