Des décisions de conception inspirées avec Emmett McBain : la direction artistique comme équité sociale

Avec la publicité, la vente est une compétence que les gens désapprouvent souvent. C'est vrai : personne n'aime que quelqu'un le force ou l'induise en erreur, et personne n'aime être interrompu.

Mais être bien vendu - par un vendeur qui comprend vos aspirations, vos motivations et vos besoins - peut être une expérience qui profite aux acheteurs et aux vendeurs.

Apprendre à vendre a été l'une des meilleures choses que j'ai faites au début de ma vie professionnelle. À l'époque, je vendais du matériel photographique, et même si je n'ai jamais apprécié le stress lié à l'atteinte des objectifs de vente, j'ai toujours aimé rencontrer des photographes.

Trouver de nouveaux clients signifiait souvent appeler à froid, frapper à la porte d'un studio et être souvent rejeté. J'ai passé du temps à parler du travail de quelqu'un avant de mentionner les produits que mon entreprise m'a payé pour vendre. J'étais vraiment intéressé par la photographie, mais j'avais aussi appris que comprendre les problèmes de quelqu'un était aussi crucial que d'expliquer comment mes produits pouvaient aider à les résoudre.

Ce que j'ai appris m'a énormément servi depuis que j'ai arrêté de vendre des caméras et que j'ai commencé à vendre mon talent. Cela m'a aidé à traiter avec les gens, notamment en présentant (lire : vendre) mes idées aux clients.

C'est un fait de la vie que ce n'est pas toujours la meilleure idée ou la meilleure exécution qui remporte un pitch ou une présentation. C'est souvent l'idée qui est vendue par le meilleur vendeur.

Vendre des idées devrait devenir l'une de vos meilleures compétences, alors apprenez à vendre. Apprenez à parler de votre travail afin que la personne à qui vous vendez comprenne vos idées et pourquoi elle devrait vous les acheter. Apprenez à inspirer les gens avec vos mots ainsi que votre travail. Faites-leur sentir qu'ils font tellement partie de vos idées qu'ils doivent tout simplement acheter de vous.

En tant que graphiste noir américain qui a travaillé dans la publicité dans les années 1950, 1960 et 1970, Emmett McBain avait non seulement un talent incroyable, il a également compris comment vendre aux autres Afro-Américains.

Il savait que pour vendre les produits de ses clients, ses créations devaient trouver un écho auprès du public noir, en montrant des images auxquelles ils se rapportaient et un langage qui leur était familier.

En tant qu'Anglais à la barbe grise, il n'est pas facile pour moi de comprendre des perspectives culturelles différentes des miennes. Mais, j'ai appris la valeur de créer des designs qui parlent aux gens, peu importe à quoi ils ressemblent et où qu'ils vivent. Non seulement pour leur vendre les produits de mes clients mais pour que chacun sente que ses besoins sont écoutés et compris.

Né à Chicago en 1935, Emmett McBain était un graphiste afro-américain dont le travail a eu un impact remarquable sur la représentation des Afro-Américains dans la publicité.

McBain a étudié dans plusieurs écoles d'art et a obtenu son diplôme après avoir étudié l'art commercial à l'American Academy of Art de Chicago.

Vince Cullers and Associates, la première agence de publicité à service complet appartenant à des Afro-Américains aux États-Unis, a été fondée en 1958. Cullers pensait que « vendre du noir » nécessitait de « penser noir » si les annonceurs voulaient atteindre les consommateurs afro-américains. Il a non seulement vendu aux Afro-Américains, mais a aidé à les éduquer à la publicité et à les employer dans son agence. L'un de ces employés était le nouveau diplômé Emmett McBain.

Avec deux ans d'expérience commerciale derrière lui, McBain a quitté Vince Cullers et a rejoint Playboy Records en tant qu'éditeur artistique adjoint. Mais, il n'est pas resté longtemps dans un rôle junior et est rapidement devenu le directeur artistique de la promotion de Playboy. McBain s'est taillé une niche en tant qu'artiste de couverture et, en 1958, sa pochette d'album Playboy Jazz All-Stars a été nommée Couverture d'album de la semaine par Billboard Magazine.

