L’acronyme anglais AIDA (Attention, Interest, Desire, Action) désigne une technique marketing qui permet d’améliorer la vente d’un produit ou d’un service en présentant le contenu d’une certaine manière. Cette approche marketing apparue dans la publicité des années 40 est encore largement utilisée aujourd’hui.

Dans cet article, je vais vous expliquer le principe de la méthode AIDA et vous montrer un exemple d’application dans le webdesign.

Principe

Pour comprendre le fonctionnement de la technique AIDA et la mettre en place, il suffit d’appliquer dans l’ordre les 4 principes désignés dans l’acronyme AIDA : Attention, Interest, Desire, Action.

Attention

La première condition pour espérer vendre un service ou un produit est d’attirer l’attention du prospect. Cela est d’autant plus vrai qu’aujourd’hui les sollicitations visuelles de notre environnement sont nombreuses (affiches, écrans, bannières, enseignes …) et qu’il est de plus en plus difficile de sortir du lot.

Il y a plusieurs manières d’attirer notre attention et les publicitaires ne manquent pas d’imagination sur ce sujet. Cependant, les astuces utilisées tournent toujours autour des mêmes vieilles ficelles qui ont fait leurs preuves et fonctionnent quasiment à tous les coups. Ces astuces sont efficaces car elles se basent sur des mécanismes de la psychologie humaine.

Citons, sans être exhaustif, les plus connues : érotisme, humour, questionnement, storytelling, émotions, provocation, nouveauté …

En complément des ficelles citées ci-dessus, il est aussi nécessaire d’utiliser des techniques très pragmatiques de design. Je pense par exemple au contraste, aux couleurs, à l’utilisation des blancs tournant, à la composition …

Exemple :

Rien de tel qu’une belle jeune femme prépubaire et aguicheuse pour attirer l’attention du mâle hétéro., avide de prestige ( … prestige qu’une BMW pourra lui apporter).

Interest

Les “marketeux” partent du principe que les clients ne s’intéressent pas aux fonctionnalités d’un produit ou aux caractéristiques d’un service mais aux bénéfices que le produit ou le service va leur apporter. Partant de cette hypothèse, il est important pour éveiller l’intérêt du client, non pas de décrire le produit comme si il s’agissait d’un un mode d’emploi mais de lui expliquer en quoi le produit ou le service va lui rendre service et améliorer sa vie de tous les jours.

Pour réussir cette étape, il faut bien connaitre sa cible et ses problématiques. En anticipant les problématiques du client, il est plus facile de lui proposer un produit/service qui les résous. Ne reste plus ensuite qu’à lui expliquer en quoi votre produit/service va lui faciliter la vie. C’est en partie de cette manière que l’on créer le besoin chez le consommateur.

Exemple :

L’aéroport de Beauvais, c’est tout bénéf. : “Plus tranquille”, “Plus vite”, “Moins chère”. Bref, que des avantages.

Desire

Pour favoriser les chances d’un acte d’achat, la technique AIDA préconise maintenant de susciter et d’augmenter le désir du prospect. Une fois encore, pour remplir cet objectif, les maitres du marketing vont utiliser la psychologie humaine pour arriver à leur fin.

Comment susciter le désir ? C’est simple, créez par exemple une situation d’urgence, une preuve de confiance, un engagement …

Situation d’urgence.
“Offre valable jusqu’à la fin de la semaine” Sous entendu, si vous attendez, vous allez passer à côté d’une bonne affaire et il sera trop tard. Pour ne pas avoir de regrets et vous éviter une frustration, achetez maintenant …

Preuve de confiance.
“Si vous trouvez moins chère ailleurs, nous vous remboursons 2x la différence” Donc si on me propose cela c’est que le vendeur est certain de pratiquer les prix les plus bas, sinon il ne prendrait pas le risque de faire ce genre de promesse. Vous savez que la réalité est tout autre mais ce n’est pas l’objet de cette article.

Engagement
“Essayer gratuitement” Permettre au client de s’approprier le produit/service gratuitement c’est l’inciter à s’engager dans une démarche d’investissement (en temps, en réflexion, en apprentissage …). C’est donc gratuit en terme d’argent mais pas en terme d’engagement. Si une personne investit du temps à utiliser le produit/service et qu’elle est relativement satisfaite, pourquoi irait elle perdre du temps à choisir un autre produit/service.

Et ce ne sont la que quelques exemples …

Exemple :

Pour susciter mon désir, on m’offre 250$ de pièces en bonus et en plus je peux essayer l’engin. Là, je craque !

Action

Le but ultime de la méthode AIDA est que le client passe à l’action. Toutes les étapes précédentes ne sont que les prémices qui préparent un prospect à passer à l’étape “Action”. Selon l’objectif du site, cette action peut être “Acheter”, “S’inscrire”, “Contacter”, “S’abonner” … C’est aussi ce que l’on appelle chez les Anglosaxons le “Call to Action”

Pour favoriser ce passage à l’acte, vous devez veiller à le faciliter au maximum. Le bouton “Call to Action” doit être bien visible dans la page, placé à un endroit stratégique de votre composition pour que le regard de l’internaute termine naturellement son cheminement sur celui-ci. Les actions à effectuer (inscription, achat … ) doivent être simples, courtes et claires. Il faut donc aussi veiller à l’ergonomie de votre tunnel d’achat ou votre formulaire d’inscription.

Exemple :

Un des plus beau exemple de bouton “Call to Action” du web : le bouton de téléchargement de Firefox. En plus il a reconnu ma langue et mon système d’exploitation. Je n’ai plus rien à faire que de cliquer.

Application

La technique AIDA peut être utilisée comme guide pour réaliser la composition et le webdesign d’une page d’accueil d’un site web si sa finalité est d’inciter un prospect à effectuer une action concrète.

Voici un exemple illustré d’application de la méthode AIDA en webdesign :

Attention : Notre attention est attirée par une superbe illustration représentant un pannier, symbole implicite du e-commerce.
Interest : Énumération des avantages de cette plateforme e-commerce.
Desire : Possibilité d’un essai gratuit. Galerie montrant les beaux sites e-commerce que l’on peut obtenir avec l’outil.
Action : Boutons d’actions bien visibles et judicieusement placés.

