L’essentiel en bref
- Le design géométrique construit images et mises en page à partir de formes régulières comme les cercles, les carrés, les triangles et les lignes droites, généralement disposées sur une grille.
- Une grille aux marges, colonnes et gouttières cohérentes est ce qui rend les mises en page géométriques ordonnées plutôt que simplement anguleuses.
- Les cercles évoquent plutôt la convivialité et l’achèvement, les carrés la stabilité, et les triangles la direction et l’énergie.
- Rayures, damiers, pois, rayons et anneaux peuvent tous se dessiner avec des dégradés CSS, sans aucun fichier image.
- Les motifs géométriques fonctionnent mieux en deux ou trois couleurs avec une seule échelle claire, pour soutenir le contenu au lieu de lui faire concurrence.
Sur cette page
Le design géométrique bâtit ses visuels à partir de formes régulières (cercles, carrés, triangles et lignes droites) posées sur une grille. C’est le langage du Bauhaus, des affiches suisses, de l’Art déco et de la plupart des logos modernes. Il paraît ordonné, assuré et intemporel parce que les règles sont visibles : les choses s’alignent, se répètent et se répondent. Voici comment monter la grille, choisir les formes à dessein et créer des motifs géométriques, dont plusieurs que vous pouvez dessiner en pur CSS.
Commencez par une mise en page en grille
Les formes seules ne rendent pas un design géométrique ; l’alignement, si. Une grille donne une place à chaque élément : des marges sur le pourtour, des colonnes dans le cadre et des gouttières entre elles. Une fois qu’elle existe, chaque cercle, bloc et ligne de texte s’y cale, et tout le design commence à paraître construit.
Taille
Marge
Grille
Taille
Marge
Grille
Marge
Grille
Taille
Marge
Grille
Taille
Marge
Grille
Les maîtres de cette approche furent les designers suisses des années 1950 et 1960, dont les affiches paraissent toujours actuelles. Le design suisse présente leurs méthodes, et le design Bauhaus montre où est né l’amour du cercle, du carré et du triangle.
Choisir les formes à dessein
Chaque forme de base porte des associations largement employées dans l’enseignement du design, même si aucune n’est absolue. Voyez-y des tendances, et laissez la couleur et le contexte faire le reste.
- Cercle : achevé, convivial, concentré. Idéal pour mettre une chose en avant, comme une date ou un visage.
- Carré et rectangle : stables, honnêtes, structurels. Le contenant naturel du texte et des images.
- Triangle : directionnel et énergique. Guide le regard, suggère le mouvement ou la tension.
- Ligne et rayure : rythme et vitesse. L’horizontale est calme, la diagonale est dynamique.
- Demi-cercle et quart de cercle : adoucissent une mise en page stricte tout en restant géométriques, un favori des affiches modernes.
Une mise en page scindée : une forte division verticale, le texte calé sur la grille d’un côté.
Un grand nombre posé sur la grille. Le contraste d’échelle entre le chiffre et le détail est un classique du géométrique.
Idées de motifs géométriques
Les motifs sont le design géométrique à son plus visible. Les classiques : rayures, damiers, pois, rayons, anneaux, chevrons et grilles de lignes. Tenez-vous à deux ou trois couleurs, choisissez une échelle et décidez si le motif est la vedette (une affiche, un papier cadeau) ou un fond discret, auquel cas baissez beaucoup son contraste.
L’Art déco a pris les rayons, les éventails et les formes en gradins en or et noir ; Memphis a brisé la grille avec des gribouillis et des confettis. Le design Art déco et le design Memphis sont deux riches sources si vous voulez un motif au parfum d’époque.
Damiers, pois et grilles en CSS
Certains motifs exigent que la taille de la tuile soit fixée à part avec background-size, pour se répéter sur tout un élément. Ces trois-là sont les plus demandés. L’article motifs CSS en contient beaucoup d’autres, et le dégradé linéaire répété détaille les arrêts francs.
/* Checkerboard: one conic gradient, tiled */
.checks {
background: repeating-conic-gradient(#111827 0 25%, #f3f4f6 0 50%) 0 0 / 48px 48px;
}
/* Polka dots */
.dots {
background-color: #fef3c7;
background-image: radial-gradient(circle, #b45309 6px, transparent 7px);
background-size: 32px 32px;
}
/* Graph paper grid */
.grid {
background-color: #f8fafc;
background-image:
linear-gradient(#cbd5e1 1px, transparent 1px),
linear-gradient(90deg, #cbd5e1 1px, transparent 1px);
background-size: 24px 24px;
}Idées de design géométrique à essayer cette semaine
- Un grand cercle : un seul cercle qui occupe la moitié d’une affiche, avec la date de l’événement à l’intérieur.
- Bordure rayée : une bande de rayures de store en haut d’un menu ou d’une liste de prix, rien d’autre en motif.
- Quarts de cercle aux angles : un quart de cercle à chaque angle d’une publication carrée, en deux couleurs alternées.
- Un chiffre sur la grille : un énorme chiffre (une année, un prix, un nombre de jours) aligné sur la colonne de gauche, avec un petit texte à côté.
- Rayons derrière un produit : des rayons peu contrastés qui irradient derrière une bouteille ou une boîte sur une bannière de boutique.
- Notes sur papier millimétré : un carrousel de conseils sur un fond de grille discrète, chaque diapositive portant une règle.
Chaque idée emploie un seul procédé géométrique et laisse le reste simple. C’est généralement assez pour donner un point de vue net à une publication, et c’est facile à répéter sur toute une série.
Garder les designs géométriques lisibles
À éviter
- Un motif très contrasté directement derrière le texte
- Cinq couleurs dans un seul motif
- Des formes qui s’alignent presque mais ratent la grille
- Des rayures fines qui scintillent à l’écran
- Trois échelles de motifs sans rapport mêlées
À faire
- Un bloc uni ou calme partout où se trouvent des mots
- Deux ou trois couleurs, l’une dominante
- Tout calé sur la même grille
- Des rayures d’au moins 8 px de large à la taille de publication
- Une seule échelle de motif, répétée avec assurance
Les rayures fines et très contrastées peuvent scintiller à l’écran et virer au moiré quand une appli redimensionne votre image : testez à la taille que les gens verront vraiment. L’ordre géométrique s’associe aussi bien à un élément doux : une seule forme organique sur une grille stricte apporte de la chaleur sans briser le système. Dans Gradiently, le Designer peut composer une publication sur une grille propre dans le Mark de votre marque et en tirer toutes les autres tailles, pour que l’alignement survive à chaque format.
Les questions qu’on nous pose
Qu’est-ce que le design géométrique ?
Un style de graphisme bâti à partir de formes régulières comme les cercles, les carrés, les triangles et les lignes, généralement alignées sur une grille.
Comment faire un motif géométrique en CSS ?
Utilisez des dégradés répétés avec des arrêts de couleur francs, comme repeating-linear-gradient(45deg, #1e3a8a 0 24px, #f5efe3 24px 48px) pour des rayures. Pour des damiers et des pois, ajoutez background-size afin de fixer la tuile.
Quelle grille utiliser pour une publication Instagram ?
Une publication 1080×1350 fonctionne bien avec des marges de 72 pixels et six colonnes à gouttières de 24 pixels. Employez la même grille pour chaque publication d’une série.
Quels mouvements de design emploient des formes géométriques ?
Le Bauhaus, le style typographique suisse ou international, l’Art déco et Memphis ont tous beaucoup reposé sur des formes géométriques, chacun dans un esprit très différent.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil