Fermer

octobre 3, 2019

Bea Feitler, une force créatrice imparable


Dans cette cinquième édition d'Inspired Design Decisions, Andy Clarke vous expliquera l'histoire de Bea Feitler, directrice du film Harper's Bazaar dans les années 1960 et qualifiée de «directrice artistique féminine pionnière dont vous n'avez jamais entendu parler». Andy enseignera Je vous présente le travail confiant de Feitler et vous explique comment appliquer certaines de ses techniques de conception au travail que vous réalisez pour le Web. Dans cet article, vous apprendrez à mettre l’échelle en valeur et à maintenir son contraste, même sur les plus petits écrans. Andy vous apprendra comment choisir des couleurs en toute confiance et comment utiliser des motifs et des textures pour ajouter de la profondeur à vos dessins.

Même si vous n’avez pas étudié le graphisme à l’école d’art, vous connaissez peut-être quelques noms célèbres. Avec plus d'un siècle de direction artistique commerciale, il y a beaucoup plus de noms à découvrir. Les personnes qui ont réalisé un travail étonnant qui peut nous inciter et nous inciter à réfléchir de manière plus créative au Web

La découverte de personnes au talent incroyable a été l’un des aspects les plus enrichissants de l’étude de la direction artistique. Apprendre à connaître un designer me conduit souvent à un autre, et lorsque je découvre une personne qui admire son travail, je veux comprendre non seulement ce qu’ils ont fabriqué, mais aussi pourquoi ils l’ont fait.

Précédemment dans “Les décisions de conception inspirées”

  1. Inspiré Décisions de design: Magazine Avaunt
  2. Décisions de design inspirées: des questions pressantes
  3. Décisions de design inspirées: Ernest Journal
  4. Décisions de design inspirées: Alexey Brodovitch

Après avoir entendu parler du travail inspirant de Alexey Brodovitch Sur Harper's Bazaar jusque dans les années 50, je voulais connaître l'impact de son héritage sur le magazine. Cela m'a amené à Bea Feitler et à son partenaire créatif Ruth Ansel qui a dirigé Harper's Bazaar au cours des années 1960.

Feitler a été décrite comme «la directrice artistique novatrice que vous n'avez jamais vue entendu parler de. "Je ne l'ai jamais entendue mentionnée à une conférence sur le design ni vue dans un article sur la conception Web.

Cependant, les conceptions confiantes et énergiques de Feitler ne sont qu'une partie de ce qui rend sa vie et son travail fascinants. Plus important encore, son travail reflétait les changements survenus dans la société américaine au cours des années 60 et les choix qu’elle avait faits pour l’influencer.

Une seule exposition a été présentée sur son travail et un livre rétrospectif a été publié. « O Design de Bea Feitler », écrit par son neveu, a été publié au Brésil, son pays d'origine, en 2012. Il m'a fallu des mois pour en retrouver un exemplaire, mais j'en ai finalement trouvé un. C’est le livre le plus cher que j’ai acheté.

Feitler a autant à enseigner aux créateurs pour le Web qu’elle l’a fait aux concepteurs de magazines qui l’ont suivie. J'espère que, dans une moindre mesure, je pourrai aider les gens à aimer le travail de Bea Feitler comme je l'ai fait.

Inspiré de Bea Feitler

 Portrait de Bea Feitler par Bob Richardson, dans les années 1960.
Portrait de Bea Feitler de Bob Richardson, dans les années 1960. ( Grand aperçu )

Bea Feitler est née à Rio de Janeiro en 1938. Après avoir travaillé sur des couvertures d'albums, des jaquettes de livres, des magazines et des affiches, elle a quitté le Brésil pour s'installer à Manhattan. En 1961, à seulement 25 ans, elle est devenue assistante artistique, puis l'une des plus jeunes et premières co-directrices artistiques de Harper's Bazaar aux côtés de Ruth Ansel.

Tout comme Alexey Brodovitch – qui avait quitté Harper Bazaar avant son déménagement aux États-Unis – les collaborations de Feitler avec des artistes et des photographes ont aidé à définir son travail. Au Harper's Bazaar, la photo prise par Richard Avedon montre le mannequin Jean Shrimpton dans son célèbre casque spatial rose, puis John Lennon nu d'Annie Leibovitz sur la couverture de Rolling Stone.

Bien que Feitler n'ait jamais rencontré Brodovitch, il est fascinant de voir comment elle a respecté le sien. héritage. Feitler a compris que les pages de magazines devaient être construites délibérément et individuellement, mais devaient en même temps être reliées les unes aux autres pour former un rythme harmonieux.

Une sélection de couvertures de magazines dirigées par Bea Feitler. De gauche à droite: Harper’s Bazaar, MS., Rolling Stone et Vanity Fair. ( Grand aperçu )

Un magazine devrait circuler. Ça devrait avoir du rythme. Vous ne pouvez pas regarder une seule page, vous devez visualiser ce qui vient avant et après. Une bonne conception éditoriale consiste à créer un flux harmonique.
– Bea Feitler

Feitler associe la maîtrise de la double page par Brodovitch à ses choix de couleurs vives inspirés par les artistes pop Jasper Johns, Roy Lichtenstein et Andy Warhol, ainsi que par la mode de rue et la culture des jeunes.

Elle n'avait pas peur d'expérimenter avec la couleur ou de rompre avec les conventions, plaçant deux fois le texte vert sombre sur un fond rose fluo, d'abord pour la couverture de Harper's Bazaar en avril 1965 et ensuite pour la revue féministe Ms. en décembre 1972.

