Trop de sites sont réalisés par des designers qui n’ont pas de réelle vision web et il ne faut en aucun cas les blâmer mais il serait grand temps d’avancer et de laisser le webdesign à des gens qui ont été formés pour ça et de ce fait, proposer enfin, de vrai formation dans ce domaine. Le webdesign répond à des contraintes d’ergonomie, d’accessibilité, de sémantique et d’intégration. L’art est secondaire (troll ?). La maquette web est au service du contenu et non pas l’inverse.

Revenons donc à Duoh.com. Définissons d’abord ce qu’ils font. C’est une agence de design web et print qui existe depuis 1992 et composée de deux personnes : Geert Leyseele, le directeur de projet et Veerle Pieters au secteur de l’illustration et ’intégration. Duoh produit essentiellement de l’interface web mais également des logos, des illustrations, des icones et enfin du print.

Nous allons étudier dans un premier temps l’aspect graphique puis nous nous concentrerons sur l’aspect technique.

Une grille peu conventionnelle

Réalisée sous Illustrator, la maquette du site Duoh.com a pris un certain nombre de liberté graphique. Il ne s’agissait pas ici de s’enfermer dans les contraintes d’une grille.

Pourtant la tentation aurait été grande. On sait à quel point le design suisse (design que voulais évoque le nouveau Duoh) est très cubique et il aurait été évident de se caler précisément sur une grille régulière. Mais ici, il fallait du mouvement, de la vie. Comme on peut le voir sur l’image ci-dessous, certains éléments sont délibérement décalés par rapport à la grille de base.

Cela créé une certaine dynamique dans la mise en page. L’idée est également d’avoir un aspect différent à chaque scroll dans la page.

