Дизайн

Всем привет!
Меня зовут Катя Громова. Я работаю руководителем продуктового дизайна в Ozon Travel.

Сложно коротко рассказать о своём опыте — за что я только не отвечала в Travel. Мои основные обязанности — формирование единого визуала продукта и развитие продуктовой команды. Одним словом, делаю всё, чтобы пользователь возвращался к нам.

В этой статье я отвечу на следующие вопросы. Возможно ли вырасти от стажёра до руководителя в одной компании? Как сделать так, чтобы бизнес считался с дизайном? Что должен делать руководитель дизайн-команды? Или это всё простые истины, и вы уже заряжены на успех и готовы закрыть эту статью? Нет? Значит, пристегните ремни — и поехали!

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

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

Привет, Хабр! Это Андрей, продуктовый дизайнер Garage Eight, и мой традиционный дизайн-дайджест под конец уходящего месяца. 

В этот раз у нас 8 новостей:
1. Config 2025
2. Дизайн к 50-летию Microsoft
3. Expressive — обновление дизайн-системы Material Design от Google
4. Обновленное мобильное приложение Airbnb
5. Масштабное обновление брендинга корпорации Amazon
6. Новый значок Гугла
7. Дизайн-студия того самого Джонни Айва
8. Codex — продвинутый ассистент для написания кода от OpenAI

Как выйти на международный рынок в 2025 году и начать зарабатывать в валюте.

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

Меня зовут Артём Говердовский, я дизайн-директор Домклик Сбера. Год назад я выпустил статью «Шаг за шагом: как добиться синхронности в дизайн-команде за 9 месяцев», где описал структуру нашего отдела, ключевые направления работы и процессы, которые мы выстроили. С тех пор команда и доверие к нам только растут, а значит, пора двигаться дальше. Сейчас мы фокусируемся на стратегических задачах: прокачиваем не только дизайн, но и влияние на продукт в целом. В этой статье подведём итоги 2024 года, расскажем о новых целях и планах, а также о ключевых инициативах, которые мы запускаем. Среди них:

Стратегические задачи дизайна: как сделать вклад дизайна в бизнес измеримым и системным, внедряя delivery-driven подход и ускоряя циклы обновлений.

Влияние на продукт: через анализ метрик дизайн-системы и единый Look & Feel продукта во всех точках контакта с пользователем.

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

Макеты — важный дидактический материал для обучения. Однако их создание до сих пор никак не оптимизировано. В данной статье мы интегрируем технологию 3д-печати в учебные заведения.

Привет, меня зовут Федоров Кирилл, я менеджер продукта компании Forecast NOW!. Мы делаем систему для прогнозирования спроса, автозаказа и управления запасами. В конце прошлого года мы выпустили новую версию с обновленным интерфейсом. В статье расскажу о том, почему решили менять интерфейс, как тестировали новые наработки и с какими сложностями столкнулись в процессе. 

Привет, Хабр! Я Оксана Артемьева, UX/UI дизайнер. Недавно наткнулась в литературе на термин «эффект обманутого ожидания» — средство усиления выразительности текста, основанное на нарушении предположений, ожиданий и предчувствий читателя. Это то, что усиливает текст, делает его лучше, хотя сам термин звучит максимально негативно.

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

Негативный эффект обманутого ожидания в UX/UI дизайне

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

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

Дизайн-ревью —достаточно важная вещь, которая требует внимания, когда фронтенд-разработчик сверстал новую фичу, блок или целую страницу. Вовсе не для pixel perfect, который «как задизайнили, так и сверстали» — пиксель в пиксель. Pixel perfect в десктопе — это чушь, потому что нельзя сверстать так, чтобы с разных браузеров (привет, Safari) и разрешений всё смотрелось идеально. Но ошибки, которые сразу бросаются в глаза, сразу подмечаю, структурирую и обсуждаю это с разработчиком, может, появились какие-либо ограничения и прочее. Поэтому никогда не жалею время на дизайн-ревью и через DevTools сам проверяю то, что сверстал разработчик.