Harper's Bazar, février 1967. Direction artistique de Bea Feitler. ( Grand aperçu )

Au studio Harper’s Bazaar qu’elle partageait avec Ruth Ansel, un collage en perpétuelle mutation remplissait leur mur d’inspiration; quelque chose que j'aimerais avoir de la place dans mon petit studio. Feitler n'avait pas peur de mélanger les médias et lorsqu'elle sentit qu'un de ses films les plus emblématiques ne fonctionnait pas, elle combina l'une des photographies les plus connues d'Avedon avec un panneau tiré d'une bande dessinée achetée dans un kiosque à journaux à la rue en dessous.

Harper's Bazaar, août 1966. Photographie de Hiro. Direction artistique par Ruth Ansel et Bea Feitler. Leurs choix confiants de couleurs et de formes fortes ont inspiré une grande partie de mes travaux récents. ( Grand aperçu )

Les conceptions de Feitler ont influencé et reflété les changements survenus dans la société américaine dans les années 1960. Les magazines qu'elle dirigeait avaient une qualité rapide, presque cinématographique, parfaitement adaptée à la culture de l'époque, mais également pertinente pour notre travail en ligne aujourd'hui. Feitler pensait qu'une bonne conception éditoriale visait à créer un flux harmonieux. C’est aussi pertinent pour la conception d’expériences utilisateur captivantes et de parcours clients que de pages de magazine.

Certaines de mes créations Feitler préférées n’ont ni couleur ni image, comme cette propagation typographique de Harper’s Bazaar. ( Grand aperçu )

Même si certaines personnes continuent à réciter le mantra selon lequel le Web n’est pas imprimé, nous pouvons apprendre beaucoup du travail de Feitler. Ses créations peuvent nous aider à améliorer non seulement la conception éditoriale en ligne, mais également les sites Web de commerce électronique et les conceptions de produits numériques.

Feitler a déclaré qu’un livre était une «image 50/50 en texte intégral». caractéristiques et vidéo aussi. Comprendre comment combiner avec succès ces composants pour créer une expérience cohérente et engageante est une compétence fondamentale que chaque concepteur numérique devrait développer.

En tant que mentor et enseignant, Feitler a partagé de nombreux principes avec Alexey Brodovitch. Elle a encouragé ses élèves à développer leur propre direction et beaucoup sont devenus eux-mêmes des directeurs artistiques éminents. Feitler était exigeant et n'acceptait rien de moins que les normes les plus élevées en matière d'excellence en design.

Accrochez-vous à vos passions et creusez en profondeur tout en faisant confiance à votre instinct. Sortez de ce qui est attendu. Adoptez les accidents et sachez que vous finirez par découvrir la solution idéale à un dilemme créatif et que vous serez très heureux en le faisant.
– Ruth Ansel

Malheureusement, Bea Feitler est décédée d’un cancer en 1982 à l’âge de 44 ans. Je pense qu’elle a autant à apprendre à ceux qui travaillent pour le Web que les directeurs artistiques de magazines qui l’ont suivie. J'espère que sa vie et son travail nous inciteront à avoir du courage dans nos convictions et à faire nos propres choix, courageux et confiants.

Beauty Blast Off

 Harper’s Bazaar, avril 1965. Modèle: Jean Shrimpton. Photographe: Richard Avedon Le Harper's Bazaar n'avait pas eu de rédacteur invité auparavant, mais pour l'édition d'avril 1965, son collaborateur de longue date, Richard Avedon, a édité et photographié le numéro complet.

À l'intérieur, Avedon a photographié Donyale Luna – première femme noire à figurer sur la couverture d'un magazine de mode – et Paul McCartney portant une combinaison spatiale empruntée à la NASA. Pour la couverture, Avedon a choisi une image du mannequin contemporain Jean Shrimpton portant un casque spatial fabriqué par l'un des plus célèbres modistes de New York.

Avedon a rappelé plus tard à 23 heures, après l'expiration du délai imparti, la photo J'ai tiré pour la couverture ne fonctionnait pas. Feitler a donc découpé la forme d’un casque dans du papier rose Day-Glo et l’a placé sur la photographie d’Avedon. Pas de groupes de discussion, pas de recherches, pas de tests d'audience, juste une décision audacieuse et intuitive.

Le résultat fut une couverture qui remporta la médaille du New York Art Director's Club et se classa au quinzième rang de l'American Society of America. Liste des 40 meilleures couvertures de magazines publiée par le rédacteur en chef en 2005.

50 50 Image du texte

 Agneta Darin. Tiré de Harper’s Bazaar, août 1966. Photographie de Hiro. Direction artistique de Bea Feitler et Ruth Ansel
Agneta Darin. Tiré de Harper’s Bazaar, août 1966. Photographie de Hiro. Direction artistique par Bea Feitler et Ruth Ansel. ( Grand aperçu )
 Ce dessin utilise un dégradé d’image d’arrière-plan CSS et l’élément d’image
Ce dessin utilise un dégradé d’arrière-plan CSS et l’élément d’image. ( Grand aperçu )

Pour mettre en œuvre mon premier projet inspiré par Feitler, mon objectif est d'utiliser le plus petit ensemble d'éléments structurels; a header plus main et à part éléments pour le contenu. Mon en-tête contient l'image fractionnée d'une coccinelle emblématique de Volkswagen et un titre comprenant un logo SVG Volkswagen intégré. Comme ce titre ne contient pas de texte, j’utilise une étiquette ARIA pour le décrire. Cela aidera les personnes qui utilisent des technologies d'assistance:

