Canal Jazz

Musique & Graphisme le blog de Doukyo.

Articles taggés avec ‘webdesign’

[Guide] Webdesign

Vendredi 24 juillet 2009

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

Webdesign : DyCrea [MAJ]

Samedi 18 juillet 2009

Et un nouveau webdesign, qui devrai me servir pour mon portfolio :

Bon je me tâte encore beaucoup pour la zone de contenu… J’avais pensé à un truc comme ça :

Mais bon ça passe pas des masses. Enfin on verra pour la suite, là faut que j’accélère le rythme de production, c’est pas comme si j’avais un book à faire pour mi-août.

(Ah au fait, ça a été réalisé sur mon laptop qui a eu sa carte graphique de cramée, me demandez pas comment ça peut encore fonctionner, j’en sais rien. Asus, le laptop avec des vrais bout de saint esprit dedans.)

MAJ :

Suite aux avis reçus, voilà la nouvelle version

Now playing : Miles Davis - Kind of Blue

Nouvelle CSS

Lundi 6 juillet 2009

En voilà une zoulie nouvelle CSS ! Bon OK y a encore des bugs que j’arrive vraiment pas à corriger (espace en haut de la page, “Rechercher” pas à sa place) et des petites choses que j’aurai aimé pouvoir faire (transparence), mais bon.. Bref.

Voilà à quoi ça aurai dû ressembler :

Si vous avez des idées pour améliorer/débugger/autre, hésitez pas.