Etant très attaché au design des sites web, j’ai bookmarké depuis plusieurs années un nombre important de sites dont le design ou l’ergonomie me plaisait plus que d’autres.
Je me réserve d’ailleurs chaque jour un peu de temps pour partir à la recherche de nouveautés, que ce soit dans mes lectures de blogs favoris, que sur le site killerstartups.com qui regorge de nouveaux sites web tous les jours.
Ainsi, lorsque je démarre un nouveau projet (je vous présenterai un autre jour mes anciennes réalisations), j’aime retourner naviguer sur l’ensemble de ces sites pour trouver une idée par-ci par-là, même si celà peut prendre des heures et des heures. Ce n’est qu’après cette étape fastidieuse terminée, que je commence la maquette du site en utilisant mon outil favori : Macromedia Firework.

voir la maquette en taille réelle

Pour koorteo, la réalisation de la maquette que je vous présente ci-dessus m’a pris 2 bonnes semaines et est composée des parties suivantes :

1) le Header :
tout d’abord un bandeau sombre au top de la page pour passer quelques informations :
- à gauche : message de bienvenue + le choix de la langue,
- à droite : un lien permmettant de faire connaitre le site à ses amis (important car ce sera l’une des méthodes de buzz importante)
- plus tard, au centre, sera ajouté des liens pour suivre koorteo sur twitter, facebook ou sur le blog.

Puis dans la zone du haut du bloc central, sont présent le logo à gauche (qui sera le sujet d’un prochain article) et les liens habituels de connexion et d’inscription à droite.

Enfin, le menu horizontal composé d’une large bande sombre dégradée, comportant les différents liens du site qui seront peu nombreux, accompagné du lien « mon Compte » à droite sur fond vert. A noter la présence, sous forme de bulle, de l’information de gratuité au dessus du menu lié au service proposé sur koorteo.

2) Au centre :
Pour la home page, toute la largeur du bloc est utilisé. Pour le reste du site, une bande à droite d’une largeur de 270 pixels sera réservée pour diverses mini-blocs :
- le sous-menu de la partie « Mon Compte »
- un bloc publicitaire interne pour inciter les internautes à recommander le site à leur entourage
- une zone publicitaire verticale qui ne sera pas ouverte aux annonceurs extérieurs mais sera réservée à une des différentes catégories des utilisateurs du site (top secret pour l’instant).

La partie gauche sera donc naturellement utilisée pour les informations essentielles et parfois personnalisées du service.

3) le Footer :
rappel du contexte avec un mini-logo de koorteo à gauche et avec à sa droite les liens dits de « société » et le copyright 2009 en dessous. J’ajoute que si le besoin (ou l’envie) se fait sentir de présenter les liens dits « société » sous la forme de plusieurs blocs verticaux – comme cela se fait de plus en plus en ce moment – ce sera possible. Dessous, une définition de koorteo en 3-4 lignes à gauche et à droite, les liens pour suivre koorteo sur twitter, facebook ou sur le blog.

Dimensions :
volontairement, j’ai décidé de ne pas proposer une largeur trop grande pour permettre à (presque) tout type de résolution de voir le site sur sa largeur sans utiliser la barre de navigation horizontale (ou presque). Pour information, la population des seniors ne doit pas être négligée pour ce site. De plus, pour garder une maitrise sur l’affichage de toutes les zones, j’ai abandonné la possibilité de rendre la largeur dynamique en fonction de la résolution des internautes.
J’aurai aimé me rapprocher au maximum de la résolution 1024×800 pixels mais ne souhaitant pas abandonner complètement la résolution 800×600 pixels puisque souvent utilisée par la catégorie des seniors, j’ai décidé de retenir une largeur intermédiaire de 900 pixels. Ainsi, pour les personnes encore sous 800×600 pixels, un léger glissement de la barre horizontale de 50 pixels sera nécessaire pour voir l’ensemble du site dans sa largeur, et pour ceux utilisant d’autres résolutions, le site n’apparaitra pas de façon trop restreinte comme cela aurait été le cas avec une résolution de 800×600 pixels. C’est un choix discutable mais c’est mon choix

Codes couleur :
Généralement, les sites de voyages s’orientent vers des couleurs chaudes, le bleu pour la mer et souvent le orange ou le rouge pour le soleil, la chaleur, évoquant le plus souvent les vacances.
Puisque le concept de koorteo est novateur, j’ai voulu me démarquer de ces codes couleur pour marquer ma différence mais tout en gardant un style épuré, sobre et pouvant tout de même évoquer les vacances.
Les deux couleurs principales du site sont donc le gris foncé et le vert plutôt flashi qui pourrait rappeler la nature et la campagne. Le vert étant aussi une couleur à la mode en ces temps de dérèglement climatique où la recherche du tout écologique atteint son paroxysme. On remarquera aussi la présence d’un bleu dégradé dans le header pour la petite touche « voyage » tout de même.

Un commentaire, une suggestion sur cette maquette ? J’attends vos retours !

Je rappelle notamment que je ne suis pas du tout designer de formation, des avis de professionnels de la profession lol seraient donc les bienvenues. Merci à vous !