IADesign
Horeca & IA · 2026
Un assistant IA raconté de bout en bout : scénario, dialogues, voix synchronisées, interface animée, son et site de présentation, sans un seul faux chiffre.
Étude de cas
Brasserie Brol : une taverne bruxelloise, du logo jusqu'au site
Une micro-brasserie de quartier à Forest, sa taverne et sept bières. Brasserie Brol n'existe pas : c'est un projet mené par le studio pour montrer, sur un seul cas, tout ce que nous faisons d'une identité visuelle quand elle doit vivre sur un site, du premier croquis de logo à la page qui s'affiche sur un téléphone.
- Design
- Web
- B2C
- Cadre
- Projet studio (marque fictive)
- Secteur
- Brasserie & horeca
- Date
- septembre 2026
- Technologies
- Next.js 16, React 19, TypeScript, Tailwind CSS v4, SVG, Vercel
01
Une marque née d'un mot bruxellois
« Brol », c'est le bazar en bruxellois. Il fallait en tirer une marque entière, avec assez de caractère pour qu'on la reconnaisse sur une étiquette comme sur un écran.
Un univers d'affiches de concert
L'inspiration vient des affiches des années 70 et des enseignes peintes. Le logotype BROL, dessiné à partir de la police Fraunces puis vectorisé, porte trois contours empilés, comme une sérigraphie.
Sept couleurs de taverne, deux motifs
Brique, moutarde, sarcelle, rose : la palette compte sept couleurs. Les rayons de soleil et les vagues arc-en-ciel reviennent partout, du site aux bouteilles.
Trois pistes avant de choisir
Trois pistes d'identité ont été présentées avant de retenir celle-ci. Chaque nom de bière a été vérifié pour ne pas reprendre celui d'une bière belge existante.
Charte en ligne : le logo et ses déclinaisons.
02
Sept étiquettes, un seul dessin
Toutes les étiquettes sortent du même modèle : un motif, deux couleurs, un nom. Elles se ressemblent assez pour former une gamme, et assez peu pour qu'on les distingue au premier coup d'œil.
Une nouvelle bière, une ligne à ajouter
Pour lancer une bière, on ajoute son nom, ses couleurs et son motif. Son étiquette, sa fiche et sa carte dans le catalogue suivent toutes seules.
Les mêmes étiquettes en photo
Les bouteilles photographiées au comptoir de la taverne portent exactement les étiquettes du site.
Un seul composant dessine les sept étiquettes. Les bouteilles en situation, avec les étiquettes exportées du code.
03
Un site qui parle comme au comptoir
Le site s'adresse aux Bruxellois de 25 à 45 ans qui cherchent où sortir près de chez eux, aux amateurs de bières artisanales et aux groupes qui veulent réserver. Il les tutoie, comme on le fait au bar.
Un catalogue qu'on filtre
Par style, par degré, par disponibilité. Chaque bière a sa fiche, avec son étiquette en grand.
Une taverne qui vit
Le site indique si la taverne est ouverte en ce moment, à l'heure de Bruxelles, et l'agenda s'ajoute à son propre calendrier en un clic.
Un quiz qu'on partage
« Quelle Brol es-tu ? » : quelques questions, une bière en résultat, et un lien à envoyer à ses amis.
Réserver en ligne
Tables de groupe et visites de la brasserie se réservent depuis le site.
Catalogue filtrable. Fiche bière, version ordinateur.
04
La charte est une page du site
Pas de PDF à rechercher dans ses mails : la charte de Brol se consulte en ligne, à la même adresse que le site, toujours à jour.
Tout ce qu'il faut pour garder la marque cohérente
Le logo et ses déclinaisons, la zone de protection, la palette avec ses contrastes, les typographies, les motifs et le ton de voix.
Voir la charte de Brasserie Brol (nouvel onglet)Des exemples concrets
La marque y est montrée en situation, pour qu'un imprimeur ou un graphiste sache tout de suite comment l'utiliser.
05
Le résultat
Une identité pleine de couleurs et de typographie peut tout à fait donner un site rapide et accessible. Voici les mesures relevées sur le site en ligne.
96–97
Performance sur mobile
100
Accessibilité
100
Bonnes pratiques
Mesures Lighthouse (mobile, 4G simulée) sur l'accueil, le catalogue, une fiche bière et la charte.
Dessiné, pas photographié
Logo, étiquettes, motifs et illustrations sont dessinés directement dans le site. Ils restent nets sur tous les écrans et pèsent très peu.
Lisible par tout le monde
Le site respecte les règles d'accessibilité WCAG 2.2 AA, vérifiées page par page. Il se parcourt entièrement au clavier, et les animations s'arrêtent pour qui le demande à son téléphone.
Le site sur mobile.
Notre expertise
Design & identité
Une identité visuelle complète, du logo aux interfaces : charte graphique, packaging, mises en situation et motion design, pour une marque qu'on reconnaît partout où elle apparaît.
Questions fréquentes
Questions sur Brasserie Brol
Ce que l'on nous demande à propos de ce projet.
Brasserie Brol existe-t-elle ?
Non. C'est un projet studio, une marque imaginaire créée pour montrer notre travail d'identité et de site sur un cas complet. Le site est en ligne et se visite librement.
Qu'est-ce que le studio a créé pour ce projet ?
Tout : le nom des bières, le logo, les sept étiquettes, la palette, les typographies, le ton de voix, la charte en ligne, le site vitrine et les photos produits.
Pourquoi des étiquettes construites sur un même modèle ?
Pour qu'elles forment une gamme cohérente et qu'une nouvelle bière ne demande pas de repartir de zéro : on lui donne un nom, deux couleurs et un motif, et son étiquette suit.
Une identité aussi colorée ralentit-elle le site ?
Non. Sur mobile, le site obtient 96 à 97 en performance et 100 en accessibilité dans Lighthouse, parce que les dessins sont faits dans le code plutôt qu'en grosses images.
À quoi sert une charte en ligne ?
Elle réunit au même endroit tout ce qu'il faut pour utiliser la marque correctement : logo, couleurs, typographies, motifs et exemples. Un imprimeur ou un graphiste l'ouvre avec un simple lien.
Ce type de projet convient-il à mon commerce ?
Oui, si vous tenez un bar, un restaurant, une boutique ou une production locale et que vous voulez une marque qu'on reconnaît, déclinée jusqu'à votre site. La méthode est la même : des pistes, un choix, puis une charte et un site à votre image.
E-commerceDesignTorréfaction & e-commerce · 2026
Une marque créée de zéro jusqu'à sa boutique, rapide et accessible : Lighthouse mobile 96 à 99 en performance, 100 en accessibilité et en bonnes pratiques.
Outils métiersImmobilier & outil métier · 2026
Un outil métier complet et utilisable en ligne, sans compte : sept écrans reliés, tout au clavier et au téléphone, et 0 violation à l'audit axe sur 116 états, en clair et en sombre.