Transformer des sujets banals en une communication visuelle passionnante – Smashing Magazine


Dans ce neuvième numéro d’Inspirated Design Decisions, Andy Clarke expliquera comment l’étude du travail de Max Huber – l’un des designers suisses les moins connus mais les plus distingués – vous apprendra comment transformer des sujets banals en une communication visuelle passionnante.

Il y a des années, je souhaitais pouvoir travailler sur des projets publicitaires pour des noms de famille car je pensais que le travail au-dessus de la ligne apporterait une satisfaction créative. J’ai eu la chance de travailler avec de nombreuses entreprises et organisations caritatives bien connues, mais avec le recul, mes petits projets ont été les plus satisfaisants sur le plan créatif.

Souvent, les grandes marques ont déjà établi des lignes directrices, ce qui signifie qu’il me reste moins de place pour expérimenter et exercer mes muscles créatifs. Je ne dis pas que les directives de marque sont sans importance, mais je préfère travailler sur des projets où je sens que j’apporte le plus de valeur et un peu de moi.

De nos jours, les sociétés de produits semblent plus intéressées à affiner les interfaces et à simplifier l’expérience utilisateur. J’apprécie ces choses lorsque j’utilise un produit, mais je trouve que travailler sur ces projets est moins gratifiant. Des clients connus ont encore une certaine allure – et avoir des logos dans mon portefeuille a été bon pour les affaires – mais je recherche maintenant des projets qui m’offrent la liberté de développer mes intérêts créatifs.

Je suis fasciné par la façon dont le design peut raconter des histoires engageantes sur les produits et services, même ceux qui peuvent être considérés comme banals par certains. J’aime explorer comment les images, la mise en page et la typographie peuvent être utilisées pour communiquer des messages de manière visuellement distincte. Par-dessus tout, j’aime utiliser mon expérience et mes intérêts dans la direction artistique et la conception graphique pour aider les entreprises, les organismes de bienfaisance et parfois les particuliers, qui autrement pourraient y être exposés.

«Je n’essaie pas de parler au nom des machines. Au lieu de cela, j’ai essayé de les faire parler d’eux-mêmes, à travers la présentation graphique de leurs éléments, de leurs opérations et de leur utilisation. »

– Giovanni Pintori

Même des designers réputés et bien connus ont passé du temps à travailler sur des sujets banals et ont produit des œuvres emblématiques. Après avoir déménagé de la Suisse aux États-Unis, Erik Nitsche pour des magazines comme Harper’s Bazaar, Life et Vanity Fair. Mais c’est son travail pour General Dynamics qui est devenu le plus reconnu. Au cours de ses cinq années en tant que directeur artistique de la société d’aérospatiale et de défense, Nitsche a développé un système de conception d’informations qui a abouti à des rapports annuels, des affiches, des données techniques et Dynamic America, un livre de 420 pages retraçant l’histoire de la société.

Le designer italien Giovanni Pintori a travaillé pour le fabricant de produits professionnels Olivetti pendant 31 ans, où le style simple et les formes géométriques qu’il a appliquées aux publicités, calendriers et affiches se sont transformés en vocabulaire de conception de l’entreprise.

dessins de Nitsche et Pintori
1 & 2: conception de General Dynamics par Erik Nitsche. 3 & 4: créations Olivetti de Giovanni Pintori. (Grand aperçu)

Né en Suisse, Max Huber a également passé la majeure partie de sa carrière à travailler en Italie. Alors que son portefeuille contient du travail pour de nombreuses grandes marques italiennes, ses étiquettes alimentaires et ses conceptions de papier d’emballage pour les supermarchés La Rinascente sont également fascinantes.

Ce que ces trois designers, et bien d’autres comme eux, peuvent nous apprendre que même les sujets les plus banals peuvent offrir des opportunités passionnantes de communiquer à travers le design. Et c’est quelque chose dont j’essaie de me souvenir tous les jours.

En savoir plus sur la série

Inspiré par Max Huber

Bien que moins connu que nombre de ses contemporains, Max Huber était l’un des designers suisses les plus distingués. Né à Baar en 1919, Huber a déménagé entre la Suisse et l’Italie jusqu’à la fin de la Seconde Guerre mondiale.

Au début de sa carrière à Milan, Huber a travaillé dans le studio d’Antonio Boggeri où il a été influencé pour mélanger les médias, y compris l’illustration, la photographie et la typographie. De 1950 à 1954, Huber a travaillé pour la chaîne italienne de grands magasins La Rinascente et a remporté le premier de ses prix Compas d’or (Compasso d’Oro) en 1954.

Dans les années 40, Milan était le centre du mouvement avant-gardiste italien. Pendant son séjour, Huber a côtoyé des artistes, des designers et des intellectuels. Ce mélange a stimulé Huber, et il a expérimenté le mélange du travail créatif de nombreux disciples.

Huber n’a jamais pris ces influences au pied de la lettre. Il a manipulé des photographies, découpé des sujets de leur arrière-plan et les a mélangés avec des blocs de couleurs et de formes. Les bandes colorées ajoutent du mouvement aux designs de Huber et ses designs d’affiche pour Monza Autodromo – le célèbre circuit de Milan – sont aussi excitants que les courses elles-mêmes.

