🧾 Контракт компонентов: как сделать решения проверяемыми

Нейтан Кёртис разбирает, зачем дизайн-системам нужны формальные контракты компонентов. В них фиксируют свойства, состояния, зависимости и правила поведения, чтобы разные платформы одинаково понимали замысел компонента. Автор предлагает строить такие контракты на основе схемы. Она помогает проверять структуру данных, автоматически находить ошибки и генерировать большую часть кода. Хороший контракт должен быть типизированным, неповторяющимся, независимым от конкретной платформы, проверяемым, детерминированным, недорогим в поддержке и готовым к изменениям. Внутри: – Чем контракт компонента отличается от обычного описания или файла в Markdown; – Почему каждое решение нужно хранить в одном месте; – Как сделать контракт независимым от Фигмы, веба, iOS и Android; – Зачем нужны схемы, автоматическая проверка и детерминированная генерация; – Как менять контракты через ADR, версии и понятные правила совместимости. ➡️ Читать статью ——— 💻 Вакансии в IT и digital 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Как я пилю свой продукт. Часть 37

Уже месяц прошёл с прошлой части, а по ощущениям недели две. Работы было много, в основном вокруг резюме, собесов и вакансий, ну и моего любимого SEO, конечно. График переходов с поиска растёт с июля и это оч оч радует меня. Цифры В 35 части я писал, что проседаю по выручке. Сравнил последние 4 недели с предыдущими: – Оплат больше на 22%; – Платящих пользователей больше на 26%; – Регистраций больше на 16%. Приятно) Спасибо всем, кто покупает подписку, вы лучшие ❤️ Повторная проверка CV Новый UI проверки резюме показывал в прошлой части, теперь допилил, что происходит дальше. Поправили резюме по рекомендациям, проверяете ещё раз, и сервис смотрит, что именно вы исправили и как это повлияло на оценку. А если резюме не трогали, откроется прошлый результат, и проверка не потратится. Платить дважды за одно и то же странно, согласитесь) Заодно пересобрал карточку резюме в профиле. Все действия теперь в одном меню: проверить, улучшить, скачать PDF или ATS-версию, продублировать на английском. На мобилке это нормальная шторка, а не кнопки, которые разъезжаются по экрану. AI-собес AI-рекрутер стал любопытнее)) Если в ответе есть за что зацепиться, он переспросит: как принимали решение, что в итоге получилось. Мучить вас полсобеса одним кейсом он при этом не будет, это отдельно настраивал. Плюс переходы между вопросами стали связнее. Приходите пробовать, и если он где-то тупит, кидайте мне, это оч помогает. Вакансии и поиск Вот тут боль, которую на сайте вообще не видно: – Один город пишут по-русски, по-английски и сокращениями; – Зарплату указывают за месяц, за год, в разных валютах; – А названия профессий это отдельный цирк)) Всё это надо привести к одному виду, чтобы вы поставили фильтры и получили нормальную выдачу. Сижу разгребаю дальше. Фильтры в каталоге заодно стали быстрее, а фильтр зарплаты теперь учитывает выбранную валюту. Блог SEO пилим дальше, плюс я добавил себе аналитику: куда идёт человек после статьи, зарегался ли, дошёл ли до оплаты. Данных пока мало, так что весь рост выше блогу приписывать не буду) Как появятся нормальные результаты, обязательно поделюсь. По мелочи починил открытие Telegram и LinkedIn на Android, восстановление фильтров и отметки просмотренных вакансий. Ну и ещё сотни правок по UI и багам) Спасибо всем, кто пользуется, пишет про баги и советует HireHi друзьям. Пилим дальше 🥰 🔠 Лучшие вакансии в IT 🔠 Лучшие вакансии в IT 🔠 Лучшие вакансии в IT ч.36

Наш ТТ Интерфейзис Про соответствует мировым стандартам читабельности — и теперь это не просто красивые слова, а доказанный факт!

