Neville Brody Design ne peut pas rester neutre – Smashing Magazine


Dans ce sixième volet d’Inspirated Design Decisions, Andy Clarke explorera comment le directeur artistique britannique Neville Brody et en particulier son travail sur The Face Magazine inspire ses créations pour le Web. Comment utilisons-nous les modes de fusion pour ajouter de la profondeur à nos conceptions? Comment utilisons-nous le texte vertical pour l’impact? Comment utiliser des chemins de détourage pour apporter du caractère et de l’énergie à un design? Dans cet article, nous allons explorer cela.

Bien que je sois né dans le nord-ouest de l’Angleterre, j’ai grandi à Corby, une ville sidérurgique au milieu du pays. À partir des années 1930, Corby avait grandi pour dépendre de la production d’acier, avec des familles de la classe ouvrière – un grand nombre d’entre elles d’Écosse – affluant dans la région. Pendant la Seconde Guerre mondiale, brûler du pétrole pour produire une épaisse fumée a empêché tout sauf quelques bombes allemandes, mais quand j’étais adolescent, un nuage toxique différent, le thatchérisme, a plané sur Corby comme il l’a fait dans de nombreux centres industriels et manufacturiers à travers le Royaume-Uni.

Corby faisait partie de la British Steel Corporation nationalisée dans les années 1960, mais en vingt ans, le gouvernement conservateur a annoncé la fermeture de l’usine de Corby. Cela a entraîné la perte de 11 000 emplois et un taux de chômage dans la ville de plus de 30%.

Adolescent ayant grandi à Corby au début des années 80, mes perspectives étaient aussi sombres que des milliers d’autres dans la ville. La musique était une forme de distraction et les clubs et pubs autour de Corby avaient une scène musicale locale florissante. Des groupes avec des noms comme Bandits At 7 O’Clock, The Laughing Mothers et Play The Joker, ont été inspirés par les thèmes sombres du post-punk, du rockabilly et du rock classique.

La musique n’était pas seulement pour l’évasion, c’était aussi un moyen d’exprimer des opinions politiques et de soutenir les causes qui nous tenaient à cœur. En tant que membre du Corby Music Collective, mon groupe, The Inline, a joué des concerts pour soutenir le mouvement anti-apartheid et a même soutenu Billy Bragg lors de sa première tournée nationale pour soutenir les mineurs en grève. J’ai toujours le pass backstage que Billy a signé pour moi.

Les groupes locaux ont conçu leur propre publicité et l’œuvre principalement bicolore était énervée et non polie. Des ateliers de sérigraphie locaux ont offert des dépliants et des affiches abordables. Les magazines de musique étaient également populaires. Pas des publications grand public comme Melody Maker ou des titres pour adolescents comme des titres, mais des titres comme Sounds, qui couvraient la contre-culture, et bien sûr The Face. Je savais qu’il y avait quelque chose de spécial à ce sujet, même si à l’époque je ne savais pas ce que faisait un directeur artistique ni qui était Neville Brody.

The Face est devenu un miroir de la culture pop de la tourmente politique et sociale en Grande-Bretagne à cette époque. Ses conceptions non conventionnelles et stimulantes et le travail de Brody ont redéfini la presse musicale britannique à partir des années 1980 et influencé une génération de designers. Même vingt-cinq ans après sa création, les pages de Brody du magazine The Face sont toujours des créations remarquables. Je suis toujours inspiré par eux tous les jours et dans ce numéro, je vais vous expliquer comment.

Précédemment dans «Décisions de conception inspirées»

  1. Décisions de conception inspirées: Avaunt Magazine
  2. Décisions de conception inspirées: questions pressantes
  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
Magazines de musique de 1980 dont The Face (extrême droite)
Magazines de musique de 1980 dont The Face (extrême droite). (Grand aperçu)

Inspiré par Inspiré par Neville Brody

Le punk britannique était une réaction au chômage de masse et un reflet des troubles sociaux dans la Grande-Bretagne Thatcherite des années 1970. Punk a rejeté tout ce qu’il considérait comme indulgent et son approche de bricolage a ramené la musique à l’essentiel.

En 1977 – au plus fort de l’influence du punk sur la culture britannique – Brody a commencé à étudier le graphisme au London College of Printing, où il a rapidement trouvé l’environnement frustrant et décalé par rapport à ce qui se passait autour d’eux. Les tuteurs du LCP ont insisté sur les applications commerciales pour la conception graphique et le travail expérimental de Brody a été condamné par eux comme «non commercial».

Mais l’approche rapide et bricolage de Brody pour l’approche du design et en particulier son utilisation de la typographie maison étaient parfaitement adaptés aux affiches du groupe qu’il avait faites alors qu’il était encore au LCP. Après son départ, Brody a conçu des pochettes de disques pour Rocking Russian avant de passer à Stiff Records, et finalement à The Face. The Face était un magazine sur la culture, la mode et la musique publié en Grande-Bretagne jusqu’en 2004 et Brody a travaillé comme directeur artistique jusqu’en 1986.

The Face était un laboratoire vivant où je pouvais expérimenter et le faire publier. Notre règle d’or était de tout remettre en question. Si un élément de page existait tout comme le goût ou le style, il pourrait être abandonné. Les numéros de page peuvent être des lettres ou des formes dont la taille augmente. Nous pourrions commencer le titre sur la page précédente. Nous avons eu des catastrophes et des quasi-accidents à chaque problème. Nous avons eu deux semaines pour tout diriger, puis une semaine pour le mettre en page. C’était pré-informatique donc tout était tracé à la main. […] Ce n’était certainement pas un travail de neuf à cinq. Il fallait être obsédé pour que ça marche.

– Neville Brody

Jungle Fever: L'art de Jean-Paul Goude. The Face 1982. Direction artistique de Neville Brody. Dans une grande partie du travail de Brody, la structure est la principale caractéristique de la conception.
Jungle Fever: L’art de Jean-Paul Goude. The Face 1982. Direction artistique de Neville Brody. Dans une grande partie du travail de Brody, la structure est la principale caractéristique de la conception. (Grand aperçu)

Une bonne typographie est souvent décrite en termes de règles, mais Brody n’était pas intéressé par les règles, alors il a sauté les cours de typographie au LCP. Ne pas connaître les règles conventionnelles de la typographie signifiait que Brody n’était pas limité par elles. Au lieu de cela, Brody a étudié la typographie qu’il a vue autour de lui, du mouvement du dadaïsme, du futurisme et du travail d’Alexander Rodchenko, que j’ai présenté dans un numéro précédent.

Brody considérait la typographie comme un moyen de commenter les idées et devait donc être expressive et divertissante. Les lettres largement espacées sont devenues une partie familière des conceptions de Brody pour The Face. Il a utilisé cet espace supplémentaire pour son esthétique et pour souligner la direction horizontale, verticale et parfois diagonale des lignes de caractères. Son large espacement des lettres a également ralenti l’expérience de lecture et créé des espaces pour que les gens s’arrêtent et examinent le contenu.

Mais malgré le manque de formation de Brody en typographie traditionnelle, sa priorité était toujours que les gens puissent lire facilement le magazine. Dans cet esprit, il a travaillé en étroite collaboration avec l’équipe éditoriale de The Face.

The Face a maintenu l’attitude rebelle du punk, mais son esthétique originale n’était pas seulement superficielle. Avec The Face, Brody a remis en question la structure d’un magazine et comment les gens en font l’expérience. Je trouve beaucoup de parallèles entre la façon dont il a exploré l’expérience multi-pages de la lecture d’un magazine et la façon dont les gens utilisent le Web.

L'éthique Werk. The Face 1982. Direction artistique de Neville Brody. Cette diffusion rappelle le constructivisme dans l'agencement des images et du texte.
L’éthique Werk. The Face 1982. Direction artistique de Neville Brody. Cette diffusion rappelle le constructivisme dans l’agencement des images et du texte. (Grand aperçu)

Dans The Face, saigner des images et taper les bords d’une page fait plus que rendre le magazine unique. Cela suggère qu’il y a plus à voir en dehors de la page visible et que ce que quelqu’un voit fait partie de quelque chose de plus grand.

La grille de mise en page de The Face utilise seulement deux ou trois colonnes, mais l’exécution de Brody montre à quel point les grilles, même les plus simples, peuvent être flexibles lorsqu’elles sont combinées avec imagination. The Face montre comment un système de conception est la structure sur laquelle vous commencez à construire une conception. Il doit prendre en charge une conception, pas définir, ni dicter le résultat final.

Sur le Web, on nous dit de ne pas faire regarder plus d’une personne, de ne pas la faire réfléchir. Mais, l’une des raisons pour lesquelles je trouve le travail de Brody si fascinant, c’est qu’il fait regarder les gens deux fois. Ses dessins répartis pour The Face étaient souvent autonomes et encourageaient les gens à s’attarder sur eux plutôt que de tourner rapidement la page. Bien que vous puissiez penser que cela va à l’encontre des principes de conception de l’expérience utilisateur, en réalité, cela peut être un facteur pour rendre vos conceptions plus mémorables car les gens passent plus de temps à les considérer.

La résurrection du Tchad. The Face 1984. Direction artistique de Neville Brody. Cette conception a introduit une police de caractères dessinée à la main qui a été fréquemment utilisée dans le magazine à partir de ce moment.
La résurrection du Tchad. The Face 1984. Direction artistique de Neville Brody. Cette conception a introduit une police de caractères dessinée à la main qui a été fréquemment utilisée dans le magazine à partir de ce moment. (Grand aperçu)

Cette attitude contraire aux règles ne doit pas se faire au détriment de la convivialité. Les conceptions de Brody pour The Face utilisent une grille, qui fournit une structure à une page et une continuité tout au long du magazine. Ils incluent également des fonctionnalités qui guident quelqu’un à travers un article, de l’endroit où commencer à lire, jusqu’à savoir qu’il a atteint la fin. Les drop-caps sont un appareil traditionnel pour aider quelqu’un à savoir par où commencer, mais Brody est devenu obsédé par la recherche d’alternatives, y compris les symboles graphiques, les traitements de type alternatifs et les espaces blancs. Comme Brody l’a expliqué à Jon Wozencroft en 1987, “Une fois que vous avez enfreint les règles, tout est littéralement possible.”

Pour beaucoup de designers, The Face est devenu le parfait guide de conversation graphique, mais son succès, j’espère, est aussi une indication que vous pouvez aller à contre-courant et le faire fonctionner commercialement.

– Neville Brody

Brody voulait que son travail démontre qu’il est possible de rompre avec les approches traditionnelles du design, même lorsque ce que vous concevez est commercial. Il ne voulait pas que les gens imitent simplement ses créations ou les utilisent pour créer de nouvelles règles ou traditions. Je ressens la même chose lorsque j’explore les idées de la presse écrite et d’autres médias et que je les applique au Web sans me demander ce que nous visons à réaliser et pourquoi nous le faisons.

Après cinq ans, Brody a quitté The Face en 1986 et est devenu l’un des designers britanniques les plus influents et prolifiques. Dans les années 1990, Brody a cofondé le projet FUSE avec Jon Wozencroft, et leur magazine révolutionnaire a publié vingt numéros. Il a également cofondé FontFont, la bibliothèque de polices de caractères, aux côtés d’Erik Spiekermann. En 2018, Brody a quitté son poste de doyen de l’École de communication du Royal College of Art.