Huber utilisait souvent des formes plates – flèches, cercles et motifs tourbillonnants – et les chevauchait avec des photographies monochromes et bichromiques. Ses pochettes de disques et les boîtiers qu’il a réalisés pour sa propre collection de jazz swinguent avec énergie.

Bien qu’il ne soit pas toujours reconnu pour son talent de typographe, le travail de Huber est rempli de typographie inspirante. Il a basculé sans effort entre les polices modernes avec empattement moderne et sans empattement et semblait à l’aise lors de l’utilisation des deux. Alors que le style suisse est le plus associé aux polices néo-grotesques sans empattement, le travail de Huber avec les empattements est tout aussi inspirant.

Huber a défini des grilles pour souligner l’alignement du texte, puis a utilisé de gros titres suivis de texte dans une hiérarchie stricte. Mais il n’avait pas peur de jouer avec le type, de le placer à des angles inhabituels et d’expérimenter la perspective.

Depuis les années 1960 jusqu’à sa mort en 1992, Huber a travaillé sur une variété de commandes, notamment une refonte de la marque et un design de papier peint à base de jazz mettant en vedette Louis Armstrong, qu’il a appelé Rhythm. Son client, Oscar Braendli, a chargé Huber de concevoir des expositions.

Huber a également conçu pour Adriano Olivetti et a adopté ces projets avec le même enthousiasme pour l’expérimentation. Les deux sont des exemples clairs de la façon dont un design distinctif peut transformer même les sujets les plus banals en une communication visuelle passionnante.

Ils prouvent que la synergie et la confiance dans une relation entre le client et le concepteur peuvent apporter des résultats extraordinaires qui peuvent durer des décennies.

Bien que son style de signature se soit développé tout au long de sa vie, l’engagement de Huber envers l’expérimentation est resté. Même s’il a inclus des éléments individuels de son style – des blocs de couleurs audacieux, des formes emblématiques, une manipulation photographique et une typographie forte – tout au long de sa vie, Huber a construit un portefeuille de travaux remarquablement varié. Plus tard, Huber a enseigné le design graphique dans la ville de Lugano, dans le sud de la Suisse, où je reste par hasard lorsque je travaille en Suisse. Il est décédé à Mendrisio – où se trouve mon bureau suisse – en 1992 et un musée a consacré son travail à Chiasso à proximité.

Il n’y a eu qu’un seul livre sur Max Huber et vous devriez en trouver de l’espace sur votre étagère ou votre table basse. «Max Huber» (2006) de Stanislaus von Moos, Mara Campana et Giampiero Bosoni. C’est un catalogue complet de travaux de toute sa carrière écrit par des gens qui connaissaient personnellement Max Huber.

couvertures de magazines et affiche du festival
Dans l’ordre habituel: le magazine Rivoluzione Industriale, 1960. Couverture du magazine Imbalaggio, 1955-1965. Radio et télévision électroacoustiques: couverture du catalogue de pièces électroniques, 1969. 12e affiche du Festival international de musique contemporaine conçue par Max Huber, 1949. (Grand aperçu)
Identifier les polices de caractères de style ancien (humaniste)

Les périodes où les modifications de conception vont souvent de pair avec les progrès technologiques. Ce qui est vrai du Web aujourd’hui – et comment les développements en CSS affectent ce qui est possible en ligne – était également le cas avec les premiers développements de typographie. Certaines des premières polices de caractères étaient humanistes car leurs origines remontaient à l’écriture manuscrite du milieu du XVe siècle.

Mais lorsque les techniques de découpe à l’acier – les blocs de métal utilisés pour la composition jusqu’au XIXe siècle – sont devenues plus précises, les polices sont devenues plus raffinées.

Cette précision a permis aux concepteurs de caractères d’ajouter du style à ce que nous appelons aujourd’hui les polices de caractères à l’ancienne.

polices de caractères
Gauche: Jenson Pro (humaniste) Droite: Garamond Pro (style ancien). (Grand aperçu)

Alors que les polices humanistes comprennent généralement un «e» minuscule avec une barre transversale inclinée, les polices de style ancien ont introduit une barre transversale horizontale.

Le stress dans une police est l’angle dessiné entre les parties les plus fines d’une lettre. Dans les polices à contrainte verticale, cette ligne est tracée verticalement de haut en bas. Dans les polices avec une contrainte diagonale (humaniste), la ligne entre les parties les plus fines d’une lettre est tracée en biais.

Les polices de caractères anciennes continuent dans le style humaniste de la contrainte diagonale, mais ont plus de contraste entre leurs traits les plus épais et les plus fins. Les polices de caractères anciennes sont souvent mises entre parenthèses car elles ont des courbes qui relient leurs empattements à un trait.

polices de style ancien
Gauche: Garamond Pro Droite: Jenson Pro. (Grand aperçu)
polices de style ancien
Gauche: Minion Pro Droite: Palatino. (Grand aperçu)

