Всем привет! Меня зовут Вадим, я продуктовый дизайнер. В этом канале я планирую стабильно выкладывать референсы интерфейсов и веб-сайтиков. Иногда, возможно, будет и иной контент, связанный с дизайном. В первую очередь я это делаю для самодисциплины, но если кому - то интересно черпать что - то новое, то велком!

Для удобства здесь будут хештэги для рефов (буду добавлять):
#Web
#Interface
#Mobile
#Animation
#Visual
#UI

Вот такую интересную менюшку для навигации я нашёл в одной мобильной аппке.

Во - первый, сразу цепляет необычное позиционирование. Вертикальное расположение выглядит классно, а отсутствие чётких рамок и обводок прекрасно заменено лёгким затемнением бэкграунда.

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

Возьму на вооружение этот приём и обязательно воспользуюсь им при возможности.

#Interface
#Mobile

Трекер сна, мобильная аппка.

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

Удобно и гармонично смотрятся обозначения снизу. Я бы не подумал делать между ними такое небольшое расстояние, но вижу в этом смысл, учитывая строение самого графика.

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

#Interface
#Mobile

Понравилось то, как подошли к выбору времени подачи тачки.

Эти варианты предлагаются в выпадающем списке, не пихаются сразу в лоб и скрыты по дефолту. В развёрнутом виде не занимают много места, но предоставляют необходимую инфу.

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

Интересно смотреть на зарубежные аналоги привычных нам сервисов ( яндекс и только ) с другой логикой интерфейса.

#Interface
#Mobile

Вот такую фильтрацию с внутренним поиском я нашёл в вебе "Attio".

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

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

Очень удобно использовать это в нагруженной фильтрами системе ( какой - нибудь внутрянке ).

#Web
#Interface

Увидел, как на патреоне делаются посты, интерфейс очень похож на ноушн.

Используются не привычные всем блоки, текстовые поля и прочее, а буквально белый лист, в который заливается текст.

На скринах пример добавления видео с описанием на стенку. Удобный драг-н-дроп, место для тайтла и текста, блок для други аттачментов.

После добавления видео, появляются кнопки для его редактирования ( не стал уже пихать скрин ).

Пример правильного использования воздуха и минимализма.

#Interface
#Web

How we feel. Приложения для трекинга своего состояния и эмоций.

Меня зацепил экран создания заметок.

Блочками идут вопросы о состоянии пользователя, на которые он должен оттветить. Есть возможность выбрать уже готовые варианты в виде тегов ( что классно по очень многим причинам, впадлу писать ), а можно самому вписать свой вариант в такой же тег ( иконка плюсика ). При этом самописный вариант добавляется к остальным тегам.

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

Это наводит меня на мысль, что теги - универсальная штука, которая может быть универсальным инструментом, особенно в мобилках.

#Interface
#Mobile

Магазин кроссовок goat.

Классный вертикальный слайдер. Снизу ранжированные цена от низкой до высокой. Справа от слайдера помечаются эти самые отрезки.

Вертикальный слайдер на мобилке - редкость, но он удобен из - за того, что мы привыкли бесконечно скроллить ленты вертикально.

Не везде он подойдёт точно, но как вариант, очень неплохо ( но только под мобилку ).

#Interface
#Mobile

https://antimetal.com

Хочу разбивать немножко просто красивеньким сайтом, который нашёл недавно. Буду время от времени закидывать такое для вдохновения, и чтобы читатели не душились интерфейсом только.

Контента на сайте совсем немного, но вся суть в подаче. Мы узнаём назначение и историю продукта с помощью анимаций по ходу скролла.

Тут нет нагруженности, типографика очень импонирует, посыл сразу понятен, читается всё легко, ну и анимации на высоте.

Это сайт - история, который точно завлекает и заставляет долистать до конца.

#Web
#Visual
#Animation

www.flshfrm.com

Долгое время нравится этот сайтик во всём.

Классное сочетание типографики с 3Д объектами. Пример хорошего использования оттенков одного цвета.

Контрастная типографика, качественные 3д объекты и их анимации, плавная работа сайта. Грамотно используется свободное пространство.

Ни капли интерфейса, конечно, но зато очень приятный и карсивый веб - проект.

#Web
#Visual
#Animation

Приложуха для инвестиций, крипты и т.д.

Прикреплённый к посту экран - настройка отображения списка чего - то ( компаний, вкладов - не важно ).

Меня зацепил выбор самого отображения, какие - то параметры можно задать в валютах, какие - то в процентах.

Не уверен, как точно работает эта фильтрация ( для реги на сайте нужен US тел., мне впадлу ), но могу предположить, что каждый пункт можно или не отображать ( по дефолту ) или отображать ( тогда можно и выбрать $ или % ).

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

#Mobile
#Interface