Des décisions de conception inspirées avec Bradbury Thompson : l'art du design graphique

L'idée de cette série - et du livre qui la suivra - est née d'une conversation informelle, mais l'écrire a eu un impact profond sur moi et sur le travail que je fais pour le Web.

Je suis plus réfléchi dans mon approche de la mise en page et de la manière dont une page et son contenu s'adaptent aux différentes tailles d'écran. J'ai une bien meilleure compréhension de la façon dont la composition aide à la communication et peut améliorer les histoires que je raconte sur les entreprises, les produits ou les services de mes clients.

J'ai découvert comment mieux créer un rythme qui coule de page en page. J'ai appris comment ce rythme produit des conceptions visuelles plus attrayantes et des expériences engageantes, et à quel point même les grilles les plus simples peuvent être flexibles lorsqu'elles sont abordées avec imagination.

Je suis devenu fasciné par la façon dont les directeurs artistiques de magazines, dont Alexey Brodovitch et Bea Feitler, réunissaient images et textes. Ma connaissance de la typographie s'est développée parallèlement à mon enthousiasme pour les caractères expressifs et divertissants. Il est peu probable que je fasse jamais du texte aussi beau que Herb Lubalin ou aussi difficile que Neville Brody, mais je suis plus confiant pour expérimenter.

Ce projet m'a donné la confiance nécessaire pour – comme Ruth Ansel l'a suggéré – «sortir de ce qui est attendu», faire des choix confiants et faire confiance à mon instinct quand quelque chose me semble juste. J'ai appris à canaliser mon attitude souvent rebelle à la pensée de conception conventionnelle pour développer de nouvelles solutions à des problèmes de conception souvent quotidiens.

Nous travaillons dans une industrie qui est maintenant davantage dominée par les aspects académiques, mécaniques et techniques de la conception. Le développement de cette série a renforcé pour moi que si ces activités sont importantes, comme l'a écrit Giovanni Pintori, nous "avons besoin de logique et d'imagination dans une égale mesure".

Comme Neville Brody l'a expliqué, "Une fois que vous avez enfreint les règles, tout est littéralement possible." La pensée non conventionnelle ne doit pas nécessairement se faire au détriment de la convivialité. Apprendre comment les gens interagissent avec un site Web ou utilisent un produit ne devrait pas dicter une conception, mais plutôt fournir une plate-forme sur laquelle développer des expériences engageantes, divertissantes et finalement plus mémorables.

Découvrir le travail de designers de différentes époques et de divers domaines n'a pas seulement inspiré mes propres idées, cela m'a donné l'envie d'en savoir plus. Trouver de nouvelles sources d'inspiration est devenu une obsession presque quotidienne, et même si les murs de mon studio ne sont peut-être pas encore aussi remplis que ceux de Ruth Ansel et Bea Feitler, mes bibliothèques, mes tables basses et mon bureau débordent presque de ma collection de livres de design.

Pendant longtemps, j'ai eu le sentiment tenace que le Web peut bien plus que ce que nous en faisons. Chacun des designers que j'ai présentés tout au long de cette série a défié les perceptions, influencé la direction de leur médium et finalement inspiré les autres - moi y compris - à créer un meilleur travail. J'espère que d'une certaine manière, cette série pourra faire de même.

Inspiré par Bradbury Thompson

Étudier l'un des directeurs artistiques et graphistes les plus accomplis du siècle dernier semble être un choix proche de cette série.

Bradbury Thompson est né au Kansas en 1911, et même s'il n'était peut-être pas le plus connu, il ne fait aucun doute qu'il était l'un des plus influents. Thompson a étudié au Washburn College dans sa ville natale de Topeka. Dès le début, il s'est inspiré des dessins imprimés, en particulier des magazines, et a utilisé cette influence pour concevoir les annuaires du collège.

Après avoir obtenu son diplôme de Washburn, Thompson a travaillé pendant cinq ans chez Capper Publications, une imprimerie locale. Ce premier emploi en tant que junior dans une imprimerie n'aurait pas été glamour, mais il a donné à Thompson une large connaissance des techniques de conception et d'impression qu'il utilisera tout au long de sa longue carrière.

Le Kansas dans les années 1930 était bien connu pour ses violentes tempêtes de poussière, mais pas en tant que centre créatif, donc en 1938, Thompson a parcouru les 1 200 milles à l'est jusqu'à New York. Incroyablement, pour un jeune homme fraîchement débarqué du Kansas, l'un de ses premiers projets a été de concevoir le catalogue de l'Exposition universelle de 1939.

Thompson a travaillé pour Rogers-Kellogg-Stillson - l'imprimerie responsable de cette exposition universelle - et a été chargé de travailler sur Westvaco Inspirations for Printers. Cette série de brochures promotionnelles a été publiée par Westvaco Corporation pour présenter sa gamme de papiers d'impression. Chaque numéro ne comportait que seize pages, mais offrait à Thomson une "opportunité rare d'expérimentation à condition qu'un concepteur réceptif".

