Lab UI

Врываемся в новый год с красивым UI Kit от Дани из Лабпикс

— Токены, основанные на семантике
— Режимы с Liquid glass, Ambient-материалы с solid-поверхностями
— Прогрессивные тени и размытия, Blur'ы
— Авто-адаптивы на мобилки
— Тёмная и светлая темы
— 30+ UI-компонентов
— 400+ авторских иконок (мне прям зашли)
— Флаги всех стран мира

Мне понравилось оформление UI Kit, прям по дизайнерски сделано 😌, а также грамотно выстроенная структура кита. Отдельный респект за внимание к деталям — описание компонентов и их превьюшки 💪

Заценить кит

💬 Тултип

Новый блок в Базе Знаний

Я собираю большую доску в Miro с полезными ссылками и ресурсами по дизайну и называю её «База знаний». В прошлый раз я делился блоком на тему UI (150+ ссылок). В этот раз — фокус на UX.

Внутри 100+ ссылок на практичные материалы: статьи, видео, кейсы, гайдлайны и много других полезностей. Все ссылки разложены по категориям:
• Карта эмпатий
• CJM
• User stories
• JTBD
• Персоны
• Постановка проблем
• Дизайн-концепт
• Брейншторминг
• Mindmap
• RICE & ICE (приоритизация)
• Информационная архитектура
• User flow
• Проектирование
• Прототипирование
• Ревью
• Юзабилити
• Доступность
• Основные принципы UX
• Тексты в интерфейсе

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

🗂 В Базу Знаний 🫱

💬 Тултип

Dynamic Island и Live Activity

Сегодня хочу поговорить про основные моменты, которые стоит учитывать при проектировании таких прикольных штук, как Dynamic Island и Live Activity.

Dynamic Island — это интерактивная область в верхней части экрана iPhone (начиная с iPhone 14 Pro), которая пришла на смену привычной «моноброви». Она динамически меняет размер и форму, отображая уведомления, текущие процессы и элементы управления: музыку, таймеры, звонки и т. д.
Пользователь может взаимодействовать с ней — нажимать или удерживать для быстрого доступа к функциям приложения.

Самый частый и, пожалуй, самый удобный кейс — миниатюра того, что у вас сейчас играет в Spotify, Яндекс Музыке или где там еще вы музыку слушаете

Что учесть

Dynamic Island может быть в нескольких состояниях:

Compact — маленькая «таблетка»

Minimal — таблетка + кружок, когда отображаются две активности одновременно (пока редко видел вживую)

Expanded — при удерживании Compact превращается в расширенное состояние, где пользователь может совершать действия. Например:
в Compact при прослушивании музыки мы видим только обложку трека и анимированные звуковые волны, а в Expanded — можем переключать треки, ставить на паузу и управлять воспроизведением.

Важно помнить, что внутри области Dynamic Island физически находятся фронтальная камера и датчики. Поэтому ничего к поверх них не рисуем и всегда учитываем safe-зоны.

Live Activity — это виджеты реального времени, которые отображаются на экране блокировки и внутри Dynamic Island. Они показывают актуальную информацию о происходящих событиях: доставка еды, поездка на такси, спортивные матчи и другие процессы, которые важно отслеживать здесь и сейчас.
Обновляются автоматически, без необходимости открывать приложение.

Самые известные примеры лично для меня — Самокат, Ozon и Додо.

Что учесть

1) Live Activity — это про «прямо сейчас»
Он должен показывать актуальные данные и регулярно обновляться. Анимации здесь очень помогают — они улучшают считываемость и ощущение «живого» процесса.

2) Ограничение по времени.
У Live Activity есть свой жизненный цикл — он не может отображаться дольше 8 часов. В идеале — 15–30 минут.
Поэтому сюда не закладываются долгоиграющие события вроде таймера до следующего Нового года 🙂

Узнать подробнее про проектирование Dynamic Island и Live Activities можно в этом гайде 📱
Также посмотрете видос с живыми примерами 📱
И бонус — рабочие макеты от Додо 🦤 с этими островками

Проектировали ли вы когда-нибудь такие штуки и для каких задач?
Поделитесь своими инсайтами 👇

💬 Тултип

База знаний от дизайнера Figma

Оказывается не я один страдаю складированием всяких ссылок и ресурсов по дизайну 🥲
Сегодня хочу поделиться интересной находкой — Design Library от Daniela Muntyan, дизайнера из Figma.

Что внутри:
Портфолио — хорошие примеры и ориентиры по уровню
Лучшие практики — шрифты, гайдлайны, доступность и другие приколы
Вдохновение — иллюстрации, логотипы, индустриальный дизайн
А также дизайн-системы, user research и книги, на которые стоит обратить внимание

Смотреть ➡️

Короче, рекомендую сохранить, чтобы неспешно просматривать и использовать в работе ⛏

