Redécouvrons les fondamentaux de la Couleur et de ses harmonies !

Un article de Manon Lay, designer UX/UI chez So-youz

Introduction

Que ce soit dans le domaine du design graphique, de la photographie, ou de l’aménagement d’intérieur, l’harmonie des couleurs est une donnée importante qui permet de mettre en valeur une composition.  

L’harmonisation des couleurs permet indépendamment des goûts et affinités de chaque personne, d’obtenir une combinaison de couleurs qui fonctionne dans tous les cas.  

Le cercle chromatique permet de visualiser les différentes combinaisons de couleurs possibles.

Le cercle chromatique, c’est quoi ?

blog ai3 Cercle_chromatique@3x-100 Redécouvrons les fondamentaux de la Couleur et de ses harmonies !

Le cercle chromatique représente les familles de couleurs conventionnelles et leurs dégradés, on pourra utiliser leurs saturations ou encore leurs luminosités pour augmenter la palette de dégradé. 

Le cercle chromatique est composé de 3 groupes de couleurs : 

  • Les couleurs primaires :cyan, magenta et jaune qui sont les couleurs de base (elle ne sont composées d’aucun mélange)  
  • Les couleurs secondaires : rouge, vert, et bleu qui sont les mélanges issus à parts égales de deux couleurs primaires  
  • Les couleurs tertiaires : regroupent toutes les autres couleurs qui sont des mélanges des trois couleurs primaires dans différentes propositions. 

+ un dernier groupe qui ne fait pas partie du cercle : les couleurs achromatiques, sont le noir, blanc et le gris.

blog ai3 Couleurs@3x-100 Redécouvrons les fondamentaux de la Couleur et de ses harmonies !

Quels sont les grands principes pour utiliser le cercle chromatique ?

blog ai3 Principes@3x-100 Redécouvrons les fondamentaux de la Couleur et de ses harmonies !
  • L’harmonie monochromatique (ou camaïeux) :l’utilisation d’une seule couleur en utilisant différents tons de cette couleur  
  • L’harmonie complémentaire : l’utilisation d’une couleur principale et de la couleur directement opposée (elles permettent de créer un dynamisme entre les couleurs) 
  • L’harmonie analogue : l’utilisation d’une couleur principale et des couleurs qui se trouvent directement à côté (cela permet d’avoir accès à une gamme plus large de couleur tout en restant harmonieux) 
  • L’harmonie triade :l’utilisation de trois couleurs se trouvant à égale distance dans le cercle (à utiliser avec une couleur principale et les deux autres couleurs avec moins d’intensité pour éviter une surcharge) 
  • L’harmonie en carrée : l’utilisation de quatre couleurs se trouvant à égale distance dans le cercle (à utiliser de manière plus délicate puisqu’elle couvre une grande partie du cercle chromatique)

Quels outils peut-on utiliser ?

blog ai3 Examples@3x-100 Redécouvrons les fondamentaux de la Couleur et de ses harmonies !

Parmi tous les outils disponibles sur le web pour créer des harmonies de couleurs, voici quelques exemples d’outils utilisés couramment :  

Paletton :  permet de créer une gamme de couleurs rapidement en utilisant les différents types d’harmonies  

Adobe Color CC :outil de la suite adobe qui permet de générer des palettes de couleurs avec le cercle chromatique  

Coolors propose des définitions déjà créées de palettes de couleurs 

Et après ?

Pour aller plus loin, on pourra se renseigner sur la signification des couleurs.  

Chaque couleur a une ou plusieurs significations qui peuvent provoquer différentes émotions.  

Ces propriétés sont intéressantes à connaitre pour permettre d’adapter vos compositions et d’avoir plus d’impact sur la personne qui les regarde. 

Voici les liens de deux articles qui donnent plus d’informations à ce sujet : 

• 99 designs

• La Cascade

#design #couleurs #harmoniedescouleurs #cerclechromatique #outils 

Milton Glaser (et les 10 choses qu’il nous apprend)

En plus d’avoir créé le logo « I Love NY » ou le poster avec un Bob Dylan coloré et hirsute, Milton Glaser a toujours eu plein de choses à dire.

Il est toujours bon d’apprendre d’un « grand » du métier, surtout quand il s’agit d’un des  derniers « monstres » du Design. Je me rappelle de l’intervention de Milton Glaser lors de son passage à lAIGA Talk (Londres en 2001). C’était beau et ça nous avait interpellé quant à la nécessité que le Design soit régi par des lois éthiques plutôt que commerciales. Du bon sens mais aussi une véritable révolution idéologique.

Pourquoi ? Parce que tous les métiers qui font appels à des pratiques créatives débordent forcément du simple cadre économique. Quel prix donner à une œuvre de l’esprit ? Celle que le marché est prêt à payer sur l’instant ! Demain, le marché disparaîtra et l’Idée – ce petit truc indescriptible qui nous différencie des autres espèces animales – continuera à faire tourner le Monde.

Alors, la responsabilité des graphistes, UI, plasticiens est de rendre les choses un peu plus jolies avec des idées visuelles et originales, aujourd’hui, pour que notre vie soit un peu plus agréable, demain. C’est, à mon sens, une vraie responsabilité au delà de la simple réponse à un cahier des charges.

Responsabilité que Milton Glaser reconnaît également en vous livrant ses fameux 10 commandements quand il parle de son métier (et une possible feuille de route pour nos futurs créatifs) :

  • On ne peut (bien) travailler que pour des gens que l’on aime bien !
  • Si tu as le choix, n’ai jamais un « job » plutôt une Passion,
  • Certaines personnes sont toxiques (évites-les)
  • Le professionnalisme n’est pas assez (le Bien est l’ennemi du Grand)
  • Moins ne veut pas nécessairement dire Plus
  • Il ne faut pas croire dans le dernier style à la mode
  • Comment tu vis change ton esprit
  • Douter est mieux que de trop croire en soi
  • L’âge ne compte pas (pour peu que l’intelligence soit là !)
  • Dis la Vérité !

Gerd Arntz, grand maître du pictogramme !

Voici une petite introduction à un designer allemand  pionnier dans cette spécialité qu’est le pictogramme. Ultra-utilisé dans le numérique et le Web, ce concept est né d’une vraie volonté politique et d’une recherche d’universalité dans la Communication.

Le graphiste allemand Gerd Arntz  est né en 1900 à Remscheid. Issu d’une famille d’industriels fortunés, Gerd se forme à l’école d’art de Düsseldorf et bien vite affiche une orientation politique très à gauche. Fidèle à ses convictions, il intègre le Groupe des Artistes Progressistes pour (d’après Wikipedia) « produire une représentation graphique des rapports sociaux, et plus particulièrement de ceux qui concernent la guerre et le capitalisme. Son art était destiné à agir directement sur la société, au moyen d’un style directement constructiviste. Il poursuivit ce projet jusque dans les années Trente, notamment en considération du fascisme qui se développait alors en Europe. » Du fait de cette démarche particulière, Gerd orienta son travail vers « un symbolisme censé être universellement compréhensible » et donc se spécialisa dans ce qui n’était pas encore nommé « pictogrammes ». Il est intéressant de noter que derrière les fonctionnalités affichées du dit pictogramme se cache une volonté politique de communiquer quasi « universellement ». Notons également que toujours d’après Wikipedia, un pictogramme est « une représentation graphique schématique, un dessin figuratif stylisé fonctionnant comme un signe d’une langue écrite et qui ne transcrit pas la langue orale. Il sert généralement à la signalétique pour s’orienter dans l’espace réel ou communicatif comme l’Internet. Lorsque possible, il constitue une alternative à la signalisation bilingue, permettant de diminuer la quantité d’information inscrite sur un panneau, et permettant d’éviter (ou de diminuer) les controverses accompagnant le choix des langues d’affichage dans les zones où, par exemple, des groupes xénophobes cohabitent avec des populations d’origine différente.» Sur le site de Gerd Arntz, on trouvera une bonne introduction à son travail (surtout dans la rubrique isotype, sorte de version bêta des pictogrammes tels que l’on connaît aujourd’hui). Il est amusant que son travail a depuis été maintes fois « pillé » surtout dans les publications de pictogrammes et autres logos sans droits. Ses visuels, ultra-diffusés, font donc parti de notre inconscient visuel et c’est assez drôle de mettre un nom sur ces classiques…

Cinq outils incontournables pour créer de l’infographie

Le design d’information est au cœur de l’internet d’aujourd’hui.