Conclusion

La méthode AIDA n’est pas nouvelle, mais si elle est toujours utilisée aujourd’hui, c’est parce qu’elle est relativement simple à comprendre et qu’elle à fait la preuve de son efficacité. C’est la raison pour laquelle nous la retrouvons encore dans certaines publicités contemporaines mais également sur le Net.

Comme toute technique Marketing, se cache derrière le discours, une intention unique qui est d’inciter un prospect à effectuer une action précise. Donc, ne nous le cachons pas, AIDA est quelque part une forme de manipulation puisque l’intention finale n’est pas clairement affichée et communiquée à l’utilisateur.

Comme le dit Seth Godin, grand gorou Américain du Marketing, “nous sommes tous des menteurs”.

Intentions

La partie “corporate” a été complètement revue aussi bien sur le plan design que sur le plan ergonomie. En revanche j’ai recyclé le design de la version 8 de mon site pour designer la partie blog de cette version 9. L’ergonomie de la page d’accueil du blog a été légèrement revue avec un accès aux articles par thématiques.

La partie corporate

Ergonomie

Le mot d’ordre pour cette nouvelle ergonomie était “simplicité”, le but étant de ne proposer que l’essentiel. Il m’a semblé que pour un designer freelance, l’essentiel signifiait “Infos perso” + “portfolio” et rien de plus. J’ai donc fait le choix de fixer deux menus, un menu “infos” et un menu “portfolio”, sur un système “one page”. Ainsi les deux menus sont toujours accessibles et visibles quelque soit le scroll de la page. Le contenu des informations personnelles (a propos, services, devis, contact) s’affichent en lightbox alors que les screenshot du portfolio défilent verticalement sur la page. Ce système m’a permis de laisser la place à de relativement grandes images pour montrer mes références.

Design

J’ai voulu un design sobre mais raffiné, un peu vintage dont la source d’inspiration de départ était les vieilles affiches soviétiques mais finalement le style a évolué et l’idée de départ ne se retrouve plus forcément de façon marquée dans le design final. La aussi, j’ai gardé le mot “simplicité” à l’esprit pour produire un design qui ne face pas concurrence au contenu en attirant trop l’attention. Le poulpe, comme vous l’aurez remarqué, reste l’emblème de pixenjoy.

La partie blog

Ergonomie

J’ai supprimé du contenu dans le header pour que l’ensemble respire mieux. Sinon pas de révolution ergonomique dans cette version 9 en ce qui concerne la partie blog.

Design

Je voulais faire un design très différent pour la partie blog mais le manque de temps m’a décidé à recycler le design de la vesion 8 pour ne pas reculer la mise en production de la version 9 à dans six mois. La simplification du header m’a permis de mettre davantage en valeur la bannière très graphique. Pour le reste, j’ai gardé un alignement du contenu sur une grille de lecture qui organise un ensemble de listes formant une espèce de catalogue ou d’index de l’ensemble des articles du blog.

Avantages

Les avantages que je vois à ce nouveau design et cette nouvelle ergonomie, c’est la facilité avec laquelle on accède aux informations qui m’ont semblé les plus importantes. Certaines informations manques (détails sur les projets par exemple) mais moins il y a d’informations sur une page et plus l’attention se concentre sur l’information présente. C’était mon objectif principal.

Inconvénients

Le système de “one page” oblige à afficher toutes ses images sur la même page. Cela est d’autant plus pénalisant lorsque cette “one page” est un portfolio. Pour corser le tout, j’ai choisis d’afficher de grandes images pour mettre en avant mes réalisations et en png pour profiter de la transparence. Résultat: une page super lourde à charger ! J’ai utilisé au départ un script de “leasy loading” mais mon script de “slice scroll” n’arrivait plus à se positionner correctement sur ses ancres car les images n’étaient chargées que lorsque le scroll s’effectuait. J’ai donc retiré le “leasy loading”.

Conclusion

Je pense que cette version 9 est plus aboutie que la précédente surtout sur le plan ergonomique. Je regrette la lourdeur de la page et donc ses performances d’affichages déplorables mais il fallait faire des choix. Je ne fais quasiment plus d’intégration et de plus en plus de design et cela se ressent. Mes design évoluent mais la qualité et l’optimisation du code n’est pas au top.

Etre designer ou intégrateur, choisir il faut.

Paris Web est une conférence française organisée chaque année autour des questions d’accessibilité, de qualité et de design web. Pour sa cinquième édition, la conférence veut élargir son sujet et vous propose de réfléchir sur la question suivante : « Améliorer l’expérience utilisateur à travers un design et des contenus appropriés » (question non limitative).

Paris Web 2010 se tiendra du 14 au 16 octobre 2010, et nous invitons tous les orateurs potentiels à se manifester par un email à l’adresse
propositions@paris-web.fr.

Vous pouvez proposer un ou plusieurs sujets dans les formats suivants :

• - Conférence : 50 minutes, questions comprises.
• - Mini-conférence : 15 minutes, sans questions du public.
• - Atelier : 1 heure 30 (ou 3 heures pour un atelier double).

Les conférences et mini-conférences auront lieu dans les amphithéâtres les jeudi et vendredi. Les ateliers auront lieu dans des salles de 40 à 60 personnes le samedi. Ils sont l’occasion d’une grande interactivité, et peuvent être soit sous une forme théorique, soit sous une forme pratique (le cas échéant, des salles équipées d’ordinateurs seront prévues).

La date limite de dépôt des propositions de contributions est fixée au 31 mai 2010.

Idéalement, merci de présenter votre proposition de la façon suivante :

• - Vous, en quelques lignes
  Qui êtes-vous ? Quel est votre parcours ? Votre spécialité ?
• - Votre sujet
  En dix lignes maximum, un titre (qui n’a pas besoin d’être définitif)
  et un résumé de ce que vous allez traiter. Merci d’indiquer le niveau
  du public estimé.
• - La forme de votre intervention
  Selon vous, cette intervention sera-t-elle plutôt une conférence, une mini-conférence, un atelier ? (nous pouvons en rediscuter ensemble)

Les personnes qui ont fait une proposition seront avisées personnellement de la suite donnée, que leur proposition soit retenue ou non.

Si vous êtes retenu, vous aurez la possibilité d’être défrayé pour vos transports et logé à l’hôtel par nos soins. Pour rappel, vous serez filmé et les vidéos seront mises à disposition gratuitement sur internet (sous licence CC-By-NC).

Vivement octobre !

Hello all,

Paris Web is a French conference organised each year and revolving around questions of web accessibility, quality and design. For its fifth edition, the conference wants to broaden its subject base and suggests that you think of this question: “Improve the user experience through appropriate design and contents” (non-limiting question).

Paris Web 2010 will take place on the 14-16th of October 2010, and we invite all the potential speakers to speak out and get in touch with us at propositions@paris-web.fr.

You can submit one or more topics under the following formats:

• - Conference:  50 minutes, Q&A included
• - Mini-conference: 15 minutes, without Q&A
• - Workshop: 1 hour 30 (or 3 hours for a double-length workshop)

Conferences and mini-conferences will take place in amphitheaters on Thursday and Friday. Workshops will take place in 40 to 60 people rooms on Saturday. They are a moment of intense interactivity, and can be either theoretical or practical (rooms with computers will be provided if necessary).

The deadline for proposals is set to the 31st of May 2010.

Ideally, here is the form your proposal should have:

• - You, in a few lines
  Who are you? What is your experience? Your specialty?
• Your subject
  In up to ten lines, a title (doesn’t need to be the definitive choice) and a summary of what you wish to deal with. Please indicate the estimated level of the audience.
• The form of your intervention
  According to you, will this be better suited for a conference, a mini-conference, or a workshop? (We can talk about it.)

People who have submitted a subject will be notified personally, whether their subject is selected or not.

If you are selected, you will be able to have your travel expenses and hotel paid. Please bear in mind that videos will be recorded and will be made available for free on the internet (under the CC-By-NC licence).

We can’t wait for October!

La vidéo de l’intervention

Pour ceux qui sont intéressés par le sujet et qui n’aurait pas pu assister à cette conférence, voici la vidéo + slides mis à disposition par l’équipe de Paris Web sur DailyMotion :

Portrait et travail

Matt Laskowski est un apprenti “illustrateur / designer conceptuel” étudiant à l’Institut d’Art de Boston (Massachusetts – Etats-Unis). Il s’inspire beaucoup de l’architecture, des infrastructures de transport et de l’environnement de la ville de Boston dans laquelle il réside. Il se passionne pour les dessins de personnages, de véhicules et d’environnements urbains.

Son style est davantage technique que organique. Il aime par exemple réfléchir sur la conception d’objets mécaniques, urbains, des gadgets et observer comment ces choses s’usent avec le temps. A mon avis, aux vues de ses dessins, Matt doit probablement aussi être influencé par la culture Manga.

Ce que j’admire dans son travail c’est sa maitrise des perspectives, son art de la composition, sa gestion des couleurs et des lumières et le choix des détails qu’il sélectionne pour rendre ses scènes plus réalistes.

Plutôt que de longs discours, voici quelques exemples issus de son portfolio :

Tutoriaux

Matt est également l’auteur sur le site Deviant Art, de tutoriels très bien fait que je vous recommande si vous voulez progresser en dessin digital :

- Perspective & Composition part. 1
Chapter 1: One Point Perspective
Chapter 2: Two Point Perspective
Chapter 3: Three Point Perspective
Chapter 4: Special Perspective Circumstances

- Perspective & Composition part. 2
Chapter 5: Creating a Compositional Framework
Chapter 6: The Theories of Compositional Design
Chapter 7: Making a Thoughtful Composition
Chapter 8: Get Inspired

- Wacom Tablet Adobe Photoshop & Corel Painter Guide
Chapter 1: Choosing and setting up your tablet for painting
Chapter 2: Tips and recommendations for drawing digitally
Chapter 3: Techniques for painting digitally
Chapter 4: Other things to know

- Photoshop Coloring via Adjustment Layers
Chapter 1: What are adjustment layers and layer masks?
Chapter 2: Using these to color digitally, full step-by-step demo
Chapter 3: Extra tips on using adjustment layers and layer masks

- Comic & Manga Style Halftone Screen Patterning
Chapter 1: What is halftoning?
Chapter 2: How to apply halftones digitally, full step-by-step demo
Chapter 3: Using your results for screen viewing or for print

- Steam, Smoke, and Vapor Effects
Chapter 1: Recommended brush settings
Chapter 2: The technique
Chapter 3: Observing the differences between steam and smoke

Sources :

http://plasticshards.com

C’est quoi exactement Paris Web

Paris Web 2008 – Salle de conférence – Photographie de lejoe sous licence Créative Commons

Paris Web est une association qui organise chaque année depuis 2006 un événement francophone de conférences, tables rondes et ateliers sur le média web. Pour en savoir plus sur la naissance de cette initiative, je vous recommande de lire l’interview des 3 fondateurs (Stéphane Deschamps, Adrien Leygues et Eric Dapset)

Les conférences d’une 50 aines de minutes (questions comprises) se succèdent sur deux jours dans un grand amphithéâtre de la tour IBM à La Défense. La troisième journée est consacrée à la mise en pratique autour d’ateliers animés par des professionnels du web ayant participés aux conférences (ou pas). Le lieu des ateliers n’est pas encore défini.

J’y suis allé l’année dernière et j’ai été très agréablement surpris par le niveau des conférences, le professionnalisme et le travail du staff, la qualité des infrastructures et l’ambiance très conviviale. On y retrouve pleins de professionnels du web, des bloggeurs, des illustres inconnus et même parfois des personnages qui se trouvent dans la bibliographie des livres que vous avez dans votre bibliothèque. Bref que du bon pour apprendre des choses, rencontrer des gens et passer un bon moment.

En savoir plus sur Paris Web …

Le programme de l’édition 2009

Cette année, l’événement aura lieu le 8 et 9 octobre pour les journées conférences et le 10 octobre pour la journée atelier.

Le programme des conférences est le suivant :

Gautier Barrère et Alain Vagner :
« Concevoir un produit web c’est bien, faire en sorte qu’il soit accepté c’est mieux ! »

Eric Daspet :
« Un Web ouvert »

Stéphane Deschamps :
« Intégrateurs, montez au front ! »

Karl Dubost :
« HTTP pour les naifs et les brutes »

Daniel Glazman :
« Un seul Web »

Hervé Mischler :
« Design itératif pour un site web de grande échelle »

Tristan Nitot et Paul Rouget :
« Les nouveaux standards du web et leur implémentation dans les nouveaux navigateurs »

Jeremie Patonnier :
« Le Webdesign orienté business »

Nicole Sullivan :
« CSS peut-il être orienté objet ? »

Amélie Boucher :
« De l’ergonomie pour mon e-commerce »

Arnaud Brin :
« ROI et performance web : intégrer la culture de l’optimisation à la stratégie Internet »

Charles Mc Cathie Neville :
« Mobile, nouvelles fonctionnalités, securité »

Chris Heilmann :
« Basic housekeeping – keeping the web a safe and clean environment »

Molly Holzschlag :
« … sur un sujet sans titre pour l’instant »

Thierry Régagnon :
« Référencement & Standards Web : La même destination »

Stephanie Troeth :
« Being Agile, Being Good »

Gilles Vauvarin :
« Webdesigner, l’homme qui parlait à l’oreille des intégrateurs »

Florent Verschelde :
« Webdesign et qualité »

Aurélien Levy et Sébastien Delorme
« WCAG 2.0, Flash, PDF, Javascript et les autres sont dans un bateau… »

Christophe Zlobinski-Furmaniak :
« Utilisabilité : quand le webdesign rencontre le marketing. »

Le programme des ateliers est à venir sur le site Paris Web …

Si vous avez lu le programme jusqu’au bout, vous avez pu noter que j’ai eu l’honneur d’être sélectionné pour l’édition 2009 avec un sujet sur la relation designer / intégrateur. Simple spectateur l’année dernière, j’ai proposé mes services cette année pour aider à l’organisation. L’équipe étant déjà au complet, on m’a proposé de soumettre un sujet sur le webdesign qui a finalement été retenu par le jury de sélection de l’association.

Me reste plus qu’à me mettre au boulot …

Conclusion

Paris Web 2009 / 8-9-10 ocobre, c’est du bon, mangez-en !

PS: si vous êtes intégrateur, vous pouvez m’aider à préparer mon intervention en répondant dans les commentaires ou par mail à une simple question :

“Quels problèmes vous posent les graphistes dans votre travail d’intégrateur… ?”.

Merci des témoignages que vous pourrez m’apporter sur ce sujet.

Infos pour les geek

Pour ne pas faire attendre les geek, voici rapidement ce qui se trouve sous le capot de la version 7.0.

Pour la gestion du contenu j’utilise toujours un bon vieux “WordPress”. Dans ma crise compulsive de refonte, j’ai hésité un moment à essayer un nouvel outil comme par exemple Habari ou SymphonyCMS. Mais le temps consacré à l’apprentissage d’un nouvel outil ma vite dissuadé vu la disponibilité dont je disposais.

Au niveau XHTML/CSS/JavaScript, j’ai utilisé le Framework CSS “960 Grid System” avec une grille personnalisée de 26 colonnes. Pour le JavaScript, je suis resté fidèle à la librairie “JQuery” et j’ai adopté ses nouveaux scripts “JQuery Tools“.

Concept

Ce qui ne devait être qu’un re-design au départ , c’est finalement transformé en un véritable Tsunami que se soit au niveau ergonomie, navigation ou design.

Sur le plan ergonomie, je voulais quelque chose de plus simple, moins conventionnelle avec une mise en retrait de la partie blog pour mettre davantage en avant la partie professionnelle.

Les parties “Services”, “A propos” et “Contact” ont été dégraissées. La quantité de texte a été réduit pour s’adapter plus facilement à une lecture rapide. Ces contenus s’affichent dans un cadre en cliquant sur les items du menu.

La partie “Portfolio” est traitée à part et différemment sur le plan ergonomique. Pour cette partie, j’ai décidé d’opter pour une navigation horizontale (Agrrr !!! sacrilège, Jacob Nielsen sort de mon corps …).

La partie blog a été simplifiée en mettant à la disposition de l’utilisateur le strict minimum. Exit les archives classées par mois, les nuages de tags, les articles similaires … j’ai même fini par retirer le moteur de recherche. A la place, j’ai décidé de n’afficher que des listes d’articles classées par catégorie. Comme dans les versions précédentes, l’article le plus récent reste mis en avant.

Design

Bon, ok ça pique un peu les yeux et ça ressemble aux couleurs d’une station service. A la limite, sortez vos lunettes 3D en cellophane.

Ma compagne déteste et elle risque de pas être la seule mais j’assume. De toute façon ce design est expérimental et amené à évoluer régulièrement.

J’ai voulu faire quelque chose d’un peu différent de ce que l’on a l’habitude de voir sur le web. Et Dieu sait que c’est pas facile vue la diversité graphique qui existent sur le web.

J’ai fais le choix de couleurs vives et contrastées dans un environnement sombre et géométrique. Pour me démarquer des formes arrondies très en vogue sur les sites web, j’ai pris le contre pied en jouant sur des formes anguleuses (logo, blocs, motifs d’arrière plan, encadrés des titres …). Ce design n’appartient à aucun style en particulier quoique l’on puisse y trouver un côté un peu vintage, année 60, néo-bobo.

Conclusion

Malgré un design non consensuelle qui ne fera pas l’unanimité, je pense que le traitement graphique est cohérent.

En ce qui concerne l’ergonomie, je n’ai pas forcément suivi les règles mais c’est à l’usage que l’on verra si il fonctionne où pas.

Introduction

Le contraste correspond à une opposition marquée, une différence de propriété (taille, orientation, forme, valeur, couleur …) entre deux ou plusieurs éléments. Le contraste est très utile pour le designer car il permet d’attirer l’attention du spectateur vers un sujet particulier et donc d’orienter son regard. En peinture, le sujet principal est souvent beaucoup plus contrasté que les éléments secondaires de la composition.