Pour les écrans plus petits, je n'ai besoin que des styles de fondation comme du flux normal, gère ma disposition en colonne unique. Tout d'abord, j'ajoute un dégradé linéaire derrière l'image d'en-tête. Les gradients sont incroyablement flexibles, mais malgré leur utilité, ils sont étonnamment sous-utilisés:

 header {
rembourrage: 1rem 2vw;
background-image: linear-gradient (
à droite,
# 444 0%,
# 444 50%,
#fff 50%,
#fff 100%);
text-align: center; }

Mon dégradé commence à gauche par un gris foncé et se termine à droite par un blanc. Sans arrêts de couleurs, le résultat serait un dégradé régulier entre ces couleurs, mais je souhaite une ligne dure au centre de mon en-tête. Pour obtenir cet effet, je place deux arrêts de couleur à la même position 50% . Pour changer la direction de mon dégradé, je n'ai pas besoin d'ajuster ces pourcentages. Je peux simplement changer la direction du gradient de à droite à à gauche .

 À gauche: mon gradient commence à gauche. Droite: je change de direction sans modifier le pourcentage de couleurs que j'arrête.
Gauche: mon dégradé commence à gauche. Droite: je change de direction sans changer mon pourcentage de couleur s'arrête. ( Grand aperçu )
 Lorsque vous utilisez des images pour ajouter un effet dramatique, assurez-vous que leur effet est spectaculaire, quelle que soit la taille de l'écran. Réduire une image de paysage pour l'adapter à une orientation portrait diminue son poids et son impact visuel.
Lorsque vous utilisez des images pour ajouter un effet dramatique, assurez-vous que leur effet est spectaculaire, quelle que soit la taille de l'écran. Réduire une image de paysage pour l’adapter à une orientation portrait diminue son poids visuel et son impact. ( Grand aperçu )

Il est important de maintenir un équilibre constant du poids visuel tout en adaptant les conceptions à des écrans de plusieurs tailles. Je ne veux pas que mon image d’en-tête soit aussi haute, elle me fait passer du texte au premier écran. Je mets donc une hauteur maximale de 75vh ou trois quarts de la hauteur d’un petit écran:

 header img {
hauteur maximale: 75vh; }

Pour compléter la conception de mon petit écran, j'établis l'en-tête comme contexte de positionnement. Ensuite, je positionne absolument l'emblème Volkswagen et veille à ce que sa largeur s'adapte à l'écran en utilisant une unité de largeur de fenêtre d'affichage de 5vw :

 header {1}
position: relative; }
h1 {
position: absolue;
en haut: 1rem;
à gauche: 1rem;
largeur: 5vw; }

Mon orientation portrait convient parfaitement aux écrans de grande taille, mais il me faut une image de format plus large pour les écrans plus larges que grands. L’orientation est une requête multimédia fabuleuse, mais rarement utilisée, qui teste l’orientation d’une fenêtre. Cette requête multimédia peut être utilisée dans les feuilles de style comme alternative aux requêtes plus classiques en largeur. Il peut également être appliqué à la source d'un élément image . Cette requête remplace l'image de mon portrait par une alternative au paysage lorsque la largeur dépasse la hauteur, que ce soit sur un petit écran ou sur un écran de bureau:



 Volkswagen Beetle 

