• L
  • M
  • M
  • J
  • V
  • S
  • D
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

Je ne sais pas vous, mais quand un site me plait j'aime le décortiquer pour comprendre comment le Webmaster si est prit pour le concevoir. Alors si vous êtes comme moi, curieux de nature, je vais vous faciliter un peu le travail en vous narrant comment d'un simple projet on peu arriver à un design complet.

Le projet.

J'en avais un peu marre de mes sites qui naissent un jour, vivent quelque temps puis s'éteignent. Un peu le cas de passion-figurine.com qui naquit afin de me permettre de partager ma passion pour la figurine, puis le hasard à voulu que j'ai du faire l'impasse quelques temps sur cette passion et fermer passion-figurine.com sans pour autant me séparer du nom de domaine. Résultat, pendant prêt de 2 ans j'ai financé un site qui aboutissait sur une simple page blanche car il n'avait plus aucun suivit de ma part.

De ce fait, j'ai pris la décision de créer un tout nouveau site qui ne soit pas dédié à un sujet spécifique (Comme la figurine), mais qui soit plus généraliste afin que je puisse aussi bien parler de figurines, jeux vidéos, ou tout autres sujets comme la photos, le développement Web,... Finalement, un site que je pourrai faire vivre au gré de mes goût du moment.

Le choix d'un nom de domaine.

Choisir un nom de domaine n'est guère facile, et après 666devilsun.com où à l'époque j'étais jeune et le chiffre 666 me plaisait bien,... puis passion-figurine.com, il me fallait un nom de domaine qui soit à la fois "ouvert", c'est à dire qu'il ne soit pas dédié à un sujet unique (C'est par exemple le cas de passion-figurine.com où finalement je me voyais mal parler d'autre chose que de la figurine sur ce site) ; et qui n'ai pas un caractère religieux, satanique, ou autres (Un peu comme 666devilsun.com où finalement le visiteur hésite à deux fois avant de venir le visiter, se demandant s'il ne va pas mettre les pieds dans une secte).

Je me mis alors en quête d'un nom de domaine qui puisse convenir à n'importe quel sujet et se fut par un pur hasard que je suis tombé sur la définition d'Avalon sur wikipedia.org, et après lecture de cette définition je me suis dis et après tout pourquoi pas ?

Avalon est une île sacrée où résident la fée Morgan, la Dame du Lac, Merlin, etc. Finalement une île qui doit être pleine de secrets aussi divers que variés. Pourquoi ces secrets ne seraient-ils pas les différents sujets qui seront évoqués sur le site ? De plus, accéder à Avalon requière une initiation, il faut être capable de traverser un labyrinthe marécageux et on peut vite faire le lien avec la toile Internet (Ou Web) qui est un véritable labyrinthe où l'on a vite fait de se perdre sans trouver se que l'on y cherche. Je me suis dis banco ! Avalon va devenir mon île sacrée où ceux qui réussiront à y accéder pourront y partager mes secrets.

Restait à acquérir le nom de domaine, mais là cela se corse... Vous vous doutez bien qu'avalon.com est déjà prit tout comme le .org et le .net. Mais après avoir jonglé avec le mot Avalon et divers autres mots comme "porte" (J'avais envisagé "Les portes d'Avalon"), "portail" et enfin "île", je me suis décidé pour ile-avalon.com et ileavalon.com qui étaient tout deux disponibles.

Choix d'un design

Vient l'étape du design et de la mise en page du site. L'idée de base consiste à dire que le site n'aura pas qu'un design mais plusieurs. L'objectif est de faire en sorte que les rubriques importantes du site aient leur propre design afin qu'elles soient plus en rapport avec le sujet traité. Mais avant même de m'occuper du design de chaque rubrique, il est important de s'occuper du design du site en général, c'est à dire du design de l'île Avalon.

Je me dois de rester généraliste, bien qu'Avalon soit une île sacrée et associée à la légende Arthurienne, il importe que le site n'ait pas un caractère trop prononcé avec la mythologique celtique et la légende d'Arthur. Il me faut donc rester plus traditionnel dans le choix du thème graphique qui va égailler le site, tout en gardant une pointe de magie afin de ne pas faire totalement abstraction de la légende.

Une île...

J'ai dans l'idée de faire une bannière d'entête avec une île en toile de fond. Et cela ne pouvait pas mieux tomber car venant d'acquérir un nouvel appareil photo, me voilà arpentant les paysages côtier de ma région en quête de l'île légendaire. Mais au hasard de mes recherche, j'ai l'occasion de prendre un arbre en contre-jour, et après mure réflexion je me dis qu'après tout le visiteur une fois sur le site est supposé être sur l'île, il ne peut donc la voir, mais il peut par contre voir l'horizon et cet arbre en contre-jour avec la mer en arrière plan se porte très bien pour être la base de ma bannière d'entête.


La photo à l'état brut

S'en suit une étape de traitement de l'image, car avant de l'exploiter il me faut la nettoyer. J'opère à diverses corrections comme le vignetage, la déformation chromatique, l'éclaircissement du premier plan, l'accentuation du fond marin dans la partie dite "brûlée" de la photo, la suppression des tracés des avions, etc. N'oublions pas que l'image sera à terme utilisée dans une résolution écran, donc en 72 dpi, le but n'est donc pas d'avoir une photo prête à l'impression, mais d'avoir une image "propre".


La photo après traitement

Maintenant que ma photo s'avère nettoyée, je peux commencer à l'intégrer dans ma bannière. Mais avant ça, il me faut décider de la dimension de cette bannière d'entête. Je prend la décision de faire un site de taille fixe, en l'occurrence le site va faire 955 pixels de large afin qu'il soit compatible avec l'ensemble des navigateurs existant et cela dans une résolution d'écran de 1024 par 768 (Aujourd'hui, on peut penser que la plupart des internautes sont dotés de cette résolution, l'aire des 800 par 600 est maintenant révolue ou en passe de l'être). Je vais donc travailler sur un espace de 955 pixels de large, mais j'étends mon espace de travail à 2000 pixels de large car je prend en compte les utilisateurs qui auront une résolution supérieure à 1024 par 768. Pour ces derniers il me faut me demander que vont-il voir au delà des limites gauche et droite du site ? Pour la hauteur de la bannière d'entête, j'opte pour 300 pixels, cela s'avère beaucoup mais nous somme dans une résolution de 768 pixels de haut et j'envisage d'avoir certains éléments du site qui vont mordre sur cette bannière.

Bien évidemment, après avoir redimensionné ma photo, il s'avère qu'elle n'est pas suffisamment large pour occuper les 955 pixels de large prévus. Je vais donc "tricher" et étendre la mer. Une fois fait, et mon image en place dans l'espace de travail, j'en profite pour créer les bordures du site afin de délimiter la bannière d'entête du corps du site.

