Catégories
Plugin et site web

Publicité devient un art – Smashing Magazine

Dans le dixième numéro d'Inspirated Design Decisions, Andy Clarke expliquera comment Giovanni Pintori – le graphiste italien le plus connu pour son travail avec Olivetti – peut inspirer le design pour le web avec son utilisation distinctive de la couleur et de la forme. Andy vous apprendra à utiliser la couleur pour attirer l'attention, puis à diriger l'œil de quelqu'un autour d'un dessin. Il discutera de la manière dont une palette de couleurs minimale peut servir de guide, aider les gens à concevoir un modèle, et comment les lignes et les formes ajoutent de la structure et du style.

À une ou deux exceptions occasionnelles, j'ai passé les vingt-deux dernières années à concevoir pour d'innombrables clients. Certains de ces projets ont duré un an, certains plusieurs mois, mais la plupart n’ont pas dépassé quelques semaines.

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

Cette promiscuité créative a très bien adapté ma durée d'attention souvent courte et ma curiosité agitée. Mais parfois, j'aurais souhaité pouvoir rester plus longtemps dans une organisation, mieux les connaître et avoir une influence positive sur ce qu'ils font et font.

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 près 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 le flou en faveur de la brièveté, de la clarté et de la persuasion. Ceux qui s'adonnent à 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 professionnels Olivetti pendant plus de 31 ans. Pendant ce temps, son style est devenu le vocabulaire de conception unique de l'entreprise. L'attrait de travailler avec une entreprise pendant plus de quelques mois est devenu plus fort avec l'âge. 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 résidait à la maison.

Comme Olivetti, cette entreprise valorise le design sous toutes ses formes. Bien que ma priorité 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 passe toujours du temps sur les projets d'autres personnes lorsque le travail m'attire, mais j'ai appris à quel point une relation client à long terme peut être enrichissante. Je suis heureux et plus créatif que je ne l'ai été depuis des années. De plus, alors que la vieillesse me rattrape, je n'ai pas l'énergie de poursuivre tous les projets attrayants comme je le faisais auparavant.

En savoir plus sur la série

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 conçu dans le langage du design d'Olivetti pendant plus de 30 ans.

Pintori a étudié le design à l’Instituto Superiore per le Industrie Artistiche (Institut supérieur des industries artistiques) en Italie, où il était entouré par les arts créatifs. ISIA était une école progressiste où les étudiants étudiaient la céramique, la peinture, la ferronnerie et le bois.

Pendant ses études à l’ISIA, Pintori a rencontré Renato Zveteremich, le directeur de la publicité et publicitaire 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 la société en 1950.

affiche de Giovanni Pintori et gravure de Joan Miró
À gauche: Tir à l'arc (1972) eau-forte et aquatinte de Joan Miró. À droite: affiche Olivetti Lettera 22 (1954) conçue par Giovanni Pintori. (Grand aperçu)

Olivetti a fabriqué des machines professionnelles, 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 vraiment un signe que la machine est entrée dans l'esprit humain et que le problème des formes et des relations est toujours de nature intuitive."

– Renato Zveteremich

Mais la préoccupation d'Olivetti pour le design ne s'est pas terminée avec ses produits. La créativité était un élément essentiel de la culture de l’entreprise, qui se manifestait par l’architecture de ses usines et bureaux, sa publicité et sa 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 leurs 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 ses caractéristiques littéralement. Pintori n'a pas seulement illustré des produits, il les a fait vivre à 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 se retirer et de se consacrer à la peinture.

peinture de Jasper Johns et affiche de Giovanni Pintori
À gauche: Numbers in Color (1958–59) peinture de Jasper Johns. À droite: affiche des chiffres Olivetti (1949) conçue par Giovanni Pintori. (Grand aperçu)

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

Le travail de Pintori inspire non seulement à cause de l'audace de ses formes colorées, mais aussi à cause de ce qu'elles représentent. Pintori a compris que la promotion d'un produit exigeait plus que la liste de ses fonctionnalités. 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.

