Un exemple de ce que l’on peut faire avec Gutenberg, le nouvel éditeur de WordPress

agence-wordpress-editeur-gutenberg-gratuit

Ca y est, WordPress 5.0.1 est sorti et c’est la révolution ! Son nouvel éditeur interactif et dynamique va-t-il tenir ses promesses ? Quelques exemples de ce que l’on va pouvoir créer à partir de Gutenberg.


Bien sûr, un joli paragraphes avec des mots dedans.
Et juste au dessus, un séparateur…

On pourra immédiatement attribuer taille de police et couleurs sur n’importe quel paragraphe…

Ca y est, WordPress 5 est sorti et c’est la révolution ! Son nouvel éditeur interactif et dynamique va-t-il tenir ses promesses ? Quelques exemples de ce que l’on va pouvoir créer à partir de Gutenberg.

Avec un texte par dessus !

Je peux changer la couleur
de la BANNIÈRE

Un titre

Un sous-titre

Un sous-sous titre

Un sous-sous-sous titre ? On s'arrêtera là, finalement !
[Ceci est un texte préformaté]

contact-agence-web
Une image simple, avec une légende
contact-agence-web
Miniature

Sur simple demande par mail, nous vous adressons les codes du site
et nous vous expliquons comment faire.


tourisme-site-wordpress-paris-poitiers-bordeaux
L’image est en pleine page
Enfin un joli tableau !Cellule 1Cellule 2Cellule 3
Et tout est automatique LoveLoveLove
Love

Ajouter une galerie d’images

Et enfin, des colonnes pour écrire des textes agréables à lire et non des textes à rallonge qui sont illisibles et peu recommandés pour les personnes handicapées.

Et la magie opère si l’on attribue également un fond de couleur sur l’une des colonnes…

C’est plus agréable de lire sur deux colonnes, vous ne trouvez pas ?
Fluide, fonction du nombre de caractères et lignes…

C’est plus agréable de lire sur deux colonnes, vous ne trouvez pas ?

Avez-vous noté que l’on vient d’enrichir cette histoire… À votre tour, maintenant !

Sur simple demande par mail, nous vous adressons les codes du site
et nous vous expliquons comment faire.

Gutenberg, le nouvel éditeur de WordPress

agence-wordpress-editeur-gutenberg

Avec la sortie de WordPress 5.0.1, c’est la révolution de son éditeur qui est au cœur de cette version tant attendue par les experts. La rédaction des articles et des pages est plus souple, créative et interactive que par le passé. Découvrons-la ensemble…

Le nouvel éditeur de WordPress se veut plus moderne et dans l’air du temps des nouvelles plate-formes de contenus (Medium, Paper de Dropbox, Note…) qui ont désormais le vent en poupe. L’innovation pousse au changement… inexorablement.

Qu’est-ce qui change avec la nouvelle version de WordPress 5.0 ?

Ce nouvel éditeur va vous permettre de gérer et de créer des contenus de façon très visuelle en renforçant la cohérence entre ce que vous concevez en coulisse et ce que vous voyez à l’écran.

Outre les options textuelles traditionnelles (alignement, gras, italique, listes à puces, etc…), ce nouvel éditeur innove grâce à de nombreuses options que l’on utilise à travers le concept de blocs (voir ci-dessous).

Proposition d’insertion d’un élément dans l’article

Qu’apporte ce fameux Gutenberg ?

Les équipes de WordPress ne cessent de travailler sur les modules internes pour rendre la publication de contenus plus fluide et simple pour l’utilisateur.

Par le passé, nous nous sommes souvent arrachés les cheveux à cause de shortcodes et bouts de codes à intégrer, qui rendaient la maintenance de nos pages souvent délicate voire bancale…

La notion de « widgets » devrait disparaître dans le futur pour permettre d’ajouter des contenus intelligents à des endroits mieux choisis et ne pas trouver forcément présentes les éternelles et mêmes informations dans la barre latérale à la lecture d’un article, par exemple. Nous allons pouvoir jouer avec nos blocs et optimiser les informations en fonction des attentes de nos lecteurs et publics.

Une des plus grandes forces de cette mise-à-jour repose sur l’intégration de contenus enrichis, sans devoir passer systématiquement par l’ajout d’extensions, l’enjeu étant de simplifier ainsi la mise-en-avant d’éléments importants : images, galeries, vidéos, tableaux, boutons, tout en ayant la main sur la personnalisation de certains de ces derniers (en cours de développement).

Par exemple : ajouter une lettrine, changer la taille d’une image (une photo à 25%, c’est plus intelligent qu’un calcul en pixels !), ajouter des couleurs sur certains blocs etc…

Un temps d’adaptation nécessaire

Ce joli tableau de l’innovation étant dressé, il est important de rester très prudent et ne pas se précipiter sur le bouton de mise-à-jour de cette nouvelle version et d’attendre quelques temps les éventuels patchs correctifs qui ne tarderont probablement pas à mis en place par les équipes de développement.

Ce nouvel éditeur s’inscrit dans un changement de grande ampleur et il faut s’assurer qu’il ne vienne pas rompre et déstructurer les pages de certains sites WordPress actuels. Cela fait partie du jeu, innover, tester, déployer et tester de nouveau.

Chaque site internet a été construit à partir des besoins et des souhaits différents de nos clients, et chaque site relève d’une combinaison d’extensions et de thèmes étudiée minutieusement. Mettre à jour WordPress demande donc du soin et de l’attention toute particulière et il ne faut pas faire n’importe quoi.

Cependant, il est impossible pour une équipe de tester toutes les configurations existantes et il est d’usage de demander aux utilisateurs de faire remonter les problématiques rencontrées.

Dans notre agence, nous sommes au faîte des différents développements apportés à WordPress et nous ne choisissons jamais les modules intégrés par hasard. Grâce à la communauté des développeurs et grâce aux conférences auxquelles nous assistons (et donnons), nous établissons un périmètre de sécurité et de veille technologique nécessaire afin de garantir une grande réactivité face à ces évolutions.

