Des décisions de design inspirées avec Giovanni Pintori : la publicité devient une forme d'art

À une ou deux exceptions près, j'ai passé les vingt-deux dernières années à concevoir pour d'innombrables clients. Quelques-uns de ces projets ont duré un an, certains plusieurs mois, mais la majorité pas plus de quelques semaines.

Être complètement absorbé pendant quelques semaines ou quelques mois dans la conception d'une interface de produit ou d'un site Web peut être un frisson. Cela commence souvent par la gratification qui vient de gagner le travail. Gagner la confiance d'un nouveau client peut créer une dépendance. Au cours de la phase séduisante de « apprendre à vous connaître », vous apprenez à connaître le client et ce qu'il attend de vous et de votre travail. Les personnalités addictives comme la mienne aspirent à l'intensité de ces sentiments, mais - tout comme certaines relations - l'excitation initiale s'estompe rapidement dans les réalités de travailler ensemble.

Cette promiscuité créative a très bien convenu à ma capacité d'attention souvent courte et à ma curiosité agitée. Mais, il y a eu des moments où j'aurais aimé pouvoir rester plus longtemps avec une organisation, mieux la connaître et avoir une influence positive sur ce qu'elle fait et fait.

Je connais de nombreux designers qui travaillent en interne. Bien que je n'envie jamais leur trajet ou l'argent qu'ils dépensent pour vivre à proximité du travail, il y a une partie de moi qui envie leur capacité à rester et à façonner la direction créative à long terme d'une entreprise de la manière dont Giovanni Pintori a aidé Olivetti.

« De nos jours, la publicité est devenue une forme d'art et doit de plus en plus être à la hauteur de ce nom. La publicité est une forme de discours qui devrait éviter l'imprécision au profit de la brièveté, de la clarté et de la persuasion. Ceux qui font de la publicité (écrivains, peintres, architectes) ont besoin de logique et d'imagination dans une égale mesure.

—Giovanni Pintori

Le designer italien Giovanni Pintori a travaillé pour le fabricant de produits commerciaux Olivetti pendant plus de 31 ans. Pendant ce temps, son style s'est développé dans le vocabulaire de conception unique de l'entreprise. L'attrait de travailler avec une entreprise pendant plus de quelques mois est devenu plus fort à mesure que je vieillissais. Au cours des 18 derniers mois, j'ai consacré la majeure partie de mon temps à travailler avec une entreprise suisse de cybersécurité, basée non loin de Milan et où Giovanni Pintori a élu domicile.

Comme Olivetti, cette entreprise valorise le design sous toutes ses formes. Bien que ma priorité absolue soit la conception des produits de l'entreprise, j'ai également eu l'occasion d'influencer leur marque, leur marketing et leur direction créative globale.

Je consacre encore du temps aux projets des autres lorsque le travail m'attire, mais j'ai appris à quel point une relation client à long terme peut être gratifiante. Je suis heureux et plus satisfait sur le plan créatif que je ne l'ai été depuis des années. De plus, à mesure que la vieillesse me rattrape, je n'ai plus l'énergie de poursuivre tous les projets attrayants comme je le faisais auparavant.

Inspiré par Giovanni Pintori

Né en Sardaigne en 1912, Giovanni Pintori est devenu l'un des graphistes européens les plus influents du XXe siècle. Il est devenu connu pour le style distinctif qu'il a façonné dans le langage du design d'Olivetti pendant plus de 30 ans.

Pintori a étudié le design à l'influent italien L'Istituto Superiore per le Industrie Artistiche (Institut supérieur des industries artistiques) où il a été entouré par les arts créatifs. L'ISIA était une école progressiste où les étudiants étudiaient la céramique, la peinture, le travail du métal et le travail du bois.

Pendant ses études à l'ISIA, Pintori rencontre Renato Zveteremich, directeur de la publicité et publiciste qui dirigeait le service de publicité d'Olivetti dans les années 1930. Après avoir obtenu son diplôme de HIAI, Pintori a rejoint Olivetti pour travailler sous Zveteremich et est devenu le directeur artistique de l'entreprise en 1950.

Olivetti fabriquait des machines de bureau, notamment sa gamme de machines à écrire. Lorsque Pintori a rejoint Olivetti, l'entreprise était déjà connue pour ses conceptions de produits originales. Ses produits étaient immédiatement reconnaissables et, sous la direction du designer industriel Marcello Nizzoli, chaque détail de leurs conceptions, de la forme d'une barre d'espace à la couleur de leurs enveloppes extérieures, a été soigneusement étudié.

« Si les artistes sont appelés à interpréter, exprimer et défendre la pureté fonctionnelle d'une machine, c'est bien le signe que la machine est entrée dans l'esprit humain et que le problème des formes et des relations est encore de nature intuitive.

