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

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.

Introduction

Les icônes sont des représentations graphiques qui permettent par métaphore de désigner un objet, une fonction ou une action. Elles renforcent la signification d’un contenu ou fournissent un raccourci visuel pour symboliser un élément activable d’une interface ou l’exécution d’une tâche particulière.

Les icônes sont utilisées pour différentes raisons : elles font gagner de la place sur l’interface en remplaçant de longues explications textes, elles font gagner du temps à l’utilisateur qui reconnait plus rapidement la signification d’une image que celle d’un texte.

Cependant, l’utilisation d’icônes n’est pas sans risques et demande un travail de réflexion. En effet, il est très difficile de transmettre un message compréhensible par tous les utilisateurs à l’aide d’une illustration miniature qui comporte forcément un certain degré d’abstraction. Certaines icônes ont gagné une acceptation internationale, c’est le cas du « panier » sur les sites de e-commerce, de la « maison » pour un retour à la page d’accueil ou de la « loupe » pour la recherche. Pour d’autres actions ou concepts, la symbolisation par icônes est beaucoup moins évidente.

Pour le graphiste, la création d’un set d’icônes est un véritable défis aussi bien sur le plan de la conception (choix de la représentation) que sur le plan réalisation (dessin et retranscription infographique), les icônes étant de véritables illustrations numériques le plus souvent en 3 dimensions.

Voici quelques recommandations à garder à l’esprit lorsque l’on souhaite se lancer dans la réalisation d’un set d’icônes.

L’unité

Les icônes d’une même application doivent rester cohérentes sur le plan graphique afin de maintenir son unité visuelle.

Pour obtenir cette unité graphique, il faut dessiner toutes ses icônes avec :

• la même palette de couleur
• le même style graphique
• la même perspective
• la même direction de lumière et traitement des ombres
• la même taille/proportion
• les mêmes conventions

Toutes ces caractéristiques devront être décrites avant la phase de création dans une charte graphique pour constituer un document de référence.

Les couleurs

Choisissez une palette de couleur qui vous servira de référence pour colorier vos icônes. Vous pourrez faire varier la valeur et la saturation de ces teintes pour dessiner les ombres et les effets de lumière.

Par exemple, choisissez trois variantes pour chaque couleur (bleu, rouge, vert, jaune, violet, marron), quatre variantes de bleu gris pour les effets métalliques et quatre variantes de gris.

Le style

Il y a différentes manières de dessiner une icône : en aplat ou en relief, en valeurs de gris ou en couleurs, avec un effet brillant … Peu importe le style du moment qu’il est cohérent avec l’identité visuelle de l’application et que tous les icônes soient dessinées dans le même style.

Pour définir un style vous pouvez par exemple réfléchir sur :

- Les lignes de contour des objets (présence ou pas, épaisseur minimum et maximum, couleurs autorisées, présence de gradient autorisé ou pas …)

- Les bordures internes des objets (présence ou pas, épaisseur minimum et maximum, couleurs autorisées, présence de gradient autorisé ou pas …)

- Les dégradés (présence ou pas, radial ou linéaire )

- Les ombres (présence ou pas, dégradé-opacité-flou autorisé ou pas, couleur, position par rapport à l’objet)

Tous ces éléments peuvent varier selon la taille des sets d’icônes. Par exemple on ne met généralement pas d’ombres sur les icônes de petites tailles car cela les rends moins visible.

La perspective

Vous avez la possibilité de dessiner vos icônes sous différentes perspectives mais pour une taille donnée, choisissez un type de perspective et tenez-vous y.

Généralement les petites tailles d’icônes (16×16, 22×22, 24×24) sont dessinées à plat, de face par soucis de visibilité.

Les tailles moyennes (32×32) et grandes (48×48) peuvent être dessinées en perspective.

Vous pouvez utiliser une grille de référence pour conserver la même perspective pour toutes les icônes d’une même taille.

La lumière et les ombres

Les effets de lumière (dégradé, brillance) et les ombres apportent du modelé à vos icônes. Leurs présences n’est pas obligatoire, tout dépend du style que vous voudrez mettre en place.

Si vous dessinez des icônes en 3 dimensions, pensez à fixer la direction de la lumière afin de traiter les dégradés, les brillances et les ombres de la même manière sur toutes vos icônes.

Si votre icône est complexe, c’est à dire composée de plusieurs objets, traitez la lumière sur chaque objets séparément.

Évitez les ombres sur les petites taille d’icônes au risque de brouiller leur visibilité.

La taille et les proportions

Vous pouvez avoir besoin de décliner vos icônes en différentes tailles. Sachez que selon la taille de l’icône, il sera parfois préférable de changer la façon de les dessiner pour leur garantir une bonne visibilité. Nous en avons déjà parlé, il s’agit par exemple de la présence ou non des ombres, le choix de la perspective …

Le cadre dans lequel les icônes sont dessinées est le plus souvent carré.

Les tailles en pixels les plus communes sont (16×16, 22×22, 24×24, 32×32, 48×48, 128×128, 512×512) mais vous pouvez en choisir d’autres si besoin.

Définissez dans votre charte graphique dans quel contexte chaque type de taille doit être utilisé.

Pour que vos icônes soient utilisables sur tous les arrières-plans, dessinez-les sur un fond transparent. Vous devez prévoir également la taille de la bordure transparente entre le bord extérieur de l’objet iconique et le bord de l’image. Elle peut par exemple être de 1 pixel.

Les conventions

Vous pouvez choisir d’utiliser des signes comme référence à un type d’action donné.

Exemples :

Une action de création peut être symbolisée par le signe plus.
Une action de suppression peut être symbolisée par un signe moins.
Une action de fermeture peut être symbolisée par une croix rouge.

Les points d’attaches de ces signes sur l’icône doivent être clairement définie dans la charte graphique.

Process de création

Lorsque l’on dessine une icône, notre attention doit se porter sur la clarté suggestive de cette icône. L’utilisateur devra comprendre au premier coup d’œil la signification véhiculée par l’icône. Certaines conventions se sont progressivement mises en place et il ne faut pas hésiter à les réutiliser.

Par exemple le « message » est souvent représenté par une enveloppe, le « retour à l’accueil » par une maison, le « répertoire » par une chemise de classement avec onglet …
Restez simple car trop d’originalité dans la symbolisation peut nuire à la compréhension du message.

Pour distinguer les icônes, ou familles d’icônes entre elles, pensez à utiliser des silhouettes distinctes. Pour cela utilisez les formes usuelles (carré, rectangle, triangle, cercle)

Le brief créatif

Comme tout bon projet qui se respecte, un brief créatif est indispensable avec votre client ou avec vous même (si c’est un projet personnel) avant de foncer tête baissée sur votre ordinateur.

Le brief créatif à pour but de donner une direction à votre travail, il devra vous permettre de répondre aux questions suivantes :

- Quel sont les caractéristiques graphiques de l’environnement dans lequel les icônes seront affichées ?
Connaitre l’environnement graphique de l’application ou du site web qui accueillera les icônes vous permettra d’harmoniser et d’intégrer de façon cohérente le design de vos icônes.

- Quels sont les concepts, les actions, les fonctionnalités qui seront à illustrer ?
Cette étape est très importante. Il s’agit de lister toutes les actions qui seront représentés par une icône.

- Dans quels environnements (page, menus, barre d’outils …) les icônes seront affichés ?
Selon l’environnement dans lequel l’icône viendra s’insérer, sa taille et ses caractéristiques ne seront pas les mêmes.

- Quelles tailles d’icônes faut-il prévoir ?
Il faut définir en amont la taille en pixel des sets d’icônes à dessiner.

- Quel est le profil des utilisateurs ?
Selon le profil des utilisateurs, notamment culturel, la représentation des concepts peu varier. Une boite aux lettres aux Etats-Unies ne ressemble pas à une boite aux lettres en Europe. Il sera souvent judicieux de trouver le représentation qui sera la plus universelle.

Conception : la méthode de Yegor Gilyov

Yegor Gilyov du studio graphique Turbo Milk nous explique dans son article Designing an iconic language une méthodologie judicieuse pour plannifier la réalisation d’un set d’icônes.

Voici un résumé de cette méthode :

Imaginons une application de facturation pour laquelle un client vous demande de dessiner un set d’icônes.

La première étape va consister à lister les caractéristiques de cette application.

« Les factures s’effectuent en ligne »
« Les factures peuvent être réglées en plusieurs versements » …

La seconde étape va répertorier toutes les commandes à illustrer par une icône.

Commandes pour gérer la facturation :
- Ajouter une facture
- Supprimer une facture
- Envoyer une facture
- Afficher les factures payées …

Commandes pour gérer les lignes de facturation :
- Effacer complètement la ligne …

Commandes pour enregistrer les commandes :
- Ajouter un paiement
- Supprimer un paiement …

Et ainsi de suite.

Les phrases doivent être courtes, précises et concises. Vous remarquerez que dans ces phrases vous pouvez repérer la présence d’un mot d’action, d’un mot qui désigne un objet, d’un mot qui désigne un état restrictif et un mot qui désigne une qualité.

« Ajouter une facture » (action=ajouter, objet=facture)

« Afficher les factures payées » (action=afficher, objet=facture, état=payées)

« Effacer complètement la ligne » (action=effacer, objet=la ligne, qualité=complètement)

Une fois ce travail d’analyse effectué, il s’agit de regrouper tous les mots d’actions, d’objets, d’état et de qualité.

