Un blog qui parle de webdesign, graphisme, méthodologie ...
ARTICLES TROUVES
Article(s) de septembre 2008 :
Introduction
La profondeur est un procédé utilisé par les graphistes pour donner du volume aux objets ou simuler l’éloignement des différents plans de l’image. C’est une astuce graphique largement utilisée en webdesign.
Ce qu’apporte la profondeur
Le webdesigner élabore des visuels destinés à être affichés sur un support en deux dimensions: l’écran. Cependant, grâce a des astuces graphiques, il est possible de donner aux objets dessinés une illusion de profondeur et de volume comme si ils évoluaient dans un univers en trois dimensions.
Donner du relief à un objet permet de le détacher de l’arrière plan et ainsi d’augmenter sa visibilité. Cela aura pour conséquence d’attirer l’attention de l’internaute.
Simuler la profondeur permet aussi de donner plus de réalité à son design. En effet, nous évoluons au quotidien dans un univers en trois dimensions et sommes donc habitués à cette forme de représentation des choses.
Dans certain cas, la profondeur peut améliorer l’affordance* d’un objet. Je pense par exemple aux boutons de formulaire. Dessiner un bouton en volume donne à l’internaute un indice sur le rôle et la façon d’utiliser l’objet représenté comme étant un bouton.
Enfin, je pense qu’un objet ou un environnement dessiné avec une illusion de perspective donne une esthétique à laquelle nous sommes particulièrement sensibles.
Pour résumer, je dirais que la profondeur peut être utilisée en webdesign pour:
- Faire ressortir un élément dans la page.
- Attirer l’attention de l’internaute sur une zone particulière de la page.
- Augmenter l’esthétique du design en lui donnant plus de réalisme.
- Améliorer l’affordance* de certains objets.
(* Affordance : capacité d’un objet à suggérer sa propre utilisation.)
Comment simuler la profondeur ?
La profondeur qui m’intéresse dans cet article est celle qui donne du relief aux objets et non celle qui simule l’éloignement des différents plans d’un environnement. Je ne parlerai donc pas de perspective simulée par les points et les lignes de fuite, ni de perspective atmosphérique ou de superposition des objets.
Ce qui m’intéresse ici est davantage les techniques graphiques qui permettent de donner du modelé à un objet et de le détacher de son arrière plan pour donner l’impression qu’il flotte au dessus de celui-ci.
La technique est assez simple. Il suffit de dessiner sur l’objet des ombres propres pour lui donner du modelé et de dessiner sur les surfaces environnantes des ombres portées pour simuler la troisième dimension.
Ombre propre
Pour donner du modelé à un objet utilisez l’outil gradient de votre logiciel de traitement d’image. Cela simulera la variation d’éclairage sur les différentes surfaces de l’objet.
Ombre portée
Pour donner une troisième dimension à un objet dans son environnement, rajoutez lui une ombre portée.
Avec quelques effets simples, notre applat gris s’est transformé en une surface courbe dont les bords droit et gauche se détachent de la surface blanche sur laquelle elle est posée.
Exemples d’utilisation de la profondeur en webdesign
Sur le site www.puc.edu la profondeur est utilisée pour faire ressortir le cadre principal, de l’image affichée en arrière plan.
Sur le site www.hypr.com c’est le logo qui est mis en avant grâce à sa représentation en trois dimensions.
Sur le site www.iconeden.com, la profondeur met en valeur les cadres de contenu et favorise l’affordance des boutons.
Le site www.degroupnews.com est un site de type magazine. Il comporte beaucoup de contenu. Cela risque de provoquer une surcharge cognitive chez l’internaute si certains éléments ne se détachent pas de l’ensemble. Ici, le webdesigner a choisi la profondeur pour mettre en avant le contenu de la colonne centrale qui semble avancer vers nous et se détacher du reste de la page.
Vouloir créer un site web est une chose, savoir quel contenu il contiendra en est une autre. Le contenu d’un site web est sa raison d’être. Sans contenu, pas de site. La préoccupation du contenu n’est donc pas à prendre à la légère.
Introduction
La décision de créer un site web, qu’il s’agisse d’une association, d’une entreprise privée, d’une administration, d’un organisme est souvent motivé par le souci d’être présent sur la toile. Ne pas être présent sur internet, c’est risquer de renvoyer à ses utilisateurs, à ses clients une image un peu ringarde.
C’est pourquoi beaucoup de site web existent parce qu’il faut être présent sur internet mais dont le contenu laisse à désirer et ressemble à une juxtaposition d’informations sans liens ni objectifs bien définis.
Pour concevoir un site efficient, il faut passer du temps sur la définition, les objectifs, l’organisation et la rédaction de son contenu afin de répondre à un véritable besoin des utilisateurs.
Le contenu est roi et constitue la véritable richesse de votre site. Le site n’est qu’une enveloppe qui doit se mettre au service du contenu pour le mettre en valeur. Il serait donc absurde de construire un site sans savoir quel contenu on va y mettre.
Prenons une analogie. Imaginez une famille qui veut faire construire une maison pour y vivre de la façon la plus confortable possible. Cette famille est constitué d’un couple, des ses trois enfants et du grand-père. Avant de construire, la famille va réfléchir avec un architecte sur les plans de la maison. Ils prévoient à l’étage 3 chambres pour les enfants, et deux chambres en rez-de-chaussé pour le couple et le grand-père. Ainsi le grand-père n’aura pas d’escalier à monter et les parents seront à l’abri de l’agitation des enfants. Le garage est prévu suffisamment grand pour accueillir un atelier, un sellier et les deux voitures du couple. Au vu de la composition de la famille (par analogie le contenu) la maison (par analogie le site) est prévue pour rendre la vie de la famille la plus confortable possible avec une organisation spatiale adapté.
Imaginons maintenant que la maison soit construite sans réflexion préliminaire mais avec des chambres, un garage … Lorsque le couple veut s’y installer, il se rend compte que la deuxième voiture dépasse du garage, que la maison ne comporte que 4 chambres en étage et que les murs sont tapissés de moquette alors que le petit dernier est allergique à la poussière.
Bref c’est l’enfer, le grand-père tombe des escaliers en se rendant aux toilettes, les enfants réunies dans la même chambres se tapent dessus toute la journée et le père de famille perd son boulot suite à une dépression nerveuse.
Créer un site sans se préoccuper du contenu, c’est mettre la charrue avant les bœufs.
Quel contenu mettre dans son site ?
Pour déterminer la pertinence d’un contenu, il faut se concentrer sur ses objectifs et les besoins de l’utilisateur. Pour cela procédez par étapes.
(Ces étapes sont largement inspirées de la méthode proposée par Vincent Bénard sur le site Veblog dans l’article « Comment choisir les contenus de votre site web ?« . Je vous propose ici une retranscription personnelle. N’hésitez pas à aller faire un tour sur les archives du site qui sont pleines d’enseignements malgrè l’arrêt du blog depuis plusieurs années « )
Étapes de réflexion pour définir son contenu :
1. Quels sont les objectifs du site auprès de vos utilisateurs ?
La première question à se poser est « A quoi va servir mon site, qu’est ce qu’il est censé proposer aux utilisateurs ? »
Amélie Boucher, consultante ergonome, parle dans son livre « Ergonomie Web » de l’utilité globale de votre site, c’est à dire de l’objectif principal du site qui est généralement déterminé par l’idée qui a sous tendu la création du site. Cela peut être : vendre ma production de fromages, trouver un gite en France, présenter le programme de formation de ma société, fournir des informations techniques pour les ingénieurs de mon service production …
Pour trouver les objectifs de votre site, ne pensez pas en terme de moyen mais en terme de finalité. Penser finalité c’est par exemple se dire: « Mon site doit me permettre de vendre mes produits, de fédérer une communauté autour d’un sujet, de collecter des adhésions pour mon association, de fournir des informations pratiques aux citoyens, d’améliorer le service après vente, me face économiser des frais d’impression de documentation … » penser moyen, c’est se dire: « Mon site doit être moderne pour plaire à mes utilisateurs technophiles, mon site doit être rapide pour répondre aux sollicitations d’un maximum d’internautes … »
Il peut y avoir plusieurs objectifs mais il existe toujours un objectif principale qui correspond à l’utilité générale du site. Si vous définissez plusieurs objectifs, énumérez les tous puis classez les par priorité. L’utilité globale du site doit se trouver en tête des priorités.
2. Quelles actions souhaiteriez-vous proposer à vos utilisateurs ?
La seconde étape consiste à réfléchir sur les actions que vous souhaiteriez que vos utilisateurs effectuent sur votre site. Pour cela il faut penser « verbes ». Je souhaiterais que l’utilisateur :
- Achète mes produits
- S’inscrive dans mes formations
- Lise les actualités de la commune
- Consulte les réalisations de mon portfolio
- Saisisse une demande de devis
- Télécharge les notices d’utilisations de mes produits
- S’abonne à notre magazine …
La aussi, pensez finalité et non moyen.
3. Quels sont les éléments qui vont favoriser ces actions ?
Il s’agit maintenant de déterminer quel petit plus (en terme d’utilité) vous allez pouvoir offrir à vos utilisateurs pour résoudre leurs problèmes, leur faciliter la tâche, leur fournir l’information dont il ont besoin… Vincent Bénard appel ce petit plus un « déclencheur ». C’est ce déclencheur qui va favoriser l’action souhaitée de la part de l’utilisateur.
Amélie Boucher, consultante ergonome, parle dans son livre « Ergonomie Web » de micro utilité. Les micro utilités viennent compléter l’utilité globale pour offrir à votre service une valeur ajouté. Il s’agit de ces petits bonus qui vont se mettre au service de votre utilité globale. Vous avez quelque chose à proposer, comment faire pour que votre offre soit la plus adaptée possible aux besoins de l’utilisateur. Quelle utilité complémentaire vais-je pouvoir proposer à mon utilisateur pour le satisfaire un maximum.
Cela peut être par exemple sur un site de e-commerce de produits alimentaires, la possibilité d’enregistrer des listes de courses personnalisées pour ne pas à refaire son panier à chaque commande. L’utilité globale du site est de permettre l’achat de ses courses alimentaires en ligne, une micro utilité est de pouvoir enregistrer sur son compte une liste de produit fréquemment achetée que l’on réactive à chaque nouvel achat pour remplir directement son panier des produits de bases que nous consommons à chaque commande.
Pour trouver des micro utilités (éléments déclencheurs des actions souhaités), il faut être capable de déterminer les profils et les caractéristiques de ses utilisateurs. Il faut arriver à se mettre à leur place et trouver les problèmes auxquels ils sont confrontés dans leur quotidien afin de trouver des solutions à travers ces micro utilité. L’ergonomie utilise pour cela la technique des « Personas » qui sont des profils types d’internautes pour qui on définie un scénario d’utilisation de votre site et des besoins précis.
Donc posez-vous la question, de quoi sont demandeur vos utilisateurs, quels sont leurs problèmes, leurs besoins, leurs habitudes ….
Attention réfléchissez ensuite au rapport utilité/cout de réalisation. Pour qu’une micro utilité soit retenue, il faut que celle-ci soit vraiment pertinente pour l’internaute par rapport à son cout de développement et de mise en place.
Ou trouver le contenu ?
Ces recommandations sont largement inspirées du livre « Ergonomie Web » d’Amélie Boucher :
Inspirez-vous de l’existant
Commencer par reprendre ce qui existe : site internet, plaquette commerciale, journal interne … et faite le tri. Certaines choses pourront être reprises, d’autres non. Vous devrez également penser à réecrire le texte pour l’adapter au média web.
Sollicitez tous les acteurs du projet
Plus vous serez nombreux à réfléchir, plus vous récolterez d’idées. N’hésitez pas à organiser un brainstorming avec l’ensemble des acteurs du projet.
Mettez-vous à la place de vos internautes
Utilisez la technique des personas pour imaginer des profils types d’utilisateur, leurs besoins, leurs habitudes de navigation.
Pour en savoir plus sur l’utilisation des personas :
- Personas: pas seulement pour une Vision partagée des Utilisateurs…
- Extending a technique group personas
- An introduction to personas and how to create them
Inspirez-vous des besoins exprimés par vos utilisateurs
Interrogez les personnes qui sont le plus en contact avec vos clients. Quelles sont les questions les plus posées ? Quelles sont les problèmes les plus fréquents ? Vous pouvez aussi initier une enquête pour récolter leurs besoins, leurs manques, leurs satisfactions-insatisfactions.
Étudier ce qui se fait ailleurs
Regardez ce qui se fait chez vos concurrents directs mais aussi chez ceux qui offrent les mêmes actions que vous. Vous vendez du fromage, chercher des sites concurrents vendeurs de fromages mais aussi des sites qui se positionnent sur des activités similaires aux vôtres: vendeurs de chocolats, de bricolage, de vêtements … Ce qui compte c’est d’observer ce qui se fait, de repérer les bonnes idées et de s’en inspirer.
Comment présenter, rédiger son contenu ?
Le média web utilise des écrans pour afficher les informations. Les écrans, qu’ils soient d’ordinateur, de téléphone mobile, de PDA ou d’autres machines électroniques sont du fait de leur taille très variable et de leur mode de fonctionnement, d’un confort de lecture moindre que le support papier. Pour cette raison, les utilisateurs ne lisent pas de la même manière les informations sur un média web et sur un média print.
Le média web est aussi une source infinie d’informations. Cette abondance nous oblige à parcourir plusieurs sources afin de choisir celles qui seront les plus proches de nos attentes. Les résultats de recherche dans les moteurs ne sont pas toujours pertinents et nous demande un travail de tri. De plus, nous consultons souvent internet pour gagner du temps et obtenir des informations sans avoir à se déplacer.
Toutes ces caractéristiques font qu’un internaute, lorsqu’il arrive sur une page web, ne lira pas en détails le contenu de la page mais scannera l’information pour évaluer rapidement si il est au bon endroit pour trouver ce qu’il cherche. Le scanne des pages existe aussi sur les supports print mais il est accentué sur le média web. L’internaute sera donc sensible aux indices visuels pour parcourir et évaluer la pertinence du message. Lorsqu’il aura trouvé l’information pertinente, il lira le texte en profondeur.
Recommandations pour rédiger du contenu web :
Utiliser un vocabulaire simple
L’internaute est pressé et veut obtenir ce dont il a besoin le plus rapidement possible. Rédigez donc votre texte en ne mettant que ce qui est nécessaire. Évitez les répétitions, les évidences ou les détails superflues.
Soyez simple et concis. Évitez les mots techniques, le langage spécialisé, les formules littéraires compliquées surtout si votre publique est généraliste. La lecture doit être facile et rapidement compréhensible.
Les internautes préfèrent également un ton direct et personnel plutôt qu’un langage trop formel.
Aller à l’essentiel
Essayez de dire le maximum de choses en un minimum de mots.
Allez droit au but et minimisez le discours marketing. Les internautes ne croient plus aux belles promesses publicitaires. Parlez vrai et simple et laissez l’internaute se faire sa propre idée.
Formater le texte pour le rendre plus lisible
Pour aider l’internaute à scanner vos pages, hiérarchisez l’information et structurez votre texte. Pour cela, utilisez les titres et sous-titres, les énumérations à l’aide de liste, aérez votre texte en faisant des paragraphes courts, faites des phrases courtes.
Pour une meilleure lisibilité, assurez-vous d’avoir suffisamment de contraste entre le texte et l’arrière plan, utilisez une police suffisamment grande, n’ayez pas des paragraphes trop longs horizontalement.
Utiliser la technique de la pyramide inversée
Jakob Nielsen, ergonome Américain, préconise de commencer ses textes par la conclusion puis de dévoiler les faits qui vont l’appuyer. Ainsi vous donnez au lecteur « l’essentiel » des les premières lignes. Si cela l’intéresse, il continuera sa lecture.
Conclusion
Lorsque vous voulez créer un site, portez un soin particulier au contenu. Ce n’est pas le site qui décide du contenu mais le contenu qui détermine la façon dont votre site sera construit.
Pour déterminer le bon contenu, pensez d’abord aux besoins de vos utilisateurs. Vous faite un site pour eux avant-tout. Réfléchissez à ce que vous allez proposer, est-ce que le discours du président du groupe intéressera l’internaute qui veut acheter un téléviseur ?
Pensez également à adapter la rédaction de votre contenu aux habitudes de lecture de vos internautes.
Enfin, ne prenez pas toutes ses règles au pied de la lettre. Chaque type de site a ses particularités et nécessite des adaptations.
Sources :
- Ouvrage « Ergonomie web » – Amélie Boucher – Eyrolles
- Ouvrage « Site web: priorité à la simplicité » – Jakob Nielsen et Hoa Loranger – Campus press
- Site Veblog de Vincent Bénard
- Site Ergologique
Le mot Gestalt qui signifie « forme » en Allemand est aussi une théorie qui définit un certain nombre de lois sur la perception humaine. Nous allons voir dans cet article comment certaines de ces lois peuvent être utilisées dans le langage graphique.
Introduction
Pour faire simple, la Gestalt est une théorie, une école de pensée, qui étudie comment les humains perçoivent les choses. Les théoriciens de la Gestalt prêchent que notre perception ne se concentre pas sur des « points isolés », mais par une vision du « tous ».
Lorsqu’un observateur regarde une composition graphique, il a tendance à ordonner les éléments de cette composition afin de faciliter et clarifier leur lecture. Notre cerveau organise, interprète et classe les éléments afin de simplifier la complexité visuelle de notre environnement. Cette simplification s’effectue en regroupant les entités qui présentent des caractéristiques communes.
La Gestalt s’intéresse à la façon dont ces groupes sont formés et comment ceci affecte notre perception. En connaissant certaines lois de la Gestalt, le graphiste va être en mesure de comprendre et d’appliquer ces principes pour créer l’unité, la variété ou l’équilibre dans ses visuels.
Les lois de la Gestalt
Simplicité
Devant un problème visuel notre cerveau cherchera toujours la solution la plus simple parce que le monde est visuellement si complexe qu’il n’est tout simplement pas possible d’en extraire toute l’information sans une simplification préalable. Notre esprit a donc tendance à exclure la complexité au profit de la simplification afin de reconnaître des formes simples et à les relier.
Ce penchant vient probablement de l’urgence à différencier les situations dangereuses des situations bénignes. Le raccourci nous fait alors gagner un temps précieux pour réagir à une situation si celle-ci le nécessite.
En utilisant le concept de simplicité nous pouvons assembler des éléments identiques pour créer une unité. Par exemple, une surface rempli d’un motif composé de carrés identiques, sera perçue par notre cerveau comme une surface unitaire et non comme une multitude de plusieurs petits carrés. Dans la même idée, lorsque vous regardez un parc, vous voyez une pelouse verte et non tous les brins d’herbes individuellement.
Principe de proximité
Le cerveau a tendance à regrouper des éléments qui sont placés à proximité pour former un ensemble cohérent. Des éléments placés côte à côte sont perçues comme des éléments ayant un rapport entre eux. Ils forment dans notre esprit des sous-ensembles qui vont alors fonctionner comme un tout.
Illustration du principe de proximité
Application du principe de proximité en webdesign
Lorsque vous composez une page web, certains éléments ont des liens entre eux. Une manière efficace de le montrer est d’appliquer ce principe de proximité. Pour illustrer cela, observons des exemples pris sur le web.
Voici le programme ciné d’un grand groupe de cinéma Français. Le titre des films est placé à égale distance des paragraphes de contenus texte se trouvant au dessus et en dessous. Cela ne facilite pas la lisibilité du programme car l’œil hésite à associer ce titre à l’élément du bas ou ou à l’élément du haut.
En établissant une proximité entre le titre et son contenu texte on aide l’observateur à faire des regroupements qui facilite la lecture du programme ciné.
Principe de similarité
Le cerveau a tendance à regrouper des éléments qui se ressemblent. Si par exemple tous les éléments d’une composition sont à égales distances, le critère de regroupements se fera sur la ressemblance des éléments. Cette ressemblance peut être une ressemblance de forme, de couleurs, de texture, de taille …
Illustration du principe de similarité
Application du principe de similarité en webdesign
Sur cette copie d’écran, les 3 éléments réunis sous le titre « How to use Product Planner » sont traités de façon similaire sur le plan graphique. Cela permet à notre esprit de regrouper ces 3 éléments comme faisant partie du même groupe. Ces trois encadrés ayant un lien (ils se rattachent tous les 3 au thème « How to use Product Planner »), le graphiste a joué sur le principe de similarité (même traitement graphique) pour le communiquer à l’observateur.
Sur cette page web du site d’Apple, le principe de similarité a également été appliqué. Il nous permet de distinguer 6 groupes distincts que j’ai numéroté en rouge.
A noter que lorsque les principes de proximité et de similarité sont appliqués en même temps, l’effet de regroupement est renforcé.
Principe de continuité
On parle aussi de principe d’alignement pour parler du principe de continuité.
Si des éléments d’une composition présentent un ordonnancement formant un parcours régulier et directionnel, le cerveau tracera une ligne optique imaginaire qui reliera ces éléments entre eux. Notre regard a tendance à suivre un chemin régulier pour mettre en rapport des formes présentent dans une composition. Si un élément majeur s’interpose entre des éléments contigus, la ligne optique est rompue.
Cela permet par exemple de diriger l’attention de l’observateur d’un point de la composition vers un autre. En effet, une fois que notre œil regarde dans une direction, il aura tendance à suivre cette direction jusqu’à ce qu’il rencontre un élément significatif. En photographie, on parle de lignes de forces et de points focales. Le photographe utilise souvent des alignements dans sa composition (routes, rivières, lignes électriques, rangée d’arbre …) pour guider le regard vers le sujet principal.
Illustration du principe de continuité
Application du principe de continuité en webdesign
Cette copie d’écran présente la page d’accueil d’un site pour un restaurant. Quoi de plus important pour un restaurant que de montrer ses spécialités culinaires ? Ici, le designer à mis en évidence la photographie d’un plat de la carte du restaurant en choisissant un arrière plan neutre (photographie noir et blanc) sur lequel la photographie en couleur se détache bien. L’attention de l’observateur sur cette photo de plat est renforcé par un principe de continuité. En effet, l’alignement des chaises et des tables (flèche blanche) de la photo d’arrière plan dessine dans notre esprit une ligne optique virtuelle qui conduit le regard vers la photographie du plat.
Sur le site de Mark Boulton, j’ai dessiné à l’aide de lignes rouges, l’alignement des éléments. Ces alignements ont probablement été mis en place par l’utilisation d’une grille de mise en page. En glissant le long de ces lignes virtuelles, les alignements aident le regard a circuler facilement dans la page.
Principe de fermeture
Le cerveau aime regrouper des formes de façon à constituer des ensembles visuels fermés et cohérents. Le cerveau est capable de reconnaitre un sujet avec seulement quelques lignes bien esquissées.
En dessin stylisé l’artiste ne trace que quelques lignes et courbes, pourtant nous sommes capables de reconnaitre de quoi il s’agit. C’est de cette manière que l’artiste implique l’observateur dans son œuvre, en incitant son regard à imaginer ce qui manque pour reconstituer le sujet.
Retenez que ce n’est pas la quantité mais la qualité des informations visuelles qui vous permet de lire une composition graphique.
Illustration du principe de fermeture
Application du principe de fermeture en webdesign
Ce site à pour thème le golf. Le tracé en arc de cercle de l’arrière plan évoque facilement une balle car notre regard complète le dessin pour visualiser un cercle complet.
Sur le site Amaztype, une animation Flash construit progressivement un mot avec une accumulation d’images. Ici le mot suggéré est le mot « TASCHEN ». Bien que le mot ne soit pas achevé, nous n’avons aucun mal à reconnaitre et à lire ce mot. Ce phénomène est possible grâce au principe de fermeture.
Principe de la prégnance
La prégnance ou principe de la « bonne forme » est le principe selon lequel les éléments s’organisent en une forme plutôt qu’en une autre et de ce fait s’impose à l’esprit pour faire apparaitre une forme connue. Étant habitué aux figures géométriques, nous auront tendances à regrouper sous une même forme plusieurs objets disparates s’ils sont placés de manière suffisamment évocatrices. C’est cet effet qui nous permet par exemple de voir dans les étoiles, des triangles, des trapèzes … Ce principe s’applique par exemple lorsque vous reconnaissez des objets en observant les nuages. D’un individu à l’autre, pour un même groupe de nuages, l’objet reconnu ne sera pas forcément le même. En effet, il y a quelque chose de très personnel et subjectif dans cette reconstitution, car elle fait référence à nos expériences qui sont uniques pour chaque individu.
Illustration du principe de la prégnance
Exemple du principe de la prégnance
Application du principe de l’expérience passée en webdesign
Sur cette magnifique photographie de Mehmet Ozgur, on peut reconnaitre le corps d’une femme dans une volute de fumée. Si vous avez fait vœux de chasteté, peut être aurez-vous un peu plus de mal à reconnaitre le corps dont je parle. En tout cas, cette image est une belle illustration de notre capacité à appliquer le principe de l’expérience passée.
La loi de prégnance est fréquemment utilisée dans la conception des logos car elle apporte un côté trompe l’oeil qui captive le spectateur. Dans le logo « Carrefour » par exemple, l’union des deux formes rouge et bleu dessine un « C » imaginaire correspondant au « C » de Carrefour.
Conclusion
Les lois de la Gestalt sont des principes simples à comprendre et tous peuvent être appliqués dans vos design web. Certains d’entre eux comme les lois de proximité et similarité sont des fondamentaux pour améliorer le confort de lecture des pages de contenu. D’autres comme les principes de fermeture ou de prégnance sont des moyens astucieux pour éveiller l’imagination des spectateurs et retenir leur attention.
Sources :
- Ouvrage: « Graphisme et ergonomie des sites web » – Cristina Barroca – Edition Dunod
- Site http://www.desenvolvimentoparaweb.com
- Article « Gesalt » du site http://daphne.palomar.edu
Estimer une prestation de création de site web n’est pas toujours facile. Si le client ne vous fournit pas de cahier des charges précis, il sera opportun de lui envoyer un questionnaire pour récolter un maximum d’informations.
Introduction
Sur des projets de site web, il arrive que le client ait seulement qu’une vague idée de ce qu’il veut et ne vous fournisse pas de cahier des charges. Il n’est alors pas facile d’établir un devis car vous ne disposez pas assez d’éléments pour estimer la charge et le prix de votre prestation.
Dans ce cas, vous n’avez d’autre choix que d’envoyer au client un questionnaire ciblé et le plus exhaustif possible pour obtenir les informations qu’il vous manque.
Il est important de prévenir le client que la réalisation d’un site internet lui demandera un investissement en temps et en réflexion. En effet, son rôle sera de vous transmettre avec précision ses besoins, ses attentes, ses connaissances de l’entreprise, ses connaissances de la cible et de ses concurrents mais aussi de vous fournir tout le contenu (texte, images, vidéo, audio …) dont il dispose. Il devra également se rendre disponible pour vos questions et des réunions de travail/validation.
Il existe à mon avis deux types de questionnaire :
- Le questionnaire qui va vous permettre d’appréhender les contours du projet, c’est à dire qui va vous permettre d’estimer la quantité de travail à fournir. C’est ce questionnaire qui va vous aider à établir votre devis. Ce questionnaire est le premier document à envoyer à votre client juste après le premier contact téléphonique si celui ci n’a pas de cahier des charges à vous remettre ou si ce cahier des charges est incomplet.
- Le questionnaire créatif appelé aussi brief créatif qui va vous permettre de réaliser le design du site. Ce questionnaire intervient après signature du devis et versement de l’acompte. Il peut être complété lors d’une réunion de travail. J’ai déjà parlé de ce type de questionnaire dans l’article : « Le brief créatif« .
Pour aider le client à répondre à vos questions, accompagnez-les d’exemples concrets ou de liste de choix. Pensez également pour chaque liste de suggestions à laisser une case « Autres ? » pour qu’il puisse ajouter des éléments que vous n’avez pas cité.
Voici un exemple de questionnaire pour établir un devis. Ce questionnaire n’est pas une référence absolue. A vous de l’adapter ou de le compléter selon vos besoins.
Questionnaire pour établir un devis
1. Identité
a) Nom et coordonnées du client ?
b) Nom, prénom, fonction, coordonnées des différents intervenants sur le projet ?
2. État des lieux de l’existant
a) S’agit-il d’une refonte d’un site existant ?
b) Y a t’il des éléments d’autres supports de communication à reprendre ? lesquels ?
c) S’agit-il d’un projet complétement nouveau ?
3. Objectifs du site
a) Quel est l’objectif principal du site ?
(Ex : E-commerce, informer, présenter un service, présenter un produit, lancer une campagne de publicité, communiquer, offrir des services … autre ?)
b) Quels sont les objectifs secondaires du site ?
4. Actions
a) Quels sont les actions que vous souhaiteriez que votre cible puisse effectuer sur le site ?
(Ex : Acheter un produit, consulter des fiches d’informations, saisir une demande de devis, découvrir votre entreprise, trouver les coordonnées de collaborateurs, postuler à une annonce d’emploi … autre ?)
b) Parmi ces actions, quelles sont celles à mettre en avant ?
5. Contenu
a) Quels types de contenu souhaitez-vous afficher sur le site ?
(Ex : Texte, son, images, photos produits, vidéo … autre ?)
b) Combien de pages de contenu seront à prévoir ?
c) Quelles seront les grandes rubriques du site ?
6. Fonctionnalités
a) Quelles fonctions souhaitez-vous voir apparaitre sur le site ?
(Espace d’administration, news type blog, forum de discussion, galerie de photos, moteur de recherche, formulaire de contact, autres type de formulaires … autre ?)
7. La cible
a) Décrivez les caractéristiques de votre cible (age, genre, secteur d’activité, appartenance sociale …) ?
8. La concurrence
a) Connaissez vous vos concurrents ? Si oui, indiquez les URLs de leur site internet.
b) De quelle manière souhaitez-vous vous différencier de la concurrence ?
9. Technique
a) Avez-vous des exigences sur les technologies à utiliser ?
b) Avez-vous un compte d’hébergement prévu pour ce site ?
c) Avez-vous un nom de domaine réservé ?
10. Planning
a) Avez-vous une date limite de mise en production à respecter et si oui laquelle ?
11. Budget
a) Quel est le budget maximum à ne pas dépasser pour ce projet ?
12. Vos besoins en cession de droits d’exploitation
Décrivez les droits que vous souhaitez acquérir sur les créations d’auteur (graphisme, vidéo, son …)
- Que souhaitez-vous comme durée de cession ?
- Sur quel(s) support(s) souhaitez-vous diffuser les visuels (nombre et nature) ?
- Étendue géographique de la diffusion ?
- Souhaitez-vous acquérir le droit de modifier les sources ?
- Souhaitez-vous rétrocéder les droits d’exploitation ou de diffusion à de multiples clients ? Combien ?
- Souhaitez-vous négocier que le nom de l’auteur ne soit pas cité en légende des visuels ?
- Souhaitez-vous négocier avec l’auteur pour qu’il ne revendique pas la paternité des visuels en public ? (préciser les supports concernés) ?
Si vous voyez d’autres informations importantes à demander au client pour établir votre devis, n’hésitez pas à me les signaler dans les commentaires pour que je complète ce questionnaire.
Introduction
La typographie transmet le message verbal par un ensemble de symboles: les caractères. La variation du dessin des lettres peut aider le graphiste à renforcer la personnalité d’une création.
A cette date, le média web impose un certain nombre de contraintes dans l’utilisation de la typographie. En effet, la disponibilité des typographies affichables sur un écran va dépendre de sa présence dans le système d’exploitation de l’utilisateur.
Comme vous ne pouvez pas savoir à l’avance si une police de caractère sera présente sur le système de vos internautes, vous êtes généralement limité à l’utilisation d’une dizaines de polices (celles qui sont les plus fréquemment disponibles sur les différents systèmes).
La solution alternative consiste à utiliser des mots images mais cette solution a aussi ses inconvénients. La mise à jour est fastidieuse, les moteurs de recherche ne prennent pas en compte les mots images sauf si vous les accompagnez d’un texte masqué et ces images alourdissent le poids de vos pages web. D’autres solutions à base de Flash comme sIFR (Scalable Inman Flash Replacement) ou javascript comme Cufon existe, mais ce n’est pas, à mon avis, la panacée.
La solution qui devrait être préconisée est celle qui privilégie l’utilisation de la propriété CSS « font-face » mais à l’heure actuelle, tous les navigateurs ne gèrent pas correctement cette propriété. Des problèmes de licence et de gestion des droits d’auteur peuvent aussi intervenir.
Le webdesigner doit donc, pour le moment, se contenter de ces limitations en attendant une évolution des technologies web.
La personnalité des polices de caractères
Le dessin des lettres d’une police de caractères va influencer d’une part sa lisibilité, d’autre part l’identité, la personnalité qu’elle va être susceptible de véhiculer. Le choix de la typographie doit donc se faire en accord avec la tonalité graphique du site afin de ne pas créer de dissonance entre le fond et la forme.
Avant même la lecture du contenu, la typographie apporte une charge émotionnelle et une atmosphère particulière au design. Une typographie bien choisie et cohérente avec la ligne graphique du site retient l’attention du lecteur et le plonge dans univers particulier. Le style peut être formel, décontracté, convivial, moderne …
Il est possible de regrouper les polices de caractères en famille en tenant compte des caractéristiques communes qui les unissent. Ces différentes familles correspondent alors à des utilisations spécifiques qui vont marquer les pages d’une atmosphère particulière.
Anatomie des caractères typographiques:
Il existe différents types de classement typographiques selon les critères de classement qui ont été retenues.
La classification Thibaudeau
Une des premières classification connue est celle de Francis Thibaudeau (typographe parisien 1860-1925). Créée en 1921, elle repose essentiellement sur la forme des empattements des lettres.
– Empattement triangulaire : Elzévir (dit aussi Romain Ancien).
– Empattement filiforme : Didot (dit aussi Romain Moderne).
– Empattement quadrangulaire : Egyptienne.
– Empattement absent : Antique.
La classification Vox/AtypI
La classification Vox/AtypI inventée par Maximilien Vox en 1952, a été adoptée en 1962 par l’Association Typographique Internationale (ATypI). Cette classification possède également la caractéristique d’avoir été traduite en anglais et en allemand, renforçant ainsi son caractère universel.
Cette classification distingue 3 groupes de familles :
Les classiques: Humanes, Garaldes et Réales
Le groupe des Humanes, Garaldes et Réales constitue la trilogie des caractères classiques ou historiques. Leurs caractéristiques communes résident dans leur empattement triangulaire, leurs faibles contrastes entre pleins et déliés, le contraste entre un œil relativement petit comparativement à des longs jambages ou encore une certaine inclinaison de l’axe des lettres.
Les Humanes puisent leurs formes dans la lettre romaine de la Renaissance. Il s’agit des plus anciens caractères latins, apparus à la fin du XVe siècle à Venise et s’inspirant des écritures des manuscrits humanistes de l’époque. On y trouve également des relectures contemporaines de ces caractères qui se singularisent par leur aspect assez lourd, résultat d’un très faible contraste entre pleins et déliés, un axe nettement incliné vers l’arrière et la traverse oblique du ‘e’.
Exemples : Centaur, ITC Berkeley Oldstyle
Les Garaldes rappellent les créations classiques (italiennes et françaises). Elles sont ainsi appelés en référence aux deux pères des deux archétypes de cette famille illustre, le graveur de caractères français Claude Garamond et l’imprimeur et éditeur vénitien Alde Manuce. Dérivés des Humanes, les Garaldes sont caractérisés par des proportions plus fines et des déliés de jonctions plus souples. La traverse du ‘e’ prend la forme horizontale qu’elle ne perdra plus.
Exemple : Garamond
Les Réales comprennent les caractères de labeur dont l’aspect se rapproche des types courants du 18e siècle. Enfants du classicisme du XVIIIe siècle, les Réales sont des caractères austères, marqués par la rationalité de leurs concepteurs. Les Réales sont considérés comme des caractères de transition entre les Garaldes et les Didones : elles tiennent donc de ces deux familles. Les contrastes pleins/déliés sont plus accusés, l’axe tend à se redresser, les empattements à s’affiner.
Exemple : Times
Les modernes: Didones, Mécanes et Linéales
Le groupe des Didones, Mécanes et Linéales constitue la trilogie des caractères modernes, nés avec la Révolution industrielle vers la fin du XIXe siècle. Sous l’influence du machinisme, ces caractères ont pour particularité d’être constitués de traits simples et fonctionnels.
Les Didones évoquent la typographie du début du 19e siècle par leur formes épurées. Aboutissement du processus de rationalisation engagé à l’époque classique, les Didones doivent leur nom à celui de la dynastie d’imprimeurs et d’éditeurs français Didot et à l’imprimeur parmesan Gianbattista Bodoni. Elles sont aisément reconnaissables à leur verticalité, le très fort contraste entre pleins et déliés et à leurs empattements parfaitement horizontaux.
Exemples : Dodot, Bodoni
Les Mécanes s’inspirent des inscriptions monumentales de l’antiquité. Également appelées Egyptiennes en référence au très fort intérêt pour l’égyptologie qui régnait à l’époque de leur lancement (début du XIXe siècle), les Mécanes sont des caractères construits, aux empattements épais et caractérisé par un faible contraste pleins/déliés.
Exemples : Rockwell, Lubalin, American Typewritter
Les Linéales correspondent aux caractères bâton (sans empattement) de la typographie moderne. Sous le vocable de Linéale, Vox a regroupé l’ensemble des caractères sans empattements (sans serif en anglais). On les a également appelées suivant les époques, Grotesque, Antique ou encore Bâtons.
Exemples : Univers, Frutiger, Helvetica
Les calligraphiques: Incises, Scriptes, Manuaires, Fractures
Le groupe des Incises, Scriptes et Manuaires constitue la trilogie des caractères d’inspiration calligraphique.
Les Incises tiennent leur nom de la parenté qui caractérise leur propre forme et celle de caractères gravés dans la pierre ou le métal. Proches des Linéales, leurs empattements sont souvent petits et triangulaires.
Exemples : Copperplate Gothic, Goudy Sans
Les Scriptes imitent l’écriture calligraphique écrites à la plume.
Exemple : Brush Script
Les Manuaires regroupent les caractères s’inspirant des lettres dessinées au pinceau.
Les Fractures regroupent les caractères dit brisés ou vulgairement gothiques, en référence aux écritures médiévales manuscrites. Largement inspirée d’une esthétique qui privilégie le monumental à la lisibilité, ces caractères se reconnaissent aisément à leurs formes pointues et anguleuses et à leurs panses cassées.
Les non-Latines
Les non-Latines regroupent les familles parfaitement hétérogènes. La famille des caractères non-latins regroupe les versions typographiées des grandes écritures qui ne sont pas basées sur l’alphabet latin. (caractères Arabes, Chinois …)
Les enrichissements typographiques
Travailler le graphisme avec la typographie c’est aussi jouer avec des paramètres comme la taille et la graisse de caractère, la casse, le gris typographique, la justification, l’interlettrage, l’interlignage, les espaces blancs …
Interlignage, interlettrage
L’interlignage est l’espace vertical qui sépare les lignes de texte alors que l’interlettrage est l’espace horizontal qui sépare les lettres d’un mot. Selon la police choisie, il peut être judicieux de faire varier ces paramètres pour améliorer la lisibilité d’un texte.
Vous pouvez également jouer sur l’interlettrage pour donner un style graphique à vos libelles, titres, sous-titres …
La casse
Le texte courant est habituellement affiché en bas de casse (minuscules) car les textes écrits en majuscules sont plus difficiles à lire.
Vous pouvez utiliser les majuscules pour mettre en valeur des titres. Sachez que les lettres majuscules sont plus imposantes et statiques, elles apporte un certain formalisme.
Les graisses
La graisse désigne l’épaisseur de trait des caractères d’une police. Souvent les polices sont déclinées en plusieurs graisses.
Ces graisses sont utilisées pour mettre en exergue un mots ou un groupe de mots, pour attirer l’attention du lecteur, pour hiérarchiser l’information. Elles s’appliquent sur les titres, les chapôts, les encadrés, les mots clés à mettre en évidence.
Le romain et l’italique
Le romain est plus lisible que l’italique et s’utilise donc pour la majeure partie du texte.
L’italique est utilisé pour détacher une information du contexte ou pour expliciter un contenu. On l’applique généralement sur les légendes, les citations, les références, les notes, les titres d’ouvrages, les expressions avec un « double sens », les mots en langue étrangère.
La justification
La justification détermine la largeur de chaque ligne et l’alignement vertical du texte (alignement à droite/gauche, centré, justifié.
Le choix de la justification n’est pas anodin sur le rendu global du texte et correspond à différents usages.
Alignement centré
A appliquer plutôt sur des textes courts car difficile à lire sur de longs textes. L’interlignage est souvent plus important.
On l’utilise davantage sur les titres, les accroches, les exergues.
Cette justification donne une impression solennelle, stable, affirmative, exclamative. Elle créer une discontinuité par rapport à la suite du texte.
Alignement justifié
Peut être utilisé sur des textes longs. Attention de ne pas choisir un interlignage trop petit. A éviter sur des justifications très réduites à cause des « zébrures » qu’il peut provoquer dans le gris typographique.
On l’utilise pour le texte courant d’un article.
Cette justification donne une impression de solidité, de carré, de fiabilité. Le texte semble difficile à arrêter. Le texte justifié a besoin d’un arrêt fort (puce, signature en gras …)
Alignement à gauche
Son utilisation est largement rependue et convient à la plupart des situations. L’interlignage peut être réduit pour gagner de la place.
On l’utilise pour le texte courant d’un article, pour des petites annonces (texte à phrases courtes).
Cette justification donne une impression d’irrégularité, de souplesse, de classicisme. Le texte semble continu mais s’arrête facilement.
Alignement à droite
A utiliser sur des textes courts avec justification peu importante. L’interlignage doit être plus important que pour les autres justifications. Cette justification revient difficilement à la ligne car il lui manque un repérage visuel qui se fait d’habitude à gauche.
On l’utilise pour les chapôs, les introductions, les titres d’articles, les exergues.
Cette justification donne une impression d’originalité, d’interrogation, d’instabilité (besoin d’un appui comme une photo par exemple).
Conclusion
La typographie peut être considérée comme un art à part entière et sa maitrise demande connaissances et expérience.
Dans la création d’un site internet, le contenu texte est un élément centrale. Le choix typographique doit donc être abordé avec un soin particulier. Chaque police de caractères apporte un style, une atmosphère que le designer peut exploiter pour communiquer son message. Attention à ne pas abuser d’un nombre trop important de polices sur une même page car vous risquez de brouiller le message. N’oubliez pas que le contenu doit rester la préoccupation principale du designer, veillez donc à assurer une bonne lisibilité.
Depuis l’apparition du numérique, une quantité impressionnante de polices est apparue sur le marché. Le designer n’a donc que l’embarra du choix pour mettre en place une ambiance graphique qui soutienne son message.
Pour une bonne lisibilité à l’écran, les polices suivantes sont généralement conseillées : Georgia, Times pour les polices à empattements (sérif) et Hevetica, Verdana, Arial pour les polices sans empattements (san sérif). Les polices sans empattements sont plus lisibles que les polices à empattements.
Sources :
- Ouvrage : Graphisme et ergonomie des sites web – Cristina Barroca – Éditions Dunod
- Wikipédia : Classification Vox-Atypi
- Site « Typographie et Civilisation » Classification Vox-Atypi
- Une partie des images est issu du site wikipédia et sont sous licence Créative Common, voir Classification Vox-Atypi
Introduction
La transparence possède une connotation plutôt positive. Dans le langage courant, la transparence peut signifier l’honnêteté, la franchise, le signe de l’ouverture.
En architecture, l’utilisation de matériaux transparents va permettre à la lumière de rentrer dans les intérieurs et d’apporter de la clarté.
En graphisme, la transparence peut être utilisée pour réaliser des superpositions d’aplats, de textures, de motifs et d’images. Le résultat aboutit à de nouvelles couleurs, lignes, formes qui, en se juxtaposant, donneront des compositions inédites.
La transparence d’une matière dépend de sa nature physique et de son opacité mais la transparence peut également être obtenue par la perforation d’une surface à l’origine complètement opaque.
Grâce aux logiciels de traitement d’images, le graphiste peut modifier la transparence de n’importe quel élément et lui affecter l’opacité qu’il désire dans une gamme allant de l’opacité complète à la transparence totale. Le réglage de la transparence, via ces outils, est donc d’une grande malléabilité et offre au graphiste une multitude d’effets.
Utilisation de la transparence
Voici quelques unes des utilisations que l’on peut faire de la transparence :
Fasciner, séduire le spectateur
La transparence cache tout en révélant, elle suggère plus qu’elle ne montre. C’est pourquoi on la retrouve souvent dans l’imagerie érotique qui utilise des matières comme la dentelle des sous-vêtements, le tulle, les voiles des lits à baldaquin.
Créer des compositions complexes
La transparence permet la superposition de nombreux éléments dans un espace limité tout en conservant leur intégralité pour créer des compositions riches et complexes.
Apporter de l’esthétisme
La transparence maniée avec créativité peut améliorer l’esthétisme d’une réalisation graphique en faisant par exemple varier l’interaction d’une image avec son arrière plan.
Combiner deux idées ou deux éléments
En fusionnant deux concepts, deux images, par transparence, il est possible de suggérer le lien qui les unis.
Mettre en valeur certains éléments
La transparence permet d’atténuer, dans une composition, la présence de certains éléments au profit d’autres éléments qui deviennent alors plus remarquables.
Simuler la présence de plusieurs plans
La transparence couplée à un effet de flou, peut aider le designer à donner une illusion de profondeur.
Favoriser la lisibilité d’un texte sans sacrifier son arrière plan
Lorsqu’un arrière plan apporte une valeur ajouté à l’esthétisme de la composition, il est dommage qu’il soit masqué par des aplats opaques de couleurs pour y accueillir du contenu texte par exemple. Mais sans la présence de ces aplats de couleurs, le texte risque de se fondre dans l’image d’arrière plan et devenir difficilement lisible. Une solution est de diminuer l’opacité de ces aplats de couleurs de tel sorte que le texte reste lisible mais que l’image d’arrière plan garde une certaine présence et une certaine intégralité.
Exemples d’utilisation de la transparence en webdesign
www.velvetgoldmine.eu
Sur ce site, la transparence est utilisée pour atténuer la présence de l’arrière plan et permettre une bonne lisibilité du texte. Malgré tout, l’image d’arrière plan reste largement présente.
www.marcoszender.com
Ce site possède un menu de navigation qui joue sur le flou et la transparence. Cette effet graphique donne l’illusion que les autres items du menu passe derrière l’item actif au passage de la souris. On a donc un effet de profondeur où l’item actif du menu est mis en avant au passage de la souris.
www.uliheckmann.com
Sur ce portfolio de photographe, la typographie est totalement transparente pour laisser apparaitre une fraction des clichés de l’artiste. Cet effet graphique apporte du mystère et nous force a décrypter l’image qui se cache en arrière plan.
www.imaste-ips.com
Le site imaste-ips est tout en transparence. Grâce à cette transparence, la structure de la grille de mise en page est discrète mais délimite bien les différents éléments de la page (en-tête, menu principal, contenu central, pied de page). L’arrière plan particulièrement graphique et esthétique garde ainsi son intégralité et donne au design l’essentiel de son caractère.
www.f6creations.com
Sur le site de f6creations, le webdesigner a superposé un ensemble d’éléments graphiques avec différentes opacités pour élaborer un arrière plan riche et complexe qui donne tout son esthétisme au site.
www.montealto.pt
Sur le site Montealto, le cadre de droite délimite une zone de contenu. Le webdesigner aurait pu décider de faire un aplat opaque pour y déposer ce contenu. Il a préféré rendre ce cadre transparent probablement pour laisser transparaitre la photographie en arrière plan et ainsi laisser de l’espace au vélo qui évolue de gauche à droite. Un cadre opaque aurait été maladroit car le vélo serait venu butter contre un mur virtuel.
Sources:
- Ouvrage « Graphic design the new basics » de Ellen Lupton & Jennifer Cole Phillips – Princeton Architectural Press
Introduction
La couleur est un élément du design qui ne laisse personne indifférent. C’est même bien souvent le premier critère remarqué et discuté lorsqu’un webdesigner présente une maquette graphique. La couleur a donc un pouvoir attractif important auquel beaucoup de gens sont sensibles.
Cela est parfois problématique car la couleur a tendance a occulter les autres composantes d’un webdesign alors que celui-ci doit s’apprécier sur bien d’autres critères. De plus, même si la couleur répond a quelques règles d’utilisations, son ressenti est très subjectif et personnel. La couleur est certes un élément de communication puissant mais il faut savoir s’en détacher pour prendre en compte les autres éléments d’un design.
J’ai déjà abordé le thème de la couleur dans l’article « L’harmonie des couleurs » ou je parle des différentes techniques d’harmonisation des couleurs basées sur l’utilisation de la roue chromatique. Je n’aborderai donc ici la couleur que de manière globale, en tant qu’élément fondamental du langage graphique.
Caractéristiques de la couleur
La couleur peut communiquer une humeur, décrire une réalité, ou codifier une information. On peut l’utiliser pour camoufler un objet ou au contraire pour le faire ressortir de son environnement. A travers une gamme infinie de teintes, de valeurs et de saturations, la couleur donne vie aux créations graphiques. Mais la couleur est subjective et versatile. Selon l’éclairage, l’environnement, les états d’âmes (psychologiques, culturelles, religieuses …) du spectateur, la couleur peut être perçue différemment.
On constate également que les couleurs interagissent entre elles. Ainsi, notre perception d’une couleur peut être influencée par la ou les couleurs qui l’entourent. Par exemple une couleur claire nous paraitra plus brillante sur un fond sombre que sur un fond pâle.
Enfin rappelez-vous qu’il est possible de décliner une couleur en couleurs similaires simplement en faisant varier sa saturation et/ou de sa valeur. Cela démultiplie la gamme des possibilités pour vos choix de palette chromatique.
Choix d’une palette de couleur
Le choix d’une palette de couleur pour son webdesign est une étape critique mais importante. Fixer les couleurs qui seront utilisées dans un design permet de maintenir une cohérence graphique. Il est a noter également que le choix d’une couleur ne se fait jamais de façon individuelle mais doit se faire en fonction des autres couleurs sélectionnées.
En ce qui concerne les accords, vous pouvez utiliser la roue chromatique selon les techniques expliqués dans l’article « L’harmonie des couleurs ». Vous pouvez également vous inspirer de ce que vous voyez dans la nature ou d’une bibliothèque online de palette chromatique.
Lorsque vous choisissez vos couleurs, pensez à l’atmosphère que vous voulez dégager mais ayez conscience que les couleurs et le message véhiculé seront différents selon la culture, la religion, la mode, l’expérience, la position sociale et la tranche d’age de votre public. Il faut donc que vous preniez en compte les caractéristiques de votre cible et le contexte dans lequel s’inscrit votre projet.
Langage et symbolique des couleurs
Le message véhiculé par une couleur est assez empirique et rattaché à une collectivité sociale, culturelle pour une époque donnée. Au cours des siècles, l’histoire a façonné l’identité des couleurs qui restent ensuite dans l’inconscient collectif.
Voici un panel des évocations transmises par les principales couleurs. Vous verrez que souvent les couleurs possèdent leur côté sombre et leur côté positif.
ATTENTION ! les indications suivantes ne doivent pas être considérées comme une vérité absolue. Il ne s’agit pas de mettre les couleurs dans des cases d’évocations immuables. Donc pour ne pas brider votre créativité, sachez si besoin, vous détacher des informations suivantes.
Noir
C’est la couleur des extrêmes politiques de droite comme de gauche, du deuil, des juges et des arbitres mais c’est aussi devenu la couleur des berlines de luxe avec chauffeur, des smoking et des objets design des grandes marques. Combiné avec le blanc, le noir devient classique, intense et graphique.
- Les ténèbres, la mort, le deuil, l’angoisse, la peur.
- Le mystère, l’austérité, l’humilité, l’autorité.
- La sophistication, le luxe, l’élégance.
Blanc
Le blanc nous rappel les nuages, la neige, les lieux aseptisés, les robes de mariées, la lumière, Dieu …
- Pureté, propreté, hygiène, innocence, classe.
- Espoir, vérité, bonté, douceur, tranquillité, calme, raffinement, Divin.
- Deuil en Asie.
Gris
C’est la couleur des costumes de l’administration, des banquiers et des assureurs mais aussi du ciel ombragé, de la poussière. Malgrès des connotations négatives, le gris est une couleur très pratique pour faire des transitions avec d’autres couleurs. C’est une couleur passe partout.
- Sobriété, neutralité, classicisme, conservatisme, professionnalisme, élégance discrète.
- Ennui, mélancolie, tristesse, calme, espoir.
- Saleté, vieillissement.
- Sagesse, plénitude, connaissance, intelligence (matière grise).
Marron
C’est la couleur de la terre rassurante et du terroir. On la trouve en abondance dans la nature aussi bien minérale que biologique. C’est aussi la couleur des uniformes de combats des soldats, de la saleté, des robes de certains moines qui pronne l’humilité et la pauvreté.
- Stabilité, assurance, ancrage dans les valeurs.
- Saleté, pauvreté, violence.
Bleu
Le bleu fait penser au ciel, à l’eau. C’est la couleur froide par excellence. C’est aussi la couleur des grandes institutions (l’Europe, l’ONU …). C’est une couleur très plébiscité aujourd’hui probablement pour sa discrétion. C’est une couleur qui manque un peu de caractère.
- Discrétion, docilité, discipline, sagesse, conformisme, consensualité.
- Calme, sincérité, paix, immatérialité, méditation, rêverie.
Rouge
C’est une couleur franche, chaude, imposante et ambivalente qui s’oppose à la froideur et la discrétion du bleu. On la trouve peu dans la nature, c’est probablement pour cette raison que l’observateur la repère rapidement. C’est une couleur dont la fabrication est depuis longtemps maitrisée par l’homme. On trouve du rouge en abondance dans les peintures rupestres. C’est la couleur du sang, de la chaleur de l’enfer, de la puissance mais aussi de la passion et de l’amour. En politique, le rouge a d’abord été la couleur des aristocrates en Occident puis celle de la révolution et des mouvements politiques de gauches.
- La passion, l’amour, la chaleur, le dynamisme, l’excitation, la force, la puissance.
- La violence, la guerre, l’agression, le danger, la peur, l’interdiction.
Jaune
Le jaune est chaud car c’est la couleur du soleil mais aussi du souffre, du citron, du pollen, de la lumière. C’est une couleur sacrée en Asie. Comme le rouge, le jaune est plus rare dans la nature que le brun ou le vert, c’est donc une couleur que l’on repère facilement et qui capte le regard. Cependant c’est la couleur la moins appréciée en Occident. On a aussi associé le jaune à l’automne, au déclin, à la maladie puis à la trahison (couleur de la robe de Judas), à la tromperie, au mensonge, à l’ostracisme (l’étoile juive).
- Joie, espoir, optimisme, spontanéité, dynamisme, conscience, idéalisme, action.
- Accueil, luminosité, chaleur
- En Asie : prospérité, réussite, intellect, spiritualité, noblesse.
- Inquiétude, exclusion, étranger, apatride, méfiance, trahison.
Vert
Le vert est le symbole de la nature verdoyante. Parmi toutes les couleurs, c’est celle dont nous percevons le plus de nuance. C’est le symbole du printemps donc du renouveau, de la croissance, du renouveau. C’est une couleur assez neutre qui inspire le calme. On trouve également le vert dans le milieu de la finance, c’est la couleur de l’argent. Enfin c’est la couleur de l’instabilité car associé au jeux de hasard, au destin, au sort, à la chance.
- Nature, vie, renouveau, santé, guérison, croissance, fertilité, vigueur.
- Propreté, fraicheur, écologie.
- Gratuité.
- Jeunesse, immaturité.
- Calme, relaxation, sérénité.
- Bienveillance, confiance, générosité.
- Instabilité, hasard, chance ou malchance, fortune ou infortune, mauvais oeil
- Sécurité, autorisation, permission.
- Hygiène
- Réussite, statut social, stabilité
Orange
Proche du jaune et du rouge, le orange est une couleur chaude qui inspire la joie, la chaleur, l’énergie, la vitalité. C’est une couleur qui attire l’attention et que l’on rencontre dans le matériel de survie et de signalisation.
- Chaleur, joie, luminosité.
- Engagement, tonus, santé
- Force, excellence.
- Spontanéité, créativité.
Rose
Le rose évoque immédiatement la fleur du même nom, la délicatesse, le calme, le gout sucré des friandises, la couleur des chambres des petites filles, le romantisme. Le rose apaise, diminue l’agressivité.
- Tendresse, féminité, douceur, romantisme.
- Apaisement.
- Mièvrerie.
- Rose vif : branché, drôle, énergique.
Violet – Mauve – Pourpre
Peu fréquent dans la nature, il est associé au demi-deuil, à la vieillesse. C’est une couleur peu populaire et parfois associée à la vulgarité lorsque le violet est trop criard.
C’est la couleur des Rois en Occident car la difficulté à l’obtenir la rendait rare et précieuse.
- Pourpre Royale : pouvoir, passion, luxe, richesse, élégance, puissance, autorité, arrogance.
- Mauve : spiritualité, cérémonie, mystère, magie, compromis, médiation, création.
- Mauve : sensualité, intensité, retro, glamour, rêverie.
- Mauve/Violet/Prune : mélancolie, nostalgie, vieillesse, funéraire, dépression.
- Violet lavande : nostalgie, romantisme, tranquillité.
- Fushia : énergie, joie, enthousiasme.
Impact psychologique des couleurs
Conclusion
Jongler avec les couleurs est un art difficile car leur perception est subjective et très personnelle. Cependant c’est un outil de communication puissant pour les graphistes. En effet, les couleurs ont une longue histoire qui a laissé des traces dans l’inconscient collectif de l’humanité. Il semblerait aussi que les couleurs aient un influence psychologique sur notre comportement et nos ressentis.
En webdesign, il est préférable, sauf cas particuliers, de travailler avec une gamme réduite de couleurs. Cela facilite le travail de cohérence et perturbe moins l’internaute dans sa perception du message. Bien souvent, le webdesigner choisie une couleur dominante neutre pour le fond d’écran et une couleur tonique pour l’emphase des éléments importants.
Lorsque l’on travaille avec les couleurs, il est aussi important de vérifier que l’on a choisi un bon rapport de contraste entre le texte et le fond pour favoriser la lisibilité.
Sources :
- Ouvrage « Le petit livre des couleurs » de Michel Pastoureau & Dominique Simonnet – Edition Panama/Essai
- Ouvrage « L’harmonie des couleurs, le guide » de Tina Sutton & Bride M. Whelan – Edition Pyramyd
- Ouvrage « Graphisme et ergonomie des sites web » de Cristina Barroca – Edition Dunod