D’après Wikipedia : « Le design d’information a été défini comme « l’art et la science de la préparation de l’information afin qu’elle puisse être utilisée par les êtres humains avec efficience et efficacité ». Terme apparu dans les années 1970. Le design d’information signifie à la fois dessin et projet, qui traduit une information claire et directe. L’information utile n’est pas un accroissement de la quantité d’informations mais tout au contraire une réduction de cette quantité par des regroupements pertinents. Le design d’information ou le traitement graphique de l’information se traduit comme l’arrangement des modèles d’organisation afin de fournir à l’utilisateur un contexte et un sens à l’information. Ce design, essentiellement graphique, se destine à structurer, à mettre en forme, en donnant à des informations des contenus et des valeurs complexes. » A cette définition de base, on pourra ajouter la conception même des informations que l’on devra ensuite organiser puis traiter visuellement. Même si il peut paraître paradoxal de parler de « création » d’information. Mais rappelons que nous sommes ici dans un contexte publicitaire et que depuis toujours la « Com » contrôle voir invente l’information qu’elle diffuse. Si le Web offre un nouveau terrain de jeux aux spécialistes du marketing, on se rend également compte qu’il lui manque ce combustible rare que sont les contenus. Sinon, pourquoi se procurer illégalement ce qui pourrait nous être offert légalement et souvent gratuitement ? (Je pense, par exemple, au piratage massif de films, séries … Etc.) Du coup, ces contenus, cette information, sont les réels enjeux du numérique plus que le « tuyau » et son débit ou un nouveau framework informatique particulièrement bien adapté.

Le graphiste, on préférera utiliser le terme « User Interface » (UI), lui aussi, se doit lui aussi de traiter cette information si précieuse et si rare. Le terme « infographie » prend alors tout son sens, littéralement : mettre en image l’information. Le blog makeuseof (muo, pour les intimes) nous propose, dans ce post : 5 Outils gratuits et en ligne pour pouvoir créer ces petits schémas qui en disent plus qu’un long discours. Générateurs d’histogrammes et de camemberts, outils de dessin vectoriels, nuages de mots clés

Tout y est ou presque et nous permettra de réaliser facilement les basiques de cette spécialité. Le résultat est souvent surprenant. A explorer…

Le gabarit de mise en page

Il n’existe qu’un seul secret de fabrication pour faire une belle mise en page. Qu’elle soit numérique ou pas. Quelle soit responsive ou statique. Ce secret (qui n’en est pas un) a maintenant un site dédié…

En design, on doit le fameux gabarit de mise page au Style Typographique International (également appelé le Style International). Ce mouvement graphique né dans les années 50 (notamment en Suisse) mettait l’accent sur la clarté, la lisibilité… Bref une certaine objectivité qui passait également par des choix typographiques orientés sans-serifs et des choix iconographiques excluant définitivement l’illustration. L’Helvetica designé par Max Miedinger, en 1957, est un héritage de ce courant.

Afin de structurer leur démarche, ces graphistes suisses ont formalisé ce qui jusque-là ne l’était pas : le gabarit de mise en page. Je pense plus particulièrement à Josef Müller-Brockmann et son ouvrage de référence : The Grid System (d’où le nom du site cité plus loin dans cet article). Il me faut cependant préciser que le gabarit existe depuis la création de l’imprimerie et est déjà présent dans la Bible à 42 lignes, premier livre imprimé par Gutenberg en 1455.

Celui qui contrôle cette « maudite » grille, contrôle l’art du lay-out quelque soit le format, la pagination, le support et le message à faire passer. Pour être plus précis, n’importe quelle publication digne de ce nom commence par un gabarit spécialement étudié pour en optimiser la lecture et le look and feel. Le framework « Bootstrap » l’a bien compris et l’utilise comme concept de base pour rendre « responsive » un site web. Le fait de re-dispatcher des contenus de 12 colonnes à un minimum de 2 permet de s’adapter à n’importe quel format d’écran. Le gabarit permet d’optimiser le rapport du contenu à l’espace qui lui est dédié. Simple mais efficace.

Bref, c’est Ze secret de beauté des designers. Il existe quelques livres plus ou moins précis sur le sujet (dont un plutôt technique chez Pyramyd)… Voilà, enfin, un site qui regroupe (en anglais) un certain nombre d’infos et de ressources gratuites : The Grid System. Un outil précieux pour les UX designers et les graphistes qu’il faudra bookmarker et consulter quotidiennement !

Un jour prochain, j’aborderai également la grille modulaire de mise en page qui sert à la même chose mais qui ne fonctionne pas exactement de la même façon. Mais ça, c’est une autre histoire.

Le Web design par le détail

