Tous les projets
A

Artblanc

Web

Refonte du site vitrine du groupe Artblanc.

Rôle
Conception & intégration
Catégorie
Web
Stack principale
Next.js · Tailwind CSS · TypeScript
01Le contexte

Un groupe dont l'activité et le positionnement avaient évolué, avec un site resté au stade précédent. L'écart entre ce que l'entreprise était devenue et ce que le site racontait était devenu un handicap commercial : les prospects arrivaient avec une idée fausse.

02Le problème et la réponse
Le problème

Un site daté qui ne reflétait plus l'image ni les ambitions du groupe Artblanc.

La solution

Une refonte complète : identité visuelle modernisée, structure clarifiée et site rapide, responsive et fidèle à la marque.

03Le produit, écran par écran
Maquette jouable
artblanc.be

Groupe Artblanc

Version précédente

Accueil › Société › Historique › 1998Quatre niveaux de menu pour une information
Nos métiers (7 pages)Aucune hiérarchie, aucune action attendue
ContactFormulaire en bas de la septième page

Une refonte qui ne traite que l'apparence ne règle rien. On a d'abord clarifié ce que le groupe fait, pour qui, et en quoi c'est différent.

01 / 02 · Avant

Le point de départ : un site qui racontait l'entreprise d'il y a cinq ans. Le prospect arrivait avec une idée fausse. C'est ça, le coût réel d'un site daté.

Maquette interactive reconstituée pour ce portfolio. Les valeurs affichées illustrent l'interface — ce ne sont pas des chiffres de production.

04Les partis pris
01

Repartir du discours avant du visuel

Une refonte qui ne traite que l'apparence ne règle rien. On a d'abord clarifié ce que le groupe fait, pour qui, et en quoi c'est différent.

02

Simplifier l'arborescence

Moins de pages, mieux hiérarchisées. Chaque page a une raison d'exister et une action attendue.

03

La performance comme contrainte de départ

Un site vitrine qui met quatre secondes à s'afficher perd la moitié de ses visiteurs mobiles. Le budget de performance a été fixé avant de dessiner.

05La planche de design
// palette
#94A3B8
#CBD5E1
#64748B
#0A0A0C
#F5F5F7
// échelle typographique
AaDisplay · 600
AaTitre · 550
AaCorps · 400
// partis pris visuels
  • 01Une palette de gris quasi neutres, chaude d'un demi-degré. Un groupe industriel n'a pas besoin d'un accent fluo pour être moderne.
  • 02Beaucoup de blanc tournant, peu de bordures : la hiérarchie passe par l'espace plutôt que par des traits.
  • 03Une seule action attendue par page, toujours au même endroit. Le visiteur n'a jamais à chercher où cliquer.
06Pourquoi cette stack
Next.js
Génération statique : un site vitrine n'a aucune raison d'être calculé à chaque visite.
Tailwind CSS
Un système de design cohérent sans feuille de style qui gonfle au fil des pages.
TypeScript
Un site repris plus tard, par quelqu'un d'autre, se maintient beaucoup mieux typé.
Next.jsTailwind CSSTypeScript

Un projet du même genre ?

Décrivez-moi votre situation. Je vous dis ce qui est réaliste,
dans quel ordre, et ce que je ferais différemment.

amauryandrade1998@gmail.com