En 1959, McBain quitte Playboy, mais il n'abandonne pas son travail sur les pochettes d'albums. Son studio de design nouvellement fondé, McBain Associates, travaillait régulièrement avec Mercury Records et il avait conçu plus de 75 pochettes d'albums à l'âge de 24 ans.

McBain est retourné à Vince Cullers Advertising en tant que directeur créatif en 1968 et a apporté certaines de ses contributions les plus importantes à la publicité pour les Noirs américains.

Avant les années 1960, les consommateurs noirs étaient largement ignorés par les fabricants de marques et l'industrie publicitaire grand public qui les servait. La publicité destinée aux Afro-Américains se limitait principalement aux journaux spécifiques au public noir.

Les clients blancs étaient réticents à dépenser de l'argent pour vendre aux Afro-Américains, car les annonceurs considéraient que les consommateurs noirs avaient peu de revenus disponibles. Dans l'atmosphère politiquement chargée de l'époque, les entreprises avaient également peur d'associer leurs marques aux Afro-Américains.

Les Afro-Américains n'étaient pas non plus représentés dans l'industrie de la publicité, et le nombre de Noirs travaillant dans la publicité était infime. Mais, au milieu des années 1960, les agences de publicité ont commencé à recruter des Afro-Américains. Ces agences espéraient que leurs expériences rendraient les messages des clients plus pertinents pour le public afro-américain qui, à ce moment-là, dépensait près de 30 milliards de dollars chaque année.

Le travail de McBain comportait des messages positifs pour les Afro-Américains et la communauté noire. Il a utilisé des images de gens ordinaires dans un environnement habituel pour des clients qui comprenaient les cigarettes au menthol de Newport, Marlboro de Philip Morris et les produits de beauté de SkinFood Cosmetics spécifiquement pour la peau noire. Comme Vince Cullers, McBain savait que vendre aux consommateurs noirs signifiait comprendre leurs différents besoins. Il a compris que – comme l'a dit son futur partenaire, le rédacteur Thomas Burrell – «les Noirs ne sont pas des Blancs à la peau foncée».

En 1971, Emmett McBain s'est associé à Burrell pour former Burrell-McBain Inc., qu'ils ont décrit dans une publicité comme "Une agence de publicité pour le marché commercial noir". Plutôt que d'exploiter les Noirs américains, Burrell et McBain visaient à nouer des relations authentiques et respectueuses avec le public noir.

Avant Burrell et McBain, le cow-boy blanc emblématique était le visage des cigarettes Marlboro. Mais, l'homme de Marlboro de McBain était plus proche des fumeurs afro-américains. Alors que le cow-boy de Marlboro a été montré dans une version idéalisée de l'Ouest américain, les personnages noirs de McBain ont été vus en train de fumer dans un environnement quotidien.

Leur campagne Marlboro a été un énorme succès et Burrell et McBain ont ensuite gagné Coca-Cola et McDonald's en tant que clients, les aidant à devenir la plus grande agence de publicité appartenant à des Noirs en Amérique.

McBain quitte l'agence qu'il a cofondée en 1974 et se lance dans une carrière d'artiste. Il a ouvert sa galerie d'art, The Black Eye, et a formé un cabinet de conseil - également appelé The Black Eye - qui a aidé les agences à mieux se connecter avec la communauté afro-américaine.

Emmett McBain est décédé d'un cancer en 2012 et depuis lors, il a été reconnu par l'AIGA, la Society of Typographic Arts et les Art Directors Clubs de Chicago et de Detroit.

Malheureusement, aucun livre n'a été publié sur Emmett McBain et sa contribution à la publicité et au design. Je n'ai pas entendu son nom mentionné lors de conférences sur le design ou je ne l'ai pas vu référencé dans des articles relatifs au design moderne et en particulier au web.

Les travaux ultérieurs de McBain ont eu un impact profond sur la publicité à partir des années 1960, mais j'aime particulièrement ses créations de pochettes de disques. L'explosion d'énergie qui reflète la musique jazz que McBain aimait. Ses couleurs sont excitantes et vibrantes. Son choix de polices de caractères et la façon dont il a déconstruit et reconstruit le type sont inspirants. Il y a de quoi nous inspirer dans le travail d'Emmett McBain.

