A

Artblanc

Web

Redesign of the Artblanc group's showcase site.

Role
Design & build
Category
Web
Core stack
Next.js · Tailwind CSS · TypeScript
01The context

A group whose business and positioning had moved on, with a site stuck at the previous stage. The gap between what the company had become and what the site said had turned into a commercial handicap: prospects arrived with the wrong idea.

02Problem, solution, outcome
The problem

A dated site that no longer reflected the Artblanc group's image or ambitions.

The solution

A full redesign: modernised visual identity, clarified structure, and a fast, responsive, on-brand site.

What it changes

The site describes the group as it is today: clear structure, fast loading, readable on a phone. The address can be handed out in a meeting without hesitation.

03The product, screen by screen
Playable mockup
artblanc.be

Artblanc Group

Previous version

Home › Company › History › 1998Four menu levels for one piece of information
Our trades (7 pages)No hierarchy, no expected action
ContactForm at the bottom of the seventh page

A redesign that only treats appearance solves nothing. We first clarified what the group does, for whom, and what makes it different.

01 / 02 · Before

The starting point: a site describing the company of five years ago. Prospects arrived with the wrong idea. That's the real cost of a dated site.

Interactive mockup rebuilt for this portfolio. The values shown illustrate the interface — they are not production figures.

04The calls I made
01

Fix the message before the look

A redesign that only treats appearance solves nothing. We first clarified what the group does, for whom, and what makes it different.

02

Simplify the structure

Fewer pages, better ordered. Each one has a reason to exist and an action it expects.

03

Performance as an upfront constraint

A showcase site that takes four seconds to appear loses half its mobile visitors. The performance budget was set before anything was drawn.

05The design board
// palette
#94A3B8
#CBD5E1
#64748B
#0A0A0C
#F5F5F7
// type scale
AaDisplay · 600
AaHeading · 550
AaBody · 400
// visual calls
  • 01A near-neutral grey palette, warm by half a degree. An industrial group doesn't need a neon accent to look modern.
  • 02Plenty of breathing room, few borders: hierarchy comes from space rather than from lines.
  • 03One expected action per page, always in the same place. The visitor never has to hunt for the click.
06Why this stack
Next.js
Static generation: a showcase site has no reason to be computed on every visit.
Tailwind CSS
A coherent design system without a stylesheet that swells with every new page.
TypeScript
A site picked up later by someone else is far easier to maintain when it's typed.
Next.jsTailwind CSSTypeScript

Something similar in mind?

Describe your situation. I'll tell you what's realistic,
in what order, and what I'd do differently.

contact@amauryandrade.com