Дизайн

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

Мы — Кирилл Улитин, руководитель UX-направления и исследований в департаменте дизайна, и Стася Кабанова, исследователь пользовательского взаимодействия в МойОфис. В компании есть целая экосистема офисных решений на разных платформах, поэтому пользовательские сценарии здесь исследуют регулярно и обычно опираются на привычные методы: глубинные интервью и usability-тестирования.

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

Главный секрет и принцип хорошей генерации – это последовательность.

Чем точнее проработка отдельных деталей, тем качественнее будет результат.

Как-то намедни баловалась и решила сгенерировать красивую картинку в айдентике нашей компании.

Вечный спор дизайнеров и юристов: патент на промышленный образец или авторское право? Когда автору нужно защитить своё творение, вариантов вроде бы два. Но на деле всё сложнее.

Меня зовут Юрий Горбачев. Я руковожу патентным бюро и сегодня разберу в статье, как защищать дизайн, преимущества и недостатки каждого варианта, приведу примеры из практики. 

Мы сделали интерактивный дом-таймлайн про телевидение 90-х и 00-х. Под катом: как команда без разработчиков дошла от JSON-файла на VPS за до корпоративного Kubernetes

Как только дизайн-система разрастается больше, чем на 10-20 кнопок, а брендов у вас становится несколько — JSON-файлы с токенами превращаются в кошмар. Дизайнеры экспортируют токены из Figma, разработчики получают пулл-реквест на 5000 строк измененного кода, и никто в здравом уме не может сказать: "А что именно поменялось и ничего ли мы не сломали?"

А если вместо английской буквы "c" в коде будет русская? А что если токен зациклился сам на себя? А если у одних токенов более 3-х уровней вложенности, то как поведет себя система? А если нужного токена нет в одном из модов? Да и вообще, как узнать, какие токены можно вынести в примитивы, а какие в семантику и отдельные файлы для брендов?

Чтобы решить эти проблемы, я написал веб-интерфейс Tokens Dashboard — ты кидаешь в него JSON (архив, папку, файл, несколько файлов — не важно), а он выдает красивую и понятную аналитику. И сегодня мы разберемся, как это работает.

Программа полностью бесплатная и доступна как для пользователей Mac OS, так и Linux / Windows. Она портативна и не мусорит в системе — вы просто удаляете папку, если она вам больше не нужна.

Что подразумевается у Хаммера и Чампи под «переносите процесс с учётом ограничений технологий»? Технологии меняют структуру правил организации процесса, позволяя делать его более плоскими. Но на что указали авторы манифеста примером с коровьими тропами?

Это интуиция авторов манифества, которую можно раскрыть с помощью классических трудов по культурологии (Хёйзинга для свойств динамики человеческих институтов), социологии (для переложение культурной онтологии на техно‑социальное пространство) и базовых понятий CS.

Помните времена, когда цвета в CSS выбирались почти наугад? Белый фон — #FFF, чёрный текст — #000, акцент — какой-нибудь #3498db, который просто нормально смотрится? Для раннего веба этого хватало. Интерфейсы были проще, экраны — одинаковее, а требования к доступности, темам и визуальной консистентности ещё не давили на разработку так сильно, как сейчас.

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

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

Привет! Меня зовут Алия Ямалиева, и я — исследователь в UX-лаборатории Контура. В этой статье я хочу рассказать о портретах разных грейдов — от стажёра до лида.

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

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

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

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

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

Итак, большинство людей начинают с запросов к, скажем, условной Nano Banana PRO, вида "beautiful girl portrait 8k cinematic", получают что-то сносное - думают, что разобрались и в MJ все сработает так же. Не разобрались и не сработает.

В данном случае мы имеем как аналогию - съемку профессиональной камерой, но в дефолтном авторежиме. Да, красиво. Но красиво можно было и на телефон снять. Так, а зачем нам камера?

Когда я жила в Нэшвилле, мы с моими подругами часто выезжали на «экскурсии» по штату. Однажды мы поехали искать белоголовых орланов в западном Теннесси; в туалете национального парка нам встретилась женщина с кучерявыми волосами, которая сообщила, что вчера видела 113 орланов. Мы же за всю поездку увидели... двух.

