Catégories
Plugin et site web

La direction artistique en tant qu'équité sociale – Smashing Magazine

Emmett McBain était un graphiste noir américain dont le travail a eu un impact remarquable sur la représentation des Noirs américains dans la publicité. Il a cofondé ce qui est devenu la plus grande agence appartenant à des Noirs aux États-Unis. McBain a conçu près de 75 pochettes de disques à l'âge de 24 ans, et dans l'avant-dernière de sa série Inspired Design Decisions, Andy Clarke expliquera comment son travail peut inspirer ce que nous concevons pour le Web.

Avec la publicité, la vente est une compétence sur laquelle les gens désapprouvent souvent. C’est vrai: personne n’aime que quelqu'un les force ou les 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 souvent être rejeté. J'ai passé du temps à parler du travail de quelqu'un avant de mentionner les produits que mon entreprise me payait 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 extrêmement bien servi depuis que j'ai arrêté de vendre des appareils photo 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 une réalité de la vie que ce n’est pas toujours la meilleure idée ou la meilleure exécution qui remporte un argumentaire ou une présentation. C’est souvent l’idée qui est vendue par le meilleur vendeur.

La vente d'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 et votre travail. Faites-leur sentir qu'ils font tellement partie de vos idées qu'ils doivent simplement acheter chez vous.

En tant que graphiste noir américain qui a travaillé dans la publicité dans les années 50, 60 et 70, Emmett McBain avait non seulement un talent incroyable, mais il savait également comment vendre à d'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 elles se rapportaient et un langage qui leur était familier.

En tant qu’Anglais à la barbe grise, il m’est difficile de comprendre des perspectives culturelles différentes des miennes. Mais j’ai appris l’importance de créer des designs qui parlent aux gens, quel qu’ils soient et quel que soit leur lieu de résidence. Non seulement pour leur vendre les produits de mes clients, mais pour que chacun sente que ses besoins sont écoutés et leur importance comprise.

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 est diplômé 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 des Noirs» nécessitait «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 nouvellement diplômé Emmett McBain.

De gauche à droite: Shirley & Lee, Let The Good Times Roll, 1956. Basso-Valdambrini Quintet & mdash; Excitant 6, 1967. Davis, Miles & mdash; Blue Haze par Tom Hannan, 1956. Bird & mdash; Diz & mdash; Bud & mdash; Max par Burt Goldblatt, 1954.
De gauche à droite: Shirley & Lee, Let The Good Times Roll, 1956. Basso-Valdambrini Quintet – Exciting 6, 1967. Davis, Miles – Blue Haze de Tom Hannan, 1956. Bird – Diz – Bud – Max de Burt Goldblatt, 1954. (Grand aperçu)

Avec deux ans d'expérience commerciale derrière lui, McBain a quitté Vince Cullers et a rejoint Playboy Records en tant qu'assistant de montage artistique. 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 de l'album de la semaine par Billboard Magazine.

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

Plusieurs designs de pochettes de disques par McBain Associates au cours des années 1960.
Plusieurs designs de pochettes de disques par McBain Associates au cours des années 1960. (Grand aperçu)

McBain est retourné chez 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 des fabricants de marque et de l'industrie publicitaire grand public qui les servait. La publicité destinée aux Afro-Américains était principalement limitée 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 les consommateurs noirs comme ayant un faible revenu disponible. 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 minime. 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 accessibles au public afro-américain qui, à ce moment-là, dépensait près de 30 milliards de dollars chaque année.

À gauche: Où est la saveur, publicité pour Philip Morris par Burrell-McBain Inc. Centre: True Two, une publicité pour Lorillard Tobacco Company par Vince Cullers Advertising, Inc. en 1968. À droite: Black is Beautiful, une publicité pour Vince Cullers Advertising , Inc., direction créative par Emmett McBain en 1968.
À gauche: Où est la saveur, publicité pour Philip Morris par Burrell-McBain Inc. Centre: True Two, une publicité pour Lorillard Tobacco Company par Vince Cullers Advertising, Inc. en 1968. À droite: Black is Beautiful, une publicité pour Vince Cullers Advertising , Inc., direction créative par Emmett McBain en 1968. (Grand aperçu)

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 des cigarettes mentholées de Newport, Marlboro de Philip Morris et des produits de beauté SkinFood Cosmetics spécialement 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 son futur partenaire, le rédacteur Thomas Burrell l'a dit – «les Noirs ne sont pas des Blancs à la peau sombre.»

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, l'emblématique cowboy blanc était le visage des cigarettes Marlboro. Mais, l'homme Marlboro de McBain était plus apparenté aux 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 continué à gagner Coca-Cola et McDonald 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 co-fondé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 a depuis été reconnu par l'AIGA, la Society of Typographic Arts et les clubs des directeurs artistiques de Chicago et 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 et la manière dont il a déconstruit et reconstruit les caractères sont inspirants. Il y a beaucoup de choses à nous inspirer dans le travail d'Emmett McBain.

