Дизайн

Привет друзья! Меня зовут Тима, я дизайнер в дизайн-системе Альфа-Бизнес.  Когда в крупном финтех-продукте заходит речь об обновлении иконок, со стороны это кажется легкой творческой задачей на пару недель: сел, порисовал в Figma, выгрузил — готово. Но в реальности бигтеха любая попытка просто «освежить визуал» моментально сталкивается с суровой инфраструктурой, сотнями легаси-компонентов и хаосом, который годами копился в коде и макетах.

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

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

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

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

Я работаю ведущим продуктовым дизайнером в Купибилете и управляю дизайн-командой. Регулярно рассматриваю резюме, портфолио, провожу собеседования и участвую в найме дизайнеров уровня middle и senior.

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

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

Есть такая городская байка: если угадать правильную скорость, то можно проехать десяток светофоров подряд и ни разу не остановиться, поймав «зелёную волну». Водители из разных городов охотятся за этим ощущением десятилетиями. А мы взяли щепотку данных, немного технологической магии, дизайна и превратили эту байку в работающую фичу в навигаторе 2ГИС. 

Меня зовут Даня. Я продуктовый дизайнер команды Транспорт и сейчас расскажу, как мы собирали зелёную волну: от первого скетча до запуска.

Мы ищем классных коллег в команду UX-исследователей, поэтому внутри статьи есть ссылки на вакансии 🔥. Чтобы познакомиться, рассказываем, как у нас устроена работа ресёчера, чем работа в продукте отличается от UX-лаборатории и почему к нам стоит прийти.

Наш Neko выиграл Red Dot Design Award. Это Оскар в мире промышленного дизайна. Его получали Apple, Porsche, Dyson и т.д.

Ещё в процессе разработки, когда мы сами поняли, что именно за гаджет делаем — зачем он, какие у него функции, как выглядит, etc. 

В тот момент решили подать заявку на конкурс Red Dot — что, конечно, очень амбициозно для такой небольшой команды, как мы.

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

Генерация через нейросети решает сразу несколько задач:

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

Смотреть на это спокойно я не мог — и не из брезгливости. Я видел, сколько это стоит. Нарисовал флоу 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

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