Parallèlement à la publicité, la vente est un compétence que les gens désapprouvent souvent. C'est vrai: personne n'aime que quelqu'un les contraint 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 être fréquemment 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 qu'il était aussi crucial de comprendre les problèmes de quelqu'un 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 commencé à vendre mes 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 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 non seulement avait un talent incroyable, il savait aussi comment vendre à d'autres Afro-Américains.

Il savait que pour vendre les produits de ses clients, ses créations devaient résonner avec le public noir, en montrant des images auxquelles elles étaient liées 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 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 leurs 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 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 publicité à service complet appartenant à des Afro-Américains aux États-Unis a été fondée en 1958. Cullers croyait que «vendre du noir» nécessitait de «penser le noir» pour que les annonceurs atteignent 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 Emmett McBain nouvellement diplômé.

Avec deux ans d'expérience commerciale derrière lui, McBain quitta Vince Cullers et déménagea chez Playboy Records en tant qu'assistant de rédaction 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 du magazine Billboard.

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 travaillé régulièrement avec Mercury Records et il a conçu plus de 75 pochettes d'albums à l'âge de 24 ans.

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

Avant les années 1960, les consommateurs noirs étaient en grande partie ignoré par les fabricants de marques et par le secteur de la publicité grand public qui les a servis. 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 peu de revenus disponibles. Dans l'atmosphère politiquement chargée de l'époque, les entreprises craignaient également 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.

Le travail de McBain présentait 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 foncée.»

En 1971, Emmett McBain s'est associé à Burrell pour former Burrell-McBain Inc., qu'ils ont décrit dans un publicité en tant qu ’« 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 cowboy blanc emblématique é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, en les aidant à devenir la plus grande agence de publicité appartenant à des Noirs en Amérique.

McBain a quitté l'agence qu'il a co-fondée en 1974 et s'est lancé 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 AIGA, la Society of Typographic Arts et les Art Directors Clubs 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 de 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 je suis particulièrement friands de 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. Le travail d’Emmett McBain a beaucoup à nous inspirer.

