Тултип | UX UI
645 subscribers
138 photos
73 videos
1 file
176 links
Буст насмотренности и эффективности в дизайне продукта

Связь @gorba4evgenii
Download Telegram
Настольная книга Duolingo
Duolingo выпустил крутой хэндбук с рисованными иллюстрациями, где раскрывает свою продуктовую философию.

Что особенно зацепило:
"99 Bad Ideas" — фрэйморк, в рамках которой команда специально генерирует безумные идеи. Так рождаются нестандартные решения, которые порой превращаются в успешные продукты.

Радикальный редизайн: В 2022 году Duolingo полностью изменил навигацию, заменив привычное "дерево" уроков на линейную систему Path. Пользователи сначала сопротивлялись, а метрики не показали мгновенного роста. Но в долгосрочной перспективе это помогло улучшить качество обучения.
Кайфовый пример стратегического мышления

"Shake to Report" — у сотрудников есть гениально простая фича: если заметил баг, просто потряси телефон. Это ускоряет процесс выявления и исправления ошибок.

"Better a hole than an ahole". В Duolingo принципиально не нанимают токсичных людей, даже если они суперкрутые специалисты. Лучше работать без человека, чем разрушать культуру компании.

Прозрачность разработки: Любой сотрудник, даже не из продуктовой команды, может участвовать в Product Review. Это делает процесс максимально открытым и помогает находить свежие идеи.

Где я узнал об этом?
В телеграм-канале Сделай удобно. Автор разбирает крутые UI/UX-кейсы из цифровых и нецифровых продуктов. Например, недавно рассказывал про Fake Door-тесты — метод, когда команда продукта размещает кнопку, баннер или другой интерфейсный элемент, ведущий в несуществующую фичу, чтобы проверить спрос. Рекомендую подписаться, чтобы быть в теме


💬 Тултип
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
4🔥1
Тамагочи в Самокате

Самокат пошел по стопам Золотого Яблока и тоже сделал свое тамагочи — с блэкджеком и шлюхами пандой и двумя мини-играми. В одной нужно готовить блины и украшать их (с этим я справился), а в другой нужно делать так, чтобы печеньки падали в определенное место. Похожие печеньки формируются в одну большую, из которой может получиться мега-печенька. Скорее всего, смысл в том, чтобы скинуть как можно больше печенек, оптимизируя пространство формированием больших печенек (ну это я так понял, но до конца не дошел).
За то, что мы растим панду и покупаем ей всякие ништяки, Самокат будет давать промокоды. Особенно будут поощряться те, кто заходит несколько дней подряд, не нарушая свой страйк.

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

💬 Тултип
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👏2👍1
Life Canvas | App concept

Недавно я решил прокачать UI и буду в неспешном темпе рисовать конпцепты приложений. Первое из них — это Life Canvas. Приложение, которое превращает путешествия и яркие события в живое, динамичное полотно воспоминаний

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

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

Как вам концепт?😒

💬 Тултип
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9👀31🔥1
Прокачай свою дизайн систему
Я глубоко закопался в дизайн-системы и нарыл крутые материалы, которыми хочу поделиться. В них раскрывается, чем UI Kit отличается от дизайн-системы, что такое этот ваш атомарный принцип и как правильно юзать дизайн-токены на практике

Как создаются дизайн системы ▶️
Ребята из Epam и Юзтех разобрали тему дизайн систем на мелкие детали. В первом выпуске поговорили о том, что такое дизайн система и в чем отличие от UI Kit, а также как донести ее ценность. Во втором выпуске про то, как создать дизайн систему и какие плагины могут помочь. В заключительном выпуске о том, как поддерживать ДС и как выглядит жизненный цикл компонента

Ультимативный гайд по дизайн токенам 📝
прикладная статья о том, как в дизайне организовать токенную систему и развернуть технический стек (осторожно, много буков)

Что такое дизайн-токены простыми словами 📝
Дмитрий Якушин из Домклик постарался придумать самое простое объяснение дизайн-токенов на примере житейских ситуаций. Что это такое, как работают и зачем они нужны — в этой статье.

Как грамотно собрать UI-kit и передать его в разработку без боли? Опыт студии Crauch ▶️
Арт-директор студии Crauch, Саша Тарасов, рассказал, как собрать UI-kit, передать его в разработку и не утонуть в бесконечных доработках. Разобрали типичные ошибки, важность документации и почему без нормальной передачи UI-kit разработчики страдают не меньше, чем дизайнеры.

Использование Figma Variables в создании макетов мобильных приложений 📝
Благодаря Figma Variables процесс адаптации макетов под разные платформы можно значительно оптимизировать: сократить время разработки вдвое, сохранить уникальность каждой платформы и сэкономить бюджет проекта. В этой статье мы рассмотрим, как правильно настроить компоненты для этого

Как мы строим дизайн-систему в ЮMoney 📝
Полина и Степан, дизайнер интерфейсов и фронтенд-разработчик в ЮMoney. В этом тексте расскажут, как в компании устроена дизайн-система, и посмотрят на неё с двух сторон: глазами команды дизайна и разработки

#материалы

💬 Тултип
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥72
База тестовых заданий

Ребята из Internsheep сделали подборку из 50 тестовых от топовых компаний за период с 2022 года. В подборке Яндекс, Альфа банк, Авито, Тинькофф и другие крупные российские компании.

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

Смотреть подборку ▶️

#тестовое

