Après 12 articles inspirants, Andy Clarke conclut sa série Inspired Design Decisions en expliquant comment l'étude du travail de Bradbury Thompson – l'un des maîtres du graphisme du XXe siècle – vous apprendra à combiner des éléments graphiques et typographiques avec des éléments innovants mises en page pour créer de superbes designs pour le Web. Dans cet article final, Andy rassemble les leçons de tous ses articles précédents pour vous apprendre à choisir des palettes de couleurs, à travailler avec des grilles composées et modulaires et à concevoir une typographie graphique et lisible. Si vous avez sauté l'un des articles de cette série, vous ne voudrez certainement pas manquer celui-ci.

L'idée de cette série – et du livre qui la suivra – a été suscitée par une conversation informelle, mais l'écriture cela 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 façon dont une page et son contenu s'adaptent à 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 attrayantes, et à quel point même les grilles les plus simples peuvent être flexibles lorsqu'elles sont abordées avec imagination. ensemble. Ma connaissance de la typographie s'est développée parallèlement à mon enthousiasme pour le type expressif et divertissant. Il est peu probable que je fasse un type 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 – 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 semble juste. J'ai appris à canaliser mon attitude souvent rebelle vers le design thinking conventionnel pour développer de nouvelles solutions à des problèmes de conception souvent quotidiens.

Nous travaillons dans une industrie qui est maintenant plus dominée par les aspects académiques, mécaniques et techniques du design. Le développement de cette série a renforcé pour moi que si ces activités comptent, comme l'écrivait Giovanni Pintori, nous «avons besoin de logique et d'imagination dans une égale mesure».

Comme l'explique Neville Brody, «une fois que vous avez brisé les règles, tout est littéralement possible. . » La pensée non conventionnelle ne doit pas 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 attrayantes, divertissantes et finalement plus mémorables.

En savoir plus sur le travail de designers de différentes époques et de diverses domaines ont non seulement inspiré mes propres idées, mais cela m'a donné l'envie d'en savoir plus. Trouver de nouvelles sources d'inspiration est devenu une obsession presque quotidienne, et bien que les murs de mon studio ne soient pas encore aussi pleins 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. [19659010] Gauche: W est pour War spread conçu par Bradbury Thompson, 1952. Droite: spread America at War conçu par Bradbury Thompson. « />

Pendant longtemps, j’ai eu l’impression que le Web pouvait bien plus que ce que nous fabriquions. Chacun des designers que j'ai présentés tout au long de cette série a remis en question les perceptions, a influencé la direction de leur médium et a finalement inspiré d'autres personnes – moi y compris – à créer de meilleures œuvres. J'espère que d'une certaine manière, cette série pourra faire la même chose.

Inspired By 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 a été inspiré par les dessins imprimés, en particulier les 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 travail en tant que jeune imprimeur n'aurait pas été glamour, mais il a donné à Thompson une vaste connaissance des techniques de conception et d'impression qu'il utiliserait tout au long de sa longue carrière. tempêtes, mais pas en tant que centre de création, alors en 1938, Thompson parcourut les 1 200 milles à l'est jusqu'à New York. Incroyablement, pour un jeune homme fraîchement sorti de la route du Kansas, l'un de ses premiers projets a été la conception du catalogue de l'Exposition universelle de 1939.

Thompson a travaillé pour Rogers-Kellogg-Stillson – la société d'impression responsable de cette exposition universelle – et a été affecté pour travailler sur Westvaco Inspirations for Printers. Cette série de livrets promotionnels 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 donnait à Thomson «une rare opportunité d'expérimentation fournie à 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'avait pas de budget pour commander des œuvres d'art originales ou des photographies pour la publication, mais au lieu de laisser cela limiter ses idées, il les a utilisées comme une occasion 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 artistes de ma profession» en empruntant des plaques imprimées et des séparations à des agences, des magazines et même des musées, pour les incorporer dans son travail.

Ces éléments empruntés comprenaient des photographies et des illustrations historiques que Thomson combinait avec la typographie contemporaine et des couleurs de process 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 a emprunté des éléments de l'art populaire et primitif, les transformant en œuvres originales mêlant modernité et tradition. Travailler sur Inspirations a stimulé la créativité de Thompson, et il a continué à concevoir 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 devint directeur artistique du magazine Mademoiselle et resta dans le rôle pendant les quinze années suivantes.

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

Le travail de magazine de Thomson n'a pas commencé ou s'est terminé 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. [19659003] Bradbury Thompson n'est peut-être pas parmi les graphistes les plus célèbres, mais il était largement reconnu dans son industrie, recevant les trois prix de design majeurs et plus encore. Ses prix 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 club des directeurs artistiques, et au cours des années 1980, il a remporté le prix Frederic W. Goudy. puis la Médaille du Club du Directeur Type.