ACTIONS :
- Ajouter
- Effacer
- Afficher …

OBJETS :
- Facture
- Paiement
- Ligne de facture …

ETAT :
- Payées
- Envoyées
- Tous
- En cours
- Epuisées …

QUALITE :
- Complètement
- Dans la facture
- Dans la pile …

L’étape qui suit est l’étape de recherche pour représenter chacun des concepts listés.

Recherche

Cette étape de recherche peut se faire à l’aide d’une réunion de Brainstorming. Vous allez lister toutes les idées d’illustrations qui vous viennent à l’esprit sans censures ni jugement. Dessinez des croquis, pas la peine à cette étape de soigner les détails de réalisation des icônes. Dans un second temps, vous effectuerez un tri des meilleurs idées. La règle du Brainstorming veut que les personnes qui produisent les idées soient différentes des personnes qui sélectionnent les idées. Adaptez cette procédure selon vos moyens.

Pour voir une illustration ce cette étape, reportez-vous à l’article de Yegor Gilyov : Designing an iconic language

Process

Voici une proposition de workflow pour la réalisation graphique de vos icônes :

- Définir la charte graphique de vos icônes
- Création de la forme générale, faire un croquis (penser au choix de perspective)

- Ajout des détails (travailler en noir et blanc)

- Réalisation sur ordinateur, penser à la présence ou pas de lignes de contours internes ou externes

- Rajouter la couleur
- Appliquer les dégradés en fonction de la direction de la lumière

- Ajouter les ombres

Erreurs à éviter

Il y a certaines erreurs à éviter et qu’il faut garder dans un coin de la tête lorsque l’on se lance dans le processus de création des icônes.

Voici quelques exemples :

Utiliser du texte dans vos icônes
Une icône est une métaphore visuelle qui doit se suffire à elle même. Si votre icône est pertinente, elle n’a pas besoin de texte pour l’expliciter. De plus le texte dans une icône devient vite illisible avec la réduction de taille.

Ajouter des informations accessoires
Une icône doit être conçue avec le strict minimum. Trop d’informations brouillent le message et diminue la lisibilité de l’icône. Souvenez-vous « less is more ».

Se baser sur un jeu de mots
Se baser sur un jeu de mot pour dessiner une icône est restrictif à la langue à laquelle elle s’applique. De plus il n’est pas sure que le jeu de mots soit compris de tous et rapidement.

Vous pouvez compléter cette liste d’erreurs en lisant l’article de Denis Kortunov qui s’intitule 10 Mistakes in Icon Design

Conclusion

Une icône bien conçue est un puissant outil de communication. C’est un élément efficace et esthétique pour fournir aux utilisateurs le moyen de scanner rapidement une page web. De plus, elles facilitent la compréhension du contenu et des fonctionnalités tout en attirant l’attention des utilisateurs. Les icônes peuvent dans certains cas remplacer avantageusement du texte encombrant et inutile.

Ne vous méprenez pas sur l’apparente simplicité des icônes, leur réalisation est bien plus ardue qu’il n’y parait. Il faut en effet connaître les règles de la perspective, savoir dessiner, comprendre les caractéristiques des ombres et des effets de lumières et maitriser l’utilisation des couleurs. Sur le plan graphique, la réalisation d’un set d’icônes réclame méthode, reflexion et des talents d’illustration.

Sources et autres liens :

Guide de création des icônes pour le système d’exploitation Linux Fédora
7 Principles of Effective Icon Design
Designing Effective Icons (Environnement graphique Gnome)

Introduction

La définition du métier de webdesigner fait l’objet de nombreux débats sur le Net et tout le monde n’est pas d’accord sur le sujet. Certains pensent que c’est un graphiste du web, d’autres considèrent que le webdesigner doit aussi être un intégrateur, enfin une autre catégorie de personne voit le webdesigner comme un architecte du web.

Le webdesigner serait il multicarte ? … rédacteur, architecte de l’information, ergonome, infographiste, chef de projet, intégrateur et pourquoi pas développeur ? Mais alors à quoi servent les architectes de l’information, les ergonomes ou les intégrateurs si le webdesigner est capable de faire leur travail ?

Je joue un peu l’avocat du diable mais la question mérite d’être posé.

Essayons de définir ce qu’est un webdesigner

Le mot webdesigner est la concaténation des mots « web » et « design ». Je suppose donc que le webdesigner est un designer du web.

Je ne m’attarderai pas sur le mot « web » qui je pense est clair pour tout le monde. Par contre intéressons-nous au mot « design ».

C’est un mot d’origine anglaise que le dictionnaire Robert Fr./Ang traduit par les mots « concevoir » et « dessiner ». Si je regarde la définition du Larousse Français j’obtiens « Création d’objets fonctionnels et esthétiques ».

Un webdesigner serait donc une personne qui conçoit et dessine des sites web en prenant soin de les rendre fonctionnels et esthétiques.

Si on suit cette définition, on comprend qu’un webdesigner :

- « conçois » un site web.
Donc il imagine et élabore le site par la pensée avant de lui donner une réalité matériel (numérique serait plus juste). Le webdesigner doit donc prendre connaissance des besoins du client, récolter le contenu et les fonctionnalités puis les organiser pour donner au site web une structure logique. On est pile-poil dans les fonctions de l’architecte de l’information.

- « dessine » un site web.
Comme un architecte, le webdesigner donne vit à ses idées en les dessinant. Puis comme un graphiste, il affine son prototype pour lui donner un aspect plus aboutit et esthétique. Le webdesigner est donc bien un architecte mais aussi un créatif proche du métier de graphiste.

- le site web doit être « fonctionnel ».
Le webdesigner ne fait donc pas de l’art plastique en laissant libre cours à son imagination. Au contraire, il doit tenir compte de contraintes fonctionnelles comme « répondre aux besoins du client », « faciliter l’utilisation du site aux utilisateurs », « communiquer un message et mettre en place une ambiance dans laquelle l’utilisateur va se reconnaître ». Le webdesigner est donc aussi un ergonome et un graphiste.

- le site web doit être « esthétique »
Le webdesigner doit donner au site un habillage élégant, agréable à regarder. Il doit donc faire preuve de créativité et de compétences artistiques.

Pour que tout cela soit envisageable, n’est-il pas nécessaire de connaître ce que la technologie web et le support d’affichage est capable de faire et quelles sont ses limites ? Un webdesigner ne devrait-il donc pas aussi être un intégrateur ?

On se rend vite compte que le mot « webdesigner » est finalement devenu trop générique pour définir un profil qui n’existe aujourd’hui que dans certaines circonstances.

Au début du web grand public (1990-95), les sites internet n’étaient que des pages statiques n’ayant pour but que d’afficher des informations et de les rendre disponible à un maximum de personnes. Il s’agissait le plus souvent de documents. Les entreprises privées avaient peu investit ce média et les sites web étaient relativement simples. Il était donc fréquent que ces sites web soient conçus et mis en place de A à Z par la même personne. Cette personne était alors un webdesigner qui prenait en charge l’architecture, l’ergonomie, la mise en page, le graphisme et l’intégration qui restaient sommes toute assez simple par rapport aux sites actuels.

La réalité d’aujourd’hui est beaucoup plus complexe. Le web a été adopté par tous (scientifiques, étudiants, citoyens, associations, secteur privée et public, politiques …), les technologies ont considérablement évoluées, le potentiel fonctionnel et la taille des sites explosé, l’esthétique et la communication visuelle ont pris de plus en plus d’importance. Devant cette complexité des sites web, la nécessité de se spécialiser a augmenté, une seule personne ne pouvant répondre à toutes les exigences d’un site web moderne, complexe et professionnel.

Les tâches qui incombaient auparavant à une seule personne sont maintenant éclatées vers plusieurs personnes. Pour ce qui est d’un site web, l’architecture d’information, l’ergonomie, l’intégration … sont devenus de véritables métiers qui demandent une expertise pointue pour répondre aux exigences des sites web d’aujourd’hui.

Plus un site web est complexe et important, plus il demande de ressources humaines et financières. Il ne peut alors être pris en charge que par une équipe composée de plusieurs corps de métier. Dans cette équipe de spécialiste, que devient le webdesigner ?

Je crois que dans ce cas de figure, le webdesigner se rapproche davantage d’un graphiste / infographiste / directeur artistique qui s’occupe de communiquer un message en utilisant le langage visuel, de rendre une interface graphiquement facile à appréhender, de faire oublier à l’utilisateur la face technique du site, de transmettre une atmosphère qui réponde à une exigence marketing, de designer l’information pour la rendre plus accessible aux utilisateurs. Cependant je reste persuadé que le webdesigner, même si il évolue dans une équipe de spécialistes et dont le rôle se resserre autour du graphisme, doit posséder les bases, voir de bonnes connaissances dans les autres domaines (architecture d’information, ergonomie, possibilités techniques, intégration) pour collaborer efficacement avec l’équipe et apporter du professionnalisme à sa prestation.

Certes, tous les sites ne nécessitent pas ou n’ont pas les moyens de sortir la grande artillerie. Dans ce cas, moins de personnes interviennent sur la création du site. Les intervenants seront par nécessité plus polyvalents mais par voie de conséquence moins experts. Dans ce cas de figure, le webdesigner redevient ce généraliste qui se rapproche de la définition décrite en début d’article.

Spécificités d’un site internet