Baskerville a été conçu dans les années 1750 par John Baskerville. Ses polices de caractères sont restées populaires et il existe de nombreuses interprétations modernes. Les polices de style Garamond restent populaires dans la conception d’impression, et Monotype Garamond est fourni avec plusieurs produits Microsoft.

Type de style ancien

design inspiré par Max Huber
À gauche: mon design grand écran, inspiré de Max Huber. Droite: un emblème Trabant reste circulaire tout en remplissant tout espace disponible. (Grand aperçu)

Malgré sa disposition non conventionnelle, je n’ai besoin que de quatre éléments conventionnels pour développer ce design à l’ancienne. Un élément d’en-tête, de division de bannière, de paragraphe et de pied de page:

Comme je l’ai montré dans les numéros précédents, mon processus commence par l’ajout de styles de fondation, y compris cette police de style ancien:

body {
background-color: #6e2838;
font-family: "old-style";
color: #f7eed7; }

Un en-tête Trabant domine ma conception, même sur les plus petits écrans. Cet en-tête mélange deux images. Le premier est une marque de logo SVG Trabant évolutive. Pour masquer cette image de présentation de la technologie d’assistance, j’ajoute un rôle ARIA et définit son attribut caché sur true. Ensuite, j’ajoute un autre rôle ARIA d’img à la deuxième image, une image de ce qu’on a appelé “la pire voiture jamais fabriquée:”

Trabant

J’ai besoin que le grand logo Trabant reste parfaitement circulaire quelle que soit la largeur de son élément parent. Un rapport hauteur / largeur est un rapport entre la largeur (x) et la hauteur (y) d’un élément. Un rapport 1: 1 pour les carrés, 1,618: 1 est le rapport doré et 16: 9 pour les supports grand écran.

Une technique populaire pour maintenir le rapport intrinsèque a été développée en 2009 par Thierry Koblentz, et il utilise padding-top appliqué à un élément ou à un pseudo-élément à l’intérieur. Différents pourcentages de remplissage créent des ratios différents:


1:1          100%
4:3          75%
16:9         56.25%

Ce logo est circulaire, donc la boîte qu’il occupe doit toujours rester carrée. J’ajoute un pseudo-élément avant: et je règle son remplissage supérieur à 100%:

header:before {
content: "";
display: block;
padding-top: 100%; }

J’ai maintenant trois éléments dans mon en-tête. En plaçant le pseudo-élément et mes images dans la même zone de grille, CSS Grid facilite leur empilement:

header {
display: grid; }

header:before,
header img {
grid-column: 1;
grid-row: 1; }

Pour centrer ces images horizontalement et verticalement – peu importe leur largeur ou leur hauteur – je les aligne et les justifie toutes les deux au centre:

header {
align-items: center;
justify-content: center; }

Enfin, pour mélanger la photo de mon Trabant et son logo SVG, j’ajoute un mode mix-blend avec une valeur de superposition:

header img:last-of-type {
mix-blend-mode: overlay; }

Ma division de bannière contient un gros titre bicolore suivi de trois courts paragraphes:

J’aligne ce titre vers la droite, puis resserre son début pour compléter sa grande taille. Ensuite, j’applique une couleur d’accent à l’élément span à l’intérieur qui ajoute l’effet bicolore:

h1 {
font-size: 4.875rem; 
line-height: 1.1;
text-align: right; }

h1 span {
color: #f85981; }

Pour atténuer le deuxième paragraphe de la bannière, j’utilise un sélecteur de pseudo-classe de type n et je réduis sa taille:

#banner p {
font-size: 1.424rem; }

#banner p:nth-of-type(2) {
font-size: 1rem; }

Avec ces styles de fondation en place pour chaque taille d’écran, j’introduis la disposition pour les écrans de taille moyenne en ajoutant une grille symétrique à trois colonnes avec trois lignes de taille automatique:

@media (min-width: 48em) {

body {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto auto;
padding: 4rem; }
}

L’en-tête et la division bannière remplissent tous les deux toute la largeur de ma mise en page. Je place la bannière dans la première ligne, même si elle arrive en deuxième position dans mon HTML:

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

header {
grid-row: 2 / 4; }

#banner {
grid-row: 1; }

L’ajustement de la taille des caractères pour maintenir une hiérarchie équilibrée est l’un des aspects les plus satisfaisants du développement de conceptions à travers les tailles d’écran. C’est aussi l’un des plus difficiles. J’augmente la taille du titre et de deux paragraphes en les déplaçant vers le haut de mon échelle typographique:

h1 {
font-size: 8rem; 
line-height: 1.1;
text-align: center; }

#banner p {
font-size: 2.027rem; }

#banner p:nth-of-type(2) {
font-size: 1.266rem; }

Mon en-tête domine un grand écran en remplissant la moitié de sa largeur, et j’équilibre son poids visuel avec le contenu restant, y compris le titre surdimensionné. Bien que cette conception semble asymétrique, sa grille est symétrique et contient six colonnes de même largeur:

@media (min-width: 82em) {

body {
grid-template-columns: repeat(6, 1fr); 
grid-column-gap: 2vw;
grid-row-gap: 2vh; }
}