Alignement du contenu vertical

Quel que soit le style graphique que je choisis, le code HTML nécessaire pour mettre en œuvre ce premier design inspiré de McBain est identique. J'ai besoin de trois éléments structurels ; un en-tête qui contient mon logo SVG et mes titres, principal, et un aparté qui comprend un tableau des numéros de production de Citroën DS :

 <header> <svg>…</svg> <div> <svg>…</svg> <svg>…</svg> </div> </header> <main> <p>…</p> </main> <aside> <table>…</table> </aside>

Pour l'évolutivité entre les tailles d'écran, j'utilise des SVG pour les deux titres de mon en-tête. L'utilisation de SVG fournit un degré supplémentaire de cohérence pour le texte barré du deuxième titre, mais je ne dois pas oublier l'accessibilité.

Dans le numéro 8, j'ai expliqué comment aider les personnes qui utilisent des technologies d'assistance en ajoutant ARIA aux SVG. J'ajoute un attribut de rôle ARIA, plus un attribut de niveau qui remplace la sémantique manquante. L'ajout d'un élément de titre aide également la technologie d'assistance à comprendre la différence entre plusieurs blocs de SVG, mais les navigateurs n'afficheront pas ce titre :

 <svg role="heading" aria-level="1" aria-label="Citroen DS"> <title>Citroen DS</title> <path>…</path> </svg>