Il faut aussi prendre conscience qu’un site web c’est à la fois du contenu, une interface et un rendu visuel. Un webdesigner a donc a designer plusieurs choses distinctes : du contenu informationnel (textes, images, sons, vidéos), une interface avec des fonctionnalités, un visuel esthétique.

Vous trouverez à ce sujet, un excellent article de Collis Ta’eed intitulé « The 3 Components of Good Web Design »

Selon la typologie du site, une des ces caractéristiques peut prendre le pat sur les autres.

Un site e-commerce aura une forte exigence fonctionnelle et un soins particulier devra être porté sur l’interface. Un site événementiel qui lance le nouveau produit d’une marque aura une forte exigence sur le rendu visuel et ce qu’il communique. Enfin un site magazine nécessitera beaucoup d’attention sur l’organisation, la lisibilité et la présentation du contenu.

Dans ces différents cas de figure, le designer ne sollicitera pas l’étendu de ses compétences graphiques avec la même intensité. Un site de publicité demandera beaucoup de compétences artistiques, conceptuelles et créatives. Un site e-commerce demandera des capacités à favoriser graphiquement l’affordance des objets, leur simplicité avec toujours un soucis d’esthétisme. Un site magazine nécessitera du designer des compétences en présentation, lisibilité et organisation de l’information sur les pages.

Conclusion

Selon la taille et la complexité du site à réaliser, le rôle et la spécialisation du webdesigner évolue.

Pour les sites modestes, le webdesigner peut être ce personnage polyvalent qui joue un rôle de conseil au sens large, prend en charge les aspects de la conception, réalise le graphisme et l’intégration du site. Dans ce cas n’exigez pas du webdesigner qu’il soit expert dans tous les domaines.

Pour les sites complexes, dont la rentabilité doit être assurée, dont les budgets permettent une expertise approfondie des différents domaines, le webdesigner polyvalent s’efface pour devenir un expert. Le webdesigner est alors (à mon avis) davantage un graphiste / directeur artistique qui se concentre sur le rendu visuel du site, qu’il soit porteur de communication, de valeur, d’identité, ou un moyen de se mettre au service de l’utilisateur (affordance, organisation du contenu, lisibilité …)

Quel que soit l’environnement dans lequel il évolue, le webdesigner doit posséder des connaissances de bases dans les spécialités transverses et plus particulièrement l’ergonomie, l’utilisabilité, les contraintes et les technologies web et l’intégration.

La définition du webdesigner n’est donc pas simple. Elle dépend du contexte dans lequel elle s’applique que se soit par rapport à la complexité du site à réaliser ou de ses spécificités intrinsèques.

Introduction

Une fois de plus, je ne parlerai dans cet article que du design web.

Tout le monde, et c’est bien normal, ne possède pas de connaissances approfondies du design graphique et n’a pas forcément acquis une culture visuelle pointue.

C’est la raison pour laquelle le webdesign est perçu par la majorité des gens comme un simple acte de décoration. L’appréciation du travail du webdesigner se concentre alors autour d’un seul critère : la beauté, l’esthétisme. Les néophytes se posent alors les mauvaises questions du type : « Est-ce que c’est jolie ? » et les commentaires se limitent trop souvent autour de remarques subjectives du style « je n’aime pas, il y a quelque chose qui me gène, et puis le jaune me fait trop penser au site de La Poste ».

Juger un webdesign en ne prenant en compte que l’aspect esthétique est insuffisant car il existe bien d’autres critères à évaluer. De plus, rien ne vous garantit que vos préférences esthétiques (couleurs …) feront l’unanimité auprès de vos utilisateurs. Et puis, faites vous un site uniquement pour satisfaire vos goûts personnels ou pour communiquer avec l’ensemble de vos internautes et leur faciliter l’utilisabilité du site ? Nous savons tous que « les gouts et les couleurs » sont basés sur des considérations qui nous sont propres et sont donc aussi variables qu’il existe d’individus. Le philosophe, historien et économiste David Hume, au XVIIIe siècle, a écrit : « La beauté n’est pas une qualité inhérente aux choses elles-mêmes, elle existe seulement dans l’esprit qui la contemple, et chaque esprit perçoit une beauté différente ». Obtenir un accord unanime sur ce seul critère est donc une utopie, et c’est « tant mieux » car c’est ce qui permet la diversité et la richesse de notre environnement.

La beauté

Pour rappel, voici une définition de la beauté trouvée sur Wikipédia :

« Le beau est communément défini comme la caractéristique d’une chose qui au travers d’une expérience sensorielle (perception) procure une sensation de plaisir ou un sentiment de satisfaction ; en ce sens, la beauté provient par exemple de manifestations telles que la forme, l’aspect visuel, le mouvement, le son, la saveur, l’odeur. »

On voit à travers cette définition à quel point la notion de beauté peut être abstraite et dépendre de la perception d’un individu.

Néanmoins, il semble que l’homme ait tout de même une idée plus ou moins précise de ce qui est beau et de ce qui ne l’ai pas. Souvent les critères de beauté sont issus des canons que l’on rencontre dans la nature (couleurs, symétrie, proportions, harmonie, équilibre …). Tous ces éléments nous servent de références inconscientes dans nos jugements esthétiques. A cela s’ajoutent des facteurs culturelles, sociologiques, historiques et philosophiques qui enrichissent et complexifient la notion de beauté.

On peut aussi penser que la notion de beauté s’apprend. Je pense que notre sensibilité au beau se développe avec ce que l’on a l’habitude de voir. C’est l’une des raisons pour laquelle on trouve de la beauté dans la nature. En effet, n’est ce pas l’environnement dans lequel l’homme a évolué depuis son origine. De même les critères de beauté féminine du 21 ème siècle, ne sont ils pas dictés et acceptés par le biais d’un matraquage publicitaire dont nous faisons l’objet quotidiennement ? Il y a donc aussi une forme d’éducation à la beauté par imprégnation. Les artistes, les designers, les publicitaires, les photographes, les créateurs ont donc une responsabilité importante et jouent un rôle non négligable dans cette éducation à la beauté.

Bref, la beauté est un concept complexe et abstrait et il n’est pas évident que NOTRE notion du beau soit partagée par l’ensemble des internautes. Il est donc important de ne pas prendre l’esthétisme comme unique critère de jugement dans l’appréciation d’un webdesign.

Attention, je ne suis pas en train de dire qu’il faut accepter un site que vous trouvez inesthétique, je dis seulement qu’il faut parfois se méfier de son propre jugement en terme d’esthétisme et qu’il faut ouvrir son appréciation à d’autres critères que celui de la couleur par exemple.

Les fonctions du webdesign

Qu’est ce qu’un bon webdesign et qu’est ce qu’un mauvais webdesign ? Pour en juger il faut connaitre les fonctions réelles et les objectifs du design web (cependant pour avoir une première idée de ce qu’est un mauvais webdesign, allez faire un tour sur MySpace ou SkyBlog). Il faut également prendre conscience qu’un site web est à la fois une interface, un ensemble d’informations et un visuel que le design va s’efforcer d’optimiser à travers l’utilisation de différentes techniques et une démarche créative.

Voici une liste non exhaustive des fonctions principales du webdesign :

1. Faciliter l’utilisation de l’interface web

Les sites internet sont des interfaces. L’utilisateur manipule certains levier et déclenche ainsi une réponse de la part du site. Cette interactivité doit être pensée de manière à ce qu’elle soit le plus accessible et compréhensible possible. Cette reflexion est généralement prise en charge par les ergonomes avec une collaboration des graphistes.

En effet l’ergonomie et le graphisme sont des disciplines complémentaires qui peuvent collaborer pour améliorer l’expérience utilisateur.

Alors que l’ergonome va imaginer la façon la plus simple et la plus évidente de proposer une fonctionnalité, le graphiste va amplifier ce concept en favorisant graphiquement la suggestivité de l’utilité d’un élément. Le design peut donc être un élément déterminant pour améliorer l’affordance d’un objet ou d’une fonctionnalité.

2. Mettre en valeur l’information

Un site web est un support qui permet d’afficher de l’information sous forme de divers contenus (texte, image, son, vidéo …). Le webdesign à donc aussi pour rôle de designer cette information pour la rendre la plus lisible et compréhensible possible. Pour y parvenir, il est nécessaire de trier, classer et organiser ce contenu. C’est le rôle de l’architecture d’information. Le designer interviendra également dans l’organisation de l’information, la hiérarchisation, la mise en place de relations entre des ensembles de contenu ou au contraire pour les distinguer. Alors que l’architecture d’information interviendra sur l’organisation physique et spatiale du site, le designer organisera le contenu par des procédés graphiques comme l’alignement, le respect des principes de la Gestalt …

3. Mettre en place une esthétique

Oui, l’esthétisme joue aussi un rôle important. Nous avons vue dans la définition de la beauté que celle-ci procurait une sensation de plaisir à travers les sens. Un web design esthétique procure donc une certaine satisfaction à l’internaute ce qui améliore son expérience et sa perception du site.

L’esthétisme d’un site ne s’obtient pas uniquement par le choix d’une palette chromatique. L’harmonie, l’équilibre, les espaces améliorent également la beauté d’un site, tout comme la cohérence, la hiérarchisation, le choix pertinent d’images et d’illustrations de qualités, la typographie etc.

Ce qui est donc important de retenir, c’est qu’un bon webdesign ne se base pas uniquement sur des critères esthétiques mais avant tout d’efficacité. Un webdesign efficace organise des éléments graphiques qui communiquent une information à un groupe de personnes ciblé. Pour cela, le webdesign utilise un langage visuel dont je reparlerai dans de prochains articles.

4. Communiquer

4.1. Créer/refléter une identité

Toute entité (publique, associative, privé …) a besoin de se construire une identité propre pour exister, être reconnu et se distinguer des autres.

Une identité permet également de fédérer un ensemble d’individus (collaborateurs, clients, prospects, partenaires …) qui se reconnaissent dans l’image et les valeurs que renvois cette identité.

Une identité bien définie améliore la crédibilité d’une entité et développe son capital confiance auprès des individus.

Un webdesign doit refléter l’identité d’une entité si celle-ci est déjà définie dans d’autres supports de communication. C’est souvent le cas lorsqu’une entreprise décide de mettre en place un site vitrine ou de e-commerce par exemple.

Dans d’autres cas, le webdesign devra créer une identité neuve : site pour annoncer un évènement ou le lancement d’un nouveau produit … Il s’agira alors d’étudier attentivement la concurrence pour trouver les éléments de distinction qui permettront au webdesigner d’élaborer une identité unique et originale. L’identité pourra également transmettre une ambiance, des valeurs ou un message.

4.2. Offrir une expérience sensorielle, émotionnelle

Un webdesign est une composition subtile de photographies, d’illustrations, de couleurs, une ambiance, une atmosphère, des métaphores… bref tout un langage graphique non verbal qui procure des sensations visuelles, voir auditives. Tous ces éléments peuvent faire ressurgir, chez le visiteur, des souvenirs, des émotions et des sensations lui permettant de (re-)vivre une expérience particulière qui fera qu’il adhèrera ou pas à l’univers qu’on lui propose.

Ce type d’expérience est particulièrement mis en avant sur des sites de type « lancement de produits » ou des sites de grandes marques qui souhaitent obtenir l’adhésion d’une certaine cible d’internautes par identification à un univers et aux valeurs qu’il transmet.

4.3. Apporter de la valeur ajouté au contenu

Le contenu texte d’un site peut être renforcé par des illustrations, des photographies, des schémas, des pictogrammes. Parfois une seule illustration peut exprimer ce que le texte n’arriverait pas à exprimer avec une centaine mots. Chacun sait à quel point la concision est importante sur le média web, le confort de lecture étant moindre que sur support papier. Dans ce contexte, le langage non verbal du webdesign apporte donc une valeur ajouté précieuse. Cependant souvenez-vous que le webdesign n’est pas du maquillage et par conséquent ne pourra pas masquer un mauvais texte ou un mauvais contenu.

4.4. Professionnaliser l’image

L’être humain est sensible à l’apparence visuelle des choses. Dans un webdesign, la qualité, la cohérence graphique, la finition, une interface bien structurée transmettront indéniablement une impression positive à votre site, un sentiment de fiabilité. Le ressenti de l’internaute se fera dès les premières secondes, non pas sur la base du contenu (le texte, les fonctionnalités) mais du contenant (le webdesign). Ainsi, la fiabilité de la forme (le contenant) aura un impact immédiat sur la fiabilité du fond (le contenu). Soigner le webdesign pour transmettre une image professionnelle rassurera l’internaute et captera sa confiance.

4.5. Traduire une stratégie marketing : le message

Etablir une stratégie marketing permet de pérenniser les ventes en se différenciant de la concurrence, en répondant aux besoins des consommateurs, en innovant. A partir de cette stratégie marketing, une marque où une entreprise définie donc un message que le design doit communiquer clairement.

Le message, tel que nous l’entendons ici doit répondre à la question : « Qu’est ce que je propose comme bénéfice à ma cible ? »

Pour répondre à cette question, le message doit décrire les avantages de votre offre (produits, services), avantages qui correspondent aux attentes de la cible. Le message doit également étayer les arguments qui justifient les avantages promis. Il peut s’agir de la description des caractéristiques distinctes du produit ou du service.

Par exemple, l’argumentaire d’un message publicitaire est souvent construit à partir de trois éléments :

- Des éléments informatifs : De quoi s’agit-il ? Quel est la valeur ajoutée du produit, du service ?

- Un stimuli affectif : humour, décalage, érotisme, imaginaire, rêve, questionnement, choque … Le stimuli affectif éveille l’intérêt de la cible, joue un rôle de séduction et établie un ancrage dans la mémoire. (C’est sous cette forme que la publicité nous manipule).

- Un engagement à l’action : incitation à appeler un numéro de téléphone, à remplir un formulaire, à visiter un magasin, à acheter un produit …

Le webdesign va fédérer tous les éléments du message et créer une tonalité graphique en adéquation avec ce message.

Le webdesign est donc un outil de communication pour :

- Attirer l’attention et réveiller notre interêt.
- Mettre en exergue un message particulier et le distinguer des autres parmi une multitude d’informations.
- Rendre le message plus percutant, plus efficace, plus mémorable.
- Réaliser la meilleure communication possible avec les éléments dont ont dispose.

Conclusion

Nous avons vue qu’il était réducteur de considérer le design web uniquement sous un angle esthétique. Le webdesign doit être évalué sur un éventail plus large de critères pour en apprécier la pertinence.

Pour en faire prendre conscience aux commanditaires, il revient au graphiste d’expliquer que le webdesign se soucis davantage des besoins et du profil de l’auditeur, de la cible, que de ses préférences et de ses goûts personnels (Attention, ce message n’est pas forcément facile à faire passer, apprendre à communiquer fait aussi partie du métier de webdesigner). Le graphiste a également tout interêt à expliquer sa démarche créative au client pour le convaincre de la pertinence de ses choix. Enfin le graphiste doit avoir une écoute active du client afin d’apporter une réponse adéquat à ses besoins.

Il faut également comprendre qu’un site se design différemment selon sa stratégie et ses objectifs. Un site institutionnel à vocation informative ne sera pas abordé de la même manière sur le plan du webdesign qu’un site mis en place pour le lancement d’un produit de marque destiné à une population « fashion ».

Pour conclure, un webdesign réussi ne suffit pas pour faire le succès d’un site. Celui-ci s’obtient en réunissant plusieurs disciplines que sont par exemple, outre le design, l’ergonomie, l’architecture d’information, la pertinence du contenu, la performance de la bande passante, le référencement, le marketing …

Sources et autres liens :

Article de Vincent Bénard sur les archives de site Veblog : A quoi sert le graphisme sur un site web

Pour aller plus loin :
Design Critiquing sur le blog « Veerle’s blog »
Under The Loupe #3: Critiquing sur le blog « Jason Santa Maria »

Pour répondre à cette question, Larissa Meek, Américaine et directrice artistique, a écrit l’article « Visual Metaphors: 7 rockstar examples on the web » que je vais tenter de vous traduire ici avec son aimable autorisation. Merci de m’indiquer les éventuelles erreurs de traduction si vous en observez.

Métaphores visuelles : 7 exemples sur le web

Qu’est qu’une métaphore ? Retournons à l’école (ou sur Wikipédia), si vous le voulez bien ? Une métaphore est une comparaison directe entre deux sujets ou plus, apparemment sans rapports, mais qui décrit un sujet de façon semblable à un autre sujet pour lui donner le même sens. Une métaphore est utile pour illustrer une idée, simplifier une idée complexe et faire réfléchir les gens.

La métaphore ne doit pas être confondue avec la comparaison qui compare deux sujets en utilisant les mots « comme » ou « aussi ». La métaphore est fréquemment utilisée dans des domaines comme la poésie, la musique, l’écriture, la publicité et l’art traditionnel. Si cela reste encore un peu flou, voici quelques exemples écrits :

« Tu es mon couché de soleil »
« Ils ont besoin d’un filet de sécurité »
« Laisse moi jouer l’avocat du diable »
« Il pleut des chats et des chiens »

Pourquoi les métaphores visuelles fonctionnent ?

Les métaphores visuelles mettent en valeur les sujets que l’on a sous la main. Les métaphores vous font réfléchir, vous invitent à analyser la façon dont deux sujets entre en relation. Sur le web, les métaphores visuelles peuvent mettre en valeur le contenu et les objectifs du site de manière théâtrale. Cela fonctionne magnifiquement pour capturer l’attention de votre audience et permet bien plus qu’un simple regard furtif. Une métaphore se compose de deux parties principales : le sens générale et le sens véhiculé. Le sens général est le sujet sur lequel la métaphore s’applique. Le sens véhiculé est le terme métaphorique à travers lequel le sens général est appliqué. Ces deux parties viennent ensemble enrichir un point de similitude. ¹

Dans un monde où de nombreux sites web adoptent la simplicité pour fournir un contenu dans un format digeste, les métaphores visuelles resterons toujours un bon moyen d’attirer l’attention.

Tant que vous avez l’attention des visiteurs, donnez leurs une raison de rester et de méditer sur une idée. Pourquoi ne pas faire réfléchir votre audience ?

Voici 7 excellents exemples de métaphores fonctionnant sur le web

01 – Métaphore étendue

Une métaphore étendue traite un sujet principal avec plusieurs sujets secondaires ou ressemblants. Le sujet est très largement développé et se produit fréquemment dans ou à travers une œuvre.

Un exemple écrit :

« Les vents étaient comme un océan de vagues, se fracassant contre les branches des arbres. Les rafales par la suite, ne s’interrompirent que lorsque le soleil revint. Leurs vagues se fracassaient avec éclat sous la pluie, apportant de la mousse et des feuilles mortes sur la rive.« ²

Hope Garden est un bon exemple utilisant une métaphore étendue. Le sens général est « l’espoir » et le jardin devient le sens véhiculé. Ainsi, les fleurs deviennent les symboles des désirs de chacun. (Ndlr : je vous conseil de vous rendre sur le site pour comprendre son fonctionnement et l’explication de la métaphore). Hope Garden devient une métaphore étendu avec le soutien des utilisateurs, lorsque les fleurs sont « arrosées » cela illustre l’idée que leurs espoirs grandiront.

02 – Métaphore paralogique

Les métaphores paralogique (Ndlr : je ne connais pas la véritable traduction de « paralogique ») n’ont pas de similarités apparente entre l’idée et l’image. ² Cela signifie que deux sujets sans aucun rapports sont comparés pour créer une métaphore.

Exemple : « Mes toilettes sont la boite aux lettres de ma salle de bain » (Ewww, très distingué !)

Post Secret fournis une excellente ressource d’inspiration pour tout un genre de métaphore et ils ont souvent des exemples de métaphores visuelles paralogique. (Tous les secrets ne sont pas paralogique mais beaucoup le sont).

Les utilisateurs envoient leur contenu sur le site donc ce n’est pas un site sur le design mais sur la beauté métaphorique des secrets des utilisateurs. Beaucoup des secrets envoyés sont illustrés par des images qui ne sont pas forcément reliées au secret lui même mais ces images sont rajoutées lorsqu’elles permettent de donner du sens au secret . De nouveaux secrets sont postés tous les dimanches.

03 – Métaphore Iconique

C’est le type de métaphore où une icône représente visuellement un sujet. Les métaphores iconiques sont devenu commun sur le web, comme par exemple l’icône « maison » représentant un retour à la page d’accueil ou l’icône « enveloppe » qui représente la page contact.

Davor Vaneijk utilise les icônes de façon proéminente sur la page d’accueil et comme un mécanisme logique pour représenter chaque section du site. Les icônes sont conçus pour être visuellement évidente et la beauté de cet exemple est dans la simplicité et la cohérence du style.

04 – La couleur comme métaphore

La couleur comme métaphore a communément été utilisé dans l’art où le rouge pourrait représenter la passion, la couleur or les retours dans le passé, le bleu représenterait la mélancolie et ainsi de suite … La couleur comme métaphore sur le web est souvent utilisée de façon à représenter les différentes sections de contenu et donner un sens à la mise en page.

Un exemple d’utilisation de la couleur pour représenter des sections de contenu est le site SharpIdeas.com.

Ce site utilise des formes de couleur pour représenter des types de contenu. Par exemple le print est bleu, les campagnes de marque sont grises, le design est rose et ainsi de suite … Ces couleurs ne représentent pas les sections sur un plan émotionnel mais deviennent une simple métaphore de couleur pour organiser la navigation.

05 – Métaphore mixte

Celle-ci est un peu confuse donc commençons par un exemple : »Il a mis les pieds dans le plat et a pris le taureau par les cornes ». Les métaphores mixtes sont constituées de différentes métaphores qui surviennent dans la même expression et qui sont utilisées pour exprimer le même concept. Les métaphores mixtes sont souvent, mais pas toujours, le résultat d’un conflit dans un concept.² C’est l’une des métaphores la plus difficile à épingler sur le web.

Pet Mustache est un exemple assez proche de la métaphore mixte. Le site est une initiative de publicité virale de Burger King. Tous le concept de ce site est une métaphore mixte affirmée, « A côté d’un cheval, tous les cowboy ont également une belle moustache bien formée. Il est temps de faire ressortir le cowboy qui est en vous ,cowboy ». La première partie de la métaphore mixte est la moustache de l’animal de compagnie. En fait, vous ne pouvez pas vraiment avoir une moustache comme l’animal mais vous pouvez vous y exercer. La seconde partie de la métaphore mixte est la métaphore du cowboy qui est en vous pour exprimer votre côté sauvage. De façon intéressante, le roi du Burger King a également une moustache bien entretenu ce qui lui a probablement inspiré ce concept.

C’est une métaphore mixte à cause de la comparaison entre l’animal de compagnie et la moustache – et l’expression du cowboy qui est en nous. Je suis fan de ma propre moustache animale ci-dessous et il s’agit de moi quand j’avais 4 ans. J’ai besoin d’entretenir ma moustache mieux que ça, elle semble un peu décoiffée. Yee-ha!

06 – Métaphore morte

Bien que cela sonne un peu ennuyeux, ça ne l’est pas. Les métaphores mortes, par définition, paressent normalement inaperçues. ⁵ Une métaphore morte est essentiellement une métaphore qui par son utilisation excessive a perdu sa valeur figurative. Exemple : « saisir un concept » ou « recueillir votre compréhension ». Ces deux phrases utilisent une action physique comme métaphore pour la compréhension (elle même une métaphore), mais dans aucun de ces cas le locuteur visualise vraiment l’action physique.

Le site Capital Corporate Communications vous accueille avec le slogan « nous façonnons des idées ». C’est une métaphore morte parce que ce slogan utilise une action physique pour donner de la tangibilité à la métaphore. C’est une phrase communément utilisée où l’utilisateur ne visualise pas l’action physique de façonner « l’idée ».

Capital Corporate Communications essaye de maitriser cela en représentant la métaphore à l’aide de pliage d’origami spécifique pour chaque section du site. La métaphore morte est illustrée à travers le dépliage du papier qui de ce fait change sa forme. (Ndlr : voire le fonctionnement du site Flash)

07 – Métaphore synecdoque

C’est un mot amusant à garder dans le fond de votre poche si un jour vous voulez paraitre ridicule. La synecdoque est une figure de style dans laquelle un terme désigne une partie de quelque chose pour se référer à la chose dans son entier, ou quelque chose (dans son entier) qui est utilisé pour se référer à une partie de celle-ci. La synecdoque est aussi un terme qui désigne une matière qui est utilisée pour se référer à un objet composé de cette matière. ⁶

La synecdoque est une métaphore dans laquelle une petite partie de quelque chose est choisi pour représenter l’entièreté de cette chose et de cette façon mettre en valeur certains éléments de l’ensemble. Par exemple: « je pousse vos roues » [roues fait référence ici à la voiture dans son entier] (Ndlr : probablement un expression anglophone ?)

Un paradigme visuel réussi d’une synecdoque s’observe sur le site WDCS Life Size Whale. Cet exemple est une synecdoque parce que la façon dont vous voyez la baleine c’est à dire seulement son oeil, représente et vous laisse imaginer la baleine dans son entier.

Cette perspective relate également l’échelle de grandeur entre l’homme et la baleine déclenchant un lien affectif dans la perspective de notre vision de l’homme par rapport à l’ampleur réelle de la Baleine.

Créer une métaphore réussie prend du temps et demande de la réflexion – mais cela peut être payant. Les métaphores ajouteront de l’interêt à votre site et créera du Buzz. Elles stimulent également l’appétit de la pensée créative de votre audience. La première étape pour créer une métaphore réussi est de comprendre les différents types de métaphores. Ensuite, pensez a ce qui fait qu’une métaphore fonctionne. Enfin, concentrez-vous sur la façon dont vous allez visuellement représenter le concept de votre métaphore. Sortez les mains de vos poches et commencer à faire des métaphores !

Références:

• 1 cod.edu: Parts of a Metaphor
• 2 Writesville: Examples of a Metaphor
• 3 Wikipedia: Types of Metaphor
• 4 sil.org: What are mixed metaphors ?
• 5 Wikipedia: Types of Metaphor
• 6 Wikipedia: Synecdoche

Sources :

« Visual metaphors : 7 rockstar examples on the web » de Larissa Meek.

Introduction

Depuis des siècles en Orient, les artistes prennent en considération qu’une création se définit autant par l’absence de ses éléments que par ceux qui la constituent (Scott McCloud, L’art invisible). Cette idée se retrouve facilement dans le symbole du Ying et du Yang. En art appliqué, cela est aussi vrai. Bien que le lecteur n’y face pas attention, il perçoit les espaces. En effet, sans les espaces vides, la lecture d’un document où d’une page web serait impossible.

L’espace est partout

En typographie, nous distinguons plusieurs type d’espaces blancs :

• L’interlignage, espace entre les lignes, espace vertical séparant les lignes de texte.
• L’interlettrage ou approche, espace entre les caractères d’un texte.
• L’espace, espace séparant les mots d’un texte.
• Les marges ou blancs tournants, espaces vierges qui entourent dans les quatre directions une page, un bloc de texte, une illustration …

Toutes ces familles de blancs participent à faciliter la lisibilité d’un texte ou d’une mise en page. Un subtil équilibre entre la répartition des espaces blancs et des éléments confère une meilleure lisibilité aux informations. En effet, ces espaces blancs contribuent à faciliter la perception de ces informations et diminue l’effort que l’utilisateur doit fournir pour appréhender une mise en page.

Exemple : le site Apple

La perception visuelle se fait de manière globale puis en parcourant les différentes zones unitaires. Se sont les espaces blancs qui permettent de distinguer les éléments que se soit une lettre, un mot, un paragraphe ou un groupe d’éléments.

