Avant d'écrire Direction artistique pour le Web j'ai commencé à étudier Alexey Brodovitch ] quand je suis devenu fasciné par le design éditorial et magazine. J'étais attiré par sa précision, en particulier par la manière dont Brodovitch a réuni les photographies et le texte.

Puis, son processus de conception, sa manière de dessiner, d'agencer, de disposer des planches et de créer un rythme qui m'a fasciné. les magazines. Plus tard, j’ai apprécié son rejet rebelle de tout ce qu’il considérait comme médiocre. J'aime toujours le conseil qu'il a donné à ses étudiants de regarder au-delà de son support et de s'inspirer d'autres formes d'art, d'architecture et de design.

J'aime penser que je partage un peu la rébellion de Brodovitch, car je souhaite développer le Web en réseau. un moyen de création plutôt que comme une simple plateforme de produits. Une approche novatrice de la conception de sites Web est importante car elle crée des expériences plus attrayantes et des conceptions visuelles attrayantes. Ces éléments peuvent aider nos produits numériques et nos sites Web à attirer l’audience et à mieux communiquer. Sur le plan pratique, une meilleure communication enseigne comment utiliser un produit. Cela les aide également à comprendre pourquoi ils devraient choisir ce produit. Cette approche facilite la communication entre les rédactions, le marketing et les actualités et est cruciale pour développer une affinité entre une marque et son public.

Il existe actuellement peu de livres sur le travail d'Alexey Brodovitch, le plus définitif étant celui de Kerry William Purcell, 2011 « Alexey Brodovitch . ”

Cette monographie contient des collections de toute la vie de Brodovitch. Ses créations les plus intéressantes pour le magazine Harper's Bazaar sont certaines de celles que je vais explorer dans ce numéro. Ce livre sera un ajout fabuleux à votre collection de designs .

1. Décisions de design inspirées: Avaunt Magazine
2. Décisions de design inspirées: Pressing Matters
3. Décisions de design inspirées: Ernest Journal
4. Inspired Design Décisions: Alexey Brodovitch

Inspiré d'Alexey Brodovitch

Alexey Brodovitch est né en Russie en 1898. Jeune homme, Brodovitch a combattu dans l'armée blanche contre les bolcheviks pendant la guerre civile russe, qui n'était pas un début dans la vie. Je m'attendais à ce que quelqu'un devienne l'un des directeurs artistiques les plus influents du XXe siècle

Forcé de s'exiler, Brodovitch s'installe à Paris où, tout en travaillant comme peintre de scène, il rencontre des artistes tels que Marc Chagall et a été exposé à des mouvements tels que le Bauhaus, le constructivisme, le dadaïsme et le futurisme

Constructivisme

Alors que l'art autonome était conduit par le subconscient et les peintres comme Wassily Kandinsky et Joan Miro supprimaient le contrôle conscient de le processus de peinture, le mouvement constructiviste cherchait à construire consciemment et délibérément de l'art.

Il s'agissait de placer délibérément des lignes et des formes à l'aide de la géométrie. Les résultats ont été souvent frappants, ce qui a conduit à l’utilisation du constructivisme dans l’art politique et la propagande. Le constructivisme a influencé les artistes et les concepteurs tout au long du XXe siècle, notamment Neville Brody auteur de The Face Magazine que je couvrirai plus tard dans cette série.

Alexander Rodchenko

ans, son aîné, Alexander Rodchenko exerça une influence notable sur Brodovitch et sur des générations d’artistes, de graphistes et de photographes. Rodchenko était l'un des fondateurs du mouvement constructiviste.

Afin d'éduquer l'homme à une nouvelle nostalgie, des objets familiers quotidiens doit lui être montré avec des perspectives totalement inattendues et dans des situations inattendues.

– Alexander Rodchenko

Le photomontage – technique consistant à couper et réarranger de multiples images en une nouvelle œuvre – était populaire dans le constructivisme. Cette approche de la composition a inspiré Brodovitch tout au long de sa vie, où il est devenu célèbre pour la façon dont il a délibérément et précisément rapproché photographie et typographie. et le magazine de design influent Arts et Métiers Graphiques, il a perfectionné ses techniques en créant de superbes designs de magazines et d’affiches. Après avoir battu Pablo Picasso à la deuxième place d'un concours d'affiches, Brodovitch a créé son propre studio de design et est devenu l'un des artistes commerciaux les plus respectés de la trentaine à Paris.

