Tutoriel - Le design pour les newbies - Part. 1
Comme promis (et non sans retard
), le tutoriel pour voir la démarche (théorique) pour la création d’un design, d’une charte. En gros, c’est ce qu’on m’a appris à l’école. J’ai choisi de présenter un thème de blog sur lequel j’ai travaillé pour Guyhom.
Pour bien commencer, il faut se nourrir de ce qui se fait ailleurs. Je ne le répèterai jamais assez. Mais regarder ce qui se passe ailleurs, c’est se donner des idées qui, combinées entre elles, donneront votre design. De mon point de vue, il n’y a plus rien à inventer, tout a déjà été inventé, il reste plus qu’à combiner (pour preuve, la mode et son cycle infernal).
Ces sources d’inspiration peuvent être de diverses natures. Il ne faut pas forcément que ce soit un site. Ca peut être un graphisme, une pub, une photo, peut-être même une musique, une ambiance, un film ! Que sais-je ! Ca peut être plein de choses qui vous donnent des idées.
Le blog pour lequel je fais un design est un blog collaboratif. L’idée en gros c’est que les visiteurs écrivent une histoire. Guyhom m’a demandé que le blog soit agréable à lire, aéré et sans colonne avec les archives.
Tout d’abord ce que j’ai cherché à faire, c’est rassembler des idées sur ce que le blog m’inspire. Les premières choses qui me sont venues à l’esprit, ce sont l’école, le travail d’écriture et un côté vintage qui rappelle les vieux livres. J’ai donc commencé une planche de tendance. La planche de tendance, c’est une image qui reprend les grandes lignes de l’orientation graphique d’un travail (visuels, polices, couleurs, brosses, textures…).
Voici donc le résultat de mes recherches :
Le crayon et la gomme rappellent l’école et un travail d’écriture. Ca symbolise les recherches, la réflexion avant une écriture définitive (au stylo bille ?). Le tag sera utilisé pour illustrer les tags du billet, il a un côté vintage, vieillot. Côté police, je n’en ai choisi qu’une seule : Georgia. C’est pas forcément celle qui est la plus lisible à l’écran (surtout si elle est petite) mais elle a aussi ce côté vieillot du à l’empatement (contrairement à Arial, Verdana, Trebuchet MS, Tahoma etc). Toute une palette de brosses est utilisée soit pour rappeler le travail d’écriture (avec les textes manuscrits), soit pour tâcher/vieillir le document. La photo choisie est juste là pour illustrer un article, j’ai cherché un portrait noir et blanc, un peu intemporel (bien que le design de la tasse trahisse la modernité). Enfin les couleurs : toujours pour rester dans un style vintage, j’ai repris les tons qu’on peut retrouver sur les vieilles photos et puis les couleurs du vieux papier un peu jauni par le temps.
Suite au prochain numéro. ![]()





Le 7 octobre 2006, Stéphanie dit :
Mais, heu… Pourquoi on voit pas du tout ça sur le site de guyhom ?
Trop tardé à publier ton tutorial et il a changé de charte entre temps ? ^^
Le 7 octobre 2006, Vinch dit :
Perso, je trouve qu’on inventera toujours ! Reprendre des éléments existants et les combiner peut donner quelque chose de nouveau, donc c’est une invention.
A l’époque, comment faisaient les peintres pour inventer de nouvelles couleurs ? Ils mélangeaient des couleurs déjà existantes…
Le 7 octobre 2006, la lène dit :
Stéphanie > C’est pas pour son blog perso.
Le 7 octobre 2006, Izem dit :
J’aime beaucoup la façon dont tu rapporte ta façon de proceder, et a coup sur, cela eclaircit (un peu) mes idées sur la chose. J’attend la suite du tuto ou meme le travail fini avec impatience
bravo !
Le 7 octobre 2006, zélia dit :
hé hé madame, comme je te l’ai déjà dit, je prendrais ce thème pour mon blog, fière utilisatrice des thèmes made in la lène !
Le 7 octobre 2006, la lène dit :
Zélia > Le thème ne sera pas distribué. C’est pour le site collaboratif que Guyhom est train de faire.
Le 7 octobre 2006, Jean Claude Attitude dit :
La méthode que tu expliques, notamment “la planche de tendance” c’est ta technique ou cela fait partie de tes apprentissages d’école de webdesign ? Pour ma part je suis totalement autodidacte est pourtant que ce soit pour la création de logo comme de site, j’utilise cette méthode, comme un peintre prépare sa palette de couleur
Le 7 octobre 2006, la lène dit :
C’est une méthode que j’ai apprise à l’école.
Le 7 octobre 2006, Dart dit :
Trop forte la lène !
“Beau coup de crayon”
Le 7 octobre 2006, Jean dit :
Merci pour ce tutoriel. Je suis autodidacte et pas vraiment designer même si je pense ne pas avoir à rougir de mes mise en pages web. Je m’intéresse beaucoup à la typo. Je ne trouve pas que la Georgia fasse vieillot. Du moins ça dépend du contexte, ça fait aussi “classe” à cause des empattements justement…
Le 8 octobre 2006, br1o dit :
Je sens je vais utiliser cette “planche de tendances” sous peu

Vite ! la deuxième partie
Le 9 octobre 2006, Jean dit :
Je viens d’apprendre qu’en français “design” se traduisait par “stylique”. C’est ‘achement mieux ! “Stylique pour néophytes” ?
Ben oui. C’est vrai. Tu as du style. Suffit de voir les pages que tu nous sors…
Le 9 octobre 2006, la lène dit :
Merci Jean
Le 9 octobre 2006, Guyhom dit :
Il y a beaucoup de projets entre mes bras. Il est certain que celui-ci sortira et que ce design a une place qui l’attend au chaud
Le 10 octobre 2006, Gilles dit :
Coucou!
Ce tutoriel est très bon, bien formulé. La suite est bien sûr prometteuse. Mias j’ai une petite question:
Pour les images que tu utilises sur ta planche tendance, elles sont libres ? Si oui, où les trouves-tu ?
Merci!
Le 10 octobre 2006, la lène dit :
Oui elles sont libres. Tu en trouveras sur http://www.istockphoto.com (pour 1€/photo), http://www.fotolia.fr (même tarif environ) et sur http://www.sxc.hu (gratuites). Il ya d’autres sites qui en fournissent mais j’ai pas tout sous la main.
Le 10 octobre 2006, Cédric dit :
La lène, tu m’épattes, t’es trop forte ! J’ai hâte de lire la suite
Merci déjà pour cette première partie de tutorial.