Pour ma conception de paysage alternative, j'utilise Grid pour placer les éléments main et de côté . Il existe plusieurs options pour placer ces éléments – y compris les colonnes et les lignes, et les zones de modèle – mais j'ai choisi d'utiliser grille-modèle-colonnes pour définir une grille symétrique à deux colonnes sur le corps . . J'applique à nouveau le dégradé linéaire et règle sa hauteur minimale au match de la fenêtre d'affichage:

 @media screen et (orientation: paysage) {
corps {
affichage: grille;
grid-template-columns: [main] 1fr [aside] 1fr;
hauteur min .: 100vh;
background-image: linear-gradient (
à droite,
# 444 0%,
# 444 50%,
#fff 50%,
#fff 100%); }
}

En orientation paysage, mon en-tête remplit toute la largeur de l'écran. Comme je n’ai plus besoin de l’image d’arrière-plan à dégradé linéaire sur cet élément, je peux simplement la supprimer:

 header {
grille-colonne: 1 / -1;
image de fond: aucune; }

Comme cette grille est si simple, je place mes éléments principaux et de côté sur la grille à l'aide de lignes nommées:

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

Le résultat final est un dessin qui adapte sa disposition selon que le navigateur ou l'écran du périphérique est orienté paysage ou portrait

Bandes dessinées

 Bandes dessinées Bea Feitler associe régulièrement photographies et illustrations. et des œuvres de bande dessinée apparaissent tout au long de sa carrière.

Pour Harper's Bazaar, elle place l'une des photographies d'Avedon représentant Jean Shrimpton portant une combinaison spatiale sur un fond de bande dessinée. Plus tard, elle a chargé la légendaire bande dessinée Marie Severin de créer cette couverture pour Ms. Magazine en 1973.

Soulignez l'échelle

 Le pied et la Ferrari. ' Tiré de Harper’s Bazaar, mars 1967. Photographie de Bill Silano. Direction artistique de Bea Feitler et Ruth Ansel
'Le pied et la Ferrari.' Tiré de Harper’s Bazaar, mars 1967. Photographie de Bill Silano. Direction artistique par Bea Feitler et Ruth Ansel. ( Grand aperçu )
 Ce motif, inspiré de "Le pied et la Ferrari". utilise un dégradé d’image d’arrière-plan et la propriété object-fit CSS.
Ce motif, inspiré de "The Foot and the Ferrari". utilise un dégradé d'image de fond CSS et la propriété object-fit. ( Grand aperçu )

La ​​Volkswagen Beetle était une petite voiture dotée d'une grande personnalité. Je veux que mon prochain dessin corresponde à un personnage. La conception du grand écran utilise une énorme image de la roue de la coccinelle pour souligner la petitesse de cette petite voiture. Mais avant d’arriver sur les grands écrans, je veux être sûr de conserver un contraste similaire sur l’échelle des petits écrans.

Trois éléments structurels constituent le balisage dont j’ai besoin pour mettre en œuvre ce design; un en-tête pour la grande image de la roue, une figure qui contient la plus petite image de la voiture et un élément principal pour mon texte courant. Comme l'en-tête n'a aucune signification pour quiconque utilise un lecteur d'écran, j'ai choisi de le masquer en utilisant un attribut aria-hidden :



 Volkswagen Beetle
]

Les styles de fondations et le flux normal prennent en charge la plupart des aspects de la conception de mon petit écran, mais cela ne signifie pas pour autant que je peux ignorer ce qui le rend si distinctif; le contraste entre la grande roue et la petite Volkswagen. Pour que mon en-tête occupe toujours le tiers de la hauteur de la fenêtre de visualisation avec des espaces identiques entre celui-ci et mon contenu, j'utilise des unités de hauteur de fenêtre pour la hauteur et la marge:

 header {
marge inférieure: 33vh;
hauteur: 33vh; }
 Cette roue est facilement déformée, ce qui confère à la Beetle une crevaison involontaire. Droite: utiliser un objet en forme rétablit la rondeur de ma roue.
Cette roue est facilement déformée, ce qui confère à la Beetle une crevaison involontaire. Droite: utiliser objet-fit restaure la rondeur de ma roue. ( Grand aperçu )

Un problème que je rencontre souvent lors du développement de dispositions souples est le redimensionnement involontaire des images. Avec une hauteur fixe sur mon en-tête et 100% la roue géante peut se déformer. Heureusement, il est possible de conserver ses proportions en utilisant la propriété object-fit . Il existe quatre options possibles, plus aucune :

  1. contient
    Conserve le rapport de format d'une image tout en s'insérant dans la zone de contenu du parent.
  2. cover
    Conserve le rapport de format d'une image, mais cette fois. remplit la boîte entière. Lorsque cela se produit, des parties de l'image situées en dehors de la zone de contenu sont masquées.
  3. fill
    Une image est déformée de sorte que sa largeur et sa hauteur correspondent à celles de l'image principale.
  4. scale-down
    réduit la taille d'une image ou d'une vidéo pour qu'elle tienne dans son parent.
 Gauche – droite: contient, couvre, remplit et réduit. La propriété object-position va souvent de pair avec object-fit. Il permet de positionner avec précision un élément dans la zone de contenu de son parent.
Gauche – droite: contenir, couvrir, remplir et réduire. La propriété object-position va souvent de pair avec object-fit. Il permet de positionner avec précision un élément dans la zone de contenu de son parent. ( Grand aperçu )

Je souhaite que ma grande roue remplisse complètement l'en-tête sans en altérer les proportions. Je ne suis pas non plus préoccupé par le fait que certaines parties de l’image seront coupées, ce qui fait de cover le bon choix pour object-fit :

 header img {
ajustement d'objet: couverture;
position d'objet: centre en bas;
largeur: 100%;
hauteur: 100%; }

Maintenant que l'image de la roue est en position, je fournis l'échelle en contrastant sa taille importante avec une petite image de la voiture entière. Je limite la taille maximale de la Coccinelle à la moitié de la largeur de la fenêtre et le centre horizontalement en utilisant ses marges:

 figure {
marge: 0 auto;
largeur maximale: 50vw; }

Cette conception utilise un fond gris uni pour représenter la route. J'ajoute donc une couleur de fond et déplace le chiffre vers le bas de 10px de sorte que les roues du coléoptère restent fermement sur le tarmac. :

 main {
rembourrage: 2rem;
couleur de fond: # f0f0f1; }

figure {
transformer: translateY (10px); }

Les écrans plus grands offrent la possibilité de faire bonne impression. Pour cette conception, je souhaite que l'image header occupe la moitié de la largeur et la hauteur totale d'un grand écran. J'applique la même grille composée 6 + 4 que j'ai utilisée pour de nombreux modèles de cette série. Il comporte huit colonnes auxquelles j’ajoute trois lignes. Je donne une hauteur fixe aux rangées du milieu et du bas et laisse la première rangée occuper tout l'espace vertical restant:

 @media screen et (min-width: 64em) {
corps {
affichage: grille;
Grille-modèle-colonnes: 2fr 1fr 1fr 2fr 2fr 1fr 1fr 1fr 2fr;
grid-template-rows: 1fr 155px 155px;
grille-colonne-gap: 2vw; }
}

Je souhaite que le corps du corps remplisse toujours toute la hauteur de la fenêtre. J'applique donc une hauteur minimale de 100vh et utilise un gradient linéaire pour créer l'illusion d'une route: [19659051] corps {
hauteur min .: 100vh;
background-image: linear-gradient (
en haut,
# f0f0f1 0%,
# f0f0f1 155px,
#fff 155px,
#fff 100%); }

En utilisant les numéros de ligne, je place l'en-tête sur la grille, de sorte qu'il occupe la moitié des colonnes et toutes les lignes. L'alignement de la petite figure le place à la fin de son module de grille. Ensuite, le main forme une seule colonne étroite de texte courant:

 header {
grille-colonne: 5 / -1;
rangée de grille: 1/4;
marge inférieure: 0;
hauteur: auto;
couleur de fond: # 444; }

figure {
grille-colonne: 1/4;
rangée de grille: 2;
align-self: fin;
max-width: auto; }

principale {
grille-colonne: 4;
rangée de grille: 1/3;
align-self: centre;
couleur de fond: transparent; }
 Dans cette conception alternative, je conserve la différence d'échelle entre les deux images selon la taille de l'écran fluide à l'aide de CSS Grid
Dans cette conception alternative, je conserve la différence d'échelle entre les deux images selon la taille de l'écran fluide à l'aide de CSS Grid. ( Grand aperçu )

Il est essentiel de savoir comment l’échelle influe sur la compréhension de l’histoire d’une personne pour bien la raconter. La taille pure est rarement suffisante en soi, aussi, pour avoir un impact significatif, la largeur doit être relative à la taille des autres éléments.

Bea Feitler a bien compris l’échelle et l’a bien utilisée. Elle a souvent opposé de grands éléments de premier plan à des éléments plus petits de l’arrière-plan pour créer des motifs d’une profondeur incroyable. Nous pouvons maintenant suivre ses traces en utilisant l’échelle pour ajouter de l’impact aux conceptions de produits et de sites Web.

Choix de couleurs confiants

Le choix de couleurs confiant de Bea Feitler était l’un des traits distinctifs de son travail et m’a attiré immédiatement. Pour ma prochaine création inspirée de Feitler, je compare un rouge foncé à un jaune vif et inverser les couleurs des deux côtés de la création.

 Gauche: Propagation de Harper’s Bazaar, août 1966. Photographie de Hiro. Direction artistique par Ruth Ansel et Bea Feitler. Droite: cette conception utilise CSS Grid et Flexbox.
Gauche: À partir du Harper’s Bazaar, août 1966. Photographie de Hiro. Direction artistique par Ruth Ansel et Bea Feitler. Droite: Cette conception utilise CSS Grid et Flexbox. ( Grand aperçu )

Bien que cette page soit grande en couleur, elle est également petite en balisage. J'ai besoin de deux éléments structurels seulement. un en-tête et principal . À l'intérieur des deux sont un chiffre et une division:

Les couleurs d'arrière-plan et de texte sont le point de départ de la mise en œuvre de ce dessin. Je peux tout laisser au flux normal:

 body {
couleur de fond: # ba0e37;
couleur: # f8d72e; }

principale {
couleur de fond: # f8d72e;
couleur: # 272732; }
 Je modifie la disposition d'une taille d'écran à l'autre tout en conservant une apparence constante.
Je modifie la disposition d'une taille d'écran à l'autre tout en conservant une apparence et une convivialité constantes. ( Grand aperçu )

Pour les écrans de taille moyenne, je souhaite que les figures et divisions à l’intérieur de ma tête et principale occupent la moitié de la hauteur et de la largeur de quelle que soit la fenêtre d'affichage, j'applique donc une grille symétrique à deux colonnes et une hauteur minimale:

 @media screen et (min-width: 48em) {
en-tête, principal {
affichage: grille;
Grille-modèle-colonnes: 1fr 1fr;
hauteur min .: 50vh; }
}

Je place le chiffre de l’en-tête dans la deuxième colonne et la division dans la première. Comme il s’agit de l’inverse de l’ordre du contenu, je dois attribuer les deux à la même ligne pour éviter que les colonnes ne tombent en dessous de l’autre:

 header figure {
grille-colonne: 2;

header div {
grille-colonne: 1;
rangée de grille: 1; }

La figure de l’élément principal et sa division suivent l’ordre du contenu. Je n’ai donc pas besoin de spécifier un rangée de grille pour eux:

 figure principale {
grille-colonne: 1;
align-self: fin; }
division principale {
grille-colonne: 2; }

Je souhaite remplir les écrans de couleur d'un bord à l'autre. Pour les écrans plus grands, j'applique une grille asymétrique à deux colonnes qui s'étend sur toute la hauteur de mon corps :

 @ media screen et (min-width: 64em) {
corps {
affichage: grille;
Grille-modèle-colonnes: 1fr 1fr;
hauteur min .: 100vh; }
}

Dans cette conception grand écran, la figure et sa division dans mon en-tête et principale s'empilent à la verticale et non à l'horizontale. Je modifie la propriété display de la grille en flex et fixe la direction à la colonne . Mais l'ordre visuel du main est opposé à son ordre de contenu. Je change donc sa direction de colonne en colonne-inverse:

 header, main {
affichage: flex;
direction de flexion: colonne; }

principale {
direction de flexion: inversion de colonne; }

Ensuite, pour améliorer la lisibilité de mon texte en cours, j'utilise une disposition multi-colonnes et spécifie une largeur de colonne de 18em . Un navigateur génère autant de colonnes de cette largeur que possible dans son élément parent:

 main div {
largeur de colonne: 18em;
écart de colonne: 2 vw; }

Les gros blocs de couleur unie peuvent être fatiguants pour l'œil. Je souhaite donc les décomposer en ajoutant un motif d'image d'arrière-plan répétitif et ludique au corps à l'aide de SVG:

 body {
background-image: url ("data: image / svg + xml"); }

Dans le SVG, je spécifie la couleur de remplissage et définit une opacité de remplissage faible pour un effet subtil:

 fill = '# f8d72e'
fill-opacity = '0.1'

J'applique la même image SVG sur le fond jaune de mon main en changeant cette fois sa couleur de remplissage en blanc et en augmentant l'opacité de remplissage :

 principale {
background-image: url ("data: image / svg + xml"); }

remplir = '# fff'
fill-opacity = '0.2'

Les motifs et les textures jouent un rôle important dans de nombreux magazines iconiques de Bea Feitler, mais ils n’ont pas la cote sur le Web. Ensuite, je vais vous montrer comment utiliser des modèles CSS et SVG qui ajouteront de la profondeur à vos conceptions.

Pattern And Texture ajoute de la profondeur

 À gauche: Spread from Vanity Fair. Droite: cette conception utilise des modes de fusion CSS, un chemin de clip et des motifs SVG.
Gauche: Spread from Vanity Fair. Droite: cette conception utilise des modes de fusion CSS, des chemins de clips et des modèles SVG. ( Grand aperçu )

Dans ce prochain dessin inspiré par Feitler, je veux transmettre les courbes du Volkswagen Beetle en utilisant des cercles. J'ai besoin d'un minimum de HTML pour implémenter ce design élégant, composé de trois éléments seulement; a header main et de côté :





Je ne veux pas que les en-têtes soient annoncés par les lecteurs d’écran, j’ajoute donc un attribut aria-hidden ayant une valeur de true . Je souhaite que les lecteurs d'écran décrivent mon en-tête de niveau supérieur, et j'y ajoute donc un attribut aria-labelledby .

Les points de style demi-ton ajoutent de la texture à cette page et permettent de mettre en œuvre facilement des motifs. comme ceci, en utilisant plusieurs dégradés de fond et des combinaisons de de taille d'arrière-plan et de de position d'arrière-plan :

 body {
couleur de fond: # ba0e37;
couleur: #fff;
image de fond:
gradient radial (rgba (255,255,255, .25) 15%, transparent 16%),
gradient radial (rgba (255,255,255, .25) 15%, transparent 16%);
taille du fond: 6vw 6w;
position de fond: 0 0, 3vw 3vw; }

Je diviserai ce style en trois étapes:

  1. Deux gradients radiaux, séparés par une virgule. Chaque dégradé comprend deux niveaux de couleur, le premier à 15% et le second à 16% formant les points.
  2. En utilisant des unités de largeur de fenêtre de visualisation pour dimensionner le motif obtenu, Je garde la taille du point proportionnelle à la largeur de la page.
  3. Positionnez le premier dégradé radial en haut à gauche de la fenêtre ( 0 0 ), et le second en utilisant des unités de largeur de la fenêtre qui correspondent à la moitié de la taille de l'arrière-plan.
 Quatre motifs d'image d'arrière-plan à dégradés linéaires et radiaux
Quatre motifs d'image d'arrière-plan à dégradés linéaires et radiaux. ( Grand aperçu )

Lea Verou a été occupée à compiler une galerie de motifs utiles qu'elle a développés à l'aide de gradients linéaires et radiaux. Aussi astucieuse que la galerie de Lea soit, il y a quelque chose à propos des dégradés compliqués utilisés pour produire des motifs en forme d'image qui me dérangent.

 Les motifs SVG de Hero Patterns de Steve Schoger. par Steve Schoger. (<a href= Grand aperçu )

Les motifs SVG semblent beaucoup plus appropriés. Ils sont tout aussi légers et beaucoup plus flexibles. Ajoutez SVG à une image d’arrière-plan à l’aide d’une adresse URL. Si vous êtes préoccupé par les requêtes HTTP, intégrez un SVG dans une feuille de style en tant que données: image :

 body {
background-image: url ("data: image / svg + xml"); }

Le côté de ce dessin comprend deux divisions qui contiennent chacune des images du fabuleux front de la Coccinelle. Je découpe ces divisions en cercles pour compléter ses courbes:

 apart div {
-webkit-clip-path: circle ();
clip-path: circle (); }
( Image agrandie )

En rendant les arrière-plans des images entièrement transparents, je peux changer la couleur de leurs divisions mères à tout moment. J'ajoute des couleurs d'arrière-plan légèrement transparentes qui permettent de faire apparaître les nuances du motif de points:

 apart div: first-child {
couleur de fond: rgba (57, 135, 106, 0,9); }

côté div: last-child {
couleur de fond: rgba (248,215,46, 0,9); }

Avec autant de couleurs et de textures dans cette conception, ma mise en page doit être simple. J'applique donc une grille asymétrique à deux colonnes, la colonne la plus étroite ne pouvant jamais descendre en dessous de 260px:

 @frame et (min-width) : 64em) {
corps {
affichage: grille;
Grille-modèle-colonnes: 4fr minmax (260px, 1fr); }
}

Pour améliorer l'accessibilité et la lisibilité de mes paragraphes de texte courant par rapport au motif rouge, j'ajoute une ombre portée subtile dans une couleur qui correspond à mon arrière-plan:

 p {
filtre: ombre portée (0 0 5px # ba0e37); }
 En réduisant l'opacité de mon en-tête à l'aide d'un filtre CSS, l'arrière-plan à motifs est visible.
En réduisant l'opacité de mon en-tête à l'aide d'un filtre CSS, l'arrière-plan à motifs est visible. (Large preview)

In the past, filtering a picture to apply a blur, color change, or drop shadow, required adding destructive effects in an image editor, but today, many of those same filters are available in CSS. You can apply filters to other HTML elements too.

Applying a CSS filter is straightforward. First, declare the filter-function and then a value in parentheses. To reduce an element’s opacity to 25% using a filter — instead of the opacity property — I use the opacity filter:

.ihatetimvandamme {
filter: opacity(.25); }

Those values differ with each filter. Some filters use degrees, accept use pixels, percentages, or their equivalent decimal. For example, .25 is equal to 25%and 1 is the equivalent of 100%.

There are ten stock CSS filters to choose from: blurbrightnesscontrastdrop-shadowgreyscalehue-rotateinvertopacitysaturateand sepia. You can also use the URL function to use a custom filter from SVG.

I want to remove all color from my header and reduce its opacity to 80%. I can combine any number of filters by separating them with a space. It’s important to remember that a browser will apply filters in the order they’re specified, so for my headercolor will be removed before opacity is altered:

header {
filter: grayscale(1) opacity(.8); }

When I need a smooth shift between CSS filters and values, I can add a transition between states, perhaps by increasing the opacity of my header for an :hover pseudo-class:

header {
filter: grayscale(1) opacity(.8);
transition: filter 1s linear; }

header:hover {
filter: grayscale(1) opacity(1); }

I can use CSS to develop a more elaborate animation between filters by first defining my keyframes, setting filter values at any percentage between 0 and 100% of the animation’s duration:

@keyframes beetle {
0% {
filter: grayscale(1) opacity(.8) blur(5px); }
50% {
filter: grayscale(1) opacity(1) blur(0); }
100% {
filter: grayscale(1) opacity(.8) blur(5px); }
}

I then assign this animation to my headerusing the animation-name plus values for animation-durationanimation-delayand other optional settings:

header:hover {
animation-name: beetle;
animation-delay: 0s;
animation-direction: alternate;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-timing-function: linear; }

Una Kravets recreated Instagram filter effects using CSS filters and blend-modes for her CSSgram library. Building on Una’s work, developer Indrashish Ghosh made cssFiltersa tool for granular control over those Instagram-style effects, applying them to an uploaded image, and generating CSS values. Tools like Indrashish’s make it as easy to use CSS filters as any image editor.

A reaction to overly ornamental designs, flat design has been the dominant aesthetic for almost a decade. As gradients, patterns, shadows, and three-dimensional skeuomorphism fell out of fashion, designers embraced solid colors, square corners, and sharp edges.

Anti-skeuomorphism no doubt helped designers focus on feature design and usability without the distraction of what some might still see as flourishes. But, reducing both product and website designs to a bare minimum has had unfortunate repercussions. With little to differentiate their designs, products and websites have adopted a regrettable uniformity which makes it difficult to distinguish between them.

While I’m not advocating a return to the worst excesses of skeuomorphism, I hope product and website designers will realize the value of a more vibrant approach to design; one which appreciates how design can distinguish a brand from its competition. A method which uses gradients, patterns, shadows appropriately to tell stories and provide greater affordance. This will make products and websites not only easier to use but more enjoyable too.

Develop With SVG Filters

Left: Spread from Harper’s Bazaar. Right: This design uses CSS Flexbox and Grid, and SVG filters.
Left: Spread from Harper’s Bazaar. Right: This design uses CSS Flexbox and Grid, and SVG filters. (Large preview)

For this final inspired design, I need just two structural elements; a header which contains six brightly colored Beetles, and a main for my text:

Normal flow takes care of most of this design for small screens, but that doesn’t mean there’s nothing to do. I would lose the impact of those colorful cars if I were to shrink them all to fit a small screen. I also don’t want people to scroll past all six before they see my content, so my solution is to line them up horizontally in a scrolling panel.

Flexbox is the obvious choice for arranging those images, but the default left-right order would mean showing the back of the final car, instead of the front of the first. This is easily solved by changing the flex-direction from the default row to row-reverse:

header {
display: flex;
direction: row-reverse;
largeur maximale: 100%;
overflow-x: scroll; }

I want all these cars to appear at the same size, so I use the flex-grow property and a value of 1. As I want to show the front of each car to indicate there’s more to see outside the viewport, I set the flex-basis value to 80%;

header div {
flex-grow: 1;
flex-grow: 0;
flex-basis: 80%;
/* flex: 1 0 80%; */  }

On medium-size screens, there’s space for a more elaborate layout for my collection of cars. For this design, I arrange my Beetles on an 8x12 modular grid, where each module is a 16:9 aspect ratio rectangle. The black Beetle furthest away from the viewer occupies a single module, and the cars appear progressively larger until the red Beetle in the foreground occupies the largest spacial zone.

Left: On small screens, I arrange my cars in a horizontally scrolling panel. Right: For medium screens, I place my Beetles on a modular grid. (Large preview)

To implement this modular grid, I apply Grid to my header element, followed by eight repeating evenly sized columns, and twelve rows which adapt to the minimum height of their content. By aligning the items to the endrather than the startof each row, the result looks more realistic:

@media screen and (min-width : 48em) {
header {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(12, min-content);
grid-row-gap: 10px;
align-items: end; }
}
Left: An 8x12 modular grid for medium screens. Right: I change the layout and proportions on large screens by switching to a 16x12 grid. (Large preview)

My next task is to place each Beetle onto the grid. I use a combination of child (>) and nth-child selectors to place each element using line numbers:

header > :nth-child(1) {
grid-column: 3 / -1;
grid-row: 10 / -1; }

header > :nth-of-type(2) {
grid-column: 3 / 7;
grid-row: 7 / 9; }

header > :nth-of-type(3) {
grid-column: 1 / 4;
grid-row: 5 / 7; }

header > :nth-of-type(4) {
grid-column: 2 / 4;
grid-row: 3; }

header > :nth-of-type(5) {
grid-column: 6 / 8;
grid-row: 2; }

header > :nth-of-type(6) {
grid-column: 3;
grid-row: 1; }

A design like this cries out for typographic details. Padding on the main element adds space around my running text, so to add interest to my type, I set column widths of 24emand a browser will automatically create the right number of columns to fit the viewport:

p {
column-width: 24em;
column-gap: 2vw; }

To add extra interest to my type, I combine a first-of-type pseudo-class selector with a first-line pseudo-element to transform that first line into uppercase letters:

p:first-of-type::first-line {
text-transform: uppercase; }

To implement my design for larger screens, I double the number of columns from eight to sixteen and reposition my images to the new line numbers:

@media screen and (min-width : 64em) {
header {
grid-template-columns: repeat(16, 1fr); }

header > :nth-child(1) {
grid-column: 8 / 15;
grid-row: 9 / 13; }

header > :nth-of-type(2) {
grid-column: 6 / 11;
grid-row: 5 / 8; }

header > :nth-of-type(3) {
grid-column: 1 / 5;
grid-row: 4 / 6; }

header > :nth-of-type(4) {
grid-column: 4 / 6;
grid-row: 3; }

header > :nth-of-type(5) {
grid-column: 11;
grid-row: 2; }

header > :nth-of-type(6) {
grid-column: 5;
grid-row: 1; }
}

Compared to today’s Beetle — which weighs almost 3000lbs — the Volkswagen Type 1 was a lightweight and speedy little car for its time. I’d like to create the impression these cars are speeding past the viewer by adding motion blur. Blurring an element using a CSS filter is straightforward:

header > div {
filter: blur(5px); }

This filter allows me to blur an element by any amount using several length values, including pixels which seem to me to be the most appropriate unit. But, CSS filters only allow me to blur an element using the same amount horizontally and vertically, much like an image editor’s Gaussian blur. To add realistic motion to my design, I need to swap CSS for an SVG filter.

Left: A uniform CSS blur filter with equal horizontal and vertical values. Right: Two gaussian blur values in SVG create a more realistic motion blur. (Large preview)

I cover just a small amount of detail about SVG filters in this issue, but SVG expert Sara Soueidan has written about them extensively. Start with Sara’s SVG Filters 101 tutorial.

While its ten stock filters are a relatively recent addition to CSS, their history goes way back to their SVG origins. Filters in SVG offer far greater flexibility with six more filters available and incredible customization possibilities. Whereas CSS blur allows just one value for both horizontal and vertical axes (X/Y,) in SVG I can use two values; one for the X-axis, the other for Y.

In SVG, every filter has its own identity, so to blur to an HTML element, reference its ID using the URL value in the filter property from a stylesheet:

.blur {
filter: url(#blur); }

Filters have their own element in SVG, it’s the filter element. Even though a filter won’t be visible in a browser, giving SVG a height of 0 will ensure it takes up no space:




Each SVG filter primitive has its own name which is prefixed by fe, an abbreviation of “filter effect.” Unsurprisingly, the name for a blur is feGaussianBlur. The amount of blur is applied as a stdDeviation using either one uniform value or two separate values for horizontal and vertical. To reproduce the previous uniform 5px Gaussian blur in SVG, I add one value:




I’m looking for a more realistic motion effect where the image is blurred on just the horizontal axis. I apply blur to only the X-axis, leaving the Y-axis at zero:




Now my car is speeding across the viewport, but when you look more closely. the result isn’t altogether realistic. That’s because the edges of my blurred elements are clipped by the bounding box. This is the rectangle which surrounds every element.

Left: The bounding box clips the blurred edges. Right: Increasing the filter region shows the whole blurred image. (Large preview)

To make the entire filter effect visible, I need to increase the size of my filter region using xywidthand height values. I use negative values of -10% on both horizontal and vertical axes, then increase the width and height to 120% which allows more visible space for my images’ blurred edges:


When you watch cars speeding past, or you look out of a moving train window, objects closest to you appear to move faster than those further away. To make my design seem more realistic, I need a different set of blur values for objects in the foreground, middle ground, and background.

Foreground elements like the closet red Beetle need the highest amount of horizontal blur. I give this filter an identity of blur-foreground:




Then, Beetles in the middle ground receive a slightly lower stdDeviation of 10:




Finally, objects in the background receive the least blurring. I give this filter an identity of blur-background so I can apply it in my stylesheet:




With all my filters specified, in my stylesheet I apply them to Beetles in the foreground, middle ground, and background:








.blur-foreground { filter: url(#blur-foreground); }
.blur-medium { filter: url(#blur-medium); }
.blur-background { filter: url(#blur-background); }

My set of six colorful Beetles are now racing across the viewport and my final Feitler-inspired design is a winner too.

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

  1. Inspired Design Decisions: Avaunt Magazine
  2. Inspired Design Decisions: Pressing Matters
  3. Inspired Design Decisions: Ernest Journal
  4. Inspired Design Decisions: Alexey Brodovitch
Smashing Editorial(vf, ra, yk, il)




Source link