Plus la mise en page est complexe et l’information dense, plus la lecture est difficile. Plus il y a de choses sur votre écran, plus l’information se noie dans un tout et moins elle devient visible.

En design, une large utilisation des espaces blancs apporte de l’élégance, une impression de qualité et une certaine sophistication que l’on rencontre souvent dans la communication des marques de luxe.

Exemple : le site de Chanel

Conclusion

Une utilisation subtile des espaces blancs améliore le confort de lecture et apporte une certaine harmonie au design. Les espaces blancs sont aussi un moyen habile pour isoler un élément, lui donner un poids visuel plus important et attirer l’attention du lecteur.

N’ayez pas peur d’utiliser les blancs dans vos mises en page afin qu’elles respirent. N’oubliez pas que plus vous surchargerez votre écran d’informations, plus elles auront du mal à se distinguer, plus elles seront difficiles à lire.

Sources et autres liens :

• AlistApart – Whitespace
• SmashingMagazine – White Space and Simplicity: An Overview

Mon niveau d’anglais étant loin du bilinguisme, il y aura probablement des interprétations personnelles. Dans la mesure du possible, j’essaye de respecter le sens générale de l’article d’origine. N’hésitez pas à me corriger si vous repérez des erreurs et disposez d’une traduction plus juste.

9 principes essentiels d’un bon webdesign

Le webdesign peut être d’une difficulté trompeuse: obtenir un design qui est à la fois fonctionnel et plaisant, qui fournis des informations et qui soit représentatif d’une marque, qui soit techniquement solide et visuellement cohérent …

A cela s’ajoute le fait que de nombreux webdesigner (moi inclue) sont des autodidactes, que le webdesign est encore assez nouveau pour être un sujet à part entière dans la plupart des institutions de design et que le médium change fréquemment comme toute technologie sous-jacente.

Aujourd’hui j’ai réuni mes 9 principes pour un bon webdesign. Il ne s’agit que de mes opinions et j’ai essayé de fournir des liens pour allez plus loin dans la lecture, aussi vous n’aurez pas que mon ressenti sur le sujet. Évidement, j’ai de nombreux contre exemple, les règles sont faites pour être détournées; différents types de design fonctionnent différement; je ne suis pas toujours à la hauteur de mes conseils etc, etc. Donc s’il vous plait, lisez ces conseils pour ce qu’ils sont, juste des observations que je souhaite partager.

Préséance (guider l’oeil)

Un bon design de site web, peut être encore plus qu’un autre type de design, met en valeur l’information. Un des plus puissant outil dans votre arsenal pour réaliser cela et la préséance. Lorsque l’on utilise un bon design, le regard de l’utilisateur doit être conduit à travers l’écran par le design. J’appelle cela la « préséance » et il s’agit de la quantité de poids visuel que possède chacune des parties de votre design.

Un simple exemple de préséance est que dans la plupart des sites, la première chose que vous voyez est le logo. C’est souvent parce que il est de grande taille et positionné à l’endroit où les gens regardent en premier comme l’ont démontré les études (en haut à gauche). Cela est une bonne chose car vous voulez probablement qu’un utilisateur sache immédiatement de quel site il s’agit.

Mais la préséance doit aller beaucoup plus loin. Vous devez diriger le regard de l’utilisateur à travers une série d’étapes. Par exemple vous pourriez avoir besoin que votre utilisateur aille de votre logo vers un premier slogan puis vers une image percutante qui donne au site sa personnalité, puis vers le texte du corps principal, avec un menu et une colonne latérale qui prend une position secondaire dans la séquence.

What your user should be looking at is up to you, the web designer, to figure out. (pixenjoy: traduction ?)
Ce qui devrait attirer l’attention des utilisateurs dépend de ce que toi, web designer, aura « mis en place ». (merci Vincent)

Pour mettre en place la préséance, vous avez de nombreux outils à votre disposition:

- Le positionnement: l’endroit où se situe un élément dans la page influence l’ordre dans lequel l’utilisateur le verra.

- La couleur: utiliser des couleurs audacieuses et subtiles est une manière simple de dire à vos utilisateurs où regarder.

- Le contraste: être différent fait ressortir les choses, être semblables les rends commune.

- La taille: la grosseur prend la préséance sur la petitesse (à moins que tout soit grand, dans ce cas le petit peut se démarquer grâce au contraste)

- Eléments de design: si il y a une gigantesque flèche qui pointe sur quelque chose, devinez ou l’utilisateur regardera ?

Pour aller plus loin sur la préséance, vous pouvez lire un ancien article écrit sur PSDTUTS : « Elements of Great Web Design – the polish.

L’espace

Lorsque j’ai commencé le webdesign, je voulais remplir tous les espaces disponibles avec du contenu. L’espace libre me semblait de l’espace gaspillé. En fait c’est tout le contraire.

L’espace rends les choses plus claires. En webdesign concernant l’espace, nous devons prendre en compte trois aspects:

- L’espace entre les lignes de texte (interlignage)
Lorsque vous laissez de l’espace entre les lignes, cela affecte directement la lisibilité du texte. Trop peu d’espace favorise le glissement de votre regard d’une ligne à l’autre, trop d’espace signifie que lorsque votre œil a terminé une ligne de texte il risque de se perdre à rechercher la ligne suivante. Donc vous devez trouver une valeur moyenne correspondant à un bon compromis. L’interlignage se contrôle en CSS avec le sélecteur ‘line-height’. Généralement, je trouve que la valeur par défaut est trop faible.

- Remplissage (padding)
De manière générale, le texte ne doit jamais toucher les autres éléments. Les images par exemple ne doivent pas toucher le texte, ni les bordures ou les tableaux. Le padding est l’espace entre un éléments et un texte. Une règle simple est que vous devez toujours laisser de l’espace. Il y a des exceptions bien sure, en particulier si le texte est une espèce de titre ou graphique ou que vous appelez David Carson Mais en règle générale, laisser de l’espace entre le texte et le reste des éléments le rend infiniment plus lisible est plaisant.

- Espace blanc
Tout d’abord, l’espace blanc n’a pas besoin d’être de couleur blanche. Le terme se réfère simplement à l’espace vide sur une page (ou l’espace négatif comme il est parfois appelé). L’espace blanc est utilisé pour donner de l’équilibre, des proportions et du contraste à une page. Beaucoup d’espace blanc tend à rendre les choses plus élégantes et haut de gamme, donc par exemple, si vous allez sur le site d’un couteux architecte vous verrez presque toujours beaucoup d’espace. Si vous voulez apprendre à utiliser efficacement les espaces, il faut ouvrir une revue et examiner comment les annonces sont paginées. Les annonces de grandes marques de montres et de voitures et autres ont tendance à utiliser beaucoup d’espace vide comme élément de design.

Pour aller plus loin sur WebDesignFromScratch il y a un bon article appelé « the Web 2.0 how-to design guide » qui traite de la simplicité, un concept qui utilise beaucoup l’espace.

Exemple : Marius possède un site propre, très simple avec beaucoup d’espace.

Navigation

Une des expériences les plus frustrantes que vous pouvez rencontrer sur un site web est d’être incapable de savoir ou aller ou de savoir ou vous êtes. J’aimerais penser que pour la plupart des webdesigner, la navigation est un concept que nous maitrisons, mais je trouve encore de mauvais exemples de ci de là. Il y a deux aspects dans la navigation à garder à l’esprit :

La navigation – Ou peut-on aller ?
Il y a quelques règles de bon sens à se rappeler. Des boutons pour voyager à travers le site doivent être faciles à trouver – se situer vers le haut de la page et facile à identifier – il doivent ressembler à des boutons de navigation et être bien décris – le texte sur les boutons doit être assez clair. Mis à part le bon sens, il est aussi important de rendre la navigation utilisable. Par exemple si vous avez un sous-menu type rollover, s’assurer que la personne puisse accéder au sous-menu sans perdre le rollover est important. De même, changer la couleur de l’image sur le rollover est une excellente expérience pour l’utilisateur.

Orientation – Ou sommes nous maintenant ?
Il y a de nombreuses manières d’orienter l’utilisateur donc il n’y a pas d’excuse à ne pas le faire. Dans un petit site, cela peut juste être un titre en gras ou d’une version « down » du bouton menu. Dans un site plus grand, vous pouvez utiliser un fil d’Ariane, des sous-titres et une carte du site pour les personnes vraiment perdus.

A lire :
SmashingMagazine a une sélection intéressante d’exemples de style de navigation . AListApart a aussi un bon article sur l’orientation appelé Ou suis-je ?

Concevoir en construisant

La vie est un peu plus facile depuis que les webdesigner sont passés à une mise en page CSS, mais encore aujourd’hui il est toujours important de garder à l’esprit la façon dont vous allez construire un site lorsque vous serez dans Photoshop. Prenez en compte des choses comme :

Est ce que c’est faisable ?
Vous avez peut-être choisi une police étonnante pour votre corps de texte, mais est-elle réellement un standard HTML ? Vous avez peut-être concu un design superbe mais sa largeur est de 1100px ce qui se traduira par un défilement horizontal pour la majorité des utilisateurs. Il est vraiment bien de savoir ce qui peut et ne peut pas être fait, c’est pourquoi je crois que tous les concepteurs de sites Web devraient aussi intégrer des sites, au moins quelque fois.