Сотрудники Центра языка и мозга НИУ ВШЭ в Санкт-Петербурге провели пилотное исследование чтения про себя, где с помощью окулографии сравнили ТТ Интерфейзис Про (TT Interphases Pro) со стандартными шрифтами Android и macOS. Исследование не показало значимых различий в обработке текста. «Полученные результаты показали, что ТТ Интерфейзис Про способен не просто технически заменить наиболее частотные Roboto, SF Pro и другие альтернативы, но и привнести дополнительную дизайнерскую ценность брендам, повысив их уникальность на перенасыщенном бесплатными решениями рынке». Сергей Кузьмин, руководитель проектного офиса TypeType. Подробнее об исследовании читайте здесь 📍

🪁 Дизайн-система начинает работать, когда вокруг неё договорились

Рома из Туту рассказывает, как их дизайн-система Kite выросла из старого UI-кита Order. Раньше компоненты жили отдельно на вебе, iOS и Android, дизайн догонял разработку, общей системы токенов не было, а масштабные визуальные изменения превращались в боль. В какой-то момент стало понятно, что просто иметь набор атомарных компонентов мало. Нужны общие правила, связанные токены, понятный процесс и договорённость между дизайном, разработкой и продуктовыми командами. Хорошо видно, что дизайн-система в большой компании это не библиотека кнопок. Это продукт внутри продукта. Там есть архитектура токенов, сборка под разные платформы, документация, миграции, поддержка команд, white-label сценарии, редизайны и постоянный торг между строгостью и гибкостью. Если всё сделать слишком свободным, каждый снова соберёт свой интерфейс. Если всё закрутить слишком жёстко, продуктовые команды начнут обходить систему стороной. Внутри: – Почему UI-кит без связи с дизайном быстро упирается в потолок; – Как Туту перешёл от Dev-to-Design к Design-to-Dev подходу; – Зачем дизайн-системе нужна глубокая система токенов; – Почему готового сборщика токенов может хватить на старт, но не на сложную систему; – Как CSS-переменные помогли с темами, скоупами и платформенными ограничениями; – Зачем Туту сделали собственную генерацию токенов под веб, iOS, Android и MailKit; – Как дизайн-система помогла быстрее делать white-label решения для партнёров; – Почему после запуска важны документация, внедрение в продуктовые команды и автоматизация через ИИ. ➡️ Читать статью ——— 💻 Вакансии в IT и digital 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
🚗 Интерфейс за рулём нельзя проектировать как обычное приложение
Команда дизайна и исследований Делимобиля собрала гайд по безопасным интерфейсам для сервисов, которыми могут пользоваться в машине. Это не только про карты и навигацию. Сюда же попадают звонки, музыка, заправки и любые сценарии, которые человек хотя бы теоретически может открыть во время движения. Важная рамка здесь простая: сначала нужно спросить не «как сделать удобнее», а «должен ли водитель вообще делать это за рулём». Если нет, функция должна уходить в режим стоянки или автоматизироваться. Если да, интерфейс проектируется по другим правилам: меньше действий, выше читаемость, крупнее цели, понятнее состояние, меньше визуального шума. На скорости 60 км/ч одна секунда взгляда в экран это уже 16 метров без полноценного внимания к дороге. Внутри: – Почему водительский интерфейс нельзя считать упрощённой версией мобильного приложения; – Как решить, можно ли вообще оставлять сценарий доступным во время движения; – Почему лучшая функция для водителя часто та, которая не требует действия; – Какие правила помогают оценивать читаемость, контраст, шрифты и анимации; – Что разрешено делать за рулём, а какие сценарии лучше блокировать до стоянки; – Из каких компонентов собирать безопасные экраны для машины; – Почему дизайн-решения здесь оцениваются не только по удобству, но и по риску отвлечения; – На какие стандарты опирается гайд: ГОСТ, ISO, NHTSA и Android Automotive. ➡️ Читать гайд ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Беспилотные Waymo
Waymo разрабатывает технологию полностью беспилотных такси. Увидела статью в New York Times и пошла с Клодом проверять, а что же по доступности? А они-то молодцы! Начали ей заниматься давно. Причем как физической, так и цифровой! Клод сделал интерактивный отчёт со всеми WCAG-критериями, user journey и рекомендациями → https://anzhelikagerman.github.io/enable/">https://anzhelikagerman.github.io/enable/">https://anzhelikagerman.github.io/enable/">https://anzhelikagerman.github.io/enable/ А тут давайте тут расскажу, что мне очень понравилось. Заказать поездку можно только через мобильное приложение Waymo One. После вызова к вам приезжает полностью пустой электромобиль и всё взаимодействие от посадки до климат-контроля и музыки идёт через приложение. И вот его-то и разберем. · Приложение работает с VoiceOver (iOS) и TalkBack (Android). Во время поездки информация дублируется голосом, включая статусы («машина приехала», «можно отстегнуть ремень»). · Audio guidance («Голосовые подсказки»): при приближении к автомобилю приложение через динамик телефона проговаривает расстояние и направление. · Honk to find («Посигналить для поиска»): кнопка в приложении удалённо подаёт звуковой сигнал автомобиля. · Световые сигналы фар: визуальный аналог гудка для глухих и слабослышащих. · Extra time to board: пассажир может заранее выбрать увеличенное время на посадку, чтобы водительский автомобиль дольше ждал. · Braille-надписи на кнопке двери и поручнях. · Текстовые субтитры всех голосовых объявлений на экране в салоне. · Приложение минималистично. Основной экран — это карта с минимумом элементов. Как же это важно! · Фирменная анимация «радара». При поиске машины над кнопкой появляется вращающаяся дуга, напоминающая лидар-сканер. Такой индикатор активности системы. · Микро-взаимодействия и тактильная отдача. Когда машина подъезжает, телефон даёт характерную вибрацию. Анимация подсказывает, с какой стороны и на каком расстоянии автомобиль. · Инициалы на крыше. При заказе пассажир может включить отображение своих инициалов на куполе автомобиля. Приложение подсказывает: «Ищите свои буквы». Ну гениально же ) · Waymo проводит регулярные юзабилити-сессии с участием людей с нарушениями зрения, слуха, подвижности и когнитивными особенностями. Недоработки тоже есть и они в отчете → https://anzhelikagerman.github.io/enable/">https://anzhelikagerman.github.io/enable/">https://anzhelikagerman.github.io/enable/">https://anzhelikagerman.github.io/enable/
Сегодня большинство пользователей смартфонов знают базовый минимум жестов — тап, свайп, зум и др. С одной стороны, жесты удобны и интуитивны, с другой — не так очевидны, как обычная кнопка с текстом.
Внедрение жестов в интерфейс требует онбординга. Жест в большинстве случаев будет альтернативой привычному паттерну кнопки. Что говорят исследования? Androidmetro: пользователи не находят свайп-действия. Жесты требуют подсказок или онбординга. Кнопки показывают себя эффективнее. Университет Хильдесхайма: жесты плохо себя показывают для новичков в приложении, но с появлением у них привычки, наоборот, ускоряют работу. MDPI: жесты увеличивают когнитивную нагрузку и замедляют выполнение задач. Пользователи тратили больше времени на выполнение задач с жестами, им требовалось больше когнитивных усилий. При этом, жесты воспринимались как более «интересные» и привлекательные. Университет Корнелла: задачи, выполняемые с помощью жестов, демонстрировали большее время выполнения, чем задачи, выполняемые с помощью сенсорного управления, хотя респонденты воспринимали эти взаимодействия как более привлекательные. Nature: существует прямая взаимосвязь между негативными эмоциями и недостатком наличия жестов управления. Одной из причин негативных эмоций пользователей при взаимодействии с интерфейсом является отсутствие возможности управлять жестами. 🌊🌊 Почти все исследования показывают один и тот же парадокс: жесты нравятся пользователям, но кнопки работают лучше. Жесты — это опциональное ускорение и повышение удобства взаимодействия. Если фичу нельзя найти без жеста — она не существует. Но если жеста нет — интерфейс может ощущаться неудобным. 🌊🌊
Gucci и Google работают над созданием умных очков. О партнерстве сообщил CEO Kering Лука де Мео.
Будущее устройство будет работать на платформе Android XR и, как ожидается, получит встроенные камеры, микрофоны и динамики. Детали дизайна пока не раскрываются. Очки собираются выпустить в следующем году — тогда модный дом станет одним из первых крупных игроков люкса в сегменте умных аксессуаров. Партнерство стало частью новой стратегии Kering, которую презентовал Лука де Мео на фоне очередного неудачного отчета. Так холдинг планирует активнее развивать дополнительные направления в надежде, что это поможет компенсировать снижение продаж Gucci Подписывайтесь на вечернюю рассылку | 🔹The Blueprint News
🎙 У нас появилось мобильное приложение
Теперь можно быть на связи с сообществом не только через веб и PWA. Читайте посты, обсуждайте, сохраняйте в избранное — в метро, в очереди, на ходу. В первую версию мы не пытались запихнуть весь веб в карман. Сделали главное: удобный доступ к постам и дискуссиям. Хотим поблагодарить команду студии fancy solutions — только благодаря ним случился этот релиз 🎙 Сейчас мы входим в длинный этап открытого тестирования. Если ловите баги или есть идеи — пишите в чат «Кружок дизайнерс». Там уже собралась классная компания, где можно не только поругаться на баги, но и пообщаться на любую волнующую в индустрии тему. 🎙 Приложение уже доступно на iOS и Android. Скачивайте, пользуйтесь и рассказывайте, как вам. Это важно для нас.
💚 Duolingo обновили основные вкладки и подняли вовлеченность без просадки учебных метрик
По отдельности вкладки работали нормально, но вместе интерфейс разваливался на детали: разные заголовки, слабая иерархия текста, неровные отступы. Критичной ошибки нет, но ощущение цельного продукта теряется именно так. Лиа Ли и Локеш Фулфагар показали, как команда перешла от разрозненных экранов к единой системе. Сначала сделали короткий спринт с четырьмя крайними направлениями, потом собрали рабочий баланс между целостностью и задачей конкретной вкладки. Результат уже вышел на iOS, Android в процессе. Внутри: – Какие четыре направления тестировали на старте: Punchy, Soft, Modular, Flat; – Почему единый стиль без функции может ухудшать восприятие; – Как они балансировали простоту интерфейса и ясность сценария; – Как собрали систему заголовков по уровням важности вкладок; – Как пересобрали типографику в минимальный, но управляемый набор стилей; – Почему убрали лишние контейнеры и сделали ставку на осознанные отступы; – Как внедрили совместный QA с разработкой и проверку через дизайн-оверлеи; – Какие продуктовые результаты получили после релиза на iOS. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
пятничная подборка: когда технологии начинают действовать сами. игры обучают роботов, приложения берут на себя защиту близких, а нейроинтерфейсы возвращают движение.
🤖 игры как инфраструктура для роботов Niantic Spatial и Coco Robotics используют наследие Pokémon Go для навигации роботов-курьеров. ▶︎ визуальное позиционирование (VPS) вместо GPS ▶︎ точность до сантиметров за счёт анализа окружения ▶︎ обучение на 30 млрд изображений игроков ▶︎ стабильная работа в плотной городской среде игроки фактически годами обучали инфраструктуру для автономной доставки. ☎️ защита от мошенников на уровне семьи Truecaller добавил семейные группы с функцией «цифровой опеки». ▶︎ один администратор контролирует звонки всей семьи ▶︎ уведомления о подозрительных вызовах ▶︎ возможность удалённо завершить звонок (Android) ▶︎ отслеживание активности (движение, батарея и т.д.) контроль безопасности становится распределённым — не только у пользователя, но и у его окружения. 🧠 чип, возвращающий движение китайская компания Neuracle Medical Technology получила одобрение на нейроустройство NEO. ▶︎ интерфейс «мозг-компьютер» для пациентов с параличом ▶︎ электроды вне ткани мозга → ниже риски ▶︎ управление роботизированной перчаткой ▶︎ уже разрешён для домашнего использования BCI впервые выходит из стадии эксперимента в реальную медицинскую практику. вывод технологии смещаются от интерфейсов к действиям: они не просто помогают пользователю, а принимают решения, действуют в его интересах и берут на себя часть ответственности. для бизнеса это означает смену логики продуктов — выигрывают те, кто строит системы, способные не показывать варианты, а доводить задачу до результата. trends.aic.ru
Изображение поста
Бесплатная библиотека для настройки хаптик-паттернов в вебе.
Позволяет гибко управлять тактильной отдачей прямо в браузере: настраивать интенсивность, ритм и сценарии отклика под разные пользовательские действия. Работает на iOS и Android. haptics.lochie.me
🔤🔤 Выкатили фичу для доступности, а пользователи попросили вернуть всё обратно
СберИнвестиции потратили месяцы на адаптацию под увеличенный шрифт. Провели редизайн ячеек, переписали логику отображения, протестировали на разных конфигурациях. Выкатили в прод. Начали получать отзывы: «Верните старый дизайн». Что пошло не так? Тестировали только на телефонах. Никто не подумал проверить планшеты и эмуляторы. На широких экранах перестроенные ячейки выглядели нелепо. А часть пользователей вообще работает через эмуляторы на компьютере, там физические параметры экрана искажаются. Игорь, Android-разработчик в Сбере, рассказал про опыт работы с доступностью в команде «Портфель клиента». Провели исследование: 44,82% пользователей используют системное увеличение шрифта или интерфейса. Это огромный пласт аудитории. При увеличении старый интерфейс ломался: названия счетов обрезались, кнопки теряли текст, в ячейках активов пропадала половина информации. Внутри: — Стратегии обработки переполнения: обрезание, сокращение, перенос строк, авторазмер текста, динамическая вёрстка; — Custom ViewGroup для ячеек с тремя состояниями: стандарт, переполнение 1, переполнение 2; — Расчёт размера шрифта с учётом двух системных настроек: размер шрифта и масштабирование экрана; — Динамическая высота шапки при перелистывании счетов и смене периода; — Итоговое решение: дали пользователям самим выбирать тип отображения ячеек в настройках; — После запуска количество пользователей с увеличенными ячейками значительно выросло и продолжает расти. А вы тестируете свои интерфейсы с увеличенным шрифтом? ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Изображение поста
Material You — большой UI kit нового Android 12.
Изображение поста
Компания Google обновила логотип и маскота Android.
🍕 Арт-директор Додо за 2 часа и $100 сделал анимацию печенья, которую 3D-шник оценил бы в 500 тысяч рублей
Команда Dodo Brands рассказала, как использует AI в реальной работе. Гаврил Перов, арт-директор Дринкит, сидя в кофейне собрал в GPT и Kling визуал печенья с предсказанием для экрана "После заказа". Этой печенькой пользовались 6 месяцев, скриншотили около 1000 раз. Вика Зеликова натренировала ChatGPT на десятках примеров релиз-ноутсов, теперь пишет их в 3 раза быстрее. Ваня Уваров за 2 недели переписал интерфейс админки для комбо-наборов через Lovable и ChatGPT, потратил $75 на токены. Никита Белкин автоматизировал перенос цветов из Figma в код через Claude Sonnet 4 и Gemini 2.5 Pro в Cursor. Внутри: – Печенье с предсказанием: GPT + Kling, 2 часа работы, $100 на токены, альтернатива 300-500к у 3D-шника; – Видео в карточке товара: Higgsfield.ai по готовым шаблонам, референсы для фотолаборатории и тесты для прода; – Пицца-гороскоп на хакатоне: ChatGPT написал промпты для Midjourney, 6 карточек под 6 знаков зодиака, анимация через Higgsfield.ai; – Релиз-ноутсы: обучила ChatGPT на десятках примеров, зафиксировала правила стиля, экономия времени в 3 раза; – Автоматизация цветов: Token Studio выгружает JSON из Figma в GitHub, Cursor конвертирует в XML для Android и xassets для iOS, GitHub Actions создаёт Pull Request; – Тексты в ToV бренда: скормила редполитику, ToV, глоссарий, исследование аудитории, теперь ChatGPT генерирует идеи и подходящие фразы; – Deep Research: ChatGPT 5 Thinking анализирует бенчмарки, конкурентов, находит кейс-стади, даёт дельную обратную связь; – Интерфейс админки: рисунки от руки в блокноте, ChatGPT оцифровал, Lovable сверстал, Ant Design подключили, реальные данные из JSON, 2 недели от задачи до решения. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы
Изображение поста
Ну что ж, на этих выходных мы узнали, что дизайн Telegram (как минимум для Android) делают люди с хорошим зрением. Зато вон сколько всего влезло!
Изображение поста
LottieFiles Mobile App — приложение iOS и Android для теста Lottie анимации на вашем телефоне.
lottiefiles.com/mobile
Ultimate App Store Image Generator — подходит для для iOS и Android
Изображение поста
Now In Android Case Study — кейс с использованием Material 3 в андроид приложении
Изображение поста