28 août 2011 Développement web

Définition et description du processus

Le web design « désigne la conception de l'interface web : l’architecture interactionnelle, l’organisation des pages, l’arborescence et la navigation dans le site web » (Source : Wikipedia). Concrètement, il s’agit de manier, avec art, la disposition des blocs sur une page Web, la mise en forme du texte (police de caractères, couleurs et contrastes, style etc.) ainsi que tous les éléments graphiques (images de fond, bandeau, etc.)

Schématiquement, le web design se créé en plusieurs étapes :

  • La création de la - ou des – maquette (s) : cette première étape consiste à créer un dessin ou une maquette de la page d’accueil, ainsi que des « déclinaisons », c’est-à-dire les maquettes des autres pages présentant de légères variations par rapport à la première

  • Le découpage : comme ce travail graphique – établi en format « image » - ne peut pas directement être intégré sur le site, tel qu’il est présenté à cette étape-là, il s’agit de le transformer… Cela se traduit, tout d’abord, par la découpe de la maquette en plusieurs images.

  • L’intégration CSS : par le biais d’une « feuille de style », créée avec l’aide du langage Cascading Style Sheets (CSS), il suffit de ré-assembler les éléments pour parvenir à recréer la copie conforme de la maquette de départ, à la différence près, qu’elle est alors exploitable sur Internet, en conformité avec les règles en vigueur, en matière d’accessibilité, d’utilisabilité et d’ergonomie.

Concilier « webdesign » et « ergonomie »

Contrairement au support papier, qui ne s’intéresse qu’à l’aspect purement graphique, le webdesign suppose de prendre en compte un ensemble d’éléments regroupés sous le terme « ergonomie ». Avant de se lancer dans les étapes de réalisation concrètes du webdesign, citées ci-dessus, il est primordial de réfléchir à la conception en se posant quatre questions essentielles :

  • Quel est le type du site ?

En fonction du « profil » du site à réaliser, le webdesign pourra être différent. Un site, de thème bien défini, doit permettre à l’internaute d’identifier, en quelques secondes, le sujet abordé. Un site « portfolio » ou de galerie, est essentiellement basé sur le visuel : il est primordial d’impressionner le visiteur par une mise en valeur du talent exposé. Pour un site e-commerce, le webdesign doit combiner sobriété et attraction, tandis qu’un site communautaire se fédérera autour d’un thème qui inspirera le graphisme et le webdesign d’un site blog sera le reflet de son contenu, etc.

  • Quel est le public ciblé par le site ?

En fonction de la tranche d’âge visée, le webdesign prendra telle ou telle orientation graphique, pour séduire, puis susciter l’adhésion

  • Quelle sont les couleurs à utiliser ?

Le choix des couleurs est d’autant plus important qu’il conditionne rapidement l’adhésion au site en question. Il s’agit de manier savamment les contrastes, les couleurs primaires et secondaires, leur symbolique et les effets psychologiques induits.

  • Comment organiser les différents éléments ?

Sur Internet, le visiteur suit une certaine logique de lecture qu’il est important de connaître, pour organiser et hiérarchiser les blocs entre eux.

Les principaux critères d’ « ergonomie »

Pour répondre à ces différentes questions, le webdesigner est parfaitement au fait des critères d’ergonomie, visant à optimiser l’efficacité et la fiabilité du site auprès de l’internaute. Parmi ces éléments, on peut citer :

  • Critère de sobriété : prôner la simplicité, pour davantage de crédibilité et l’aération, pour attirer le regard sur des messages prioritaires ;

  • Critère de lisibilité : se souvenir qu’il est moins facile de lire sur écran que sur papier, en structurant son texte en paragraphes, avec des niveaux et en accordant une place privilégiée (haut de page) à l’information importante ;

  • Critère d’utilisabilité : offrir à l’internaute une grande liberté de navigation (retour à l’accueil et aux grandes rubriques en un clic) tout en respectant la « règle des trois clics » pour trouver une information et, enfin, lui permettre de se repérer, à tout moment, par un plan du site, une charte graphique uniforme, un fil d’Ariane, un URL explicite, etc.). Par ailleurs, un site ergonomique prend soin de dater ses mises à jour ;

  • Critère d’interactivité : lier les pages entre elles, à l’aide de liens hypertextes, découper l’information pour une meilleure assimilation, tout en proposant un développement plus approfondi aux curieux et développer les échanges avec les visiteurs, pour connaître leurs impressions et demandes ;

  • Critères plus techniques de rapidité, d’adaptabilité (redimensionnement des polices de caractères, par exemple), d’accessibilité (pour les personnes handicapées) ;

  • Et d’autres, très spécifiques, sans doute.

Ces différents critères, bien présents dans la tête du webdesigner, lui permettent de créer une maquette adaptée au site, en prenant en compte la position des informations, le choix des couleurs, des images, la typographie, les symboles graphiques – ou pictogrammes – etc., pour obtenir à un ensemble cohérent et structuré, esthétiquement équilibré.