Dans le domaine de la couleur, Johannes Itten a distingué sept contrastes de couleurs. Les connaitre permet au peintre ou au designer d’accentuer, d’atténuer ou de supprimer ces contrastes afin d’apporter à ses créations plus de force expressive.

Pour mieux comprendre cet article, il est conseillé de maitriser la classification des couleurs sur le cercle chromatique. Si vous avez besoin d’une piqûre de rappel, je vous invite à lire l’article “L’harmonie des couleurs”

Les sept contrastes d’Itten

Contraste de la couleur en soi

Ce type de contraste est le plus significatif lorsqu’il fait intervenir des couleurs qui n’ont rien à voir entre elles et qui sont pures, lumineuses, dans leur intensité la plus forte. Le plus fort contraste de couleur en soi que l’on puisse obtenir est donc celui des trois couleurs primaires Jaune / Bleu Cyan / Rouge Magenta (synthèse soustractive), Vert / Bleu / Rouge (synthèse additive).

On obtient le même type de contraste mais avec une intensité moindre lorsqu’on utilise une juxtaposition des trois couleurs secondaires. Ce type de contraste sera encore plus faible avec trois couleurs tertiaires (que l’on obtient avec les 3 pointes d’un triangle équilatéral inscrit dans la roue chromatique). En effet ces couleurs ont des points communs. Par exemple l’orange et le vert contiennent du jaune, l’orange et le violet contiennent du rouge, le vert et le violet contiennent du bleu. Ceci a tendance à les rapprocher et donc à diminuer le contraste.

Le résultat sera coloré, franc, intense et net avec les couleurs primaires. Mais la force d’expression diminuera au fur et à mesure que les couleurs employées s’éloigneront des ces trois couleurs primaires.

On notera que lorsque les différentes couleurs sont séparées par des contours noirs ou blancs, cela accentue leurs caractères particuliers.

Exemple : Henri Matisse – Stanza Rossa

Contraste clair obscur

Ce contraste s’obtient en jouant sur les différences de valeurs des couleurs.

Chaque couleur possède une luminosité entre le sombre et le clair. Le noir est la valeur sombre absolue alors que le blanc possède la plus grande luminosité. Le plus fort contraste clair obscur est donc obtenu en juxtaposant du noir à coté du blanc.

Entre le noir et le blanc s’étend tout une gamme de tons colorés mais aussi de valeurs de gris.

Le gris moyen est la couleur la plus neutre. Il ne reçoit de la vie que par la proximité des autres couleurs. Sa perception est très changeante selon les couleurs qu’il côtoie :
- Il peut se teinter de la complémentaire de la couleur environnante.
- Il affaiblit et adoucit les couleurs qui l’approchent.
- Il peut lier par sa neutralité un ensemble de fortes oppositions de couleurs.

Une couleur à laquelle on rajoute du noir ou du blanc perd de son intensité.

Exemple : Rembrandt – La Ronde de Nuit

Contraste chaud-froid

Les couleurs nous suggèrent le chaud ou le froid selon les symboles auxquels elles sont rattachées dans notre expérience. Les couleurs chaudes sont les rouges, les oranges, les jaunes (braise, flamme, soleil …) et les couleurs froides sont les bleus, violets, turquoises et les verts (eau, glace, ciel, végétaux …).

On peut définir le caractère des couleurs froides et chaudes selon d’autres critères :
- Chaud / froid
- Ombragé / ensoleillé
- Apaisant / excitant
- Fin / épais
- Aérien / terreux
- Lointain / proche
- Léger / lourd
- Humide / sec

L’aspect chaud ou froid d’une couleur est versatile et va être influencé par les couleurs environnantes.

Par exemple un gris neutre paraîtra plus chaud s’il est entouré d’une couleur chaude comme le rouge, inversement il paraîtra plus froid entouré d’une couleur froide comme le bleu.

Une couleur quelconque paraîtra plus chaude entourée de couleurs plus froides qu’elle (même si cette couleur est considérée comme une couleur froide) et inversement une couleur quelconque paraitra plus froide entourée de couleurs plus chaudes qu’elle (même si cette couleur est considérée comme une couleur chaude).

Exemple : Pierre Auguste Renoir – Le Bal du Moulin de la Galette

Contraste de complémentaires

Un contraste de complémentaires est obtenu, comme son nom l’indique, en juxtaposant une couleur à sa complémentaire (couleurs opposées sur le cercle chromatique).

Lorsque deux couleurs complémentaires sont mises côte à côte, cela avive leur intensité alors que leur mélange les désature pour tendre vers le gris. Un mélange en quantité égale de deux couleurs complémentaires donne un gris pur. Cependant le mélange en quantités différentes permet d’obtenir des tons de couleur d’une grande subtilité et toujours harmonieux.

Chaque couple de couleurs complémentaires a ses particularités :
- Jaune-violet : C’est aussi le contraste clair-obscur maximum.
- Rouge-orangé – Bleu-vert : C’est aussi le contraste chaud-froid maximum
- Rouge-vert : Complémentaires d’égale clarté et de rayonnement égaux.

On notera également que notre oeil, lorsqu’il regarde une couleur, a tendance à rechercher sa complémentaire et, si elle n’est pas donnée, à la produire lui-même.

Exemple : Jan Van Eyck – Les époux Arnolfini

Contraste de quantité

Ce contraste est basé sur des rapports de grandeur beaucoup/peu (quantité) ou grand/petit (surface) qu’occupent deux ou plusieurs couleurs dans une composition.

Matisse disait : “Un mètre carré de bleu est plus bleu qu’un centimètre carré de bleu.”

Pour mettre en place un équilibre harmonieux des couleurs basé sur la quantité, il faut évaluer le rapport de couleurs à utiliser c’est à dire la quantité de chacune des couleurs les unes par rapport aux autres.

