Brand identity / product visualization / interactive website

nuumi

A lighting brand with a product story controlled by scrolling

Visit website

I created a fictional lighting company, its visual identity and a working website around one sculptural lamp

YEAR
2026
ROLE
Brand direction, product visualization, web design and development
FORMAT
Independent design concept
STATUS
Working concept website
nuumi homepage with a glowing ring lamp and the line Make room for softer light
01Concept

Build a lighting company around one recognizable object

nuumi is an independent brand and website concept for a fictional premium lighting company. The brief was to create a complete customer experience: a name, identity, product direction and working shop demonstration.

Loop, the flagship lamp, gives the project its visual language. Its continuous ring diffuser, slender support and rounded base connect the identity, product imagery and motion. The campaign line, “Make room for softer light,” puts the atmosphere before the specifications.

nuumi identity board with its thin rounded wordmark, compact symbol and Chalk, Graphite and Persimmon colours
A custom vector wordmark and compact symbol, paired with a restrained palette and Manrope typography.
02Identity

Soft curves, thin strokes and a precise rhythm

The lowercase wordmark feels slightly inflated without becoming heavy. Rounded terminals, open counters and the repeated u shapes echo the lamp’s diffuser. The letters and their spacing are constructed as vector paths, with light, dark and small-size variants.

Warm chalk and near-black establish the foundation. Brushed aluminum brings precision, while the Persimmon finish provides a considered accent. The same palette carries through the renders, interface and product selector.

03Interaction

Scrolling becomes the playhead of a product film

DECISION 01

One coherent object

A shared Three.js lamp model drives the product reveal, assembly view and finish selector.

The geometry stays consistent as the visitor changes direction, stops or jumps within the story.

DECISION 02

Motion with a purpose

The sequence moves from a dark opening into a bright object study, then reveals the proposed construction.

Camera framing, scale and rotation explain the object. The scroll position determines the composition.

DECISION 03

Keep the visitor in control

Native scrolling, a skip link and a reduced-motion option sit beside directly accessible product information.

The cinematic introduction adds to the experience while the essential content and shopping controls remain available.

nuumi construction scene with the Loop lamp separated into a ring diffuser, internal assembly, support and base
The scroll-controlled construction study uses a deterministic 3D scene. It illustrates a design proposal, not verified engineering.
04Website

The product story resolves into a usable shop

The finish selector changes the lamp and the shopping configuration together. Visitors can choose Chalk, Graphite or Persimmon, add the selection to a demonstration cart, change quantities, remove items and review the total.

A dedicated product page, company approach, FAQ and inquiry form complete the experience. Checkout is clearly a demonstration and collects no payment information. The inquiry form validates entries and explains that its acknowledgement is a demo.

Loop product section showing the Persimmon lamp, finish selection, product details and an Add to bag action
The finished product page combines interactive visualization with ordinary, accessible shopping controls.
05Result

A complete brand concept, built to explore

WORKING CONCEPT WEBSITE

The project brings brand design, product visualization, motion and frontend development into one working experience. The website includes responsive compositions, a static reduced-motion presentation and a functioning demonstration cart.

nuumi and Loop are fictional. Product specifications and pricing are design proposals; no physical product, customer research or commercial performance is implied. The hero and interior imagery use AI-assisted art direction, while the animated product geometry and vector identity are controlled in code.