Depuis ses premières expériences de travail à Topeka, Thompson était un concepteur soucieux des détails qui prêtait attention aux moindres détails de sa typographie et au recadrage et au placement précis de ses images. Son utilisation intelligente de palettes souvent simples de couleurs quadri avec des illustrations historiques en noir et blanc et des formes géométriques a 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 la relaxation, un stimulant intellectuel et une satisfaction spirituelle. Je crois qu’un intérêt passionné pour la typographie inclut nécessairement le goût de la vie quotidienne.
– Bradbury Thompson

Comme l’architecture, la typographie est un mélange de beauté et d’utilité fonctionnelle et les dessins de Thompson combinent souvent des arrangements typographiques inhabituels avec des formes colorées. Pour Rain, Rain, Rain – une diffusion pour le magazine Mademoiselle en 1958 – il a reproduit le même imperméable portant une figure portant un parapluie comme cinq silhouettes colorées.

In Futural – un spread pour Westvaco Inspirations for Printers en 1962 – Thompson reproduisit les formes simplifiées des avions à travers les pages, en utilisant la ligne -travail au verso et couleurs unies au recto. Il surimprimait régulièrement ses formes colorées pour ajouter de la profondeur et de l'intérêt à ses créations.

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

 body {
rembourrage: 2rem 0;
couleur de fond: # 1f455f;
famille de polices: 'serif';
couleur: #fff; }

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

 h1, h2 {
style de police: italique; }

h1 {
taille de la police: 2,8rem; }

h2 {
taille de la police: 2.027rem; }

p {
taille de la police: .8rem; }

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

 figcaption {
taille de la police: .8rem;
style de police: italique;
text-align: centre;
couleur: # d2de4a; }

CMJN en RVB

Pour produire des couleurs quadri CMJN — cyan, magenta, jaune et tonalité (noir) en RVB (rouge, vert et bleu) pour les écrans, utilisez des 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 plus petits écrans, un peu d'espace doit rester vide. Cela permet à l'œil de circuler autour du contenu. Les marges et le remplissage suffisent souvent pour ajouter un espace vide:

 #logo {
marge: 0 auto 1rem; }

#banner {
marge: 1rem 1rem 1rem 0; }

main, à part {
marge: 0 1rem; }

figure {
marge: 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 {
largeur max: 25vw; }

figure {
largeur max: 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 de cette conception. En divisant mon texte courant sur deux colonnes, j'aide à maintenir la cohérence dans sa mesure. Placer mes deux figures côte à côte maintient leurs proportions relatives à mon texte.

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

 @media (min-width: 48em) {

corps {
affichage: grille;
grille-modèle-colonnes: répéter (5, 1fr);
écart: 2rem;
background-image: url ("données: image / svg + xml…");
position de fond: 120% 50%;
background-repeat: pas de répétition; }
}

Je dois 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 contents, ce qui les supprime efficacement à des fins de style:

 header, article {
affichage: contenu; }

Ensuite, je place chaque élément de contenu dans un ensemble différent de colonnes de grille et de lignes 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'avais définie plus tôt car sa taille dépendra désormais de la largeur de sa colonne:

 #logo {
grille-colonne: 2;
marge: 0;
max-width: aucun; }

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

 #banner,
h1 {
grille-colonne: 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 réglant leur largeur pour correspondre à celle de ma bannière, j'ajoute une asymétrie agréable à la mise en page:

 main, apart {
grille-colonne: 2 / -1; }

Bien que mes deux figures ne soient pas des éléments adjacents dans mon HTML, CSS Grid simplifie 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) {
grille-colonne: 2/4;
ligne de grille: 5; }

figure: nième de type (2) {
grille-colonne: 4 / -1;
ligne de grille: 5; }

Dans beaucoup de mes créations, j'utilise l'indentation au lieu de l'espacement des paragraphes pour créer des blocs solides à partir de mon texte courant. Cet effet est encore plus frappant lors de la définition de texte dans plusieurs colonnes:

 p {
marge inférieure: 0; }

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

principale {
largeur de colonne: 16em; }

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

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

 figure {
affichage: flex; }

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

 figure: nth-of-type (1) {
flex-direction: ligne-inverse; }

Flexbox me permet d'organiser des éléments aussi bien verticalement qu'horizontalement. Pour placer mes légendes sur le bord inférieur de mes images, je change leur alignement sur l'axe transversal de l'étirement par défaut à flex-end:

 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: droite; }