Cela peut être évalué intuitivement, cependant Goethe a mis en place une méthode plus objective basée sur les longueurs d’ondes des rayons lumineux c’est à dire les valeurs de luminosité des couleurs. Il a ainsi attribué les valeurs numériques suivantes aux différentes couleurs.

Jaune/orange/rouge/violet/bleu/vert correspondent à 9 / 8 / 6 / 3 / 4 / 6

Vous noterez la similitude avec l’échelle des valeurs vue ci-dessus. Plus une couleur est lumineuse, plus le chiffre qui lui est attribué est grand.

Rapport des complémentaires pour équilibrer harmonieusement une composition :

- Jaune / violet > 9:3= 3:1= 3/4 – 1/4 (le jaune est trois fois plus lumineux que le violet).
Il faut donc mettre 3 fois plus de violet en surface que de jaune pour équilibrer la composition harmonieusement.

- Orange / bleu > 8:4= 2:1= 2/3 – 1/3 (le orange est deux fois plus lumineux que le bleu)
Il faut donc mettre 2 fois plus de bleu en surface que de orange pour équilibrer la composition harmonieusement.

- Rouge / vert > 6:6= 1:1= 1/2 – 1/2 (le rouge est aussi lumineux que le vert)
Il faut donc mettre autant de rouge en surface que de vert pour équilibrer la composition harmonieusement (regardez le tableau de Jan Van Eyck – Les époux Arnolfini).

L’emploi de rapports équilibrés élimine le contraste de quantité. Par contre, lorsqu’une couleur domine, on réalise un effet expressif.

Exemple : Pieter Bruege l’Ancien – La Chute d’Icare

Contraste de qualité

Le contraste de qualité est obtenu en juxtaposant des couleurs vives, intenses, saturées et des couleurs ternes, désaturées.

Il y a différentes manières de ternir une couleur vive :
- En l’assombrissant (ajout de noir = rabattre une couleur) ou en l’éclaircissant (ajout de blanc = rabattre une couleur)
- En ajoutant de sa couleur complémentaire (désaturation = rompre une couleur)
- En ajoutant du gris

Exemple : Paul Klee – L’enchantement des poissons

Contraste simultané

C’est peut être le contraste le moins évident à appréhender. Ce contraste se définit comme le phénomène qui fait que notre œil pour une couleur donnée exige en même temps (simultanément) sa complémentaire et qu’il la crée lui-même si elle n’est pas donnée. La couleur complémentaire engendrée n’existe pas réellement, mais est produite par un phénomène physiologique.

Donc notre oeil, lorsqu’il regarde une couleur, génère automatiquement sa couleur complémentaire et projette cette image rémanente sur les objets environnants. On comprend pourquoi la juxtaposition de deux couleurs complémentaires fait ressortir chacune d’elle de façon si particulière.

- Le rouge crée le vert
- Le vert crée le rouge
- L’orange crée le bleu
- Le bleu crée l’orange
- Le jaune crée le pourpre
- Le pourpre crée le jaune

C’est à cause de ce phénomène que l’on dit que les couleurs s’influencent entre elles. Chaque couleur emprunte quelque chose à la couleur opposée qui lui correspond. Ce contraste est d’autant plus fort que la couleur est lumineuse.

L’effet de contraste simultané se produit :
- entre deux couleurs pures qui ne sont pas exactement complémentaires
- entre une couleur et un gris

Par exemple, la juxtaposition du bleu et du rouge produit dans notre oeil du vert (complémentaire du rouge) qui vient influencer notre perception du bleu.
Une surface grise placée sur une grande surface verte de même valeur apparaîtra teintée de rouge (complémentaire du vert).

Lorsqu’une couleur cherche à repousser l’autre du côté de sa complémentaire, les couleurs paraissent dans un état d’excitation dynamique. Leur stabilité disparaît et elles vibrent.

Comment accentuer ou éliminer le contraste simultané :

Entre une couleur et un gris :
- On peut le renforcer en teintant le gris avec la complémentaire de la couleur à laquelle il est associé .
- On l’atténue en teintant le gris avec la couleur associée.

Entre deux couleurs :
On peut l’accentuer en utilisant une couleur donnée, juxtaposée à l’une des voisines de sa complémentaire sur le cercle chromatique.
(Rouge+bleu-vert / Rouge+jaune-vert / Vert+rouge-orangé / Vert+rouge-violet)

Exemple : Vincent Van Gogh – La terrasse de café

Conclusion

Le contraste permet de dynamiser nos compositions et guide notre regard vers l’essentiel. Tout élément, dont les caractéristiques dénotent de celles des autres éléments, contraste. Il peut s’agir de la position, de l’orientation, du sens, de la taille, de la couleur …

Rien qu’en utilisant la couleur, Johannes Itten a défini sept façons de créer du contraste. Nous possédons donc, avec les couleurs, un outil puissant pour améliorer l’expressivité de nos créations.

D’ailleurs, les plus grands peintres utilisent ces techniques depuis des siècles, il n’y a donc pas de raisons pour que les graphistes web n’en fassent pas autant.

Sources :

• - Site Crayon.be : Les sept contrastes d’Itten
• - Site pedagogie2 : Les contrastes selon Johannes Itten
• - Site peintre analyse : La couleur

Introduction

Pour réaliser les exemples de bouton de cet article, j’ai utilisé Gimp dans sa version 2.6.6 sous Linux Ubuntu 9.04.

Pour réaliser un bouton, les outils “Crayon” et “Dégradé” peuvent suffire. Cependant afin d’automatiser un peu la procédure, il est possible d’utiliser des scripts tels que “Layer Effects” qui correspondent aux effets de calque sous Photoshop. Je vous conseille d’installer la version en Python qui donne accès à une fenêtre d’aperçu avant exécution du script.

Caractéristiques d’un bouton

On pourrait se contenter de lire un tutoriel, de cocher quelques options et générer un bouton en moins de temps qu’il ne faut pour le dire. Le problème est qu’à force d’appliquer des formules magiques sans comprendre exactement ce que l’on fait, on devient incapable d’apporter de la variété à ses créations.

Pour savoir comment dessiner un bouton, il faut donc commencer par l’observer et comprendre ses caractéristiques.

Définition

