Icons8 · desktop

Lunacy Graphic Editor

Work on the Lunacy interface as part of the Icons8 team: user flow, prototypes of complex scenarios, refinement of functionality and visual logic. Below are screenshots from the process (the order of the screenshots is based on the filenames).

Product: icons8.com/lunacy

Overview

General view of the application—the workspace with an open document, toolbars, and the canvas. This screen demonstrates Lunacy’s basic layout: the left panel shows layers, the right panel shows object properties, and the top bar displays the context bar with the current tool. This serves as the starting point for the rest of the materials on the page.

Next are individual scenarios and interface iterations, presented in the order that makes the most sense in terms of context and file names.

Blob: Settings on the Canvas

Working with a blob in the context of the canvas is a separate scenario, prior to the analysis of the panel across versions.

The settings panel for these tasks evolved through a series of mockups from v1 to v9—they’re compiled in the grid below.

Components and Comparison

Comparison of components and the update indicator in the panel.

Two related screens: searching for discrepancies and displaying update status next to the panel navigation.

Prototype in the Panel

Creating a prototype on the canvas and panel states for prototype mode.

Both screenshots show how the prototype is linked to the canvas and to a set of dashboard states.

Shadow Pro: Settings

Shadow Pro block: panel, ideas, modals with auto-open and auto-close.

Four consecutive frames show the development of a single subproject: from the panel and sketches to refining the behavior in modals.

Blob settings panel: versions v1–v9

Panel iterations by filename blob_settings_panel_v1 … v9. Grid based on text width, three columns on a wide screen; as the window narrows, the number of columns decreases automatically.

The grid is convenient for step-by-step comparisons; for details, clicking on a cell opens a full-screen view.

Slider: versions v1–v18 and frame 14

Ordered by name: slider_v1 … slider_v13, then slider_14 (in the asset without a suffix v), then slider_v15 … slider_v18.

This sequence is useful for analyzing the evolution of the control: from early layouts to final states.

Sliders: general frame

A summary screen for sliders—following the version series.

This concludes the section on sliders: context—how multiple controls coexist on a single screen.