Désenchantée par la scène artistique parisienne, Brodovitch déménage en 1930. aux États-Unis où il a enseigné le design publicitaire à l’actuelle université des arts de Philadelphie. Son objectif était de développer la publicité américaine au niveau du design en Europe. Il a exposé ses étudiants à des magazines français et allemands et leur a appris à réexaminer leurs techniques. Dans l'esprit de Bauhaus School Brodovitch a amené ses élèves en dehors de la salle de classe pour trouver l'inspiration ailleurs, les incitant à trouver leur propre style de création.

Brodovitch était «intolérant de la médiocrité» et demandait fréquemment à ses élèves Pour m'étonner. Les cours de Brodovitch étaient axés à la fois sur le design et la photographie. Aussi, influençant toute une génération de directeurs artistiques et de graphistes, il a enseigné à des photographes tels que Diane Arbus et Richard Avedon. Il travaillera avec eux plus tard au magazine Harper’s Bazaar.

Le Art Directors Club de New York demande à Brodovitch de concevoir leur exposition annuelle de directeurs d’art de 1934. Là, Carmel Snow – qui était alors rédacteur en chef de l’édition américaine du magazine Harper’s Bazaar – voyait pour la première fois le travail de Brodovitch. Elle a déclaré:

J'ai découvert une nouvelle technique de mise en page qui m'a frappé comme une révélation: des pages qui «saignaient» de magnifiques photographies recadrées, une typographie et un design audacieux et saisissant.

– Carmel Snow (The World de Carmel Snow, McGraw-Hill, 1962)

Etonnez-moi

Harper's Bazaar est devenu le projet le plus connu de Brodovitch. Déterminé à garder ses conceptions fraîches, il commanda fréquemment des oeuvres à des artistes européens, notamment Jean Cocteau Marc Chagall et Man Ray . Pour ne pas surprendre les lecteurs de Harper’s Bazaar, Brodovitch a expliqué:

La qualité de la surprise peut être obtenue de nombreuses manières. Elle peut être produite par une relation géométrique stimulante entre des éléments de la photo, ou par l’intérêt humain de la situation photographiée, ou en attirant notre attention sur une chose banale mais fascinante que nous n’avons jamais remarquée auparavant, ou bien en cherchant chaque jour d'une manière nouvelle et intéressante.

– Alexey Brodovitch

C’est la direction artistique de Brodovitch pour Harper’s Bazaar qui a influencé les designers depuis les années 1940. Ses dessins étaient élégants, ce que Carmel Snow avait autrefois décrit comme «du bon goût et une pointe d'audace». Sa connaissance de la photographie donnait à son travail son aspect classique. Brodovitch recadrait souvent les photographies de manière inattendue et les plaçait déconcentrées – parfois en les saignant en marge d'une page – pour créer des compositions pleines d'énergie et de mouvement.

Tout au long de sa carrière à Harper’s Bazaar et au-delà, Brodovitch a fréquemment utilisé le contenu de photographies ou d’illustrations pour éclairer son placement et la forme du texte. Ses choix de couleurs étaient souvent audacieux et il utilisait de grands blocs de couleur pour le souligner.

Je trouve le processus de création de Brodovitch aussi fascinant que son travail final, car j’apprends davantage sur la façon de penser en regardant son travail en cours. Brodovitch a commencé par concevoir ses dispositions sous forme de croquis sur papier. Ensuite, il a arrangé ses pages sur le sol de son atelier pour créer un magazine bien rythmé.

Scattering images

Au début de sa carrière, Brodovitch s'est inspiré de Mehemed Fehmy Agha – l'art influent. réalisateur qui a conçu la première double page – et souvent des images éparpillées sur ses pages, comme des cartes à jouer.

Celles-ci peuvent au premier abord ressembler à un agencement aléatoire d’images, mais elles ont été délibérément placées et ont rempli de mouvement les dessins de Brodovitch. Nous pouvons utiliser la même technique aujourd'hui, même lors de la conception de dispositions souples.