L’utilisateur final – Vous, Moi – va donc devoir apprendre ces nouvelles notions et adopter ce nouvel éditeur. C’est une étape de l’histoire incontournable tant sur l’évolution des habitudes que dans l’aptitude au changement. Et tout va bien se passer.

Même pas peur !

Rappelons que l’on peut toujours annuler ce que l’on vient de faire (petite flèche en haut à gauche – en mode éditeur), WordPress n’a pas abandonné l’option de révisions des articles (revenir à la version précédente) et lorsque vous rédigez, seule la publication en cours d’édition est concernée, ce n’est pas l’ensemble de votre site qui va être totalement chamboulé, rassurez-vous.

Les grands avantages de cette évolution

À nous de jouer le jeu et de profiter de ces nouvelles options pour enrichir nos contenus : ajout de photos, vidéos, personnalisation des boutons et structure plus nette des articles.

Cela va dans le bon sens (très bon) d’une optimisation de votre présence dans les moteurs de recherche et donc de votre référencement naturel.

Organiser vos contenus et ajouter des éléments à forte valeur ajoutée vous permettra également de mettre en lumière toutes les informations importantes à partager avec vos lecteurs. Ils vous en seront reconnaissants.

Jetez un oeil à cette mise-en-page que nous avons créée pour vous montrer quelques exemples de contenus avec Gutenberg.

Afin de vous accompagner dans cette découverte, Colormyweb vous propose de tester directement Gutenberg. Nous avons conçu un site de démonstration rien que pour vous (sur demande).

Alors n’attendez-plus ! Passez à l’action et découvrez vite le nouvel éditeur de WordPress !

Sur simple demande par mail, nous vous adressons les codes du site
et nous vous expliquons comment faire.

Comment gérer plusieurs comptes de messageries depuis Gmail ?

Vous souhaitez centraliser vos différents comptes de messagerie depuis Gmail afin de gagner en productivité et ne plus avoir besoin de vous connecter sur différentes interfaces à la fois ? C’est très simple et la procédure est rapide. Cela est même possible à partir de vos comptes créées avec de multiples hébergeurs ou services web.

En tant qu’agence et indépendants dans nos activités, nous sommes souvent en déplacement pour donner des formations, des conférences, ou pour effectuer notre travail à distance et ce, parfois depuis l’étranger. Réduire la dépendance aux matériels et pouvoir se connecter à tout moment avec les adresses de nos différentes activités nous apparaît comme plus souple et efficace dans notre flux de travail aujourd’hui.

Partage en quelques images d’une procédure qui devrait vous séduire et vous faire gagner beaucoup de temps.

En 5 étapes, suivez le guide…

  1. Rendez-vous sur votre compte Gmail.
  2. Cliquer sur la roue à droite des paramètres puis sélectionner « paramètres » à la troisième ligne.
  3. Cliquer sur l’onglet « comptes et importation » : au choix, demander à Gmail de configurer votre compte comme adresse d’envoi ou seulement comme compte de réception des messages.
  4. Récupérer les données depuis votre compte source (par exemple, hébergement de votre site).
  5. Écrire à partir de n’importe quelle adresse.

2. Comptes et Importations

3. Définir les besoins : envoyer et/ou recevoir les e-mails

4. Ajouter les données et identifiants de votre compte source

Vous avez le choix entre utiliser certains scripts lorsque votre adresse email provient d’un nom de domaine et d’un hébergement web. Ceci-dit, la configuration manuelle est très facile, il faut juste être vigilant avec les fautes de frappe.

5. Sélectionner l’adresse du compte pour envoyer votre message

Ci-dessous, je reçois bien les emails avec mon adresse professionnelle
au même titre que mes autres messages

Quelques conseils pour gérer ces comptes

Une fois l’installation de ces différentes adresses e-mail effectuée, vous pourrez sans aucun problème écrire des messages en filtrant et choisissant à partir de quelle adresse vous souhaitez communiquer.

Grâce à cette fonctionnalité de Google et Gmail, finies les multiplications de comptes, connexions et logiciels à utiliser. Vous pourrez à la fois traiter vos emails personnels et professionnels au même endroit.

L’autre grand avantage est la gestion à distance de vos messages, où que vous vous trouviez.

Un rappel de sécurité cependant, pensez à toujours utiliser des mots de passe relativement longs et proches de phrases intelligibles, plus sécurisés que des prépositions du type : le prénom de ma fille ou ma date de naissance.

Enfin, lisez bien les instructions de votre hébergeur lorsque vous configurez votre compte à partir de votre nom de domaine du type : frederique@mon-exemple.com. Parfois, le serveur entrant est MAIL et non SMTP, ne remplissez-pas ce que vous propose Gmail par défaut mais basez-vous uniquement sur les données de votre compte-source (idem pour les ports).

+ Infos : voir la notice d’explication de Google

Alors, êtes-vous prêt.e à simplifier vos flux ? Bon courage dans cette configuration !

Conseil marketing : se débarrasser de la « surchage des choix »

strategie-tedx-marketing-conférence

Savez-vous combien de choix vous effectuez chaque jour ? Savez-vous combien de choix vous effectuez chaque semaine ? 

Un sondage a été fait auprès de plus de 2000 américains et le nombre moyen de choix que l’américain moyen déclare effectuer se situe aux alentours de 70 par jour !

Sheena raconte une expérience très interessante sur l’impact que peut avoir un trop grand nombre d’articles ou produits mis en avant.

Dans un magasin qu’elle fréquentait, 348 sortes de confiture étaient proposées. Un petit stand de dégustation juste à l’entrée du magasin fût mis en place et six différentes sortes de confitures étaient exposées d’un côté et 24 sortes différentes de l’autre.

Le premier constat était le suivant : les gens s’arrêtaient volontiers pour goûter la confiture quand il y en avait 24 (environ 60%) alors qu’ils ne s’arrêtaient qu’à 40% d’entre-eux quand il y en avait six.