Westvaco avait publié Inspirations depuis les années 1920 et était déjà largement diffusé auprès d'un public de 35 000 agences, musées, imprimeurs, écoles et universités.

Thomson n'a reçu aucun budget pour commander des illustrations ou des photographies originales pour la publication, mais au lieu de laisser cela limiter ses idées, il l'a utilisé comme une opportunité d'être créatif. Les inspirations ont donné à Thomson la liberté d'expérimenter des idées et des techniques et d'explorer des concepts créatifs. Il est devenu «l'un des meilleurs pilleurs de ma profession» en empruntant des planches imprimées et des séparations d'agences, de magazines et même de musées, pour les incorporer à son travail.

Ces éléments empruntés comprenaient des photographies et des illustrations historiques que Thomson a combinées avec une typographie contemporaine et des couleurs de processus modernes. Pour Victory, une diffusion pour Inspirations en 1953, Thomson a incorporé des illustrations de flèches et les a intégrées dans des cibles faites de couleurs unies. Il emprunte des éléments à l'art populaire et primitif pour en faire des œuvres originales mêlant modernité et tradition. Travailler sur Inspirations a stimulé la créativité de Thompson, et il a ensuite conçu plus de 60 éditions.

Pendant la Seconde Guerre mondiale, Thompson a conçu les derniers numéros de deux magazines de guerre - Victory et USA - qui ont été publiés par l'Office of War Information. Puis en 1945, il devient directeur artistique du magazine Mademoiselle et reste dans ce rôle pendant les quinze années suivantes.

Les tendances éclectiques que Thompson avait développées en travaillant sur Inspirations se sont poursuivies chez Mademoiselle et maintenant avec un budget pour travailler, il a chargé des artistes prometteurs Andy Warhol, Joan Miro, Willem de Kooning et mon artiste pop préféré Jasper Johns d'illustrer pour sa rubrique fiction.

Le travail de magazine de Thomson n'a pas commencé ni pris fin avec Mademoiselle et tout au long de sa carrière, il a travaillé sur plus de trente autres, dont Business Week, la Harvard Business Review et le magazine Smithsonian.

Bradbury Thompson n'est peut-être pas l'un des graphistes les plus célèbres, mais il était largement reconnu dans son industrie, recevant les trois principaux prix de design et plus encore. Ses récompenses comprenaient le prix de la Société nationale des directeurs artistiques de l'année (1950) et la médaille AIGA (1975). En 1977, Thompson a été intronisé au Temple de la renommée du Art Directors Club et, dans les années 1980, il a remporté le premier prix Frederic W. Goudy. puis la Médaille du Type Director's Club.

Dès ses premières expériences de travail à Topeka, Thompson était un designer soucieux des détails qui prêtait attention aux détails les plus fins de sa typographie et au recadrage et au placement précis de ses images. Son utilisation intelligente de palettes souvent simples de couleurs primaires ainsi que d'illustrations historiques en noir et blanc et de formes géométriques ont rendu son travail à la fois classique et contemporain.

Le type est une chose qui m'intéresse constamment. En bref, le type peut être un outil, un jouet et un enseignant. Il peut fournir un moyen de subsistance, un passe-temps pour se détendre, un stimulant intellectuel et une satisfaction spirituelle. Je crois qu'un intérêt avide pour le type inclut nécessairement un zeste pour la vie quotidienne.
—Bradbury Thompson

Comme l'architecture, la typographie est un mélange de beauté et d'utilité fonctionnelle et les conceptions de Thompson combinaient souvent des arrangements typographiques inhabituels avec des formes colorées. Pour Rain, Rain, Rain — une série pour le magazine Mademoiselle en 1958 — il a reproduit le même imperméable portant un parapluie portant un parapluie en cinq silhouettes colorées.

Dans Futural - une diffusion pour Westvaco Inspirations for Printers en 1962 - Thompson a reflété les formes simplifiées des avions sur les pages, en utilisant des lignes au verso et des couleurs unies au recto. Il a régulièrement surimprimé ses formes colorées pour ajouter de la profondeur et de l'intérêt à ses créations.

Grâce à son expérience des technologies d'impression, les conceptions de signature de Thompson n'utilisent souvent que quatre couleurs quadri. Dans l'impression offset, les couleurs quadri sont composées de pourcentages d'encres cyan, magenta, jaune et clé (noire) (CMJN). Ce processus d'impression en quadrichromie est capable de produire une large gamme de couleurs.

Les designs les plus connus de Thompson utilisent souvent ces couleurs dans leur forme la plus pure. Il séparait fréquemment les couleurs et les imprimait dans différentes zones de ses compositions. Nous utilisons le modèle RVB lorsque nous concevons pour les écrans, mais la séparation de ces trois couleurs de la manière dont les couleurs CMJN séparées par Thompson peuvent créer des conceptions inspirantes pour le Web.

Thompson a enseigné le graphisme à la Yale University's School of Art de 1956 jusqu'à sa mort dans le Connecticut en 1995.