Pour ma première conception inspirée de Brodovitch, je diffuse quatre images de taille différente dans la fenêtre d'affichage. Je peux organiser ces images horizontalement, verticalement ou même en diagonale en fonction des dimensions de l'écran.

Pour m'aider à concevoir une expérience cohérente pour toutes les tailles d'écran, je forme un scénarimage à partir d'une courte série de croquis.

Pour développer cette conception, j'utilise une combinaison de CSS Grid, Flexbox et de transformations. Mon balisage est minimal et significatif, en utilisant seulement trois éléments pour la mise en page; un titre de haut niveau, un élément principal de mon texte courant et un élément de figure qui contient mes quatre images:

 Cela ressemble à une guêpe! 
… 


… 

Pour les plus petites écrans, je n'ai besoin que des styles de base pour la couleur et la typographie comme flux normal, gère ma mise en page en colonne unique. En mode normal, les éléments s’affichent les uns après les autres, en fonction du mode d’écriture du document. Si vous connaissez bien ces concepts, Rachel Andrew a rédigé un excellent .

Pour créer un petit écran compatible avec les écrans de grande taille, je fais pivoter les images en alternance dans un élément de défilement horizontal. Comme le navigateur par défaut définit un conteneur flex sur non-wrappé et organise ses éléments flex sur un axe horizontal, il ne me reste plus qu'à appliquer display: flex; à mon élément figure:

 figure {
affichage: flex; } 

En veillant à ce que ma figure ne dépasse jamais la largeur de ma fenêtre et en réglant le débordement horizontal sur défilement, je développe un panneau de défilement simple pouvant contenir autant d'images que nécessaire:

 figure {
largeur maximale: 100vw;
débordement-x: faire défiler; } 

Mon élément figure contient quatre images SVG. Pour conserver leur rapport de format lors de l’utilisation de Flexbox, j’englobe chacun dans sa propre division:

Pour remplir tout l'espace horizontal d'images, j'utilise la propriété flex-grow. flex-grow contrôle le rapport d'expansion des éléments pour occuper l'espace disponible dans un conteneur, tandis que flex-shrink fait le contraire. Cette propriété spécifie le rapport de réduction de la taille des éléments lorsqu'un conteneur est plus étroit que leurs largeurs combinées. Je souhaite que mes éléments flexibles s'agrandissent pour occuper tout l'espace disponible, mais ne se réduisent pas:

 figure div {
croissance flexible: 1;
flex-shrink: 0; } 

Flex-Grow et Flex-shrink permettent à la largeur des éléments d'être complètement fluide, sans restriction quant à leur largeur ou à leur largeur. Il arrive parfois qu'un élément flexible commence à une certaine taille avant de grossir ou de diminuer. Dans Flexbox, flex-base fournit une largeur de départ pour un élément avant sa flexion:

 figure div {
base flexible: 40%;
/ * flex: 1 0 40%; * /} 

Pour réduire quelques octets de ma feuille de style, je peux combiner ces trois propriétés en une seule en utilisant le raccourci flex.

Choix entre Flexbox et Grid

Les gens me demandent souvent quand utiliser Flexbox ou La grille. Bien sûr, ma réponse dépend du style d’élément qu’ils implémentent. Pour mon ensemble d'images à quatre figures, je peux utiliser Flexbox ou Grid pour développer un arrangement 2×2 dans lequel chaque image apparaît à la même taille. Toutefois, lorsque j’ajoute ou supprime une image, le résultat obtenu avec Flexbox n’est pas ce que je recherche, car l’image finale s’agrandit pour couvrir toute la largeur de ma figure. En modifiant Flexbox en Grille, chaque élément s'aligne sur la grille, ce qui maintient sa taille.

Il est courant en impression de voir les éléments de conception se chevaucher pour créer l’illusion de profondeur. Sur le Web, obtenir cet effet a été délicat, les éléments de conception restent donc généralement séparés. Grid permet de réaliser des conceptions difficiles, voire impossibles à implémenter dans le passé.

