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

Être complètement absorbé pendant quelques semaines ou mois dans la conception d'une interface de 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 ont soif de l'intensité de ces sentiments, mais – tout comme certaines relations – l'excitation initiale s'estompe rapidement dans les réalités du travail en commun. 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. [19659006] «De nos jours, la publicité est devenue une forme d'art et a de plus en plus besoin d'ê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 plupart de mon temps à travailler avec une entreprise suisse de cybersécurité, basée non loin de Milan et où Giovanni Pintori résidait.

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 passe toujours du temps sur les projets des autres lorsque le travail m'attire, mais je 'ai appris à quel point une relation client à long terme pouvait ê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 façonné dans le langage du design d'Olivetti pendant plus de 30 ans. . ISIA était une école progressiste où les étudiants étudiaient la céramique, la peinture, la ferronnerie et la menuiserie.

Pendant ses études à l'ISIA, Pintori rencontra Renato Zveteremich, le directeur de la publicité et publicitaire qui dirigeait le département de la 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 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.

Au cours de ses 30 années de carrière chez Olivetti, Pintori a conçu la publicité, les brochures de la société, la créativité était un élément essentiel de la culture de l'entreprise, ce qui était évident depuis l'architecture de ses usines et de ses bureaux jusqu'à sa conception publicitaire et graphique. , et même leurs calendriers annuels. 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 ne s'est pas contenté d'illustrer 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 après leur départ en 1967. Il a créé son propre atelier à Milan, où il a travaillé comme designer indépendant, avant de se retirer et de se consacrer à la peinture.

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 à 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.

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. En plus des couleurs de marque, les palettes de couleurs pour le Web aident les gens à naviguer, leur font savoir sur quoi ils peuvent appuyer et où ils se trouvent.

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.

É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 fonds 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 de l'emblématique Morris Traveller, l'élément principal de mon texte de course, un SVG du front du voyageur, et enfin un pied de page qui contient le logo de la société Morris Motors:

  
  
  
… 



  