Aligner le contenu vertical

Quel que soit le style graphique que je choisis, le code HTML nécessaire pour implémenter 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 les titres, principal, et un côté qui comprend un tableau des numéros de production Citroën DS:

La direction verticale et les cercles de ce premier dessin ont été inspirés par la pochette du disque Guitars Woodwind & Bongos d'Emmett McBain, 1960.
La direction verticale et les cercles de ce premier dessin ont été inspirés par la pochette d’enregistrement de Guitars Woodwind & Bongos d’Emmett McBain, 1960. (Grand aperçu)

Pour l'évolutivité à travers les tailles d'écran, j'utilise des SVG pour les deux titres de mon en-tête. L'utilisation de SVG offre 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 la technologie 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:


  Citroën DS
  
Quand quelqu'un lit des données tabulaires numériques, ses yeux parcourent les colonnes puis les lignes.
Quand quelqu'un lit des données tabulaires numériques, ses yeux parcourent les colonnes puis les lignes. (Grand aperçu)

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 en pixels 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 son design inspirant, 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 HTML, j'ajoute des bordures sombres sur les côtés gauche et droit 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 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 ma table, cette bande verticale descend 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 ces chiffres de production, ses yeux parcourent la colonne des années. Ensuite, ils suivent pour voir combien de voitures Citroën a fabriquées cette année-là. 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 vers la droite:

aside td {
text-align: right; }

En fonction des 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 doublure plutôt que des chiffres à l'ancienne. Certains chiffres à l'ancienne – y compris 3, 4, 7 et 9 – ont des descendants qui peuvent descendre en dessous de la ligne de base. Celles-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.

Chiffres de doublure
(Grand aperçu)

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

aside td {
font-variant-numeric: lining-nums tabular-nums; }
chiffres proportionnels et tabulaires
(Grand aperçu)

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

aside:after {
content: url("data:image/svg+xml…"); }
données tabulaires numériques
Quand quelqu'un lit des données tabulaires numériques, ses yeux parcourent les colonnes puis les lignes. (Grand aperçu)

Je suis souvent surpris du peu de changements que je dois apporter pour développer des conceptions pour plusieurs tailles d'écran. Le passage de petits écrans à des conceptions de taille moyenne ne nécessite souvent que des modifications mineures des tailles de 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 effectuer ce changement, simplement en changeant la valeur de flex-direction par défaut de ligne en flex-direction: row-reverse:

@media (min-width: 48em) {

header {
display: flex;
flex-direction: row-reverse;
align-items: flex-start; }
}

Auparavant, j'avais donné à mon logo une largeur précise. Mais, je veux que les titres remplissent tout l'espace horizontal restant, donc je donne à leur division parent 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 ce design de taille moyenne, j'ai développé la mise en page en utilisant 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: après le remplacement du contenu de l'image générée, j'ai ajouté 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, donc pour eux, je donne à ma table des nombres de production une hauteur explicite qui ajoute une quantité égale d'espace entre ses lignes:

aside table {
height: 100%; }

Le plein effet de ce design inspiré de McBain survient lorsque les écrans sont suffisamment larges pour afficher les éléments principaux et latéraux côte à côte. 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 de côté en utilisant des numéros de ligne, avec 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; }
À gauche: motifs circulaires dans cette version de mon dessin. À droite: des portraits colorés de l'emblématique Citroën DS remplacent les cercles d'origine.
À gauche: motifs circulaires dans cette version de mon dessin. À droite: des portraits colorés de l'emblématique Citroën DS remplacent les cercles d'origine. (Grand aperçu)

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 la disposition de ces mises en page puisse sembler non structurée, le code dont j'ai besoin pour la développer ne l'est certainement pas. En fait, il n'y a que deux éléments structurels, l'en-tête et le principal:

design a été inspiré par la pochette du disque The Legend of Bix d'Emmett McBain
Les couleurs vives et les formes irrégulières de cette conception ont été inspirées par la pochette du disque The Legend of Bix d'Emmett McBain, 1959. (Grand aperçu)

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 dessin:

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 visible à chaque taille d'écran, j'utilise donc un chemin de polygone pour découper l'en-tête. Seules les zones à l'intérieur de la zone de 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 dessin 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 HTML, mais plutôt opter 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; }
Contenu coloré
Le contenu coloré donne vie à ce petit écran. (Grand aperçu)

L'ajout de propriétés flex 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, il peut changer sa largeur pour compléter des chaînes de texte de plus en plus courtes:

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

main small:after {
flex-grow: 1; }

J’aime les surprises, et mon titre de Champion de France de deuxième niveau a plus qu’à l’œil.

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

Champion de France

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 design réactif 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 des propriétés de 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. Les blocs de couleur étant désormais 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 le contenu de mon 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 des numéros de ligne:

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

Les éléments nécessaires pour développer une conception n'ont pas besoin d'être au format HTML. Les pseudo-éléments créés en CSS peuvent prendre leur place, ce qui empêche le HTML de toute présentation. J'utilise un pseudo-élément: avant appliqué au corps:

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