Lorsqu'un écran est suffisamment grand pour afficher côte-à-côte les éléments principaux et les éléments-figures, j'applique display: grid; à l'élément body dont les largeurs de colonne correspondent à la grille composée 6 + 4, je vous ai présenté le problème 2. J'ai également défini un espace entre les colonnes et les lignes:

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

corps {
affichage: grille;
Grille-modèle-colonnes: 2fr 1fr 1fr 2fr 2fr 1fr 1fr 1fr 2fr;
grille-colonne-gap: 2vw;
intervalle entre lignes: 4vh; }
} 

Ensuite, je place les éléments de titre, principal et graphique sur cette grille en utilisant les numéros de ligne:

 h1 {
grille-colonne: 7;
rangée de grille: 1; }

principale {
grille-colonne: 6 / -1;
rangée de grille: 2; }

figure {
grille-colonne: 1/6;
rangée de grille: 1/3; } 

Enfin, lorsqu'un écran est suffisamment grand et que les images dispersées peuvent avoir un impact important, je repositionne les éléments de titre, principal et de figure dans de nouvelles positions sur ma grille:

 largeur: 64em) {

h1 {
grille-colonne: 8;
rangée de grille: 1; }

principale {
grille-colonne: 2/6;
rangée de grille: 1; }

figure {
grille-colonne: 1 / -1;
rangée de grille: 2; }
} 

Ensuite, j'applique les propriétés de la grille à mon élément figure pour créer quatre colonnes, chacune plus grande que la dernière:

 figure {
Grille-modèle-colonnes: 1fr 2fr 3fr 4fr;
intervalle de grille: 0;
align-items: fin; } 

J'aligne mes éléments à la fin de leur conteneur de grille, puis déplace et déplace mes images pour leur donner l'aspect dispersé que Brodovitch a inspiré:

 figure div: nth-of-type (1) {
transformer: traduire (20px, -20px) pivoter (-20deg); }

figure div: nième de type (2) {
transformer: faire pivoter (-5deg); }

figure div: nième de type (3) {
transformer: faire pivoter (10deg); }

figure div: nième de type (4) {
transformer: traduire (-60px, -80px) pivoter (-20deg); } 

Les gens m'ont dit que des designs comme ceux-ci sont appropriés pour un design éditorial, mais pas pour des produits ou des sites Web qui les promeuvent ou les vendent. Ce n’est pas le cas du tout. Les principes de conception graphique importent autant pour un support numérique que pour l’impression. Quelque soit le support que vous choisissez pour le présenter, vous remarquerez des designs divers et intéressants.

Alexey Brodovitch savait instinctivement comment combiner des photographies avec du contenu écrit, transformant souvent le texte en formes qui contrastaient ou reflétaient les formes de sa photographie. Dans les pages suivantes, je vais vous montrer comment adapter ses techniques de conception inspirées au Web.

Leçon 2: Reproduction d'images et de texte en miroir

Aexey Brodovitch a étendu la plaine double de son terrain de jeu à l'aide de son grand canevas. soigneusement construire ses compositions. Les pages en regard donnaient à Brodovitch la possibilité d’opposer ou de lier les deux côtés d’une diffusion

J'ai besoin de trois éléments structurels pour mettre en œuvre ce prochain design inspiré de Brodovitch; un titre, principal et de côté:

… 

Le flux normal gère à nouveau ma disposition en colonne unique pour les petits écrans et je n'ai besoin que de styles de base pour la couleur et la typographie. Celles-ci incluent les couleurs de fond et de premier plan pour le côté inversé:

 de côté {
couleur de fond: # ba0e37;
couleur: #fff; } 

Les écrans de taille moyenne partagent ces mêmes styles de base. Je réutilise également la même grille composée 6 + 4 de ma conception précédente. Pour implémenter la disposition asymétrique des éléments à l'intérieur de mes éléments principaux et latéraux, j'utilise Grid avec quatre colonnes et un ensemble de lignes avec un mélange de pixels et d'unités rem:

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

principale,
de côté {
affichage: grille;
Grille-modèle-colonnes: 2fr 1fr 1fr 2fr;
grid-template-rows: 10rem 200px 10rem auto; }
} 

