Icons8 · desktop

Графический редактор Lunacy

Работа над интерфейсом Lunacy в команде Icons8: user flow, прототипы сложных сценариев, доработка функциональности и визуальной логики. Ниже — фрагменты экранов из процесса (порядок кадров ориентирован на имена файлов).

Продукт: icons8.com/lunacy

Обзор

Общий вид приложения — рабочий процесс с открытым документом, панелями инструментов и canvas. Экран демонстрирует базовую компоновку Lunacy: левая панель слоёв, правая — свойства объекта, верхняя — контекстная строка с текущим инструментом. Отправная точка для остальных материалов на странице.

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

Blob: настройки на холсте

Работа с blob в контексте холста — отдельный сценарий до разборов панели по версиям.

Настройки blob на холсте — `blob_settings_on_canvas`

Панель настроек для тех же задач развивалась серией макетов v1–v9 — они собраны в сетку ниже.

Компоненты и сравнение

Сравнение компонентов и индикатор обновлений в панели.

Модальное окно сравнения компонентов — `compare_components_modal_window`

Индикатор обновления компонентов в панели — `components_update_indicator_location_panel`

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

Прототип в панели

Создание прототипа на холсте и состояния панели для режима прототипа.

Модальное окно: создать прототип на холсте — `modal_window_for_prototype_create_on_canvas`

Модальное окно: состояния панели прототипа — `modal_window_for_prototype_panel_states`

Оба кадра — про увязку прототипа с холстом и с набором состояний панели.

Shadow Pro: настройки

Блок Shadow Pro: панель, идеи, модалки с авто-включением и выключением.

Shadow Pro: панель настроек — `shadow_pro_settings_panel`

Shadow Pro: идеи — `shadow_pro_settings_ideas`

Shadow Pro: модалка, авто включено — `shadow_pro_settings_modal_auto_on`

Shadow Pro: модалка, авто выключено — `shadow_pro_settings_modal_auto-off`

Четыре кадра подряд показывают развитие одного подпроекта: от панели и набросков к уточнению поведения в модалках.

Панель настроек blob: версии v1–v9

Итерации панели по именам файлов blob_settings_panel_v1 … v9. Сетка на ширине текста, три колонки на широком экране; при сужении окна число колонок уменьшается автоматически.