Alignement du 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 aparté qui comprend un tableau des numéros de production Citroën DS:

  

  

    
    
  



  
… 

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

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

 body {
couleur de fond: #fff;
couleur: # 262626; } 

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

 header> svg {
marge: 0 auto;
largeur: 80px; }

header div svg {
hauteur max: 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 {
rembourrage: .75rem 0;
bordure droite: solide 5px # 262626;
bordure gauche: solide 5px # 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:

 side table {
largeur: 100%;
bordure droite: solide 5px # 262626;
bordure gauche: solide 5px # 262626;
border-collapse: effondrement; } 

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

 à côté de {
padding-right: .75rem;
padding-left: .75rem;
bordure droite: solide 5px # 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:

 à part,
de côté td {
largeur: 50%;
box-dimensionnement: 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 aussi 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:

 apart td {
text-align: droite; } 

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, par contre, incluent des nombres qui se trouvent sur la ligne de base.

Les fonctionnalités OpenType contrôlent également la largeur des chiffres, ce qui permet de comparer des chaînes de numéros dans une table plus facile. 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:

 apart td {
font-variant-numeric: lignes-nums tabular-nums; } 

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:

 apart: after {
contenu: url ("données: image / svg + xml…"); } 

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

 @media (min-width: 48em) {

entête {
affichage: flex;
flex-direction: ligne-inverse;
align-items: flex-start; }
} 

Plus tôt, 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 garder les titres et le logo séparés:

 header div {
flex-grow: 1;
marge droite: 2vw; } 

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

 main,
de côté {
affichage: grille;
grille-modèle-colonnes: répéter (3, 1fr);
écart: 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 {
grille-colonne: 1;
contenu: url ("données: image / svg + xml…"); }

main: après {
grille-colonne: 3;
contenu: url ("données: 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:

 de côté: avant {
grille-colonne: 1;
contenu: url ("données: image / svg + xml…"); }

à part: après {
grille-colonne: 3;
contenu: url ("données: 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 {
se justifier: centre;
écriture-mode: vertical-rl;
transformer: tourner (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 un espace égal entre ses lignes:

 aparté table {
hauteur: 100%; } 

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

 @media (min-width: 64em) {

corps {
affichage: grille;
grille-modèle-colonnes: 1fr 1fr;
écart: 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 {
grille-colonne: 1 / -1; }

principale {
grille-colonne: 1; }

de côté {
grille-colonne: 2; } 

Regard non structuré

Les couleurs vives et les formes irrégulières des blocs de ce prochain dessin 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:

  
  
… 
  
… 
  



  … 
  
… 
  
… 

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

 body {
rembourrage: 2rem;
couleur de fond: #fff;
couleur: # 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 {
rembourrage: 2rem 2rem 4rem;
couleur de fond: # 262626; }

en-tête h1 {
couleur: # c2ce46; }

en-tête p {
couleur: # fc88dc; } 

Les formes irrégulières sont un aspect de cette conception que je veux voir visible à chaque taille d'écran, j'utilise donc un chemin polygonal pour dé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: polygone (…);
clip-path: polygone (…); } 

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. Premièrement, je stylise le texte du petit élément:

 main small {
taille de la police: .8em;
espacement des lettres: .15em;
hauteur de ligne: 0,8;
text-transform: majuscule; } 

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

 main small: after {
contenu: "";
bloc de visualisation;
marge gauche: .75rem;
bordure inférieure: 1px solide # 262626; } 

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 lui permet de changer sa largeur pour compléter des chaînes de texte de plus en plus courtes:

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

petit principal: après {
flex-grow: 1; } 

J'apprécie les surprises, et mon titre «Champion de France» de deuxième niveau n'a pas à voir.

Il y a presque dix ans, Dave Rupert a publié Lettering.js, un plugin jQuery qui utilise Javascript pour envelopper lettres individuelles, lignes et mots texte 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  d  e   F  r  a  n [19659126] c  e 

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

 h2 span: nth-of-type (1) {
couleur: # c43d56; }

portée h2: nième de type (2) {
couleur: # 905dd8; }

portée h2: nième de type (3) {
couleur: # 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 cette conception inattendue.

Tout d'abord, j'applique des propriétés de grille et une grille symétrique à huit colonnes à l'élément du corps: [19659051] @media (largeur min: 48em) {

corps {
affichage: grille;
grille-modèle-colonnes: répéter (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 {
grille-colonne: 4/7;
couleur de fond: # 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 {
affichage: flex;
flex-direction: colonne;
align-items: centre;
justify-content: centre; } 

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

 header h1 {
couleur: # fed36e; }

en-tête p {
couleur: #fff; } 

Ensuite, j'applique des marges horizontales négatives, donc mon en-tête chevauche les éléments qui lui sont proches:

 header {
marge droite: 1.5vw;
marge gauche: -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 {
grille-colonne: 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: before appliqué au corps:

 body: before {
bloc de visualisation;
contenu: ""; } 

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 ("données: image / svg + xml…");
position de fond: 0 0;
background-repeat: pas de répétition;
background-size: couverture; } 

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

 body: before {
grille-colonne: 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, seuls des changements mineurs sont nécessaires pour peaufiner une conception. Jeremy Keith appelle ces moments des «tweakpoints».

Ce design d'inspiration McBain de taille moyenne fonctionne bien dans les plus grandes tailles, mais je souhaite modifier sa disposition et ajouter plus de détails aux écrans les plus grands. Je commence par ajouter quatre colonnes supplémentaires à ma grille:

 @media (min-width: 82em) {

corps {
grille-modèle-colonnes: répétition (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 {
grille-colonne: 1/8; }

entête {
grille-colonne: 7/10; }

principale {
grille-colonne: 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,
entête,
principale {
ligne de grille: 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 {
bloc de visualisation;
contenu: url ("données: image / svg + xml…");
float: gauche;
marge droite: 2vw;
largeur: 10vw; } 

Déconstruction des images-types

Au début de sa carrière, les dessins de pochette 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.

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 fondations 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 {
couleur de fond: #fff;
couleur: # 262626; }

entête,
principale {
rembourrage: 2rem; } 

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

 h1,
h2,
h1 + p {
espacement des lettres: .05em;
hauteur de ligne: 1,4;
text-transform: majuscule; } 

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

 main {
couleur de fond: # 814672;
couleur: #fff; } 

Cette conception est dominée par un grand graphique qui comprend un profil de la Citroën DS et une image type stylisée des mots «Champion de France». L'agencement de ses lettres serait difficile à accomplir 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 l'agencement de lettres aux couleurs vives. Je donne à chaque lettre un attribut id unique pour permettre de les styliser individuellement:

  … 
  … 
  … 
  … 
  … 
  … 

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 changer à travers les points d'arrêt des requêtes multimédias:

  … 
  … 
  … 
  … 
  … 
  … 
 

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

 @media (largeur min: 48em) {

header svg {
margin-bottom: -6rem;
transform: échelle (.85) translateY (-4rem) rotation (-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 {
largeur de colonne: 14em;
écart de colonne: 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) {

corps {
affichage: grille;
grille-modèle-colonnes: répétition (12, 1fr); }
} 

Je place l'en-tête et le main 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 {
grille-colonne: 1/8; }

principale {
grille-colonne: 8 / -1; } 

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 dernière conception inspirée de McBain repose sur SVG en HTML non seulement pour ses images saisissantes, mais aussi pour le texte.

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 aparté pour le contenu supplémentaire:

  



  



  

    
  
  
  

    
… 
    
… 
  


 

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 utilisé davantage SVG, je me suis rendu compte que j'avais tort.

Dans le numéro 8, j'ai expliqué comment le texte HTML, SVG le texte est accessible et sélectionnable. Elle présente également l’avantage d’être stylisée à 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:

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 du bas et ajoute un retrait de 2 canaux de large à chaque paragraphe suivant:

 body {
couleur de fond: # a73448;
couleur: #fff; }

.content p {
marge inférieure: 0; }

.content p + p {
retrait de texte: 2 canaux; } 

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:

 apart {
couleur de fond: # 262626;
couleur: # d33c56; } 

Les écrans de taille moyenne me permettent de modifier 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) {

.contenu {
nombre de colonnes: 2;
écart de colonne: 2rem; }

de côté {
largeur de colonne: 16em;
écart de colonne: 2rem; }
} 

La ​​plupart de mes styles sont visibles pour les personnes qui utilisent même les plus petits écrans, donc développer une disposition grand écran implique d'appliquer des propriétés de grille et douze colonnes à l'élément body:

 @media (min-width: 64em) {

corps {
affichage: grille;
grille-modèle-colonnes: répétition (12, 1fr); }
} 

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

 body> svg {
grille-colonne: 1; } 

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

 header {
grille-colonne: 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,
principale {
grille-colonne: 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 couvre chaque ligne de haut en bas de ma mise en page, je le place en utilisant les numéros de ligne:

 de côté {
grille-colonne: 10 / -1;
ligne de grille: 1/6; } 

En savoir plus sur la série

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

(ra, yk, il)