J'ajoute une autre unité, une unité de hauteur de fenêtre, à ces éléments afin de garantir qu'ils remplissent toujours toute la hauteur d'un écran:

 main,
de côté {
hauteur min .: 100vh; } 

Mes éléments principaux et latéraux contiennent chacun un élément de figure, une image SVG et une légende. Pour placer ces éléments enfants sur ma grille, j'applique display: contents; à ma figure, et efficacement le retirer du DOM à des fins de style, de sorte que ses descendants prennent sa place:

 figure principale {
affichage: contenu; } 

Ensuite, je place les images et les légendes dans des colonnes et des lignes à l'aide de numéros de ligne:

 main img {
grille-colonne: 1/4;
rangée de grille: 1/5; }

figcaption principale {
grille-colonne: 4 / -1;
rangée de grille: 3; }

côté img {
grille-colonne: 2 / -1;
rangée de grille: 1/5; }

figcaption {
grille-colonne: 1;
rangée de grille: 3;
align-self: centre; } 

Ensuite, j'applique des styles pour les écrans plus grands, tout d'abord en créant une grille avec deux colonnes symétriques, puis en plaçant mes éléments principaux et latéraux sur cette grille à l'aide de lignes nommées:

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

corps {
affichage: grille;
grid-template-columns: [main] 1fr [aside] 1fr; }

principale {
grille-colonne: principale; }

de côté {
grille-colonne: à part; }
} 

Il ne me reste plus qu'à positionner l'en-tête contenant le logo bicolore Vespa. Comme je n’ai besoin que de cette version du logo sur des écrans plus grands, j’utilise l’élément d’image pour échanger une version standard de ma variante à deux tons:

     . 19659101] Bien que Flexbox et Grid aient principalement pris la place de mes principaux outils de mise en page, il existe néanmoins de bonnes utilisations pour le positionnement CSS. Comme je veux que mon logo soit au centre de ma mise en page, je le positionne à mi-chemin dans la fenêtre, puis j'utilise une transformation pour le déplacer à gauche. Son centre correspond donc à l'arrière-plan situé à l'arrière-plan: 
 h1 {
position: absolue;
en haut: 14rem;
à gauche: 50vw;
z-index: 2;
transformer: translateX (-95px); } 
 Découper du texte en formes
 Les formes ajoutent du mouvement à un dessin qui attire les gens. Elles aident à connecter un public à votre histoire et à établir des liens plus étroits entre votre contenu visuel et votre contenu écrit.
 J'ai vu très Quelques exemples d'utilisation de formes CSS allant au-delà des formes de base, notamment circle (), ellipse (), inset (). Même les occurrences d'un polygone () sont rares. Compte tenu des possibilités créatives offertes par CSS Shapes, c’est décevant. Mais je suis sûr qu’avec un peu d’inspiration et d’imagination, nous pourrons créer des motifs plus distinctifs et plus attrayants.
 Inspiré par Alexey Brodovitch, dans mon dessin suivant, la forme du texte affiché reflète les formes de l'image d'en-tête ci-contre. Il faut souvent étonnamment peu de balises pour développer des mises en page dynamiques et originales.
 Pour implémenter cette conception, il me suffit de deux éléments structurels; un en-tête qui contient également un élément d'image et l'élément principal de mon texte courant:

… 