figure: nth-of-type (2) figcaption {
text-align: gauche; }

L'espace vide aide à guider 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 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 modèle aux unités fr et les applique sous forme de colonnes à l'élément body:

 @media (min-width: 64em) {

corps {
grille-modèle-colonnes: 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;
hauteur min: 100vh; }

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

 body {
image de fond:
url ("données: image / svg + xml…"),
url ("données: image / svg + xml…");
position de fond: 0 50%, 100% 50%;
background-size: contient; }

Cette conception asymétrique est très structurée 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 chevauchent au-dessus de l'image de la bannière dans l'ordre d'empilement:

 #logo {
grille-colonne: 2/4;
ligne de grille: 1; }

h1 {
grille-colonne: 1/5;
ligne de grille: 2/4;
align-self: centre;
indice z: 2; }

#banner {
grille-colonne: 1/5;
ligne de grille: 2/4;
indice z: 1; }

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

 main {
grille-colonne: 7 / -1;
ligne de grille: 2/4;
largeur de colonne: auto; }

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

Je place les deux chiffres sur cette nouvelle grille:

 figure: nth-of-type (1) {
grille-colonne: 5/6;
ligne de grille: 2/3; }

figure: nième de type (2) {
grille-colonne: 2/5;
ligne de grille: 4/5; }

Ensuite, j'ajuste la direction de leur flex, en mettant le premier chiffre verticalement, donc ma légende apparaît au-dessus de son image sœur:

 figure: nth-of-type (1) {
flex-direction: colonne-inverse; }

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: ligne;
align-items: flex-end; }

Je peaufine l'alignement des deux légendes et ce premier dessin inspiré de Thompson est terminé:

 figure: nth-of-type (1) figcaption {
text-align: centre; }

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

Colorfully Complementary

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 fourgons de transport dans une variété de couleurs complémentaires, puis deux éléments de contenu, un principal et un aparté:

… 

… 

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

  
  
  
  …
  

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

  
… 
  
… 
  
 … 
  