L’en-tête couvre les trois premières colonnes et les trois lignes de ma mise en page:

header {
grid-column: 1 / 4;
grid-row: 1 / 4; }

Je dois placer le titre et la division de la bannière sur ma grille, et non la bannière qui les contient. Je change la propriété d’affichage de cette division en contenu, ce qui la supprime effectivement du DOM à des fins de style:

#banner {
display: contents; }

Je place les éléments enfants de la bannière en face de mon en-tête à l’aide des numéros de ligne de colonne et de ligne. Ensuite, j’augmente à nouveau la taille de mon titre, puis je place la division et le paragraphe du texte en cours d’exécution, en laissant la colonne avant la division vide. Cela crée un espace pour mon pied de page:

#banner h1 {
grid-column: 4 / -1;
grid-row: 1;
font-size: 6.5rem; }

#banner div {
grid-column: 5 / -1;
grid-row: 2; }

body > p {
grid-column: 5 / -1;
grid-row: 3; }

Enfin, je place le pied de page à côté de mon texte en cours d’exécution, ce qui ajoute à l’aspect asymétrique de ce design à l’ancienne:

footer {
grid-column: 4;
grid-row: 3; }
affiche de Max Huber
Affiche pour le musée Bellerive de Max Huber, 1969. (Grand aperçu)

Fusionner l’illustration et la photographie avec des formes audacieuses et une typographie claire était un aspect déterminant du style de signature de Huber. En choisissant des polices de caractères de style ancien contemporain et en utilisant les technologies d’aujourd’hui – y compris les modes de fusion et les polices Web – nous pouvons suivre l’exemple de Huber et créer des designs modernes avec une sensation classique.

Conception de Huber
De gauche à droite: Garamond Pro, Jenson Pro, Palatino. (Grand aperçu)
Polices de caractères transitionnelles

Au 17e siècle, The Age of Enlightenment était un mouvement intellectuel qui rejetait l’art, la littérature et la philosophie traditionnels. En 1692, Louis XIV a commandé une nouvelle police de caractères basée sur des principes scientifiques plutôt que sur la calligraphie. Le résultat a été Romain du Roi, une police de caractères avec des lettres basées sur une grille de 2304 carrés.

Romain du Roi était plus précis dans sa conception que la plupart des polices de caractères précédentes et présentait des traits avec un contraste plus net entre les épais et les fins. Il a influencé les concepteurs de caractères désormais célèbres John Baskerville, Giambattista Bodoni et William Caslon. Leur travail a supprimé toute trace de calligraphie humaniste pour créer des polices transitionnelles (néoclassiques) qui tiraient parti de nouvelles encres et de papiers de meilleure qualité.

Dans les polices de caractères de transition, les lettres minuscules ont une contrainte verticale ou presque verticale. Les empattements de tête sur les lettres ascendantes comprenant «b», «d», «h» et «l» sont généralement plus horizontaux. Les extrémités de nombreux traits sont marquées par des bornes à billes à la place des angles ou des contours ou des empattements.

police de caractères
Mme Eaves. (Grand aperçu)
police de caractères
Times New Roman. (Grand aperçu)

Les polices de caractères transitionnelles contemporaines sont populaires, y compris Cambria qui a été conçu par Jelle Bosma en 2004 pour la collection de polices ClearType de Microsoft. Cambria est sorti avec Windows Vista. Georgia a été conçue par Matthew Carter en 1993. Conçue par Zuzana Licko en 1996, Mme Eaves est une variante de Baskerville et a été nommée d’après Sarah Eaves, l’épouse de John Baskerville.

Identification des polices de caractères modernes

Alors que les polices Old Style et Transitional ont accentué le contraste entre les traits épais et fins, les polices Modernes ont poussé cette caractéristique à l’extrême. Le terme Modern peut être trompeur car la première police de caractères de ce style a été conçue en 1784 par Firmin Didot. Didot était le fils de François-Ambroise dont plusieurs polices de caractères dont Ambroise et, bien sûr, Didot portent le nom.

Giambattista Bodoni a donné son nom aux fontes de style Didone avec un brusque changement de contraste entre les traits épais et fins. Ces polices comportent également des empattements sans parenthèses avec des angles vifs entre les épaisseurs et les minces, des axes verticaux et de petites ouvertures en lettres ouvertes, y compris la lettre minuscule «a».

police de caractères
À gauche: Ambroise Std. À droite: Cabrito Didone. (Grand aperçu)
police de caractères
À gauche: Didot. À droite: Moderno FB. (Grand aperçu)

Les polices de caractères modernes sont souvent considérées comme des choix élégants et stylés. C’est pourquoi, lorsque vous parcourez des étagères remplies de magazines de mode, vous constaterez qu’ils utilisent souvent les polices de caractères Didone pour leurs bannières.

Mais ces mêmes caractéristiques – contraste extrême, ouvertures plus petites et axes verticaux – se retrouvent également dans les polices modernes avec des personnalités très différentes.