Un bouton selon mon Larousse 2003 est “une saillie mobile d’un objet servant à actionner manuellement un mécanisme. En informatique, un bouton correspond à un élément d’interface graphique sur lequel l’utilisateur peut cliquer pour déclencher une action.”

Selon cette définition et notre propre expérience, nous savons à quoi ressemble un bouton. Il s’agit le plus souvent d’un objet en volume sur lequel on interagit pour déclencher un événement.

Affordance

Je rappel que l’affordance est la capacité d’un objet à suggérer son utilité.

Donc pour qu’un bouton soit affordant, il faut qu’il apparaisse comme un objet saillant, généralement de forme ronde, ovale ou rectangulaire.

La forme triangle ou hexagonale pourrait être utilisée mais sa reconnaissance en tant que bouton serait moins évidente car moins commun dans la vie courante (sauf pour les joueurs de Play Station). Un bouton hexagonale est donc moins affordant qu’un bouton rectangle aux bords arrondis.

Dessiner le volume

Dans la plupart des cas, pour qu’un bouton soit reconnu comme tel avec le moins d’effort possible par l’utilisateur, il sera judicieux de le dessiner avec un effet de volume.

En webdesign tout comme en dessin, nous travaillons dans un environnement en deux dimensions. Pour donner plus de réalité aux objets que nous dessinons, nous devons simuler un monde en trois dimensions. Pour cela, nous utilisons des techniques comme la perspective et le modelé (représentation des ombres et des lumières). Dans notre cas, c’est surtout la technique du modelé qui sera utilisée.

Répartition des ombres

Pour donner du modelé à un objet dessiné, il suffit de jouer avec les dégradés et les valeurs pour simuler les lumières, les ombres propres et les ombres portées. Le plus difficile est de savoir où placer ces ombres et ces lumières et de choisir les bonnes couleurs.

Pour placer les ombres et les lumières, il faut prendre conscience de la forme de l’objet dans l’espace et connaître d’où vient la source de lumière qui éclaire notre objet. Plus une surface de l’objet est frontale et proche de la source lumineuse, plus elle sera éclairée. Inversement, plus une surface de l’objet est oblique et éloignée de la lumière, plus elle sera dans l’ombre.

Illustrons par des schémas :

Considérons que nous voulions représenter un bouton plat mais avec une petite épaisseur, rectangulaire et aux bords arrondis. Observons comment la lumière frappe l’objet en fonction de sa forme dans l’espace et comment dessiner les valeurs pour représenter cette observation.

Lorsque la source lumineuse provient de haut à gauche, le coin supérieur gauche du bouton est plus éclairé que le coin inférieur droit.

Lorsque la source lumineuse provient du haut et légèrement en retrait, le bord supérieur du bouton est plus éclairé que le bord inférieur.

Couleurs des ombres

Pour ce qui est des couleurs, j’applique personnellement les règles suivantes :

Pour obtenir la couleur de l’ombre propre d’un objet, je prends la couleur de base de cet objet et je diminue sa valeur.

Pour obtenir la couleur de l’ombre portée d’un objet, je prends la couleur du support sur lequel se projette l’ombre de l’objet et je diminue sa saturation et sa valeur.

Concevoir un bouton

Je vais vous expliquer, à travers cinq exemples, quelques techniques pour concevoir un bouton d’interface web. Dans les 5 exemples, je considère que la lumière provient de la partie supérieure et surplombe à la verticale le bouton.

Exemple 1

Etape 1 :Je commence par choisir ma palette de couleurs. Dans l’exemple 1, j’ai choisis un vert ni trop sombre ni trop clair comme couleur de base puis j’ai assombris cette teinte en diminuant sa valeur afin de représenter l’ombre propre du bouton.

Etape 2 : Je trace un rectangle, j’arrondis les coins et j’applique un dégradé pour donner l’effet de volume.

Etape 3 : Pour accentuer la forme du bouton, j’ajoute une bordure de 1 px avec la couleur de base. Dans la partie inférieure, la bordure contraste bien avec la partie ombrée et le fond sombre soulignant le contour de la partie basse du bouton.

Exemple 2

Etape 1 : La palette de couleurs est ici un peu plus riche. J’ai choisis un rouge moyen comme couleur de base. Je décline deux autres couleurs du même rouge mais plus sombre en diminuant la valeur du rouge de base. Enfin, je choisis un rouge plus clair et moins saturé en augmentant la valeur de la couleur de base et en diminuant sa saturation.

Etape 2 : Je trace un rectangle, j’arrondis les coins et j’applique un dégradé pour donner l’effet de volume.

Etape 3 : Pour accentuer la forme du bouton, j’ajoute cette fois ci deux bordures. Une bordure sombre externe et une bordure claire interne. Pour que la bordure claire n’apparaisse que dans la partie la plus éclairée du bouton et disparaisse dans la partie ombrée, j’utilise un masque de calque sur le calque de la bordure interne et j’applique un dégradé blanc/noir de la partie supérieure vers la partie inférieure du bouton.

Exemple 3

J’ai dessiné dans l’exemple 3, un bouton pixelisé. Pour cela, j’ai gardé les coins carrés et j’ai travaillé à l’aide du crayon et d’une brosse ronde de 1 pixel.

Etape 1 : La palette de couleur est composée d’une teinte de base qui correspond ici à la même couleur que celle de l’arrière plan. A partir de cette teinte j’ai décliné une version sombre, une version très sombre et une version claire. La version claire sera utilisée pour la partie du bouton qui sera la plus éclairée et pour l’une des bordures. La couleur de base sera utilisée pour représenter l’ombre propre du bouton dans la partie inférieure du dégradé. La version sombre sera utilisée pour la deuxième bordure et la version très sombre pour le texte et la flèche.

Etape 2 : Je trace un rectangle et j’applique un dégradé pour donner l’effet de volume.

Etape 3 : Pour accentuer la forme du bouton, j’ajoute deux bordures. La technique est la même que pour les deux exemples précédents. La différence se situe au niveau du placement des bordures. Ici les deux bordures se chevauchent et sont tantôt à l’extérieur tantôt à l’intérieur.

Exemple 4