— Renato Zveteremich

Mais la préoccupation d'Olivetti pour le design ne s'est pas arrêtée avec ses produits. La créativité était un élément essentiel de la culture de l'entreprise, qui se manifestait de l'architecture de ses usines et de ses bureaux à sa publicité et à la conception graphique utilisée pour promouvoir ses produits.

Au cours de ses 30 ans de carrière chez Olivetti, Pintori a conçu la publicité, les brochures et même les calendriers annuels de l'entreprise. Le style esthétique de Pintori était audacieux et confiant. Il a utilisé des couleurs vives à partir de palettes de couleurs minimales et les a combinées avec des formes pour remplir ses créations d'énergie.

Mais le travail de Pintori n'était pas seulement ludique, il était réfléchi. Son choix de formes n'était pas abstrait. Les formes ont suggéré les avantages d'utiliser un produit plutôt que de décrire littéralement ses caractéristiques. Pintori ne s'est pas contenté d'illustrer des produits, il leur a donné vie à travers ses créations en suggérant comment ils pourraient être utilisés et ce qu'ils pourraient faire pour améliorer la vie et le travail des gens.

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

Pintori a défini l'image d'Olivetti bien au-delà de son temps dans l'entreprise, et il a continué à travailler sur des projets avec eux après son départ en 1967. Il a créé son propre studio à Milan, où il a travaillé comme designer indépendant, avant de prendre sa retraite et de se consacrer à la peinture.

Giovanni Pintori est mort à Milan en 1999, et il y a un livre, Pintori de Marta Sironi et édité par Moleskine qui répertorie son étonnante carrière.

Le travail de Pintori inspire non seulement par l'audace de ses formes colorées, mais aussi par ce qu'elles représentent. Pintori a compris que la promotion d'un produit nécessitait plus que la liste de ses caractéristiques. La publicité doit raconter une histoire qui résonne auprès des clients, et c'est une leçon dont nous devrions tous nous inspirer.

Création de palettes de couleurs

Les couleurs que nous choisissons doivent raconter une histoire sur une entreprise, un produit ou un service aussi éloquemment que notre mise en page ou notre typographie. Nos choix de couleurs peuvent attirer l'attention de quelqu'un, influencer sa perception de ce que nous faisons et même stimuler des émotions. La couleur joue un rôle essentiel pour rendre un produit ou un site Web facile et intuitif à utiliser. En plus des couleurs de la marque, les palettes de couleurs pour le Web aident les gens à naviguer, leur font savoir sur quoi ils peuvent appuyer et où ils sont allés.

J'aime garder mes couleurs simples, et mes palettes contiennent rarement plus de trois teintes ; une couleur dominante, secondaire ou de soutien, et un accent. À ceux-ci, j'ajoute une petite sélection de couleurs neutres à utiliser comme arrière-plans, bordures et texte.

Pour ajouter de la profondeur à mes créations - et pour me donner une plus grande flexibilité - j'introduis également des nuances et des teintes de chacune de mes teintes. J'utilise des nuances plus foncées pour les bordures - par exemple - autour des boutons - et des teintes plus claires pour ajouter des reflets.

Depuis que les modes sombres du système d'exploitation sont devenus plus répandus, je modifie également subtilement la luminosité et la saturation des couleurs dans mes palettes, afin qu'elles apparaissent plus éclatantes sur des arrière-plans sombres.

Utilisation des couleurs primaires

Le code HTML nécessaire pour implémenter mon premier design inspiré de Pintori est significatif et simple comme le design lui-même. J'ai besoin de seulement quatre éléments structurels; un en-tête qui contient deux SVG du profil emblématique de Morris Traveller, l'élément principal de mon texte courant, un SVG du devant du Traveller, et enfin un pied de page qui contient le logo de la société Morris Motors :

 <header> <svg>…</svg> <svg>…</svg> </header> <main> <h1>…</h1> <p>…</p> </main> <figure> <svg>…</svg> </figure> <footer> <svg>…</svg> </footer>

Alors que les fichiers SVG externes seront mis en cache et prêts à être rendus, j'intègre maintenant SVG dans mon HTML chaque fois que possible. Moins de fichiers externes signifie moins de requêtes HTTP, mais les avantages de l'intégration vont bien au-delà des performances.

Des changements subtils dans la saturation des couleurs et la luminosité entre les thèmes clairs et les modes sombres sont souvent nécessaires pour maintenir le caractère percutant des éléments de conception par rapport aux couleurs d'arrière-plan contrastées. Lorsqu'un SVG est intégré dans HTML, ses remplissages et traits peuvent être subtilement modifiés à l'aide de CSS.

