Isometric action roguelite

Echoes

Hand-drawn interfaces for a fae world.

OVERVIEW

I designed a hand-drawn, skeuomorphic interface language for Echoes. Memories receive more visual weight than collected items, and ornament stays around the controls rather than competing with them.

MY ROLELead UI/UX designer

Readable interfaces inside an intricate fae world.

MY CONTRIBUTIONS

Inventory, Memories and the selected item’s details in the final interface.

Inventory hierarchy

Separated items, memories and details and gave permanent progression a larger central area.

See the design details ↓

The final settings frame moves ornament outside the control rows.

Settings iteration

Developed settings from a control wireframe through an ornament-heavy draft to a clearer final frame.

See the design details ↓

Full, partial and empty health-state studies.

Selection & health feedback

Used local highlights for journal selection and changing leaf fill/color for health states.

See the design details ↓

01 / INVENTORY & MEMORIES

Memories receive the largest central frame.

The inventory separates collected items at left, memories in the center and details at right. The larger central frame gives lasting progression more visual weight. In the wireframe, the selected object’s illustration and effect stay beside the grid; the final UI keeps that browsing structure within the fae-inspired frame.

Inventory wireframe: inventory, memories and item details occupy three distinct regions.

Final inventory: the central Memories frame is larger than the Inventory frame.

02 / SETTINGS ITERATION

Move dense ornament away from labels and slider handles.

The three settings stages are shown left to right in development order. The wireframe establishes row spacing. In the first visual draft, dense branches crowd the labels and slider controls. The final frame shifts ornament to the perimeter, opens the center and uses brighter handles to mark adjustable values.

01 / Wireframe: set the control rows and spacing.

02 / Visual draft: dense ornament competes with labels and sliders.

03 / Final frame: perimeter ornament and a clearer control area.

03 / JOURNAL BROWSING

The selection stays beside its illustration and description.

The journal puts category switching above the list. A local warm highlight marks the active row, while the object illustration and description stay beside the selection. This gives players a visible browsing position as they change entries. The image here demonstrates selection feedback; health-state feedback is shown separately in the next section.

Journal example: Item 2 is highlighted; the crystal illustration and description remain visible.

04 / HEALTH & VISUAL CUES

Health states change both fill and color.

The health studies below show full, partial and empty leaf shapes. The changing fill supplements the pink glow, so the state is expressed through both shape and color. Cream floral curves and butterfly silhouettes connect the interface frames and icons to the game’s fae world.

Health studies: full, partial and empty versions of the same leaf resource.

The cream butterfly silhouette is a shared decorative motif in the UI language.

PROJECT DETAILS

Role: Lead UI/UX designer
Genre: Action roguelite
Focus: UI hierarchy & feedback
Visual language: Hand-drawn / Fae

View the original portfolio pages2 pages

Open the complete portfolio PDF

← RETURN TO PORTFOLIO

NEXT PROJECTSpace Traveler