… 
 
 J'ai créé un simple projet d'écran de petite taille, de sorte que je n'ai besoin que d'un fond de couleur et de typographie. modes. En utilisant un élément d'image dans l'en-tête, les navigateurs intervertissent l'image en orientation portrait (qui convient le mieux aux petits écrans) avec une variation de paysage lorsque j'introduis des styles de présentation.
 Pour les écrans plus grands, j'applique une grille asymétrique à deux colonnes au corps. et placez l'en-tête et les éléments principaux en utilisant des lignes nommées. Je m'assure également que la grille s'étend sur toute la hauteur de la fenêtre, quelle que soit la quantité de contenu:
 @media screen et (min-width: 64em) {

corps {
affichage: grille;
grid-template-columns: [header] 1fr [main] 1fr;
largeur maximale: 100vw; }

entête {
grille-colonne: en-tête; }

principale {
grille-colonne: principale; }
} 
 Je n’ai pas besoin de tracer un chemin de polygone pour parcourir mon texte. Au lieu de cela, j'utilise une image de masque que j'ajoute à la page à l'aide du contenu généré appliqué à un pseudo-élément:
 main: before {
contenu: "";
bloc de visualisation;
float: gauche;
largeur: 170px;
hauteur: 800px;
shape-outside: url ('mask.svg'); } 
  Note:  Faites attention au partage de ressources entre origines (CORS) lorsque vous utilisez des images pour développer vos formes. Vous devez héberger des images sur le même domaine que votre produit ou votre site Web. Si vous utilisez un CDN, assurez-vous qu'il envoie les en-têtes corrects pour activer les formes. Il convient également de noter que le seul moyen de tester les formes localement consiste à utiliser un serveur Web. Le protocole file: // ne fonctionnera tout simplement pas.
 Lorsque vous avez besoin que du contenu circule autour d’une forme, utilisez la propriété shape-outside. Vous devez faire flotter un élément à gauche ou à droite pour que la forme-extérieure ait un effet.
 Vous pouvez également utiliser Shapes pour sculpter des formes structurelles à partir de blocs pleins de texte en cours, à la manière d'Alexey Brodovitch.
 Le balisage dont j'ai besoin pour mettre en oeuvre ce design est similaire à Mon exemple précédent, un en-tête qui contient à nouveau un élément d'image et l'élément principal pour le texte en cours:

… 


… 
 À l'intérieur de mon élément principal se trouvent deux images SVG que j'utilise pour sculpter mon texte courant dans sa forme. Pour éviter que ces images de présentation ne soient annoncées par les lecteurs d'écran, je leur attribue à la fois un attribut aria-hidden et une valeur true:


… 
 
 En utilisant ce qui devrait être une grille composée 6 + 4 bien connue, J'applique Grid à l'élément body et place l'en-tête et les éléments principaux à l'aide des numéros de ligne:
 @media screen et (min-width: 64em) {

corps {
affichage: grille;
Grille-modèle-colonnes: 2fr 1fr 1fr 2fr 2fr 1fr 1fr 1fr 2fr; }

entête {
grille-colonne: 1/5; }

principale {
grille-colonne: 5/9; }
} 
 Ensuite, je fais pivoter l'image d'en-tête de vingt degrés dans le sens des aiguilles d'une montre et place son origine d'origine au centre horizontalement et verticalement pour qu'elle reste au milieu de l'en-tête:
 en-tête image {
transformer: faire pivoter (20deg);
origine de la transformation: 50% 50%; } 
 Enfin, je laisse flotter la première image à gauche et la seconde image à droite, de sorte que le texte que je fais défiler coule entre elles et reflète la forme de l'image pivotée opposée. Je n'ai pas besoin d'attribut de classe sur ces images. J'utilise plutôt un sélecteur d'attribut qui cible la source de l'image:
 [src*="shape-1"],
[src*="shape-2"] {
largeur: 200px;
hauteur: 100vh; }

[src*="shape-1"] {
float: gauche;
shape-outside: url ('mask-1.svg'); }

[src*="shape-2"] {
Flotter à droite;
shape-outside: url ('mask-2.svg'); } 
 Des outils tels que CSS Shapes nous offrent désormais d'innombrables possibilités de capter l'attention des lecteurs et de les maintenir engagés. J'espère que maintenant, vous êtes aussi enthousiasmé par eux que moi.
 Développement d'images et de texte
 Lorsque Brodovitch fut frustré par les contraintes commerciales liées au travail sur Harper's Bazaar, en 1949, il commença à collaborer à Portfolio, le magazine de design graphique éphémère mais important. Portfolio ne comportant que trois numéros, Portfolio permet à Brodovitch de se concentrer non pas sur un magazine, mais sur une "expérience graphique".
 Dans le deuxième numéro de Portfolio, Brodovitch a créé une extension sur l’œuvre de l’artiste expressionniste abstrait Jackson Pollock. Dans sa conception, les formes circulent entre les colonnes et s’étendent sur toute la hauteur de la page. Je souhaite obtenir le même style dans mon prochain dessin inspiré par Brodovitch, mais alors que la propagation de Brodovitch ne contient pas de copie, la mienne comporte deux colonnes de texte en cours. Je souhaite également que l'image derrière mon texte grossisse et diminue à mesure que la fenêtre d'affichage change de taille.
 Mon balisage pour la mise en œuvre de ce dessin ne contient que le strict minimum d'éléments principaux et de côté:
