EXEMPLE DE LIVRABLE · IDENTITÉ VISUELLE
Système de design & identité visuelle
STUDIO CRÉATIF · BIEL/BIENNE · 2026
Ce que vous voyez ici est un exemple concret de système de design tel que nous le livrons à nos clients.
Chaque identité visuelle que nous créons est 100 % sur mesure. Aucun template. Aucune bibliothèque générique. Nous partons de zéro et construisons un système complet : typographie, couleurs, composants, règles d'usage. Le tout adapté à votre marque, votre ton et votre audience.
Ici, nous utilisons Goodbye Internetcomme cas d'étude pour illustrer la profondeur et la cohérence d'un système de design professionnel.
LE SIGNE
MARQUE PRINCIPALE
PICTOGRAMME + LOGOTYPE · PP MORI
CONFIGURATIONS
LOCKUP COMPLET
PICTOGRAMME TRAIT
PICTOGRAMME PLEIN
VARIANTE OISEAU
VARIATIONS CHROMATIQUES
Encre sur brume
Brume sur encre
Signal sur brume
Blanc sur signal
Encre sur voile
Signal sur encre
ESPACE DE PROTECTION
1x = hauteur du logo
UNITÉ
1x = largeur du pictogramme
RÈGLE
Aucun élément graphique ou texte ne doit entrer dans la zone de protection.
MINIMUM
1x sur tous les côtés. 2x recommandé pour le print.
TAILLES MINIMALES
64px
32px
16px
PICTOGRAMME SEUL
USAGES
GISPÉCIFICATIONS
FEUILLE SPÉCIMEN
FEUILLE SPÉCIMEN
GOODBYE INTERNET · SYSTÈME TYPOGRAPHIQUE
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm
Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9 & @ # % ! ?
àâäéèêëïîôùûüç · « guillemets » · œ æ
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm
Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9 & @ # % ! ?
Espacement fixe, idéal pour données tabulaires, prix, code, horloge
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm
Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9 & @ # % ! ?
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm
Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9 & @ # % ! ?
ÉCHELLE TYPOGRAPHIQUE
RATIO 1.333 (QUARTE PARFAITE) · 9 NIVEAUX HIÉRARCHIQUES
APPARIEMENT DE FONTES
Quatre familles, chacune avec un rôle précis. Voici comment elles fonctionnent ensemble.
INSTRUMENT SERIF + SPACE MONO
Usage : Hero, manifeste, pages éditoriales
Le web devrait être léger
Un site rapide est un site respectueux. Chaque kilooctet compte, chaque requête a un coût. Nous construisons des sites qui chargent en moins d'une seconde.
VT323 + SPACE MONO
Usage : Titres de section, prix, données structurées
PROCESSUS ASYNCHRONE
Pas d'appels. Pas de réunions. Tout se fait à l'écrit pour plus de précision et de traçabilité. Votre projet avance même quand vous dormez.
VT323 + INSTRUMENT SERIF
Usage : Manifeste, sections à forte charge émotionnelle
MANIFESTE
Nous construisons des artefacts numériques qui respectent votre temps et celui de vos visiteurs.
SILKSCREEN + SPACE MONO
Usage : Labels, annotations, méta-informations
SECTION 03 · PROCESSUS
Les micro-labels en Silkscreen servent de repères visuels discrets dans l'interface. Ils guident sans distraire.
PLANCHE D'AMBIANCE
La palette chromatique, résumée en proportions. Chaque couleur porte un nom interne pour faciliter la communication entre designer et développeur.
PROPORTIONS D'USAGE
COULEUR EN CONTEXTE
Les couleurs ne vivent pas en isolation. Voici comment elles s'appliquent aux composants réels de l'interface.
BOUTONS
CHAMPS DE FORMULAIRE
Adresse e-mail
Champ actif
Champ en erreur
Ce champ est obligatoire.
CARTES
LOGO
Identité visuelle complète
990 CHF
SITE WEB
Design + développement
2'490 CHF
BUNDLE
Logo + site web
2'990 CHF
RECOMMANDÉ
NAVIGATION & LIENS
INDICATEURS DE STATUT
EFFET PORTFOLIO · DOT EFFECT
Pour le portfolio, nous avons développé un effet visuel sur mesure : chaque image est transformée en une grille de formes géométriques(cercles et carrés) dont la taille varie selon la luminosité de l'image originale. Les zones sombres produisent des formes plus grandes, les zones claires des formes plus petites.
Le sujet principal est isolé automatiquement (via suppression d'arrière-plan), puis superposé sur un fond de caractères ASCII aléatoires. Le résultat : une version abstraite et texturée qui révèle la photo originale au survol.
Cet effet est généré par un script Python personnalisé. Il n'utilise aucun filtre CSS ou bibliothèque tierce. Chaque pixel est recalculé pour produire une image unique.
PARAMÈTRES TECHNIQUES
GRID STEP
16 px
Espacement entre formes
MIN RADIUS
3 px
Plus petite forme
MAX RADIUS
8 px
Plus grande forme
SEUIL MASQUE
15
Seuil alpha du sujet
PALETTE DE L'EFFET
PROCESSUS DE GÉNÉRATION
IMAGE SOURCE
Photo originale en haute résolution (WebP, JPG ou PNG)
ISOLATION
Le sujet est isolé via rembg · l'arrière-plan est supprimé automatiquement
MAPPING
La luminosité de chaque zone est convertie en taille de forme (sombre = grand)
RENDU
Formes géométriques + caractères ASCII aléatoires sur fond bleu
DÉMONSTRATION · SURVOLEZ POUR RÉVÉLER L'ORIGINAL
TRANSITION : OPACITÉ 500ms · AUCUN FILTRE CSS · IMAGES PRÉ-GÉNÉRÉES
LOGO LAB
Explorez différentes combinaisons typographiques et chromatiques avec le logo Goodbye Internet. Ajustez la police, le corps, l'approche, les couleurs et comparez vos variantes.
Goodbye InternetPOLICE
FOND
TEXTE