Que se passe-il lorsque l’on modifie la résolution de l’écran ?
Est ce que vous avez besoin de répéter l’arrière plan, comment cela va t’il fonctionner ? Est ce que le design est centré ou aligné à gauche ?

Est ce que vous faite quelque chose qui sera difficile techniquement à mettre en place ?
Même avec le positionnement CSS, des choses comme l’alignement vertical sont encore un peu difficile et parfois il est préférable de l’éviter.

Est ce que de petits changements dans votre design simplifiera grandement la façon dont vous allez le construire ?
Parfois bouger un objet dans un design peu faire une grosse différence dans la manière dont vous allez plus tard coder votre feuille CSS. En particulier lorsque les éléments d’un design se chevauchent les uns les autres cela est un peu complexe à construire. Donc, si votre design a trois éléments et que chaque élément est complètement séparé des autres, il sera vraiment plus facile à construire. D’autre part, si les trois éléments se chevauchent les uns les autres, la construction peut être réalisée mais sera probablement plus compliquée. Vous devez trouvez un équilibre entre un design esthétique et de simples changements qui pourront simplifier l’intégration.

Pour les grands sites en particulier, pouvez vous simplifier les choses ?
Il fut un temps où j’avais l’habitude de faire des images pour les boutons de mes sites. Donc, si il y avait un bouton « téléchargement » par exemple, je pouvais faire une petite image symbolisant le téléchargement. L’année dernière, je suis passé aux CSS pour faire mes boutons et je ne suis jamais revenu à l’ancienne méthode. Bien sure cela signifie que mes boutons n’ont pas toujours la flexibilité que je pourrais souhaiter mais le temps sauvé lorsque j’ai des douzaines de petits boutons à faire est énorme.

Typographie

Le texte est l’élément le plus commun en webdesign, donc ce n’est pas surprenant que beaucoup d’efforts ont été fait pour la typographie web.

Il est important de considérer des choses comme :

- Le choix des polices :
Différents types de polices disent différentes choses à propos d’un design. Certaines font moderne d’autres rétro. Assurez-vous d’utiliser le bon outil pour le bon travail.

- La taille de la police :
Il y a quelques années, il était tendance d’utiliser de très petite taille de police. Heureusement, aujourd’hui les gens commencent à réaliser que le texte est destiné à être lu, pas seulement regardé. Assurez-vous que la taille de votre texte est suffisamment grande pour être lu, et proportionné afin que les titres et sous-titres se détachent correctement.

- Interligne :
Comme signalé plus haut, l’espace entre les lignes et l’écart avec les autres objets est une chose importante à considérer. Vous devriez aussi penser à l’interlettrage, quoique sur le web cela est de moindre importance n’ayant pas beaucoup le contrôle.

- Longueur de ligne :
Il n’y a pas de règles rigides et toutes faites, mais généralement vos lignes ne doivent pas être trop longues. Plus longues elles seront, plus difficile à lire elles seront. De petites colonnes de texte fonctionnent mieux (pensez à la façon dont les journaux disposent leurs textes)

-La couleur :
Une de mes pires habitudes est de faire des contrastes faibles. Cela présente bien mais ne se lit pas très bien malheureusement. De plus, il semble que je l’ai fait sur tous les sites que j’ai designé, tsk tsk tsk.

- Paragraphes :
Avant de commencer à designer, j’aime tous justifier. Cela fait de belles frontières de chaque côté de mes paragraphes. Malheureusement, le texte justifié à tendance à créer de grand espaces vides entre les mots à l’endroit où ils sont auto-espacés. Ce n’est pas terrible pour vos yeux lorsque vous lisez, donc ajustez votre texte à gauche, à moins d’avoir un corps de texte magique qui gère les espaces parfaitement.

A lire : Nick La sur WebDesignerWall a rédigé un bon article sur la typographie en ligne appelé Typographic Contrast and Flow

Usabilité

Le webdesign, ce n’est pas seulement jouer avec de belles images. Avec toutes les interactions et les informations qui affectent un site web, il est important que vous designer, les rendiez toutes disponibles. Cela signifie que vous devez designer votre site en pensant aussi à son utilisabilité.

Nous avons déjà discuté de certains aspects d’utilisabilité : la navigation, la hiérarchisation, le texte. En voici trois parmi les plus important :

- Adhérer aux standards
Il y a certaines choses auxquelles les utilisateurs s’attendent, ne les décevez pas. Par exemple, si le texte est souligné, vous vous attendez à ce que se soit un lien. Procéder autrement n’est pas une bonne pratique d’utilisabilité. Bien sure vous pouvez rompre les conventions, mais la plupart de vos sites web doivent faire ce que les utilisateurs en attendent.

- Penser à ce que les utilisateurs feront effectivement
Faire un prototype est une démarche habituelle dans la conception de site. Cela se fait car bien souvent lorsque vous manipulez un design vous remarquez les petites choses qui font la différence. Le site Alist Apart avait un article il y a un certain temps qui s’appelait « Never Use a Warning When You Mean Undo » qui est un excellent exemple de conception d’un message d’alerte qui peut « pourrir » la vie d’un utilisateur.

- Penser aux tâches de l’utilisateur
Lorsqu’un utilisateur va venir sur votre site que va t’il essayer de faire ? Listez les différentes actions qu’un utilisateur est susceptible de faire sur un site, comment va t’il procéder, et comment allez-vous lui faciliter la tâche. Cela peut vouloir dire par exemple avoir les fonctionnalités les plus usuelles sur votre page d’accueil (panier d’achat, rubrique a propos …) ou cela peut aussi vouloir dire assurer la présence d’un formulaire de recherche qui soit toujours facilement accessible. A la fin de la journée votre webdesign est un outil utilisable pour les utilisateurs, et les utilisateurs n’aiment pas utiliser des outils ennuyeux.

A lire :
Le site Alist apart a de nombreux articles sur l’utilisabilité web

L’alignement

Garder les choses alignées est aussi important en webdesign qu’il est en design print. Cela ne veut pas dire que tous doit être aligné sur une même ligne, mais au lieu de ça, vous devriez apprendre et essayer de garder les choses consciencieusement placées sur la page. L’alignement donne à votre design une impression d’ordre et s’appréhende mieux.

Vous pouvez aussi vouloir baser votre design sur une grille spécifique. Je dois admettre que je n’ai pas fait cela consciencieusement – évidemment un site comme PSDTuts a une solide structure basée sur une grille. Cette année j’ai vue plusieurs très bons articles sur le design basés sur les grilles comme par exemple SmashingMagazine’s Designing with Grid-Based Approach et AListApart’s Thinking Outside The Grid. En fait si vous êtes intéressé par les design basés sur les grilles, vous devez absolument rendre visite au site bien nommée DesignByGrid.com.

Clarté (acuité)

Garder son design propre et net est très important en webdesign. Et quand il s’agit de clarté, il s’agit de pixels.

Dans votre feuille CSS tout sera au pixel prêt, il n’y a donc rien à craindre, mais dans Photoshop ça ne le sera pas autant. Pour réaliser un design précis vous devez :

- Garder le bord des formes nets en pixels. Cela peut impliquer un nettoyage à la main des formes, des lignes et des boites si vous les créez dans Photoshop.

- Assurez-vous que tous les textes sont créés en utilisant le réglage « anti-aliasing ». J’utilise beaucoup le paramètre « sharpe »

- Assurez-vous que le contraste est élevé pour que vos bordures soient clairement définies.

- Accentuez un peu vos bordures pour légèrement exagérer le contraste.

A lire :
J’ai écris un peu plus sur le sujet dans Elements of Great Web Design – the polish. J’ai remarqué que les designers du print en particulier qui passaient au design web ne pensaient pas en pixels, mais c’est vraiment indispensable.

Cohérence

Cohérence signifie que tout s’assemble bien. La taille des titres, le choix des polices, les couleurs, le style des boutons, les espaces, le design des éléments, le style des illustrations, le choix des photos … Tout doit être composé pour que le design soit cohérent entre les pages et sur une même page.

Garder un design cohérent c’est être professionnel. Les incohérences dans un design sont comme les fautes d’orthographe dans une dissertation. Ils diminuent l’impression de qualité. Quelque soit à quoi ressemble votre design, le garder cohérent l’élèvera toujours d’un cran. Même si c’est un mauvais design, au moins gardez le cohérent.

Le moyen le plus simple de rester cohérent dans votre design et de prendre tôt des décisions et de s’y tenir. Avec un grand site cependant les choses peuvent bouger dans le processus de design. Lorsque j’ai conçu le site FlashDen par exemple, le processus à pris des mois et à la fin, certaines de mes idées pour les boutons et les images ont changé alors j’ai dû revenir en arrière et revoir les pages déjà conçus pour les harmoniser avec les autres.

Avoir une bonne série de feuille de style CSS peut aussi aider à maintenir un site cohérent. Essayez de définir les principales balises HTML comme H1 et P et évitez ainsi d’avoir à vous souvenir de libellés spécifiques tout le temps.

A lire : Dans le site ThinkVitamin, l’article How CRAP is your design ? , parle de la répétition dans une page et combien ce concept est important. L’article est écrit par Mike Rundle qui design le site 9rules, donc vous savez que ça vaut la peine de le lire.

Obtenir mon livre.

Vous avez appréciez cet article ? Je viens juste de terminer un livre sur le statut de freelance que vous pouvez commander en ligne comme un e-book. Ce guide vous permettra d’en savoir plus sur la façons d’être une Rockstare Freelance.

