Metrica

Context

Metrica is an e-commerce art gallery showcasing abstract artwork.

Goal

Design a bold digital gallery that merges raw, textured aesthetics with modern e-commerce usability.

My Role

Designer & Developer. Full creative direction, branding, design, and build.

Strategy

• Build an online platform to showcase and sell original artwork.
• Create a distinct visual identity that communicates both rawness and refined beauty.
• Implement a streamlined e-commerce flow without compromising on design integrity.

Target Audience

• Art enthusiasts, collectors, and design-minded individuals who value bold, modern aesthetics.

Requirements

• Flexible CMS for content management (Sanity).
• Snipcart integration for e-commerce.
• Responsive design prioritising bold visuals on both desktop and mobile.
• Editorial, Swiss-inspired layout to stand apart from conventional online galleries.

Logo

I wanted the logo to be a reflection of the artwork. I used layered abstract artwork with rough concrete textures and vibrant colours.

Colour Palette

Primary

Secondary

Typography

Inspiration

• Swiss editorial layouts
• Raw textures: concrete, stone, industrial surfaces
• Bold colour accents layered over muted backgrounds

Wireframes

Began with wireframes mapping out product showcase, cart flow, and editorial storytelling.

Hierarchy & Layout

Grid-based layouts ensured balance while allowing for bold asymmetry.

Design Decisions

• Minimal use of colour to let artworks dominate the visual narrative.
• Integrated images into storytelling flow to bridge art with commerce.

Accessibility

• Strong contrast ratios for readability.
• Scalable typography for flexible viewing.

Tech Stack

• Next.js (App Router)
• Sanity CMS
• Snipcart
• Tailwind CSS

Features Built

• Sanity CMS-driven artwork catalogue with product pages.
• Snipcart cart integration with custom UI styling.
• Modular section components for scalability.

Challenges Solved

• Structured Sanity schema for artworks (title, medium, size, price, images).
• Created consistent spacing system to maintain Swiss-style balance across devices.

Description

Metrica delivers an immersive online gallery experience that merges editorial layouts with functional e-commerce. Desktop and mobile layouts maintain a bold, structured look. Product pages treat artworks as showcases first and sales items second. A subtle yet effective cart and checkout flow keeps the design front and centre.

Live Site

View Live Site

Screenshots

What I Learned

Developed skill in merging visual identity with functional e-commerce. Mastered Snipcart integration and Sanity schema design. Refined use of Swiss design principles in a commercial context.

What I’d Improve

Explore alternative e-commerce frameworks (e.g. Shopify Hydrogen) for scalability. Add more interactive storytelling (video or behind-the-scenes content about artworks). Optimise for SEO with more editorial content (blog, artist statements).

Value

Metrica is more than an e-commerce site: it became a digital gallery where design and commerce meet. It was valuable in strengthening both my design language and my technical e-commerce development skills.