Hein, quoi ! mais comment se fait-ce ?

Cela n’a pas été la plus facile des décisions que j’ai eues à prendre, cependant elle s’est faite progressivement et a été mûrement réfléchie. Je me suis beaucoup investi pour que le projet Peaxl voit le jour et mes relations avec Thibaut et Francis ont toujours été (et restent) excellentes. Cependant, nous avons tous les trois constaté qu’un chevauchement des compétences ajouté à un pouvoir de décision sur des sujets communs nous ralentissaient dans notre prise de décision et donc par voie de conséquence dans notre progression. J’avais déjà abordé ce sujet dans mon article intitulé « Leçons apprises du projet Peaxl » et plus le temps avançait, plus cette difficulté persistait sans que nous ayons trouvé de véritable solution.

Je pense maintenant, avec le recul, que le succès d’un projet tient beaucoup à la complémentarité des acteurs du projet. Si le duo Steve Wosniak et Steve Jobs a si bien fonctionné à ses débuts, c’est parce que la timidité de l’ingénieur surdoué mais introverti Steve Wosniak, a été largement compensée par Steve Jobs le business man extraverti capable de convaincre n’importe qui.

Dans le cas de notre trio, nous étions à la fois concepteur, développeur, intégrateur et designer. Chacun était décisionnaire sur les sujets touchant les choix techniques liés au site Peaxl, à la communication et au marketing. Cela a engendré de longues discussions, avec des avis souvent très différents et donc des difficultés à trancher. Dans tous les cas, les compromis concédés laissaient toujours l’un d’entre nous insatisfait. Bref, nous étions trop à nous marcher sur les pieds et peut être pas assez complémentaires pour dégager des leaders dans chacun des grands pôles à savoir le développement-intégration, le design, le marketing-communication.

J’ai donc pris la décision de suivre mon propre chemin afin de débloquer les choses, aussi bien du côté de Peaxl que de mon côté.

Thibaut et Francis vont continuer l’aventure ensemble au sein de Peaxl. En ce qui me concerne, je vais développer des thèmes WordPress et, dans un premier temps, tenter de les vendre sur des marketplaces type ThemeForest. Parallèlement, je vais travailler à la mise en place d’un site web qui fera la promotion de mes thèmes et renverra les utilisateurs vers ThemeForest, s’ils souhaitent les acquérir. Si le succès est au rendez-vous, il se peut que dans un second temps, je mette en place ma propre plateforme de vente pour ne plus dépendre des marketplaces de thèmes WordPress.

Voila, il y a du travail sur la planche. Je souhaite que ma décision soit un nouveau départ pour Peaxl et pour moi. J’ai appris beaucoup de choses durant ces deux années, aussi bien à travers nos difficultés qu’à travers nos réussites. Je vais suivre de près l’évolution de Peaxl et je reste en contact avec Thibaut et Francis pour échanger sur nos expériences respectives.

Bonne route à Peaxl.

WordPress est un outil très bien documenté, mais lorsque qu’il s’agit de résoudre des bugs de développement, la documentation peut ne pas suffire.

Heureusement pour le déboguage, WordPress, PHP et quelques plugins mettent à votre disposition un certain nombre d’outils pour vous mettre sur la piste.

Voici un « pense-bête » d’éléments utilisables dans un environnement de test qui vous aiderons à tracker et résoudre vos bugs de développement sous WordPress.

Quelques rappels

Deprecated

Une application telle que WordPress évolue et s’améliore au cours du temps. Certains éléments du programme sont abandonnés alors que d’autres font leur apparition soit pour remplacer et optimiser ces derniers, soit pour apporter de nouvelles fonctionnalités.

En Anglais, les éléments dépréciés à durée de vie limité, sont qualifiés de deprecated. Ces éléments sont déconseillés à l’usage dans vos futurs développements. Il peut s’agir de fichiers, de fonctions, d’arguments.

Notices, Warnings, Errors

En PHP, le langage de programmation utilisé pour développer WordPress, il existe différents niveaux de messages d’erreur.

Notices:
Le code incriminé ne provoque pas d’erreurs de fonctionnement (non-fatal errors) et PHP/WordPress vous laisse la liberté de l’utiliser. Cependant une « Notice » est un avis qui vous conseille d’envisager les choses autrement pour diverses raisons.

Exemple: vous utilisez une fonction « deprecated » depuis la version 2.8 de WordPress. Cette fonction fonctionne toujours dans WordPress 3.2 (votre version actuelle) mais elle pourrait disparaître dans les futurs versions.

Warnings:
Ce type de message est un avertissement vous indiquant qu’il y a une erreur de codage. Votre code ne bloque pas l’exécution du script (non-fatal errors) mais vous devez corriger votre erreur.

Exemple: Le type de la variable que vous passez en argument dans telle fonction n’est pas le type attendu.

Errors:
Ce type de message indique qu’il y a une erreur fatale (fatal errors), elle empêche le script de s’exécuter. Il faut impérativement corriger cette erreur sinon votre programme sera inutilisable.

Exemple: vous appelez dans votre code une fonction qui n’a pas été définie donc qui n’existe pas.

Deboger sous WordPress

Constantes WordPress

Dans votre fichier de configuration config.php, vous pouvez activer un certain nombre de constantes conçues pour accompagner le développeur dans sa chasse aux bugs.

WP_DEBUG

define('WP_DEBUG',true);

Cette constante est paramétrée à false par défaut dans WordPress.

Lorsque la constante WordPress WP_DEBUG est paramétrées à true dans votre fichier config.php, cela indique à PHP de faire remonter les trois niveaux de messages d’erreurs (Notices, Warnings, Errors) et de les afficher dans votre navigateur. Vous pouvez ainsi voir les erreurs de codage et les éléments « deprecated » de WordPress que vous utilisez dans votre code. Par défaut, WordPress indique à PHP de faire remonter les messages de type « Warnings » et « Errors » uniquement.