Source : 9 Essential Principles for Good Web Design – Collis Ta’eed

Le concept

L’utilisation d’une grille dans le processus de mise en page nous vient de l’imprimerie ou les graphistes l’utilisent depuis longtemps pour composer sur support papier.

Même si les contraintes du support papier et de l’écran sont différentes, l’utilisation d’une grille rend les mêmes services. L’idée est simple. Elle consiste à se servir d’une grille comme d’un guide pour caler le long des lignes horizontales et verticales les éléments constitutifs d’une page (bloque de texte, photo, bannière, logo, pied de page, bloque menu …).

La grille nous aide donc à organiser les éléments sur la page non pas de façon aléatoire ou intuitive mais de façons structurée et précise.

Pourquoi utiliser une grille en webdesign ?

Harmonie globale

Comme nous venons de le voir la première raison est de disposer d’un canevas, d’un support visuel, sur lequel on va pouvoir se baser pour combiner des éléments entre eux.

Mais ce qu’apporte avant tout l’utilisation d’une grille c’est la mise en place d’une certaine harmonie en matière de composition et de proportion. La grille structure et rythme le design améliorant le confort et la facilité de lecture du contenu de nos pages web.

Rythme vertical

L’harmonie d’une mise en page s’obtient également en respectant son rythme vertical. Les facteurs qui influencent le rythme vertical d’une page web sont :

• - La taille de la police.
• - La hauteur de ligne du texte.
• - Les espaces verticaux des titres, des listes, des paragraphes, des blocs …

Le rythme vertical est obtenu à condition de respecter une règle de proportionnalité entre les valeurs fixées à ces paramètres.

Par exemple si je choisis d’utiliser une taille de police de 12 px, je vais fixer la hauteur de ligne du texte à 18 px ce qui correspond à un rapport de 150%. Pour les titres, on pourra choisir : 24px pour h1, 18px pour h2, 12px pour h3. En partant de h1, je retranche 6 px pour chaque titre inférieur, 6 étant un multiple de 12, taille de base de ma police.

Je ne vais pas détailler ici la mise en place du rythme vertical. Vous trouverez à ce sujet de très bons articles dont voici deux références :

• - Compose to a vertical rhythm by Richard Rutter
• - Setting type on the web to a baseline grid by Wilson Miner

Quelle grille choisir ?

Pour construire une grille, il faut choisir une règle de calcul qui va déterminer les proportions du quadrillage.

Le nombre d’or

La plus connue de ces règles et celle du « nombre d’or » aussi appelé « divine proportion » basée sur le nombre Phi (= 1,618). On retrouve cette règle en mathématique avec la suite de Fibonacci mais aussi dans la nature où elle détermine les proportions de nombreux organismes vivants. Tout au long de l’histoire, la divine proportion s’est immiscé dans l’architecture et les oeuvres artistiques.

Le webdesign étant une forme d’art, l’utilisation du nombre d’or fonctionne parfaitement.

Si l’on choisie par exemple un design en deux colonnes non symétriques. Admettons que nous fixions la colonne de contenu principale à 400px, la seconde colonne, pour répondre à la règle du nombre d’or devra mesurer 400/1,618=247 soit en arrondissant 250 px.

Cette exemple simple peut être appliqué à l’ensemble de votre composition. A partir du moment où l’un de vos paramètres et fixé (largeur du site, d’une colonne, d’une image …) la largeur des autres éléments peut être calculée en utilisant un rapport basé sur le nombre Phi (= 1,618).

Pour calculer facilement les proportions entre deux mesures selon la régle d’or, James Mellers a développé une petite application appelée Phicalculator librement téléchargeable sur son site www.thismanslife.co.uk

Mark Boulton à écrit une série d’articles sur l’utilisation des grilles. L’un d’entre eux vous montre comment construire une grille basée sur le nombre d’or.

Allez également faire un petit tour sur le site Information Architects et plus précisément sur cette page qui vous propose un template Wordpress gratuit entièrement réalisé à partir de la divine proportion.

Construire sa propre grille

Si la technique du nombre d’or ne vous convient pas, vous pouvez travailler à partir d’une grille que vous aurez vous même conçu. Pour un site à largeur fixe, en fonction de la valeur que vous voulez attribuer à celle-ci, choisissez une largeur de grille qui vous permette de diviser la grille en plusieurs colonnes de même taille. A vous de choisir le nombre de subdivisions qui vous convient le mieux (5, 10, 12, 14… colonnes).

Une grille comporte également des rangées horizontales délimitées par des lignes de flux et des gouttières qui symbolisent les espaces vides. En CSS ces repères se traduiront par des blocs, marges et remplissages.

Prenons l’exemple d’un site dont la largeur totale sera de 1000 px. La grille fera 1000 px de large. Si je choisie de travailler sur une grille de 12 colonnes avec des espacements (11 au total) entre chaque colonne de 20 px, j’aurai des colonnes de (1000-(11X20))/12=65 px.

Vous pourrez trouver d’autres modèles de grille sur le net, en voici quelques unes :

• - Une grille de 960 px
• - Des grilles au format PDF.
• - Astuce : utiliser un tableur pour faire votre grille.
• - Un outil bien pratique pour construire sa propre grille sur mesure.

Comment utiliser une grille ?

Le choix de votre grille dépendra de la nature du projet sur lequel vous travaillerez et du nombre de colonnes sur lequel vous aurez décidé de baser votre design. Je pense qu’il ne faut pas avoir peur de travailler avec une grille comportant de nombreuses colonnes (10, 12, 14, 16). Vous aurez toute la liberté de créer des « super-zones » en étalant des contenus sur plusieurs colonnes adjacentes mais aussi d’organiser des « mini-zones » en vous servant de chaque colonne comme une subdivision de composition.

Une fois que vous avez choisi votre modèle de grille, vous pouvez commencer à imaginer les différentes combinaisons de mise en page. Faites plusieurs essais puis comparez les différents résultats.

Les graphistes pourront reprocher aux grilles d’être une entrave à la créativité en imposant un cadre trop rigide et restrictif. N’oublions pas qu’une page web est avant tout une présentation de contenu dans 95 % des cas et que la grille apporte de la cohérence à ce contenu. La rigidité des grilles peut être contournée en produisant des effets asymétriques. Les grilles offrent une multitude de possibilités qu’il ne faut pas hésiter à expérimenter.

Tout en vous appuyant sur la solidité des grilles, votre choix doit être déterminé par l’esthétique, l’équilibre et l’ergonomie.

Vous pouvez imprimer votre grille sur papier et dessiner vos essais de mise en page au crayon. D’autres préfèrerons dessiner les maquettes directement dans un logiciel de dessin. Dans ce cas copiez votre grille sur un calque « grille » et dessinez votre maquette sur un autre calque. L’idéale étant de réserver un calque pour chaque éléments pour pouvoir les permuter facilement et expérimenter différentes compositions.

Lorsque vous passerez à l’intégration xhtml/css, utilisez votre grille en image de fond (propriété CSS background). Cette méthode visuelle est plus rapide que celle qui consiste à calculer sans cesse les espacements et les positions.

Cette étape suppose bien sure que vous ayez en votre possession une connaissance de l’arborescence du site, de ses menus, du contenu et des illustrations qui accompagnerons vos textes.

Pour vous faciliter l’intégration xhtml/css vous pouvez travailler à partir d’un framework CSS qui se soucie de la mise en page à partir d’une grille. C’est le cas du projet BluePrint que je vous conseil de découvrir. A ce sujet, Barbablog donne son avis dans l’article « Blueprint, un framework pour webdesigner« .

Faire oublier la grille

Une fois que votre mise en page est terminée, il vous reste encore pas mal de travail de design.

Si vous avez besoin d’estomper l’aspect grille de votre mise en page, il existe des solutions créatives en utilisant judicieusement les images d’arrière plan.

Jina Bolton en donne un bon exemple dans son article Breaking Out of the Box publié sur le site SitePoint.

Pour les allergiques aux grilles, allez faire un tour sur ce blog de Peter Gabbor : Design et Typo, pour découvrir l’article sur David Carson, véritable casseur de grilles.

Conclusion

L’utilisation d’une grille dans la conception d’une mise en page est une technique qui à fait ses preuves depuis longtemps. C’est un support pratique pour nous aidez à organiser de façon harmonieuse notre contenu et donner de la cohérence à notre composition.

La rigidité des grilles n’est que apparente et ne doit pas vous inhiber dans la création de vos compositions. N’hésitez pas à explorez la multitude de possibilités qu’elles vous offrent.

Inspirez vous des journaux, magazines et autres support du print. Vous y trouverez d’innombrables exemples de mise en page créatives à base de grilles. Regardez également autour de vous, les grilles se retrouvent partout, dans les motifs, l’architecture, les objets de notre quotidien …

Sur le web, allez faire un tour sur la galerie CSSJuice, vous y trouverez des exemples de sites basés sur un design « grille ».

Mes sources et quelques liens en plus

Web :

• - Le nombre d’or : goldennumber.net
• - Designing with grid-based approach, une mine d’articles sur le sujet.
• - Design & Typo « Grilles de Mise en Page | typographie web et print« 

Ouvrage :

- Transcender CSS, sublimez le design web ! – Andy Clarke – Edition Eyrolles

PDF :

- Un exemple pratique d’une mise en page à l’aide d’une grille.