Orange DAM

Orange DAM — это корпоративная платформа для управления цифровыми материалами: изображениями, видео, документами и другими файлами.

Продукт помогает крупным компаниям организовывать контент, быстро находить нужные файлы и публиковать. Среди клиентов платформы — Google, Bank of America, Blizzard, Apple, AMD и Instacart.

Я работал над интерфейсами Orange DAM с 2024 по 2026 год как UX/UI-дизайнер, а позже взял на себя дизайн продукта Site Builder — инструмента для создания брендированных порталов.

Процесс работы:

Site Builder

DAM — это Digital Asset Management. Сложная платформа для больших корпораций, работающая как библиотека файлов. В ней компании хранят изображения, видео, документы, презентации и другие цифровые ассеты.

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

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

Для этого и был задуман Site Builder — продукт экосистемы Orange DAM, который позволяет создавать брендированные порталы прямо из файловой библиотеки. Клиент выбирает шаблон или создает страницы при помощи удобного конструктора, добавляет текст, блоки и медиафайлы из библиотеки, настраивает доступы и запускает сайт, не написав ни строчки кода.

Site Builder похож на конструкторы сайтов вроде Wix или Webflow только внешне. Разница в том, он тесно связан с библиотекой файлов. Пользователь не загружает файлы заново и не следит вручную за версиями. Он просто берет нужные материалы из гигантской библиотеки, собирает из них портал и публикует его. Если файлы, права доступа или коллекции меняются в библиотеке, портал автоматически их обновляет.

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

Каждый блок редактируется прямо на странице. При наведении появляется панель управления: блок можно переместить, настроить, скопировать или удалить. Если открыть настройки, появляется отдельное окно с параметрами конкретного блока.

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

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

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

Помимо простых блоков, таких как картинка, кнопка или текст, Site Builder поддерживает вложенные блоки.

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

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

Чтобы подняться на уровень выше, можно нажать Escape. Вложенные блоки получили также подсветку границ разным уровнем яркости.

Колонки в Site Builder — самый сложный блок. Они работают почти как flex grid в CSS. Пользователь может управлять минимальной и максимальной шириной ячеек, отступами и поведением при нехватке места. Вся гибкость достигается без необходимости писать разметку или код.

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

Отдельно продумано поведение при переполнении. Если контент не помещается, блок может либо переносить ячейки на новую строку, либо оставлять их в одну линию и включать прокрутку.

Для каждого блока в Site Builder продуманы настройки и поведение. Каждый блок решал свою задачу и сильно отличался от всех других, поэтому для них нельзя было сделать универсальный набор настроек.

Первой задачей стало создание отдельной части дизайн-системы для проектирования сложных форм.

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

Для Site Builder была предложена другая структура: лейблы располагаются слева, а поля — справа. Это классический подход для интерфейсов с большим числом параметров, созданный Apple еще на заре развития дизайна интерфейсов. Он позволяет эффективно использовать пространство на экране и быстрее находить нужную опцию.

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

Site Builder поддерживает адаптивную верстку.

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

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

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

Служебные надписи переводятся отдельно — во вкладке Translate в настройках блока. Туда попадают вещи вроде текста кнопки, плейсхолдера в поисковом поле и другие системные надписи.

Еще можно скрывать отдельные блоки или целые страницы в конкретной языковой версии. Например, если какой-то раздел нужен только для американского рынка, но не нужен для европейского — его можно скрыть для выбранного языка.

Рабочие пространства

Другая часть проделанной работы — переработка интерфейса файлового менеджера и внедрение рабочих пространств.

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

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

Раньше десятки экранов вроде этого назывались Workspaces, но, вопреки названию, представляли собой обычные страницы.

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

Workspaces были переосмыслены как страницы (Pages), а над ними появился новый уровень — пространства (Spaces). Теперь страницы собираются в группы согласно своему назначению: одно пространство — для файлов, другое — для видеопроектов, третье — для сайта, и так далее.

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

Внутри пространства могут быть страницы двух типов: стандартные и кастомные.

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

Кастомные страницы — это страницы сайта. Поскольку они строятся при помощи Site Builder, у них меньше системных настроек.

Дизайн-система

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

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

Для кнопок была составлена полноценная матрица компонента, которая описывает все основные варианты: обычная кнопка, кнопка с иконкой слева или справа, кнопка без надписи. Компонент выполнен в разных размерах и нескольких визуальных типов — primary, secondary, outline и destructive.

Отдельно были проработаны состояния: default, hover, active, disabled, loading и focus. Это помогло убрать разнобой, который был в старой системе.

Чекбоксы и радиокнопки тоже пришлось привести в порядок. В старой системе они выглядели как набор похожих, но не до конца связанных элементов, поэтому для них была собрана нормальная матрица: default, hover, pressed, disabled, focus и error.

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

Для DAM это наиболее важный компонент. Дерево должно быть не просто списком папок, а полноценной навигацией: показывать вложенность, активный элемент, раскрытые и закрытые состояния, hover, disabled, focus, выбранную папку и разные уровни глубины.

Для компонента Tree view тоже была собрана матрица состояний. Нужно было продумать отступы для разных уровней, поведение стрелок раскрытия, иконки папок, подсветку выбранного элемента и множество других деталей.

Отдельно была собрана система полей для форм. В системе много диалогов с настройками, где на одном экране нужно управлять десятками параметров.

Для задачи была задействована горизонтальная раскладка: надпись слева, поле справа. Это помогло не растягивать форму вниз, как в Material Design, что увеличило эффективность использования экрана и повысило скорость поиска нужной опции.

Такой подход особенно хорошо сработал в Site Builder и пространствах, где почти каждый блок или страница имели собственное окно настроек.

Прочие мелочи

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

Для каждого блока были описаны фокусные состояния, порядок табуляции, aria-поля и aria-роли. Страницы соответствуют требованиям WCAG 2.1 и европейского стандарта EN 301 549. Разработчикам был передан псевдо-код для каждого блока.

Для вложенных компонентов был продуман порядок табуляции.

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

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

Наконец, для Site Builder был собран набор персон. Это помогло точнее понять, что продуктом пользуется не один абстрактный “редактор сайта”, а несколько разных ролей: бренд-лид, дизайнер, контент-менеджер и технический архитектор.

У каждой роли были определены цели и боли. Например: бренд-команда хочет сохранить визуальную консистентность, дизайнер — контролировать шаблоны и стиль, контент-менеджер — быстро обновлять страницы без риска всё сломать, а архитектор — быть уверенным, что Site Builder не нарушает права доступа, CDN-логику и архитектуру DAM.

Эти персоны помогали проверять решения: достаточно ли гибкости для редактора, контроля для дизайнера и безопасности для enterprise-продукта.