brochures conçues par Giovanni Pintori
À gauche: brochure Olivetti Lettera 22 conçue par Giovanni Pintori, 1954. À droite: brochure Olivetti Lettera 22 conçue par Giovanni Pintori, 1965. (Grand aperçu)
affiches conçues par Giovanni Pintori
À gauche: affiche Olivetti Graphika conçue par Giovanni Pintori, 1956. À droite: affiche Olivetti Tetractys conçue par Giovanni Pintori, 1956. (Grand aperçu)

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 les émotions. La couleur joue un rôle essentiel pour rendre un produit ou un site Web facile et intuitif à utiliser. Outre les couleurs de la marque, les palettes de couleurs pour le Web aident les utilisateurs à naviguer, leur font savoir sur quoi ils peuvent appuyer et où ils ont été.

J'aime garder mes couleurs simples et mes palettes contiennent rarement plus de trois teintes; une couleur dominante, une couleur 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 sombres pour les bordures – par exemple – autour des boutons – et des teintes plus claires pour ajouter des reflets.

Gauche: Ma palette de couleurs. Droite: Démonstration du pourcentage d'utilisation.
Gauche: Ma palette de couleurs. Droite: Démonstration du pourcentage d'utilisation. (Grand aperçu)

Étant donné 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 vibrantes sur des arrière-plans sombres.

palette de couleurs sur un fond sombre
Gauche et droite: présentation d'une palette de couleurs sur un fond sombre. (Grand aperçu)

Utilisation des couleurs primaires

Design inspiré de Pintori
Les couleurs primaires utilisées dans ce design inspiré de Pintori soulignent la clarté de son message et la simplicité de sa mise en page. (Grand aperçu)

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 de course, un SVG du front du Traveller, et enfin un pied de page qui contient le logo de la société Morris Motors:

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 signifient 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 la vivacité 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 fond de teint 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 García que j'ai choisi 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 un petit écran:

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

La propriété flex-grow avec sa valeur 1 garantit que toutes les images se développent pour remplir tout espace disponible, tandis que flex-based 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 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 plus 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 change la valeur de la propriété d'affichage de flex en grille, puis j'ajoute trois colonnes et lignes symétriques.

Alors que la largeur des deux colonnes externes est fixée à 270 pixels, la colonne interne se développe pour remplir tout l'espace restant. J'utilise une technique similaire pour les trois rangées, en fixant les deux externes à 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; }

En utilisant des sélecteurs de pseudo-classe et des numéros de ligne, je place le premier SVG, puis le réduit 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 de rapport uniforme apparemment banale peut donner une disposition originale lorsqu'un design comprend de nombreux espaces pour aider à guider l'œil. Pour cette conception de taille moyenne, j'applique une grille symétrique à six colonnes avec des valeurs d'espacement de colonnes et de lignes qui sont 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 principal, figure et pied de page, 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; }

Cette conception se distingue davantage 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 mon design de taille moyenne sur six colonnes, puis inclure la même grille dans mon composé grand écran, aide à maintenir les proportions dans toutes les tailles de mon design. 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; }
Couleurs primaires
Gauche: couleurs primaires sur un fond blanc cassé. Droite: les couleurs primaires ressortent sur ce fond sombre. (Grand aperçu)
Les palettes de couleurs monochromes utilisées dans mon prochain design. (Grand aperçu)

Palettes monochromatiques

Même après plus de vingt ans dans l'entreprise, je trouve toujours que travailler avec la couleur est l'aspect le plus difficile du design. C'est peut-être la raison pour laquelle je gravite si souvent vers des schémas de couleurs monochromes car ils rendent la réalisation d'un aspect visuellement cohérent assez simple.

Les palettes de couleurs monochromes contiennent des variations de nuance, 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 en utilisant du noir
  • Teintes: Éclaircit la couleur avec du blanc
  • Tons: Couleur désaturée en utilisant le 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 vibrantes qui pourraient attirer l'attention indésirable sur les 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 à la conception.

teintes et tons
Gauche: Nuances: 100% –50% Centre: Teintes: 100% –50% Droite: Tons: 100% –50%. (Grand aperçu)

Limiter la palette