Pour commencer cette conception, j'ajoute des styles de base de base pour chaque taille d'écran en commençant par les couleurs de premier plan et d'arrière-plan :

 body { background-color: #fff; color: #262626; }

J'ajoute des dimensions précises au pixel près aux éléments SVG dans mon en-tête, puis j'utilise des marges horizontales automatiques pour centrer le logo Citroën :

 header > svg { margin: 0 auto; width: 80px; } header div svg { max-height: 80px; }

Dans sa conception inspirante, Emmet McBain a inclus des rayures noires verticales pour ajouter de la structure à sa mise en page. Pour obtenir un effet similaire sans ajouter d'éléments supplémentaires à mon code HTML, j'ajoute des bordures sombres à gauche et à droite de mon paragraphe principal :

 main p { padding: .75rem 0; border-right: 5px solid #262626; border-left: 5px solid #262626; }

La même technique ajoute un effet similaire à mon tableau des numéros de production de Citroën DS. J'ajoute les deux bordures extérieures à mon tableau :

 aside table { width: 100%; border-right: 5px solid #262626; border-left: 5px solid #262626; border-collapse: collapse; }

Ensuite, j'ajoute une troisième règle à droite de mes en-têtes de tableau :

 aside th { padding-right: .75rem; padding-left: .75rem; border-right: 5px solid #262626; }

En veillant à ce que chaque cellule remplisse la moitié de la largeur de mon tableau, cette bande verticale s'étend au centre, de haut en bas :

 aside th, aside td { width: 50%; box-sizing: border-box; }

Quand quelqu'un lit des données tabulaires numériques comme ces paires d'années et de chiffres de production, ses yeux parcourent la colonne des années. Ensuite, ils suivent pour voir combien de voitures Citroën ont fabriquées au cours de cette année. Les gens peuvent également comparer les chiffres de production à la recherche de chiffres élevés ou faibles.

Pour faciliter leurs comparaisons, j'aligne les chiffres de production à droite :

 aside td { text-align: right; }

Selon les fonctionnalités OpenType disponibles dans la police que vous avez choisie, vous pouvez également améliorer la lisibilité des données tabulaires en spécifiant une ligne plutôt que des chiffres à l'ancienne. Certains chiffres à l'ancienne, notamment 3, 4, 7 et 9, ont des descendants qui peuvent descendre en dessous de la ligne de base. Ceux-ci rendent les chaînes de nombres plus longues plus difficiles à lire. Les chiffres de doublure, en revanche, incluent des chiffres qui se trouvent sur la ligne de base.

Les fonctionnalités OpenType contrôlent également la largeur des chiffres, ce qui facilite la comparaison des chaînes de nombres dans un tableau. Alors que les nombres proportionnels peuvent être de tailles différentes, les chiffres tabulaires ont tous la même largeur, de sorte que les dizaines, les centaines et les milliers seront alignés plus précisément :

 aside td { font-variant-numeric: lining-nums tabular-nums; }

Enfin, j'introduis le motif de cercle au bas de cette conception de petit écran. Je ne veux pas inclure ces images circulaires dans mon HTML, j'utilise donc un URI de données de contenu généré par CSS où le fichier image est encodé dans une chaîne :

 aside:after { content: url("data:image/svg+xml…"); }

Je suis souvent surpris du peu de modifications que j'ai besoin d'apporter pour développer des conceptions pour plusieurs tailles d'écran. Passer de petits écrans à des conceptions de taille moyenne ne nécessite souvent que des modifications mineures de la taille des caractères et l'introduction de styles de mise en page simples.

Je commence par aligner horizontalement le logo Citroën et les titres SVG dans mon en-tête. Sur les écrans moyens et grands, ce logo vient en premier dans mon HTML, et les titres viennent en second. Mais visuellement les éléments sont inversés. Flexbox est l'outil idéal pour faire ce changement, simplement en changeant la valeur par défaut de flex-direction de row à flex-direction : row-reverse :

 @media (min-width: 48em) { header { display: flex; flex-direction: row-reverse; align-items: flex-start; } }

Auparavant, j'ai donné à mon logo une largeur précise. Mais, je veux que les titres remplissent tout l'espace horizontal restant, donc je donne à leur division parente une valeur flex-grow de 1. Ensuite, j'ajoute une marge basée sur la fenêtre pour séparer les titres et le logo :

 header div { flex-grow: 1; margin-right: 2vw; }

Pour cette conception de taille moyenne, j'ai développé la mise en page à l'aide d'une grille symétrique à trois colonnes, que j'applique aux éléments principaux et secondaires :

 main, aside { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

Ensuite, en utilisant la même technique que j'ai utilisée pour l'élément de côté précédemment, je génère deux images pour l'élément principal et les place dans les première et troisième colonnes de ma grille :

 main:before { grid-column: 1; content: url("data:image/svg+xml…"); } main:after { grid-column: 3; content: url("data:image/svg+xml…"); }

Je répète le processus pour l'élément de côté, avec ce nouveau contenu :after remplaçant l'image générée que j'ai ajoutée pour les petits écrans :

 aside:before { grid-column: 1; content: url("data:image/svg+xml…"); } aside:after { grid-column: 3; content: url("data:image/svg+xml…"); }

L'espace supplémentaire disponible sur les écrans de taille moyenne me permet d'introduire davantage le motif à rayures verticales, inspiré du design original d'Emmett McBain. Les bordures verticales à gauche et à droite du paragraphe principal sont déjà en place, il ne me reste donc plus qu'à changer son mode d'écriture en vertical-rl et à le faire pivoter de 180 degrés :

 main p { justify-self: center; writing-mode: vertical-rl; transform: rotate(180deg); }

Certains navigateurs respectent les propriétés de la grille et étirent un tableau sur toute la hauteur de la ligne de la grille sans aide. D'autres ont besoin d'un peu d'aide, alors pour eux, je donne à ma table de numéros de production une hauteur explicite qui ajoute un espace égal entre ses lignes :

 aside table { height: 100%; }

Le plein effet de cette conception inspirée de McBain se produit lorsque les écrans sont suffisamment larges pour afficher côte à côte les éléments principaux et secondaires. J'applique une simple grille symétrique à deux colonnes :

 @media (min-width: 64em) { body { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } }

Ensuite, je place les éléments principaux et secondaires en utilisant des numéros de ligne, l'en-tête couvrant toute la largeur de ma mise en page :

 header { grid-column: 1 / -1; } main { grid-column: 1; } aside { grid-column: 2; }

Avoir l'air non structuré

Les couleurs vives et les formes irrégulières des blocs de ce prochain design sont aussi inattendues que le jazz qui a inspiré l'original d'Emmett McBain. Bien que l'agencement de ces mises en page puisse sembler non structuré, le code dont j'ai besoin pour le développer ne l'est certainement pas. En fait, il n'y a que deux éléments structurels, header et main :

 <header> <svg>…</svg> <h1>…</h1> <p>…</p> <svg>…</svg> </header> <main> <small>…</small> <h2>…</h2> <p>…</p> </main>

Je commence par appliquer des couleurs d'arrière-plan et de premier plan, ainsi qu'une quantité généreuse de rembourrage pour permettre aux yeux de quelqu'un de parcourir et de parcourir les espaces du design :

 body { padding: 2rem; background-color: #fff; color: #262626; }

Ces blocs aux couleurs vives domineraient l'espace limité disponible sur un petit écran. Au lieu de cela, j'ajoute les mêmes couleurs vives à mon en-tête :

 header { padding: 2rem 2rem 4rem; background-color: #262626; } header h1 { color: #c2ce46; } header p { color: #fc88dc; }

Les formes irrégulières sont un aspect de cette conception que je veux voir à chaque taille d'écran, j'utilise donc un chemin de polygone pour couper l'en-tête. Seules les zones à l'intérieur de la zone du clip restent visibles, tout le reste devient transparent :

 header { -webkit-clip-path: polygon(…); clip-path: polygon(…); }

L'attention portée aux moindres détails de la typographie permet aux gens de savoir que chaque aspect d'un design a été soigneusement étudié. Une ligne horizontale dans le petit élément au début de mon contenu principal change de longueur à côté du texte.

Je ne veux pas ajouter de règle horizontale de présentation à mon code HTML, et j'opte plutôt pour une combinaison de Flexbox et de pseudo-éléments dans mon CSS. Tout d'abord, je stylise le texte du petit élément :

 main small { font-size: .8em; letter-spacing: .15em; line-height: .8; text-transform: uppercase; }

Ensuite, j'ajoute un pseudo-élément :after avec une fine bordure inférieure qui correspond à la couleur de mon texte :

 main small:after { content: ""; display: block; margin-left: .75rem; border-bottom: 1px solid #262626; }

L'ajout de propriétés flexibles aligne le texte et mon pseudo-élément au bas du petit élément. En donnant au pseudo-élément une valeur flex-grow de 1, cela lui permet de modifier sa largeur pour compléter des chaînes de texte plus longues et plus courtes :

 main small { display: flex; align-items: flex-end; } main small:after { flex-grow: 1; }

J'aime les surprises, et il y a plus dans mon titre de deuxième niveau « Champion de France » qu'il n'y paraît.

Il y a près de dix ans, Dave Rupert a publié Lettering.js, un plugin jQuery qui utilise Javascript pour envelopper des lettres, des lignes et des mots individuels avec des éléments span. Ces éléments séparés peuvent ensuite être stylisés de plusieurs façons. Avec un seul élément multicolore dans ce design, j'applique la même technique sans servir de script :

 <h2>Champion <span>d</span><span>e</span> <span>F</span><span>r</span><span>a</span><span>n</span><span>c</span><span>e</span></h2>

Ensuite, je donne à chaque lettre sélectionnée sa propre couleur :

 h2 span:nth-of-type(1) { color: #c43d56; } h2 span:nth-of-type(2) { color: #905dd8; } h2 span:nth-of-type(3) { color: #377dab; }

J'ai toujours considéré le défi du responsive design comme une opportunité d'être créatif et de tirer le meilleur parti de chaque taille d'écran. L'espace supplémentaire disponible sur les écrans moyens et grands me permet d'introduire les grands blocs de couleur de forme irrégulière, ce qui rend ce design inattendu.

Tout d'abord, j'applique les propriétés de la grille et une grille symétrique à huit colonnes à l'élément body :

 @media (min-width: 48em) { body { display: grid; grid-template-columns: repeat(8, 1fr); } }

Ensuite, je place mon en-tête dans trois de ces colonnes. Avec les blocs colorés maintenant visibles, je change la couleur d'arrière-plan de l'en-tête en gris foncé :

 header { grid-column: 4 / 7; background-color: #262626; }

Centrer le contenu à la fois horizontalement et verticalement était un défi avant Flexbox, mais maintenant aligner et justifier mon contenu d'en-tête est simple :

 header { display: flex; flex-direction: column; align-items: center; justify-content: center; }

Je change la couleur des éléments de texte de mon en-tête :

 header h1 { color: #fed36e; } header p { color: #fff; }

Ensuite, j'applique des marges horizontales négatives, de sorte que mon en-tête chevauche les éléments proches :

 header { margin-right: 1.5vw; margin-left: -1.5vw; }

Mon élément principal n'a pas besoin de style supplémentaire et je le place sur ma grille en utilisant les numéros de ligne :

 main { grid-column: 7 / -1; }

Les éléments nécessaires au développement d'un design n'ont pas besoin d'être en HTML. Les pseudo-éléments créés en CSS peuvent prendre leur place, ce qui maintient le HTML libre de toute présentation. J'utilise un pseudo-élément :before appliqué au corps :

 body:before { display: block; content: ""; }

Ensuite, j'ajoute une image de fond d'URI de données qui couvrira l'intégralité du pseudo-élément quelle que soit sa taille :

 body:before { background-image: url("data:image/svg+xml…"); background-position: 0 0; background-repeat: no-repeat; background-size: cover; }

CSS Grid traite les pseudo-éléments comme n'importe quel autre, me permettant de placer ces blocs colorés dans ma grille en utilisant des numéros de ligne :

 body:before { grid-column: 1 / 4; }

Alors que les développeurs utilisent principalement des points d'arrêt de requête multimédia pour introduire des modifications importantes dans une mise en page, parfois, seules des modifications mineures sont nécessaires pour peaufiner une conception. Jeremy Keith appelle ces moments des « points de réglage ».

Cette conception inspirée de McBain de taille moyenne fonctionne bien dans les grandes tailles, mais je souhaite modifier sa disposition et ajouter plus de détails aux très grands écrans. Je commence par ajouter quatre colonnes supplémentaires à ma grille :

 @media (min-width: 82em) { body { grid-template-columns: repeat(12, 1fr); } }

Ensuite, je repositionne les blocs de couleur générés, l'en-tête et les éléments principaux en utilisant de nouveaux numéros de ligne :

 body:before { grid-column: 1 / 8; } header { grid-column: 7 / 10; } main { grid-column: 9 / -1; }

Ces éléments se chevauchent maintenant, donc pour les empêcher de former de nouvelles lignes dans ma grille, je leur donne à tous la même valeur grid-row :

 body:before, header, main { grid-row: 1; }

Cette modification de ma conception ajoute un autre bloc de couleur entre l'en-tête et le principal. Pour préserver la sémantique de mon HTML, j'ajoute un pseudo-élément et une image URI de données avant mon contenu principal :

 main:before { display: block; content: url("data:image/svg+xml…"); float: left; margin-right: 2vw; width: 10vw; }

Déconstruire les images-type

Au début de sa carrière, les créations de pochettes de disques d'Emmett McBain ont montré qu'il avait un flair pour la typographie. Il jouait souvent avec le type, le déconstruisant et le reconstruisant pour former des formes inattendues. Ce contrôle sur le type n'a jamais été facile en ligne, mais SVG rend presque tout possible.

Cette prochaine conception inspirée de McBain repose sur SVG et seulement deux éléments HTML structurels; un en-tête qui contient le grand graphique basé sur le type, un élément principal pour mon contenu :

 <header> <h1>…</h1> <p>…</p> <svg>…</svg> </header> <main> <h2>…<h2> <div>…</div> <svg>…</svg> </main>

J'ai besoin de très peu de styles de base pour commencer à développer ce design. Tout d'abord, j'ajoute des couleurs d'arrière-plan et de premier plan et un rembourrage à l'intérieur de mes deux éléments :

 body { background-color: #fff; color: #262626; } header, main { padding: 2rem; }

Deuxièmement, je définis des styles pour mon type qui incluent à la fois les titres et le paragraphe de texte qui les suit :

 h1, h2, h1 + p { letter-spacing: .05em; line-height: 1.4; text-transform: uppercase; }

Je donne à mon contenu principal un fond violet riche qui correspond à la couleur de la Citroën dans le panneau ci-contre :

 main { background-color: #814672; color: #fff; }

Cette conception est dominée par un grand graphique qui comprend un profil de la Citroën DS et une image de type stylisée des mots "Champion de France". L'arrangement de ses lettres serait difficile à réaliser en utilisant le positionnement et les transformations CSS, faisant de SVG le choix parfait.

Ce SVG contient trois groupes de chemins. Le premier comprend les contours des mots "Champion de :"

 <svg> <g> <path>…</path> </g> </svg>

Le groupe suivant comprend des chemins pour l'arrangement de lettres aux couleurs vives. Je donne à chaque lettre un attribut id unique pour permettre de les styliser individuellement :

 <g> <path>…</path> <path>…</path> <path>…</path> <path>…</path> <path>…</path> <path>…</path> </g>

Ensuite, j'ajoute des attributs de classe au groupe de chemins qui composent le profil Citroën DS. Avec ces attributs en place, je peux ajuster les couleurs de la voiture pour compléter différents thèmes de couleurs et même les modifier selon les points d'arrêt de la requête multimédia :

 <g> <path class="car-paint">…</path> <path class="car-tyres">…</path> <path class="car-wheels">…</path> <path class="car-shadow">…</path> <path class="car-lights">…</path> <path class="car-stroke">…</path> </g>

Les écrans de taille moyenne me permettent de peaufiner les positions de mon profil Citroën DS et de mon image type :

 @media (min-width: 48em) { header svg { margin-bottom: -6rem; transform: scale(.85) translateY(-4rem) rotate(-20deg); } }

L'ordre de ces transformations est important, car diverses combinaisons de rotation, d'échelle et de translation donnent des résultats subtilement différents. Ensuite, j'ajoute des colonnes à mon contenu principal :

 main div { column-width: 14em; column-gap: 2rem; }

Jusqu'à présent, ce contenu principal venait après mon en-tête dans le flux de documents. Pour les écrans plus grands, je veux que ces éléments soient côte à côte, j'applique donc les propriétés de la grille et douze colonnes au corps :

 @media (min-width: 48em) { body { display: grid; grid-template-columns: repeat(12, 1fr); } }

Je place l'en-tête et le principal dans ma grille en utilisant les numéros de ligne. L'en-tête s'étend sur sept colonnes, tandis que le contenu principal ne s'étend que sur cinq, produisant une mise en page asymétrique à partir d'une grille symétrique :

 header { grid-column: 1 / 8; } main { grid-column: 8 / -1; }

Mise à l'échelle du texte graphique

La distinction entre SVG et HTML est devenue floue, plus j'utilise SVG dans mon travail. SVG est un format basé sur XML et est tout à fait à l'aise lorsqu'il est intégré à HTML. Cette conception finale inspirée de McBain s'appuie sur SVG en HTML non seulement pour ses images saisissantes, mais aussi pour le texte.

Pour développer ce design rouge et noir saisissant, j'ai besoin de quatre éléments HTML structurels. Un en-tête contient une image de l'emblématique Citroën DS. La division des bannières comprend un gros titre développé à l'aide de texte SVG. L'élément principal comprend mon texte courant, et enfin un aparté pour le contenu supplémentaire :

 <svg>…</svg> <header> <svg>…</svg> </header> <div> <svg>…</svg> </div> <main> <div> <svg role="heading" aria-level="1">…</svg> </div> <div class="content"> <p class="dropcap">…</p> <p>…</p> </div> </main> <aside> <small>…</small> <svg role="heading" aria-level="2">…</svg> <p>…</p> <figure>…</figure> <svg role="heading" aria-level="2">…</svg> <p>…</p> </aside>

J'avais l'habitude de penser qu'utiliser SVG pour rendre du texte était aussi inapproprié que de définir du texte dans des images, mais après avoir davantage utilisé SVG, je me suis rendu compte que j'avais tort.

Dans le numéro 8, j'ai expliqué comment, comme le texte HTML, le texte SVG est accessible et sélectionnable. Il a également l'avantage d'être stylé à l'infini en utilisant des chemins de détourage, des remplissages dégradés, des filtres, des masques et des traits.

Le titre de la division de la bannière comprend deux éléments de texte. Le premier contient le grand mot "Champion", le second contient "de France". Des paires de coordonnées x et y sur chaque élément tspan placent ces mots précisément là où je veux qu'ils développent une solide dalle de texte :

 <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 850 360"> <title>Champion de France</title> <g fill="#ff" fill-rule="evenodd"> <text> <tspan class="title__dropcap" x="0" y="240">C</tspan> <tspan class="title" x="180" y="160">hampion</tspan> </text> <text> <tspan class="title__small" x="600" y="260">de France</tspan> </text> </g> </svg>

Que je choisisse d'incorporer ce SVG dans mon code HTML ou de créer un lien vers celui-ci en tant qu'image externe, je peux utiliser CSS pour définir son style. Ce titre est une image liée, j'ajoute donc mes styles au fichier SVG :

 <svg> <style type="text/css"> <![CDATA[ text { color: #fff; } .title { font-family: Clarendon URW; font-size: 150px; } .title__dropcap { font-family: Clarendon URW; font-size: 300px; text-transform: lowercase; } .title__small { font-family: Obviously; font-size: 85px; text-transform: uppercase; } ]]> </style> </svg>

Je commence par ajouter des couleurs de base et des styles de typographie. J'ai choisi de mettre en retrait le début de chaque nouveau paragraphe, donc je supprime toutes les marges inférieures et j'ajoute un retrait large de 2ch à chaque paragraphe suivant :

 body { background-color: #a73448; color: #fff; } .content p { margin-bottom: 0; } .content p + p { text-indent: 2ch; }

Le fond gris foncé et le texte rouge de mon élément de côté sont opposés à ceux ailleurs dans ma conception. L'augmentation de la luminosité et de la saturation rend les couleurs plus éclatantes sur des arrière-plans sombres :

 aside { background-color: #262626; color: #d33c56; }

Les écrans de taille moyenne me permettent de peaufiner la conception de mon contenu pour tirer le meilleur parti de l'espace supplémentaire disponible. J'utilise deux propriétés de mise en page à plusieurs colonnes différentes. Tout d'abord, en spécifiant deux colonnes de largeurs variables pour ma division de contenu. Ensuite, n'importe quel nombre de colonnes qui auront toutes une largeur de 16em :

 @media (min-width: 48em) { .content { column-count: 2; column-gap: 2rem; } aside { column-width: 16em; column-gap: 2rem; } }

La plupart de mon style est visible pour les personnes qui utilisent même les plus petits écrans, donc le développement d'une disposition sur grand écran implique l'application de propriétés de grille et de douze colonnes à l'élément body :

 @media (min-width: 64em) { body { display: grid; grid-template-columns: repeat(12, 1fr); } }

Je place le logo Citroën dans la première colonne :

 body > svg { grid-column: 1; }

Ensuite, l'en-tête qui contient une image de l'emblématique DS s'étend sur quatre colonnes :

 header { grid-column: 3 / span 4; }

La division de la bannière avec son titre SVG élégant et le texte courant de mon contenu principal occupent huit colonnes :

 #banner, main { grid-column: 1 / span 8; }

Et enfin, l'élément de côté à thème inversé occupe trois colonnes à droite de mon dessin. Pour m'assurer que ce contenu s'étend sur toutes les lignes de haut en bas de ma mise en page, je le place en utilisant les numéros de ligne :

 aside { grid-column: 10 / -1; grid-row: 1 / 6; }

En savoir plus sur la série

• Décisions de conception inspirées : Magazine Avaunt
• Décisions de conception inspirées : des questions urgentes
• Décisions de conception inspirées : Ernest Journal
• Décisions de conception inspirées : Alexey Brodovitch
• Décisions de conception inspirées : Bea Feitler
• Décisions de conception inspirées : Neville Brody
• Décisions de conception inspirées : Otto Storch
• Décisions de conception inspirées : Herb Lubalin
• Décisions de conception inspirées : Max Huber
• Décisions de conception inspirées : Giovanni Pintori
• Décisions de conception inspirées : Bradbury Thompson

NB : Les membres de SmashingLes membres de Smashing ont accès à un PDF magnifiquement conçu du magazine Inspired Design Decisions d'Andy et à des exemples de code complets tirés de cet article. Vous pouvez acheter le PDF et les exemples de ce numéro ainsi que tous les autres numéros directement sur le site Web d'Andy.