Les plus populaires   :   7 jours   |   30 jours   |   365 jours
Publié par Olivier le 31/10/2007 à 10H36 sous Design Web

Quand on se voit confier la création d’un logo et qu’on doit rassurer son client sur son investissement, la question de la durée de vie revient souvent. Il sera bon pour combien de temps, mon logo? En tant qu’expert, le graphiste se doit de donner une réponse plus précise que «ben, euh… ça dépend».

Les exemples qui surgissent dans l’esprit du néophyte sont généralement des logos universellement connus, ceux dont on pense qu’ils ont toujours existé tels que nous les connaissons. Pourtant, les logos sont comme vous et moi: ils naissent, vivent et meurent.

Voici quelques facteurs qui déterminent la pérennité d’un logo:

1. La fonction

Les logos ne naissent pas tous égaux: certains représentent une marque ou une institution, d’autres, un simple événement ou un produit dont la distribution est limitée dans le temps. Dans le premier cas seulement, on peut viser la durée.

2. La diffusion

Un logo est un investissement d’image, pas seulement en argent. S’il est voué à une large diffusion, s’il personnifie une grande marque, s’il veut rejoindre le patrimoine visuel de son public, il devra plaire, s’imposer, se montrer… et durer.

3. L’industrie

Corollaire de la diffusion, le type d’industrie, produit ou service, détermine l’ancrage du logo dans les consciences. Plus il est proche des individus, plus il fera sa place dans leur univers intime, et plus il devra créer une connivence. Le logo de vos bonbons préférés n’a probablement pas changé depuis votre enfance: demandez-vous pourquoi!

4. Le facteur «mode»

Vous me voyez venir? Certains logos sont tellement dans le vent que quand le vent tourne, ils disparaissent! Prenez la mode actuelle du «2.0»: c’est beau, c’est propre et ça brille, mais dans 5 ans, ça fera telllllement deux-mille-sept! Un logo devrait pouvoir traverser les modes sans s’y noyer.

5. La chance

Comme le disait le philosophe Bill Gates, «La vie est injuste, il va falloir vous y habituer». Ou quelque chose comme ça. Bref, toute réussite comporte une part de chance sur laquelle l’être humain normal n’a pas d’emprise. Certains grands noms du design graphique semblent avoir un truc pour attirer la chance, mais aucun ne semble prêt à communiquer sa formule magique…

6. La qualité

Nous y voilà : pas question d’évacuer la responsabilité du graphiste dans cette histoire! Pour s’inscrire dans le temps, un logo doit répondre à des qualités incontournables mais difficiles à énumérer. Citons quand même la personnalité, la lisibilité et l’absence d’ambiguïté … Trop de logos finissent aux poubelles de l’histoire pour avoir ignoré ces critères.

Sur son blog, ma consœur Naina Redhu a publié un article paradoxalement intitulé A logo is for a lifetime (Un logo, c’est pour la vie), elle y résume ainsi la question de l’éternité : « If logos are expected to be static, do we also expect companies to be static? » (Si on s’attend à ce que les logos soient statiques, doit-on s’attendre à ce que les entreprises le soient aussi ?).

La conclusion est donc qu’aucun logo n’est éternel. Tout repose sur une subtile remise à jour graphique dans les moments clés de la vie de l’entreprise. Adapter le graphisme, épurer le trait jusqu’à ne conserver l’essentiel, capitaliser sur les formes et les couleurs, voilà le travail du graphiste.

Dans un prochain envoi, je passerai en revue quelques logos très, très connus. Il s’agira de voir pourquoi on les croit éternels… et pourquoi ils ne le sont pas!

Partager ce billet:
scoopeo:Le mythe du logo éternel - Partie 1 fuzz:Le mythe du logo éternel - Partie 1 tapemoi:Le mythe du logo éternel - Partie 1 nuouz:Le mythe du logo éternel - Partie 1 blogmemes:Le mythe du logo éternel - Partie 1 pioche:Le mythe du logo éternel - Partie 1 del.icio.us:Le mythe du logo éternel - Partie 1


Publié par Olivier le 19/10/2007 à 20H50 sous Design Web

C’est plus fort que moi : quand, pour une raison quelconque, un logo se retrouve dans l’actualité, je me sens comme interpellé! Qu’il soit incompréhensible, politiquement orienté ou dominant, je sors de ma boîte à crayons et j’y vais de mon analyse personnelle.

Cette fois, c’est du respectable logo de Radio-Canada qu’il s’agit. Ou plutôt de ses clones. Voici l’histoire.

logo_radio_canada

Le 15 octobre, Alexandre Provencher affiche sur son blog Canada de Fantaisie une photo prise cet été lors d’un voyage à Arequipa, au Pérou. On y voit une affiche publicitaire pour un cabinet dentaire local qui clame joyeusement Nous travaillons pour votre sourire ! Le truc qui saute aux yeux du blogueur québécois, c’est que le logo de l’affiche est une copie du logo – ou plus précisément du pictogramme – de notre Société Radio-Canada. Sauf que les couleurs pleines ont laissé leur place à un dégradé radial de gris franchement discutable.

copie_radio_canada

Alertée par quelques internautes (dont votre serviteur !), Sophie-Hélène Lebœuf relate l’affaire le jour même sur le pseudo-blogue de Radio-Canada, Sur le Web, sous le titre Le logo de Radio-Canada plagié au Pérou.

Le 16 octobre, la journaliste revient sur le cas de Dentium, et ajoute un lien vers le site de SunEnergy, une compagnie espagnole de panneaux solaires dont le logo est une reprise non moins flagrante du logo de la SRC!

logo_sunenergy

Elle éclaircit au passage l’aspect légal de ce genre de plagiat, grâce à l’aide de Jean-Frédéric Morin, du Centre for Intellectual Property Policy de l’Université McGill : «Le logo de Radio-Canada est une marque de commerce qui n’est protégée qu’en lien avec un produit ou un service (à l’exception des marques notoirement connues, ce qui n’est probablement pas le cas de ce logo sur le marché péruvien). Puisqu’une clinique dentaire offre des services qui ne sont en rien similaires à ceux offerts par Radio Canada, aucune autorisation ne devrait être obtenue. Et encore, il n’est pas certain que la marque de Radio-Canada soit enregistrée au Pérou! Rien d’étonnant que le «logo» ait été utilisé sans l’autorisation de SRC!».

Pas de quoi fouetter un avocat, donc, mais l’histoire est cocasse et circule désormais dans la blogosphère québécoise, inspirant des commentaires graphiques : «Radio-Canada avait juste à ne pas prendre une tête de brosse à dents électrique comme logo…» (Geneviève Piquette, sur le blog de Dominic Arpin)… ou politiques : «Ne venez pas dire après que le pouvoir du Web et/ou du citoyen, ce n’est pas quelque chose de merveilleux pour dénoncer les pires abominations!» (Olivier Niquet, sur son blog).

Pour le plaisir de brouiller les pistes, je me suis mis en quête d’autres clones de Radio-Canada. Depuis, je m’habille chez le designer américain Bill Hallman…

Bill_hallman_logo

… et je vais danser au MidnightShift, le club gay le plus hot de Sydney (Australie)!

logo_themidnightshift.jpg

Mais au-delà du plaisir du collectionneur, il y a le point de vue du dessinateur. Le logo de Radio-Canada n’a peut-être pas été COPIÉ. Les graphistes péruviens, catalans ou australiens ne l’ont peut-être même jamais vu. En effet, le pictogramme qui représente aujourd’hui la SRC est un jeu géométrique très simple, malgré son apparente complexité. Il est régi par un principe de fractionnement assez trivial, dont on trouve des traces dans les mandalas indiens, les vitraux romans et les origamis japonais. On le retrouve même en cuisine sous le nom comment-couper-une-tomate-en-cubes!

construction_logo_SRC

Il est ainsi possible d’augmenter le nombre des «échos» du cercle original (comme pour SunEnergy ou MidightShift) ou de le réduire (comme pour Bill Hallman), tout en respectant la logique formelle. Un kaleïdoscope à verres carrés pourrait théoriquement restituer sous cette forme l’image d’un cercle. Mais la théorie la plus tordue vient d’un certain Vincent Finnerty, une sorte d’informaticien fou, qui prétend – à la blague – que ce logo est une transformée de Fourier bidimensionnelle appliquée à un carré. Ah ben oui, il me semblait bien…

fournier_radio_canada

Après tout ça, ce qui me surprend le plus, c’est que le logo radiocanadien ne soit pas né du compas d’un architecte, mais se révèle le résultat d’une évolution graphique. La base en fut jetée en 1974 par le graphiste Burton Kramer, sous une forme amicalement désignée comme The Exploding Pizza ou encore The Exploding Pineapple!

explodingpizza.gif

Pour terminer, je dirai que, tant qu’à parodier, autant le faire avec humour : clin d’œil textile, humour de pirate ou fantaisie charcutière, Ici Logo-Canada !

humour_src.jpg

Partager ce billet:
scoopeo:Ici Logo-Canada ! fuzz:Ici Logo-Canada ! tapemoi:Ici Logo-Canada ! nuouz:Ici Logo-Canada ! blogmemes:Ici Logo-Canada ! pioche:Ici Logo-Canada ! del.icio.us:Ici Logo-Canada !


Publié par Olivier le 28/03/2007 à 13H47 sous Design Web

J’ai déjà eu l’occasion d’écrire tout le bien que je pense du très polyvalent Matt Inman, voici donc l’adaptation de How to Ruin a Web Design - The Design Curve, un article court mais brillant qu’il a publié sur le blog de SEOmoz. Attention : humor anglo-saxon !

Dans le monde des webdesigners, il existe un théorème méconnu selon lequel la qualité d’un design est inversement proportionnelle au nombre d’intervenants non qualifiés impliqués dans sa conception. Ce théorème s’applique également au temps passé à disséquer, analyser et critiquer la création naissante.En effet, la présence d’imbéciles rend l’intelligence collective multiplicative : un demi cerveau + un demi cerveau n’égale pas un cerveau complet, mais un quart de cerveau (1/2 + 1/2 = 1/4). Additionner un cerveau complet et un demi cerveau ne donne encore qu’un demi cerveau. Plus nombreux sont les « intervenants non qualifiés », moins nombreuse est la matière grise.

Voici deux schémas qui illustrent cette funeste théorie…

courbe_du_design_1.gif

courbe_du_design_2.gif

Définition de la notion « intervenants non qualifiés »

  • Ceux qui n’ont jamais rien créé de visuel (ni Web, ni imprimé, ni rien) ;
  • Ceux qui pensent que le style de 1996 est encore hot ;
  • Tout ceux qui n’ont ni jugement ni compétence graphique, mais qui profitent lâchement de leur position d’influence pour imposer leur opinion ;
  • Les « experts » autodidactes qui « surfent » depuis « longtemps » et « s’y connaissent ». Mieux que vous, d’ailleurs.

Mais alors… qui sont les « intervenants qualifiés » ?

  • Ceux qui sont équipés d’un bon Å“il graphique (deux recommandés), quelque soit leur métier ;
  • Les experts en usabilité et en ergonomie (expérience bienvenue) ;
  • Tout ceux dont la critique est constructive, qui sont capables d’aller au-delà du « j’aime pas trop » ;
  • Ceux qui vous ont choisi parce que VOUS êtes graphiste, et que, même s’ils sont les mieux qualifiés pour leurs affaires, c’est VOTRE mission de sortir un design de qualité.

OK, mais passer du temps sur une nouvelle création, c’est la bonifier, non ? Pas nécessairement. Ce qui peut arriver de mieux à un design, c’est de se laisser oublier quelques heures – quelques jours ? -, de dormir tout un week-end au fond du répertoire d’un ordinateur éteint, et de ressurgir devant les yeux ébahis d’un petit nombre de personnes, dont vous ! S’il est bon, vous le saurez.

Sinon, trouvez vite un coupable !

Partager ce billet:
scoopeo:Comment ruiner un design Web fuzz:Comment ruiner un design Web tapemoi:Comment ruiner un design Web nuouz:Comment ruiner un design Web blogmemes:Comment ruiner un design Web pioche:Comment ruiner un design Web del.icio.us:Comment ruiner un design Web


Publié par Olivier le 02/03/2007 à 10H26 sous Design Web

Parmi les enjeux de la création graphique d’un site Web, le choix des couleurs est un gros morceau. On a beau dire que « les goûts et les couleurs ne se discutent pas », il s’agit bel et bien d’un aspect majeur de l’appréciation intuitive de l’internaute. Il faut donc faire les bons choix, et comme aucun mode d’emploi n’existe, voici quelques points à considérer pour que client et designer soient contents.

La couleur est une science. Mais rien ne vous oblige à être un expert, car c’est avant tout affaire de perception. Si la théorie vous intéresse (et vous avez du goût !), voici une très bonne synthèse en français de la colorimétrie, de la calibration et des autres chromatismes. Plus concrètement, la notion d’harmonie prédomine : le but est quand même de provoquer une réaction positive plutôt qu’une grimace de dégoût !

Les contrastes mènent le bal. Sommairement, les couleurs sont définies par leur teinte et leur luminosité. Un truc que j’ai mis au point : coupler deux couleurs complémentaires. J’utilise une dominante sombre et je la stimule par des touches vives, opposées dans le cercle chromatique. Exemples : bleu foncé et orange vif ou pourpre et vert pomme.

cercle_chromatique.jpg

Ni trop, ni trop peu. Sauf exception, un site Web monochrome (bâti sur une seule dominante) paraîtra sans relief, sans intérêt. À l’inverse, un site bariolé risque de brouiller l’attention du visiteur et de donner une fâcheuse impression d’incohérence. Conclusion : la pauvreté lasse et l’excès fatigue !

Le noir et blanc : une exception. Qu’ont en commun cette peinture rupestre, cette gravure d’Albert Durer, la première photographie et le prix World Press Photo 2007 ? L’indémodable esthétique du noir et blanc, tellement incrustée dans nos rétines qu’on en oublie l’absence de couleurs pour savourer la force des nuances. L’austérité du rendu concentre la puissance visuelle, ramène les formes à leur essence, et dégage un parfum intemporel. Bien exploitées, les 256 nuances de gris perceptibles par l’œil humain s’harmonisent avec (presque) tout.

Aucune couleur n’est à bannir. Mythe : certaines couleurs marchent, d’autres, non. Croire à cet adage vous conduira immanquablement à produire des sites tous semblables, alors qu’on connaît des exemples d’entreprises qui ont bâti une image de marque forte sur des couleurs réputées « casse-gueule » ! Saviez-vous qu’avant l’arrivée de Kawasaki en compétition motocycliste, le vert « portait malheur » sur les circuits ? La marque a adopté un vert pomme impossible à ignorer… et a remporté quelques championnats du monde (quoique là, c’est peut-être aussi une question de pilotage)… Amis européens, connaissez-vous l’origine de l’étrange ocre-jaune-tabac de la Fnac ? À ses débuts, cette « fédération d’achats » disposait d’un budget rachitique, et le choix de couleur s’est naturellement porté… sur l’encre la moins chère ! Quelque cinquante ans plus tard, cette couleur sans nom traverse les modes et symbolise la vision originale de cette entreprise à saveur culturelle.

Créez l’accoutumance. Conclusion logique du point précédent : choisir la même couleur que le concurrent est peut-être rassurant, mais c’est en vous démarquant que vous aurez le plus de chances de laisser votre marque. Difficile à vendre, j’en conviens, mais ça vaut la peine d’essayer !

Gris n’est pas la couleur neutre. En Web, à moins d’avoir une bonne raison, oubliez les aplats de gris. Sinistres. Si vous voulez jouer la neutralité, que vous cherchez à construire une interface rassurante, choisissez un bleu foncé. C’est la couleur qu’on « ressent » le moins. C’est aussi la seule qu’on ne peut pas haïr : ne vous demandez plus pourquoi tant de banquiers, d’assureurs et d’administrations l’ont adoptée !

La mode a sa place, le classicisme aussi. Si votre démarche de conception commence par la question « quelle est la couleur à la mode cette année ? », soyez conscient que votre design sera aussi éphémère qu’un défilé de mode. Il est crucial de mesurer le positionnement visuel de votre site sur l’axe originalité vs. confort. Disons que si vous vendez des skateboards extrêmes à Los Angeles, votre public sera plus sensible à l’immédiateté que si vous proposez des assurances pour les ainés !

Nothing is the new black. Noir, c’est noir, et les chats ne sont pas des chiens. En un mot, ne suivez pas aveuglément les gourous de la tendance : ils sont payés pour vous embrouiller. Les courants passent, mais l’inspiration ne s’use jamais. Et si le secret du webdesign tenait en un mot, il serait connu (peut-être même que je vous le dirais).

N’ayez pas peur du noir. Un fond de page blanc ne fait bondir personne. C’est une solution tellement éprouvée que 95 % des contenus texte sur l’Internet se présentent ainsi. Un fond noir, c’est autre chose. Un danger, une angoisse qui surgit de la petite enfance, comme un monstre du garde-robe. Pourtant, une page noire peut être un écrin qui mettra en valeur des images, par exemple. Le noir aspire la lumière et fait briller ce qu’on y pose, c’est pourquoi tant de photographes, d’illustrateurs, de designers et de peintres lui confient leur portfolio.

Vos couleurs peuvent vivre sur le Web. Le client dont vous concevez le site possède déjà ses couleurs « corpo » ? Au moins un logo ? Exploitez ce patrimoine graphique ! Je ne dis pas que si le logo est rouge, le site sera rouge, mais que les couleurs préexistantes ne doivent pas être ignorées. On a déjà vu des sites d’entreprise où le logo semblait être un intrus. Dommage.

Le message d’abord. Avez-vous quelque chose à dire ? Assurez-vous donc que l’internaute puisse le lire ! En plus de votre capacité d’observation individuelle, certaines études ont été menées pour déterminer les associations de couleurs à favoriser ou à éviter pour maximiser la lisibilité.

La couleur hiérarchise l’information. Un fond coloré donne à son contenu une certaine force, selon sa luminosité (mais pas forcément du clair au foncé) et sa saturation (généralement du terne au vif). De la même façon, il est impressionnant de voir comme la teinte d’un texte peut le détacher du reste du contenu.

Web safe is out. Ou, formulé positivement : en 2007, 16 millions de couleurs sont « web safe ». OK, c’est beaucoup trop, votre œil n’en perçoit que 32 000. Le nombre de couleurs utilisables en Web n’est donc plus vraiment limité par la capacité logicielle, mais plutôt par la perception optique humaine. Si votre client était une mouche, ce serait très différent…

Les laptops sont daltoniens. Soyons réaliste : une proportion grandissante d’internautes naviguent sur un ordinateur portable. Et sur la grande majorité de ces diaboliques machines, on ne perçoit correctement les couleurs et les contrastes qu’en se positionnant au pixel près sur l’axe perpendiculaire à l’écran. Et encore. Faut-il brûler les laptops ? Oui Non, mais on gardera à l’esprit que le subtil dégradé sur lequel on a passé deux heures sera invisible pour certains.

À chacun ses goûts. Je sais, c’est un peu paradoxal de finir comme ça, mais on ne doit pas oublier que toutes les théories ci-dessus trouvent leur limite dans l’aspect intuitif de la perception. Préparez-vous à des commentaires de type « j’aime pas le vert », voire même « eurk ! ». Alors si le client n’achète pas votre « fuschia néodécadent », vendez-lui autre chose…

Partager ce billet:
scoopeo:Les couleurs du Web : mythes et réalités fuzz:Les couleurs du Web : mythes et réalités tapemoi:Les couleurs du Web : mythes et réalités nuouz:Les couleurs du Web : mythes et réalités blogmemes:Les couleurs du Web : mythes et réalités pioche:Les couleurs du Web : mythes et réalités del.icio.us:Les couleurs du Web : mythes et réalités


Publié par Olivier le 15/02/2007 à 17H56 sous Design Web

Je précise d’emblée que ce webdesigner productif n’est pas moi ! Ce qui suit est l’adaptation d’un article que Matthew Inman vient de publier sur le blog de SEOmoz. Non content d’être un graphiste de grand talent, Matt est aussi développeur Web et responsable des technologies chez SEOmoz. Si j’ajoute qu’il est beau bonhomme et qu’il pratique le surf, vous admettrez avec moi que c’est injuste. Mais c’est comme ça. Et là n’est pas notre propos, d’ailleurs. Cette réflexion salutaire sur le design Web est digne d’être livrée à la connaissance des lecteurs francophones, et comme j’aime les chiffres ronds, j’ai ajouté deux points à la fin de la liste de Matt…

* * *

Le design Web fourmille de frustrations. On s’imagine que l’infinité des possibilités nous offre un champ de liberté totale, mais il faut admettre que nous nous sommes tous retrouvés coincés un jour ou l’autre devant une création qui ne veut pas marcher. Un cul-de-sac. Une page au style bancal, une cohérence graphique douteuse, et le compteur créatif à zéro.

Voici 10 trucs pour s’en sortir :

1. Partez du contenu
Beaucoup de graphistes commencent le travail de conception par l’entête (header) de la page. Pourtant, c’est souvent ce qui se trouve dans la page qui en fait la force, et dans ce cas, le header n’est qu’un « plus ». Essayez d’oublier le haut de la page pour vous concentrer sur les éléments de contenu : vous serez surpris de voir à quel point le design global est simple quand le corps de la page est solide. La prochaine fois que vous passerez du temps à finaliser une entête sans avoir défini le contenu, imaginez-vous ajustant votre nœud de cravate devant le miroir… complètement nu !

2. Faites des croquis
Crayons, craies et marqueurs sont vos amis ! Il existe paraît-il un célèbre webdesigner qui noircit des douzaines de pages de son petit carnet à spirales avant même d’ouvrir un logiciel graphique : une façon « low-tech » de définir l’emplacement de ses éléments. L’avantage de cette technique est la rapidité avec laquelle elle permet de tester des principes de mise en page. Griffonnez, griffonnez, et griffonnez encore : chaque croquis vous en apprend un peu plus sur l’aspect de votre future page. Il existe bien sûr des applications comme Axure pour cette étape de conception, mais on peut toujours préférer le doux parfum des marqueurs…

3. Cherchez votre insipration dans le vrai monde
Si vous vous intéressez au design, vous avez sans doute remarqué les innombrables galeries de CSS et de design Web qui ont fleuri ces deux dernières années. Ce sont bien sûr d’excellentes sources d’inspiration, mais un peu de veille artistique dans les médias hors-ligne vous permettra de collecter des idées fraîches. Ouvrez un journal, feuilletez un magazine, regardez les emballages en faisant votre épicerie, arrêtez-vous devant une affiche, scrutez les publicités à la télévision, et soyez attentif aux éléments de premier plan : la typographie, les couleurs, la structure. Qu’est-ce qui fait que cette pub ressort, sur ce magazine ? Pourquoi cette boîte de biscuits est-elle si efficace ? Il y a tant à apprendre du « monde réel » ! Prenez, au hasard, un livre sur les affiches russes des années vingt. Observez comment, dans l’ère pré-Web, on savait faire entrer un énorme volume d’information dans un espace restreint sans que ça paraisse saturé…

4. Remettez-vous en question
On a tous passé des heures à créer un super bouton… qui ne s’intègre pas à notre design ! On veut tellement que ça marche qu’on finit par dénaturer notre travail à force de jouer avec les lois fondamentales de l’espace et du temps ! Respirez. Enregistrez votre bouton dans un répertoire « à insérer » et passez à autre chose. Vous n’aurez pas travaillé en vain puisque ce merveilleux bouton sera prêt, le jour où un design « compatible » pointera son nez.

5. Laissez reposer
C’est bien connu, quand quelque chose vous donne du fil à retordre, le mieux est de le laisser de côté, le temps de prendre un peu de recul et de vous éclaircir les idées. Ne sous-estimez pas le pouvoir du temps, surtout pas en matière de graphisme Web. On peut s’acharner sur un travail au point de finir par le détester et de l’enfouir au fond d’un dossier en essayant de l’oublier. Et souvent, quand notre création ressurgit devant nos yeux, on découvre que c’est un chef-d’œuvre ! Inversement, il arrive qu’un design naisse dans le plaisir et qu’on réalise le matin suivant de quelle abomination on a accouché ! La morale est la suivante : donnez du temps à votre création.

6. Soyez perméable
L’art ne naît pas du vide. Apprenez à mettre le doigt sur ce qui vous touche dans les créations d’autres designers, et nourrissez-en votre art. Ne copiez pas, mais ne vous privez pas de stimuli extérieurs. Soyez critique et affûté. Face à un « design d’enfer », passez le stade de l’admiration pour comprendre comment ça marche. Et comme chaque création est unique, cette opération plutôt agréable est renouvelable à l’infini !

7. Renouvelez-vous
Évitez de resservir les même plats, même si leur goût vous a plu. Prenez par exemple les rectangles avec un dégradé. Très « Web 2.0 ». Ma page manque de corps ? Hop, un rectangle avec un dégradé. Mon design est pourri ? Tiens, voilà un rectangle avec un dégradé. Résultat : rien n’est vraiment laid, mais tout se ressemble. Pourquoi ne pas essayer de vous donner des contraintes arbitraires, telles que « pas de drop-shadow aujourd’hui » ou « des éléments 2D uniquement » ? S’interdire certains réflexes vous obligera à en inventer de nouveaux, et l’épanouissement artistique réside en partie dans votre capacité à produire quelque chose qui ne ressemble à aucune de vos créations précédentes.

8. Soumettez votre travail à votre entourage
Attention : conseil dangereux ! Il est très facile de ruiner un design en impliquant un trop grand nombre d’intervenants. Choisissez bien vos partenaires créatifs et assurez-vous de ne collecter que des critiques constructives. On sait ce que peut devenir un bon design d’entreprise entre les mains d’« experts » en graphisme dont le talent, autrefois célébré par leur maman, est resté bloqué au stade préscolaire… Si quelqu’un vous dit que votre création est « pas comme il faudrait » ou qu’il « ne l’aime juste pas », allez donc chercher des idées ailleurs. Exigez des commentaires précis : qu’est-ce qui ne fonctionne pas, quelles sont les pistes pour améliorer la chose ? Et soyez humble : toute critique n’est pas nécessairement une atteinte à votre génie artistique !

9. Réduisez votre création à 3 éléments
Quand une page Web manque de force, c’est souvent qu’elle manque de structure. Une des solutions concrètes est de la revoir avec une optique de hiérarchisation : quels sont les éléments majeurs ? En poussant à l’extrême, on arrive souvent au chiffre 3. Mettons : un logo, une phrase-clé et un visuel. En faisant abstraction de tout le reste, sous quelle forme ces éléments s’articulent-ils le mieux ? La réponse à cette question pourrait bien fournir la structure de votre page.

10. Demandez son avis à votre mère
Ce conseil peut sembler en contradiction avec le point 8, il est à prendre avec un grain de sel. Il est instructif et parfois surprenant de demander un avis graphique à quelqu’un dont ce n’est ni le métier, ni la préoccupation. S’exposer ainsi aux commentaires graphiques de sa mère, de son petit neveu ou du plombier est une bonne façon de remettre en question ces petites choses qu’on considère acquises. « C’est quoi, ce truc rond », « pourquoi t’as mis du jaune » ou « c’est un chien ou une souris » sont autant de questions qui nous ramènent à l’aspect intuitif de la création. Savoir y répondre est un autre problème…


Et vous, quels sont vos trucs ?

Partager ce billet:
scoopeo:Les 10 secrets d’un web designer productif fuzz:Les 10 secrets d’un web designer productif tapemoi:Les 10 secrets d’un web designer productif nuouz:Les 10 secrets d’un web designer productif blogmemes:Les 10 secrets d’un web designer productif pioche:Les 10 secrets d’un web designer productif del.icio.us:Les 10 secrets d’un web designer productif


Publié par Francois le 06/02/2007 à 12H02 sous Accessibilité, ergonomie

Il y a quelques années, les propriétaires de site Web se préoccupaient d’avantage d’avoir un site qui accroche l’oeil soit par un design très illustré ou par l’utilisation d’animation Flash. De nos jours, ceux-ci se préoccupent d’avantage de la question de référencement dans les moteurs de recherche. Bientôt, ils seront également sensibles aux questions d’accessibilité. Pourquoi? À quoi bon faire un site pouvant être consulté par les personnes ayant des difficultés visuelles? C’est simple! Les robots des différents moteurs de recherche sont des visiteurs aveugles. Ils ne considèrent pas vos couleurs ni vos images ni vos animations. Ils sont là sur votre site pour l’information. Est-ce qu’ils ont accès à votre information? C’est ce que nous allons voir!

Premièrement, définissons « accessibilité ». La définition de Wikipédia est la suivante :

«Mettre le Web et ses services à la disposition de tous les individus, quel que soit leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales.»

Source : Wikipédia - Accessibilité du Web

Maintenant, comment savoir rapidement si son site est accessible ou non? Il existe une multitude d’outils permettant l’analyse d’un site. Pour ma part, la première étape est de valider une page de son site avec le validateur d’accessibilité francophone d’Accessibilité pour tous disponible à l’adresse suivante : http://validateur-accessibilite.apinc.org/

Le validateur vous permet rapidement de valider plusieurs bonnes pratiques d’accessibilité automatiquement en vous présentant les résultats sur 3 niveaux de priorité définis par le WCAG (Web Content Accessibility Guidelines). Voici la version originale anglaise des trois niveaux de priorité :

[Priority 1]

A Web content developer must satisfy this checkpoint. Otherwise, one or more groups will find it impossible to access information in the document. Satisfying this checkpoint is a basic requirement for some groups to be able to use Web documents.

[Priority 2]

A Web content developer should satisfy this checkpoint. Otherwise, one or more groups will find it difficult to access information in the document. Satisfying this checkpoint will remove significant barriers to accessing Web documents.

[Priority 3]

A Web content developer may address this checkpoint. Otherwise, one or more groups will find it somewhat difficult to access information in the document. Satisfying this checkpoint will improve access to Web documents.

Source : Web Content Accessibility Guidelines - Priorities

La validation automatique est intéressante mais elle n’est pas suffisante. Voici un top 10 dans le désordre des bonnes pratiques pour l’accessibilité Web :

  • Assurez-vous que tous vos élements non-textuels présentent un texte alternatif. Si votre description est longue, inscrivez celle-ci dans l’attribut LONGDESC et résumé dans l’attribut ALT.
  • Évitez les liens de type « Cliquez ici ». Le texte sur le lien devrait toujours être représentatif de la cible vers lequel il pointe. De plus, dans le cas d’un menu présenté avec des images ou tout autre lien sur une image, utilisez l’attribut TITLE dans votre élément A pour indiquer une valeur textuelle de la cible et ce même si l’image contient un texte alternatif. Si votre lien pointe vers une page dans une autre langue, utilisez l’attribut HREFLANG.
  • Spécifiez vos tailles de polices de façon variable. Évitez les PX et les PT, utilisez plutôt EM ou %.
  • Tentez de naviguer sur votre site en utilisant seulement le clavier. Vous devriez avoir accès à l’ensemble du contenu.
  • Évitez l’utilisation des FRAMES. Du même coup, vous aurez la certitude qu’aucun résultat de recherche pointera vers une page qui ne présente pas votre entête et/ou navigation.
  • Si votre site utilise des tableaux pour la présentation du contenu, assurez-vous que ceux-ci utilisent l’attribut SUMMARY pour permettre aux visiteurs non-voyants d’avoir une idée d’ensemble du tableau.
  • Utilisez l’élément LABEL avec l’attribut FOR lors de la conception de vos formulaires. Ceci permettra à un visiteur non voyant d’associer plus facilement l’intitulé de la case avec la case elle-même. L’élément LABEL permet également de cliquer sur le texte pour activer une case à cocher plutôt que d’avoir à cliquer directement sur la case.
  • Testez votre site avec plusieurs navigateurs, versions et systèmes d’exploitation. Testez également avec un navigateur spécialisé pour personne non-voyante : MozBraille ou JAWS.
  • Faites des cas d’utilisation et demandez à un inconnu dans la rue d’utiliser votre site pour trouver certaines informations. Donnez-lui une petite récompense…
  • Tentez toujours d’utiliser le bon élément pour représenter l’information. S’il ne s’agit pas d’information “tabulaire”, n’utilisez pas de tableau. Mettez vos titres dans les éléments H1 à H6. Vos paragraphes dans l’élément P. Vous menus dans une liste UL LI. Ensuite, utilisez le CSS pour définir la présentation de tous ces éléments.

Si le sujet de l’accessibilité Web vous intéresse, un forum se tiendra à Longueuil le 12 février 2007. L’inscription est gratuite mais obligatoire et peut se faire en ligne sur le site d’Accessibilité Web avant demain…!

Pour plus d’information sur le sujet voici une liste de ressources intéressantes :

Partager ce billet:
scoopeo:Est-ce que votre site Web est accessible? fuzz:Est-ce que votre site Web est accessible? tapemoi:Est-ce que votre site Web est accessible? nuouz:Est-ce que votre site Web est accessible? blogmemes:Est-ce que votre site Web est accessible? pioche:Est-ce que votre site Web est accessible? del.icio.us:Est-ce que votre site Web est accessible?


Publié par Marc-Antoine le 27/01/2007 à 13H57 sous Accessibilité, ergonomie

Web 2.0 par-ci, Web 2.0 par là … Il paraît que le Web 2.0 est l’avénement du “look and feel” donc de l’usabilité enfin tournée pour tout internaute !

J’ai donc décidé de m’y pencher… Pour ce faire, j’ai décidé d’analyser le point crucial et commun à de nombreux sites : le formulaire de contact ou d’enregistrement. Et pour choisir les sites à décortiquer quoi de mieux que de les piocher dans le fameux Web 2.0 Awards de SEOmoz.
La plupart des formulaires étaient très décevants. Voici les constatations, parfois effarantes, qui en sont tirées :

  • Certains offraient une validation lors de la soumission/envoi (submit) du formulaire, mais délivraient un message inexistant ou peu clair lorsqu’une erreur se produisait.
  • Certains ressemblait plus à un formulaire administratif provenant du FBI qu’à autre chose (i.e Yahoo!)
  • D’autres affichaient le mot de passe sans cryptage ! Cet élement est pourtant à la base de la conception d’un formulaire.
  • La plupart de ces formulaires n’utilisent pas de validation en JavaScript ou Ajax. Pour des sites Web 2.0, c’est un scandale :)

Mes humbles recommandations :

  • Ce qui peut être validé via le JavaScript devrait être fait. Ce point concerne surtout l’étape d’envoi/confirmation du formulaire ou lors de changements/réactualisations des informations.
  • Ce qui peut être validé en Ajax peut être une plus-value en ergonomie. Je pense notamment à la disponibilité d’un “username” ou d’une adresse e-mail lors de l’inscription.
  • Lors de l’envoi des informations, toutes les erreurs devraient être renvoyées en une fois, avec tout les champs invalides concernés (plutôt que de rapporter une erreur à la fois … Quoi de plus frustrant que de s’y reprendre à plusieurs fois avant de remplir correctement un formulaire).
  • Concernant ces mêmes erreurs, une emphase graphique devrait aider l’utilisateur à retrouver rapidement ces dernières.
  • Les intitulés des champs à remplir devraient être placés au plus proche du champ de saisie.
  • Les termes devraient toujours être “Inscription” et “Connexion”, selon les standards d’utilisation et les habitudes des internautes. Des termes comme “Mon espace” ou “Mon profil” peuvent porter à confusion.

Pour illustrer mes propos, je vous offre une liste de formulaire d’enregistrement qui me semblent bien faits et bien pensés :

  • Simples et efficaces :
  • Validation des champs lors des modifications et suggestions d’amélioration/erreurs :
  • Design et informations pertinentes pour guider l’utilisateur
  • Agencement des intitulés face aux champs de saisie
  • Je suis toujours à la recherche du formulaire d’enregistrement ou de contact parfait :) Si vous le connaissez, faites-moi signe !

    Partager ce billet:
    scoopeo:Audit des formulaires Web 2.0 fuzz:Audit des formulaires Web 2.0 tapemoi:Audit des formulaires Web 2.0 nuouz:Audit des formulaires Web 2.0 blogmemes:Audit des formulaires Web 2.0 pioche:Audit des formulaires Web 2.0 del.icio.us:Audit des formulaires Web 2.0


    Publié par Sarah le 28/03/2006 à 14H26 sous Commerce électronique

    Pour attirer de nouveaux clients sur un site de commerce électronique, les leviers d’actions se résumaient à de la publicité, un catalogue en ligne ergonomique et un design épuré. Mais, le réel problème d’un site de commerce électronique et de briser les dernières réticences des internautes, de passer de simples visiteurs à acheteurs.

    Aujourd’hui, grâce à l’augmentation de la bande passante et les progrès technologiques faits en terme d’interactivité, les cybermarchands offrent à leurs clients, un conseiller de vente virtuel, pour les accompagner dans le processus d’achat. Cet agent virtuel peut entrer en conversation avec l’internaute, et peut l’aider dans la navigation du site, l’informer tout au long du processus de vente, le convaincre d’acheter, etc. … En somme, l’agent virtuel serait l’équivalent de la force de vente dans un magasin traditionnel.

    Les avantages sont multiples pour le cybermarchand :

    • Augmentation de la satisfaction client et donc fidélisation
    • Augmentation des ventes en ligne
    • Coûts réduits

    Certains sites de commerce électronique ont tenté l’expérience, tel que le centre du monde, centre de magasinage virtuel.

    Partager ce billet:
    scoopeo:Votre force de vente en ligne ! fuzz:Votre force de vente en ligne ! tapemoi:Votre force de vente en ligne ! nuouz:Votre force de vente en ligne ! blogmemes:Votre force de vente en ligne ! pioche:Votre force de vente en ligne ! del.icio.us:Votre force de vente en ligne !


    Page 1 de 11
     ‏