Le mois dernier nous avons abordé les premières étapes pour réaliser le template d’un site internet. Je reviens aujourd’hui sur la deuxième partie de cette article pour vous expliquer comment maintenant mettre en forme le graphisme.

Une fois que vous vous êtes imprégnés des tendances du moment, vous allez commencer par prendre un papier et un crayon afin de poser vos premières idées. Inutile de vous embêter à prendre une règle pour faire de beaux trais bien droit, le but n’est pas de faire une oeuvre d’art mais d’aller dans la rapidité en établissant le squelette global que le site possédera. Beaucoup de personne ne prennent pas assez en compte cette étape du croquis papier,  car ils  trouvent ça trop contraignant, et n’offrant pas un rendu réaliste de suite.

je dirais que fondamentalement on en a rien à faire que ça soit beau ou pas… on veut juste savoir comment va s’articuler le site, ou se trouvera le menu, les blocs de pub. Est ce qu’on mettra un carrousels pour rendre le site plus dynamique quel largeur fera le site, mais aussi la partie rédaction etc etc… Il faut vraiment se sortir de la tête toutes notions de couleurs ou de graphismes poussés et aller à l’essentiel. Vous vous rendrez compte par vous même qu’au file du temps vous y gagnerez en efficacité et en rapidité.

Une fois que le squelette du site est posé sur le papier vous allez pouvoir l’étoffer de quelques graphismes pour le rendre plus à votre goût. C’est aussi dans cette première partie du travail, avant d’informatiser le tout que le web-designer va prendre en compte les trais de découpage pour l’intégration.  Quoi intégration ? c’est quoi ça ?

Le web designer et l’intégration :

Tous web-designer doit connaître un minimum le langage HTML et CSS. Pourquoi ? Pour de multiples raisons mais plus particulièrement par-ce-qu’il est la base de tous site internet, mais aussi pour éviter les prises de tête avec les codeurs et ainsi de devoir refaire moulte fois un travail qui n’est pas intégrable. Je m’explique : Pour que votre beau graphisme soit réalisable il faut respecter certain code afin qu’une fois découpé en petits morceaux, le tout puisse être recomposé facilement..

Il est aussi impératif que le web-designer détermine bien la finalité du site, un site vitrine nous permettra plus de fantaisie qu’un site dynamique.. Alors si vous voulez vous lancer dans le webdesign attention a comment vous allez vous y prendre ne faite pas un truc impossible à découper.. Prenez le temps d’y réfléchir pendant cette étape de croquis papier.

Informatiser le croquis du template:

Vous voilà maintenant avec votre feuille et vos coups de crayon. Il est temps maintenant d’informatiser tous ça. Pour ce faire je vous conseillerai d’utiliser un logiciel de dessins ou de vectorisation. Chaque web-designer le fait sur le logiciel qu’il veut, que ce soit Photoshop, Illustrator, Fireworks. Pour ma part j’utilise Fireworks qui est l’un des plus adapté au monde du web. C’est tous simplement un parfait mélange entre illustrator et Photoshop. Il vous permettra ensuite de positionner vos trais de découpage et d’exporter le tous en PNG.

Petits conseils du web-designer :

Je vais vous donner quelques conseils en matière de découpage.

  • Segmenter trois morceaux distinct : le Header, le Corps, et le Footer
  • Eviter de découper en zigzag… ça ne sera pas possible a intégrer!
  • Si vous avez un fond dégradé, ou motif qui ce répète, faite juste une petite bande avec le motif, le codage se chargera du reste.
  • Eviter le plus possible la transparence, certain ancien navigateur ont encore du mal avec
  • Faite des images légères
  • Utiliser des couleurs qui vont ensemble !! ça va de soit.

Information complémentaire sur les croquis :

Voici deux sites qui illustre comment bien passer d’une croquis a une maquette numérique.

La suite de l’article bientôt :)