Etape 1 : J’utilise dans l’exemple 4, trois paires de couleurs. Une pour le dégradé du bouton et une pour chacune des deux bordures. Le gris me servira pour mettre en place une ombre portée.

Etape 2 : Je trace un rectangle, j’arrondis les coins et j’applique un dégradé pour donner l’effet de volume.

Etape 3 :Pour sophistiquer un peu le rendu, j’applique également un dégradé aux deux bordures. C’est la raison pour laquelle j’ai choisi une paire de couleurs pour chacune d’entre elles. La partie inférieure du dégradé des bordures est moins saturée et plus sombre que la partie supérieure.

Etape 4 :J’utilise la teinte grise pour appliquer une ombre portée sur le bouton et ainsi accentuer l’effet de volume.

Vous remarquerez que nous avons ici un bouton sur fond clair. La mise en place d’une bordure sombre à l’extérieur permet par contraste de faire ressortir la bordure claire interne soulignant ainsi d’autant mieux le contour du bouton. L’absence de bordure sombre externe sur ce fond clair ferai disparaître par manque de contraste, la bordure claire. Elle ne jouerait alors plus son rôle d’accentuation du contour.

Exemple 5

Le dernier exemple est le plus élaboré des cinq. J’utilise les mêmes techniques de construction que pour l’exemple 4 mais j’ai ajouté en plus un effet glacis et une lueur subtile centrée au niveau du texte.

Pour dessiner la lueur, j’utilise une brosse ronde, blanche, large et très diffuse que j’applique sur un calque en mode superposer. Je fais varier l’opacité du calque jusqu’à ce que j’obtienne un résultat qui me satisfasse. Cette lueur a été appliquée une première fois par dessus le calque du bouton et une seconde fois par dessus le calque du dégradé de la bordure interne. J’ai utilisé les sélections que j’ai inversé pour effacer les débordements de la lueur.

Pour l’effet glacis, j’ai tracé une ellipse avec l’outil sélection et j’ai tracé un dégradé avec la quatrième paire de couleurs de la palette. Le dégradé est inverse de celui appliqué sur le bouton. En effet la partie sombre se trouve au niveau de la zone supérieure de la sélection et la partie claire dans la zone inférieure. Pour effacer la partie basse du dégradé du glacis, j’ai utilisé un masque de calque avec l’outil dégradé (noir/blanc).

Variation sur le thème du bouton

Vous savez désormais dessiner un bouton. Cependant, avec un peu d’imagination, il existe une variation infinie de possibilités.

En voici quelques exemples :

Applat de couleur ou dégradé

Concave ou convexe

Mat ou brillant

Dégradé circulaire ou linéaire

Sans pictogramme ou avec

Pixelisé

Arrondi, rectangle, flèche …

Ajout d’effets divers

Sélection de 25 boutons pour vous inspirer

Conclusion

Comme nous venons de le voir, dessiner un bouton d’interface n’est pas très compliqué. Il faut juste se familiariser avec les techniques du modelé et faire preuve d’un peu d’imagination.

Pour réaliser vos boutons avec votre logiciel de traitement d’image, vous pouvez, comme moi, utiliser simplement quelques outils (dégradé, sélection, crayon) ou utiliser des scripts qui automatisent un peu plus les procédures (Layer effects pour Gimp ou les effets de calques sous Photoshop). Ces scripts peuvent améliorer la productivité de votre travail mais vous aurez moins le contrôle de ce que vous faite.

Si la plupart du temps les boutons sont représentés de formes rectangulaires et en volumes, rien ne vous empêche de les dessiner d’une autre forme et avec un aplat de couleur. Mais attention, la reconnaissance de l’objet en tant que bouton risque d’être moins évidente.

Pour renforcer l’affordance d’un bouton, vous pouvez, en plus du volume, prévoir un état survolé et enfoncé qui s’affiche au passage et au clique de la souris. Cet effet peut facilement être réalisé avec la technique des sprites et un peu de CSS.

Cette tablette est idéale pour le graphisme et la retouche photo.

C’est de l’excellent matériel comme tout ce que fait Wacom en général.

Je n’envoie pas la tablette par colis mais effectue une livraison de la main à la main sur Draveil, Juvisy ou Paris. Comme ça pas de risque de casse et vous pourrez voir le matériel avant achat.

Contenu de la boite

• Pen tablet Intuos3 A4
• Grip Pen Intuos3
• Souris à 5 boutons Intuos3
• Pointe de stylet standard (3x)
• Pointe de stylet Stroke Pen (1x)
• Porte-stylet
• CD-ROM des pilotes (pilote, manuel en anglais, allemand, français, italien, espagnol et néerlandais)
• CD-ROM Corel Painter Essentials2 (en anglais, allemand et français)
• Guide d’installation rapide

Voici les caractéristiques techniques

Quatre ou huit ExpressKeys (selon le format de la tablette) peuvent être programmées pour les commandes de menu et les combinaisons de touches les plus courantes. Le Touch Strip innovant agit comme une barre de défilement tactile. Les deux outils, intégrés à la tablette, améliorent sensiblement le flux de travail. Avec les tablettes au format de surface active A4 et A5, les blocs de fonction se situent à droite et à gauche et conviennent donc aussi bien aux droitiers qu’aux gauchers.

Avec l’appui de la technologie Penabled de Wacom et du Grip Pen ergonomique, ces outils accroissent l’efficacité et la productivité dans les applications artistiques.

Le Grip Pen permet de concevoir et de dessiner comme avec un stylo ordinaire. Les 1.024 niveaux de pression du stylet et la résolution de 5.080 ppp de la tablette répondent à toutes vos attentes en matière de retouche d’image. Aucun autre périphérique de saisie ne permet de créer des transitions aussi fluides et d’atteindre des résultats aussi naturels. En outre, la navigation dans les applications et les documents de grande taille est aisée grâce au positionnement absolu et au pixel près du stylet. Comme les autres tablettes à stylet de Wacom, l’Intuos3 ne conduira pas à l’apparition du syndrome des lésions attribuables au travail répétitif du fait de l’ergonomie et du parfait équilibre du Grip Pen.