MephoBox est un projet en ligne, né de la passion d’un designer pour les « beaux » sites bien faits. À l’origine, cette ressource devait juste être un outil pour faire de la veille. Mais très vite, Justin (un graphiste anglais) a eu envi de partager cette source d’inspiration avec sa communauté. Aujourd’hui, plus de 8000 membres suivent MephoBox. Bien sûr, cette « communauté » s’appuie sur un site divisé en plusieurs galeries. Galeries qui font un focus sur certaines micro-pratiques du Web design. Ainsi et par exemple, on pourra parcourir des « best of » visuels dans les domaines du « account login’ », du « call to action », du « navigation menu », des « submit forms » ou  des « pimpin’ forums »…Etc. Autant de « spécialités » auxquelles un Web designer doit s’attaquer quotidiennement.  Si la globalité d’un bon design web « fonctionne », s’est parce chacune de ses composantes graphiques a été pensée avec précision, réalisée avec goût et talent. Il s’agit, ici, du fameux design « par composants » dont il est question qui est la particularité du design d’interfaces. Chaque bout de « fonctionnel » doit être visualisé et son utilisation doit être facilitée puis doit faire partie d’un tout à son tour « utilisable » et graphiquement beau et cohérent.

Pour en revenir à MephoBox… On y découvrira un paquet de rubriques correspondant à la plupart des « spécialités » auxquelles un Web designer doit s’attaquer quotidiennement dans son travail.  Ce portail est donc véritablement une ressource ciblée avant tout pour les Web designers ou pour tous ceux qui travaillent dans l’UX et l’UI. Toutes les galeries proposées permettent un « voyage » visuel qui ne manquera pas de réveiller notre créativité endormi par le froid hivernal. On peut bien sûr, s’inscrire et soumettre au groupe son travail et ses tatonnements ergonomiques. Enfin, la création « globale » est elle aussi abordée via le meilleur des sites Web (façon fwa) et ce à travers l’onglet « websites ». À noter, enfin, le design plutôt sympathique et très dans l’air du temps de MephoBox (qu’on ne manquera pas de consulter régulièrement).

Design is history

L’Histoire du design graphique est pavée d’individus plus que de grands mouvements structurants (comme dans l’art avec un grand A). Pourtant le Design a accompagné chaque grand mouvement artistique du XXe siècle (du Constructivisme, aux Dada en passant par le Futurisme) que ce soit via les Arts appliqués ou que ce soit via la création typographique.

Mais quand on aborde l’histoire du Graphisme, on en revient toujours aux individus. Des egos, souvent mégalos, parfois rigolos ! Du coup, il est parfois difficile d’avoir une vision globale quant à son évolution au fil des décennies. Quelques fois, certains designers « couvrent » plusieurs mouvements artistiques. (C’est le cas, par exemple, de Marcel Jacno). Ce qui rend une vision globale encore plus difficile à exister.

Le site Design is History est précieux car il permet cette synthèse visuelle. Initié par Dominic Flask de DangerDom studios, Design is History est une plongée dans cette histoire qui débute avec le père spirituel de tous les graphistes/UI, Gutenberg et qui s’achève  par un catalogue des pratiques actuelles. Entre ces deux repères temporels, c’est un véritable voyage dans le temps qui nous est proposé.

Né professionnellement dans les eighties, je me suis bien sûr plongé, la tête la première, dans cette furieuse décennie… Emigre, le Macintosh, Designers Republic, Neville Brody et tous les autres ! Tout (ou presque) y est mentionné, abordé. Parfois juste survolé, ce qui peut être un brin frustrant. Autre richesse de ce site, sa sélection de liens, sorte de best of des meilleures ressources graphiques en ligne (côté culture métier). Un des derniers articles publié concerne une de mes récentes révélations (un must visuel) : Erik Nitsche. Allons, de ce pas, parfaire notre culture visuelle en cliquant ici.

Les pieds de pages dans les sites de communication Modern UX

Les pieds de page sont une fonctionnalité personnalisée très utilisée pour faciliter la navigation dans les sites Web et les portails. Les sites de Communication SharePoint auront bientôt un contrôle de pied de page prêt à être inséré. Ce contrôle prend en charge soit un logo, soit une étiquette ou un ensemble de liens (jusqu’au huit liens).

En cliquant sur « Modification de l’apparence », on trouve le lien pour modifier le pied de la page.

blog ai3 image-8 Les pieds de pages dans      les sites de communication Modern UX