💬 Тултип
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5👍1
Refactoring UI| Adam Wathan, Steve Schoger

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

В начале нас погружают в создание концепции — никакой мишуры, максимальный фокус только на иерархии элементов и их функциональности. Дальше плавно переходим к отступам — моя вечная боль! 😢 На реальных примерах авторы показывают, где нужно дать интерфейсу «подышать», а где лучше сделать всё компактнее. Кстати, их подход довольно интересный — сначала они делают слишком много воздуха, а потом уже сжимают пространство до оптимального.

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

Завершают книгу разделы про тени и их логику, интеграцию изображений в интерфейс и — что особенно ценно — проработку корнер кейсов.
Что реально зацепило — к каждому заявлению приводятся наглядные примеры, которые помогают информации лучше усвоиться в мозгу. Не просто «делайте так», а «смотрите, вот так плохо, а вот так — хорошо, и вот почему».
Однозначно рекомендую новичкам для освоения базы, и опытным дизайнерам — чтобы сделать качественный рефакторинг своих знаний и избавиться от вредных привычек. Эта книга — как хороший пинок под зад, после которого хочется немедленно открыть свои старые проекты и переделать их по-человечески!

Расскажите в комментах, что последнего читали про дизайн и что можете порекомендовать 🤨

#книги

💬 Тултип
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍125🔥3🕊1
This media is not supported in your browser
VIEW IN TELEGRAM
Персонализация в приложениях

В современных реалиях, где пользователи заебались перегружены информацией, способность приложения «говорить» с конкретным юзером становится важным преимуществом. Сервисы активно борются за наше внимание, стараясь повысить вовлеченность. Для этого используют разные механики, одна из них — это персонализация. В небольшой подборке опыт персонализации в российский аппах

Как мы узнали предпочтения пользователей и сделали поиск одежды и обуви удобнее
Старший продуктовый дизайнер Авито, Илья Хлесткин, расскажет про то, как ребята решили упростить пользователям поиск одежды нужного размера и внедрили фичу Мой гардероб.

Разбираем интерфейс сервиса «Гараж» в приложениях авто-классифайдов
Дизайнеры из Noknok провели исследование авто классифайдов (Авто.ру, Дром и Авито.Авто), в котором изучали фичу Мой гараж. Это раздел, где можно добавить свой авто и сервис будет предлагать нужные для вас и вашего железного коня запчасти, расходники и аксессуары.

Напишите в комментах свой пример персонализации в сервисах, который считаете крутым 👍

Всем легкой пятницы 🕺

💬 Тултип
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5
DataPorn — подборка визуализаций, от которых сложно оторваться 😋

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

Сравнение танков в World of Tanks
Здесь собрана умная визуализация, которая позволяет сравнивать танки по самым разным характеристикам — от брони и урона до скорости и уровня пробития. Можно выбирать страну (СССР, Германия, США, Британия), тип техники (лёгкий, средний, тяжёлый танк или ПТ-САУ), уровень — и тут же смотреть, кто из «железяк» на что способен. Например, можно одним взглядом оценить, какой танк наносит больше урона за 10 секунд или у кого башня толще. На танках с помощью цвета показаны более или менее укрепленные места

Диаграмма экспедиций Амундсена и Скотта
Крутая, но трагичная визуализация на таймлайне двух экспедиций к Южному полюсу. Амундсен и Скотт стартовали почти одновременно, но их судьбы оказались диаметрально разными: один вернулся с победой, второй — погиб с командой. Это проект Бюро Артёма Горбунова, где вместо карты — временная диаграмма, показывающая путь экспедиций по дням. Амундсен — чёткое планирование, собаки, склады, успех. Скотт — мотосани, лошади, нехватка подготовки и трагедия всего в 18 км от спасения. Это не просто график, а рассказ о смелости, ошибках и цене решений, изложенный языком данных.

Карта землятрясений с 1898 года
Это визуализация под названием «Earthquakes since 1898», созданная Джоном Нельсоном из IDV Solutions. На ней отображены все землетрясения магнитудой 4.0 и выше, зарегистрированные с 1898 года. Каждый светящийся след — это толчок, а чем ярче точка, тем мощнее было землетрясение. Благодаря визуализации становится чётко видно, где проходят границы литосферных плит — особенно отчётливо это прослеживается в районе Тихоокеанского «Огненного кольца». Вся карта буквально светится линиями сейсмической активности, и они точно повторяют очертания тектонических границ.

Голы и явные голевые моменты чемпионатов Европы
14–15

Это крутая интерактивная визуализация от «Лаборатории данных», посвящённая футбольному сезону 2014–2015 (еще есть 15–16, но он неполный по моему). Тут можно увидеть все голы и яркие моменты прямо на поле — с точками ударов, траекториями мячей и, конечно, исходами эпизодов.
Можно фильтровать по матчам, командам, игрокам, а также выбирать типы моментов. Для фанатов футбола и тех, кто обожает разбирать игру, это топ

Все шайбы Александра Овечкина
Ну и самая хайповая визуализация в подборке. Посвящена она голам Александра Овечкина в НХЛ. Здесь у нас все заброшенные шайбы, включая точные места на площадке, типы голов и даже исходы матчей. Можно фильтровать информацию по сезонам, противникам и типам голов, а также отслеживать, как хокеист побил рекорда Уэйна Гретцки


💬 Тултип
Please open Telegram to view this post
VIEW IN TELEGRAM
3🔥1