Все инструменты и функциональность, о которых пойдёт речь в этой статье, можно найти в браузере в «Инструментах разработчика» (клавиша F12 / Ctrl + Shift + I (на Windows) или ⌘ + ⌥ + I (на Mac), или клик правой кнопкой мыши в любом месте страницы -> Выбор пункта меню — «Просмотр кода страницы» (или «Исходный код страницы») — это и есть DevTools).

Основной элемент для работы с девтулзами — «Инспектор» (Ctrl + Shift +C на Windows и ⌥+⌘+I на MacOS) — это инструмент поиска элементов на странице браузера.

Привет всем! Меня зовут Артур Арсёнов, я Product Design Lead в Garage Eight. За свою карьеру я успел и побыть владельцем лаборатории, внутри которой было собственное мини-агентство, и в корпорациях поработать. И сегодня уже знаю: каждый из этих форматов задаёт не только стиль работы, но и разную степень вовлечённости в контекст клиента. Это влияет на то, какие задачи вы решаете, как быстро растёте и что в итоге отдаёте пользователю.

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

Разобрали приложения крупных фэшн-ритейлеров. Рассказали, как ЦУМ, ТВОЕ, Shein и Farfetch убивают UX и что они делают реально круто.

Сегодня мы представляем Figma Make — новую функцию «prompt‑to‑code», которая поможет вам быстро исследовать, итерировать и дорабатывать — будь то создание прототипов высокой точности или углубление в детали проектирования и кода.

Меня AI не пугает. Серьёзно. Пока кто-то паниковал и пересматривал «Her», я просто ковырялся в GPT и думал: «А как бы тебя пристрастить к написанию документации на меня?» Любопытство — штука коварная. Оно сначала просто задаёт вопросы, а потом вдруг выясняется, что ты уже все время работаете в паре с нейросетью. Ну и неплохо, надо сказать, работаете.

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

И вот я снова о концептах и способах их делать. Так, по-честному, мне нравится рефлексировать на эту тему, потому что за 4 года работы, обсуждая с коллегами разные подходы, и осваивая собственные, вроде выходит структурировать нечто годное.

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

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

Привет, Хабр. Я Илья Сластен, продуктовый дизайнер интерактивной карты ПГК Диджитал. Ранее в своих статьях я рассказывал о ключевых аспектах работы с локальными переменными в Figma и подход Atomic Design и о минимализме в дизайне. Сегодня поговорим о нейминге.

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

В этой статье я покажу, как на практике организовать токены и Figma-библиотеки так, чтобы масштабирование не превращалось в хаос. Мы разберём уровни абстракции токенов, способы нейминга, таксономию и подход к построению библиотек на 4-х уровнях:

Логотип компании Atari — это один из самых узнаваемых символов в мире видеоигр. Использование простых геометрических форм и чистых линий было важным аспектом дизайна. Это сделало логотип легко узнаваемым на экранах маленького размера, что было актуально для аркадных автоматов того времени. Рассказываем в нашей статье историю его создания. И при чем здесь гора Фудзи.

Работа в рамках "Известные неизвестные" помогает нащупать новые зоны роста, выстроить карту развития, понять, чего тебе действительно не хватает, чтобы сдвинуться с мёртвой точки в продуктовой задаче.

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

Привет, это Анна Васичко, методист Академии PIX. В марте мы выпустили новый урок в рамках PIX Триатлона, где вместе с моей коллегой, Анной Климковой, разобрали, как устроены визуализации на дашбордах и какие есть лучшие практики визуализации данных. В этой статье хочу чуть глубже копнуть в принципы UI/UX при разработке дашбордов и разобрать, какие случайные (или не очень) манипуляции в графиках могут привести вас на темную сторону.  

Таблица для цеха отличается от обычной таблицы. Очень сильно:

— «Модные» тонкие шрифты — сразу на свалку. Числа должны читаться даже в маске сварщика.

— Освещение в цехах адаптировано под специфику задач— почти всегда нужна ночная тема.

— Минимум цветов, новый цвет — только привлечь внимание к реально критичной вещи.

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

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

Cтандартные подходы не всегда решали эти задачи.

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