Mais un œil averti pourra voir que j'ai \"triché\" en étendant la mer afin d'agrandir mon image, pour lui compliquer la tâche je vais donc habiller cette zone d'un effet artistique. Rien de vraiment compliqué puisqu'un quadrillage et quelques dalles qui se détachent suffisent. J'en profite pour y ajouter un cadre qui sera destiné à recevoir l'image du jour (Du moins c'est l'idée première, mais après coup j'ai plus dans l'idée d'y mettre un bandeau des nouveautés ou un bandeau publicitaire). Vous noterez au passage que cet effet artistique va déborder de la limite des 955 pixels prévue à l'origine. Là on pense à ceux qui ont une résolution qui va au delà des 1024 par 768.

Vient ensuite l'insertion du titre, je reste simple avec un titre en deux étages et quelques effets de couleur et de lumière. Mais je met ce titre en même temps que l'emplacement pour le menu horizontal, du coup je m'arrange pour les imbriquer et le menu horizontal va empiéter sur le A de "L'île Avalon" du titre. Enfin le titre projette son ombre sur la zone dédié au texte, d'ailleurs cette zone comporte quelques dalles que je vais atténuer afin qu'elles n'empêche pas la lecture.

Comme je l'ai dis précédemment, 300 pixels pour une bannière d'entête cela s'avère quand même grand, le calendrier va donc mordre sur cette bannière. Quand au menu vertical, ce dernier se contente de suivre le calendrier et je lui associe des effets visuels très basiques puisqu'il passe au rouge quand on le survole avec la souris, le tout entièrement réalisé en CSS et HTML (J'ai tendance à me passer des gadgets et autres menus Javascript, il faut rester dans l'idée que le Javascript peut ne pas être présent ou être désactivé sur le navigateur du visiteur du site. Le site se doit de rester opérationnel sans la présence du Javascript.). Le plus gros des effets étant au niveau du menu horizontal. Dans mon plan de travail je vais donc placer un menu fictif avec une représentation de l'effet de survole pour m'assurer que cela ne jure pas avec le reste du design.

Arrivé à ce stade, je considère que le design est terminé et que je peux maintenant passer à la découpe et la mise en place de différents éléments dans leur environnement réel, en l'occurrence une page HTML. Mais pourtant quelque chose me gène et j'éprouve une sensation de vide dans la partie qui se trouve au dessus du calendrier. Je trouve que cet espace jure avec l'espace occupé par la mer. Un côté de la bannière est travaillé et comporte un effet artistique et finalement l'autre côté est vide...

J'en viens à penser que ce serait bien si je pouvais tout simplement occuper cet espace vide par un personnage, de préférence féminin pour évoquer la fée Morgane ou pourquoi pas Viviane, la Dame du Lac. Mais n'étant pas photographe professionnel et n'ayant pas de modèle pour poser pour la photo, je me trouve devant une impasse : Comment intégrer une personne humaine sans que cela soit illégal ni compliqué ? Et oui, gardons à l'esprit qu'il faut une autorisation pour poser la photo d'autrui sur un support, que ce soit un support papier ou un site Web. Je me tourne alors vers les professionnels et en particulier les photos dites "libres de droit", photos qui servent généralement dans la publicité mais qui sont bien évidemment payantes.

Après une recherche sur Google et le terme "photo libre de droit", je finit par tomber sur fotolia.fr, une banque d'images colossale et des tarifs plus que raisonnables (A partir d'1€ la photo). Me voilà à parcourir les différentes photos jusqu'à trouver mon modèle. Mon choix initial va finalement se porter sur l'image #4078355, puis après avoir parcouru les photos du même model je réalise que la #4036298 est peut-être plus adapté au contexte : Le regard est mieux orienté tout comme la personne.

Bien évidemment, l'image comporte un fond qui ne convient pas, seul le personnage m'intéresse, s'en suit donc un travail de découpe de la personne pour l'extraire de son contexte original et la placer dans son nouveau contexte. Là, attention car la législation sur les photos libres de droit est assez pointilleuse, on peut modifier une photo mais cela ne doit pas porter atteinte au modèle. Je ne pense pas qu'extraire la jeune femme de son cimetière pour la placer prêt d'un arbre puisse lui porter atteinte ;-)

Voilà qui est fait, mais cela n'est pas terminé pour autant car maintenant j'en ai après mon menu vertical, lui aussi me semble vide et j'ai en mémoire une photo du même modèle, en l'occurrence la #4078369. Je me dis que cette photo utilisée telle qu'elle avec juste une prolongation de l'encadrement de l'arcade sous laquelle se trouve le modèle pourrait très bien habiller mon menu gauche.

Cet fois c'est bien terminé, il me reste à définir un bas de page car la plupart des navigateurs ne gèrent pas la notion du 100% en hauteur de site, et je ne peux lui définir une hauteur fixe car cette dernière dépendra du contenu de la page. Je vais donc créer un délimiteur de bas de page.

Enfin j'ajoute en entête de page un mini bandeau avec le nom du site, cela semble faire double emplois avec la bannière d'entête mais il faut garder à l'esprit que tout ce design est voué à disparaître suivant la rubrique consultée. Ce mini bandeau lui sera toujours affiché afin que, quelque soit la rubrique où l'on se trouve et donc le design affiché, on ait un rappel que l'on est toujours sur l'île Avalon...

Voila qui termine la partie dédiée à la recherche d'un design et son élaboration, reste maintenant à découper chaque élément et à l'insérer dans une page HTML, mais cela est une toute autre histoire :-)

A suivre avec la 2ème partie du Design d'île Avalon, une partie plus technique, et la 3ème partie du Design d'île Avalon, un aperçu de différent designs que l'on peut découvrir un peu partout sur le site ile-avalon.