Canal Jazz

Musique & Graphisme le blog de Doukyo.

[Guide] Webdesign

Avant d’avoir toute la communauté qui me tombe sur le coin de la tronche, je précise que je ne suis qu’un amateur, et ce qui va suivre ne vient que de moi et des choses que j’ai pu glaner ici et là sur l’interweb. Je ne dirai pas que ce que je montre c’est ce qu’il faut faire absolument, mais en tout cas ça m’aide pour commencer un webdesign. Si vous avez des remarques, reproches ou autre, les commentaires sont là.

L’inspiration

La première étape, pour moi, est de trouver l’inspiration. Ça parait con à dire mais c’est vrai, on ne se lance pas bille en tête dans un webdesign, il faut avoir une idée de ce qu’on veut trouver à la fin. Bon je dois bien dire que j’ai la mauvaise habitude de faire prendre des virages à 90° à ma réal’ quand je la réalise, mais souvent je sais ce que j’aurai à la fin, au moins au niveau des formes et des couleurs.

Quelques sites pour trouver l’inspiration :

Petit conseil, faites fonctionner votre imagination à fond ! Le design offre assez de possibilités pour pouvoir se détacher de ce dont on s’inspire, ne vous mettez pas de carcan dès le début, il y aura assez de choses pour vous limiter par la suite.

Les couleurs

Il faut ensuite décider de quelles couleurs sera composé notre design. C’est vraiment, vraiment important, c’est ce qui donne son ambiance à un site, et si elles sont mal gérées, le site perdra tout intérêt et pourra même dégouter les visiteurs (il ne faut pas oublier qu’un webdesign est aussi là pour faire rester les internautes).

Il faut choisir ses couleurs en fonction du thème du site, un site sur le hardrock en rose bonbon le fait moyen, tandis qu’un site pour des produits de luxes sera plus dans des tons noirs/gris. Cependant, on peut aussi se laisser aller avec des couleurs dont on n’a pas l’habitude, afin de donner une touche unique au design. Cela reste un choix personnel dans la réalisation, et il faut voir si on sera capable de tenir le pari d’un site avec des couleurs n’allant pas habituellement avec le thème, mais qui passera pour les visiteurs. Voici un petit site qui permet de s’initier rapidement au “Color Branding”, à savoir ce que signifie le plus souvent l’usage de telle ou telle couleur : Seosmarty.

Pour ça, il existe plusieurs méthodes et sites pour nous aider :

  • Le cercle chromatique, qui est utilisé depuis un bout de temps et qui permet de trouver une ou plusieurs couleurs qui sont harmonieuses ensembles (un site qui explique assez bien : MLB Design).
  • La deuxième méthode, toute simple, est de regarder des sites déjà construits et de voir leurs couleurs, cela offre l’avantage d’avoir un aperçu de ce que va donner le mélange des couleurs au final, et donc d’éviter de se planter lamentablement (un site assez utile qui recense des sites webs en fonction de leurs couleurs : Netcocktail ).
  • Enfin, la troisième méthode que j’utilise beaucoup est de choisir sa couleur principale, puis de monter les autres couleurs soit automatiquement (grâce à ce site), soit en cherchant des ensembles déjà définis de couleurs (kuler et colourlovers).

Il faut vraiment garder à l’esprit que les couleurs sont importantes, et prendre le temps de les choisir correctement, sinon on risque de se planter de A à Z par la suite.

Les croquis

Maintenant, on sait ce qu’on veut faire, et dans quelles couleurs. On pourra presque dire que la moitié du chemin est fait. Une bonne habitude à prendre est de faire des croquis, cela permet de fixer son idée et d’éviter d’oublier des éléments par la suite, et aussi de tester son idée, qui peut paraitre excellente dans sa tête, mais une fois réalisée ne pas être adaptée du tout. Cela permet aussi de commencer à réaliser des logos qui sont également très importants dans un site (surtout lorsqu’on réalise un design avec la communication de l’entreprise qui va avec). Je dois bien admettre que je fais rarement de croquis pour un webdesign entier, mais pour les logos, cela reste un passage obligé, ne serais-ce que parce que je suis plus à l’aise avec un crayon que ma tablette graphique pour dessiner.

La résolution du design

Problème assez épineux pour tous les webdesigners. Dans quelle résolution je réalise mon design? Je pars sur du 800*600 pour convenir  tout le monde? Mais ça ne va pas poser problème à ceux ayant de plus grandes résolutions?

La meilleure réponse que j’ai trouvé à ce jour est faire un design fluide, s’adaptant parfaitement à toutes les résolutions que ce soit en hauteur, largeur ou taille des polices. Je ne développerai pas plus, Alsacréations a fait un dossier très complet et très intéressant sur le sujet ici.

Pour les autres voulant faire un design fixe, je ne peux pas donner de réponse, c’est un choix du graphiste, mais aussi de son commanditaire, le 800*600 ne représente plus que 5% de la population, mais peut on se passer de 5% de visiteurs potentiels? Pour se faire une idée, vous trouverez des statistiques ici (sur les navigateurs utilisés, les résolutions d’écrans ainsi que les OS). Personnellement, je réalise mes designs fixes en 950*700, cela me permet de convenir aux résolutions en 1024*768, tout en évitant qu’ils aient des scrollbars à cause de tous les menus, barre d’outils et autres.

Conclusion

J’achève ce “guide” ici. Il ne reste que la réalisation du design à faire, et son intégration. Cependant, dernier conseil, pensez lorsque vous créez votre design à réfléchir au code qu’il y aura derrière, il est très très simple de partir sur des design “omagad ça tue sa raaace”, mais une fois qu’on doit l’intégrer, on se retrouve à se demander par quel bout commencer. Et c’est frustrant de ne pas pouvoir utiliser son design à cause de ça. Très frustrant. Comment ça, ça sent le vécu?

Now playing : Nine Inch Nails - The Fragile

Tags: ,

7 commentaires pour “[Guide] Webdesign”

  1. Fishbed dit :

    J’ai vraiment de la merde dans les yeux. En me levant, j’ai cru que c’était un “guide Wolfenstein”…

  2. Doukyo dit :

    C’est pas une heure pour se lever.

  3. Hellkeeper dit :

    En parlant de design : le fait que les liens sur ton blogs soient exactement identiques au texte normal, ça les rend pas super pratiques.

  4. Doukyo dit :

    Ouai je vais régler ça, une petite seconde.

    EDIT: Voilà.

  5. Hellkeeper dit :

    Merci :)

  6. nico dit :

    J’ajouterai ces adresses comme sources d’inspiration, d’intérêt :

    - Smashing Mag’
    - PSD Tuts
    - creattica
    - injection

    Ces sites contiennent d’autres adresses à visiter.

  7. Doukyo dit :

    Ton lien pour injection ne marche pas, j’ai en revanche ajouté les autres (PSDTut je connaissais, chui con de pas avoir pensé à le rajouter…)

Laisser un commentaire

Si vous avez un compte sur WeFrag, connectez-vous pour publier un commentaire.

Vous pouvez, entre autres, utiliser les tags XHTML suivant :
<a href="" title="">...</a>,<b>...</b>,<blockquote cite="">...</blockquote>,<code>...</code>,<i>...</i>