Icons8 · desktop

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

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

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

Обзор

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

Обзор приложения Lunacy
Обзор окна 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_v1v9. Сетка на ширине текста, три колонки на широком экране; при сужении окна число колонок уменьшается автоматически.

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

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

Порядок по именам: slider_v1slider_v13, затем slider_14 (в ассете без суффикса v), затем slider_v15slider_v18.

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

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

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

Все слайдеры: общий вид
sliders_all_set

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

Портфолио

Контакты