version en couleur d'un design inspiré de Pintori
Cette version en couleur de mon design inspiré de Pintori comprend plusieurs éléments monochromes placés sur une grille modulaire. (Grand aperçu)

Grâce à la grille CSS, aux dégradés d'image d'arrière-plan et aux pseudo-éléments, ce prochain design inspiré de Pintori obtient 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:

Ce code HTML place le titre et le paragraphe devant 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'extrémité 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 de corps en grille, puis j'introduis un espace basé sur la hauteur de la fenêtre d'affichage 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, plus 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 panneaux n'ont pas d'autres éléments, leur hauteur s'effondrera à zéro, ne laissant que leurs bordures. Pour garantir la possibilité d'afficher leurs arrière-plans et contenus 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 mon petit écran affiche 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é codé dans une chaîne. Vous pouvez utiliser un URI de données n'importe où dans votre CSS ou HTML:



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 sont pas limités aux images codées, mais sont fréquemment utilisés pour coder 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 correspondre à 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 place 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%; }
panneaux avec design graphique distinctif
Chacun des panneaux a sa propre conception graphique distinctive. (Grand aperçu)

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 demandes HTTP supplémentaires. Au lieu de cela, j'utilise différentes combinaisons de plusieurs images d'arrière-plan à l'aide d'URI de données et de dégradés CSS pour obtenir les résultats dont j'ai besoin.

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

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

Ensuite, j'ajoute la deuxième image de fond rayée à l'aide d'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 pensant à les garder 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 rayures noires, jaunes et blanches plus complexes. En plaçant des arrêts de couleur avec différentes couleurs à 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 designs en ligne basés sur une grille modulaire, mais c'est le choix parfait pour ce design grand écran inspiré 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 spécifie la largeur de mes colonnes pour remplir tout l'espace disponible. Pour m'assurer qu'il y a toujours suffisamment de hauteur pour afficher le contenu de chaque panneau, j'utilise la valeur minmax de la grille, en définissant 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, donc j'utilise 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. La lettre d étant utilisée pour deux zones adjacentes, l'élément placé à l'aide de cette lettre occupera les deux:

body {
grid-template-areas: 
"a b c"
"d d e"
"f g h"; }

Dans cette implémentation sur grand écran, la valeur minmax de la grille CSS contrôle la hauteur de mes lignes, ce qui rend la hauteur minimale que j'ai appliquée précédemment redondante:

(id*="panel") {
min-height: none; }

Je place mes panneaux en utilisant des noms de zone qui me permettent de changer où ils apparaissent 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 y a un panneau où le contenu et les arrière-plans changent pour les écrans plus grands. Ce panneau contient le logo Morris familier et ce qui semble être le titre principal, "Style … d'une manière GRANDE."

Pour développer ce panneau, j'ajoute d'abord une bordure solide en haut, suivie d'une image d'arrière-plan de l'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é 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 avant pour ajouter le logo Morris à ce design. 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 gros titre descend immédiatement du corps HTML et ne fait pas partie de ce panneau, ce qui rend difficile le positionnement sur des tailles d'écran flexibles. Pour reproduire mon design avec précision, sans compromettre l'accessibilité, j'utilise d'abord une méthode accessible pour masquer visuellement ce titre aux 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; }
Design inspiré de Pintori
Gauche: version monochrome. Droite: Version en couleur de ce design inspiré de Pintori. (Grand aperçu)
Quatre palettes complémentaires comprennent deux couleurs sur les côtés opposés d'une roue chromatique
Quatre palettes complémentaires comprennent deux couleurs sur les côtés opposés d'une roue chromatique. (Grand aperçu)

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 non harmonieuses. Pour les empêcher de se heurter, utilisez des nuances, des teintes ou des tons de couleurs complémentaires qui aideront également à élargir votre palette de couleurs utilisables.

Alternativement, utilisez des couleurs complémentaires divisées où, au lieu de couleurs opposées, la palette comprend deux couleurs de chaque côté du complémentaire.

La palette complémentaire divisée comprend deux couleurs de chaque côté de la complémentaire.
La palette complémentaire divisée comprend deux couleurs de chaque côté de la complémentaire. (Grand aperçu)

