Editorial storefront & web

Maniatic

One piece. A complete story.

In development

Design / Desktop & mobile

The work, on screen.

Current Maniatic storefront preview with editorial photography, desktop view
Current Maniatic storefront preview with editorial photography, mobile view
Malandro product-detail preview with an editorial reference gallery and launch information
Product-detail layout from the current preview. The gallery uses editorial references; final Malandro photography and product information remain in preparation.

01 / The idea

What this needed to solve.

Give the first piece a clear place within the brand’s story, with a direct path from editorial context to product detail.

Preserve the supplied creative direction while making photography, scene navigation and the product hierarchy readable on different screens.

02 / The process

How it took shape.

  1. 01

    Preserve the supplied composition

    Translated the project’s visual direction into a photographic opening and distinct editorial scenes, keeping the brand’s statement ahead of interface decoration.

  2. 02

    Spotlight one piece

    Organized the Shop chapter around Malandro instead of inventing a broad catalogue, giving the first piece a clear route to its own page.

  3. 03

    Connect the product story

    Built the product-detail hierarchy and photographic gallery, distinguishing the editorial references from the final product assets still in preparation.

  4. 04

    Adapt the browsing rhythm

    Implemented responsive compositions and scene navigation so the brand story and product page can be explored on desktop and smaller screens.

The system / Information architecture

From the statement to the piece.

The frontend connects three reading moments: the brand’s world, the first piece and a more focused product view.

ManiaticPurpose → structure → experience

  • Editorial scenes

    Opening image, About and Contact establish the context and voice supplied by the project.

  • Shop

    A focused introduction to Malandro points to the individual piece.

  • Product detail

    The gallery and information hierarchy prepare the product experience without receiving orders or processing payments.

Design and development preview. This case demonstrates the frontend, not an active commerce backend.

Scope / Craft

My contribution.

What I worked on

  • Frontend implementation
  • Responsive interaction design
  • Next.js
  • React
  • TypeScript

Built & designed

  • A four-scene home connecting the opening image, About, Shop and Contact.
  • A product-detail preview with a photographic reference gallery.
  • Responsive frontend implementation and scene navigation across desktop and mobile.
Continuing development

The current website is a review preview. The intended public destination is maniatic.co; final product assets and commerce activation are separate launch stages.

Frontend implementation and responsive interaction by Santiago Quiceno within the project team. Creative direction and brand assets belong to Maniatic. Opening photography is credited in the website to @danielbomb.