Справочник интерфейсных решений
498 продуктов и 102 609 экранов реальных интерфейсов — с фильтрами по категории, UI-паттерну, типу экрана и цвету.
Когда нужно спроектировать экран, которого раньше не делали: настройки, пустое состояние, онбординг, тарифы. Вместо того чтобы выдумывать с нуля, посмотрите, как эту же задачу решили десятки продуктов.
Объяснить команде замысел быстрее показом, чем словами. Соберите подборку реальных примеров и приложите к постановке задачи.
Полноразмерные кадры показывают отступы, плотность и типографику — это ближе к вёрстке, чем абстрактный макет.
Перед редизайном лендинга полезно увидеть, как устроены первые экраны, блоки тарифов и разделы вопросов у продуктов вашей категории.
Один экран интересен по разным причинам, поэтому координат несколько. Раздел отвечает «что это»: веб-приложение (184), сайт (199) или iOS-приложение (115).
Отрасль продукта. Нужна, когда ищете примеры из своей ниши: у финтеха, здоровья и торговли разные ожидания пользователя.
Устойчивые способы решать повторяющиеся задачи: дашборд, форма, боковое меню, лента, канбан. Главная ось, когда проектируете конкретный экран.
Разметка дробнее паттерна: описывает не весь экран, а то, что на нём есть — первый экран, тарифы, вопросы и ответы, подвал, карточка, поле ввода. На странице проекта показывает, какие части продукта задокументированы, ещё до открытия скриншотов.
У каждого проекта палитра из трёх опорных цветов. Она подобрана по фактическому оформлению продукта, а не усреднением пикселей: машинное усреднение выдаёт цвет фона и теряет акцент, который занимает мало места, но определяет узнаваемость.
Фильтр по цвету в каталоге отбирает продукты по близости оттенка. Приём неочевидный, но рабочий: когда палитра будущего продукта задана, полезно посмотреть, как в схожей гамме решают контраст и читаемость.
По разделу, категории, паттерну, типу экрана и цвету — одновременно и мгновенно.
Сайты сняты страницей целиком, до самого низа: видна вся композиция, а не первый экран.
Именованные подборки, которые хранятся в браузере и выгружаются в JSON.
До трёх экранов рядом — разницу в плотности и иерархии по памяти не поймать.
Любой кадр в один клик: для мудборда, презентации, обсуждения.
Каталог переключается между светлой и тёмной и запоминает выбор.
Проектируете экран настроек — идите со страницы паттерна, а не ищите конкретную компанию. Увидите десятки решений одной задачи рядом.
Наложите категорию: финтех и здоровье проектируют одну и ту же форму по-разному, потому что цена ошибки разная.
Отмечайте подходящие экраны в коллекцию прямо во время просмотра — потом покажете команде целиком.
Два-три близких решения поставьте рядом. Разница в плотности видна только при прямом сопоставлении.
Мудборд стареет молча: через полгода половина ссылок ведёт на редизайн, а половина файлов лежит без подписи и не ищется. Здесь экраны размечены, продукты классифицированы, а то, что ищут чаще всего, вынесено в фильтры. Когда продукт меняет дизайн, прежние кадры не пропадают — остаются на странице отдельным блоком, потому что предыдущее поколение интерфейса тоже полезный референс.