… 
 [194519659055] Le côté contient également une division que j'utilise pour placer le texte courant sur ma grille et un élément de figure contenant les images dont j'ai besoin pour réaliser le dessin: 
 
 Cette fonctionnalité doit être visible à n’importe quelle taille d’écran. Par conséquent, avant d’implémenter des styles de mise en page, j’ai configuré les trois images séparées de la figure. Les images de gauche et de droite sont blanches sur un fond rouge et l’image centrale présente des contours rouges sur un fond blanc. Ma première tâche consiste à établir l’élément figure en tant que contexte de positionnement pour ses descendants et à les positionner absolument en haut à gauche de ma figure:
 figure {
position: relative; }

figure img {
position: absolue;
en haut: 0;
gauche: 0; } 
 Ensuite, j'utilise la propriété clip-path pour découper chacune des images de manière à ce qu'un tiers seulement d'entre elles soient visibles:
 figure img: nth-de-type (1) {
z-index: 2;
clip-path: polygone (0% 0%, 0% 100%, 33,33% 100%, 33,33% 0%); }

figure img: nième de type (2) {
z-index: 1;
clip-path: polygone (0% 0%, 100% 0%, 100% 100%, 0% 100%); }

figure img: nième de type (3) {
z-index: 2;
clip-path: polygone (100% 0%, 66,66% 0%, 66,66% 100%, 100% 100%); } 
 Ces images étant positionnées, j'ajoute des styles de mise en page pour les écrans plus grands afin de placer les éléments principaux et latéraux sur ma grille:
 @media screen et (min-width: 64em) {

corps {
Grille-modèle-colonnes: 2fr 1fr 1fr 2fr 2fr 1fr 1fr 1fr 2fr;
grille-colonne-gap: 2vw; }

principale {
grille-colonne: 1/3; }

de côté {
grille-colonne: 3 / -1; }
} 
 Pour créer l'effet de trois colonnes qui s'étendent sur toute la hauteur de ma page, spécifiez la hauteur totale de la fenêtre de visualisation sur mon élément body, puis utilisez une image d'arrière-plan en dégradé CSS pour donner à l'élément de côté son style de colonne. Les valeurs d'arrêt en pourcentage dans ce dégradé correspondent aux largeurs 33,33% de mes images découpées:
 body {
hauteur: 100vh; }