Jon Wozencroft – partenaire de Brody chez FUSE – a publié deux volumes de “The Graphic Language of Neville Brody” en 1988 et 1994. Vous pouvez toujours en trouver des exemplaires disponibles sur eBay. «L’histoire du visage: le magazine qui a changé la culture» de Paul Gorman est plus facilement disponible, tout comme un recueil des vingt numéros de FUSE. Ils feront tous de fabuleux ajouts à votre bibliothèque de conception graphique.

Les mélanges ajoutent de la profondeur et de la richesse

Pour mon premier design inspiré de Brody, le contenu principal contraste avec une image de fond colorée et chaotique. Je n’ai besoin que de deux éléments structurels pour mettre en œuvre cette conception énergétique; une header qui contient l’emblématique logo Ford, un titre et le slogan d’une publicité Capri des années 70. le main le contenu comprend un profil SVG du Capri qui se trouve au-dessus de mon texte en cours d’exécution:

Gué

Corsaire

Vous pourriez recevoir des sifflets de loups de la voiture à côté

Gauche: Electro. The Face 1984. Droite: Pour ce titre principal, j'ai utilisé FF Blur Pro Medium, une police conçue par Brody en 1992.
Gauche: Electro. The Face 1984. Droite: Pour ce titre principal, j’ai utilisé FF Blur Pro Medium, une police de caractères conçue par Brody en 1992. (Grand aperçu)

L’utilisation d’un SVG en ligne pour cette image graphique signifie une demande de moins à un serveur et offre la possibilité de changer la couleur de peinture de Capri pour correspondre à n’importe quel arrière-plan de couleur. Je commence par ajouter des couleurs d’arrière-plan et de premier plan au body de cette page. La définition de sa hauteur minimale garantit que cet arrière-plan remplira toute la hauteur de la page à chaque taille d’écran:

body {
padding: 0 1rem;
min-height: 100vh;
background-color: #ba0e37;
color: #fff; }

Le logo Ford est peut-être un classique, mais je ne veux pas qu’il domine cette page lorsqu’il est vu sur de petits écrans. Je limite sa largeur maximale à un tiers de n’importe quelle fenêtre. Ce sélecteur cible une image où le «logo» apparaît quelque part dans l’attribut source d’une image:

[src*="logo"] {
max-width: 33vw; }

J’ajoute une double ombre pour assurer que mon gros titre et mon slogan ressortent de la page. Alors que la première ombre utilise des valeurs X et Y positives, la seconde utilise des valeurs négatives. Lorsqu’elles sont combinées, ces ombres se propagent tout autour de mon texte:

h1,
h1 + p {
margin-bottom: 0;
font-weight: 900;
text-shadow:
4px 4px 2px rgba(0,0,0,.35), 
-4px -4px 2px rgba(0,0,0,.35); }

h1 {
font-size: 3.4rem; }

h1 + p {
font-size: 1.802rem; }

Ma conception devrait augmenter la pression artérielle de quelqu’un autant que de conduire une Capri, alors j’ajoute une image de fond remplie d’adrénaline qui couvre toute la page:

body {
background-image: url(body.png);
background-size: cover; }

Cette image peut être monochrome, mais en ajoutant un background-blend-mode propriété d’une valeur de multiply bourre cette page de couleur:

body {
background-blend-mode: multiply; }

Présentation du mode de fusion en arrière-plan

Les modes de fusion ont été initialement proposés par l’équipe d’Adobe Web Platform. Ils permettent aux concepteurs Web le même contrôle sur le mélange des couleurs qui sont une caractéristique des logiciels graphiques comme Adobe Photoshop depuis des années. Ces modes déterminent comment deux éléments ou plus se combinent.

Le module CSS Compositing and Blending comprend trois propriétés; background-blend-mode, mix-blend-mode, et isolation. Pour implémenter cette conception, j’utilise background-blend-mode qui permet de mélanger les couleurs et les images d’arrière-plan d’un élément:

body {
background-color: #ba0e37;
background-image: url(body.png);
background-blend-mode: multiply; }

Il y a quinze background-blend-mode les options; couleur, couleur-brûlure, couleur-esquive, assombrir, différence, exclusion, lumière dure, teinte, éclaircir, luminosité, superposition, saturation, lumière douce et écran.

Les modes de fusion peuvent être utilisés pour mélanger une couleur d’arrière-plan avec une seule image d’arrière-plan, ou lorsqu’un élément a plus qu’une image d’arrière-plan, ils peuvent être appliqués différemment à chacun, ce qui peut ajouter de la profondeur à une conception. Cette background-blend-mode s’applique à toutes les images d’arrière-plan:

body {
background-image: url(body-1.png), url(body-2.png);
background-blend-mode: multiply; }

Alors que, pour mélanger ces deux images différemment, j’applique deux background-blend-mode valeurs, en veillant à les répertorier dans le même ordre que mes images:

body {
background-image: url(body-1.png), url(body-2.png);
background-blend-mode: screen, multiply; }

Les modes de mélange CSS ne font pas que gagner du temps lors des déplacements vers un éditeur d’images, ils sont également un moyen fabuleux d’ajouter de la profondeur et de la texture à un design qui peut être rafraîchissant lorsque la majorité des sites Web sont plats et bidimensionnels.

Presque universellement, les navigateurs contemporains prennent en charge les mêmes outils de composition que nous utilisons dans la conception graphique et les logiciels de retouche photo depuis des années.
Presque universellement, les navigateurs contemporains prennent en charge les mêmes outils de composition que nous utilisons dans la conception graphique et les logiciels de retouche photo depuis des années. (Grand aperçu)

Pour implémenter le reste de ce petit écran. J’ajoute une image de fond d’une silhouette de bougie qui remplit le main élément qui contient mon texte en cours:

main {
background-image: url(main-1.svg);
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100%; }

Ensuite, j’utilise un mélange de remplissage basé sur rem et de largeur de fenêtre pour solidifier ce contenu dans une colonne étroite:

main p {
padding: 8rem 20vw 6rem; }

Un texte qui se justifie à gauche et à droite crée souvent des fleuves disgracieux d’espace blanc entre les mots. Ces lacunes peuvent interrompre l’expérience de lecture. C’est pour cette raison que le texte justifié est rarement utilisé en ligne.

La coupure des mots enveloppe les mots sur plusieurs lignes et divise le dernier mot d’une ligne par un trait d’union. Il existe trois valeurs pour la césure en CSS:

  • aucun: Les mots ne sont pas cassés, donc les mots plus longs couleront sur une nouvelle ligne, laissant parfois un espace peu attrayant à la fin d’une ligne.
  • Manuel: Les mots sont rompus lorsqu’un trait d’union dur ou un trait d’union invisible (­) à l’intérieur d’eux suggère une opportunité.
  • auto: Un navigateur insère des tirets selon ses propres règles et la langue utilisée. Les navigateurs varient dans la façon dont ils appliquent ces règles.

Malheureusement, tous les navigateurs ne prennent pas en charge la césure, donc pour éviter les rivières disgracieuses dans le texte, je ne devrais appliquer hyphens aux navigateurs compatibles. Pour cela, j’utilise une requête de fonctionnalité.

Présentation des requêtes de fonctionnalités

Vous saurez probablement déjà tout sur les requêtes @media et les utiliserez pour ajuster les styles sur différentes tailles d’écran. Alors que les requêtes @media testent si un périphérique est une imprimante ou un écran et teste la hauteur, la largeur ou l’orientation, la règle @supports teste les fonctionnalités des navigateurs.

Une requête de fonctionnalité de base teste à la fois une propriété et une valeur. Par exemple, cette requête teste si un navigateur prend en charge le column-count propriété et une valeur de 2 avant de les appliquer à un main élément:

@supports (column-count: 2) {
main { column-count: 2; }
}

Navigateurs qui ne prennent pas en charge column-count ignorera ce style. Parfois, je dois également styliser un élément lorsque le navigateur ne prend pas en charge une fonctionnalité, je peux appliquer ces styles à l’aide d’un :not opérateur:

@supports not (column-count: 2) {
main { padding: 0 3rem; }
}

Je pourrais également avoir besoin de tester la prise en charge de deux fonctionnalités en même temps à l’aide d’un and opérateur. Les styles s’appliqueront à cela main élément lorsqu’un navigateur prend en charge les deux column-count et hyphens:

@supports (column-count: 2) and (hyphens: auto) {
main p { hyphens: auto; }
}

Sinon, je pourrais tester si un navigateur prend en charge une ou plusieurs fonctionnalités d’une série en utilisant le or opérateur:

@supports (column-count: 2) or (hyphens: auto) {
main p { hyphens: auto; }
}

La fonctionnalité que vous testez n’est pas nécessairement la même que le style que vous souhaitez appliquer. Par exemple, dans cette conception, je veux seulement justifier mon main paragraphes si un navigateur prend en charge la césure:

@supports (hyphens: auto) {

.mk1 main p {
hyphens: auto;
text-align: justify;
text-align-last: left; }
}

Pour les écrans plus grands, je veux main contenu placé à droite, donc j’applique une grille symétrique à deux colonnes avec un 5vw écart entre les colonnes:

@media screen and (min-width : 64em) {

body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5vw; }
}

Comme l’ordre visuel du header et main est le même que le flux de documents, je n’ai pas besoin de placer ces éléments sur ma grille.

Je supprime la limite de la largeur maximale du logo Ford, puis j’applique une deuxième image d’arrière-plan au main. J’utilise deux ensembles différents de background-position valeurs pour compenser cette image de bougie blanche:

[src*="logo"] {
max-width: none; }

main {
min-height: auto;
background-image: url(main-1.svg), url(main-2.svg);
background-size: cover;
background-position: 0 4rem, 5vw 6rem;  }

Enfin, j’ajuste le rembourrage de mon main paragraphes pour tenir compte de la largeur de cette deuxième image d’arrière-plan:

main p {
padding: 18rem 12vw 0; }
Ce premier design inspiré de Brody mélange plusieurs images d'arrière-plan pour créer des variations potentiellement illimitées.
Ce premier design inspiré de Brody mélange plusieurs images d’arrière-plan pour créer des variations potentiellement illimitées. (Grand aperçu)

Thème à l’aide des propriétés personnalisées CSS

Auparavant, seuls les outils de prétraitement tels que LESS et Sass permettaient aux développeurs d’utiliser des variables dans les feuilles de style, mais maintenant les propriétés personnalisées ont apporté des variables nativement à CSS. Les propriétés personnalisées CSS sont une nouvelle fonctionnalité fabuleuse et sont largement prises en charge dans les navigateurs contemporains.

Pour écrire une propriété personnalisée, ajoutez simplement deux tirets au début d’une règle de style:

--color-text-default : #272732;

Les tirets ou les traits de soulignement sont autorisés dans les noms de propriété, mais pas dans les espaces. Les noms de propriété sont également sensibles à la casse, donc –color-text-default et –Color_Text_Default sont deux propriétés distinctes.

Pour utiliser une propriété personnalisée dans une feuille de style, var() indique à un navigateur de récupérer la valeur d’une propriété. Ici, un navigateur récupère la couleur sombre du –color-text-default variable et l’applique à la body élément:

body {
color : var(--color-text-default); }

Les propriétés personnalisées CSS sont des outils fabuleux pour le thème, donc pour changer le body couleur de fond et fill couleur de mon SVG Capri, j’applique une propriété personnalisée partagée:

--theme: #ba0e37; }

body {
background-color: var(--theme); }

svg path {
fill: var(--theme); }

Texte vertical pour l’impact

Cette conception très différente partage en grande partie le même code HTML, mais a une apparence et une sensation complètement différentes. J’utilise un header qui contient un en-tête, un logo Ford et la grande image du disque de frein:

Gué Disque de frein

Ford Capri

À gauche: Nouvel ordre. The Face 1984. Direction artistique de Neville Brody. À droite: plusieurs images d'arrière-plan éclaboussent ma conception
À gauche: Nouvel ordre. The Face 1984. Direction artistique de Neville Brody. À droite: plusieurs images d’arrière-plan éclaboussent ma conception (Grand aperçu)

le main l’élément comprend un titre et une division qui contient mon texte en cours:

Get wolf-whistles from the car next door

Les couleurs d’arrière-plan et de premier plan sont le point de départ pour la mise en œuvre de cette conception:

body {
padding: 1rem;
background-color: #fff;
color: #272732; }

J’ajoute ensuite deux images d’arrière-plan abstraites, en plaçant la première en haut à gauche de mon body élément, le deuxième en bas à droite. Les deux images d’arrière-plan seront contenues dans le body tout en préservant leur rapport hauteur / largeur:

body {
background-image: url(body-1.png), url(body-2.png);
background-position: 0 0, 100% 100%;
background-repeat: no-repeat;
background-size: contain; }
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.
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)

Ma conception comprend une variété de traitements typographiques, notamment des colonnes, des lettrines et du texte vertical. Je commence par surdimensionner le titre principal gris clair et le mettre en majuscule. Utilisant un span L’élément dans ce titre me permet de changer cette partie en bleu:

h1 {
font-size: 3.4rem;
line-height: 1.2;
text-transform: uppercase; 
color: #dedddd; }

h1 span {
color: #2c5f9d; }

J’applique pareil text-transform au titre de deuxième niveau, puis transformez le paragraphe qui le suit immédiatement en premier en ajoutant deux bordures épaisses:

h2 {
font-size: 1.424rem;
line-height: 1.2;
text-transform: uppercase; }

h2 + p {
padding: 1rem 0;
border-top: 10px solid #e9e9e9;
border-bottom: 10px solid #e9e9e9;
font-size: 0.889rem;
font-weight: 600;
text-transform: uppercase; }

Bien que le retrait de paragraphe soit une technique de typographie d’impression courante, l’espacement des paragraphes est plus populaire sur le Web. Parce que je veux donner une touche éditoriale à ce design, je retire les marges des paragraphes de mon main, puis indenter chaque paragraphe suivant de 1em. En utilisant une unité textuelle, cet espace restera proportionnel à la taille de mon texte:

main div > p {
margin: 0;
font-family: 'Vollkorn', serif;
font-style: italic; }

main div > p + p {
text-indent: 1em; }

Les lettrines ajoutent de la personnalité à un design, mais sont également un indicateur évident de l’endroit où quelqu’un devrait commencer à lire. La mise en œuvre de drop caps en ligne impliquait auparavant un mélange de font-size, line-height, et margin styles, mais maintenant nous pouvons utiliser le initial-letter à la place.

La lettre initiale réduit le style à une seule propriété et une valeur qui définit le nombre de hauteurs de ligne que la lettre occupe. La lettre initiale ajuste automatiquement la taille de la police pour couvrir ce nombre de lignes.

Je veux postuler initial-letter à la première lettre du premier paragraphe de mon main élément. Tous les navigateurs ne prennent pas en charge initial-letter, afin d’éviter que les navigateurs non compatibles n’appliquent aucun style lié à ma liste déroulante, j’utilise une requête de fonctionnalité. Étant donné qu’Apple Safari nécessite un préfixe spécifique au fournisseur, cette requête comprend à la fois des propriétés préfixées et non préfixées et un or argument:

@supports (initial-letter: 1) or (-webkit-initial-letter: 1) {

main div > p:first-of-type::first-letter {
margin: 0 .5rem;
font-family: Arial, Helvetica, sans-serif;
-webkit-initial-letter: 2;
initial-letter: 2;
color: #2C5F9D; }
}

Un bogue de longue date de Safari rend une lettre initiale en utilisant des polices système au lieu de polices Web, alors choisissez une police système qui ressemble le plus à votre style de lettrine.

Pour les écrans plus grands, j’applique une grille symétrique à deux colonnes au body et réduire la taille de mes deux images d’arrière-plan à 55%. Étant donné que l’ordre visuel de cette conception correspond à nouveau à l’ordre de mon code HTML, je n’ai pas besoin de placer mon header et main éléments explicitement:

@media screen and (min-width : 64em) {

body {
display: grid;
grid-template-columns: 1fr 1fr;
background-size: 55%; }
}
Gauche: la marge autour de cet en-tête agit comme une limite qui empêche l'œil de se déplacer au-delà. Droite: autoriser cet élément à saigner sur les bords supérieur et gauche signifie qu'il y a plus à voir à l'extérieur de la fenêtre.
Gauche: la marge autour de cette header agit comme une limite qui empêche l’œil de dépasser. Droite: autoriser cet élément à saigner sur les bords supérieur et gauche signifie qu’il y a plus à voir à l’extérieur de la fenêtre. (Grand aperçu)

L’un des aspects les plus évidents de cette conception est le grand titre vertical au centre de la page. Les éléments de texte verticaux sont courants dans les magazines, mais je les vois rarement sur le Web, sauf en chinois, japonais, coréen et autres scripts, qui utilisent des modes d’écriture verticale.

Avant d’implémenter mon titre vertical, je lui fais de la place en appliquant des propriétés de grille à mon header. La deuxième colonne est juste assez large pour prendre mon titre vertical, tandis que la première colonne occupe tout l’espace restant:

header {
display: grid;
grid-template-columns: 1fr 6rem;
padding: 1rem 0 1rem 2rem; }

Pour développer mon titre vertical, je n’ai rien d’autre à faire que de basculer son mode d’écriture par défaut sur vertical (droite – gauche 🙂

h1 {
writing-mode: vertical-lr; }

Mon titre s’inscrit au centre de cette page et le sens de lecture commence en haut. Pour le lire de bas en haut, je peux le faire pivoter de 180 degrés et le justifier correctement, il commence donc en haut de la colonne:

h1 {
text-align: right; 
transform: rotate(180deg); }

Orientation du texte

En utilisant transform:rotate(); et text-align:right; changer le sens de lecture d’un élément ressemble à un hack, et c’est le cas.

Vous n’aurez pas besoin de ce hack pour longtemps, car un nouvel ensemble de valeurs de mode d’écriture arrive.

Le contenu circule verticalement de haut en bas et le texte est écrit latéralement, vers la droite.
sideways-rl. Le contenu circule verticalement de haut en bas et le texte est écrit latéralement, vers la droite. (Grand aperçu)
Le contenu circule verticalement de haut en bas et le texte est écrit latéralement, vers la gauche.
sideways-lr. Le contenu circule verticalement de haut en bas et le texte est écrit latéralement, vers la gauche. (Grand aperçu)

Pour améliorer la lecture de ce bloc de texte par quelqu’un, j’introduis des colonnes en utilisant column-count propriété. Cette conception divise mon contenu en deux colonnes, avec une gouttière et une règle solide entre elles:

main div {
column-count: 2;
column-gap: 4rem;
column-rule: 1px solid #e9e9e9; }

Les navigateurs ajustent les largeurs de ces deux colonnes pour remplir l’espace disponible. Lorsque je veux spécifier la largeur de colonne au lieu du nombre de colonnes, j’utilise le column-width propriété avec une valeur unitaire basée sur du texte, y compris ch, em, ex, rem, vw, vmax, et vmin.

Il y a une touche finale que je veux ajouter au titre vertical dans cette conception; le mélanger avec le body derrière. Aux côtés de background-blend-mode, le module Compositing and Blending comprend mix-blend-mode qui mélange des éléments entre eux. Vous pouvez utiliser les mêmes quinze modes de fusion avec l’une ou l’autre propriété. Utilisant un multiply valeur sur mon titre vertical permet l’image de fond abstrait sur mon body élément à saigner à travers ce titre:

h1 {
mix-blend-mode: multiply; }
Je ne préconise pas un retour aux pires excès du skeuomorphisme, mais j'espère que les concepteurs réalisent la valeur d'une approche plus dynamique.
Je ne préconise pas un retour aux pires excès du skeuomorphisme, mais j’espère que les concepteurs réalisent la valeur d’une approche plus dynamique. (Grand aperçu)

Au-delà des chemins de détourage primitifs

Vous ne serez probablement pas surpris d’apprendre que ce design utilise le même header et main éléments comme mes exemples précédents. Cette fois, les deux contiennent un figure:

The car you always promised yourself

À gauche: dans l'ombre. The Face 1982. Direction artistique de Neville Brody. À droite: la prise en charge des chemins de détourage est désormais largement répandue.
À gauche: dans l’ombre. The Face 1982. Direction artistique de Neville Brody. À droite: la prise en charge des chemins de détourage est désormais largement répandue. (Grand aperçu)

Chaque figure contient quatre photos de mes Capris colorés:

J’organise ces images dans une grille 2×2, puis j’ajoute une couleur d’arrière-plan et une image d’arrière-plan abstraite, en les mélangeant avec un background-blend-mode:

figure {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
background-color: #2c5f9d;
background-image: url(figure.png);
background-size: cover;
background-blend-mode: multiply; }

Une bonne typographie est aussi importante pour la personnalité que pour la lisibilité. Les créations de Brody se distinguent en partie à cause des polices de caractères originales qu’il a créées pour The Face et d’autres magazines. J’ai défini mon titre en utilisant TokyoTwo – un fac-similé d’une police Brody – pour apporter un peu de son style à ma conception.

h1 {
font-family: 'TokyoTwoSolid';
font-size: 7vmax;
text-transform: uppercase; }

Je souligne des mots spécifiques en ajoutant span éléments autour d’eux:

h1 span {
color: #2C5F9D; }

Dans les journaux et les magazines, en ligne et sur papier, un premier point est les «premières» quelques lignes d’un article et doit être conçu pour «se démarquer». Vous pouvez également voir les premiers paragraphes appelés «decks», «kickers» car ils poussent les lecteurs dans le contenu, «riders», «summaries» car ils résument souvent le contenu d’un article, ou & mdahs; mon préféré – «la vente» parce que l’un de ses emplois consiste à vendre du contenu à un lecteur.

Alors qu’un premier paragraphe est souvent «plus grand, plus audacieux» ou «en majuscules», ce n’est pas nécessairement à quoi il ressemble toujours. Il n’y a pas de livre de règles pour dicter sa taille ou son style, ni même sa position. C’est quelque chose d’important à garder à l’esprit lorsque vous concevez des dispositions pour de nombreux appareils ou tailles d’écran différents. La conception d’un standfirst devrait l’aider à faire son travail et devrait être conçue pour attirer l’attention de quelqu’un, encourager les gens à lire, donner aux gens une idée de ce que contient un article et améliorer la compréhension et le partage.

Pour ajouter des lignes en zigzag et transformer ce paragraphe par défaut en premier, j’ajoute :before et :after pseudo-éléments, chacun contenant une image SVG qui reste nette quelle que soit la taille de l’appareil ou de l’écran d’une personne:

main figure + p:before {
content: url(line-1.svg);
display: block;
margin-bottom: .75rem; }

main figure + p:after {
content: url(line-2.svg);
display: block;
margin-top: .75rem; }
Un standfirst relie les lecteurs à votre contenu et peut aider les gens à comprendre ce qui va suivre.
Un standfirst relie les lecteurs à votre contenu et peut aider les gens à comprendre ce qui va suivre. (Grand aperçu)

Je vous ai présenté le clip-path propriété aux côtés d’Alexey Brodovitch. Il vous permet de couper un élément de sorte que seule une partie de celui-ci reste visible. Ces chemins peuvent être de n’importe quelle forme, des cercles et éclipses de base aux formes polygonales complexes avec n’importe quel nombre de coordonnées.

Ma conception utilise des zigzags autour de son standfirst et sur les côtés de mes figures colorées. Mais, ces formes ne font partie d’aucune image attachée à une figure, elles sont le résultat de la coupure de ces figures avec un chemin de polygone:

figure {
-webkit-clip-path: polygon(0% 10%, 5% 20%, 0% 30%,…);
clip-path: polygon(0% 10%, 5% 20%, 0% 30%,…); }

Il ne reste plus qu’à ajouter des images d’arrière-plan au body, en ajustant leur position et leur taille, et en appliquant une grille symétrique à deux colonnes pour les écrans plus grands:

body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem; }

body {
background-image: url(body-small.svg);
background-position: 50% 0;
background-repeat: no-repeat;
background-size: cover; }

@media screen and (min-width : 64em) {

body {
background-image: url(body-large.svg);
background-position: 0 12rem;
background-size: contain; }
}
Les chemins de détourage sont un moyen fabuleux d'implémenter des formes irrégulières qui attirent l'attention de quelqu'un et le dessinent dans un design.
Les chemins de détourage sont un moyen fabuleux d’implémenter des formes irrégulières qui attirent l’attention de quelqu’un et le dessinent dans un design. (Grand aperçu)

Grilles réactives et rotation

Pour mettre en œuvre ma conception finale inspirée de Brody, mon objectif est d’utiliser l’ensemble d’éléments structurels le plus minimal:

Gué

Obtenez un Capri… si vous êtes rapide

Ford Capri

Gauche: Ital Style. The Face 1985. Direction artistique par Neville Brody. Droite: La combinaison de la grille et des transformations permet des conceptions élaborées.
Gauche: Ital Style. The Face 1985. Direction artistique par Neville Brody. Droite: La combinaison de la grille et des transformations permet des conceptions élaborées. (Grand aperçu)

Alors que mes conceptions précédentes introduisaient des propriétés de grille à des tailles d’écran plus grandes, cette conception finale les utilise depuis le début. Dans cette grille à trois colonnes, les deux largeurs de colonne externes sont basées sur du texte, tandis que la colonne centrale occupe tout l’espace restant:

body {
display: grid;
grid-template-columns: 3rem 1fr 3rem;
background-color: #f0f0f1; }
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.
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)

Je commence par placer le logo Ford dans cette colonne centrale et sur la première rangée:

[src*="logo"] {
grid-column: 2;
grid-row: 1;
justify-self: center; }

le header avec son image Capri s’étend sur chaque colonne et occupe toute la largeur de la page. Je le place au deuxième rang, sous mon logo:

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

Une division sert de toile de fond abstraite à mon header. Il s’intègre parfaitement dans la deuxième colonne et s’étend sur les deux premières lignes:

body > div {
grid-column: 2;
grid-row: 1 / 3;
z-index: 1; 
background-color: #2c5f9d;
background-blend-mode: multiply;
background-image: url(div.png);
background-size: cover; }

En ajoutant un faible z-index la valeur de cette division la pousse en arrière-plan, et pour que mon logo et mon en-tête ressortent au premier plan, je leur donne une valeur plus élevée:

[src*="logo"],
header {
z-index: 2; }

Cela en couches header ajoute de la profondeur aux petits écrans, mais lorsque plus d’espace est disponible, cette conception prend vie. La grille à deux colonnes est simple, mais le modèle de ligne est plus complexe et comprend un mélange d’unités textuelles, flexibles et intrinsèques:

@media screen and (min-width : 48em) {

body {
grid-template-columns: 1fr 1fr;
grid-template-rows: 16rem 8fr 16rem auto auto auto; 
grid-column-gap: 5vw; }
}

Je place le header dans la troisième rangée et lui permettre de couvrir toute la largeur de ma grille. Ensuite, je place les éléments restants à leur place en utilisant des numéros de ligne de grille:

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

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

main {
grid-column: 1;
grid-row: 4 / 6; }

aside {
grid-column: 1;
grid-row: 6 / 7; }

body > div {
grid-column: 2;
grid-row: 1 / 4;
border-top: 10px solid #e9e9e9; }
Trois combinaisons différentes de colonnes et de rangées forment des grilles distinctes pour les petits, moyens et grands écrans.
Trois combinaisons différentes de colonnes et de rangées forment des grilles distinctes pour les petits, moyens et grands écrans. (Grand aperçu)

Je n’ai pas besoin de styliser ça figure, seul son img et figcaption. En postulant display: contents;, Je peux placer ces éléments enfants sur ma grille:

figure {
display: contents; }

figure img {
grid-column: 2;
grid-row: 5 / 7; }

figure figcaption {
grid-column: 2;
grid-row: 4 / 5; }

Maintenant, je peux faire pivoter mon header l’image et le déplacer vers le haut afin qu’il chevauche d’autres éléments de ma conception.

header {
z-index: 2;
transform: rotate(-20deg) translateY(-6rem); }

J’ai toujours pensé que le responsive design n’était pas un défi, mais une chance d’être créatif. Chaque point d’arrêt offre la possibilité de créer des conceptions qui tirent le meilleur parti de chaque taille d’écran.

Pour les grands écrans, je remplace les propriétés de grille précédentes par une disposition à cinq colonnes où quatre des colonnes sont flexibles et l’autre est basée sur du texte. Je utilise le repeat pour créer six lignes qui ont toutes une hauteur intrinsèque. Alors que la valeur par défaut align-items La valeur est stretch, J’aligne mes éléments de grille sur le start:

@media screen and (min-width : 64em) {

body {
grid-template-columns: 1fr 1fr 1fr 6rem 1fr;
grid-template-rows: repeat(6, auto); 
gap: 1rem;
align-items: start; }
}
Cette conception finale inspirée de Brody montre comment la combinaison de la grille et des transformations permet des conceptions élaborées à travers les tailles d'écran.
Cette conception finale inspirée de Brody montre comment la combinaison de la grille et des transformations permet des conceptions élaborées à travers les tailles d’écran. (Grand aperçu)

I reposition each element onto this new grid using line numbers which separate my content across each column.

[src*="logo"] {
grid-column: 1;
grid-row: 1; }

h1 {
grid-column: 2;
grid-row: 2; }

main {
grid-column: 1 / 2;
grid-row: 2 / 5; }

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

figure img {
grid-column: 3;
grid-row: 1; }

figure figcaption {
grid-column: 3;
grid-row: 4; }

aside {
grid-column: 5 / -1;
grid-row: 3 / 5; }

body > div {
grid-column: 3;
grid-row: 2 / 4;
align-self: stretch; }

Using line numbers enables some elements to occupy the same columns and rows, so they overlap. The higher z-index value I gave to the header earlier, brings the large picture of my Capri into the foreground, where I can adjust its rotation and vertical offset:

header {
transform: rotate(-20deg) translateY(3rem); }

A subtle transition and a series of transform values, add up to a little surprise when someone hovers over the profile of this classic Ford:

header {
transition: transform .25s ease; }

header:hover {
transform: rotate(-21deg) scale(1.025) translateY(3rem); }

Bonus: Introducing CSS masks

In my first Capri design, I added a spark plug silhouette as a background image to my content, but changing its colour would involve exporting a new asset.

Depending on the mask image, there are two types of masks in CSS:

  • luminance
    White areas are transparent, black ones are opaque, and everything in between is semi-transparent.
  • alpha
    The default, alpha-channels.
Left: Mask image. Center: Main content area with a mask applied. Right: The headline and standfirst masked with a CSS gradient.
Left: Mask image. Center: Main content area with a mask applied. Right: The headline and standfirst masked with a CSS gradient. (Large preview)

Masking is a fabulous time-saver which involves a single mask-image with an alpha-channel. Whereas with clip-path, parts of an element or either invisible or visible, using mask-image means parts of an element can be rendered with several levels of opacity.

Elements in parts of a mask which are 100% black will be fully visible. In sections where the mask is 100% transparent, contents will be completely hidden. Any percentage in-between will partially mask an element.

Left: My headline unmasked. Right: The headline masked with a PNG image.
Left: My headline unmasked. Right: The headline masked with a PNG image. (Large preview)

When a mask is applied, only the areas inside it are visible, which allows me to change an element’s background colour or image whenever I need to.

Applying a mask-image is as simple as specifying a mask URL. CSS masks use similar properties and values to background images, so first I specify a mask‘s position, then repeat properties, and its size. mask-position uses X and Y values which are the same as background-position.

As well as common values like repeat, repeat-x, repeat-y, et no-repeat, are mask-repeat also accepts the lesser known tiling values, space et round.

mask-size options include one or two number values, plus contain et cover. I put these properties together to apply a spark plug silhouette mask to my main content:

main {
mask-image: url(mask.png);
mask-position: 0 4rem;
mask-repeat: no-repeat;
mask-size: cover; }

It’s also possible to define which area of a box is affected by a mask by using the mask-clip et mask-origin properties in similar ways to how background-origin et background-position affect background images. You might choose to clip a mask to either the border-box, content-box, or padding-box, plus several other options.

I’m also excited by the possibilities from mask-border, an experimental property which will combine the flexibility of border images with masks.

Masks can add depth to text too. To make my header content shine, I could use a bitmap or a SVG gradient image. But remember, CSS generated linear and radial gradients are also background images, so can be mask images too. They add style with almost no impact on performance:

main {
mask-image: linear-gradient(
transparent, 
rgb(0,0,0) 50%, 
transparent 100%); }

I want a circular radial-gradient to fade the edges of my header content:

main {
mask-image: radial-gradient(
circle at 50% 50%, 
rgba(0,0,0,1), 
rgba(0,0,0,.15) 80%); }

By fine-tuning my alpha channel values and colour stop points, I can create the perfect look to fit my design.

NB: Smashing members have access to a beautifully designed PDF of Andy’s Inspired Design Decisions magazine and full code examples from this article.

Smashing Editorial
(ra, yk, il)
Close Menu