WP_DEBUG_LOG

define('WP_DEBUG_LOG',true);

Cette constante est paramétrée à false par défaut dans WordPress.

Si vous souhaitez conserver les messages d’erreurs dans un fichier de log /wp-content/debug.log, paramétrez la constante WP_DEBUG_LOG à true dans votre config.php

Dans WordPress 3.3, vous pourrez choisir le nom et l’emplacement de ce fichier de log.

WP_DEBUG_DISPLAY

define('WP_DEBUG_DISPLAY',false);

Cette constante est paramétrée à true par défaut dans WordPress.

Elle permet d’afficher les messages « Warnings » et « Errors » uniquement (pas les « Notices »). Son fonctionnement est un peu particulier, elle écrase le paramétrage de l’instruction PHP display_errors (affichage des erreurs) mais partiellement.

En effet, si display_errors est paramétré à off alors define(‘WP_DEBUG_DISPLAY’,true); force le passage de display_errors à on. Par contre si display_errors est paramétré à off, define(‘WP_DEBUG_DISPLAY’,true); ne peut pas forcer le passage de display_errors à on.

Généralement, si la constante WP_DEBUG est passée à true, la constante WP_DEBUG_DISPLAY peut être passée à false

Pour résumer, voici un exemple de code que vous pouvez mettre dans votre fichier wp_config.php :

define('WP_DEBUG', true);
if (WP_DEBUG) {
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);
@ini_set('display_errors', 0);
}

SCRIPT_DEBUG

define('SCRIPT_DEBUG',true);

Cette constante est paramétrée à false par défaut dans WordPress.

Passé à true, cette constante utilise les fichiers JS et CSS de développement de WordPress au lieu des versions minimifiées/concaténées de production. Vous pourrez ainsi étudier les CSS et JS de la partie admin de WordPress.

SAVEQUERIES

define('SAVEQUERIES',true);

Cette constante est paramétrée à false par défaut dans WordPress.

Passé à true, cette constante permet de stocker dans la Classe $wpdb->queries un tableau regroupant l’historique des requêtes avec leurs temps d’exécution.

La classe $wpdb possède plusieurs variables qui stockent des informations qui pourront vous être utiles :

$show_errors: Active ou pas l’affichage des erreurs. True par défaut.

$num_queries : Nombre de requêtes qui ont été exécutées.

$last_query : Requête exécutées le plus récemment.

$queries : Tableau de l’ensemble des requêtes exécutées suite à l’activation à true de la constante SAVEQUERIES.

$last_result : Contient les résultats de la requête la plus récemment exécutée.

$col_info : Contient les informations de la colonne de la requête la plus récemment exécutée.

$insert_id : ID généré pour un AUTO_INCREMENT de colonne par la plus récente requête de type INSERT.

$num_rows : Nombre d’enregistrement retourné par la dernière requête.

$prefix : Prefix de table assigné par WordPress pour le site.

$base_prefix : Prefix original de la base défini dans le fichier wp_config.php. Pour un WP Multisite, donne le prefix de la base sans le numéro de blog associé.

Fonctions PHP

Pour afficher des informations utiles au débuggage, vous pouvez vous aider des fonctions PHP suivantes:

var_export($expression, booléen)

L’argument booléen est à false par défaut.

Cette fonction affiche des données structurées sur la variable $expression passée en argument sous forme de PHP valide.
Mis à true, var_export() retournera la représentation de la variable au lieu de l’afficher.
Voir la documentation PHP pour plus de précision.

print_r($expression, booléen)

L’argument booléen est à false par défaut.

Cette fonction affiche des informations à propos d’une variable, de manière à ce qu’elle soit lisible.
Pour obtenir le résultat de print_r() dans une chaîne, utilisez true, print_r() retournera l’information plutôt que de l’afficher.
Voir la documentation PHP pour plus de précision.

var_dump($expression)

Cette fonction retourne les informations structurées d’une variable, y compris son type et sa valeur.
Voir la documentation PHP pour plus de précision.

list_hooked_functions($tag=false)

Comme son nom l’indique, cette fonction trouvé sur WPRecipes vous permettra de lister toutes les fonctions rattachées à un hook (le hook est défini par l’argument « tag »). Cela peut être d’une aide précieuse lors du développement d’un thème.

function list_hooked_functions($tag=false){
global $wp_filter;
if ($tag) {
$hook[$tag]=$wp_filter[$tag];
if (!is_array($hook[$tag])) {
trigger_error("Nothing found for '$tag' hook", E_USER_WARNING);
return;
}
}
else {
$hook=$wp_filter;
ksort($hook);
}
echo '<pre>';
foreach($hook as $tag => $priority){
echo "<br />&gt;&gt;&gt;&gt;&gt;\t<strong>$tag</strong><br />";
ksort($priority);
foreach($priority as $priority => $function){
echo $priority;
foreach($function as $name => $properties) echo "\t$name<br />";
}
}
echo '</pre>';
return;
}

Plugins WordPress

Enfin, des développeurs de la communauté WordPress ont mis à notre disposition des plugins conçus pour assister le développeur dans le débuggage des ses thèmes.

Debug Bar

Le plugin Debug Bar ajoute un menu à la barre d’administration pour afficher des informations sur :

• Les variables globales (GET, POST, COOKIE, SERVER …)
• La performance d’exécution de vos plugins et thèmes.
• Les requêtes exécutées et leur temps d’exécution.
• Les erreurs lors du chargement de la page.

Log Deprecated Notices

Le plugin Log Deprecated Notices logue l’usage, dans votre thème, de fichiers, fonctions ou arguments dépréciés.

Ce plugin identifie également l’endroit dans votre programme où vous avez utilisé la fonctionnalité dépréciée. Il vous propose une alternative si elle est disponible.

Enfin, ce plugin logue les usages incorrectes de fonctions.

