Интерфейсы *

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

В 2026 году тот же путь можно пройти быстрее: передать ИИ требования и за несколько итераций получить кликабельный прототип на HTML, CSS и JavaScript — с формами, модальными окнами, валидацией и тестовыми сценариями.

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

Привет, на связи Alfa Research Center — исследовательский центр Альфа-Банка. Обычно мы занимаемся исследованиями банковских интерфейсов, но однажды нашим заказчиком стала Президентская академия (РАНХиГС). Они хотели понять, насколько Личный кабинет студента отвечает ожиданиям и как выглядит на фоне рынка. Проверить продукт на UX никогда не бывает лишним, ведь если вам даже кажется, что у вас все хорошо, то глубокое UX-исследование покажет может показать неожиданные результаты.

В этой статье расскажем, как погрузились в личный кабинет студента Президентской академии. Для этого использовали опросы, айтрекинг Tobii Pro и технологию SenseMachine, которая считывает эмоциональный отклик по микровыражениям лица. В итоге получили более 45 выявленных инсайтов и проблем, и столько же рекомендаций на 150 слайдах в отчете.

Но сначала давайте определимся с тем, что мы считаем за «личный кабинет студента».

Встроенных шрифтов TFT_eSPI хватает ровно до того момента, когда интерфейс ESP32 хочется сделать аккуратнее обычного тестового стенда. В статье автор показывает браузерный генератор для Google Fonts и собственных TTF, а заодно объясняет, как устроен формат VLW и что важно учесть при работе со сглаживанием, LittleFS, переносами строк и размером файла.

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

Хотя если быть точным, мысль, развиваемая в этой  статье, посещала меня задолго до ранения, но только сейчас мне пришла идея как красиво это упаковать.

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

Почти два месяца назад я написал на Хабре статью «Основы информатики для всех» и показал свою учебную платформу shlyk.tech. Я рассчитывал получить замечания по курсу и интерфейсу. На появление сотен пользователей я не рассчитывал.

Сейчас у первой статьи 29 тысяч охвата, 43 комментария и 226 добавлений в закладки, была в топ 10 недели. На платформе зарегистрировались 745 учеников. Они отправили больше 35 тысяч решений. В этой статье мы рассмотрим аналитику, в каком состоянии сайт сейчас и планы на будущее.

Прохожу полный путь новичка на Хабр от регистрации до заполнения профиля и отмечаю критические ошибки в интерфейсе с позиции UX/UI дизайна и принципов эвристики доступности

Можно ли подключить AI-агента за минуту? Смоделировали путь клиента по самостоятельному подключению известного агента без помощи менеджера и специалиста, и вот что у нас получилось.

Статья про то, как построить приложение с AI-ассистентом и не застрять на самом неприятном месте, когда бэк готов, а интерфейс внезапно съедает недели.

Почему современный фронтенд сложнее, чем кажется снаружи. Особенно если вы идёте через spec-driven development, пишете требования вместо кода и ждёте, что Claude, Cursor или Kiro быстро соберут работающий продукт.

👀 Внутри: перекос фронта и бэка по объёму кода, состояние кнопок и форм, дизайн-системы, локализация, accessibility, тысячи npm-зависимостей, скучные интерфейсы от LLM, Playwright MCP, Figma MCP, визуальные тесты и планирование проекта с нормальным запасом на UI-грабли.

Заходите, читайте и делитесь своим опытом AI-разработки ❤️

Цифровая идентификация и её значение для веба в последние годы стали темой горячих обсуждений. Они привнесли с собой множество спорных моментов: законы о проверке возраста и их влияние на онлайн-анонимность; Википедия потенциально будет вынуждена верифицировать в Великобритании личность пользователей; привязка к официальным операционным системам iOS и Android стала обязательным форм-фактором для кошельков цифровой идентификации; кроме того, стоит упомянуть ситуацию, когда американские цифровые аккаунты были закрыты потому, что их пользователь был судьёй Международного уголовного суда.

В своей истории я расскажу о швейцарской правительственной системе идентификации AGOV. Этот развёрнутый в 2024 году сервис сегодня насчитывает 1,6 миллиона аккаунтов и становится всё более необходимым: через него можно получать пособие по безработице, предоставлять налоговую декларацию (а это обязательное действие!) и выполнять множество других операций. В кантоне Цюрих это единственная возможность подачи заявления на гражданство.

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

Я продуктовый дизайнер. И мне захотелось поэкспериментировать: можно ли уже сейчас сделать полноценное управление сайтом с помощью жестов. Да и ИИшки уже стали достаточно мощными. Так родился этот эксперимент. Для контента взял свое портфолио.

