Materieunite

Role

Art Director, Visual Designer, UI Designer, UX Designer

Team

Founders, Designers, Engineers, Copywriters

Deliverables

Art Direction, design system creation, developer handoff and implementation oversight, information architecture.

Year

2023

01 Homepage

Services section

The services section showcases the product categories — Installations, Exhibition Stands, Retail — through inspiring and evocative photography that lets the materials speak for themselves. The image-first card layout was designed to communicate the tactile quality of the products at a glance, while the overlaid labels maintain clarity of navigation.

About Us section

The About Us page was designed around a single, full-width photograph of tangled tree branches — raw, organic, quietly powerful. The image does the heavy lifting emotionally, anchoring the brand’s philosophy of nature and regeneration before the copy even begins. The layout pairs generous white space with a two-column text structure: a bold editorial statement on the left, descriptive body text on the right. This typographic tension gives the page an editorial magazine feeling, reinforcing Materieunite’s positioning as a design-forward, values-driven company.

02 Sustainability page

Bold metrics

A bold data screen presents three core metrics — 100%, 80%, 20% — rendered in oversized type on a light background. The numbers are the design: no charts, no decoration, just raw figures that speak for themselves.

Editorial cards

Editorial cards introduce the brand’s sustainability pillars — lean supply chain and accessible design — pairing product photography with concise, values-driven copy. The warm cream background and deep green typography were chosen to echo natural materials.

03 Project page

A self-contained story

The project page layout was designed to work as a self-contained editorial story. Key metadata — client, location, materials, year — is presented in a clean structured list at the top, giving the reader immediate context before diving into the work. Below, large project photography takes over, letting the physical installations speak at full visual weight.

Project page – Mobile

The mobile version of the project page maintains the same editorial structure as desktop — hero image, title, description, and metadata — compressed into a single, scrollable column. The typographic hierarchy keeps the reading experience fluid and intentional, with project details like client, location, and materials presented as a clean key-value list.

Quote request form

The quote request page makes a bold statement: a full-screen yellow background that breaks entirely from the rest of the site’s palette, signaling a shift in tone from browsing to action. The high-contrast color choice was deliberate — it creates energy and urgency without resorting to generic CTA patterns. The form itself is minimal and approachable, asking only for the essentials.

Projects listing page

The projects listing page was designed to make exploration intuitive and frictionless. A horizontal category filter — Installations, Exhibition Stands, Retail — lets users navigate the portfolio by context, while the total count gives an immediate sense of the breadth of work. Each project card follows a consistent structure: a full-bleed photograph, project title, short description, location, and a clear CTA — just enough information to spark interest without overwhelming. The three-column grid on tablet collapses into a single-column stack on mobile, with the filter condensed into a dropdown to preserve screen real estate. A thoughtful empty-state illustration handles the edge case of no results, keeping the experience polished even in moments the user might not expect.

04 Materials

Texture as storytelling

Two defining moments from the materials section are designed to immerse the user in the physical world of the brand. On the left, a full-bleed photograph of tangled roots and stone fills half the screen, creating an immediate sensory connection with nature before a single word is read — the editorial text on ethical and sustainable design sits beside it, grounded by that visual weight. On the right, the materials catalog presents paperstone, reclaimed marble, and linoleum as a horizontal carousel of close-up texture shots, dark and tactile, almost photographic in their depth. The crop and scale of each image were chosen deliberately to evoke touch, not just sight — making the materiality of the products felt through the screen.

Every material, honestly told

The material detail page was designed to inform without being overwhelming. Each entry opens with a description that goes beyond specs — explaining the origin, the production philosophy, and why that material belongs in a sustainable project. Icon-tagged technical properties (ecological, recyclable, lightweight) give quick scannable facts. Below, an accordion pattern surfaces related materials, keeping the page clean while inviting further exploration. The full-bleed close-up photography running alongside the text keeps the experience grounded in the physical.

05 Design system and Art Direction

The system behind the story

A single board brings together the building blocks of the Materieunite visual identity. The primary typeface, a tight four-color palette, buttons in their three states; sustainability iconography; logo mark and complex components like the navigation drawer and the quote request form all live here as a coherent, documented system. Alongside them, full-bleed photography of roots, cardboard cross-sections, and reclaimed marble anchors every UI element back to the physical world the brand inhabits.

Results

Designed a cohesive visual system from scratch, translating Materieunite’s values of sustainability into a consistent design language
Elevated photography from decoration to a core UX tool—using art direction to drive navigation, storytelling, and emotional connection to the brand’s sustainable materials.
Restructured the information architecture across key sections — materials, projects, sustainability — reducing cognitive load and making it easier for users to explore, understand, and act, whether browsing products or requesting a quote.
Built and documented a complete set of components, tokens, and interaction patterns in Figma, enabling the development team to implement the new interface consistently and allowing the brand to grow its digital presence without losing visual coherence.

All projects