L’utilisation de ce plugin ne nécessite pas forcément l’activation de la constante WP_DEBUG cependant nous vous conseillons de l’activer tout de même pour debugger vos thèmes.

Theme Check

Le plugin Theme Check teste si vous utilisez les derniers standards de développement prescris par WordPress. Il vous affiche dans l’espace d’administration tous les résultats à la fois avec des indications pour vous aider à identifier le code non conforme.

Dump environnement

Le plugin Dump environnement vous aide à tracker des Classes WordPress et des variables à des fins de débogage.

Debug Queries

Le plugin Debug Queries utilise la constante SAVEQUERIES de la Classe wpdb pour afficher les requêtes en cours sur le front-end de votre site. Seul le profil « Admin » pourra visualiser cet affichage.

Dans le fichier wp_config.php, passez la constante SAVEQUERIES à True.

Ce plugin désactive le cache des requêtes MySQL de la session en cours. Vous pouvez ainsi voir l’exécution des requêtes en temps réel. Pour désactiver ce comportement, passez la constante QUERY_CACHE_TYPE_OFF à False.

Debogger

Le plugin Debogger intercepte toutes les informations de débogue et les affiche dans le footer. Ce plugin vérifie également chaque la validation W3C du code de chacune des pages.

Sources:

• Deprecated functions and WP_DEBUG de Andrew Nacin
• 5 Ways to Debug WordPress de Andrew Nacin
• Simple debugging with wordpress de Douglas Neiner

La mise sur pied du projet Peaxl ne s’est pas fait en 1 jour mais en un peu moins de deux ans. Pendant ces deux années, nous avons eu des hauts et des bas, des moments d’euphorie mais aussi de démotivation. Lorsque nous avons pris la décision de nous lancer dans le projet Peaxl, nous ne savions pas vraiment ce qui nous attendait mais ce qui est sûre c’est que ces deux années ont été riches d’enseignements et c’est ce que je voudrais partager avec vous dans cet article :

Comment tout à commencé

C’était en octobre 2009, après une journée bien remplie de conférences Paris Web, nous nous sommes retrouvés, Françis Chouquet, Thibaut Ninove et moi-même, dans un restaurant Italien pour déguster des « pasta » et discuter web. A l’époque, le business WordPress décollait, les thèmes « premium » et autres « framework » fleurissaient de toute part. C’est pour cette raison que Francis, blogeur évangéliste de WordPress depuis déjà un moment, nous fit partager son envie de lancer un business dans la création et la vente de thèmes WordPress. Il ne souhaitait pas se lancer seul et cherchait des partenaires pour l’accompagner dans ce projet. Prêchant des convertis à WordPress, Thibaut et moi-même ne mîmes pas longtemps à accepter. L’équipe Peaxl était née, ne restait plus qu’à se mettre au travail.

Facile à dire …

Travailler en équipe sur un projet commun, c’est pas forcément évident, surtout si comme nous vous êtes indépendants et habitués à travailler seul.

La répartition des tâches

Notre équipe n’est pas constitué d’un leader qui prends les décisions mais de trois personnalités qui ont chacune une voie et leur mot à dire. C’est donc tout naturellement que nous avons commencé à travailler ensemble sur les mêmes tâches, chacun donnant son point de vue sur le travail de l’autre. Pour valider une réalisation, il était donc nécessaire de trouver un consensus. Notre règle était simple: si nous étions satisfait tous les trois à 80%, nous validions. C’est ainsi que nous avons trouvé le nom Peaxl, dessiné le logo et réalisé la « coming soon page ». Le problème, c’est qu’avec cette méthode, un an s’est écoulé ! Eh oui, satisfaire 3 sensibilités graphiques différentes à 80% sur un même sujet, c’est pas du gâteau. En tous cas pour nous, ça ne l’a pas été et cela nous a pris un temps fou pour nous mettre d’accord. Nous avons donc décidé de changer de stratégie d’organisation en séparant les tâches. C’est ainsi que Thibaut s’est vu attribuer la réalisation du site Peaxl et de son design, moi de la réalisation du premier thème parent et Francis, la réalisation des thèmes enfants et le test des différentes solutions de vente et de support.

Leçon n°1 : se répartir les tâches et faire des concessions sur ses exigences personnelles.

Travailler à distance

Francis vit en Suisse, Thibaut en Belgique et moi en France, c’est donc à distance que notre collaboration s’est déroulée durant ces deux années. Si dans l’ensemble cela n’a pas posé de problèmes techniques particulier, c’est au niveau de la motivation et de la productivité que nous en avons subis les conséquences. Nous avons eu des hauts et des bas et lorsque le projet a commencé à piétiner, nous avons décidé de passer une semaine ensemble en « co-working » pour travailler sur le projet et redéfinir notre stratégie. Cette semaine se déroula en Suisse début février 2011 et fut bénéfique à tous les points de vues.

Leçon n°2 : Rien de plus motivant que de travailler au même endroit au même moment avec ses partenaires.

Gérer sa disponibilité

Lorsque l’on se lance dans un projet comme Peaxl et que l’on décide de tout faire en interne, il faut libérer beaucoup, beaucoup de temps. Financièrement, cela veut dire vivre sur ses réserves, se serrer la ceinture pendant la période de mise en place du projet et gérer voir refuser des demandes clients au risque de les perdre définitivement. Je vous rappelle que nous sommes tous les trois freelance. Pour être honnête, nous avons eu du mal à assumer ces choix et le niveau d’implication de chacun n’a pas toujours été égal au même moment. Lorsque un travaillait sur le projet Peaxl, parfois les autres travaillaient sur leurs projets clients et croyez-moi, cette situation est très inconfortable pour la motivation et l’avancement du projet.

Leçon n°3 : se lancer dans un projet d’entreprise c’est accepter de faire des sacrifices d’investir du temps et de l’argent.

Se mettre à niveau

Lorsque nous avons décidé de nous lancer dans la création et la vente de thèmes WordPress, je n’imaginais pas à quel point les thèmes « premium » était évolués en comparaison des thèmes WordPress que j’avais l’habitude de réaliser pour moi ou mes clients. La tâche était d’autant plus difficile que depuis que je me suis lancé comme designer web indépendant, j’avais un peu lâché prise sur le développement. WordPress n’est pas très compliqué, ni à comprendre, ni à coder, mais la quantité de fonctions et de possibilités en terme de développement est assez conséquente. De plus WordPress évolue très vite et il est nécessaire de se mettre à jour régulièrement.
Il a donc fallu apprendre à faire un widget, à intégrer un bouton de shortcode dans TinyMCE, à développer un thème avec un « admin pannel », à comprendre l’interêt des hooks etc. Cet apprentissage s’est fait sur le tas en développant le thème et en lisant de nombreux articles online, le Codex et des livres consacrés au développement WordPress. Développer le thème, rédiger la documentation, passer le thème en responsive design puis changer 4 fois de slider m’aura pris au total 3 mois 1/2 de travail à temps plein. Beaucoup de ce temps a été utilisé pour expérimenter, apprendre les bonnes pratiques du développement WordPress et mettre en application mes nouvelles connaissances. Le prochain thème parent devrait être plus rapide à développer.

Leçon n°4 : étudier ce que fait la concurrence et pleurer retrousser ses manches.

Se lancer

Au commencement d’un projet, les idées fusent, les ambitions sont sans bornes. Puis, lorsque la réalité nous rattrape, les difficultés et les doutes surviennent car nous prenons conscience que peut être, nous avions vue un peu trop grand. Attention au péché d’orgueil. Pour lancer un projet, il faut rester humble avec ses exigences, ne pas chercher à ce que tout soit parfait. Le plus important est de lancer le projet. Il vaut mieux lancer un projet sobre qui fonctionne même si il n’est pas aussi parfait que vous le souhaitiez, que d’essayer d’atteindre une hypothétique perfection au risque de se décourager.

Leçon n°5 : lancer le projet dès que vous avez assez d’éléments pour le lancer, ne vous laissez enfermer dans le perfectionnisme.

Conclusion

Nous avons beaucoup appris, nous avons encore beaucoup à apprendre. Peaxl est un projet qui a une belle courbe de progression devant elle et c’est avec le temps que notre offre et nos produits vont s’améliorer. Nous ne cherchons plus forcément à égaler un Woothemes ou un Themes Garden du premier coup, comme à nos débuts, car nous avons compris que pour en arriver là, il leur avait fallu plusieurs années de tâtonnement et d’énergie. Il en sera de même pour nous. Le plus important est de commencer.

Merci à mes deux partenaires Francis Chouquet et Thibaut Ninove qui partagent avec moi cette aventure dans le monde de la vente de thèmes WordPress.

Une grille est une trame qui divise verticalement et horizontalement un espace en deux dimensions. C’est un outil de mise en page millénaire qui a été utilisé dès la rédaction des manuscrits. On l’utilise aujourd’hui pour la conception des supports imprimés et des documents numériques.

Une grille peut être plus ou moins complexe et le graphiste est libre de choisir sa typologie en fonction de ses besoins et de ses envies.

Pourquoi utiliser une grille en design web ?

Tout graphiste qui conçoit un support présentant de l’information (manuscrite, typographique, photographique, schématique … ) se confronte au problème de la composition. Un site web est généralement constitué d’éléments divers : des textes, des images, des icônes, des éléments d’interface …. Comment agencer sur une page blanche tous ces éléments entre eux, dans un espace donné, sachant qu’il existe des milliers de possibilités ?

Aidez-vous d’une grille. En effet, celle-ci apporte de nombreux avantages :

Elle guide le positionnement

La grille définie à l’avance des repères verticaux et horizontaux à partir desquelles le graphiste peut s’appuyer pour caler ses éléments. Il ne place plus ses blocs dans le vide mais se laisse guider par les colonnes et les gouttières de la grille pour subdiviser l’espace de sa page, la structurer et choisir des positionnements précis.

Elle apporte de l’unité

Un site web est le plus souvent constitué de plusieurs pages. Pour que l’utilisateur comprenne que ces pages sont connectées entre elles et qu’elles appartiennent à une même entité, il est nécessaire que le graphiste apporte une certaine unité graphique.

En utilisant une grille commune pour toutes les pages, le graphiste assure une partie de cette unité. En effet, les gouttières qui servent de repère pour les marges, seront les mêmes sur l’ensemble du site et la taille des modules sera proportionnelle à la largeur des colonnes de la grille. Toutes les pages, même si leur composition est différente, seront construites à partir de la même trame.

Elle améliore le confort de lecture

La grille permet des mises en page en colonnes. Cela est particulièrement utile pour les textes qui, au delà d’une soixantaine de signes par ligne, deviennent fatiguant à lire. En effet, notre regard trouve de l’inconfort à lire de longues lignes de texte mais aussi à retrouver la ligne suivante (retour à la ligne) lorsque celui-ci doit parcourir une longue distance.

Le confort de lecture est aussi amélioré par les alignements verticaux car ils guident le regard à travers la page. Un contenu calé sur une grille organise la page et simplifie sa perception globale.

Le site UX Magazine, riche en contenu, pousse l’utilisation de la grille à son paroxysme.

Comment utiliser une grille ?

Du point de vue du graphiste

La première chose à faire est de choisir sa grille. Grille fixe ou flexible ? Quelle largeur globale ? Combien de colonnes ? Quelle largeur pour les colonnes et les gouttières ?

Ces choix seront souvent orientés par les contraintes du projet : site élastique ou fixe, résolution minimale retenue, contenu riche ou pas …

La largeur d’une colonne est l’unité de base pour déterminer quelle sera la largeur minimum d’un élément. Si un élément (bloc de texte, photo, formulaire …) nécessite une largeur plus grande, le graphiste s’arrangera pour choisir une largeur qui est un multiple de l’unité de base (2,3,4 … colonnes).

Les gouttières servent de repères pour les zones d’espace entre les blocs.

Une fois ce principe simple assimilé, divisez votre contenu en modules et disposez les sur la grille. Bien sure, cette disposition n’est pas aléatoire et doit tenir compte d’un certain nombre de critères (harmonie, équilibre, ergonomie, cohérence, hiérarchisation, marketing …)

Dans un processus de création de site web normal, un inventaire du contenu, un zoning et un placement des éléments sur une wireframe ont déjà été effectué. Une partie du travail de positionnement est donc partiellement entamé et le graphiste n’a plus qu’a structurer la page de façon plus stricte sur sa grille de positionnement. Notons que cette étape peut entrainer des modifications de la wireframe sachant que les contraintes d’espace occupé par les contenus et la résolution d’écran peuvent ne pas avoir été pris en compte lors du dessin des wireframes.

Du point de vue de l’intégrateur

Au début de l’ère du HTML, on détournait l’utilisation des balises « table » (prévues pour présenter des données tabulaires) afin de concevoir la mise en page graphique des pages web en calant les éléments dans les cellules du tableau.

Aujourd’hui, cette technique est bannie pour des raisons de sémantique et de performance. Elle a été remplacé par l’utilisation des CSS qui permettent des positionnements précis sur la page.

A l’aide de framework CSS, il est maintenant possible pour le designer et l’intégrateur de concevoir des mises en pages web sur des grilles communes. Le graphiste choisit la grille sur laquelle il va s’appuyer pour sa mise en page et l’intégrateur génère le framework CSS correspondant. Ce framework CSS lui permettra de respecter au mieux les positionnements et les alignements des éléments.

L’utilisation de ces framework ne sont pas obligatoires mais leur usage facilite grandement le travail lorsqu’ils sont maitrisés à la fois par le graphiste et l’intégrateur.

Il existe de nombreux framework CSS qui proposent une feuille de style de positionnement basée sur une grille. Je citerais par exemple 960 Grid System et Blue Print pour ceux que j’ai déjà utilisé.

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 par exemple.

Sur ce sujet, Jina Bolton a écrit un article intéressant intitulé Breaking Out of the Box publié sur le site SitePoint.

Et pour les allergiques aux grilles, allez faire un tour sur le blog de Peter Gabor : 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 à largement fait ses preuves. C’est un outil précieux qui aide les graphistes à ordonner et organiser le contenu, à unifier la composition des pages et à améliorer le confort de lecture.

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

Sources :

- Ouvrage : The complete Graphic Designer – Ryan Hembree – Edition Rockport
- Design & Typo « Grilles de Mise en Page | typographie web et print« 

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. La première dose est toujours gratuite pourrait on dire …

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

Le peintre Suisse Johannes Itten, (1888-1967), professeur du Bauhaus de 1919 à 1923 est à l’origine d’une reflexion sur les couleurs. Il a défini sept types de contraste de couleurs que nous allons passer en revue ensemble.

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

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

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

Les sept contrastes d’Itten

Contraste de la couleur en soi

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

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

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

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

Exemple : Henri Matisse – Stanza Rossa

Contraste clair obscur

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

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

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

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

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

Exemple : Rembrandt – La Ronde de Nuit

Contraste chaud-froid

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

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

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

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

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

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

Contraste de complémentaires

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

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

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

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

Exemple : Jan Van Eyck – Les époux Arnolfini

Contraste de quantité

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

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

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

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

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

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

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

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

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

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

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

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

Contraste de qualité

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

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

Exemple : Paul Klee – L’enchantement des poissons

Contraste simultané

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

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

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

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

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

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

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

Comment accentuer ou éliminer le contraste simultané :

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

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

Exemple : Vincent Van Gogh – La terrasse de café

Conclusion

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

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

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

Sources :

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

Les icônes sont des métaphores visuelles qui permettent de repérer facilement un concept. Elles sont largement utilisées en webdesign. Mais attention, derrière leur apparente simplicité se cache un réel défis pour les designer.

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)

L’IUT Di Corsica

La Corse dispose d’un campus universitaire et d’un IUT dans la ville de Corté. Cet IUT a été créé en 1983 et propose diverses formations dans les domaines de la gestion, de la gestion appliquée à la valorisation ou à la qualité des produits agroalimentaires, de l’entrepreneuriat, des techniques de commercialisation, des nouvelles technologies informatiques de la communication, de la biologie appliquée à l’agroalimentaire ou à l’environnement, du génie civil, de l’eau et des énergies renouvelables.

L’IUT dispose de nouveaux locaux depuis 2004 qui surplombent une partie de Corté et font face aux montagnes et à la citadelle de la vieille ville.

La licence professionnelle TAIS – Multimédia

La licence professionnelle TAIS (Techniques et Activités de l’Image et du Son) – option Multimédia aborde de nombreux domaines du multimédia pour donner aux étudiants une vision élargie des possibilités du secteur des nouvelles technologies. Le programme de la licence ne se concentre pas sur un ou deux secteurs d’activité mais essaye d’aborder une large palette de métiers du multimédia : vidéo, motion design, 2D, 3D, graphisme print, infographie, technologies web …

La plupart des étudiants font leur formation en alternance et perfectionnent leurs compétences en entreprise. Les enseignements sont dispensés par des professeurs de l’IUT mais aussi par des intervenants extérieurs dont la plupart sont en activité. On pourra noter par exemple sur l’année scolaire 2008-2009 l’intervention d’Amélie Boucher en ergonomie, Corine Girieud en culture de l’image, Olivier Schramm en film d’animation et bien d’autres, tous experts dans leur domaine respectif.

Mon intervention en webdesign

Marc Labbé, responsable pédagogique de la licence – option multimédia, m’a contacté en mai 2008 pour me proposer de prendre en charge le module webdesign. J’ai accepté sa proposition et j’ai dispensé sur deux jours (17-18 mars 2009), un cours théorique de 8 heures suivi d’une journée de travaux dirigés pour mettre en application quelques méthodes de prototypage de site web.

Les grandes lignes du cours théorique étaient :

Qu’est ce que le webdesign ?
Le process de création d’un site web
Le process de création d’un design web
Le langage graphique

… et le travail dirigé consistait, à partir d’un brief créatif, de réaliser :

Le zoning de la page d’accueil d’un site web
La wireframe correspondante
Un moodboard représentatif de la tonalité graphique en accord avec le brief créatif

J’ai dû survoler certaines parties du cours pour me concentrer sur d’autres. J’avais en effet prévue un cours un peu trop riche (178 pages imprimés) pour le temps qui m’était impartie. Pour les étudiants qui voudraient approfondir les sujets abordés, n’hésitez pas à consulter mon blog.

Bilan

Je suis très satisfait de cette expérience et je voudrais remercier les étudiants de m’avoir accordé leur attention pendant les 8 heures de cours théoriques où j’ai essayé de leur transmettre en un temps record une grande partie de mon savoir en webdesign. Je sais que les ordinateurs portables branchés sur internet n’étaient pas tous focalisé sur le webdesign mais dans l’ensemble, les étudiants qui se sont un peu égarés sur MSN ou Youtube l’on fait avec discrétion sans déranger leurs camarades ni perturber le cours.

Je remercie également Marc Labbé, responsable pédagogique de la licence, pour son accueil et l’organisation sans faille qu’il a mis en place. Il faut savoir que l’IUT s’occupe de régler le billet d’avion, de réserver la voiture de location et le studio au sein même de l’IUT à deux pas de la cafétéria et des salles de cours.

Je précise également que j’ai particulièrement bien mangé à Corté. J’ai essayé plusieurs restaurants du vieux centre et j’ai par exemple mangé une assiette de pâtes aux coquilles St Jacques (fraiches) et tomates séchées pour seulement 12 euros. A Paris, pour le même prix, j’ai une tranche de jambon pleine d’eau avec trois haricots verts.

Donc au final, un bilan très positif et je me rendrais disponible pour rempiler l’an prochain si l’IUT a besoin de moi.

Je vais vous expliquer dans cet article le processus que j’ai utilisé pour dessiner sous Gimp un webdesign utilisant une large image de header. Ce webdesign est un travail personnel réalisé à titre d’exercice.

Pour donner de l’impact au design d’un site web, certains designer choisissent d’exploiter l’espace disponible dans l’en-tête et même parfois la périphérie du site. Ce procédé graphique utilise une image de fond affichée grâce à la propriété CSS « backgound ».

Si cette solution élargie l’espace de liberté du graphiste pour s’exprimer, elle a l’inconvénient d’augmenter significativement le poids de la page..

Utiliser une large image de fond n’est donc pas un choix anodin. Cela est judicieux si votre objectif est de mettre l’ambiance graphique du site en avant. Je pense par exemple aux sites de marque et de publicité, aux sites ou vous souhaitez mettre en avant votre créativité ou encore aux sites qui ont besoin de dévoiler un univers dans lequel une population cible sera censée se reconnaitre et s’identifier.

Par contre, si la vitesse de chargement des pages est une préoccupation stratégique ou si la valeur ajoutée de votre site se situe essentiellement dans son contenu texte, mieux vaut éviter cette technique. En effet une image lourde ralentira le chargement de vos pages et un design très présent fera inévitablement de l’ombre au contenu texte. C’est le cas pour les sites magazines ou les sites qui proposent un service (vente en ligne, moteur de recherche, annuaire, portail …).

Process

Conception

Besoins et objectifs

Le besoin du client est de promouvoir via un site web la parution d’un roman d’aventure. Le client souhaite que le design du site soit fidèle à l’atmosphère du livre.

Le roman raconte l’aventure d’un cadre supérieur, lessivé par les exigences de son milieu professionnel, qui décide de tout quitter (job, maison, amis …) pour partir réfléchir au sens de sa vie lors d’une retraite d’un an au milieu des paysages de l’ouest Américain.

Définir le sujet, l’ambiance, le style

Étant donné que le cadre de l’histoire se passe essentiellement dans la nature, je vais plonger l’utilisateur (et potentiel lecteur) au coeur de cet univers en utilisant une grande image de header qui représentera un paysage sauvage ouest Américain.

Le livre raconte une fiction, qui fera fortement appel à l’imagination du lecteur. Je choisis donc de représenter le paysage de façon abstraite en lui donnant un style peint. Ainsi, le paysage laissera plus de place à l’interprétation et à l’imaginaire.

Comme l’histoire du livre raconte une expérience de réflexion intérieure en solitaire à travers la nature, je choisis de situer la scène au crépuscule, la tombée de la nuit étant dans l’inconscient collectif un moment apaisant (ou angoissant pour certains) propice à cette reflexion intérieure. Cette atmosphère crépusculaire renforcera aussi l’impression de solitude.

La composition

Pour plonger le lecteur au coeur du paysage, je vais centrer le site sur le point focal du paysage. Pour obtenir quelque chose d’équilibré je choisirai un paysage dont les lignes de fuites convergent vers le centre de l’image sur la ligne d’horizon.

S’inspirer de quelques références

Pour réaliser ce paysage je vais m’inspirer de deux réalisations qui répondent bien au concept que je souhaite mettre en place. Ces deux design ont fait l’objet d’un tutoriel et les techniques que j’utiliserai ici sont largement inspirées de celles utilisées dans ces tutoriels.

Il s’agit du design du blog de l’agence web Viget Inspire : www.viget.com

… et d’une copie d’écran issu d’un tutoriel du site http://designreviver.com

Réalisation

Choisir ses outils

Pour réaliser ce design, j’utiliserai le logiciel de retouche d’image Gimp, quelques brosses, des textures, des photos et quelques uns des modes de fusion disponibles dans Gimp.

Se lancer et expérimenter

Pour commencer, je choisis dans une banque d’image des photos de paysage qui répondent à mes besoins. La scène se passant dans l’ouest Américain, mon paysage doit être cohérent avec les caractéristiques géologiques et floristiques de cette région.

J’ai choisis ces trois photographies :

Image 1 : sur cette image, je garderai les montagnes

Image 2 : sur cette image, je garderai les arbres

Image 3 : sur cette image, je garderai l’homme et le ponton

La composition finale devrait ressembler à cela :

Pour la partie terrestre, je détoure mes paysages pour ne garder que les rochers et la végétation. Pour cela j’utilise une technique de détourage que j’ai expliqué dans un article intitulé « Gimp : détourage complexe. Ces images détourées vont me servir d’une part pour créer les silhouettes du paysage terrestre mais aussi pour donner un peu de profondeur aux silhouettes en utilisant l’image comme d’une texture.

Les images détourées donneront ceci :

Pour le ciel crépusculaire, je fais plusieurs dégradés (bleu foncé – bleu moyen, rouge – orangé) sur des calques distinct et je dose le rendu en réglant l’opacité.

Pour donner un aspect peint à la composition, j’utilise chaque élément détouré comme une silhouette dans laquelle je peins avec différentes brush.

J’utilise parfois l’image détourée pour renforcer la texture en la plaçant sur un calque en mode « Multiplier », « Superposer » ou « Lumière douce ». En jouant sur le pourcentage d’opacité du calque je dose l’effet obtenu. Pour ne pas déborder dans les zones transparentes lorsque je peins les silhouettes, je coche la case « Verrouillé » dans la fenêtre des calques

Par soucis de cohérence, j’ai reflété le ciel et les montagnes dans le lac. J’ai dû effacer les nuages du lac de la photo d’origine car ils ne correspondaient pas à ceux présents dans mon ciel dessiné. J’ai donc refait la texture d’une partie du lac avec une brush et l’outil pinceau.

Pour retoucher mes couleurs, j’utilise fréquemment dans le menu : Couleurs > Teinte – Saturation, où je peux faire varier la saturation, la luminosité et les teintes. Pour redonner un peu de « peps » aux couleurs du ciel, je duplique le calque du ciel et je passe le calque dupliqué en mode « Superposer ».

Enfin pour détourer le personnage sur le ponton, j’ai utilisé ma tablette graphique car j’avais besoin de plus de précision. Une fois détouré, le personnage a été placé sur un calque en mode « Multiplier ».

Après quelques retouches minimes et le placement des ombres du ponton voici le résultat de ce qui sera le header du futur site :

A partir de ce header, je compose le design la page d’accueil.

Conclusion

Chacun à sa façon de travailler mais je pense qu’il est important, avant de foncer tête baissée sur son logiciel d’infographie, de passer un peu de temps à imaginer ce que l’on souhaite réaliser. C’est l’étape initiale de conception. Cette phase de conception donne une cohérence à votre création et des jalons pour orienter votre démarche vers un objectif. Je le répète souvent mais le webdesign n’appartient pas au domaine de l’art plastique dans lequel on exprime un ressenti personnel mais appartient au domaine de l’art appliqué ou la création est censée remplir des objectifs définis au préalable pour répondre à un besoin précis.

Même si vous pensez et planifiez votre création, il est rare que le résultat final (rendu visuel) soit la réplique exacte de ce que vous aviez imaginé au départ. Ce n’est pas très grave, le principal étant que le concept initial soit respecté et qu’il réponde aux objectifs que vous vous étiez fixés. En effet, l’acte créatif comporte toujours une part de hasard que l’on ne contrôle pas et qui nait des différentes expérimentations effectuées lors du process créatif.

Lorsque vous créez un design avec une forte connotation graphique, fixez vous un cap mais laissez votre imagination expérimenter des choses et le hasard vous offrir parfois d’heureuses surprises.

Les sprites, c’est quoi ?

L’utilisation des sprites pour le web est une technique permettant d’afficher plusieurs vues d’une seule et même image à l’aide des feuilles de style CSS.

Cette technique est issue des anciens jeux vidéos qui utilisaient des petits personnages pixelisés appelés « sprites » qui étaient tous dessinés sur une seule image pour des raisons de performances.

Il s’agit donc d’utiliser une image sur laquelle est réunie soit plusieurs instances de l’état d’un objet, par exemple un menu, un bouton soit un ensemble d’autres images comme des icônes par exemple.

La technique des sprites permet, grâce aux CSS, de ne montrer qu’une partie (une vue) de l’image globale. Selon le cas, en modifiant les paramètres de positionnement dans la feuille de style CSS, il est possible de déplacer la vue sur l’image globale sans montrer le reste de l’image. Nous utiliserons donc une seule image pour simuler l’affichage de plusieurs images (en réalité différentes vues de l’image globale) sur les pages web d’un site internet.

Quels intérêts d’utiliser les sprites ?

Si vous travaillez dans le secteur internet, vous savez que lors du chargement d’une page web, il y a autant de requêtes http effectuées sur le serveur qu’il y a d’images dans la page. En utilisant qu’une seule image globale, vous réduisez à une requête http le chargement des images (puisqu’en réalité on ne charge qu’une image).

De plus, l’image globale est bien souvent moins lourde que la somme des poids des images individuelles. Cela permet de gagner en performance sur la vitesse d’affichage de la page et en consommation de bande passante dans certains cas.

Donc tout l’intérêt des sprites est de gagner en performance de chargement des pages. Du point de vue du graphiste, il y a un autre avantage : avoir moins de découpes à faire pour l’étape d’intégration.

Comment mettre en place les sprites ?

Comme un exemple, vaut mieux qu’un long discours, nous allons réaliser un bouton image avec effet rollover utilisant la technique des sprites.

