Icons8 · desktop

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

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

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

Обзор

Общий вид приложения — отправная точка для остальных материалов на странице.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сетка удобна для сравнения шага к шагу; для деталей клик по ячейке открывает полноэкранный просмотр.

Слайдер: версии v1–v18 и кадр 14

Порядок по именам: slider_v1 … slider_v13, затем slider_14 (в ассете без суффикса v), затем slider_v15 … slider_v18.

Такой ряд полезен при разборе эволюции контрола: от ранних раскладок до финальных состояний.

Слайдеры: общий кадр

Сводный экран по слайдерам — после ряда по версиям.

Завершает блок про слайдеры: контекст, как несколько контролов сосуществуют на одном экране.