Collis Ta’eed a écrit sur le site PSD Tuts un article sur 9 grands principes de webdesign. En voici une traduction française avec l’aimable autorisation de l’auteur.

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

9 principes essentiels d’un bon webdesign

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

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

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

Préséance (guider l’oeil)

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

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

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

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

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

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

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

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

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

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

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

L’espace

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

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

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

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

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

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

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

Navigation

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

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

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

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

Concevoir en construisant

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

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

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

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

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

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

Typographie

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

Il est important de considérer des choses comme :

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

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

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

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

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

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

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

Usabilité

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

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

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

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

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

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

L’alignement

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

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

Clarté (acuité)

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

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

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

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

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

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

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

Cohérence

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

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

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

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

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

Obtenir mon livre.

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

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