Дизайн

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

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

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

Кажется, что в ИИ чатах интерфейс довольно вторичен: ты пишешь, модель тебе отвечает, особо больше ничего и не надо (если модель отвечает хорошо). Но интерфейс очень влияет на то, насколько правильное решение вы примете, и насколько легко будет найти ошибку модели. Я собрала несколько научных исследований, которые могут пригодится тем, кто делает ИИ фичи в своих продуктах.

Всем привет! Это моя первая статья на Хабре. Я постарался максимально понятно изложить проблематику получения HDR изображений на современных мониторах и операционных системах.

Давайте сразу проясним, что подразумевается под HDR фото, а что нет. В начале двухтысячных было модное занятие сначала фоткать высококонтрастный объект с разными экспозициями, проводить так называемый  брекетинг экспозиции, а затем с помощью софта склеивать все в одно изображение. Изначальный огромный перепад яркостей сужался до обычного JPG и демонстрировался как достижение. Да, достижение было в виде сохранённых деталей в светах и тенях, но минимальный  и, что самое важное, максимальный уровень яркости был далек от натуры. К тому же неизбежным следствием являлось падение общего контраста. Так вот, это не HDR. Это, назовем его, прокрустово ложе, куда надо впихнуть невпихуемое, и на выходе получить псевдо-HDR. Данная статья просвещена получению настоящего HDR, где узость диапазона уже не мешает делать высококонтрастные снимки. И не только делать, но и увидеть.

Разработали promo-проект ALIKOR PREMIUM, который объединит премиальные коллекции бренда в одном цифровом пространстве.

Итак, сколько же нужно времени, веб-дизайнеров и нейронок чтобы разработать целую коллекцию дизайнерских принтов? Как оказалось на практике, достаточно одного дизайнера интерфейсов, 2-3 нейронки, немного магии фотошопа и около 2 часов на один принт.

Делимся рабочим рецептом, который состоит из 4 этапов.

Как начать получать удовольствие и сократить количество правок

Что я испытывал раньше при получении правок:

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

Это привело к тому, что появился страх ошибиться и получить любую будущую обратную связь.

В первой части я и коллеги из Сбера, Яндекса, VK, AvitoTech, ВТБ и 2ГИС рассказывали, какими нейросетями пользуются каждый день и как это упрощает их работу. Но есть и обратная сторона. В продолжении мы поделимся тем, какие задачи принципиально делаем только руками и какой громкий хайп вокруг нейросетей оказался переоценённым.

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

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

На маркетплейсе покупатель сначала видит картинку и только потом — цену, бренд и отзывы. Главное фото в выдаче решает, кликнут по вам или пролистнут к соседу, поэтому слабый визуал означает слитый трафик и низкий CTR. Долгое время выход был один: платить дизайнеру и ждать правки по два-три дня. Сегодня собрать карточку товара для Озон онлайн бесплатно можно самому за пару минут — и в этом гайде мы покажем весь путь по шагам, на реальном товаре и без приукрашиваний.

Работать будем в ERA2 Card — это часть экосистемы ERA2, нейросеть, которая из обычной фотографии готовит визуал под требования маркетплейсов. Чтобы было честно, мы взяли не студийный кадр, а снимок со смартфона прямо с домашнего стола и прогнали его через сервис на ваших глазах.

Смотрите на рекламные ролики, сгенерированные с помощью нейросети, и не понимаете, почему у вас получается совершенно другой результат? Ответ прост — ИИ не заменяет мышление, он экономит время, выступает в качестве исполнителя, но вы руководите процессом.

Соответственно, результат зависит от нескольких аспектов. Расскажем в этой статье!

Я написал статью на Хабре и опубликовал в открытый доступ свою дизайн-систему. Многие сказали, что было бы круто получить ещё и инструкцию к ней. Вот я и решил написать статью о том, как вообще пользоваться дизайн-системами или UI-китами.

Также, в статье есть небольшой запрос на обратную связь от читателей

Привет! Я Коля Димов, руковожу дизайном и исследованиями продукта в Делимобиле.

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

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

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

sddg.delimobil.design

Несколько лет, я экспериментирую с генераторами картинок. Меня интересует один вопрос: можно ли из нейронок получить приемлемые концепт-дизайны сайтов,приложений, интерфейсов? Не с точки зрения кода, а хотя бы лэйаутов, цветовых схем и баланса текста/графики.

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

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

Как показывает практика, большинство пользователей допускают две ключевые ошибки при попытке оживить фото: во‑первых используют плохой референс, а во‑вторых не ту нейросеть (Grok, VEO, Sora, RunWay и другие ии, которые не могут работать со статичными кадрами).

По большому счету, сегодня только Luma может сохранять кадр, не «ломая лица», а если надо добавить озвучку, то HeyGen или Hedra. И обе модели недоступны для нашей локации без смены IP, но есть варианты!

Как сделать интернет-магазин мебели удобным для покупателя? В этой статье собрал 10 мебельных eCommerce-проектов с сильным UX и удачными решениями по юзабилити. Разобрал, как бренды выстраивают навигацию, оформляют каталог, помогают выбирать товары и упрощают путь до покупки.

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

Привет, Хабр! На связи Андрей, продуктовый дизайнер Garage Eight.

Май выдался очень насыщенным: тут вам и агенты в фигме, и Google I/O, и MCP от Mobbin, и финалисты Apple Design Awards, и сразу два очень красивых кейса от Pentagram. А еще — эстетичные библиотеки, почтовые приложения, энергетик в виде полена и, конечно, мои дорогие Panic.

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

В этой статье мы расскажем, как на нашем заводе «ЭЛЕКТРОконнект» делали первые гибко-жёсткие платы, с какими трудностями столкнулись и как в итоге научились их выпускать на серийном уровне.

Привет! Меня зовут Ксюша, я продуктовый дизайнер в MAGNIT TECH, и уже больше года работаю над карьерными сайтами. Я присоединилась к продуктовой команде, в которой были продакт-менеджер, продуктовый аналитик, исследователь и разработчики, но не хватало меня –  дизайнера :)

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

Сергей Тищенко, аналитик студии визуализации данных AkademiaDev, рассказывает, как данные перестали быть сугубо аналитическим инструментом и превратились в полноценный язык, на котором сегодня говорят медиа, бизнес, цифровые сервисы и дизайнеры: от доступного визуального сторителлинга в Flourish и Datawrapper до повседневной работы с данными в Superset, Metabase, Power BI и DataLens. Почему данные давно вышли за пределы таблиц и отчетов, как визуализация помогает превращать сложные массивы информации в понятные истории.