Dans le contrôle de pied de page, on a la possibilité d’activer/désactiver cette fonctionnalité d’une façon directe et simple. On peut aussi ajouter un logo et des liens (maximum 8).

blog ai3 image-9 Les pieds de pages dans      les sites de communication Modern UX

Ajout d’un lien:

blog ai3 image-7 Les pieds de pages dans      les sites de communication Modern UX

Apparence du pied de la page de l’exemple:

blog ai3 image-10-1024x233 Les pieds de pages dans      les sites de communication Modern UX

Little Big Details, les détails qui font la différence

Le design d’interface (Web, applications diverses, intranet…), on le sait, est constitué de micro détails qui doivent former un tout cohérent. Ces détails font un bon design…

À l’initiative de Toni Romero, un jeune graphiste américain de 22 ans, voici un blog visuel qui parlera tout particulièrement à tous les UI designers : Little Big Details. On le sait, le design d’interfaces d’application est peu considéré dans la grande famille du Web design. Bien que cela évolue (un peu). Les web agencies qui en constituent le noyau dur, sont souvent nées d’anciennes anciennes agences de com voir de publicité, conservant au passage le pire de l’ancien monde : jeunes stagiaires au physique intelligent, directeur artistique senior d’au moins 22 ans, attitude, mépris et frime derrière des Ray-Ban Wayfarer II, total look noir. Octave, héro dandy de 99 francs, à la peau dure. Seuls les sites grands publics, façon communication de masse, trouvent grâce aux yeux de ces nouveaux créatifs de l’âge numérique. Laissant de côté les travaux ressentis de « labeur » aux laborieux de la création. 99% du design numérique implique pourtant une vraie connexion avec l’ergonomie, les usages et la technique. Tout ça pour dire que créer une interface « usable » n’est pas donnée à n’importe quel graphiste sorti d’école spécialisée. Il est aussi question de technicité, créativité et maturité. Le design d’interface d’applications, enfin, est affaire de détails. Et pour reboucler sur Little Big Details, ce blog américain met le focus sur une multitude de détails qui font la différence et –  tout en subtilité – amène de la plus-value aux interfaces qui nous entourent. En une image et un (petit) commentaire, tout est dit et l’on peut s’y approvisionner en bonnes idées pour ses futurs designs.

Logos adaptatifs

Les graphistes et développeurs ont depuis des années l’habitude d’adapter leurs productions aux dimensions variés des appareils. De plus, les sites non responsive (c’est à dire non compatibles avec les mobiles, smartphone ou tablette), sont pénalisés par Google depuis le 21 avril 2015.  Tout ce travail a permis de développer les fondamentaux du « design adaptatif » (responsive design en anglais).

Avec les sites web responsives, la charte graphique (comprenant le logo) doit évoluer. Un logo doit pouvoir conserver sa personnalité et transmettre l’identité de marque, dans différentes tailles.

blog ai3 responsive-logo Logos adaptatifs
Logo responsive

Joe Harrison, spécialiste en design digital et interactif nous explique dans son étude que des marques comme Coca Cola, Chanel ou Disney ont déjà des variantes de leur logo, qui s’adaptent et se modifient en fonction de l’utilisation.

Pour arriver à la plus petite forme d’un logo adaptatif, il faut :

  • Supprimer les détails
  • Supprimer les couleurs
  • Simplifier les formes
  • Empiler les éléments pour un rendu carré

En appliquant ces principes de conception, un logo plus lisible et approprié peut être affiché. Le concept vise à passer d’une image de marque de lignes directrices fixes et rigides à un système plus souple et plus contextuel.

blog ai3 logos-adaptatifs Logos adaptatifs
Logos adaptatifs de Coca-Cola, Chanel, Walt Disney et Heineken

Disney par exemple a simplifié progressivement son logo, faisant disparaître le château, jusqu’à ce qu’il ne reste plus que la première lettre du nom de la marque. Au contraire, Heineken ou Chanel suppriment le nom de la marque pour ne laisser qu’un pictogramme. Pour Coca Cola, le changement va jusqu’à changer le nom de la marque pour passer de Coca Cola à la version minimale « Coke ». Vous pouvez voir le résultat de cette étude en action : ResponsiveLogos.co.uk .

Aujourd’hui, il ne suffit donc plus de créer un simple logo mais de penser une gamme de logo avec des variantes de compositions pour s’adapter à différentes tailles ou résolutions d’écran.