Ce qui a été observé ensuite, c’est le processus d’achat. Et le constat est ici sans équivoque : parmi ceux qui s’étaient arrêtés quand il y en avait 24, seulement 3 % achetaient vraiment un pot de confiture. Parmi ceux qui s’étaient arrêtés quand il y en avait six, 30% achetaient effectivement un pot de confiture.

Les personnes étaient au moins six fois plus susceptibles d’acheter un pot de confiture s’ls en avaient six devant eux plutôt que s’ils en avaient 24.

Quelque soit votre secteur d’activité,  lorsque vous pensez à votre site internet, à vos produits ou services, vous mettre à la place de l’internaute ou de vos clients est fondamentale.

Il est essentiel que les catégories signifient quelque chose pour celui qui fait le choix, pas pour celui qui les propose.

Avez-vous déjà essayé de revoir toutes ces informations ? Avez-vous déjà réfléchi à comment mieux organiser vos contenus, vos entrées de menus, la hiérarchie des informations sur vos flyers pour que le public comprenne bien de quoi il s’agit, sans le noyer sous une surcharge de choix ?

Allez ! Munissez-vous de post-it et prenez un peu de recul et testez vos outils de communication avec des personnes qui ne parlent votre jargon ou qui ne sont pas de votre métier, vous verrez, c’est souvent étonnant !

Photopea, éditeur en ligne de vos fichiers PSD…

Qui n’a jamais rêvé de pouvoir éditer rapidement un fichier PSD (Photoshop) sans ouvrir l’application (si elle est installée) ?

C’est chose faite avec cet outil en ligne qui vous permettra d’éditer n’importe quel fichier PSD (Gimp et Sketch également).

Découvrez Photopea, un éditeur en ligne compatible PSD

Avec une présence de boîtes et options qui ressemblent beaucoup à celles d’ADOBE mais en version light et suffisante pour quelques manipulations basiques.