Bien que les fichiers SVG externes soient 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 de saturation des couleurs et de 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 incorporé 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 García que j'ai choisi pour évoquer le style du travail de Pintori pour Olivetti:

 body {
rembourrage: 2rem;
couleur de fond: # 262626;
police-famille: "moderna_sans-light";
couleur: #fff; }

h1 {
police-famille: "moderna_sans-bold-cnd-it";
taille de police: 2.8rem;
poids de police: normal;
hauteur de ligne: 1; }

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

 header {
affichage: 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 flex commencent à partir d'un minimum de 640px;

 header svg {
flex-grow: 1;
flex-base: 640px; }
en-tête svg: pas (: dernier-type) {
marge droite: 2rem; }

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

 footer {
rembourrage à droite: 8rem;
rembourrage gauche: 8rem;
alignement du texte: centre; }

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 d'afficher plus de mes voyageurs typiquement anglais.

CSS Grid offre le placement et l'empilement précis des éléments que Flexbox manque et est le choix parfait pour cet en-tête sur des écrans moyens à grands. Je modifie 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 {
affichage: grille;
grille-modèle-colonnes: 270px 1fr 270px;
grille-modèle-lignes: 100px 1fr 100px; }

En utilisant des sélecteurs de pseudo-classe et des numéros de ligne, je place le premier SVG, puis je le réduit en taille pour ajouter de la perspective:

 header svg: first-of-type {
grille-colonne: 2/4;
grille-ligne: 1/2;
transformer: échelle (.85); }

Ensuite, je place le deuxième de mes deux graphiques. Je le soulè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 {
grille-colonne: 1/3;
quadrillage: 2/4;
indice z: 2; }

Même une grille de rapport pair apparemment banale peut avoir comme conséquence une disposition originale quand une conception inclut l'abondance de l'espace pour aider à diriger l'oeil. Pour cette conception de taille moyenne, j'applique une grille symétrique à six colonnes avec des valeurs d'espace de colonne et de lignes qui sont proportionnelles à la largeur et à la hauteur d'un écran:

 @media (min-width: 48em) {
corps {
affichage: grille;
grille-modèle-colonnes: répéter (6, 1fr);
écart de colonne: 2vw;
écart de ligne: 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, en ajoutant proportionnellement plus d'espace blanc pour réduire la largeur de ma figure et de mon pied de page:

 header {
grille-colonne: 1 / -1; }

principale {
grille-colonne: 2/6; }

figure {
grille-colonne: 3/5; }

bas de page {
grille-colonne: 3/5;
rembourrage à droite: 4rem;
rembourrage gauche: 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 -largeur: 64em) {

corps {
grille-modèle-colonnes: 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 composé de grand écran, aide à maintenir les proportions dans toutes les tailles de ma conception. Ensuite, je repositionne les quatre éléments structurels sur ma nouvelle grille:

 header {
grille-colonne: 1/8; }

principale {
grille-colonne: 2/5;
alignement du texte: à droite; }

figure {
grille-colonne: 5/7; }

bas de page {
grille-colonne: 4;
rembourrage: 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 {
alignement du texte: à droite; }

Palettes monochromatiques

Même après plus de vingt ans d'activité, 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 monochromatiques 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 le noir
• teintes : éclaircir la couleur en utilisant le blanc
• tons : désaturer la couleur en utilisant le gris

quand ils sont utilisés pour les arrière-plans, les bordures et les détails, les nuances et les teintes peuvent rendre une conception harmonieuse.

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'une conception. 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'accentuation. Cette couleur ajoutée agit comme un contrepoint à la couleur de base et donne une plus grande profondeur à la conception. % –50%. ( Grand aperçu )

Limiter la palette

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 examinez 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 du front-end du voyageur

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 espace basé sur la hauteur de la fenêtre d'affichage entre les lignes intrinsèques et non spécifiées:

 body {
affichage: grille;
écart de ligne: 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 {grille-ligne: 2; }
h1 {grille-ligne: 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 les arrière-plans et le contenu générés, je spécifie une hauteur minimale pour tous les panneaux:

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

Le panneau qui apparaît en premier dans ma conception de petit écran montre le logo Morris Motors, que j'insère en utilisant 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 ("données: 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 qu'elle corresponde à la hauteur de mon logo, puis j'insère le logo:

 # panel-d {
hauteur min: 90px;
alignement du texte: centre; }

# panel-d: avant {
contenu: url ("données: image / svg + xml…");
bloc de visualisation;
largeur: 135 px;
hauteur: 90px;
marge: 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 ("données: image / svg + xml…"); }

p {
background-repeat: pas de répétition;
position de fond: 50% 50%;
taille de l'arrière-plan: 50% 50%; }

Chacun de mes panneaux a sa propre conception graphique distincte. 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 de 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 ("données: 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…"),
gradient linéaire(
en bas,
# 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 conserver dans le même ordre que mes images d'arrière-plan:

 # panel-a {
background-repeat: pas de répétition, répétition-x;
position de fond: 50% 100%, 0 0;
taille de l'arrière-plan: 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 {
image de fond:
url ("data: image / svg + xml…"),
url ("data: image / svg + xml…"),
gradient linéaire(
en bas,
# B5964D,
# B5964D 125px,
# 262626 125px,
# 262626 140 px,
#fff 140px,
#fff 155px,
# 262626 155px); }

# panel-b {
background-repeat: pas de répétition, pas de répétition, répétition-x;
position d'arrière-plan: 50% 45px, 50% 190px, 0 0;
taille de l'arrière-plan: 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 mes largeurs de colonne 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 à 300 px et la maximale à 1fr:

 @media (min-width: 64em) {

corps {
affichage: grille;
grille-modèle-colonnes: 1fr 1fr 1fr;
grille-modèle-lignes: répéter (3, minmax (300px, 1fr));
écart: 1rem;
min-hauteur: 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 {
zones de modèle de grille:
"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 redondante la hauteur minimale que j'ai appliquée précédemment:

 [id*="panel"] {
hauteur min: aucune; }

Je place mes panneaux en utilisant des noms de zone qui me permettent de modifier 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 {aire de grille: 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'un arrière-plan URI de données image:

 # panel-d {
bord supérieur: 15px solide # 262626;
background-image: url ("données: 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…"),
gradient linéaire(
à droite,
#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 à cette conception. Pour les grands écrans, je repositionne ce logo en bas à gauche de mon panneau:

 # panel-d
position: relative; }
# panel-d: avant {
position: absolue;
en bas: 0;
gauche: 0;
marge: 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 ma conception 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: absolue! importante;
hauteur: 1px;
largeur: 1px;
débordement caché;
clip: rect (1px, 1px, 1px, 1px);
espace blanc: 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 {
contenu: "Style… d'une manière GRANDE";
position: absolue;
en bas: 0;
à droite: 0;
police-famille: "moderna_sans-bold-cnd-it";
taille de police: 2.8rem;
hauteur de ligne: 1;
alignement du texte: à droite; }

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 sur

Couleurs complémentaires

Plusieurs bleus 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 d'exécution.

Mais, la flexibilité de cette conception sur plusieurs tailles d'écran vient 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:

  



  
    
    
    
  



  
…  
  
… 

Chacun de mes projets de développement commence par l'ajout des styles de fondations désormais familiers, cette fois en ajoutant une couleur d'arrière-plan blanc cassé et du texte sans empattement presque noir:

 body {
couleur de fond: # f3f2f2;
police-famille: "moderna_sans-light";
couleur: # 262626; }

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

 .banner {
alignement du texte: centre; }

.banner svg {
largeur max: 150px; }

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

 h1 {
police-famille: "moderna_sans-bold-cnd-it";
taille de police: 2.027rem;
poids de police: normal;
hauteur de ligne: 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 {
couleur: # df4561; }

#logo .emblem {
remplissage: # 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 (largeur min: 48em) {

corps {
affichage: grille;
grille-modèle-colonnes: répéter (4, 1fr); }
}

Je place la division bannière dans les deux colonnes centrales, centre mon logo, puis je la déplace verticalement pour s'adapter entre les pare-chocs de mes deux Travellers:

 .banner {
grille-colonne: 2/4;
alignement du texte: centre;
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:

 en-tête,
bas de page {
grille-colonne: 1 / -1; }
principale {
grille-colonne: 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 une conception, 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) {

corps {
grille-modèle-colonnes: répéter (8, 1fr);
grille-modèle-lignes: 160px auto;
écart de colonne: 2vw; }
}

J'ai repositionné ma division de bannière sur trois colonnes et défini l'élément principal ci-dessous pour qu'il corresponde:

 .banner,
principale {
grille-colonne: 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 {
grille-colonne: 5 / -1; }

bas de page {
grille-colonne: 1/4; }

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

 en-tête,
bas de page {
quadrillage: 1/3; }

Alors que la division des bannières occupe la première ligne:

 .banner {
grille-ligne: 1; }

Et l'élément principal tient parfaitement en dessous:

 main {
quadrillage: 2/3;
indice z: 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. 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:

• sans préférence : Quelqu'un n'a pas exprimé de préférence
• clair : Quelqu'un a sélectionné un thème clair
• foncé : Quelqu'un a choisi a dark theme

Introducing a dark mode version of this design involves little more than adding changes to certain color values within that media query. For example, by reversing the background and foreground text colors, and changing the path fill colors in my SVG logo:

@media (prefers-color-scheme: dark) {

body {
background-color: #262626;
color: #fff; }
#logo .metal,
#logo .emblem {
fill: #fff; }
}

Deciding on dark mode colors sometimes involves more than simply inverting them, making white backgrounds black, and the black text white. Pure white text on full black backgrounds makes reading long passages of text tiring for the eye, so consider softening this contrast by using an off-white:

body {
color: #f3f2f2; }

Sometimes, even vibrant complementary colors can appear different when they’re placed against a dark background. Thankfully, CSS filters can increase a color’s brightness, saturation, or both, with no need to export a different version of a file for darker backgrounds:

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

Brightening Colors

In my final Pintori-inspired design, colorful rectangles float above the dark grey background. This design needs just three structural elements; a header which again includes the Morris Motors logo, a figure element which contains not one, not two, but three outline images of the Morris Traveller, and the main element containing my running text:

  



  
  
  



  
…
  
…
  
…

To this minimal HTML, I add four purely presentational SVG images. As I don’t want these to be announced by assistive technologies, I add an ARIA hidden attribute to each of them:

First, I specify foundation styles for background and foreground colors, then apply those same presentational SVG images to the background using data URIs:

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

Then, I specify background repeat and position values, placing each SVG in the centre, and stacking them vertically on the page. Finally, I set their sizes:

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

So the logo in my header matches the size of the SVG background behind it, I restrict its maximum width, then centre it using horizontal margins:

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

Again, a horizontal scrolling panel is a useful way to present my three outlined Traveller images, so I set their figure’s display value to flex and prevent any horizontal overflow by setting its value to scroll:

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

Then, I specify a flex-basis value and an height to match:

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

I applied my four colorful SVGs as background images, so I don’t want them to appear on small screens. Using attribute selectors to precisely match a style’s property and value is an ideal way to target elements without resorting to additional class attributes:

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

This design needs only one media query breakpoint to apply layout styles for medium and large screens. I apply eight equal-width columns and eight rows, then remove the background images I applied for small screens:

@media (min-width: 48em) {

body {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(8, auto);
background-image: none; }

Then, I place the header and main elements between line numbers in my grid:

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

I need to place the figure’s images and division onto my grid, not the figure itself, so I change its display property to contents, which effectively removes it from the DOM for styling purposes:

figure {
display: contents; }

Then, I place each Traveller image into a different set of grid columns and rows, which alters their sizes along with their 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; }

CSS transforms are ideal tools for fine-tuning the size and position of elements within grids’ constraints. They’re also useful for adding unusual touches to a design. I use rotate, scale, and translate to finely tune these 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); }

I now reveal the colorful, presentational rectangles and push them behind my content by setting a low z-index value. Where these images overlap, a mix-blend-mode adds even more color to this design:

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

In this final step, I place these shapes onto my grid, using rotations to add even more personality to this already colorful design:

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

NB: Smashing members have access to a beautifully designed PDF of Andy’s Inspired Design Decisions magazine and full code examples from this article. You can also buy the PDF and examples from this, and every issue from Andy’s website.

Read More From The Series

(ra, yk, il)