Bien que je suis 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 était devenue membre 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 donné 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 laissez-passer dans les coulisses 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 à la tourmente politique et sociale en Grande-Bretagne à l'é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 expliquer comment.

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

1. Décisions de conception inspirées: Avaunt Magazine
2. Conception inspirée Decisions: Pressing Matters
3. Inspired Design Decisions: Ernest Journal
4. Inspired Design Decisions: Alexey Brodovitch
5. Inspired Design Decisions: Bea Feitler

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 les années 1970 en Grande-Bretagne Thatcherite. Le punk a rejeté tout ce qu'il considérait comme indulgent et son approche du 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 souligné 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 de la conception et en particulier son utilisation de la typographie maison étaient parfaitement adaptés à la affiches de groupe qu'il a 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

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é des 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 voyait 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. divertissant. 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 en typographie traditionnelle de Brody, 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 de plusieurs pages de la lecture d'un magazine et la façon dont les gens utilisent le Web.

Dans The Face, le fait de saigner des images et de 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 disposition dans The Face utilise seulement deux ou trois colonnes, mais l'exécution de Brody montre à quel point même les grilles les plus simples peuvent être flexibles être combiné 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 un design, pas définir, ni dicter le résultat final.

Sur le Web, on nous dit de ne pas faire regarder quelqu'un plus d'une fois, de ne pas le 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 parce que les gens passent plus de temps à les considérer.

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 phrase-book graphique, mais son succès, j'espère, est également 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 de la conception, 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 en explorant les idées de la presse écrite et d'autres médias et en les appliquant au Web sans remettre en question 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 la School of 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 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 apporteront tous de fabuleux ajouts à votre bibliothèque de graphisme.

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 d'arrière-plan colorée et chaotique. Je n'ai besoin que de deux éléments structurels pour mettre en œuvre cette conception énergétique; un en-tête qui contient l'emblématique logo Ford, un titre et le slogan d'une publicité Capri des années 70. Le contenu principal comprend un profil SVG du Capri qui se trouve au-dessus de mon texte en cours d'exécution:

 Capri 
 Vous pourriez obtenir des sifflements de loups de la voiture d'à côté 

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 du 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 corps 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 {
rembourrage: 0 1rem;
min-hauteur: 100vh;
couleur de fond: # ba0e37;
couleur: #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ù "logo" apparaît quelque part dans l'attribut source d'une image:

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

J'ajoute une double ombre pour m'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 {
marge en bas: 0;
poids de police: 900;
ombre de texte:
4px 4px 2px rgba (0,0,0, .35),
-4px -4px 2px rgba (0,0,0, 0,35); }

h1 {
taille de police: 3.4rem; }

h1 + p {
taille de police: 1,802rem; } 

Ma conception devrait augmenter la pression artérielle de quelqu'un autant que de conduire une Capri, alors j'ajoute une image d'arrière-plan remplie d'adrénaline qui couvre toute la page:

 body {
image d'arrière-plan: url (body.png);
taille du fond: couverture; } 

Cette image peut être monochrome, mais l'ajout d'une propriété background-blend-mode avec une valeur de multiply bourre cette page de couleur:

 body {
fond-mélange-mode: multiplier; } 

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 isolement . 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 {
couleur de fond: # ba0e37;
image d'arrière-plan: url (body.png);
fond-mélange-mode: multiplier; } 

Il existe quinze options de mode de mélange en arrière-plan ; couleur, gravure de couleur, atténuation de la couleur, assombrissement, différence, exclusion, lumière dure, teinte, éclaircissement, 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. Ce mode de mélange d'arrière-plan s'applique à toutes les images d'arrière-plan:

 body {
image de fond: url (body-1.png), url (body-2.png);
fond-mélange-mode: multiplier; } 

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

 body {
image de fond: url (body-1.png), url (body-2.png);
fond-mélange-mode: écran, multiplier; } 

Les modes de fusion 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.

Pour implémenter le reste de ce petit écran. J'ajoute une image d'arrière-plan d'une silhouette de bougie d'allumage qui remplit l'élément principal qui contient mon texte courant:

 main {
image d'arrière-plan: url (main-1.svg);
position de fond: 0 0;
background-repeat: pas de répétition;
taille de l'arrière-plan: 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 {
rembourrage: 8rem 20vw 6rem; } 

Un texte qui se justifie à la fois sur les bords gauche et droit crée souvent des fleuves disgracieux d'espaces blancs 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 césure encapsule les mots sur plusieurs lignes et divise le dernier mot d'une ligne par un trait d'union. Il y a trois valeurs pour la césure dans CSS:

• aucune : 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 cassés 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é.

Malheureusement, tous les navigateurs ne prennent pas en charge la césure, donc pour éviter les fleuves inesthétiques dans le texte, je ne devrais appliquer la propriété hyphens qu'aux navigateurs compatibles. Pour cela, j'utilise une requête de fonctionnalité.

Présentation des requêtes de fonctionnalité

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 la propriété nombre de colonnes et une valeur de 2 avant de les appliquer à un élément principal :

 @ supports (nombre de colonnes: 2) {
main {nombre de colonnes: 2; }
} 

Les navigateurs qui ne prennent pas en charge nombre de colonnes ignoreront ce style. Parfois, il se peut que je doive également styliser un élément lorsque le navigateur ne prend pas en charge une fonctionnalité, peut appliquer ces styles à l'aide d'un opérateur : not :

 @supports not (nombre de colonnes: 2) {
main {padding: 0 3rem; }
} 

Il se peut que je doive également tester la prise en charge de deux fonctionnalités en même temps à l'aide d'un opérateur et . Les styles s'appliquent à cet élément principal lorsqu'un navigateur prend en charge à la fois le nombre de colonnes et tirets :

 @supports (nombre de colonnes: 2) et ( tirets: auto) {
p principal {tirets: auto; }
} 

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

 @supports (nombre de colonnes: 2) ou (tirets: auto) {
p principal {tirets: 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 souhaite uniquement justifier mes paragraphes principaux si un navigateur prend en charge la césure:

 @supports (tirets: auto) {

.mk1 main p {
tirets: auto;
alignement du texte: justifier;
text-align-last: gauche; }
} 

Pour les écrans plus grands, je veux que le contenu principal soit placé à droite, donc j'applique une grille symétrique à deux colonnes avec un espace 5vw entre les colonnes:

 @ écran média et (min-largeur: 64em) {

corps {
affichage: grille;
grille-modèle-colonnes: 1fr 1fr;
écart: 5vw; }
} 

Comme l'ordre visuel des en-têtes et principal est le même que le flux de documents, je n'ai pas besoin de placer ces éléments sur ma grille.

I supprimez la limite de la largeur maximale du logo Ford, puis appliquez une deuxième image d'arrière-plan à la principale . J'utilise deux ensembles différents de valeurs de position d'arrière-plan pour compenser cette image de bougie blanche:

 [src*="logo"] {
largeur max: aucune; }

principale {
min-hauteur: auto;
image d'arrière-plan: url (main-1.svg), url (main-2.svg);
taille du fond: couverture;
position de fond: 0 4rem, 5vw 6rem; } 

Enfin, j'ajuste le remplissage de mes paragraphes principaux pour tenir compte de la largeur de cette deuxième image d'arrière-plan:

 main p {
rembourrage: 18rem 12vw 0; } 

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

Auparavant, seuls les outils de prétraitement comme 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 au 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 traits d'union 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 de la variable –color-text-default et l'applique à l'élément body body:

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

Les propriétés personnalisées CSS sont de fabuleux outils de création de thèmes. Pour modifier la couleur d'arrière-plan et la couleur de remplissage de mon SVG Capri, j'applique une propriété personnalisée partagée: [19659048] – thème: # ba0e37; }

corps {
couleur de fond: var (- theme); }

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

Texte vertical pour l'impact

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

 Ford Capri <spanvMK1 

L'élément principal comprend un titre et une division qui contient mon texte courant:

 Obtenez des sifflets de loups  dans la voiture voisine [19659120]… 


… 
… 
… 

 

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 {
rembourrage: 1rem;
couleur de fond: #fff;
couleur: # 272732; } 

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

 corps {
image de fond: url (body-1.png), url (body-2.png);
position de fond: 0 0, 100% 100%;
background-repeat: pas de répétition;
taille de l'arrière-plan: contenir; } 

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. L'utilisation d'un élément span dans ce titre me permet de changer cette partie en bleu:

 h1 {
taille de police: 3.4rem;
hauteur de ligne: 1,2;
transformation de texte: majuscule;
couleur: #dedddd; }

h1 span {
couleur: # 2c5f9d; } 

J'applique la même text-transform au titre de deuxième niveau, puis je transforme le paragraphe qui le suit immédiatement en premier en ajoutant deux bordures épaisses:

 h2 {
taille de police: 1.424rem;
hauteur de ligne: 1,2;
transformation de texte: majuscule; }

h2 + p {
rembourrage: 1rem 0;
border-top: 10px solid # e9e9e9;
bord inférieur: 10px solide # e9e9e9;
taille de police: 0.889rem;
poids de police: 600;
transformation de texte: majuscule; } 

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 à cette conception une impression éditoriale, je supprime les marges des paragraphes de mon principal puis je retire chaque paragraphe suivant de 1em . En utilisant une unité textuelle, cet espace restera proportionnel à la taille de mon texte:

 main div> p {
marge: 0;
famille de polices: 'Vollkorn', serif;
style de police: italique; }

div principal> p + p {
retrait de texte: 1em; } 

Les lettrines ajoutent de la personnalité à un design, mais sont également un indicateur évident de l'endroit où quelqu'un devrait commencer à lire. L'implémentation de lettrines en ligne impliquait auparavant un mélange de styles de taille de police hauteur de ligne et styles de marge mais maintenant nous pouvons utiliser le initial- lettre à 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 appliquer la lettre initiale à la première lettre du premier paragraphe de mon élément principal . Tous les navigateurs ne prennent pas en charge initial-letter donc pour éviter que les navigateurs non pris en charge n'appliquent aucun style relatif à ma casquette, 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 argument ou :

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

div principal> p: premier type :: première lettre {
marge: 0 .5rem;
famille de polices: Arial, Helvetica, sans-serif;
-webkit-initial-letter: 2;
lettre initiale: 2;
couleur: # 2C5F9D; }
} 

Un bogue de Safari de longue date 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 deux symétriques -grille de colonne au corps et réduisez 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 explicitement mes en-têtes et principaux explicitement:

 écran @media et (min -largeur: 64em) {

corps {
affichage: grille;
grille-modèle-colonnes: 1fr 1fr;
taille de l'arrière-plan: 55%; }
} 

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 les modes d'écriture verticale.

Avant d'implémenter mon titre vertical, je lui fais de la place en appliquer les propriétés de la grille à mon en-tête . 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 {
affichage: grille;
grille-modèle-colonnes: 1fr 6rem;
rembourrage: 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 {
mode d'écriture: 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 {
alignement du texte: à droite;
transformer: tourner (180deg); } 

Orientation du texte

Utilisation de transform: rotation (); et alignement du texte: à droite; pour 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.

Pour améliorer la lecture de ce bloc de texte en cours, j'introduis des colonnes à l'aide de la propriété nombre de colonnes . Cette conception divise mon contenu en deux colonnes, avec une gouttière et une règle solide entre elles:

 main div {
nombre de colonnes: 2;
écart de colonne: 4rem;
règle de colonne: 1px solide # 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 la propriété largeur de colonne 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 Je veux ajouter au titre vertical dans cette conception; le mélanger avec le corps derrière. Parallèlement à fond-mélange-mode le module Compositing et Blending inclut mélange-mélange-mode qui mélange les éléments entre eux. Vous pouvez utiliser les mêmes quinze modes de fusion avec l'une ou l'autre propriété. L'utilisation d'une valeur de multiplier sur mon titre vertical permet à l'image d'arrière-plan abstraite de mon élément body de saigner à travers ce titre:

 h1 {
mix-blend-mode: multiplier; }

Beyond Primitive Clipping Paths

You probably won’t be surprised to learn that this design uses the same header and main elements as my previous examples. This time, both contain a figure:

…
The car you always promised yourself



…
…

…

Each figure contains four pictures of my colourful Capris:

I arrange these pictures in a 2×2 grid, then I add a background colour and abstract background image, blending them together with a 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; }

Good typography is as important for personality, as it is for readability. Brody’s designs are distinctive partly because of the original typefaces he created for The Face and other magazines. I set my headline using TokyoTwo — a facsimile of one Brody typeface — to bring a little of his style to my design.

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

I highlight specific words by adding span elements around them:

h1 span {
color: #2C5F9D; }

In newspapers and magazines, online and in print, a standfirst is the ‘first’ few lines of an article and should be designed to ‘stand’ out. You might also see standfirst paragraphs referred to as “decks,” “kickers” because they kick readers into the content, “riders,” “summaries” as they often summarise the content of an article, or &mdahs; my personal favourite — “the sell” because one of its jobs is selling content to a reader.

While a standfirst paragraph is often “larger, bolder,” or “in capitals,” that’s not necessarily how it always looks. There’s no rule book to dictate its size or style, or even its position. That’s something important to bear in mind when you’re designing layouts for many different devices or screen sizes. The design of a standfirst should help it do its job and should be designed to catch someone’s eye, encourage people to read on, give people an idea of what an article contains, and improve understanding and share-ability.

To add zig-zag lines and transform this default paragraph into a standfirst, I add :before and :after pseudo-elements, each containing an SVG image which stays crisp no matter how large someone’s device or screen:

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

I introduced you to the clip-path property alongside Alexey Brodovitch. It enables you to clip an element so that only part of it remains visible. These paths can be any shape, from basic circles and eclipses to complex polygon shapes with any number of coordinates.

My design uses zig-zags around its standfirst and at the sides of my colour-filled figures. But, those shapes aren’t part of any image attached to a figure, they’re the result of clipping these figures with a polygon path:

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

All that remains is to add background images to the bodyadjusting their position and size, plus apply a two-column symmetrical grid for larger screens:

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

Responsive grids and rotation

To implement my final Brody-inspired design, my aim is to use the most minimal set of structural elements:

Get a Capri… if you’re quick









…
…


…

Whereas my earlier designs introduced grid properties at larger screen sizes, this final design uses them from the beginning. In this three-column grid, the two outer column widths are text-based, while the centre column occupies all remaining space:

body {
display: grid;
grid-template-columns: 3rem 1fr 3rem;
background-color: #f0f0f1; }

I start by placing the Ford logo into that centre column and on the first row:

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

The header with its Capri image spans every column, and occupies the full page width. I place it in the second row, under my logo:

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

A division acts as an abstract back-drop to my header. It fits neatly into the second column, and spans the first two rows:

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

By adding a low z-index value to this division pushes it into the background, and to ensure my logo and header spring into the foreground, I give them a higher value:

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

That layered header adds depth to small screens, but when more space is available, this design comes to life. The two-column grid is simple, but the row pattern is more intricate and includes a mixture of text-based, flexible length, and intrinsic units:

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

I place the header into the third row and allow it to span the full width of my grid. Then, I slot the remaining elements into their places using grid line numbers:

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

I don’t need to style this figureonly its img and figcaption. By applying display: contents;I’m able to place those child elements onto my grid:

figure {
display: contents; }

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

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

Now I can rotate my header image and move it up so that it overlaps other elements in my design.

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

I’ve always thought of responsive design not as a challenge, but as a chance to be creative. Each breakpoint provides an opportunity to make designs which make the most from every screen size.

For large screens, I replace the previous grid properties with a five column layout where four of the columns are flexible and the other is text-based. I use the repeat value to create six rows which all have intrinsic height. Whereas the default align-items value is stretchI align my grid items to the 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; }
}

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.

Masking is a fabulous time-saver which involves a single mask-image with an alpha-channel. Whereas with clip-pathparts 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.

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 repeatrepeat-xrepeat-yand no-repeatare mask-repeat also accepts the lesser known tiling values, space and round.

mask-size options include one or two number values, plus contain and 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 and mask-origin properties in similar ways to how background-origin and background-position affect background images. You might choose to clip a mask to either the border-boxcontent-boxor padding-boxplus several other options.

I’m also excited by the possibilities from mask-borderan 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.

(ra, yk, il)