Получилось вот что. Страница встречает полем из частиц. Разрешаешь камеру, и частицы собираются в твоё объёмное отражение. Разделы висят вокруг силуэта и открываются рукой: наводишь палец, пункт заполняется и раскрывается. Текст листается щипком, фотографии берутся в кулак и растягиваются двумя руками. Дизайн при этом намеренно тихий: монохром, костяная типографика на чёрном, единственный цвет живёт внутри 3D-формы. Вся выразительность отдана взаимодействию.

Дальше — грабли по порядку наступания.

Я занимаюсь исследованиями цифровых банковских сервисов много лет. И уже 10 лет мы исследуем мобильные банки для бизнеса.

Мобильные банки менялись под влиянием сразу нескольких факторов: цифровизации бизнеса, изменений в регулировании и налоговом законодательстве, роста конкуренции, развития технологий и появления ИИ.

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

В этом году мы представили результаты исследования Markswebb Business Mobile Banking Rank 2026 и решили вспомнить, какими были сервисы 10 лет назад. В этой статье хочу поделиться своими наблюдениями.

Системы контроля доступа (СКУД) встречают нас в жизни на каждом шагу: в офисах, домах, транспорте и почти в любой сфере ежедневного применения. За последние десятилетия СКУД прошли большой путь эволюции. В данной статье мы не очень глубоко разберём некоторые важные аспекты реализации СКУД c использованием OSDP Crypto.

Осенью 2026-го страна встала в очереди за бензином. Пока одни карты честно красили пустые баки красными точками, а официальные приложения сетей деликатно молчали о сухих колонках, мы задали неудобный вопрос: а что, если показывать не только где топлива НЕТ, но и где его ВОТ-ВОТ привезут? За пару дней 1 051 человек нажал кнопку «Тоже жду» — и мы поняли, что попали в нерв.

ГдеЗаправка (gdezapravka.ru) — народная карта наличия топлива на заправках России. Не приложение нефтяной компании и не рекламная витрина сети: обычные водители отмечают, где сейчас реально есть 92-й, 95-й и дизель, а мы собираем это в одну живую карту. Наличие — краудсорсинг от людей на местах, цены — открытый скрейп. Без единой строчки данных от владельцев АЗС. Отметиться можно анонимно, без регистрации и номера телефона — по отпечатку устройства.

Интерфейс можно описывать не только через доступные действия, но и через продолжения, которые он делает более лёгкими. В статье предлагается рамка “архитектуры продолжений”: как после действия один следующий ход становится естественным, а другие остаются возможными, но требуют отдельного усилия.

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

На Хабре уже есть несколько отличных разборов того, как разные команды наводят порядок в Figma: аннотации, стрелки, сценарии, раскладки макетов и так далее. Я видел материалы Ozon Tech, t2, Иннотех — это классные справочники правил, можно брать и пользоваться. Но, когда в 2024 году я взялся за задачу подготовки стандарта для нашей компании, то столкнулся с вопросами, о которых нигде ничего не нашел. Как разработать единый подход? Что считать правильным и почему? Как упаковать эту идею и «продать» остальным членам команды, а главное: что делать дальше?

В этой статье поделюсь нашим методом поиска ответов на эти вопросы.

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

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

Внутри: Figma MCP, свой DS MCP, React, Jetpack Compose и SwiftUI, поиск по компонентам, ChromaDB, RAG, embeddings, препроцессор для описания дизайн-системы, грабли с чтением файлов, шумом в контексте, устаревающим SKILL.md и честное сравнение подходов по tool calls, токенам и результату.

Заходите, читайте и рассказывайте, как вы решаете эту проблему у себя ❤️

Краткая история внешней памяти и пять функций листа бумаги

Не претендуя на гениальность задался простым, на первый взгляд, вопросом: "На моем столе в 2026г всегда лежит лист черновика и пара карандашей?" Ответ оказался не таким коротким, как ожидал. Приглашаю к прочтению!

Это третья статья из цикла статей о создании компактной кросс‑платформенной библиотеки для разработки приложений с графическим интерфейсом на языке C++ — Frenchie. Для тех, кто привык изучать исходный код самостоятельно, репозиторий с исходным кодом библиотеки можно найти по ссылке. В данном материале я продолжу рассказывать про ту часть библиотеки, которая управляет состоянием контекстного окна и отслеживает связанные с ним события.

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

Это вторая статья из цикла статей о создании компактной кросс‑платформенной библиотеки для разработки приложений с графическим интерфейсом на языке C++ — Frenchie. Для тех, кто привык изучать исходный код самостоятельно, репозиторий с исходным кодом библиотеки находится по ссылке. В данном материале я расскажу, про ту часть библиотеки, которая управляет состоянием контекстного окна и отслеживает связанные с ним события - platform backend.

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

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

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

Я долго думала, как это починить. И в итоге перестала объяснять словами. Я сделала штуку, которая даёт побыть тем самым пользователем — на несколько секунд. Расскажу, как она устроена и почему чек-листы не работают.