police de caractères moderne
À gauche: Blenny. À droite: Dedica. (Grand aperçu)
police de caractères moderne
À gauche: Ohno Blazeface. À droite: la luxure. (Grand aperçu)

Polices de caractères modernes

design, inspiré par Max Huber
À gauche: mon design grand écran, inspiré de Max Huber. Droite: un arrière-plan mélangé ajoute de la profondeur à cette conception à toutes les tailles d’écran. (Grand aperçu)

Je n’ai besoin que de trois éléments structurels pour mettre en œuvre ma prochaine conception inspirée de Huber; un en-tête qui contient les deux logos Trabant, une division de bannière et mon contenu principal:

Ces styles de fondations ajoutent de la personnalité à chaque écran, quelle que soit sa taille. Ils ajoutent une police de caractères moderne à contraste élevé et un arrière-plan mélangeant un contour du Trabant avec un dégradé linéaire pour ajouter de la profondeur à cette conception:

body {
background-color: #34020B;
background-image: url(body.svg),
linear-gradient(180deg, #6E2838 0%, #98304D 21%, #34020B 99%);
font-family: "modern";
color: #fff; }

Je positionne le plan Trabant à mi-chemin horizontalement, tandis que le dégradé se répète sur ma page:

body {
background-position: 50vw 2rem, 0 0;
background-repeat: no-repeat, repeat-x; }

La bannière comprend un gros titre. J’ajoute des sauts de ligne explicites à mon HTML et un élément span pour ajouter de la couleur à des mots spécifiques. Ensuite, je regroupe les paragraphes de ma bannière en une division. Cela me permettra de modifier sa position dans ma mise en page sur des écrans plus grands plus tard dans le processus:

La position de mon image de fond de plan laisse place à un gros titre. Pour vous assurer qu’il n’échappe pas à l’espace que je lui ai autorisé, je limite la largeur maximale de ce titre à la moitié de la largeur de la fenêtre d’affichage:

#banner h1 {
max-width: 50vw; }

Ensuite, j’ajoute de la couleur à l’élément span et dimensionne le type de la bannière, augmentant la taille du titre et réduisant son interligne pour créer un bloc de texte solide:

#banner h1 {
font-size: 4rem;
line-height: 1;
text-transform: uppercase; }

#banner h1 span {
color: #f85981; }

#banner p {
font-size: 1.424rem; }

#banner p:nth-of-type(2) {
font-size: 1rem; }