Je commence par appliquer une couleur de fond gris foncé à l'élément body, et j'ajoute du style à mes titres et paragraphes:

 body {
couleur de fond: # 262626;
famille de polices: 'sans-serif';
couleur: #fff; }

h1, h2 {
taille de la police: 2.027rem;
style de police: italique;
text-transform: majuscule; }

p {
taille de la police: .8rem; }

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

 header {
affichage: flex;
overflow-x: faire défiler;
marge: 0 2rem 2rem; }

header img: not (: last-of-type) {
marge droite: 1rem; }

L’en-tête n’est pas le seul élément permettant d’obtenir une mise en page sur de petits écrans, les éléments principaux et secondaires reçoivent également des grilles:

 main, apart {
affichage: grille;
marge: 0 2rem; }

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

 main {
grille-modèle-colonnes: [content] 1fr [svg] 100px; }

Ensuite, je place les éléments de l'élément principal en utilisant des lignes de quadrillage dont les noms reflètent leur contenu:

 h1 {
grille-colonne: contenu;
ligne de grille: 1; }

main> div: nth-of-type (1) {
grille-colonne: contenu;
ligne de grille: 2; }

main> div: nth-of-type (2) {
grille-colonne: contenu;
ligne de grille: 3; }

main> svg {
grille-colonne: svg;
ligne de grille: 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 principale et secondaire, j'ajoute une bordure solide en haut de la page:

 apart {
grille-modèle-colonnes: [svg] 100px [content] 1fr;
rembourrage haut: 1rem;
bordure supérieure: 3px solide # b22f65; }

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

 h2 {
grille-colonne: 1 / -1;
ligne de grille: 1; }

à part> div: nth-of-type (1) {
grille-colonne: contenu;
ligne de grille: 2; }

à part> div: nth-of-type (2) {
grille-colonne: contenu;
ligne de grille: 3; }

de côté> div: nth-of-type (3) {
grille-colonne: svg;
ligne de grille: 2/4; }

Un en-tête et des grilles à défilement horizontal dans mon contenu montrent à quel point 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 mon dessin, une grille de neuf images colorées et complémentaires remplit l'en-tête. J'applique des propriétés de grille et trois colonnes symétriques:

 @media (min-width: 48em) {

entête {
affichage: grille;
grille-modèle-colonnes: 1fr 1fr 1fr;
écart: 1rem;
overflow-x: visible; }
}

Contrairement aux 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 arrange automatiquement.

Par défaut, les navigateurs placent éléments horizontalement sur les lignes. Mais, en changeant la valeur grid-auto-flow en colonne, 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: [19659058] main, à part {
grille-modèle-colonnes: 1fr [svg] 1fr 1fr 1fr;
écart: 2rem; }

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

 main {
align-items: fin; }

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

 h1 {
grille-colonne: 1 / -1;
ligne de grille: 2;
bordure inférieure: solide 3px # b22f65; }

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

 main> div: nth-of-type (1) {
grille-colonne: 1;
ligne de grille: 1; }

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

 main> div: nth-of-type (2) {
grille-colonne: 3 / portée 2;
ligne de grille: 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) {
grille-colonne: svg;
ligne de grille: 1; }

L'implémentation des 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 des numéros de ligne:

 h2 {
grille-colonne: 3 / -1;
ligne de grille: 2; }

à part> div: nth-of-type (1) {
grille-colonne: 1;
ligne de grille: 1/3; }

à part> div: nth-of-type (2) {
grille-colonne: 3 / -1;
ligne de grille: 1; }

de côté> div: nth-of-type (3) {
grille-colonne: svg;
ligne de grille: 1/3; }

Une image pleine page remplissant la moitié d'une planche est courante 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 le verso de la colonne de gauche et le recto de la colonne de droite:

 @media (min-width: 64em) {

corps {
affichage: grille;
grille-modèle-colonnes: [verso] 1fr [recto] 1fr;
écart: 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 latéraux sont empilés dans la colonne recto:

 header {
grille-colonne: verso;
ligne de grille: 1/4; }

main, à part {
grille-colonne: 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 10em de large pour remplir l'espace disponible:

 @media (min-width: 72em) {

main> div: nième de type (2),
à part> div: nth-of-type (2) {
largeur de colonne: 10em;
écart de colonne: 2rem; }
}

Masquage de type évolutif

En tant que personne qui aime les aspects créatifs de la conception typographique – mais valorise également l'accessibilité et la performance – SVG est devenu une partie de ma boîte à outils de développement quotidienne au même titre que CSS et HTML. [19659003] Ce prochain design inspiré de Thompson combine du texte SVG avec des masques et des formes CSS, mais nécessite très peu de HTML, juste un en-tête et un élément principal:

Avant de commencer à développer les SVG frappants, j'ajoute des styles de base qui donnent à la page une couleur de fond bleu foncé et un texte blanc contrasté:

 body {
couleur d'arrière-plan: # 1f455e;
famille de polices: 'sans-serif';
couleur: #fff; }

Cet en-tête comprend un graphique évolutif où le texte répété est mis en forme par un contour de fourgon Transit. SVG inclut sa propre méthode pour dé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. Je peux donc référencer ce clipPath plus tard dans mon SVG, je lui donne un identifiant unique:

Ensuite, j'ajoute les coordonnées de chemin qui composent mon texte graphique. I give this group of brightly colored paths a class attribute value which I can use to bind it to my clipPath:

Whether I include this SVG in my HTML using an image element, or embed the SVG directly into my markup, I use the CSS clip-path property to clip my graphic text using its clipPath:

Using clipPath, only areas within a clipping path are displayed. Anything outside the clipped area will remain invisible.

But, there’s another way to mask an element, one which works with all types of content, not just SVG. Similar to clip-path, CSS masks hide parts of an element using a black and white mask image.

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

When a mask is applied, only areas of an element which coincide with the black parts of the mask will be displayed. Everything outside these areas will disappear.

The properties of mask-image share many similarities with backgrounds in CSS. Just like background images, masks can be positioned, repeated, and sized, and can even be developed from background gradients. As I don’t need my mask image to repeat, I set its value to no-repeat, just as would with any background image:

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

The contents of my SVG in the main element is entirely different. This graphic contains brightly colored lines of SVG text which explain the Transit van’s pedigree. I wrap each line inside a tspan element, each with its own x and y coordinates which tightly pack the text into a solid block:

SVG text elements can be styled like any HTML text, so to emphasise the solidity of this block, I choose a heavyweight, condensed sans-serif, then adjust its tracking by reducing the letter spacing by -2px;

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

CSS pseudo-class selectors are as useful for styling elements in SVG as they are for HTML. I use nth-of-type selectors to give each line of tspan text its own color:

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; }

The solid style of this typographic design makes a stylish header element, but there are times when I might need to add more content to this page. For an alternative take on this design, I add a paragraph explaining the history of the Transit van’s production to my header:

  

    
  

  
…

In my foundation styles, I add a font size and set the paragraph in uppercase to match my previous SVG text:

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

Then, I justify the paragraph text for people who use browsers which also support automatic hyphenation:

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

On small and medium-size screens, this new paragraph of text follows the header’s SVG as it does in the HTML. But, for larger screens, I want this text to float alongside the masked graphic.

I give the header graphic an explicit viewport-based width, then float it to enable me to wrap my text around it using CSS Shapes. As I want this shape to match my masked graphic, I use the same mask image for the shape-outside URL:

@media (min-width: 64em) {

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

Splitting Symmetry

For the final inspired example in this issue—and in fact for the entire series—the split symmetrical layout means I need just two structural elements. By now, these header and main elements should feel very familiar. My header includes the classic Ford logo, an SVG image and a headline:

  
  
  
…

The main element also includes a scalable image, plus a single paragraph of running text:

  
…
  

As always, I start small-screen first by adding color and typography foundation styles. This time, a light grey background, dark grey text, and a sans-serif typeface:

body {
background-color: #ededef;
font-family: 'sans-serif';
color: #262626; }

h1 {
text-align: centre;
text-transform: uppercase; }

The header appears first in my HTML, so I’ll style it first too by giving it a dark grey background and lighter text which is the inverse of my body styles:

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

Finally, for small screens, I centre that logo horizontally and limit its maximum width to half that of the viewport:

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

This design takes on more of a Thompson-inspired look with the extra space available on medium-size screens. I need to place elements in the header and main elements, so I add grid properties and four symmetrical columns to both:

@media (min-width: 48em) {

header, main {
display: grid;
grid-template-columns: repeat(4, 1fr); }
}

Then, I add three explicit rows to my header. The first and last are 100px tall, while the middle row expands to fill all the space remaining:

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

Now it’s time to place those header elements into my columns and rows using line numbers. The Ford logo comes first and fits into the two centre columns. The headline is last and sits at the bottom while spanning the full width. I give both elements a higher z-index value, so they appear closest to the viewer in the stacking order:

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

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

Then, I place the header image, so it covers every column and all the rows. By giving it a lower z-index value, I ensure it recedes to the bottom of the stacking order:

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

With styles for the header image in place, I add a selector which applies those exact same styles to the image in my main element:

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

While vertical text won’t suit every design, it can turn a short passage into a strong visual statement. I change the paragraph’s writing-mode to vertical-rl and increase its leading using viewport-based units:

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

For a decorative finishing touch, I change its color and apply a blending mode with a value of difference which also increases the legibility of this text where it appears over the graphic background:

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

I place the paragraph into the two centre columns, align it centrally, then add a higher z-index value to ensure it appears at the top of this element’s stacking order:

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

Until now, this main content comes after my header in the document flow. For larger screens, I want those elements to sit side-by-side, so I apply grid properties and two symmetrical columns to the body:

@media (min-width: 64em) {

body {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 100vh; }
}

Staying Inspired

When I set out to produce this series, I wanted to teach people about the importance of for inspiration outside the web. My aim was to demonstrate that looking at the challenges designers from other media have faced — and how they approached solving them — can help us make more distinctive, engaging, and ultimately successful products and websites.

Of course, this series barely scratches the surface, and you can find inspiring examples in plenty more places than I’ve described here. Take a trip to your nearest art gallery, bookstore, museum, or record shop, and you’ll find yourself surrounded by inputs and inspiration.

I hope this series has inspired you to think about how you design for the web differently. Are examples of design from other media and periods in history relevant to the modern web? Of course, they are. Can we learn from the past while inventing the future? Absolutely. Do we have the technologies and tools to deliver more inspired designs for the web? There’s no doubt about that.

I’ve been pleased the response to this series has been overwhelmingly positive, but I know there’s plenty more I can do. This series might be coming to a close, but work has started on a new book, Inspired Design for the Web. This book will begin where Art Direction for the Web ended, will showcase more examples of inspired design, and go deeper into how we can learn lessons and apply them to make our websites and products even better.

Read More From The Series

1. Inspired Design Decisions: Avaunt Magazine
2. Inspired Design Decisions: Pressing Matters
3. Inspired Design Decisions: Ernest Journal
4. Inspired Design Decisions: Alexey Brodovitch
5. Inspired Design Decisions: Bea Feitler
6. Inspired Design Decisions: Neville Brody
7. Inspired Design Decisions: Otto Storch
8. Inspired Design Decisions: Herb Lubalin
9. Inspired Design Decisions: Max Huber
10. Inspired Design Decisions: Giovanni Pintori
11. Inspired Design Decisions: Emmett McBain
12. Inspired Design Decisions: Bradbury Thompson

NB: Smashing membersSmashing members have access to a beautifully designed PDF of Andy’s Inspired Design Decisions magazine and full code examples from this article. You can buy this issue’s PDF and examples as well as every other issue directly from Andy’s website.

(ra, yk, il)