Летом 2017 года мы поехали на ещё одну экскурсию на завод Манхэттенского проекта в Ок-Ридже. В 1942 году Ок-Ридж был выбран в качестве места создания завода по обогащению плутония и урана в рамках Манхэттенского проекта — совершенно секретного мероприятия по разработке первой атомной бомбы. Маленькое сельское поселение, расположенное в долине западного Теннесси, благодаря срочному проекту по созданию атомной бомбы превратилось в тайный посёлок под названием «Site X», увеличив своё население с трёх тысяч человек в 1942 году до 75 тысяч к 1945 году. Наряду с ростом населения были построены огромные здания комплекса.

Меня зовут Динара, я владелец продукта Naumen Service Desk и аналитик в команде внедрения, занимаюсь настройкой интерфейсов для Enterprise-клиентов.

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

Где здесь золотая середина? И как получилось, что от интерфейсов, которые должны упрощать жизнь, пользователи порой устают сильнее, чем от физического труда?

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

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

На практике — подходит. Просто его нужно довести до рабочего состояния.

В этой части разберу три вещи, без которых bubble chart в реальных задачах не живёт:

• как справляться с наслоением,

• как использовать цвет без визуального шума,

• и как добавить время, чтобы график начал показывать не только «что есть», но и «что происходит».

Покажу на том же кейсе складской аналитики — с интерактивными приёмами, которые реально работают в дашбордах и на встречах.

Протестировал три AI-генератора презентаций на реальных задачах. Kimi Slides отдаёт редактируемый .pptx, Gamma делает красивые веб-страницы, NotebookLM строит слайды строго по вашим документам без галлюцинаций. Ни один не выдаёт готовый результат для сцены — но черновик за 30 минут вместо 4 часов уже реально. Разбираю плюсы, минусы и рабочий процесс.

Представьте: пользователь открывает ваш продукт, и интерфейс не просто отображает заранее заготовленные экраны — он собирается прямо сейчас, под конкретного человека и его контекст. А продакт не сидит с веревкой и мылом в углу :)

Меня зовут Мария, я продакт менеджер в области ИИ. GenUI появился в моей практике как решение конкретной задачи — и в этой статье я хочу поделиться своим опытом. Эта статья для продактов и UX-дизайнеров, которые слышали про генеративные интерфейсы, но ещё не разобрались: что это такое на самом деле, чем отличается от обычного чат бота и когда это нужно. 

Привет, Хабр! Меня зовут Влада Ларионова, я продуктовый дизайнер в ОТП Бизнес, работаю в трайбе Corporate & SME и отвечаю за продукты для клиентов, ведущих внешнеэкономическую деятельность. В этой статье я расскажу, как мы переосмыслили отображение статусов международных платежей, чтобы пользователям стало понятно, что с их деньгами. Статья будет в особенности полезна всем работающим в В2В - это кейс про ясность и контроль в сложноструктурированных сценариях.

Привет, я Таня — работаю ведущим продуктовым дизайнером опыта покупателя в Ozon. Среди моих продуктов «Избранное», «Вишлисты», мини-апп «Доставки посылок», а в прошлом я дизайнила «Карточку товара». Год назад я ротировалась в команду «Корзины», потому что хотела для себя новых вызовов.

На примере редизайна «Корзины», я хочу показать, как сегодня меняется роль дизайнера в продукте, чем дизайн-стратегия отличается от просто красивого концепта, почему такие изменения невозможно делать в одиночку.

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

Привет! Меня зовут Даниил Замешаев, я frontend-разработчик в компании МойСклад, и в том числе занимаюсь развитием внутреннего UIKIT компании.

В этой статье я расскажу про подход к анализу дизайнерских требований для frontend-разработчиков. На примере реального кейса я хочу поговорить о двух практических вещах:

• как анализировать дизайнерские требования так, чтобы на выходе получать понятные технические требования, пригодные для реализации;

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

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

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

Меня зовут Катя Бурлакина, я старший продуктовый дизайнер в VK Tech и занимаюсь развитием дизайн-системы. В этой статье я не буду рассказывать про весь наш путь, а расскажу про его часть — систему дизайн-токенов. Спойлер: при помощи нее у нас получилось устранить некоторые проблемы, ускорить процесс разработки и даже исключить изобретение велосипеда.