Cette conception comprend une liste de spécifications Trabant; sa capacité et sa consommation de carburant, plus le prix de la voiture, qui a été défini par le gouvernement est-allemand:

  • Two-stroke fuel tank

    6.3gallon

  • Cet ordre HTML est logique lors de la lecture sans styles, mais j’ai besoin que la combinaison de titre et de paragraphe soit inversée visuellement pour former un bloc de copie plus serré. Je retourne l’ordre de mon titre et de mon paragraphe en spécifiant les éléments de liste en tant que conteneurs flexibles et en changeant leur direction par défaut de ligne en colonne inversée:

    li {
    display: flex;
    flex-direction: column-reverse; }
    
    ul p {
    font-size: 1.802rem; }
    
    ul p {
    color: #f85981; }

    La conception numérique est une considération importante lors du choix d’une police de caractères. Votre choix peut dépendre de la clarté et de la lisibilité lorsque le type est défini sur de petites tailles. Les chiffres de nombreuses polices de caractères modernes ont des courbes distinctives et d’autres caractéristiques qui peuvent contribuer à la personnalité d’un design lorsqu’il est utilisé à de plus grandes tailles.

    Je veux faire une caractéristique des chiffres dans cette conception, donc j’ai surdimensionné l’élément gras. Et bien que je ne préconise pas normalement de modifier le suivi de toute police de caractères, l’augmentation de l’espacement des lettres de ces chiffres aide à accentuer leur caractère:

    ul p b {
    font-size: 4.5rem;
    letter-spacing: .05em;
    line-height: .8;
    color: #fff; }

    Le prix dans ma liste de spécifications comprend également un élément span qui contient le code de devise est-allemand, DDM:

  • Official state price

    7,450 DDM

  • Pour moi, chaque élément typographique – aussi petit soit-il – est l’occasion d’expérimenter des traitements de caractères intéressants. L’encombrement minuscule de ce petit élément le rend parfait pour une rotation en position verticale afin qu’il se trouve parfaitement à côté du grand chiffre:

    ul p small {
    font-size: .889rem;
    text-align: right;
    transform: rotate(180deg);
    writing-mode: vertical-rl; }

    Ce niveau de détails typographiques peut sembler excessif pour les styles de fondation, mais j’ai autant réfléchi à la conception du type pour les petits écrans que dans la mise en page des plus grands.

    storyboard
    Avant de mettre en œuvre une conception, je crée un storyboard simple pour montrer comment mes éléments se déploieront sur une sélection de tailles d’écran. (Grand aperçu)

    Cela signifie également que je n’ai qu’à effectuer des ajustements mineurs pour les écrans de taille moyenne, d’abord en modifiant les valeurs de couleur dans mon arrière-plan dégradé CSS et en repositionnant mon plan Trabant au centre de l’écran et 30rem à partir du haut:

    @media (min-width: 48em) {
    
    body {
    background-image: url(body.svg),
    linear-gradient(180deg, #6E2838 0%, #98304D 20%, #34020B 100%);
    background-position: 50% 30rem, 0 0; }
    }

    L’introduction de la disposition sur les écrans de taille moyenne implique un peu plus que de placer les deux logos d’en-tête sur les côtés opposés de l’écran. J’ajoute deux colonnes symétriques à l’en-tête et aligne les logos pour équilibrer leurs lignes centrales:

    header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    width: 100%; }

    J’aligne le premier logo à gauche et le second à droite:

    header > *:first-child {
    text-align: left; }
    
    header > *:last-child {
    text-align: right; }

    Le surdimensionnement d’un titre est un moyen fabuleux de présenter les détails complexes de nombreuses polices de caractères modernes.J’augmente donc sa taille et j’utilise l’espace blanc que j’ai ajouté à mon HTML pour diviser ses mots en trois lignes:

    #banner h1 {
    white-space: pre;
    max-width: 100vw;
    font-size: 8rem; }

    Alors que sur les petits écrans, les paragraphes de la bannière suivent le titre comme ils le font dans le HTML, je veux les combiner avec mon titre pour créer un élément typographique intéressant.

    J’utilise le positionnement absolu pour déplacer la division qui contient ces paragraphes en place. Les valeurs supérieure et gauche basées sur le texte permettent à ces paragraphes de rester à la bonne position lorsque le titre change de taille:

    #banner {
    position: relative;
    margin-bottom: 25rem; }
    
    #banner div {
    position: absolute;
    top: 8.25em;
    left: 20em; }

    Pour mon ajustement final de l’écran de taille moyenne, je transforme ma liste non ordonnée en un conteneur flexible et configure ses éléments pour occuper une quantité égale d’espace horizontal disponible:

    ul {
    display: flex; }
    
    li {
    flex: 1; }

    Adapter un design pour plusieurs tailles d’écran est un défi que j’apprécie vraiment. Pour utiliser l’espace supplémentaire disponible sur les grands écrans, j’applique des valeurs de grille à l’élément body pour créer trois colonnes symétriques:

    @media (min-width: 82em) {
    
    body {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 2vw; }

    Les éléments de cette conception ne se chevauchent pas, donc j’utilise des zones de modèle de grille pour leur simplicité. Cette conception a neuf zones de grille, et je donne à chacune un nom qui reflète son contenu; en-tête, bannière, données et principal:

    body {
    grid-template-areas: 
    "header header ."
    "banner  banner data"
    ". . main"; }
    affiche de Max Huber
    Burattini, marionnette, affiche pupi conçue par Max Huber, 1980. (Grand aperçu)

    Je place ces éléments en utilisant des noms de zone qui me permettent de changer où ils apparaissent dans ma mise en page sans modifier leur position dans mon HTML:

    header {
    grid-area: header; }
    
    #banner {
    grid-area: banner; }
    
    main {
    display: contents; }
    
    main > p {
    grid-area: main; }
    
    ul {
    display: block;
    grid-area: data; }
    design par Max Huber
    Dans l’ordre habituel: Cabriro Didone, Didot, Lust. (Grand aperçu)
    Spotting Slab Serif (Egyptian) Polices de caractères

    Cette classification finale des caractères à empattement est apparue pour la première fois dans les affiches publicitaires du début du XIXe siècle et – avec ses formes de lettres en blocs – a été conçue pour attirer l’attention. Une caractéristique déterminante d’un empattement de dalle est un empattement souvent sans crochets qui rencontre la tige à un angle de 90 °.

    police serif
    À gauche: Archer. À droite: Clarendon URW. (Grand aperçu)
    police serif
    À gauche: Jubilat Bold. À droite: Lexia. (Grand aperçu)

    Clarendon n’est pas seulement le nom d’une police de caractères mais d’un style de polices à empattement Slab. Alors que les formes de lettres de nombreux empattements Slab ont une largeur de ligne uniforme, le style Clarendon rompt la convention avec une différence plus prononcée entre les traits les plus épais et les plus fins. Contrairement à d’autres empattements Slab, Clarendon a des supports incurvés.

    Les bornes à billes d’Archer lui confèrent un aspect distinctif qui est populaire auprès des designers imprimés et en ligne. Sentinel, également par Hoefler & Co., a été utilisé par Barack Obama dans sa campagne de réélection de 2012. Comme Archer, il vient dans une variété de poids et comprend un italique.

    J’ai choisi ITC Officina Serif par Erik Spiekermann et Ole Schäfer pour mon premier livre Transcending CSS, même si à l’époque je ne connaissais pas bien la conception typographique. FF Unit Slab, également par Erik Spiekermann, est disponible en plusieurs poids, italiques et prend en charge 107 langues différentes.

    Dalton Maag est la fonderie dont j’utilise le plus souvent les polices. J’ai choisi leur Lexia pour mes couvertures de livres les plus récentes, et j’aime la personnalité de son poids publicitaire le plus épais, surtout en italique. Vous devriez être familier avec Mokoko, également par Dalton Maag, car je l’ai choisi pour les titres et les titres de cette série.

    Alors que Barack Obama a choisi son empattement Slab de Hoefler & Co., son collègue démocrate Bernie Sanders a choisi Jubilat de Joshua Darden pour sa campagne présidentielle de 2016. Jubilat est l’un des empattements Slab les plus polyvalents et est disponible en 11 poids avec des italiques assortis.

    police serif
    À gauche: Mokoko. À droite: Rockwell. (Grand aperçu)

    Les empattements de dalle exigent l’attention

    conception d'empattement de dalle, inspirée de Max Huber
    À gauche: Ma conception d’empattement de dalle grand écran, inspirée de Max Huber. À droite: une introduction graphique sur de petits écrans. (Grand aperçu)

    Développer ma conception finale nécessite très peu d’éléments structurels, malgré sa complexité visuelle. Les éléments que j’ai choisis devraient sembler familiers car je les ai déjà utilisés dans plusieurs combinaisons.

    L’en-tête contient à nouveau deux images SVG, une division de bannière comprend le titre et le premier paragraphe, ainsi qu’une liste non ordonnée qui affiche les spécifications de Trabant. Cette fois, j’inclus également deux éléments SVG. Un pour les 57 chiffres massifs, le second pour le texte décoratif qui suit une trajectoire courbe:

    Le rapprochement de trois de ces éléments constitue une introduction graphique à ce design. Je commence par les styles de fondation qui incluent la couleur et présente la police serif de la dalle:

    body {
    background-color: #8a8988;
    font-family: "slab";
    color: #f7eed7; }

    Je limite la largeur de mon en-tête à 220 pixels et j’aligne de manière centralisée son contenu:

    header {
    margin-bottom: 2rem; 
    width: 220px;
    text-align: center; }

    Pour me donner un contrôle précis sur leur apparence et pour leur permettre de s’adapter à la largeur de n’importe quelle fenêtre, j’ai développé mes chiffres surdimensionnés en utilisant SVG. Ce graphique évolutif comprend deux chemins et pour s’assurer qu’il communique son contenu à tout le monde, j’ajoute une étiquette ARIA et un élément de titre à mon SVG:

    
    The year 1957
    
    
    

    Les deux chiffres de ce SVG se chevauchent, afin d’ajouter de la profondeur; J’abaisse leur opacité, puis j’utilise un mode de mélange pour mélanger leurs couleurs:

    body > svg path {
    opacity: .75; }
    
    body > svg path:nth-of-type(1) {
    fill: #f5e3B4; }
    
    body > svg path:nth-of-type(2) {
    fill: #ba0e37;
    mix-blend-mode: multiply; }

    Le dernier élément de mon graphique d’introduction est le mot vertical «Duroplast», le plastique renforcé de fibres utilisé pour fabriquer les corps Trabant. Vous pouvez rechercher cet élément dans mon code HTML, mais vous ne le trouverez pas, car je génère ce contenu à l’aide d’un pseudo-élément. Je positionne le contenu généré, change son mode d’écriture en vertical, puis le fais pivoter de 180 degrés:

    body {
    position: relative; }
    
    body:after {
    content: "duroplast";
    position: absolute;
    top: 2rem;
    right: 2rem;
    font-size: 7rem;
    transform: rotate(180deg);
    writing-mode: vertical-rl; }

    Comme ce pseudo-élément suit efficacement le contenu du flux, il apparaît au-dessus de lui dans l’ordre d’empilement, ce qui permet de le mélanger avec d’autres éléments et d’ajouter de la profondeur à cette conception:

    body:after {
    mix-blend-mode: overlay; }

    Le nombre de Trabants produits au cours de sa durée de vie est développé à l’aide d’un titre de niveau inférieur, suivi de deux paragraphes:

    Units produced

    1957–1990

    3,096,999

    L’ordre visuel de ces éléments est différent de celui du HTML, et j’utilise Flexbox pour changer leur ordre dans leur division parent. Tout d’abord, je change la flex-direction de la ligne par défaut en colonne:

    #content {
    display: flex;
    flex-direction: column; }

    Ensuite, j’utilise la propriété order pour réorganiser les trois éléments, en plaçant mon titre en dernier:

    #content h3 {
    order: 3;
    font-weight: normal;
    text-transform: uppercase; }

    Enfin, j’augmente la taille de mon deuxième paragraphe pour correspondre aux numéros d’élément de liste ci-dessous. Cela donne l’impression que ce contenu et la liste non ordonnée qui suit font partie du même élément:

    #content p:nth-of-type(2) {
    font-size: 4.5rem; }

    L’espace sur les petits écrans peut être très important, mais cela ne signifie pas que nous ne pouvons pas être audacieux avec notre typographie. Au fur et à mesure que les écrans deviennent plus grands, il y a encore plus de possibilités d’être aventureux avec les conceptions typographiques.

    J’introduis la disposition dans les écrans de taille moyenne en appliquant des valeurs de grille à l’élément body pour créer six colonnes symétriques et quatre lignes de taille automatique:

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

    Ensuite, je place ma division d’en-tête et de bannière dans la première ligne en utilisant des numéros de ligne. Ma bannière occupe les trois premières colonnes, tandis que l’en-tête remplit les trois dernières:

    header {
    grid-column: 5 / -1;
    grid-row: 1; }
    
    #banner {
    grid-column: 1 / 4;
    grid-row: 1; }

    Je place les chiffres maintenant énormes sur ma grille et abaisse leur valeur d’index z pour qu’ils apparaissent derrière d’autres éléments de ma mise en page:

    body > svg {
    grid-column: 1 / -1;
    grid-row: 2 / 4;
    z-index: -1; }

    Je remplace le précédent: après le positionnement de la pseudo-classe avec des valeurs de grille et j’augmente sa taille de police pour remplir plus d’espace disponible:

    body:after {
    position: static;
    grid-column: 4;
    grid-row: 1 / 3;
    z-index: 1;
    font-size: 10rem; }

    En dépit d’être construit sur une grille symétrique, le fait de laisser certaines colonnes vides crée un design asymétrique inhabituel:

    #content {
    grid-column: 2 / -1;
    grid-row: 3;
    mix-blend-mode: difference; }
    
    ul {
    grid-column: 1 / -1;
    grid-row: 4 / -1; }

    J’augmente ensuite la taille globale de mon type pour faire bonne impression sur les écrans de taille moyenne:

    #content h3,
    #content p {
    color: #31609e; }
    
    #content h3 {
    font-size: 1.75rem; }
    
    #content p:nth-of-type(1) {
    font-size: 3rem; }
    
    #content p:nth-of-type(2) {
    font-size: 8rem; }
    Texte SVG sur le chemin
    Texte SVG
    Le texte qui suit un chemin est l’une des raisons les plus intéressantes d’utiliser SVG. (Grand aperçu)

    L’une des raisons les plus intéressantes d’utiliser SVG pour le rendu de texte est qu’il suit un chemin, un dispositif de conception qui n’est pas possible en utilisant CSS seul. Mon SVG sinueux comprend un chemin arrondi, plus un élément de texte qui contient mon contenu. J’inclus ce texte dans un élément textPath SVG et utilise sa valeur d’attribut href pour le lier à l’ID du chemin ci-dessus:

    Je ne souhaite pas que cette courbe apparaisse sur les petits écrans. Je modifie donc la valeur d’affichage de sa division parente sur aucune dans mes styles de fondation. À l’aide d’une requête multimédia de largeur minimale, je reviens ensuite sur cette valeur pour la bloquer afin de la révéler pour les écrans de taille moyenne, en la plaçant sur ma grille et en augmentant sa valeur d’index z. Cela le fait avancer dans l’ordre d’empilement:

    #curve {
    display: none; }
    
    @media (min-width: 48em) {
    
    #curve {
    display: block;
    grid-column: 1 / 6;
    grid-row: 2 / 4;
    z-index: 2;
    transform: translateY(-1.5rem); }
    }

    Avec ce texte en place, j’utilise des styles de taille de police et de transformation de texte familiers, suivis des propriétés SVG de remplissage et d’ancrage de texte qui définissent mon texte depuis le début de son chemin:

    #curve text {
    font-size: .889rem;
    text-transform: uppercase;
    fill: #fff;
    text-anchor: start; }

    Mes choix de typographie confiants exigent que je sois également courageux avec mon choix de mise en page pour des écrans plus grands. Les six colonnes symétriques et les quatre rangées que j’ai choisies plus tôt offrent la possibilité de placer mes éléments de plusieurs façons.

    Avec tous mes styles de typographie déjà définis, il ne reste plus qu’à déplacer mes éléments vers de nouvelles positions qui placent l’en-tête, la division de bannière et la liste non ordonnée à côté de mes chiffres désormais gigantesques:

    pochette de disque conçue par Max Huber
    Voix et images de la pochette du disque de 1958 conçue par Max Huber, 1958. (Grand aperçu)
    @media (min-width: 64em) {
    
    body {
    grid-column-gap: 2vw;
    align-items: start; }
    
    body > svg {
    grid-column: 1 / 5;
    grid-row: 2 / 5;
    z-index: -1; }
    
    header {
    grid-column: 5 / -1;
    grid-row: 1; }
    
    #banner {
    grid-column: 5 / -1;
    grid-row: 2; }
    
    #content {
    grid-column: 1 / 4;
    grid-row: 4; }
    
    #curve {
    grid-column: 1 / 5;
    grid-row: 1 / 4; }
    
    ul {
    grid-column: 5 / -1;
    grid-row: 3 / -1;
    display: block; }
    }
    conceptions de Max Huber
    De gauche à droite: Mokoko, Jubilat Medium, Ohno Blazeface. (Grand aperçu)

    NB: Les membres de Smashing ont accès à un 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 les exemples de cela, et chaque numéro du site Web d’Andy.

    En savoir plus sur la série

    Smashing Editorial
    (ra, yk, il)
    Close Menu