de côté {
background-image: linear-gradient (à droite,
# ba0e37 33,33%,
#fff 33,33%,
#fff 66,66%,
# ba0e37 66,66%); } 
 Il ne me reste plus qu'à placer ma colonne de texte en cours et mon chiffre dans la colonne de côté. J'applique donc les valeurs de la grille à l'autre et je place la division et le graphique à l'aide de numéros de ligne. Comme ces éléments se chevauchent sur ma grille, j'utilise z-index pour pousser la figure en arrière et mon texte courant vers l'avant:
 de côté {
affichage: grille;
Grille-modèle-colonnes: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr; }

côté div {
z-index: 2;
grille-colonne: 2;
rangée de grille: 1/3; }

figure {
z-index: 1;
grille-colonne: 1 / -1;
rangée de grille: 2; } 
 Cette conception peut sembler compliquée et, à première vue, peut sembler impossible à atteindre pour différentes tailles d’écrans, mais elle est étonnamment simple à développer. Il conserve sa personnalité, des écrans les plus petits aux plus grands, et est flexible à chaque taille intermédiaire.
 Les conceptions flexibles comportant des éléments positionnés avec précision étaient auparavant délicates à mettre en œuvre à l'aide de flottants et de CSS. Les techniques CSS modernes ont rendu ces dessins beaucoup plus simples à réaliser, ce qui, je l’espère, se traduira par une nouvelle génération de dessins inspirés.
 Ma conception finale s’inspire à nouveau du second numéro de Portfolio. Brodovitch a utilisé ici une combinaison saisissante de colonnes noires et blanches et une touche de couleur audacieuse. La mise en œuvre de cette conception ne nécessite que deux éléments structurels; un élément principal et un élément de pied de page:
… 
 
 Mon élément principal contient un logo de titre, une image et un bloc de texte en cours d'exécution. Le pied de page comprend deux divisions, chacune contenant un ensemble d'images SVG pour obtenir l'effet souhaité:

 

… 
… 


 
 Pour les écrans de taille moyenne, je place ces éléments sur ma grille à l'aide de lignes nommées:
 @media screen et (min-width: 48em) {

corps {
affichage: grille;
grid-template-columns: [main] 1fr [footer] 1fr;
hauteur min .: 100vh; }

principale {
grille-colonne: principale; }

bas de page {
grille-colonne: pied de page; }
} 
 Pour ajuster les proportions de ma mise en page pour des écrans plus grands, il suffit de modifier les valeurs des éléments de grille-modèle de l'élément body:
 @media screen et (min-width: 64em) {

corps {
grid-template-columns: [main] 2fr [footer] 3fr; }
} 
 Le contenu de l'élément principal n'a besoin que d'un style de base, mais le pied de page qui occupe la moitié droite des écrans plus grands en demande plus. To accomplish this footer’s striped column effect, I again use a linear gradient and four percentage-based colour stops:
footer {
background-image: linear-gradient(to right, 
#000 33.33%, 
#fff 33.33%, 
#fff 66.66%, 
#000 66.66%); }
Each footer division contains a set of three SVG images:
Styling the footer’s second division involves turning it into a flex container. As the browser’s default Flexbox styles include a horizontal flex-direction and no wrapping, I need just a single line of CSS:
footer div:nth-of-type(2) {
display: flex; }
To ensure my images grow to fill the columns, but never exceed their width, I apply the flex-grow property and a value of 1, plus a max-width value of 33% to match my columns:
footer div:nth-of-type(2) img {
flex: 1;
max-width: 33%; }
The CSS clip-path property enables you to clip and element so that only part of it remains visible. These clipping paths can be any shape, from basic circles and eclipses to complex polygon shapes with any number of coordinates.
1. For the first image, I clip the right side leaving only the portion on the left visible (black area.)
2. I position the second image absolutely and use a lower z-index value to send it to the bottom of my stacking order.
3. For the third and final image, I clip the left side leaving only the portion on the right visible.
4. My final result includes an SVG circle positioned over my images. A mix-blend mode tints the colour of elements below it in my stacking order.
For the images in the first division, I again position them absolutely within a positioning context, then use the clip-path property to clip each one so that only one-third of them is visible:
footer div:nth-of-type(1) {
position: relative;
min-height: 300px; }

footer div:nth-of-type(1) img {
position: absolue;
top: 0;
left: 0; }

footer div:nth-of-type(1) img:nth-of-type(1) {
clip-path: polygon(0% 0%, 0% 100%, 33.33% 100%, 33.33% 0%); }

footer div:nth-of-type(1) img:nth-of-type(2) {
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }

footer div:nth-of-type(1) img:nth-of-type(3) {
clip-path: polygon(100% 0%, 66.66% 0%, 66.66% 100%, 100% 100%); }
My final task is to add an SVG circle which uses a mix-blend-mode to blend its colour with elements behind it:
footer div:nth-of-type(1) svg {
position: absolue;
mix-blend-mode: darken; }
Since I discovered his work, Alexey Brodovitch has been the most substantial influence on the work I make for the web and how I encourage my students to think about theirs. His inability to accept anything mediocre has pushed me to think beyond what’s expected from product and website design. I hope my designs include his dash of daring.
NB: Smashing members have access to a beautifully designed PDF of Andy’s Inspired Design Decisions magazine and full code examples from this article.
Inspired Design Decisions: Avaunt Magazine
Inspired Design Decisions: Pressing Matters
Inspired Design Decisions: Ernest Journal
Inspired Design Decisions: Alexey Brodovitch
(ra, yk, il)