Couleurs complémentaires

Des combinaisons complémentaires ajoutent de la personnalité à ce design inspiré de Pintori.
Des combinaisons complémentaires ajoutent de la personnalité à ce design inspiré de Pintori. (Grand aperçu)

Plusieurs plans Morris Traveler aux couleurs vives se chevauchent dans mon prochain design inspiré de Pintori. Le code HTML nécessaire pour développer cette conception est aussi minimal 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 en cours.

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



Chacun de mes projets de développement commence par l'ajout des styles de fondation maintenant familiers, cette fois en ajoutant 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 sur le centre, puis je règle la largeur maximale du logo sur une diminution de 150 pixels:

.banner {
text-align: center; }

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

Le titre principal de cette conception se situe 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 disponible supplémentaire 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 bannière dans les deux colonnes centrales, je centre mon logo, puis je la déplace verticalement pour s'adapter 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, tout en plaçant 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 de la disposition de cette conception peuvent être observées sur des écrans de plus grande taille. 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 disposition, j'augmente le nombre de colonnes de ma grille de quatre à huit, puis j'introduis deux lignes. La première ligne a une hauteur fixe de 160 px, 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 définit 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 disposition 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 des bannières occupe la première ligne:

.banner {
grid-row: 1;  }

Et l'élément principal s'adapte 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 des produits et des sites Web depuis qu'Apple a introduit un mode sombre sur iOS et macOS. Le développement de 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:

  • pas de préférence: Quelqu'un n'a pas exprimé de préférence
  • lumière: Quelqu'un a sélectionné un thème lumineux
  • sombre: 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 changeant 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 en mode sombre implique parfois plus que simplement les inverser, rendre les arrière-plans blancs noirs et le texte noir blanc. Un texte blanc pur sur fond noir rend la lecture de longs passages de texte fatigante pour les yeux, alors pensez à 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 des arrière-plans plus sombres:

header img,
footer img {
filter: saturate(1.5) brightness(1.1); }
Couleurs complémentaires vives sur un fond sombre.
Couleurs complémentaires vives sur un fond sombre. (Grand aperçu)

Couleurs éclaircissantes

Augmentation de la légèreté et de la saturation
L'augmentation de la luminosité et de la saturation rend les couleurs plus éclatantes sur des fonds sombres. (Grand aperçu)

Dans ma conception finale inspirée 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 Traveler, et l'élément principal contenant mon texte en cours d'exécution:

À ce HTML minimal, j'ajoute quatre images SVG purement présentationnelles. Comme je ne veux pas que ces technologies soient annoncées par les technologies d'assistance, j'ajoute un attribut caché ARIA à chacune d'entre elles:





Tout d'abord, je spécifie les styles de fondation 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 d'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; }

Donc, le logo dans mon en-tête correspond à la taille de l'arrière-plan SVG derrière lui, je restreins 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 Traveler décrites, j'ai donc défini la valeur d'affichage de leur figure sur flex et pour empêcher 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 de base flexible 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 de fond, 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 n'a besoin que d'un seul point d'arrêt de requête multimédia pour appliquer des styles de mise en page pour les écrans moyens et grands. J'applique huit colonnes de même largeur et huit lignes, puis je 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; }

J'ai besoin de 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 effectivement 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 colorés et de présentation et les pousse derrière mon contenu en définissant une faible valeur d'index z. Lorsque 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; }
À gauche: les couleurs d'origine de ma conception. Droite: l'augmentation de la légèreté et de la saturation de 10% augmente leur éclat.
À gauche: les couleurs d'origine de ma conception. Droite: l'augmentation de la légèreté et de la saturation de 10% augmente leur éclat. (Grand aperçu)

NB: Les membres de Smashing ont accès à un PDF magnifiquement conçu du magazine Andy’s Inspired Design Decisions et à des exemples de code complets de cet article. Vous pouvez également acheter le PDF et des exemples à partir de celui-ci, et chaque numéro du site Web d'Andy.

En savoir plus sur la série

Smashing Editorial(ra, yk, il)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *