Vous désirez vous mettre au design Web de façon plus sérieuse?
Voici quelques pistes en vrac pour éviter des erreurs communes.
Le but de cet article est de conseiller ceux qui se sentent perdus dans le processus de création Web. J’en profite également pour ne faire preuve d’aucune transparence et livrer mes opinions sur le sujet.
S’il y a divergence d’avis sur n’importe quel des points abordés dans l’article, je serai heureux de lire votre opinion dans les commentaires et d’en discuter. Il ne s’agit pas de faits établis, je dis ce que je pense, c’est tout! Je peux me tromper, oh que oui.
Connaître votre direction
Lorsqu’on design une maquette de site Web, on doit toujours garder à l’esprit le résultat final, intégré et en action
Pour débuter l’élaboration d’une maquette Web, veillez à avoir en main le plus d’information possible. Les goûts et visions du client, bien sûr, mais aussi une arborescence détaillée, les technologies qui seront utilisées (flash, html, javascript, cms, etc.), et les fonctionnalités nécessaires
Cela n’a rapport qu’avec le développement du site au niveau programmation me direz-vous; bien au contraire : on conçoit un visuel bien différemment lorsqu’on connait tous les détails d’un projet. On travaille forcément mieux si on peut se faire une idée non-eronnée du produit final.
Certains pourraient être portés à réaliser une maquette de site Web sur Photoshop, puis ensuite se pencher sur l’arborescence, le contenu des pages, etc.
C’est à mon avis une grossière erreur; la conception du visuel doit se faire après avoir décidé grand nombre de ces questions. Le design Web ne relève pas seulement de la création Web (esthétique), il relève de la création du site Web dans son ensemble, du début jusqu’à la fin, en couvrant tous les aspects d’utilisabilité, de structure d’information jusqu’au visuel.
L’ergonomie à tout prix
Ne privilégez jamais un effet, un artifice visuel, au détriment de l’ergonomie. L’utilisabilité du site Web est primordiale, pensez-y constamment lorsque vous êtes en phase de création. À chaque développement du visuel, mettez-vous dans la peau d’un visiteur non expérimenté, et ne fermez jamais les yeux, par paresse, sur des lacunes ergonomiques.
La flexibilité de la mise en page
Certains designers, lorsqu’ils conçoivent un site Web, oublieront carrément l’utilité finale de leur visuel. C’est-à-dire qu’ils n’auront pas forcément pensé au site Web dans sa flexibilité. Voici un exemple typique :
Dans un cas où la maquette est faite dans un fichier de 1000px de large, que se passe t-il si on visionne le site sur un écran gigantesque? ou minuscule? y avez-vous pensé? Votre visuel sera très différent, dépendamment du fond utilisé « au delà » de la zone du site Web. Le site est-il centré, à gauche ou (plus rarement) à droite? etc.
Utilisation de la typographie Web
L’outil majeur du Web, c’est le texte. Par exemple, ne designez pas un menu fait d’images, si la police utilisée est du Arial, noir sur blanc! Jouer avec le texte, conjointement avec du CSS bien pensé, peut mener à une toute autre solution. Le texte sera toujours lisible, peu importe le navigateur, la console ou autre. C’est excellent pour le référencement, c’est « naturel » et ça se télécharge en une fraction de seconde.
La typographie Web, c’est joli et c’est génial dans sa simplicité d’utilisation. Pour décider d’utiliser un menu en images, il faut que l’utilisation de la fonte utilisée soit fortement justifiée et qu’il ne s’agisse pas d’une fonte Web.
Le Web n’est pas de l’imprimé
Des générations vieillissantes auront souvent tendance à vouloir transposer du média imprimé sur le Web. C’est une énorme erreur; le Web prodigue une expérience tout-à-fait particulière, puisqu’il s’agit d’une application interagissant avec un utilisateur, sans compter l’environnement très différent et changeant, avec ses contraintes également changeantes (navigateurs, limites technologiques, ergonomie Web, etc.).
Il est possible d’adapter un design imprimé à du Web, mais il faut prendre le temps de se pencher sur la question et ne pas essayer de tourner les coins ronds. Adapter ne signifie pas copier-coller.
Éléments animés : Flash et compagnie
Bien des gens trouvent très attayant pour un site de posséder des éléments qui s’animent. À côté de cela, un site en HTML bien simple leur parraît statique, ennuyant, voire mort.
L’expérience prolongée prouve que des éléments animés qui ne sont pas réellement utiles à l’expérience utilisateur, finit par taper royalement sur les nerfs de l’utilisateur lorsqu’il retourne sur le site (meilleur exemple : introduction en flash). Un élément animé en boucle, par exemple, perturbera grandement l’attention du visiteur sur le contenu réel du site; c’est donc viser complètement à côté.
Demandez-vous toujours si le flash est réellement utile sur votre site. Le flash ne doit pas être utilisé comme élément décoratif, il doit apporter un plus énorme, qui justifie d’endurer tous les inconvénients du flash. Si on se sert de flash pour faire quelque chose qui soit possible de faire en HTML, c’est du suicide.
N’oubliez pas que du flash n’est pas naturellement référençable. Google peut maintenant lire le texte dans les documents Flash, mais il ne gère pas encore les importations dynamiques, et il existe d’autres problèmes difficiles à appréhender. Il est possible de "simuler" de multiples pages HTML en Flash, mais ça revient à dire ce que j’ai mentionné plus tôt : autant de trouble doit être justifié par un besoin essentiel du flash dans un projet. De toutes façons, on peut faire des trucs vraiment chouettes avec du Javascript à l’aide de librairies comme JQuery et Mootools…
Êtes-vous d’accord avec les points mentionnés dans cet article? Qu’en pensez-vous?
Inspirez-vous régulièrement
Comme dans tout, il est rare qu’on réinvente la roue pour du Web. Il existe de nombreux sites qui répertorient de beaux sites faits en CSS et en Flash. Ça peut être une bonne idée de les regarder régulièrement, afin de vous inspirer des dernières tendances … y’a pas de mal à ça! N’hésitez pas à consulter ce site de ressources graphiques.
Voici une liste de ces sites qui publient les meilleurs designs CSS :
Note : Il s’agit d’un flux RSS, revenez plus tard pour davantage de sites, ou proposez les galleries CSS ou une agence web que vous connaissez.