Notre bouton aura trois états : un état « initial » lorsque le bouton n’est pas activé ou survolé, un état « survolé » lorsque l’utilisateur passe sa souris sur le bouton et un état « enfoncé » lorsque l’utilisateur clique sur le bouton.

La première chose à faire est de dessiner dans un logiciel de traitement d’images les trois états du bouton puis de les réunir sur une seule image.

Ensuite, il va falloir implémenter le code XHTML/CSS.

Voici le code XHTML qui affiche le bouton :

<a id="container" href="#" title="Exemple de bouton sprite"></a>

Remarque : Le code utilisé dans cet exemple est simple pour vous transmettre la technique mais c’est un très mauvais exemple à suivre sur le plan sémantique et accessibilité. Voir la conclusion.

Il ne nous reste plus qu’à définir le fichier CSS qui va nous permettre notamment grâce à la propriété « background » de positionner notre vue sur l’état du bouton qui convient en fonction de l’action de l’utilisateur.

Le calcul du positionnement de la vue est la partie la plus fastidieuse. Vous pouvez déterminer « à la main » les coordonnées du positionnement en mesurant la position des états du bouton sur l’image globale. Mais si vous ne voulez pas vous embêter à faire ces mesures, vous pouvez utiliser un générateur de sprites pour faire le travail à votre place.

Il y a quelques bogues avec les navigateurs Opéra et Safari à prendre en compte lors de la création de Sprites CSS :

Opéra, pour les versions inférieur ou égale à 9.0, ne reconnait pas une position de fond supérieure à 2042px ou inférieure à -2042px et utilise ces limites à la place en cas de dépassement. Ceci dit 2024px, ça vous laisse pas mal de marge.

Safari a un problème avec la répétition des images de fond. Cela peut être résolu en spécifiant une valeur d’espacement vertical plus large.

Je vous conseille d’utiliser par exemple le générateur de sprites en ligne de « Project Fondue ». Ce générateur prend en compte les bugs des navigateurs Opéra et Safari. Utilisez le comme suit :

1. Réunissez toutes vos images dans un fichier .zip, le nom donné aux images sera repris dans la feuille CSS générée.

2. Uploadez votre fichier .zip via le formulaire du générateur de sprites.

3. Définissez vos paramètres. Dans mon exemple, j’ai gardé le paramétrage par défaut proposé sur la page du générateur. Pour plus de détails sur le paramétrage, lisez l’aide en ligne.

4. Validez le formulaire.

Le générateur de sprites construit alors une image globale :

… et le code CSS correspondant :

.sprite-enfonce { background-position: 0 -30px; }
.sprite-initial { background-position: 0 -108px; }
.sprite-survole { background-position: 0 -186px; }

#container li {
background: url(monImageGlobale.png) no-repeat top left;
}

Le code implémenté pour mon bouton donnera :

a#container {
background:url(MonImageSprite.png) no-repeat 0px -108px; /* initial */
width: 180px;
height: 40px;
display: block;
}
a#container:hover { background-position: 0 -186px; } /* survolé */
a#container:active { background-position: 0 -30px; } /* enfoncé */

Résultat :

Conclusion

Comme nous l’avons vue dans cet article, l’utilisation des sprites permet de gagner en performance au niveau de la vitesse d’affichage des pages web en réduisant le nombre de requêtes http effectuées sur le serveur. Quelques secondes de gagnées sur le chargement de vos pages peut vous rapporter gros car c’est du temps d’attente en moins pour les internautes et donc moins de perte potentielle d’audience.

Pour les graphistes, travailler avec un intégrateur qui utilise les sprites permet de regrouper plusieurs images dans un seul fichier png et d’éviter de fastidieuses découpes.

Cependant, l’utilisation des sprites peut causer quelques inconvénients si ils sont utilisés de manière inappropriée.

Par exemple, laissez suffisamment d’espace entre vos motifs sur l’image globale pour permettre aux utilisateurs de grossir le texte des pages web sans risquer de démasquer les autres motifs. Trouvez un bon compromis entre l’espacement des motifs et la taille de l’image globale car plus votre image globale sera grande, plus il faudra de mémoire à l’agent utilisateur pour la décompresser.

Les sprites peuvent également causer des problèmes de sémantique et d’accessibilité. Mon exemple de bouton est un mauvais exemple sur le plan sémantique car j’utilise une balise html « A » pour afficher un bouton au lieu d’une balise « INPUT » ou « BUTTON ». De plus ma balise « A » ne comporte pas d’intitulé texte. J’ai donc détourné la balise « A » à des fins esthétiques au détriment de la sémantique et de l’accessibilité. Bien que graphiste, je pense qu’il ne faut jamais céder à ce type de compromis.

Il est donc fortement conseillé d’utiliser les sprites pour les images de décorations uniquement (fond d’illustration, icônes …) et pas sur des images de contenu ou des images qui aident à la compréhension du contenu. En effet, si pour une raison ou pour une autre, les CSS sont désactivées, ou si une personne handicapée utilise un navigateur texte, vous perdez l’affichage de vos images. Si il s’agit uniquement d’images de décorations, leur disparition est génante sur le plan graphique mais la page conserve une accessibilité aux informations.

Pour conclure, utilisez les images sprites pour gagner en performance mais ne les utilisez pas dans un contexte où elles réduisent la sémantique et l’accessibilité.

Sources :

– Sprites CSS : Meurs, découpe d’images, meurs ! – Traduction française, sur le site Pompage.net d’un article de Dave Shea parue sur A List Apart.
– Des sprites jusqu’à plus soif – Eric Daspet
– CSS Sprites: What They Are, Why They’re Cool, and How To Use Them – Chris Coyer
– Exactly How to Use CSS Sprites – Nettuts

Générateurs de sprites :

– Application Java ou PHP à télécharger : SmartSprites
– Générateur de sprites en ligne : Project Fondue
– Générateur de sprites en ligne : CSSSprites