Le New York Times Book Review a déclaré que son autobiographie artistique, "The Art of Graphic Design", était un livre dans lequel "l'art et le design sont glorieusement et audacieusement mélangés", ce qui est une bonne représentation de sa stratégie de design en général. "The Art of Graphic Design", a été publié en 1988. Alors que la copie originale à couverture rigide que j'aimerais pour ma collection est maintenant d'un prix prohibitif, des versions de poche réimprimées sont disponibles à des prix plus réalistes.

Traitement de la palette de couleurs

Je commence à implémenter ce premier design en considérant d'abord mon contenu, puis les éléments HTML les plus appropriés pour le décrire. Pour ce design inspiré de Thompson, je n'ai besoin que de quelques éléments, un en-tête, un article et un aparté, plus deux chiffres :

 <header> <svg>…</svg> <h1>…</h1> <svg>…</svg> </div> </header> <article> <main>…</main> </article> <figure>…</figure> <aside>…</aside> <figure>…</figure>

Comme je l'ai expliqué tout au long de cette série, mon processus commence toujours par l'application de styles de base, qui incluent les couleurs et la typographie. J'ajoute une couleur de fond bleu foncé et un texte serif blanc contrastant :

 body { padding: 2rem 0; background-color: #1f455f; font-family: 'serif'; color: #fff; }

Je stylise mes titres en italique, puis j'ajoute des tailles pour les niveaux de titre et les paragraphes :

 h1, h2 { font-style: italic; } h1 { font-size: 2.8rem; } h2 { font-size: 2.027rem; } p { font-size: .8rem; }

Enfin, je colore les légendes qui accompagnent les images de mes personnages avec un vert vif et je mets le texte en italique pour correspondre à mes styles de titre :

 figcaption { font-size: .8rem; font-style: italic; text-align: center; color: #d2de4a; } 

CMJN en RVB

Pour produire des couleurs quadri CMJN (cyan, magenta, jaune et clé (noir) en RVB (rouge, vert et bleu) pour les écrans, utilisez les valeurs maximales pour deux de ces couleurs. Si le résultat est trop dur pour les yeux, ajoutez du noir pour créer des teintes et adoucir l'effet.

Même sur les écrans les plus petits, certains espaces doivent rester vides. Cela permet à l'œil de parcourir le contenu. Les marges et le rembourrage suffisent souvent pour ajouter de l'espace vide :

 #logo { margin: 0 auto 1rem; } #banner { margin: 1rem 1rem 1rem 0; } main, aside { margin: 0 1rem; } figure { margin: 2rem auto; }

La réduction de la largeur maximale des éléments graphiques ajoute un espace blanc et un intérêt visuel aux conceptions sur petit écran :

 #logo { max-width: 25vw; } figure { max-width: 50vw; } 

L'espace supplémentaire disponible sur les écrans de taille moyenne me permet d'introduire le premier ensemble de styles de mise en page dans cette conception. En divisant mon texte courant sur deux colonnes, j'aide à maintenir la cohérence de sa mesure. Placer mes deux personnages côte à côte conserve leurs proportions relatives par rapport à mon texte.

Je commence par appliquer les propriétés de la grille et une grille symétrique inhabituelle à cinq colonnes à l'élément body. Ensuite, j'ajoute une image d'arrière-plan URI de données et la positionne à droite de ma mise en page :

 @media (min-width: 48em) { body { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem; background-image: url("data:image/svg+xml…"); background-position: 120% 50%; background-repeat: no-repeat; } }

J'ai besoin de placer le contenu de mon en-tête et de mon article directement sur ma grille, donc je change la propriété d'affichage de ces éléments en contenu, ce qui les supprime efficacement à des fins de style :

 header, article { display: contents; }

Ensuite, je place chaque élément de contenu dans un ensemble différent de colonnes et de lignes de grille en utilisant des numéros de ligne. Tout d'abord, je place le logo Ford dans une seule colonne. Je peux supprimer la largeur maximale que j'ai définie précédemment car sa taille dépendra désormais de la largeur de sa colonne :

 #logo { grid-column: 2; margin: 0; max-width: none; }

La bannière contient un profil de camionnette Transit, et le titre principal occupe les quatre premières de mes cinq colonnes :

 #banner, h1 { grid-column: 1 / 4; }

En laissant la première colonne vide, le contenu des éléments principaux et secondaires est mis en retrait à partir de la gauche. En définissant leurs largeurs pour correspondre à celle de ma bannière, j'ajoute une asymétrie agréable à la mise en page :

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

Bien que mes deux figures ne soient pas des éléments adjacents dans mon code HTML, CSS Grid facilite leur placement côte à côte. Je les place dans différentes colonnes sur la même ligne sans avoir besoin de modifier mon HTML :

 figure:nth-of-type(1) { grid-column: 2 / 4; grid-row: 5; } figure:nth-of-type(2) { grid-column: 4 / -1; grid-row: 5; }

Dans bon nombre de mes conceptions, j'utilise l'indentation au lieu de l'espacement des paragraphes pour créer des blocs solides à partir de mon texte en cours d'exécution. Cet effet est encore plus frappant lorsque vous définissez du texte dans plusieurs colonnes :

 p { margin-bottom: 0; } p + p { text-indent: 2ch; } main { column-width: 16em; }

Les éléments de figure peuvent inclure une ou plusieurs légendes et images. Les légendes apparaissent généralement sous les images qu'elles décrivent, mais il n'y a aucune raison pour laquelle les légendes doivent rester en dessous. Je peux aussi les placer au-dessus, à gauche ou à droite d'une image.

Lorsque je place des légendes à gauche ou à droite d'une image, je donne immédiatement aux dessins l'apparence d'un magazine. J'utilise Flexbox puis la propriété flex-direction pour les déplacer :

 figure { display: flex; }

Ma première légende de figure apparaît à gauche, j'inverse donc la direction de flexion de cette figure à partir de sa ligne par défaut :

 figure:nth-of-type(1) { flex-direction: row-reverse; }

Flexbox me permet d'arranger les éléments aussi bien verticalement qu'horizontalement. Pour placer mes légendes sur le bord inférieur de mes images, je modifie leur alignement transversal de l'étirement par défaut à l'extrémité flexible :

 figure { align-items: flex-end; }

Pour une touche finale à ce design de taille moyenne, j'aligne les deux légendes dans des directions opposées :

 figure:nth-of-type(1) figcaption { text-align: right; } figure:nth-of-type(2) figcaption { text-align: left; } 

L'espace vide aide à diriger l'œil à chaque étape de cette mise en page. L'espace supplémentaire disponible sur les écrans plus grands me permet de développer un design asymétrique distinctif.

L'utilisation d'une grille composée (deux ou plusieurs grilles superposées ou empilées) sur une même page peut créer des compositions accrocheuses. La grille composée pour cette conception chevauche une grille à quatre et six colonnes qui crée un motif rythmique de 2|1|1|2. Je transfère ce motif aux unités fr et les applique sous forme de colonnes à l'élément body :

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

Ensuite, j'ajoute quatre lignes en utilisant une combinaison de pixels, d'unités rem et de dimensionnement intrinsèque, avant de définir la hauteur minimale de la page pour remplir la fenêtre :

 body { grid-template-rows: 100px 14rem 14rem auto; min-height: 100vh; }

Pour compléter les styles de corps, j'ajoute deux nouvelles images d'arrière-plan URI de données et spécifie leurs tailles afin qu'elles soient toujours contenues dans la fenêtre :

 body { background-image: url("data:image/svg+xml…"), url("data:image/svg+xml…"); background-position: 0 50%, 100% 50%; background-size: contain; } 

Ce design asymétrique est très structuré et chaque élément est précisément placé sur ma grille. J'utilise des numéros de ligne pour placer les éléments structurels, en élevant le titre qui se chevauche au-dessus de l'image de la bannière dans l'ordre d'empilement :

 #logo { grid-column: 2 / 4; grid-row: 1; } h1 { grid-column: 1 / 5; grid-row: 2 / 4; align-self: center; z-index: 2; } #banner { grid-column: 1 / 5; grid-row: 2 / 4; z-index: 1; }

Mon contenu principal occupe les deux dernières colonnes et formes et îlot à droite de ce dessin :

 main { grid-column: 7 / -1; grid-row: 2 / 4; column-width: auto; } aside { grid-column: 6 / -1; grid-row: 4 / 5; }

Je place les deux figures sur cette nouvelle grille :

 figure:nth-of-type(1) { grid-column: 5 / 6; grid-row: 2 / 3; } figure:nth-of-type(2) { grid-column: 2 / 5; grid-row: 4 / 5; }

Ensuite, j'ajuste la direction de leur flex, en plaçant le premier chiffre verticalement, de sorte que ma légende apparaisse au-dessus de son image sœur :

 figure:nth-of-type(1) { flex-direction: column-reverse; }

Le contenu de ma deuxième figure est disposé horizontalement, l'image et la légende reposant sur la ligne de base :

 figure:nth-of-type(2) { flex-direction: row; align-items: flex-end; } 

J'ai peaufiné l'alignement des deux légendes et ce premier design inspiré de Thompson est terminé :

 figure:nth-of-type(1) figcaption { text-align: center; } figure:nth-of-type(2) figcaption { flex: 1; text-align: left; }

Complémentarité colorée

Malgré l'apparente complexité de cette mise en page, je n'ai besoin que de trois éléments structurels dans mon HTML : un en-tête qui contient des camionnettes Transit dans une variété de couleurs complémentaires, puis deux éléments de contenu, un principal et un aparté :

 <header>…</header> <main>…</main> <aside>…</aside>

Un en-tête coloré complémentaire est la pièce maîtresse de cette conception. Il pourrait être tentant d'implémenter cela en utilisant une seule grande image. Mais je souhaite développer divers agencements pour différentes tailles d'écran. L'utilisation de neuf images distinctes me permet donc de créer un panneau de défilement pour les petits écrans et de les disposer dans une grille pour les écrans moyens et grands :

 <header> <img src="header-1.svg" alt="Ford Transit"> <img src="header-2.svg" alt=""> <img src="header-3.svg" alt=""> … <img src="header-9.svg" alt=""> </header> 

Les éléments principaux et secondaires incluent un titre, une image SVG éclatée des pièces de transit, ainsi que des divisions pour organiser mon contenu en colonnes :

 <main> <h1>…</h1> <div>…</div> <div>…</div> <svg>…</svg> </main> <aside> <h2>…</h2> <div>…</div> <div>…</div> <svg>…</svg> </aside>

Je commence par appliquer une couleur d'arrière-plan gris foncé à l'élément body et j'ajoute du style à mes titres et paragraphes :

 body { background-color: #262626; font-family: 'sans-serif'; color: #fff; } h1, h2 { font-size: 2.027rem; font-style: italic; text-transform: uppercase; } p { font-size: .8rem; } 

Souvent, un flux normal plus quelques styles de base sont tout ce dont j'ai besoin pour implémenter une version petit écran de mes conceptions, mais celle-ci inclut des styles de mise en page dès le départ. Je commence par transformer mon en-tête et ses neuf images en un panneau à défilement horizontal en ajoutant les propriétés flex et overflow :

 header { display: flex; overflow-x: scroll; margin: 0 2rem 2rem; } header img:not(:last-of-type) { margin-right: 1rem; }

L'en-tête n'est pas le seul élément à obtenir une mise en page sur de petits écrans, les éléments principaux et secondaires obtiennent également des grilles :

 main, aside { display: grid; margin: 0 2rem; }

Tout d'abord, j'applique une mise en page à deux colonnes à l'élément principal. L'image SVG éclatée des pièces de transit tient dans la colonne de droite, je fixe donc sa largeur à 100px. La colonne de gauche se développe pour remplir tout espace restant.

 main { grid-template-columns: [content] 1fr [svg] 100px; }

Ensuite, je place les éléments principaux en utilisant des lignes de grille avec des noms qui reflètent leur contenu :

 h1 { grid-column: content; grid-row: 1; } main > div:nth-of-type(1) { grid-column: content; grid-row: 2; } main > div:nth-of-type(2) { grid-column: content; grid-row: 3; } main > svg { grid-column: svg; grid-row: 1 / 4; }

L'élément de côté a également une disposition à deux colonnes, mais cette fois la colonne étroite et ses parties de transit éclatées sont sur la gauche. Pour souligner la distinction entre mes zones de contenu principales et secondaires, j'ajoute une bordure solide en haut de la partie :

 aside { grid-template-columns: [svg] 100px [content] 1fr; padding-top: 1rem; border-top: 3px solid #b22f65; }

J'utilise des lignes nommées pour placer son contenu dans ma grille :

 h2 { grid-column: 1 / -1; grid-row: 1; } aside > div:nth-of-type(1) { grid-column: content; grid-row: 2; } aside > div:nth-of-type(2) { grid-column: content; grid-row: 3; } aside > div:nth-of-type(3) { grid-column: svg; grid-row: 2 / 4; }

Un en-tête à défilement horizontal et des grilles dans mon contenu montrent comment il est parfois avantageux d'utiliser plus qu'une disposition à une seule colonne pour les petits écrans. Ces mêmes éléments peuvent être disposés de manière très différente dans l'espace supplémentaire disponible sur les écrans de taille moyenne.

Dans cette version de ma conception, une grille de neuf images colorées complémentaires remplit l'en-tête. J'applique les propriétés de la grille et trois colonnes symétriques :

 @media (min-width: 48em) { header { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; overflow-x: visible; } } 

Contrairement à d'autres éléments de cette conception, il n'est pas nécessaire de placer les images dans cette grille, car l'algorithme de placement automatique du navigateur les organise automatiquement.

Par défaut, les navigateurs placent les éléments horizontalement sur les lignes. Mais, en changeant la valeur de grid-auto-flow en column, un navigateur remplit chaque colonne verticalement avant de passer à la suivante :

Avec plus d'espace disponible pour mon contenu, j'augmente le nombre de colonnes de deux à quatre :

 main, aside { grid-template-columns: 1fr [svg] 1fr 1fr 1fr; gap: 2rem; }

Ensuite, j'aligne le contenu de mon élément principal à la fin, de sorte qu'il forme un bloc solide au centre de ma mise en page :

 main { align-items: end; }

Mon titre principal couvre les quatre colonnes. Bien qu'il apparaisse en premier dans mon code HTML, je peux le placer visuellement sous mon texte courant et mes images en l'ajoutant à la deuxième ligne :

 h1 { grid-column: 1 / -1; grid-row: 2; border-bottom: 3px solid #b22f65; }

Je place mon premier bloc de contenu dans la colonne de gauche :

 main > div:nth-of-type(1) { grid-column: 1; grid-row: 1; }

Le deuxième bloc s'étend sur deux colonnes à droite :

 main > div:nth-of-type(2) { grid-column: 3 / span 2; grid-row: 1; }

Ensuite, je place la division finale - qui contient mon image SVG - dans la deuxième colonne en utilisant son nom de ligne :

 main > div:nth-of-type(3) { grid-column: svg; grid-row: 1; }

L'implémentation de colonnes pour l'élément de côté suit une méthode similaire. Encore une fois, je modifie le placement visuel de mon titre en utilisant les numéros de ligne :

 h2 { grid-column: 3 / -1; grid-row: 2; } aside > div:nth-of-type(1) { grid-column: 1; grid-row: 1 / 3; } aside > div:nth-of-type(2) { grid-column: 3 / -1; grid-row: 1; } aside > div:nth-of-type(3) { grid-column: svg; grid-row: 1 / 3; } 

Une image pleine page remplissant la moitié d'une planche est un spectacle courant dans les conceptions de magazines. De grandes images comme celles-ci peuvent être tout aussi efficaces sur les écrans larges. J'applique les propriétés de la grille à l'élément body avec deux colonnes symétriques, puis nomme la colonne de gauche verso et la colonne de droite recto :

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

Ces termes proviennent du latin où deux pages opposées sont appelées folium rectum et folium versum. Je place mon en-tête dans la colonne verso, et les éléments principaux et secondaires s'empilent dans la colonne recto :

 header { grid-column: verso; grid-row: 1 / 4; } main, aside { grid-column: recto; } 

Enfin, pour améliorer la lisibilité de mon texte courant sur des écrans très larges, j'introduis une mise en page multi-colonnes. Un navigateur générera automatiquement des colonnes de 10 em pour remplir l'espace disponible :

 @media (min-width: 72em) { main > div:nth-of-type(2), aside > div:nth-of-type(2) { column-width: 10em; column-gap: 2rem; } }

Type évolutif de masquage

En tant que personne qui aime les aspects créatifs de la conception typographique - mais apprécie également l'accessibilité et la performance - SVG est devenu autant une partie de ma boîte à outils de développement quotidienne que CSS et HTML.

Cette prochaine conception inspirée de Thompson combine du texte SVG avec des masques et des formes CSS, mais nécessite très peu de code HTML, juste un en-tête et un élément principal :

 <header> <div> <svg>…</svg> </div> <header> <main> <svg>…</svg> </main>

Avant de commencer à développer les SVG saisissants, j'ajoute des styles de base qui donnent à la page une couleur d'arrière-plan bleu foncé et un texte blanc contrastant :

 body { background-color: #1f455e; font-family: 'sans-serif'; color: #fff; } 

Cet en-tête comprend un graphique évolutif où le texte répété est façonné par un contour de fourgon de transport en commun. SVG inclut sa propre méthode pour couper des parties d'une image. Pour définir un chemin de détourage, j'ajoute un élément clipPath à mon SVG. Ceci, à son tour, contient un chemin qui définit ma zone découpée. Pour que je puisse référencer ce clipPath plus tard dans mon SVG, je lui donne un identifiant unique :

 <svg> <clipPath> <path>…</path> </clipPath> </svg>

Ensuite, j'ajoute les coordonnées du chemin qui composent mon texte graphique. Je donne à ce groupe de chemins aux couleurs vives une valeur d'attribut de classe que je peux utiliser pour le lier à mon clipPath :

 <svg> <clipPath>…</clipPath> <g class="transit"> <path>…</path> </g> </svg>

Que j'inclue ce SVG dans mon HTML à l'aide d'un élément d'image ou que j'intègre le SVG directement dans mon balisage, j'utilise la propriété CSS clip-path pour découper mon texte graphique à l'aide de son clipPath :

 <style type="text/css"><![CDATA[ .transit { -webkit-clip-path: url(#transit); clip-path: url(#transit); } ]]></style>

Avec clipPath, seules les zones d'un chemin de détourage sont affichées. Tout ce qui se trouve en dehors de la zone découpée restera invisible.

Mais, il existe une autre façon de masquer un élément, qui fonctionne avec tous les types de contenu, pas seulement SVG. Semblables au clip-path, les masques CSS masquent des parties d'un élément à l'aide d'une image de masque en noir et blanc.

 header div { -webkit-mask-image: url("mask.svg"); mask-image: url("mask.svg"); }

Lorsqu'un masque est appliqué, seules les zones d'un élément qui coïncident avec les parties noires du masque seront affichées. Tout ce qui se trouve en dehors de ces zones disparaîtra.

Les propriétés de mask-image partagent de nombreuses similitudes avec les arrière-plans en CSS. Tout comme les images d'arrière-plan, les masques peuvent être positionnés, répétés et dimensionnés, et peuvent même être développés à partir de dégradés d'arrière-plan. Comme je n'ai pas besoin que mon image de masque se répète, j'ai défini sa valeur sur no-repeat, comme le ferait n'importe quelle image d'arrière-plan :

 header div { -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } 

Le contenu de mon SVG dans l'élément principal est entièrement différent. Ce graphique contient des lignes de texte SVG aux couleurs vives qui expliquent le pedigree de la fourgonnette Transit. J'enveloppe chaque ligne dans un élément tspan, chacun avec ses propres coordonnées x et y qui emballent étroitement le texte dans un bloc solide :

 <svg> <text> <tspan x="0" y="86">BUILT AS A PASSENGER VAN, MINIBUS, </tspan> <tspan x="0" y="156">CUTAWAY VAN CHASSIS, AND A PICKUP </tspan> <tspan x="0" y="226">TRUCK. OVER 8,000,000 TRANSIT VANS </tspan> <tspan x="0" y="296">HAVE BEEN SOLD, MAKING IT THE THIRD </tspan> <tspan x="0" y="366">BEST-SELLING VAN OF ALL TIME.</tspan> </text> </svg>

Les éléments de texte SVG peuvent être stylés comme n'importe quel texte HTML, donc pour souligner la solidité de ce bloc, je choisis un sans-serif lourd et condensé, puis j'ajuste son suivi en réduisant l'espacement des lettres de -2px ;

 text { font-family: 'sans-serif-condensed'; font-size: 83px; font-weight: 700; letter-spacing: -2px; }

Les sélecteurs de pseudo-classe CSS sont aussi utiles pour styliser les éléments en SVG qu'en HTML. J'utilise des sélecteurs nième de type pour donner à chaque ligne de texte tspan sa propre couleur :

 tspan:nth-of-type(1) { fill: #c43d56; } tspan:nth-of-type(2) { fill: #f2c867; } tspan:nth-of-type(3) { fill: #377dab; } tspan:nth-of-type(4) { fill: #fff; } tspan:nth-of-type(5) { fill: #c43d56; } 

Le style solide de cette conception typographique en fait un élément d'en-tête élégant, mais il peut arriver que je doive ajouter plus de contenu à cette page. Pour une version alternative de ce design, j'ajoute un paragraphe expliquant l'historique de la production du fourgon Transit à mon en-tête :

 <header> <div> <svg>…</svg> </div> <p>…</p> </header>

Dans mes styles de base, j'ajoute une taille de police et mets le paragraphe en majuscule pour correspondre à mon texte SVG précédent :

 header p { font-size: .91rem; text-transform: uppercase; }

Ensuite, je justifie le texte du paragraphe pour les personnes qui utilisent des navigateurs prenant également en charge la césure automatique :

 @supports (-webkit-hyphens: auto) or (hyphens: auto) { header p { -webkit-hyphens: auto; hyphens: auto; text-align: justify; } }

Sur les écrans de petite et moyenne taille, ce nouveau paragraphe de texte suit le SVG de l'en-tête comme il le fait dans le HTML. Mais, pour les écrans plus grands, je veux que ce texte flotte à côté du graphique masqué.

Je donne au graphique d'en-tête une largeur explicite basée sur la fenêtre, puis je le fais flotter pour me permettre d'envelopper mon texte autour de lui à l'aide de CSS Shapes. Comme je veux que cette forme corresponde à mon graphique masqué, j'utilise la même image de masque pour l'URL shape-outside :

 @media (min-width: 64em) { header div { float: left; width: 65vw; margin-bottom: 0; shape-outside: url(mask.svg); shape-margin: 20px; } }

Fractionnement de la symétrie

Pour le dernier exemple inspiré de ce numéro - et en fait pour toute la série - la disposition symétrique divisée signifie que je n'ai besoin que de deux éléments structurels. À présent, ces éléments d'en-tête et principaux devraient vous sembler très familiers. Mon en-tête comprend le logo Ford classique, une image SVG et un titre :

<header> <svg>…</svg> <img src="header.svg" alt="Ford Transit"> <h1>…</h1> </header>

L'élément principal comprend également une image évolutive, plus un seul paragraphe de texte courant :

 <main> <p>…</p> <img src="main.svg" alt=""> </main>

Comme toujours, je commence d'abord par le petit écran en ajoutant des styles de base de couleur et de typographie. Cette fois, un fond gris clair, un texte gris foncé et une police sans empattement :

 body { background-color: #ededef; font-family: 'sans-serif'; color: #262626; } h1 { text-align: center; text-transform: uppercase; }

L'en-tête apparaît en premier dans mon code HTML, je vais donc le styliser en premier en lui donnant un fond gris foncé et un texte plus clair, ce qui est l'inverse de mes styles corporels :

 header { margin-bottom: 2rem; padding: 2rem; background-color: #262626; color: #ededef; } 

Enfin, pour les petits écrans, je centre ce logo horizontalement et limite sa largeur maximale à la moitié de celle du viewport :

 #logo { margin: 0 auto 2rem; max-width: 50vw; }

Cette conception prend davantage un aspect inspiré de Thompson avec l'espace supplémentaire disponible sur les écrans de taille moyenne. J'ai besoin de placer des éléments dans l'en-tête et les éléments principaux, j'ajoute donc des propriétés de grille et quatre colonnes symétriques aux deux :

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

Ensuite, j'ajoute trois lignes explicites à mon en-tête. Le premier et le dernier mesurent 100 pixels de haut, tandis que la rangée du milieu s'agrandit pour remplir tout l'espace restant :

 header { grid-template-rows: 100px auto 100px; }

Il est maintenant temps de placer ces éléments d'en-tête dans mes colonnes et lignes en utilisant des numéros de ligne. Le logo Ford vient en premier et s'intègre dans les deux colonnes centrales. Le titre est le dernier et se trouve en bas tout en couvrant toute la largeur. Je donne aux deux éléments une valeur d'index z plus élevée, afin qu'ils apparaissent les plus proches du spectateur dans l'ordre d'empilement :

 #logo { grid-column: 2 / 4; grid-row: 1; z-index: 2; } h1 { grid-column: 1 / -1; grid-row: 3; z-index: 2; }

Ensuite, je place l'image d'en-tête, de sorte qu'elle couvre chaque colonne et toutes les lignes. En lui donnant une valeur d'index z inférieure, je m'assure qu'il recule au bas de l'ordre d'empilement :

 header img { grid-column: 1 / -1; grid-row: 1 / 4; z-index: 1; align-self: center; }

Avec les styles pour l'image d'en-tête en place, j'ajoute un sélecteur qui applique exactement ces mêmes styles à l'image dans mon élément principal :

 header img, main img { grid-column: 1 / -1; grid-row: 1 / 4; z-index: 1; align-self: center; }

Bien que le texte vertical ne convienne pas à tous les designs, il peut transformer un court passage en une déclaration visuelle forte. Je change le mode d'écriture du paragraphe en vertical-rl et augmente son interlignage à l'aide d'unités basées sur la fenêtre :

 main p { line-height: 3vw; white-space: pre-wrap; writing-mode: vertical-rl; }

Pour une touche finale décorative, je change sa couleur et applique un mode de fusion avec une valeur de différence qui augmente également la lisibilité de ce texte là où il apparaît sur le fond graphique :

 main p { color: #f4eBd5; mix-blend-mode: difference; } 

Je place le paragraphe dans les deux colonnes centrales, l'aligne au centre, puis ajoute une valeur d'index z plus élevée pour m'assurer qu'il apparaît en haut de l'ordre d'empilement de cet élément :

 main p { grid-column: 2 / 4; grid-row: 1 / 4; align-self: center; z-index: 2; } 

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 deux colonnes symétriques au corps :

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

Rester inspiré

Lorsque j'ai décidé de produire cette série, je voulais enseigner aux gens l'importance de s'inspirer en dehors du Web. Mon objectif était de démontrer que l'examen des défis auxquels les concepteurs d'autres médias ont été confrontés - et la façon dont ils ont abordé les solutions - peut nous aider à créer des produits et des sites Web plus distinctifs, attrayants et finalement réussis.

Bien sûr, cette série effleure à peine la surface et vous pouvez trouver des exemples inspirants dans bien plus d'endroits que ceux que j'ai décrits ici. Rendez-vous dans la galerie d'art, la librairie, le musée ou le magasin de disques le plus proche et vous vous retrouverez entouré d'apports et d'inspiration.

J'espère que cette série vous a inspiré à réfléchir à la façon dont vous concevez pour le Web différemment. Les exemples de conception d'autres médias et périodes de l'histoire sont-ils pertinents pour le Web moderne ? Bien sûr, ils le sont. Peut-on apprendre du passé tout en inventant le futur ? Absolument. Disposons-nous des technologies et des outils nécessaires pour proposer des conceptions plus inspirées pour le Web ? Cela ne fait aucun doute.

J'ai été ravi que la réponse à cette série ait été extrêmement positive, mais je sais que je peux faire beaucoup plus. Cette série touche peut-être à sa fin, mais le travail a commencé sur un nouveau livre, Inspired Design for the Web. Ce livre commencera là où la direction artistique pour le Web s'est terminée, présentera d'autres exemples de conception inspirée et approfondira la manière dont nous pouvons tirer des leçons et les appliquer pour améliorer encore nos sites Web et nos produits.

En savoir plus sur la série

1. Décisions de conception inspirées : Magazine Avaunt
2. Décisions de conception inspirées : des questions urgentes
3. Décisions de conception inspirées : Ernest Journal
4. Décisions de conception inspirées : Alexey Brodovitch
5. Décisions de conception inspirées : Bea Feitler
6. Décisions de conception inspirées : Neville Brody
7. Décisions de conception inspirées : Otto Storch
8. Décisions de conception inspirées : Herb Lubalin
9. Décisions de conception inspirées : Max Huber
10. Décisions de conception inspirées : Giovanni Pintori
11. Décisions de conception inspirées : Emmett McBain
12. 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.