Concernant le choix des couleurs, là aussi, l’originalité était de mise. La maquette est un vrai arc-en-ciel. Une dizaine de couleurs ont été utilisées (rien que ça !). Mais c’est surtout leur utilisation qui est intéressante. On peut observer en fond de page, une gris très foncé (#3e373c) et dans la zone principale de contenu du blanc. En termes de contraste, on ne peut pas faire mieux. Et sur cette structure monochrome, viennent s’ajouter des couleurs « flashy » qui donnent force et vivacité.

Chaque maquette de page se présente comme une surprise pour le visiteur. Le fond de page change en permanence. En voici quelques exemples ci-dessous :

Il en est de même pour la sidebar…

L’innovation dans l’intégration

Si l’on met de côté un instant l’aspect graphique, on pourra remarquer un certain nombre de techniques d’intégration assez intéressantes et qui peuvent être aussi contestables.

Pour ce qui est des remplacements de texte par des images dans le menu principal, il y a un choix d’utiliser des balises span vides. A première vue, ça peut faire enrager les adeptes de la validité stricte ! Mais là, il est question d’accessibilité. En effet, contrairement aux techniques de remplacements d’image utilisées largement (text-indent :-9999px ou top :-9999px), il n’y aura aucun de souci lors de la lecture de la page si la CSS est activée et si les images ne sont pas chargées. L’astuce est de placer les span avec pour fond l’image au dessus (en position absolue) du texte.

Il peut paraitre également surprenant de trouver parfois des remplacements de texte par des images qui n’ont pas du tout le même contenu. Il y a par exemple sur la page Contact us, un titre de niveau 2 qui contient le texte « Contact us for an estimate? » et qui sous forme d’image est remplacé par « Want a site that beautiful and brainy too ? » ou le texte sur la homepage « Who we are » qui est tout bonnement remplacé par une image de séparation. J’argumenterais qu’ici on différencie l’aspect que le site aura lorsqu’il sera chargé avec tous les éléments graphique et son aspect dans aucune illustration. Aucun aspect n’est handicapé par ces pratiques et l’utilisateur ne manque aucune informations d’un coté comme de l’autre.

Ce qui a le plus perturbé les utilisateurs au premier coup d’œil sur ce site est l’utilisation de l’espace par la mise en page. Le site a été pensé de manière à ce qu’il soit agréable à lire autant sur des petites résolutions que sur des énormes résolutions (type iMac).Ce qui a rebuté plus d’un utilisateur est le fait qu’on ne puisse pas avoir accès sur les résolutions 1024*768 aux citations. D’autres qui avaient des résolutions intermédiaires se lamentaient d’avoir des citations coupées.

Ce genre de commentaires sont anti-productifs et ne feront jamais avancer le web. Il faut replacer le projet dans un contexte. Ici on parle de la vitrine d’un site de création web et print et pas d’un site destiné à un client. Ici, l’aspect novateur est qu’aucune résolution ne souffre de la mise en page. Le site s’adapte très bien à tout type d’écran. Il est enfin plaisant pour des personnes ayant des résolutions de type 1900*1200 de naviguer sur des sites web.

On notera également l’utilisation de la police de caractère Corbel (police distribuée avec Vista) et qui est remplacée par l’Helvetica au cas où cette dernière n’est pas disponible.

Au rang de la technique

Le site utilise le CMS Expression Engine et est hébergé chez Engine Hosting qui met à disposition ce CMS de base. Je ne connais pas encore totalement cet outil, je suis dans la découverte mais il semble qu’il soit très souple et offre grand nombre de fonctionnalités.

Les pages pèse en moyenne 200 ko, les fichiers les plus lourds étant les images de fonds bien évidemment mais on a rien sans rien

Coté javascript, Duoh a fait le choix « tendance » de la librairie Mootools. Ce qui est dommage, c’est d’avoir utilisé une librairie javascript uniquement pour les effets d’images sur la homepage et pour les tooltips de la sidebar. Là encore, ça se discute…

Le site est strictement valide W3C sur le code XHTML. Seule la CSS ne valide pas mais est-ce bien grave ?

Conclusion

Veerle qui a réalisé la maquette et l’intégration html de Duoh propose sans cesse ses idées en matière d’illustrations ou de réalisations web et Duoh.com constitue, une fois de plus, une nouvelle source d’inspiration.

Je vous invite à consulter ces liens pour plus d’informations :

• New Duoh! dot com has launched
• Tweaks to Duoh! dot com

Le sujet

Il s’agit d’un site internet pour une école privée. L’objectif est de faire connaître l’établissement. Le site internet sera un moyen de communiquer avec les familles. Il devra faciliter la prise de contacts avec les parents. L’ergonomie est au centre de ce projet. Le site doit disposer d’une navigation simplifiée au maximum, l’ensemble des sections doit être correctement délimité. On retrouvera notamment une partie « actualité », des articles plus spécifiques sur les activités de l’école et un agenda.

Concernant les contraintes techniques, le site devra disposer d’un espace d’administration simple d’utilisation. Les personnes qui mettront à jour le site ne seront pas des informaticiens. Il faut leur simplifier la tâche. Le choix d’un gestionnaire de contenu (CMS) se révèle judicieux sur le plan technique. Il faudra toutefois veiller à ce que ce gestionnaire ne soit pas une « usine à gaz » et qu’il réponde à l’ensemble des besoins.

Premiers préparatifs

Avant de me lancer dans la création graphique, j’ai étudié plusieurs possibilités de mise en page. Sur une feuille de papier, j’ai essayé différents placements possibles. Cet étape permet de débuter sereinement l’agencement des différents blocs de contenu sur la future maquette. Cela nous donne aussi l’occasion de déterminer les éléments sur lesquels on souhaitera attirer l’attention du visiteur. Pour respecter les besoins de navigation aisée dans le site, je me suis basé sur un système de navigation des plus conventionnels.

Pour trouver l’inspiration, je me suis mis à flâner sur des sites internet en rapport avec le monde de l’enfance. Quel dommage d’ailleurs que la majorité de ces portails ne soient pas très jolis graphiquement… Mais cela permet de faire naître des idées pour les premières maquettes du site en question.

La création graphique

La maquette graphique du site internet doit mettre en valeur l’objet du site internet. Il faut avoir à l’esprit que cette maquette sera déclinée au format web (XHTML / CSS), il faut parfois calmer ses ardeur . Il faut également avoir une idée de l’orientation graphique. A défaut, plusieurs axes de communication pourront être proposés. Dans le cas présent, les éléments graphiques doivent évoquer le monde de l’enfance. Le site doit toutefois rester structuré dans sa forme. L’ambiance générale doit être colorée et agréable.

Dans un premier temps, j’ai réalisé dans Photoshop des objets propres au milieu scolaire. Ils ne seront pas tous intégrés mais pourront être réutilisés à l’occasion pour des mises à jour éventuelles. J’ai ainsi créé des fichiers psd (photoshop) de pinceaux, stylos, taille-crayon, tableau noir etc.…

Vient ensuite la maquette du site. Je débute l’agencement des différents blocs pour ensuite y intégrer les éléments décoratifs et les textes factices. J’ai pris pour habitude de travailler avec une grille pour respecter certaines règles de proportion (le nombre d’or). Pour le titre du site, je me suis inspiré de l’écriture à la craie des instituteurs sur les tableaux d’école. Le header très fourni intègre quelques-un des éléments que j’avais créé au préalable. J’ai choisi de ne pas créer de divisions explicites entre les blocs. Le travail sur les dégradés m’a permis de donner cet effet de séparation entre les éléments. Il s’agit de mon premier travail sur la maquette du site. Les couleurs sont très sobres. J’ai utilisé volontairement des blocs très rectilignes. La grille m’a permis de respecter les proportions de rigueur. Au final, la sobriété de la maquette n’était pas probante.

J’ai donc utilisé l’outil de Teinte/Saturation pour rechercher les teintes adéquates. J’ai noté certains codes couleurs qui me semblaient appropriés et retravaillé les blocs de contenu. Les couleurs ont gagné en vivacité. J’en ai également profité pour repenser le menu supérieur en y intégrant des post-it. J’ai effectué plusieurs tests pour évoquer le monde de l’enfance avec notamment le petit dessin bordant le titre du site.
Au final, l’ensemble manquait toujours d’impact. La vision de l’utilisateur resterais bloqué sur ce fameux header imposant. Il fallait mettre en valeur le contenu principal.

L’apparence de la seconde maquette manquait d’éléments de contraste. De ce fait, j’ai intégré un footer noir/gris afin de bien différencier la bannière supérieure, le contenu et le footer. J’ai redessiné le petit personnage. Je lui ai même présenté un nouveau petit camarade Cette troisième maquette m’a également permis de penser à la manière de présenter la page d’accueil. J’ai ajouté deux blocs très colorés pour y insérer les éléments communicatifs, c’est-à-dire les accroches. Le menu latéral a également été simplifié. C’est cette maquette qui servira de base pour l’intégration XHTML / CSS

(À suivre…)

• Le site web dédié à cet ouvrage : transcendingcss.com

Team Viget Lab

J’ai été particulièrement séduit par la mise en page originale. Pour naviguer, il y a un défilement horizontal de la zone de contenu afin d’accéder aux autres rubriques. C’est assez original. Ceci est rendu possible grâce aux possibilités du Framework Jquery (mon chouchou) alliées au plugin Easing.

Certes, on pourra me faire remarquer que ce n’est pas très évolutif mais ici, on parle d’une vitrine montrant les possibilités de créations d’une équipe de designers

• Visiter le site de la Team Viget

Goto CSS3

Le site suivant est très soigné graphiquement. La mise en page a été réalisée à l’aide d’une grille symétrique de 4 colonnes. Mais ce qui fait la beauté de ce design est surtout la minutie accordée aux différents éléments graphiques. L’auteur a réalisé un véritable travaille d’orfèvre sur les illustrations de la page et on se laisse soudain aller à quelques rêveries…

• Visiter le site Goto CSS3

Legionary

Le design de ce site qui est en fait la vitrine d’une agence de webdesign (mais pas seulement) à retenu mon attention par son alliance de couleurs sombre (gris, noir) avec des couleurs plutôt flashy (rose). Le tout donne une apparence vivante grâce aux courbes en fond de pages qui sont décidément très tendances

• Visiter le site de Legionary

Patty Ho

Un autre joli design, celui de Patty Ho. Il se caractérise par des couleurs chaudes. Il y a des jeux de transparence et de contraste qui donnent à ce site, un style tout à fait particulier. Les différentes sections sont parfaitement délimitées par de larges marges.

On notera toutefois quelques bugs javascript notamment sur la partie diaporama qui expose les différents projets réalisés. Mais evidemment, il ne s’agit là que d’un détail dans l’unique but de chercher des poux

• Visiter le site de Patty Ho

Veerle’s blog

Je ne pouvais pas conclure ce premier top 5 de design de site sans parler du blog de Veerle qui est l’alliance d’une mise en page basée sur une grille à la beauté graphique. L’utilisation de la grille est ici très intéressante car paradoxalement, la grille symétrique utilisée  laisse apparaître une mise en page asymétrique. Le résultat est plus que réussi. Le mélange encore une fois de couleurs sombres et de couleurs flashy donne toute l’intensité à la page. Il y a également tout un travail non négligeable sur l’orientation des éléments forçant la lecture des différentes rubriques. Ce design reste une référence pour pas mal de webdesigner.

• Visiter le blog de Veerle

Aujourd’hui, l’apparence d’un site Web est un élément primordial qui peut fidéliser des visiteurs. Le look peut saisir l’utilisateur soit par la beauté de sa simplicité (Flickr pour ne citer que lui) ou encore par sa finesse et sa recherche du détail (le blog de Veerle en est un excellent exemple).

La réalisation web est devenu un exercice particulièrement périlleux au vue de la multiplication des supports de lecture (PDA, Lecteurs d’écran, systèmes d’exploitation) et c’est pourquoi il a fallu définir un certain nombre de conventions en quelque sorte.

On utilise le terme « Accessibilité » à tort et à travers mais de quoi s’agit-il exactement ?

Pour Tim Berners-Lee, directeur du W3C, l’Accessibilité c’est :

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.

Quelle jolie idée ! Sur le papier c’est pas mal mais sur le terrain, c’est une autre histoire. Le message est parfois mal compris.

Le fond et la forme

Le W3C est un consortium qui veille à ce que les pages web respectent plusieurs règles syntaxiques. Il a mis en place sur son site officiel un validateur de pages qui scrute les différentes pages à la recherche de l’erreur de syntaxe fatale !!! Mais beaucoup considèrent que si le site passe dans le validateur, c’est qu’il est accessible. Il n’en est rien.

Plusieurs balises ou informations importantes pour les lecteurs d’écran peuvent être insérées dans le code afin de le rendre plus accessible. Par exemple pour un tableau, il est recommandé de fournir une balise <caption> afin de lui définir une légende. Mettre des title= »" pour les balises de lien est également un reflex à avoir (j’avoue parfois, j’en oublie, suis-je pardonné ?).

La vraie révolution ces dernières années a été de passer au XHTML ! Enfin, on ne mélangeait plus dans le processus de création la structure et la présentation ! C’est à ce moment qu’on a pu constater la puissance des feuilles CSS. En reprenant le même squelette HTML, on pouvait modifier l’apparence totale avec deux feuilles de style. Toutefois, même si de plus en plus de concepteurs web tendent à apprendre CSS et XHTML, d’autres se bornent à poursuivre à réaliser des sites avec tableaux. Et le plus triste dans tout ça, c’est que parfois ces sites sont présentés en exemple. Sur Webcreme (un site que je fréquente régulièrement), j’ai pu découvrir l’horreur (j’en fais trop ?). Le 23 Novembre, Webcreme publie le site FOURIV qui est bâti uniquement sur des tableaux… Je me rassure en me disant que Webcreme ne s’est jamais défini comme un relais des techniques de créations XHTML/CSS mais plutôt comme une inspiration pour le design de site web.

Finalement

Faire du design web actuellement, c’est plutôt imaginer comment disposer les différents calques de manière à obtenir la plus jolies mise en page. Il ne s’agit plus de créer sa maquette sur Photoshop et de l’adapter sans réfléchir sur son éditeur html. Il y a un véritable travail de sémantique. L’ordre dans lequel seront disposées les différentes balises ne sera pas forcément l’ordre dans lequel les éléments apparaîtront sur la page. Par exemple, il est en général, plus convenable de placer le menu de navigation en haut de la page de code juste en dessous de la balise de titre principale (h1) même si sur la maquette du site web, ce menu apparaît sur le coté gauche, en dessous de la bannière.

Lors de la phase de conception, l’idéal, serait en fait, de bâtir dans un premier temps le code html nu sans feuille de style afin de réaliser une hiérarchisation du contenu et surtout organiser une certaine logique de la sémantique (oh ça rime !).

En tout état de cause, le design web n’est plus uniquement un souci d’apparence mais aussi une réflexion autour de l’intégration des éléments graphiques dans le code. Cela permet des rapprocher les codeurs et les designeurs et ça, c’est plutot une bonne nouvelle