💬 Тултип

Больше всего меня цепляют авторские каналы, где дизайнеры делятся полезными находками, своими мыслями и реальным опытом. Один из таких каналов — «В погоне за дизайном». Без воды, лишнего шума и с чётким фокусом на практику 😙

Ануар публикует подборки топовых портфолио дизайнеров — отличный способ вдохновиться и быстрее обновить своё. Делится собственными UI-концептами, которые хорошо заходят в X , и в целом много рассуждает про визуал, приёмы и подходы к дизайну. Также поддерживает дизайнерское комьюнити, сообщество ребят с открытыми портфолио с самыми разными компетенциями. Но больше всего меня зацепила его дизайн-библиотека — аккуратно собранная коллекция полезных ссылок по UI и UX, практических советов и ресурсов, к которым реально хочется возвращаться. Еще и оформлено все красиво 👑

В общем, если ищешь качественный дизайнерский контент без лишнего пафоса — смело рекомендую подписаться и прокачивать свой дезигн

Вайбдизайнер? 🤨

Сегодня увидел вакансию от Сбера, где ищут дизайнера, который будет еще и вайбкодить свое решение

Временное помутнение рассудка или спойлер на этот год?

💬 Тултип

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

Здесь продуктовые, бренд- и коммуникационные дизайнеры из бигтеха 💳📞❤️💳 и сильных агентств. Ребята делятся реальной практикой, мыслями и ресурсами, которые используют сами.

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

Подпишись сразу на все каналы из папки и просто читай — эффект накопительный 💊

Лучшее в Тултипе

Решил оглянуться назад и сделать небольшую ретроспективу — собрать посты и статьи, за которые не стыдно и которые можно смело показывать маме новым читателям 😎

Посты

Бесплатные библиотеки компонентов

Как пользоваться Are.na

Мое успешное тестовое задание

Статьи

Матрица компетенций дизайнера — системный подход к росту

Как вайбкодить без боли? 11 выводов, к которым я пришёл

И отдельно хочу выделить 🗂 Базу знаний, которую я собираю. Это доска в Miro, куда я складирую полезные материалы, статьи, гайды и ресурсы по дизайну. Сейчас там уже 250+ ссылок — по интерфейсам, процессам, инструментам и мышлению

Если вы здесь недавно — это хороший старт 🚀
Если давно — возможно, что-то из этого вы пропустили

💬 Тултип

Простые исследования

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

Как быстро и недорого проверить продуктовую гипотезу, не считая А/B-тестов

Анализ обратной связи, или feedback

Кабинетное исследование, или Desk research

Сбор обратной связи от фронт-офиса

Мозговой штурм, или Brainstorm

💬 Тултип

Самое необычное тестовое и факап на собеседовании 🔫

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

Познакомьтесь с Лисой, Кроликом, Волком, Слоном и Летучей мышью Оззи.
У всех них есть свой цвет, они бодрствуют или спят, ходят (или
летают, как в случае с Оззи) или сидят дома.
Для каждого из них вы можете установить цвет, размер хвоста, теплоту носа и текстуру меха.
Еще есть Джо и Мо, которые должны ухаживать за животными, создавать новых и изменять существующих.
Джо в основном пьет кофе и следит за тем, чтобы большинство животных были красного цвета и выходили на улицу хотя бы раз в день.
Мо время от времени меняет хвосты и цвета, а носы и мех — каждые 2 недели.
Пожалуйста, создайте функциональный дизайн, который позволит Джо и Мо видеть и работать с такими
данными.

Я потратил на тестовое около 10 дней. Мне реально было сложно и я не мог перестать полишить свое решение. Через несколько дней после того, как я отправил тестовое задание прилетела обратная связь 👌

...что касается твоего решения, оно очень даже годное. Из жирных плюсов, ты использовал наш UI Kit, это крайне находчиво. Ты собрал что-то "на нашем языке". Решение логичное, придраться не к чему.

Предлагаю вам напрячься и подумать над тем, как решить эту задачу. В следующем посте выложу свое решение и идеальное решение ( по мнению студии) , которое делал другой кандидат задолго до меня. Мне его прислали для ознакомления уже после того, как я выслал свое. Там реально симпатично сделано

Так а что по поводу работы?

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

Короче, на собеседовании я рассказал, что пробовал себя в моушен дизайн и 3d, но не стал дальше работать в этом направлении. Исходя из этого ребята сделали вывод, что дизайн для меня это тоже увлечение ненадолго) Какая мораль? Не нужно расслабляться на собеседовании и рассказывать про всю свою жизнь. Расскажите то, что важно для текущей должности и только про тот опыт, который можно будет трактовать, как полезный для компании.

А какие у вас были факапы на собеседовании?) Что точно не стоит говорить про себя, а что надо подсветить? Поделитесь в комментах ⬇️

💬 Тултип