Je commence par appliquer des styles de base de couleur et de typographie pour la version sombre distinguée de mon design. Il s'agit notamment de Moderna Sans, une police de caractères sans empattement polyvalente conçue par Luciano Vergara et Alfonso Garcia que j'ai choisie pour évoquer le style du travail de Pintori pour Olivetti :

 body { padding: 2rem; background-color: #262626; font-family: "moderna_sans-light"; color: #fff; } h1 { font-family: "moderna_sans-bold-cnd-it"; font-size: 2.8rem; font-weight: normal; line-height: 1; }

Flexbox transforme mon en-tête en un panneau à défilement horizontal, l'un des moyens les plus efficaces de maintenir la hiérarchie visuelle dans une conception de petit écran :

 header { display: flex; flex-wrap: nowrap; overflow-x: scroll; }

La propriété flex-grow avec sa valeur de 1 garantit que toutes les images s'agrandissent pour remplir tout l'espace disponible, tandis que flex-basis s'assure que ces éléments flexibles commencent à partir d'un minimum de 640px ;

 header svg { flex-grow: 1; flex-basis: 640px; } header svg:not(:last-of-type) { margin-right: 2rem; }

Enfin, j'ajoute de grandes quantités de rembourrage horizontal et j'aligne le logo Morris au centre de mon pied de page :

 footer { padding-right: 8rem; padding-left: 8rem; text-align: center; }

Mon panneau de défilement horizontal ajoute de l'intérêt à un petit écran, mais l'espace supplémentaire disponible sur les écrans de taille moyenne me permet de montrer davantage de mes voyageurs typiquement anglais.

CSS Grid offre le placement et l'empilement précis des éléments qui manquent à Flexbox et est le choix parfait pour cet en-tête sur des écrans moyens à grands. Je modifie la valeur de la propriété display de flex à grid, puis j'ajoute trois colonnes et lignes symétriques.

Alors que la largeur des deux colonnes extérieures est fixée à 270px, la colonne intérieure s'agrandit pour remplir tout l'espace restant. J'utilise une technique similaire pour les trois rangées, en fixant les deux extérieures à une hauteur de 100px. Cela compense la position des deux images et ajoute de la profondeur à cette conception :

 header { display: grid; grid-template-columns: 270px 1fr 270px; grid-template-rows: 100px 1fr 100px; }

À l'aide de sélecteurs de pseudo-classes et de numéros de ligne, je place le premier SVG, puis le réduis en taille pour ajouter de la perspective :

 header svg:first-of-type { grid-column: 2 / 4; grid-row: 1 / 2; transform: scale(.85); }

Ensuite, je place le deuxième de mes deux graphiques. Je l'élève dans l'ordre d'empilement en ajoutant une valeur d'index z plus élevée qui le rapproche visuellement du spectateur :

 header svg:last-of-type { grid-column: 1 / 3; grid-row: 2 / 4; z-index: 2; }

Même une grille à proportions égales apparemment banale peut donner lieu à une mise en page originale lorsqu'une conception comprend beaucoup d'espaces blancs pour aider à guider l'œil. Pour cette conception de taille moyenne, j'applique une grille symétrique à six colonnes avec des valeurs d'écart de colonnes et de lignes proportionnelles à la largeur et à la hauteur d'un écran :

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

Mon élément d'en-tête remplit toute la largeur de ma grille. Ensuite, je place les éléments principaux, figure et pied de page, en ajoutant proportionnellement plus d'espace blanc pour réduire la largeur de ma figure et de mon pied de page :

 header { grid-column: 1 / -1; } main { grid-column: 2 / 6; } figure { grid-column: 3 / 5; } footer { grid-column: 3 / 5; padding-right: 4rem; padding-left: 4rem; }

Ce design devient plus distingué avec l'espace disponible sur les grands écrans.

Pour eux, j'applique des valeurs de grille à l'élément body pour créer les huit colonnes d'une grille composée 6+4 :

 @media (min-width: 64em) { body { grid-template-columns: 2fr 1fr 1fr 2fr 2fr 1fr 1fr 2fr; } }

Baser ma conception de taille moyenne sur six colonnes, puis inclure la même grille dans mon grand écran composé, aide à maintenir les proportions dans toutes les tailles de ma conception. Ensuite, je repositionne les quatre éléments structurels sur ma nouvelle grille :

 header { grid-column: 1 / 8; } main { grid-column: 2 / 5; text-align: right; } figure { grid-column: 5 / 7; } footer { grid-column: 4; padding: 0; }

Enfin, pour créer un bloc de contenu solide au centre de ma conception, je lie le contenu principal à sa figure désormais adjacente en réalignant son texte vers la droite :

 main { text-align: right; } 

Palettes monochromes

Même après plus de vingt ans dans le métier, je trouve toujours que travailler avec la couleur est l'aspect le plus difficile du design. C'est peut-être pour cette raison que je me tourne si souvent vers les schémas de couleurs monochromes, car ils permettent d'obtenir un aspect visuellement cohérent assez simple.

Les palettes de couleurs monochromes contiennent des variations de nuances, de teintes et de tons, en ajoutant des pourcentages variables de noir, de gris ou de blanc à une couleur de base choisie.

• Nuances : Assombrir la couleur avec du noir
• Teintes : éclaircir la couleur avec du blanc
• Tons : Désaturer la couleur avec du gris

Lorsqu'elles sont utilisées pour les arrière-plans, les bordures et les détails, les nuances et les teintes peuvent rendre un design harmonieux.

L'utilisation de nuances, de teintes et de tons peut aider à atténuer les couleurs vives qui pourraient attirer l'attention indésirable sur des aspects d'un design. Ils sont particulièrement utiles lors du développement d'une palette de couleurs plus variée à partir d'un ensemble de couleurs de marque existantes.

Je choisis souvent une palette purement monochromatique ou partiellement monochromatique qui comprend une couleur d'accent. Cette couleur ajoutée agit comme un contrepoint à la couleur de base et donne une plus grande profondeur à un design.

Limiter la palette

Grâce à la grille CSS, aux dégradés d'image d'arrière-plan et aux pseudo-éléments, cette prochaine conception inspirée de Pintori atteint une valeur énorme à partir d'un très petit ensemble d'éléments HTML. Je n'ai besoin que d'un titre, d'un seul paragraphe et de sept divisions vides. Je donne à chaque division sa propre identité. Cela me permet de leur donner leur propre style distinctif :

 <h1>…</h1> <p>…</p> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>

Ce HTML place le titre et le paragraphe avant les sept panneaux, mais regardez attentivement la conception finale du petit écran, et vous verrez que ce contenu a été réorganisé pour placer le logo Morris, puis une image de l'avant du voyageur en haut .

Alors que j'introduis souvent des propriétés de grille sur des écrans moyens et grands, CSS Grid est également utile pour réorganiser le contenu sur des écrans plus petits. Pour cette conception, je change la valeur d'affichage de l'élément body en grille, puis j'introduis un écart basé sur la hauteur de la fenêtre entre les lignes intrinsèques non spécifiées :

 body { display: grid; row-gap: 2vh; }

Ensuite, je réorganise les panneaux qui contiennent mon logo et mon image Morris Motors, ainsi que le titre, en utilisant les numéros de ligne :

 #panel-d { grid-row: 1; } #panel-e { grid-row: 2; } h1 { grid-row: 3; }

Parce que mes divisions de panneau n'ont pas d'autres éléments, leur hauteur s'effondrera à zéro, ne laissant que leurs bordures. Pour s'assurer qu'il y a de l'espace pour afficher leurs arrière-plans et leur contenu générés, je spécifie une hauteur minimale pour tous les panneaux :

 [id*="panel"] { min-height: 380px; }

Le panneau qui apparaît en premier dans la conception de mon petit écran montre le logo Morris Motors, que j'insère à l'aide d'un URI de données de contenu généré par CSS. Si vous n'êtes pas familier avec ce type de contenu pratique, un URI de données est un fichier qui a été encodé dans une chaîne. Vous pouvez utiliser un URI de données n'importe où dans votre CSS ou HTML :

 <img src="data:image/png…"> <img src="data:image/svg+xml…">

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

Lorsqu'un navigateur trouve un URI de données, il décode le contenu et reconstruit le fichier d'origine. Les URI de données ne se limitent pas aux images encodées, mais sont fréquemment utilisées pour encoder des images au format PNG et des SVG. Vous trouverez plusieurs outils pour convertir des images en URI de données en ligne.

Tout d'abord, je modifie la hauteur minimale de ce panneau pour qu'elle corresponde à la hauteur de mon logo, puis j'insère le logo :

 #panel-d { min-height: 90px; text-align: center; } #panel-d:before { content: url("data:image/svg+xml…"); display: block; width: 135px; height: 90px; margin: 0 auto; }

J'utilise une technique similaire pour placer une image d'arrière-plan derrière mon paragraphe. J'ajoute des propriétés de répétition, de position et de taille qui rendent l'arrière-plan flexible et le placent toujours au centre horizontal et vertical de mon paragraphe :

 p { background-image: url("data:image/svg+xml…"); } p { background-repeat: no-repeat; background-position: 50% 50%; background-size: 50% 50%; } 

Chacun de mes panneaux a sa propre conception graphique distinctive. J'aurais pu placer des images dans ces sept panneaux, mais cela aurait nécessité au moins sept requêtes HTTP supplémentaires. Donc, à la place, j'utilise diverses combinaisons de plusieurs images d'arrière-plan en utilisant des URI de données et des dégradés CSS pour obtenir les résultats dont j'ai besoin.

Le premier panneau contient un graphique du chapeau de moyeu de Morris sur un fond rayé bleu, blanc et noir. L'image d'arrière-plan de l'enjoliveur provient d'un URI de données :

 #panel-a { background-image: url("data:image/svg+xml…"); }

Ensuite, j'ajoute la deuxième image d'arrière-plan rayée en utilisant un dégradé linéaire :

 #panel-a { background-image: url("data:image/svg+xml…"), linear-gradient( to bottom, #34749F, #34749F 65px, #fff 65px, #fff 80px, #262626 80px); }

Je spécifie deux ensembles de valeurs de répétition, de position et de taille séparées par des virgules, en me souvenant de les conserver dans le même ordre que mes images d'arrière-plan :

 #panel-a { background-repeat: no-repeat, repeat-x; background-position: 50% 100%, 0 0; background-size: 75% 75%, auto auto; }

Ce panneau suivant comprend deux images SVG, suivies de bandes noires, jaunes et blanches plus complexes. En plaçant des arrêts de couleur avec des couleurs différentes à la même position dans mon dégradé, je crée un fond rayé avec des lignes dures entre mes couleurs :

 #panel-b { background-image: url("data:image/svg+xml…"), url("data:image/svg+xml…"), linear-gradient( to bottom, #B5964D, #B5964D 125px, #262626 125px, #262626 140px, #fff 140px, #fff 155px, #262626 155px); } #panel-b { background-repeat: no-repeat, no-repeat, repeat-x; background-position: 50% 45px, 50% 190px, 0 0; background-size: 90%, 90%, auto; }

J'ai développé chacun de mes panneaux en utilisant différentes combinaisons de ces mêmes techniques, ce qui les rend rapides à charger et flexibles. Il est rare de trouver des conceptions en ligne basées sur une grille modulaire, mais c'est le choix parfait pour cette conception grand écran inspirée de Pintori. Cette grille modulaire est composée de trois colonnes et rangées.

J'ajoute des propriétés de grille à l'élément body, puis je spécifie la largeur de mes colonnes pour remplir tout l'espace disponible. Pour m'assurer qu'il y a toujours assez de hauteur pour afficher le contenu de chaque panneau, j'utilise la valeur minmax de Grid, en fixant la hauteur minimale à 300px et la maximale à 1fr :

 @media (min-width: 64em) { body { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: repeat(3, minmax(300px, 1fr)); gap: 1rem; min-height: 100vh; } }

Les éléments de cette conception ne se chevauchent pas, j'utilise donc des zones de modèle de grille pour leur simplicité. Cette conception a neuf zones de grille, et je donne à chacune un nom de lettre unique, a–h. Comme la lettre d est utilisée pour deux zones adjacentes, l'élément placé à l'aide de cette lettre occupera à la fois :

 body { grid-template-areas: "abc" "dde" "fgh"; }

Dans cette implémentation grand écran, la valeur CSS Grid minmax contrôle la hauteur de mes lignes, rendant redondante la hauteur min que j'ai appliquée précédemment :

 [id*="panel"] { min-height: none; }

Je place mes panneaux en utilisant des noms de zone, ce qui me permet de changer leur emplacement dans ma mise en page sans modifier leur position dans mon HTML :

 #panel-a { grid-area: a; } #panel-b { grid-area: b; } #panel-c { grid-area: c; } #panel-d { grid-area: d; } #panel-e { grid-area: e; } #panel-f { grid-area: f; } #panel-g { grid-area: g; } p { grid-area: h; }

Bien que la conception de mes panneaux reste cohérente sur toutes les tailles d'écran, il existe un panneau où le contenu et les arrière-plans changent pour les écrans plus grands. Ce panneau contient le logo familier de Morris et ce qui semble être le titre principal, "Style... en GRAND".

Pour développer ce panneau, j'ajoute d'abord une bordure pleine profonde en haut, suivie d'une image d'arrière-plan URI de données :

 #panel-d { border-top: 15px solid #262626; background-image: url("data:image/svg+xml…"); }

Ensuite, j'ajoute une deuxième image de fond dégradée qui crée le panneau noir et deux bandes jaunes verticales :

 #panel-d { background-image: url("data:image/svg+xml…"), linear-gradient( to right, #fff, #fff 280px, #B5964D 280px, #B5964D 320px, #fff 320px, #fff 335px, #262626 335px, #262626 calc(100% - 40px), #F2C867 calc(100% - 40px), #F2C867 100%); }

Plus tôt dans mon processus, j'ai utilisé un pseudo-élément :before pour ajouter le logo Morris à cette conception. Pour les grands écrans, je repositionne ce logo en bas à gauche de mon panneau :

 #panel-d position: relative; } #panel-d:before { position: absolute; bottom: 0; left: 0; margin: 0; }

Mon grand titre descend immédiatement du corps HTML et ne fait pas partie de ce panneau, ce qui le rend difficile à positionner sur des tailles d'écran flexibles. Pour reproduire précisément mon design, sans compromettre l'accessibilité, j'utilise d'abord une méthode accessible pour masquer visuellement ce titre pour les personnes qui utilisent des lecteurs d'écran :

 h1 { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

Ensuite, je rétablis le texte du titre en utilisant le contenu généré et un pseudo-élément :after. Je le positionne en bas à droite de mon panneau et reproduis son style gras, condensé et italique :

 #panel-d:after { content: "Style… in a BIG way"; position: absolute; bottom: 0; right: 0; font-family: "moderna_sans-bold-cnd-it"; font-size: 2.8rem; line-height: 1; text-align: right; } 

Palettes complémentaires

Les couleurs qui se complètent se trouvent sur les côtés opposés d'une roue chromatique. Mais, bien qu'il soit facile de comprendre leur relation mathématique, travailler avec des couleurs complémentaires peut être difficile.

Les combinaisons de couleurs complémentaires adjacentes peuvent sembler dures et, au lieu de se compléter, peuvent sembler peu harmonieuses. Pour éviter qu'ils ne s'entrechoquent, utilisez des nuances, des teintes ou des tons de couleurs complémentaires qui contribueront également à élargir votre palette de couleurs utilisables.

Vous pouvez également utiliser des couleurs complémentaires divisées où, au lieu de couleurs opposées, la palette comprend deux couleurs de chaque côté de la complémentaire.

Couleurs complémentaires

Plusieurs plans colorés complémentaires de Morris Traveler se chevauchent dans mon prochain design inspiré de Pintori. Le code HTML nécessaire pour développer ce design est aussi minime que les représentations de cette voiture. Une division de bannière comprend un SVG du logo Morris, et l'élément principal contient le titre et le texte courant.

Mais la flexibilité de cette conception sur plusieurs tailles d'écran provient de l'utilisation de deux éléments d'image, chacun contenant trois images. J'inclus un élément d'image dans l'en-tête, puis un autre dans mon pied de page :

 <div class="banner"> <svg>…</svg> </div> <header> <picture> <source media="(min-width: 72em)"> <source media="(min-width: 48em)"> <img> </picture> </header> <main> <h1><b>…</b></h1> <p>…</p> </main> <footer> <picture> <source media="(min-width: 72em)"> <source media="(min-width: 48em)"> <img> </picture> </footer>

Chacun de mes projets de développement commence par ajouter les styles de base désormais familiers, en ajoutant cette fois une couleur d'arrière-plan blanc cassé et un texte sans empattement presque noir :

 body { background-color: #f3f2f2; font-family: "moderna_sans-light"; color: #262626; }

J'aligne le contenu de ma division de bannière au centre, puis je règle la largeur maximale du logo sur un petit 150px :

 .banner { text-align: center; } .banner svg { max-width: 150px; }

Le titre principal de cette conception est défini dans le style audacieux, condensé et italique de Moderna Sans :

 h1 { font-family: "moderna_sans-bold-cnd-it"; font-size: 2.027rem; font-weight: normal; line-height: 1.2; }

Une partie de ce titre est enfermée dans un élément span qui me permet de changer sa couleur pour correspondre à d'autres aspects de cette conception, y compris l'emblème du taureau au centre du logo Morris Motors :

 h1 span { color: #df4561; } #logo .emblem { fill: #df4561; }

Sur les petits écrans, l'en-tête et le pied de page contiennent une seule image Traveler. Lorsqu'il y a de la place pour placer deux voyageurs côte à côte, un navigateur modifie les images dans les deux éléments d'image.

Pour les écrans de taille moyenne, j'utilise l'espace supplémentaire disponible et j'introduis une grille symétrique à quatre colonnes :

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

Je place la division de la bannière dans les deux colonnes centrales, centre mon logo, puis le décale verticalement pour qu'il tienne entre les pare-chocs de mes deux voyageurs :

 .banner { grid-column: 2 / 4; text-align: center; transform: translateY(2vh); }

Mon en-tête et mon pied de page couvrent la grille d'un bord à l'autre, tandis que le fait de placer le contenu principal dans les deux colonnes centrales crée une mesure confortable :

 header, footer { grid-column: 1 / -1; } main { grid-column: 2 / 4; }

Les modifications les plus importantes apportées à la mise en page de cette conception peuvent être observées sur des tailles d'écran plus grandes. Malgré leurs noms, vous n'avez pas besoin de placer un élément d'en-tête ou de pied de page en haut et en bas d'une mise en page. Ils peuvent être placés n'importe où dans un dessin, y compris à gauche ou à droite.

Pour un contrôle plus précis de ma mise en page, j'augmente le nombre de colonnes dans ma grille de quatre à huit, puis j'introduis deux lignes. La première ligne a une hauteur fixe de 160px, tandis que la hauteur de la seconde sera dictée par le contenu :

 @media (min-width: 72em) { body { grid-template-columns: repeat(8, 1fr); grid-template-rows: 160px auto; column-gap: 2vw; } }

Je repositionne ma division de bannière sur trois colonnes et je définis l'élément principal ci-dessous pour qu'il corresponde :

 .banner, main { grid-column: 3 / 5; }

Ensuite, je place le pied de page dans les trois premières colonnes et l'en-tête dans les quatre dernières pour créer une mise en page asymétrique à partir de la grille symétrique :

 header { grid-column: 5 / -1; } footer { grid-column: 1 / 4; }

L'en-tête et le pied de page remplissent la hauteur de ma grille de haut en bas :

 header, footer { grid-row: 1 / 3; }

Alors que la division de la bannière occupe la première rangée :

 .banner { grid-row: 1; }

Et l'élément principal s'intègre parfaitement en dessous :

 main { grid-row: 2 / 3; z-index: 2; }

La mise en œuvre de thèmes clairs et de conceptions sombres fait désormais partie de la conception quotidienne de produits et de sites Web depuis qu'Apple a introduit un mode sombre sur iOS et macOS. Développer des modes sombre/clair est facile, et il existe désormais une requête multimédia largement prise en charge pour cette préférence utilisateur. Vous avez le choix entre trois valeurs :

• no-preference : Quelqu'un n'a pas exprimé de préférence
• light : Quelqu'un a sélectionné un thème de lumière
• dark : Quelqu'un a choisi un thème sombre

L'introduction d'une version en mode sombre de cette conception implique un peu plus que l'ajout de modifications à certaines valeurs de couleur dans cette requête multimédia. Par exemple, en inversant les couleurs du texte d'arrière-plan et de premier plan et en modifiant les couleurs de remplissage du chemin dans mon logo SVG :

 @media (prefers-color-scheme: dark) { body { background-color: #262626; color: #fff; } #logo .metal, #logo .emblem { fill: #fff; } }

Décider des couleurs du mode sombre implique parfois plus que de simplement les inverser, en rendant les arrière-plans blancs noirs et le texte noir blanc. Un texte blanc pur sur fond noir complet rend la lecture de longs passages de texte fatigante pour les yeux, pensez donc à adoucir ce contraste en utilisant un blanc cassé :

 body { color: #f3f2f2; }

Parfois, même des couleurs complémentaires vibrantes peuvent apparaître différentes lorsqu'elles sont placées sur un fond sombre. Heureusement, les filtres CSS peuvent augmenter la luminosité, la saturation ou les deux d'une couleur, sans avoir besoin d'exporter une version différente d'un fichier pour les arrière-plans plus sombres :

 header img, footer img { filter: saturate(1.5) brightness(1.1); } 

Couleurs éclaircissantes

Dans mon design final inspiré de Pintori, des rectangles colorés flottent au-dessus du fond gris foncé. Cette conception ne nécessite que trois éléments structurels ; un en-tête qui comprend à nouveau le logo Morris Motors, un élément de figure qui contient non pas une, pas deux, mais trois images de contour du Morris Traveller, et l'élément principal contenant mon texte courant :

 <header> <svg>…</svg> </header> <figure> <img> <img> <img> </figure> <main> <h1>…</h1> <p>…</p> <p>…</p> </main>

A ce HTML minimal, j'ajoute quatre images SVG purement de présentation. Comme je ne veux pas que ceux-ci soient annoncés par les technologies d'assistance, j'ajoute un attribut masqué ARIA à chacun d'eux :

 <svg aria-hidden="true">…</svg> <svg aria-hidden="true">…</svg> <svg aria-hidden="true">…</svg> <svg aria-hidden="true">…</svg>

Tout d'abord, je spécifie les styles de base pour les couleurs d'arrière-plan et de premier plan, puis j'applique ces mêmes images SVG de présentation à l'arrière-plan à l'aide d'URI de données :

 body { background-color: #262626; } background-image: url("data:image/svg+xml…"), url("data:image/svg+xml…"), url("data:image/svg+xml…"), url("data:image/svg+xml…"); color: #f3f2f2; }

Ensuite, je spécifie les valeurs de répétition et de position de l'arrière-plan, en plaçant chaque SVG au centre et en les empilant verticalement sur la page. Enfin, j'ai défini leurs tailles:

 body { background-repeat: no-repeat; background-position: 50% 20px, 50% 240px, 50% 460px, 50% 680px; background-size: 200px 200px, 300px 200px, 200px 200px, 100px 100px; }

Ainsi, le logo dans mon en-tête correspond à la taille de l'arrière-plan SVG derrière lui, je limite sa largeur maximale, puis le centre en utilisant des marges horizontales :

 header { max-width: 200px; margin: 0 auto; }

Encore une fois, un panneau de défilement horizontal est un moyen utile de présenter mes trois images de voyageurs décrites, j'ai donc défini la valeur d'affichage de leur figure sur flex et empêché tout débordement horizontal en définissant sa valeur sur scroll :

 figure { display: flex; flex-wrap: nowrap; margin: 0; padding: 0; max-width: 100vw; overflow-x: scroll; }

Ensuite, je spécifie une valeur flex-basis et une hauteur à faire correspondre :

 figure img { flex-grow: 1; flex-basis: 320px; height: 320px; }

J'ai appliqué mes quatre SVG colorés comme images d'arrière-plan, donc je ne veux pas qu'ils apparaissent sur de petits écrans. L'utilisation de sélecteurs d'attributs pour faire correspondre précisément la propriété et la valeur d'un style est un moyen idéal de cibler des éléments sans recourir à des attributs de classe supplémentaires :

 [aria-hidden="true"] { display: none; }

Cette conception ne nécessite qu'un seul point d'arrêt de requête multimédia pour appliquer les styles de mise en page aux écrans moyens et grands. J'applique huit colonnes de largeur égale et huit lignes, puis supprime les images d'arrière-plan que j'ai appliquées pour les petits écrans :

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

Ensuite, je place l'en-tête et les éléments principaux entre les numéros de ligne dans ma grille :

 header { grid-column: 1; grid-row: 1; } main { grid-column: 5 / 8; grid-row: 5 / 7; }

Je dois placer les images et la division de la figure sur ma grille, pas la figure elle-même, donc je change sa propriété d'affichage en contenu, ce qui la supprime efficacement du DOM à des fins de style :

 figure { display: contents; }

Ensuite, je place chaque image Traveler dans un ensemble différent de colonnes et de lignes de grille, ce qui modifie leurs tailles ainsi que leurs positions :

 figure img:nth-of-type(1) { grid-column: 3 / 6; grid-row: 2 / 4; } figure img:nth-of-type(2) { grid-column: 5 / 8; grid-row: 2 / 5; } figure img:nth-of-type(3) { grid-column: 3 / 4; grid-row: 5 / 6; }

Les transformations CSS sont des outils idéaux pour affiner la taille et la position des éléments dans les contraintes des grilles. Ils sont également utiles pour ajouter des touches inhabituelles à un design. J'utilise la rotation, l'échelle et la traduction pour affiner ces images :

 figure img:nth-of-type(1) { transform: rotate(-20deg) translateX(-12rem); } figure img:nth-of-type(2) { transform: scale(1.1); } figure img:nth-of-type(3) { transform: scale(1.25); }

Je révèle maintenant les rectangles de présentation colorés et les pousse derrière mon contenu en définissant une faible valeur d'index z. Là où ces images se chevauchent, un mode mix-blend ajoute encore plus de couleur à ce design :

 [aria-hidden="true"] { display: block; z-index: 0; mix-blend-mode: multiply; }

Dans cette dernière étape, je place ces formes sur ma grille, en utilisant des rotations pour ajouter encore plus de personnalité à ce design déjà coloré :

 .bg-1 { grid-column: 2 / 4; grid-row: 2 / 4; transform: rotate(-30deg); transform-origin: 75% 50%; } .bg-2 { grid-column: 4 / 8; grid-row: 2 / 5; } .bg-3 { grid-column: 3 / 5; grid-row: 4 / 6; } .bg-4 { grid-column: 4 / 5; grid-row: 6 / 7; transform: rotate(5deg); transform-origin: 0 0; } 

En savoir plus sur la série

• Décisions de conception inspirées : Magazine Avaunt
• Décisions de conception inspirées : des questions urgentes
• Décisions de conception inspirées : Ernest Journal
• Décisions de conception inspirées : Alexey Brodovitch
• Décisions de conception inspirées : Bea Feitler
• Décisions de conception inspirées : Neville Brody
• Décisions de conception inspirées : Otto Storch
• Décisions de conception inspirées : Herb Lubalin
• Décisions de conception inspirées : Max Huber
• Décisions de conception inspirées : Emmett McBain
• Décisions de conception inspirées : Bradbury Thompson

NB : Les membres de SmashingLes membres de Smashing ont accès à un PDF magnifiquement conçu du magazine Inspired Design Decisions d'Andy et à des exemples de code complets tirés de cet article. Vous pouvez acheter le PDF et les exemples de ce numéro ainsi que tous les autres numéros directement sur le site Web d'Andy.