Par exemple, l’application ne propose qu’un seul format de documents (vous ne pourrez réaliser que des formats pour le Web #pixels et non pour le print) aucune option couche, colorimétrie, filtres professionnels…

Gratuit, disponible sur n’importe quel navigateur, l’import d’un fichier PSD est très fidèle et vous retrouvez les calques natifs crées précédemment.

Après quelques utilisations, cet outil ne permet pas de concurrencer Photoshop mais peut se reveler utile pour une démonstration ou pour vérifier un fichier etc… Il demeure loin de l’incontournable outil d’Adobe qui demeure l’outil des professionnels.

Quelles seront les tendances du Web Design et du graphisme en 2018 ?

agence-web-communication-paris-tours-poitiers

La force du monde digital et du design réside dans son pouvoir d’innovation et de surprise d’année en année. Parfois, des recyclages savants de styles ou de compositions, parfois des aboutissements de recherches graphiques empreintes ici et là… Même si les tendances peuvent sembler par essence éphémères, elles traduisent souvent les évolutions des habitudes et des technologies et les étudier nous permet de nourrir notre approche et notre propre créativité.

Côté images, une large part sera faite aux différents effets (double ton et double exposition…) et les amoureux de Photoshop vont prendre leur revanche sur le pur vectoriel. On prendra soin des visuels, qu’ils soient traités ou qu’il s’agisse de photos réalistes. Une large part est également faite à la vibrance, des couleurs éclatantes et des jeux de tonalité harmonieuse.

Côté animations, le GIF ne dit pas son dernier mot mais l’objectif est de l’utiliser tantôt pour illustrer et compléter, tantôt pour réellement jouer la carte d’animation.

Côté typo, on plonge dans les archives (années 80 et 90) et on ne se lasse pas des explorations avec une typographie audacieuse et plus d’empattement. Des effets liquides, riches, où la matière revient pour créer une ligne originale. La 3D vient parfois à la rescousse…

Enfin côté branding, les marques jouent la mobilité et leur logo se décline en 3, 4 formats afin de répondre aux impératifs d’affichage, on souhaite la bienvenue aux logos réactifs.

Petit tour d’horizon des principales tendances de design graphique de 2018…

Les nouveaux formats de logo réactifs (responsive logos)

Il ne fait plus aucun doute que le responsive design soit devenu un standard du web en 2018. L’augmentation époustouflante de la navigation mobile à travers un assortiment sans fin de périphériques et de tailles d’écran, a pourtant créé des problèmes d’utilisabilité critiques pour les sites Web traditionnels et les designers continuent d’optimiser et faire en sorte que les présentations s’adaptent le mieux possible à l’appareil de l’utilisateur. Et c’est souvent un casse-tête notamment pour les visuels et les logos.

L’idée de présenter des variantes de logos pour répondre aux mêmes exigences des utilisateurs est restée impensable… jusqu’à maintenant. Les entreprises ont ouvert la voie vers des versions modernes et simplifiées et la conception de logos réactifs est la prochaine étape logique pour répondre aux exigences d’aujourd’hui en terme de fluidité et d’expérience utilisateur. Il s’agit d’une tendance majeure qu’il faudra suivre à présent.

L’idée est donc d’enrichir la charte graphique avec des variantes du logo, proche du sigle pour la version mobile (et donc allégée, suppression de l’éventuelle baseline etc…) vers le logo officiel pour l’affichage bureau.

 

trends-tendances-webdesign-2018-#31trends-tendances-webdesign-2018-#31

Les images corrompues ou « Glich Corruption »

Jouer avec les filtres et les effets de distorsion, de trames ou de modelage pour un rendu étonnant et une touche d’originalité dans vos créations.

Il faudrait s’assurer quand même de ne pas juste s’amuser et donner un sens à l’image car on prend le risque de passer à côté de l’intérêt de cette technique. Attention à conserver une certaine lisibilité.

trends-tendances-webdesign-2018-#8trends-tendances-webdesign-2018-#8

L’effet « scrap »

Éclabousser, gratter, arracher, découper ou toute autre forme de jeu avec l’esthétique d’une composition sera considéré moderne en 2018.

trends-tendances-webdesign-2018-#8trends-tendances-webdesign-2018-#8

Effets « courbes et couleurs »

Créer l’illusion, jouer avec les couleurs et les superpositions : holographie, hallucination ou réalité déformée … Une des grandes tendances du design graphique l’année prochaine. La palette des courbes sera utilisée ici pour créer ce type d’effets.

trends-tendances-webdesign-2018-#8 trends-tendances-webdesign-2018-#8

Doubler la mise : les effets de double expo et double ton

Là encore, les amoureux de Photoshop vont retrouver leur place dans le monde du Webdesign car la manipulation des calques et de l’écrêtage demandent une certaine habilité et un sens esthétique réel.

Il s’agit de fusionner deux ou trois images pour créer cet effet d’inclusion. Cette tendance n’est pas nouvelle mais elle sera renforcée et plus utilisée encore en 2018.

trends-tendances-webdesign-2018-#8trends-tendances-webdesign-2018-#8

Parallèlement, on trouvera également la double exposition avec double tons,
L’effet est obtenu en doublant l’image ou en utilisant deux images chevauchantes différentes dans des couleurs monochromes.

Spotify revient au design traditionnel en utilisant des images en bichromie dans son application et ses micro-sites promotionnels. Les images créées dans une palette de couleurs limitée est agréablement complémentaire au design semi-plat.

 trends-tendances-webdesign-2018-#8 trends-tendances-webdesign-2018-#8

trends-tendances-webdesign-2018-#31

La typo dans tous ses états

La typographie créative figure parmi les leaders des tendances du design graphique en 2018 et conserve une des premières places.
Quand il s’agit de cette technique, l’imagination est votre atout le plus fort. La typographie créative peut être combinée avec d’autres techniques ou utilisée uniquement dans la conception.

Le choix sera ouvert et l’on pourra ouvrir toute sa créativité avec des textures ou de la 3D ou rester plus minimaliste encore. À noter également le retour des polices avec empattement élégantes et relativement classiques.

trends-tendances-webdesign-2018-#8trends-tendances-webdesign-2018-#8trends-tendances-webdesign-2018-#8

L’allégement des lettres, une typographie aérée minimaliste

La typographie minimaliste a été la grande tendance en 2017 et se confirme en 2018. L’art d’effacer des parties de lettres tout en gardant leur lisibilité demande beaucoup de créativité et de professionnalisme. L’effet minimaliste et épuré doit continuer de permettre d’identifier le message.

trends-tendances-webdesign-2018-#12 trends-tendances-webdesign-2018-#12

 

Le retour des très belles polices à empattements

Les concepteurs opteront pour des effets artistiques, des tailles de police extra-larges et des titres imposants. Les polices sans empattement inspirées par Helvetica ont dominé les espaces numériques, et même s’ils resteront à la mode, nous pouvons nous attendre à une plus grande variété de caractères dans les temps à venir et un retour de la belle lettre notamment des « Didones ».

police-tendance-webdesign trends-tendances-webdesign-2018-#33trends-tendances-webdesign-2018-#33

Place aux couleurs vives et à la 3D

Des couleurs vives et une composition en 3D sont des combinaisons gagnantes pour 2018. Un effet Pop et gourmand pour mettre en avant la matière et la richesse des tons. Ajouter à cela un effet métallique et vous êtes dans le cœur de la tendance.

trends-tendances-webdesign-2018-#16trends-tendances-webdesign-2018-#16

Transitions de couleurs et dégradés

En 2016, à l’époque du Flat design, Instagram a changé son logo et parié sur un dégradé coloré.  Personne ne pensait que cette tendance allait devenir si importante aujourd’hui. Très majoritairement utilisée dans les prototypes en UX, cette tendance gagne le terrain du Web et des maquettes. Le mariage des couleurs et des tonalités restent important si l’on ne veut pas obtenir des teintes entre-deux et monotones. Quant au Material Design, il n’a vraiment réussi son pari.

trends-tendances-webdesign-2018-#22trends-tendances-webdesign-2018-#22

Le grand retour de l’illustration

Une grande part sera faite aux illustrateurs (bien que cette tendance soit déjà amorcée depuis quelques années, notamment en UK et au Japon), pour tout type de support web ou print et pour le packaging. Des pictos simples, des petites illustrations légères viendront enrichir et contre-balancer l’apport massif des photos de ces dernières années. Parfois, ce sera le combo illustration + photo. Tout en finesse et en originalité…

trends-tendances-webdesign-2018-#24trends-tendances-webdesign-2018-#24trends-tendances-webdesign-2018-#24

trends-tendances-webdesign-2018-#27trends-tendances-webdesign-2018-#27

L’art du papier découpé, tendance confirmée

L’une des dernières tendances en matière de design graphique en 2018 sont les illustrations en papier ou illustrations « Papercut » créées à partir de différentes couches de papier, donnant ainsi relief profondeur à la composition. Là aussi, il s’agira d’adapter la technique à un besoin et l’on peut imaginer un logo, une carte, une affiche, une entrée de site internet etc…

trends-tendances-webdesign-2018-#29trends-tendances-webdesign-2018-#29

Le GIF léger, léger…

Plus question de concevoir des sites effet « sapin de Noël » mais plutôt enrichir une présentation, typiquement pour les évènements ou un site E-Commerce…

Les Micro Interactions sont omniprésentes et sont particulièrement utiles pour donner aux utilisateurs l’impression de manipuler une interface en fournissant des commentaires sur leurs actions. Souvent utilisées pour illustrer une application ou une interface, ces GIF donnent vie au système et c’est agréable pour l’utilisateur.

trends-tendances-webdesign-2018-#30 trends-tendances-webdesign-2018-#30 

EN CONCLUSION

Les tendances du design graphique 2018 seront d’une créativité folle : des designs hypnotisants, doux, hors de ce monde que nous pouvons seulement admirer. N’hésitez pas à partager vos propres créations d’art numérique selon les dernières tendances, ainsi que vos pensées dans les commentaires ci-dessous.

C’est surtout le retour aux métiers de l’image et le métier de graphiste et designer va retrouver ses lettres de noblesse face aux développeurs qui gagneront à travailler avec eux pour offrir un Web esthétique et fonctionnel.


Crédits photos

©Concept Arts – ©Nicolas Lalli – ©Louise Mertens – ©Billy Kidd – ©Helmo – ©Joel Velasco – ©Črtomir Just – ©Peter Tarka – ©Edward Luong – ©Tiffany Cooper – ©Moxie Sozo

Quelles couleurs choisir pour le logo ou la charte de votre site internet…

Choisir entre la couleur Bleu Facebook ou celui de Gap, trouver la couleur idéale pour l’accueil d’un site e-commerce ou encore concevoir un logo à la fois moderne et reconnaissable dans les couleurs de Vuitton, c’est le quotidien des designers qui sont à la recherche du Saint-Graal

Entre s’inspirer et suivre les recommandations, innover et ne pas commettre de fautes de goût, le choix de(s) couleur(s) pour le designer – qui doit déjà s’appuyer sur l’art de la lettre et la typographie en parallèle de cette recherche – doit se baser non pas sur les guides des marqueteurs mais sur un véritable sens de la composition.

Connaître quelques principes à remettre dans leur contexte

Se baser sur les guides qu’on nous présente comme étant des référentiels, c’est exactement comme vouloir habiller les uns avec tel uniforme, les autres en blouse blanche ou les filles toutes en rose.

L’art de la typographie et du maniement des couleurs est un jeu constant entre les principes et l’innovation, entre la mesure et le contraste, entre le commun et l’original…

Encore une fois, cela demande d’approfondir et ne pas suivre à la lettre ce qui est écrit, sans réflexion. Vous ne trouverez donc aucune jolie infographie sur la psychologie des couleurs dans cet article.

Parce que même si la psychologie de la couleur traite en effet des sensations liées aux différentes ondes (c’est d’ailleurs très intéressant), cela reste des schémas universels et toute l’histoire de l’humanité prouve qu’il n’existe que des histoires singulières. Se garder donc de généraliser.

Déclarer que le bleu est symbole de relaxation ou de confiance sans définir d’abord ce qu’est « le bleu » c’est aller un peu vite, j’imagine mal l’effet relaxant d’un bleu pétrole dans une chambre d’enfant !
De surcroît, un jaune paille peut lui aussi produire l’effet escompté.

Les études sur la psychologie des couleurs sont à remettre dans leur contexte parce qu’elles ont été menées avec des objectifs bien particuliers, notamment pour aider patients, enfants en souffrance, en thérapie, ou des salariés avec la gestion du stress…

Ne mélangeons pas les études et les applications, il faut rester prudent et comprendre que le branding et la communication (logo, site internet…) relèvent d’entrelacs complexes, au carrefour de l’art, de la maîtrise de la lettre et du talent.

Par ailleurs, ces guides (répliques les uns des autres) que vous trouverez sont malheureusement basés sur maximum 5 couleurs dont les trois primaires, et c’est oublier l’immense richesse de tonalités et de vibrance qui s’offrent à nous pour composer nos éléments graphiques.

Revenons un peu sur ces « vérités ».

Le noir, c’est pour le luxe

Elle reste pour moi, une idée reçue. Même si en effet, l’onde noire représente l’élégance ou le mystère (le théâtre utilise pourtant le pourpre), elle n’a plus forcément la préférence des designers pour ce secteur devenu complexe (des marques de luxe inconnues en Europe mais en Chine n’ont pas les mêmes référentiels, des besoins de rajeunir et séduire les plus jeunes n’orientent pas ce choix comme par le passé, le noir n’est pas accueilli de la même manière par les nouvelles générations etc…)

Lalique propose un site dans les couleurs beige, blanc et noir, Kenzo joue à Google dans ses produits, quant au Louvre, il se renferme (flippant) dans une communication dure et Céline reste claire et conserve le blanc.

 

louvre-site

kenzo-produit

fauchon-site

celine-site-branding

 

Si vérité il y a, ce sont les valeurs de la marque et son ADN profond qui déterminent la perception qu’ont les clients et les consommateurs. Ce n’est pas la couleur du logo ou des éléments du site mais plutôt la confirmation que ce choix implique. C’est parce que les marques sont connues ou les repaires établis qu’on les identifie.

On reconnaît Facebook parce qu’il est utilisé par un milliard de personnes, on ne se pose pas la question de la couleur de son logo. Les groupes ou marques qui choisissent le bleu pensent ainsi marquer l’inconscient, je doute que ce soit parce que ce sera bleu mais plutôt parce qu’elles ont une chance d’être rapidement associées à ce qui existe déjà. On ne réinvente pas la forme d’une bouteille, on l’adapte.

Pourquoi pas, mais c’est aussi le risque de perdre sa personnalité…

Le rouge c’est la passion, l’intensité. Oui, probablement. Mais quel rapport entre Coca Cola et Honda ou Pinterest, rouges tous les trois ? Aucun et ce ne sont pas les informations sur le rouge délivrées dans la jolie infographie des marketeurs qui nous le diront.

Pour Honda qui le souligne lui-même, le rouge c’est la fiabilité. Mais pour Pinterest, c’est la reconnaissance. Je doute également que le célèbre news Time Magazine ait choisi le rouge pour son éventuel symbole de dynamisme, car il reste un magazine conventionnel et ne brille pas forcément par ses courageux articles !

Une seule couleur, mais des variété de propositions ou d’identifications… Le sens donné aux couleurs peut s’avérer très subjectif.

Le goût et les couleurs…

« J’aimerai un logo dans les jaunes et verts parce que cela symbolise le soleil, la lumière, la nature… »

Combien de fois avons-nous entendu cette demande ?

Assez souvent.

Pourtant elle ne veut rien dire et n’aboutit que rarement au résultat souhaité. Tout comme la typographie possède ses règles, les couleurs répondent elles aussi à des critères de conception.

Sans entrer dans l’étude de la colorimétrie (évoquer comment l’œil et le prisme de la lumière fonctionnent), un premier rappel est bienvenu : trois couleurs primaires Rouge, Jaune et Bleu composent à elles trois, toutes les autres couleurs par un dosage précis de leur présence respective. Ainsi, pour obtenir un orange clair, on peut mixer 100% de Jaune et 20, 30 ou 40% de rouge.

Chaque « dosage » des trois couleurs mélangées entre elles donnent naissance à une couleur et la finesse du curseur crée ainsi un camaïeu riche en variations.

couleurs-orange

La couleur n’est pas isolable comme un objet identifié. La couleur a sa vie propre et communique avec ses voisines. Tantôt elle réchauffe l’oeil, tantôt nous refroidit… Mais si elle est bien accompagnée, ses qualités se voient renforcées et dans le cas contraire, ses « défauts » appuyés.

De surcroît, la ou les couleurs ne seront pas perçues de la même manière en fonction du contexte dans lequel elle(s) existe(nt).

Le contexte global et la couleur visée

Dire du « vert » qu’il est symbole de nature est valable mais si le vert choisi est sapin, il pourrait vite nous faire penser aux pharmacies (en France, en tous cas).

couleur-vert

Le « vert » n’est pas seulement synonyme du monde bio et végétal et dans un autre contexte, en fonction de ses valeurs (pourcentages des couleurs primaires), il peut devenir énergisant (vert acidulé) ou relaxant (forêt).

Par exemple Spotify joue sur la vibrance de la couleur verte (à peine mentholée) de son logo (avec un léger effet néon) pour évoquer la modernité et jeunesse de son univers musical.

branding-logo

Starbucks joue sur le réconfort et la paix, ses cafés sont des lieux qui nous donnent cette idée d’être « comme à la maison ». La marque est devenue symbole de confort pour beaucoup d’entre-nous.

logo-strarbucks

Le contexte dans lequel on évoque telle ou telle couleur est fondamental. Il s’agit aussi d’identifier les valeurs des trois primaires présentes à travers leur chaleur ou leur froideur, plutôt que de chercher absolument la bonne couleur en fonction des croyances communes et des perceptions. Il faut creuser plus profondément le message final que l’on souhaite délivrer à travers cette composition.

Aussi, se baser sur la notion de couleur sémantique ou avancer une affirmation du type « le marron, c’est pas vraiment une couleur…»

Louis Vuitton devrait alors revoir ses codes couleurs (depuis 1852) et sa communication globale, ma foi ! Et les attelages de luxe devraient peut-être se mettre au bleu !

louis-vuittonattelages

Ne vous méprenez pas sur mes intentions, je ne cherche pas à défendre ici le luxe et tout le monde n’a évidemment pas le budget de Vuitton, cependant le style, la finesse et l’excellence ne coûtent rien. Ces qualités se cultivent et elles naissent de créations sorties du cerveau des designers qui ont appris, qui ont éduqué leur culture graphique et artistique ainsi que leur regard. Ce n’est pas une histoire de sous mais de goût. Comme le bon chocolat couleur marron…

Identifier les teintes et les lumières…

Évoquer le jaune, ou le bleu ne veut rien dire – isolément. Vous lirez souvent que le bleu est signe de fiabilité. Probablement, et c’est la raison pour laquelle Facebook,Twitter ou Helwett Packard l’utilisent mais n’oublions pas qu’elles sont des industries Corporate et organisations qui ont besoin d’acquérir un capital confiance international.

Reprendre le bleu de Facebook pour une usine de plastique en Lozère pourra vite devenir un signe de manque de personnalité. Et nous rappeler trop Facebook 🙂

Et puis, 

Bleu oui, mais quel bleu ?

Le logo de Gap n’a rien à voir avec celui de Windows, pas plus que celui d’Ericsson avec IBM… Et pourtant, ils sont tous bleus. Leur objectif est de garantir une sensation commune de rassurance, sans aucun doute, mais ils demeurent différents et identifiables, autrement que par le seul critère de couleur.

Encourager à utiliser cette couleur pour asseoir la confiance ou l’honnêteté, n’est-ce pas procéder à l’envers en invitant autrui à se rapprocher de ces logos parce que la marque est déjà (re)connue et par effet de mimétisme, reproduire ce qui fonctionne pour d’autres sans se poser fondamentalement la question des valeurs avant celle de la couleur ?

Pourquoi le bleu de Facebook serait-il plus rassurant que le marron de Vuitton ou le vert de Land Rover ?

À l’heure où j’écris cet article, la marque Helwett Packard est en chute de fiabilité et connaît l’un des taux de pannes les plus importants dans son domaine d’activité.

logo logo logo logo

Au delà de la simple nomination des couleurs sémantiques, c’est bien l’alchimie que donnent les jeux de couleurs qui est surprenante et nous oblige à observer de plus près les sensations de chaleur ou de froideur qu’elles nous procurent. 

Couleurs nuances

Il y a autant de différence entre le jaune de Naples (#FFF0BC) clair et presque crème et le jaune paille (#FEE347) vif et équilibré que le bleu azur (#1E7FCB) et le cobalt (#22427C) classé dans les bleu marine…

Entre le vert amande (#82C46C) assez terne qui n’a rien à voir avec le vert prairie ( #57D53B) lumineux et vif.

Ou encore le rouge cardinal (#B82010), le rouge grenadine (#E9383F) ou le magenta (#C71585) au carrefour du rouge et du violet…

L’approche à travers les cultures

Le joli guide servi sur les blogs de marketing ne retient-il que la psychologie des couleurs occidentale ? Car en regardant vers l’est, on observe que le blanc ne signifie pas la même chose en Inde qu’en Europe…

Pardon ? Mais le blanc, c’est blanc !

Saviez-vous que les Inuits possèdent 17 mots dans leur langue pour décrire le blanc (qui varient selon les conditions de neige) ?

En Europe, nous associons le blanc à la pureté, à l’opposé du noir que nous relions souvent à la mort. Ces associations sont tout à fait relatives puisque c’est l’inverse pour le blanc en Corée ou en Chine, qui est associé au deuil, alors qu’en Afrique du Sud, c’est le rouge qui lui est associé.

Le contexte joue un rôle fondamental, surtout lorsqu’il est culturel et le choix d’une couleur se fait en fonction de son champ d’action, du périmètre de sa marque ou de ses futures conquêtes commerciales.

Je vous invite à lire un très bel article sur la signification des couleurs à travers le monde si vous souhaitez approfondir ces différences. 

Les valeurs d’abord, la couleur en second…

Après maintenant de belles années d’expérience, je constate que la question de départ est souvent mal posée. Qu’est-ce qui compte finalement ?

À chaque conception de logo ou de site internet, je pousse le client à s’interroger sur ses valeurs, ce qui est important pour lui, qu’elle est la plus-value qu’il apporte à ses propres clients…  Je constate alors que certains tombent malgré eux dans le piège de ce qui se fait déjà. Car ils sont conditionnés. Je le suis probablement moi aussi, mais c’est justement mon rôle de faire ce travail d’isolement et de tri.

Je commence très rarement une création graphique à partir des notions de couleurs. J’interroge mon client pour définir et préciser sans ambiguïté avec lui ses valeurs, les termes qui peuvent le définir ou définir son activité (Féminin, Classique, Jeune, Luxueux, Calme, Moderne, Sérieux etc..) et j’analyse quelles sont les caractéristiques de sa marque, son organisation ou son actuelle communication.

Le rôle du Designer est de se débarrasser de tout ce qu’il connaît afin de ne pas laisser les références inconscientes prendre le dessus et tomber inévitablement dans la réplique de l’existant.

Souvent, je pose les choses, les laisse quelque temps puis j’y reviens car c’est à ce moment là que les erreurs me sautent aux yeux.

Regarde la concurrence, s’en inspirer permet de remettre la création dans un contexte plus large mais sans copier car chaque entreprise, chaque marque est unique et le véritable enjeu est de lui permettre justement de se démarquer.

Puis le temps fait son travail. Je me demande par exemple si le fait de changer réellement de couleur pour une marque provoquerait-elle une rupture avec son public, si demain Facebook changeait toute sa communication globale en « vert », est-ce que cela changerait son rapport de « confiance » (si tenté de dire qu’il existe encore) que seul le bleu serait censé apporter ? 

Il n’existe pas de réponse vérifiée à ce jour sur ces changements de branding, sauf lorsque les marques se sont rajeunies et procédé à de savants liftings, il est très difficile d’affirmer aujourd’hui que telle couleur ou telle autre sera le bon choix.

EN CONCLUSION

Au-delà de la couleur, c’est véritablement le contexte et la composition qui sont à prendre en compte.

En amont de toute création, il est essentiel de définir le périmètre, lister les valeurs défendues et d’orchestrer avec talent : typographie, couleurs et composition pour délivrer une réalisation unique et solide. 

Les éléments du style typographique par Robert Bringhurst

Robert Bringhurst [1946 -] est un auteur et poète canadien passionné de typographie. En 1992, il publie The Elements of Typographic Style, ouvrage considéré aujourd’hui comme une référence magistrale.

Outre des informations précieuses que nous offre l’auteur, c’est également l’occasion pour lui de nous faire part de sa vision de la typographie qu’il relie à des considérations plus larges touchant l’histoire des formes et des idées, le langage, l’esthétique, la vie…

Et plus objectivement, il aborde évidemment les questions essentielles de composition : quel caractère typographique choisir ? Comment faire un choix dans la multitude des possibilités offertes ?

Robert Bringhurst apporte des éléments de réponses élaborés et ouvre des pistes pour nous permettre de construire une réflexion sur ces sujets.

Ce guide (régulièrement mis-à-jour) combine l’aspect pratique, théorique et historique, avec une exploration approfondie des dernières innovations. Il est un must-have pour les designers et graphistes, les éditeurs et amoureux de la lettre…

 

Qu'est-ce qu’une bonne typographie ?

Une des principales erreurs commises dans l’apprentissage de la typographie et de ses règles est de se concentrer essentiellement sur les polices de caractère elles-mêmes, sans apprendre les fondamentaux de l’art de la lettre.

Appréhender les polices (pour leurs effets apparents) sans en saisir le rôle, leur place dans l’architecture globale d’une présentation, sans mesurer leurs forces ni faiblesses, c’est risquer de provoquer des erreurs de goût, de style et de compréhension dans le message à délivrer…

Les polices de caractère sont évidemment importantes et font partie des propriétés essentielles de la typographie. Il existe aujourd’hui plus de 3 000 polices différentes sans compter les familles liées à la langue, comme le coréen, l’hébreu ou l’arabe.

Même si dans la jungle des polices, vous trouvez certaines très distinguées, belles ou originales, il se peut qu’elles ne conviennent pas pour autant à votre message, site ou création graphique. Car chaque police raconte une histoire propre et il est important d’en saisir l’essence. Cela suppose d’en connaître ses origines, son auteur, l’époque de sa création et d’étudier un peu plus profondément les caractères qui la composent.

Apprendre d’abord les principes fondamentaux de la typographie vous permettra d’acquérir de bons réflexes dans le choix de vos polices. Cela sous-entend d’avoir bien en tête l’objectif même de votre présentation (site ou logo…).

Quelle est le but de la typographie ?

Par le passé, elle définissait surtout le procédé de composition et d’impression sur des formes en relief (gravures, clichés…) mais aujourd’hui, son acception vise toute conception graphique (d’un ouvrage, d’une publication) en choisissant les caractères, les corps, la présentation, en déterminant la dimension du texte, les illustrations (et leur position dans la page).

Doucement, nous sommes passés d’une définition technique à une véritable discipline artistique de la typographie : assemblage, mise-en-page, composition… dont le savoir-faire va donner cette solidité à l’ensemble et créer ainsi une réelle harmonie.

Le premier objectif est de concilier force, esthétisme et solidité. Le but est de permettre au texte de communiquer le message souhaité, à permettre aux lecteurs de s’immerger dans le contenu.

La typographie est la manière dont est composé un texte à travers la qualité des caractères et de la mise en page.

Les choix qui sont alors faits pour composer le texte vont transmettre certaines émotions, mais seulement à une autre condition : que le texte soit facile à lire.

Comment composer un texte facile à lire ?

En ce qui concerne la conception sur le web (et qui reste valable bien évidemment pour l’imprimé), il existe trois propriétés qui rendent le texte plus lisible :

  1. la taille de la police – propriété CSS {font-size}
  2. l’interligne – propriété CSS {line-height}
  3. la longueur de votre texte – colonne et propriété CSS {width}

Nous pouvons commencer le processus de composition dans l’ordre suivant : en déclarant la taille de police de caractères, suivie par la longueur du texte puis de l’interligne. Cela permet déjà de se rendre compte du « gris » ainsi crée.

La taille de la police

Le premier facteur est la police de caractère elle-même : certaines fontes semblent beaucoup plus grandes que d’autres, alors qu’elles ont le même corps de texte. N’hésitez-pas à poser quelques polices standard dans un fichier HTML simple. Dans l’exemple ci-dessous, la taille est celle du navigateur laissée par défaut à 16px et pourtant Arial, Cochin, Helvetica, Courier et Times ne semblent pas « avoir la même taille » !

taille-polices-typographie

Le second facteur est la distance entre votre écran et vos yeux. Tester une police de caractère dans certaines conditions influencent évidemment la perception que nous aurons du texte. N’hésitez pas à jouer avec votre clavier (Ctlr + ou – et Cmd + ou – pour Mac) pour réduire et augmenter le texte à l’écran.

 

typography

 

Alors comment savoir si la taille de police de caractères est trop grande ou trop petite ?

  1. Votre taille de police de caractères est trop petite si : Vous devez plisser les yeux ou bien vous devez faire un zoom pour lire.
  2. Votre taille de police de caractères est trop grande si vous fixez votre attention sur les lettres au lieu de lire le contenu, vous ne pouvez lire qu’un à trois mots à la fois ou encore lorsque vous butez en essayant de lire rapidement.

Le colonnage (la longueur de ligne)

Une autre propriété à vérifier dans la composition de votre texte est la mesure de vos colonnes, elle se réfère au nombre de caractères sur une ligne.

Idéalement, la mesure idéale d’une colonne ou bloc se situe entre 45 à 75 caractères. Un caractère équivalent à 0.5em, nous pouvons déclarer cette propriété en CSS et définir une largeur entre 22.5em à 37.5em.

Plus la ligne est longue, plus vous perdez en lisibilité de part la lecture plus cadencée de l’œil qui devra parcourir plus de caractères, l’oeil étant habitué à deviner un ensemble de mots créant un ensemble de phrases donc de concept.

Comment savoir si la colonne de texte est bien calibrée ?

  1. Votre colonne est trop courte si : vous êtes agacés parce que le texte casse alors que vous avez développé une vitesse de lecture confortable. Vos yeux sont fatigués de rebondir de gauche à droite rapidement.
  2. La mesure est trop longue si vous avez dû tourner votre tête en lisant le texte ou vous perdez votre concentration à mi-chemin en lisant une ligne le pas final est de mettre votre interligne.

L’interligne

L’interligne représente l’espace qui se situe entre les lignes de votre texte. C’est la propriété line-height qui est utilisée en CSS.

L’interligne idéal se situe entre 1.2 à 1.6 selon la police de caractères, la taille de police de caractères et la longueur de colonne utilisée.

Comment savoir si l’interligne est trop grand ou trop étroit ?

  1. Votre interligne est trop étroit si le texte semble trop dense et comme serré.
  2. L’interligne est trop grand si les blancs entre les mots vous distraient du contenu.

Se perfectionner dans la composition de nos publications…

La première étape que nous venons d’appréhender est l’entraînement de son regard sur l’ensemble du contenu.

En presse et imprimerie, on parle du « gris typographique », il s’agit d’une perception fine du texte que nous sommes en train de parcourir : plus le paragraphe semble noir, plus l’interligne est serré et la densité des mots forte, a contrario, plus la perception d’un gris clair est ressentie, plus il y a d’aération et de blancs.

Soumettez vos textes et propositions à vos proches et observez comment ils parcourent votre site Web ou vos pages. Procéder ainsi vous permettra de ne pas uniquement vous baser sur votre propre perception.

Plisser les yeux sur les articles et titres de journaux quotidiens et interrogez-vous sur ce qui vous « sautent » aux yeux ou sur ce qui, au contraire, vous semble trop petit ou serré. Apprendre à regarder.

Petite conclusion…

Apprendre à voir les nuances entre les polices de même famille, à différencier les lettres, mesurer le rythme entre les lignes, percevoir les blancs, les espaces… cela prend quelques années d’entrainement mais cette observation est inévitable pour apprendre véritablement la composition en typographie.

Rechercher une bonne typographie dans un texte, c’est résoudre une équation harmonieuse entre le corps de la police, le rythme vertical des lignes et la répartition du nombre de caractères sur une colonne. Il faudra rechercher un certain esthétisme et jouer quelque fois avec la hauteur des lettres elles-mêmes qui deviennent alors une véritable matière première à modeler. Avec savoir-faire, bien sûr, car la lettre ne se laisse pas si facilement manipuler.