Ensuite, j'ajoute une image d'arrière-plan URI de données qui couvrira tout le 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 les autres, 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 changements significatifs dans une mise en page, parfois, seules des modifications mineures sont nécessaires pour modifier une conception. Jeremy Keith appelle ces moments des «tweakpoints».

Cette conception inspirée de McBain de taille moyenne fonctionne bien dans les plus 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, l'en-tête et les éléments principaux générés 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 de ligne de grille:

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; }
version monochrome et blocs de couleurs vives dans un design choisi
La version monochrome (à gauche) a une sensation entièrement différente des blocs aux couleurs vives dans le design que j'ai choisi (à droite). (Grand aperçu)

Déconstruction des images-types

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 du type n'a jamais été facile en ligne, mais SVG rend presque tout possible.

déconstruction et reconstruction de la conception
Le déconstruire et le reconstruire pour former des formes inattendues ajoute du caractère même aux plus petits écrans. (Grand aperçu)

Ce prochain design inspiré 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 de mon contenu:

J'ai besoin de très peu de styles de fondation pour commencer à développer cette conception. Tout d'abord, j'ajoute des couleurs d'arrière-plan et de premier plan et un remplissage à 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 comprend à la fois les en-têtes 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 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'agencement 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 grandes lignes des mots «Champion de:»




  


Le groupe suivant comprend des chemins pour la disposition des lettres aux couleurs vives. Je donne à chaque lettre un attribut identifiant unique pour permettre de les styliser individuellement:


  
  
  
  
  
  
mise en page avec colonnes
Les écrans de taille moyenne me permettent de transformer l'image-type et d'introduire des colonnes dans mon contenu principal. (Grand aperçu)

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


  
  
  
  
  
  

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

@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 vient après mon en-tête dans le flux de documents. Pour les écrans plus grands, je veux que ces éléments soient placés côte à côte, j'applique donc des propriétés de 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 des numéros de ligne. L'en-tête s'étend sur sept colonnes, tandis que le contenu principal n'en couvre que cinq, produisant une mise en page asymétrique à partir d'une grille symétrique:

header {
grid-column: 1 / 8; }

main {
grid-column: 8 / -1; }
conception d'image type
L'image de type dans ce dessin a été inspirée par la pochette du disque Caravan d'Emmett McBain pour Eddie Layton et son orgue. (Grand aperçu)

Mise à l'échelle du texte graphique

La distinction entre SVG et HTML s'est estompée, plus j'utilise SVG dans mon travail. SVG est un format basé sur XML et est tout à fait à la maison lorsqu'il est incorporé dans HTML. Cette conception finale inspirée de McBain repose sur SVG en HTML non seulement pour ses images saisissantes, mais aussi pour le texte.

Conception inspirée de McBain basée sur SVG en HTML
La plupart de mon style est visible pour les personnes qui utilisent même les plus petits écrans. (Grand aperçu)

Pour développer ce design rouge et noir frappant, 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 grand titre développé à l'aide de texte SVG. L'élément principal comprend mon texte courant, et enfin un côté pour le contenu supplémentaire:



J'avais l'habitude de penser que l'utilisation de SVG pour rendre du texte était aussi inappropriée que de définir du texte dans des images, mais après avoir utilisé davantage 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 présente également l’avantage d’être stylisé à l’infini en utilisant des chemins de détourage, des remplissages en dégradé, des filtres, des masques et des traits.

Le titre de la division bannière comprend deux éléments de texte. Le premier contient le grand mot «Champion», le second contient «de France». Les 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 dalle solide de texte:



Champion de France




  C
  hampion



  de France



Que je choisisse d'incorporer ce SVG dans mon 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:





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, je supprime donc toutes les marges inférieures et ajoute un retrait de 2 canaux de large à 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 vives sur des arrière-plans sombres:

aside {
background-color: #262626;
color: #d33c56; }
conception avec deux propriétés de disposition à plusieurs colonnes différentes
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. (Grand aperçu)

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 disposition à plusieurs colonnes différentes. Tout d'abord, spécifiez 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; }
}
design a été inspiré par Bill Harris d'Emmett McBain, la pochette du disque Jazz Guitar
La typographie de ce dessin a été inspirée par Bill Harris d'Emmett McBain, couverture de disque de guitare jazz, 1960. (Grand aperçu)

La plupart de mes styles sont visibles pour les personnes qui utilisent même les plus petits écrans.Par conséquent, le développement d'une mise en page 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 des bannières 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 chaque ligne de haut en bas de ma mise en page, je le place à l'aide des numéros de ligne:

aside {
grid-column: 10 / -1;
grid-row: 1 / 6; }
design avec une palette de couleurs limitée
Même une palette de couleurs limitée comme celle-ci offre de nombreuses options créatives. (Grand aperçu)

En savoir plus sur la série

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

Éditorial fracassant(ra, yk, il)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *