Nous allons donc commencer une nouvelle série de tutoriels pour apprendre à créer soi-même le design de son blog. Ces tutos vont être sensiblement différents de ceux que l’on a pu faire jusqu’à présent parce qu’ici, on va faire appel surtout à la créativité et à un brin de marketing. Donc, pendant plusieurs articles, on ne parlera que très peu technique, et quelque part, je dirais tant mieux, parce que le côté créatif de la chose est certes beaucoup plus subjectif, mais c’est aussi de là que vient tout l’inspiration et c’est à partir de ça que l’on créera un design qui nous ressemble.
Alors, bien sûr, on va suivre une trame que j’aurai défini. Cette trame est calquée sur ma manière de travailler et de voir les choses. Je viens d’un univers artistique et créatif. Je vous montrerai donc comment je perçois la créativité. Ca peut être vraiment différent d’une personne à une autre, et d’une compétence à une autre. Un designer pense souvent très différemment que le développeur. Et ce, parce que nous avons appris les choses également de manière différente. Donc, ce que j’exposerai ici n’est pas forcément à suivre à la lettre. A vous de trouver le terrain qui vous convient le mieux. Je ne dis pas que ce que j’expose ici est la meilleure méthode qui soit. Elle est juste celle qui, pour moi, permet le mieux à la créativité de s’exprimer. Et certaines étapes, comme celle du croquis, font parties de ce processus.
Commencer le design de son site web sur son ordinateur, c’est comme construire une maison en commençant par le toit !
Ce n’est pas moi qui le dit, mais le célèbre designer Jason Santa Maria. Ne touchez pas encore à Photoshop. C’est trop tôt. Photoshop est un formidable outil qui va vous aider à mettre en pratique vos idées, et vous permettre de les perfectionner, mais commencer directement va tout de suite vous mettre sous la contrainte. C’est pour ça qu’il est toujours mieux de commencer avec un morceau de papier et un crayon. Et comme l’a dit récemment un autre designer, Jeff Croft, “tools do not a designer make“. Je vous conseille d’ailleurs de lire son article. Je ne suis pas entièrement d’accord avec ce qu’il dit mais certaines vérités sont criantes !
Alors, comment va-t-on procéder ? Et bien, ce n’est pas très difficile. Réfléchissez déjà à ce que vous voulez faire. Voici quelques questions à se poser:
- Je veux un blog pour faire quoi exactement ? Blog perso ? web 2.0 ? Politique peut-être ? Bien savoir ce que vous voulez faire va vous aider à savoir quel type de blog vous allez faire.
- Ai-je besoin d’un blog 1 colonne ? 2 colonnes ? 3 colonnes ?
- Placement de la ou des sidebars à gauche ? à droite ? de chaque côté ? 2 à droite ?
- Largeur du contenu ? Large ? Etroit ? Idem pour la ou les sidebar.
- Et mon header ? Haut ? Visible ? Lumineux ? Fin ? Idem pour le footer
- Une barre de navigation ? Je la place où ? Et la fonction “recherche” ? Est-ce que j’en ai besoin ? En haut ? A gauche ? A droite ?
J’ai lu il y a quelques jours un excellent article qui parlait de l’orientation de la lecture d’un site web. Par exemple, et pour vous donner une “référence” artistique, une peinture se “lit” d’en bas à gauche, vers le haut à droite. Donc, en gros, si vous voulez impressionner ceux qui regardent vos peintures, créez un visuel de couleurs qui va aller graduellement d’une couleur à une autre, en suivant cette ligne.
Pour ce qui est des blogs, c’est plus simple et plus logique, puisqu’on suit le sens de l’écriture. Donc, on va lire d’en haut à gauche, vers le bas à droite. Donc l’information doit se “diluer” progressivement vers le bas et vers la droite.
C’est pour ça que l’on trouve le titre et la description du blog en haut à gauche. Ensuite, en descendant, on trouve le contenu et ainsi de suite. L’auteur donc de cet article propose une façon simple d’aborder cette organisation:
Identité du site > Sections > Header de la page > Contenu > liens
En ce qui concerne nos blogs, je dirais plutôt quelque chose de ce genre-là :
Identité du blog > Navigation (Sections) > Header > Contenu > Sidebar (Liens) > Footer
Donc, maintenant qu’on voit globalement comment devraient s’organiser notre blog, et si on commençait un peu à dessiner ?
Un papier, un crayon et une gomme, y a rien de mieux !
Finalement, la créativité ne tient à pas grand chose non ? Il va juste falloir réussir à faire les premières lignes. Les autres suivront sans aucun problème. Laissez votre inspiration vous guider. Ca n’a pas besoin d’être parfait, ce n’est qu’un croquis, qu’une première idée.
Ici, on est très loin de la technique et bon nombre de personne ont tendance à zapper ce côté “ludique” et créatif pour attaquer directement la maquette sur Photoshop. C’est pour moi une erreur. L’étape du croquis est libre de toute contrainte technique. Elle doit être prise comme une sorte de brainstorming. C’est le moment où l’on couche les premières ideés.
Pour commencer, on va donc dessiner les contours des parties principales du blog, histoire d’avoir une première ébauche d’architecture. On commence par dessiner la page web, puis le header, le contenu, la ou les sidebar et enfin le footer. On part ici du principe que l’on garde le même style sur les différentes pages du blog. Si vous voulez une page d’accueil customisée façon CMS ou magazine, il vous faudra penser plusieurs pages.
Vous devriez donc avoir un truc simple comme ça:
Jusque là , il faut uniquement tenter de placer les bons éléments aux bons endroits. Mais, une fois encore, ce n’est rien de définitif, loin de là ! Et heureusement d’ailleurs ! 
On commence juste à placer des éléments, histoire d’avoir un premier visuel à partir duquel on va pouvoir travailler. Ca va également nous permettre à mieux “voir” les besoins et les envies pour le design.
L’inspiration est partout. Pensez à toujours avoir un carnet et un crayon avec vous, ça peut servir!
Là , je prêche un peu ma paroisse mais je vous jure que vous pouvez avoir des idées à n’importe quel moment, en voyant n’importe quoi, n’importe où. Donc, un stylo et un papier vous sera toujours utile. On peut avoir une idée à n’importe quel moment. Alors, “couchez-là ” avant qu’elle ne disparaisse. L’inspiration peut donc être à chaque coin de rue…. mais aussi et surtout sur le web !
Passez un maximum de temps à gauche et à droite pour découvrir de nouveaux sites web. Pas forcément besoin que ce soient des blogs. N’importe quel design de site web peut vous inspirer. Et là encore, le carnet vous aidera, ainsi que Delicious !! 
Je vous donne donc quelques sites de référence qui ont justement pour but de référencer les plus belles réalisations sur le web:
- We Love WP, galerie de blogs sous Wordpress et aux designs uniques,
- Logopond, si vous souhaitez créer un logo,
- Most inspired, qui regroupe les meilleures galeries de design web,
- Unmatched style, autre site proposant les plus beaux designs de sites web,
- CSSleak, le petit français de la bande !
Déjà , avec ça et votre inspiration personnelle, vous devriez pouvoir vous amuser pour un petit moment…
Alors, bien sûr, vous allez me dire que tous ces designs sont superbes, mais que vos compétences en Photoshop ne vous permettront pas d’arriver à un tel résultat ! C’est pour ça que je vous ai dit plus haut de ne pas commencer en travaillant directement avec Photoshop. Si vous ne maîtrisez pas bien l’outil, vous allez freiner votre créativité. Ici, on cherche des idées, originales si possible. Restez ouvert à tout et laissez votre imagination s’exprimer, sans contraintes techniques.
Donc allez-y, griffonnez, surfez, explorez ! Exprimez-vous !
Dans le prochain tutoriel, on continuera la phase “papier” mais on commencera à structurer le tout. On lui donnera une première forme, des dimensions et on commencera à penser aux différentes contraintes techniques liées principalement aux CSS.
![[]](http://m3.moostik.net/img/?pseudo=fran6art&option=invisible)
Une petite question après un tutorial passionant lequel je suis sûr en annonce une série tout aussi passionante : aurais-je besoin de posséder Photoshop pour la suite ?
Maigret > C’est préférable, ou alors utiliser Gimp…
Maigret > T as une version demo de Photoshop valable 30 jours. �a peut être utile
Fran6 > Merci pour le lien CssLeak et félicitation pour cet article.
De rien, c’est tout à fait normal !!
Ok vu que ça m’intéresse je pense qu’il serait souhaitable d’utiliser Photoshop. Par contre, je possède Fireworks 8, évidemment cela ne convient pas dans le cas présent non?
Fran6 > Un début de tutorial plutôt bien réussit mais j’ai déjà dépassé cette étape j’attends la suite: l’intégration ! ; ) Je suis totalement impatient de pouvoir enfin réaliser ce que je souhaites sans passer par la bidouille ! Bon courage !
Maigret > je pense que Fireworks sera nécessaire également notamment pour créer des rolovers !? Mais tout comme pour Photoshop, il existe une demo de 30 jours…
Début d’une série de tutorials qui m’a l’air très intéressante et passionnante. Merci Fran6
Depuis que j’ai découvert Visio et OmniGraffle j’ai abandonné le papier pour faire cette étape. Ces outils sont redoutables notamment pour prévoir les diverses pages.
Merci à vous pour votre soutien. Pas facile d’engager ce genre de série. Dès lors qu’on sort de la technique, c’est moins évident de décrire les choses de manière simple et pédagogique.
Bertrand > Tu triches !!
nan, je rigole… Tu pourrais nous en dire plus sur l’utilisation que tu fais de ces softs ? Merci d’avance ! 
Petite rectification :
une image ne se lit pas dâ??en bas à gauche vers le haut à droite mais du haut droit vers le bas gauche en zig zag.
http://www.absolut-photo.com/c.....ompo_5.php
Très bonne initiative avec cette série de tutos.
En général, je trouve qu’on ne prêche pas assez la méthode “crayon + papier”, donc ça fait plaisir de voir que d’autres l’appliquent et en font la promotion ^^
boudj > En fait, c’était pour la lecture des peintures que je parlais du bas à gauche vers le haut à droite. C’est pour les blogs que je disais de haut à gauche vers bas à droite. Mais c’est vrai que pour la lecture on aura tendance à aller en zigzag. Merci pour ce lien très instructif !
Une petite question subsidiaire : pour créer design est-il plus pratique d’utiliser la souris ou une tablet PC ?
“tablet PC”, tu veux dire palette graphique, c’est ça ?
Moi j’en utilise une depuis 2 ans environ et je trouve que c’est beaucoup plus précis. Maintenant, pour tout ce qui est illustration, donc travail graphique, c’est vraiment très très utile, et pour ce qui est du découpage en vue de l’intégration aussi. Malgré tout, on s’en sort très bien aussi avec une souris. Tout dépend de ce que tu veux faire…
Oui c’est exactement ça. En fait, je pensais peut-être m’en acheter une mais si une souris suffit alors…
Commence avec la souris et tu verras par la suite. Avoir une tablette graphique c’est vraiment top mais faut mettre un minimum pour en avoir une bonne…
OK sinon une bonne c’est dans les combiens ?
Moi je commence par un crayonné sur des post-it’s. Des dessins mais aussi un paquet de calculs pour arriver à un bon rapport entre les différents éléments. C’est seulement après que vient Photoshop, c’est vrai. A la souris, pas de tablette graphique. ^^
Maigret > regardes combien valent les Bamboo de Wacom ou s’il existe encore des graphite. Tu peux sûrement en trouver sur eBay à pas trop cher. Moi j’ai une Intuos3 A5, mais ça vaut déjà 300 euros…
Bon je pense qu’il préférable que je m’en tienne à ma souris
et moi j’ai investi dans un écran tactile wacom
sensations incomparables, même saut que le passage d’une souris à la palette simple.
Il est long le Fran6, il est long !
Merci beaucoup pour les tutoriels en tout cas !
Ps: serait-il possible d’expliquer le fonctionnement avec Gimp, pour ce qui n’ont pas Photoshop ??!
Jérémy
Jérémy > Long dans quel sens ?? Pour ce qui est de l’utilisation de Photoshop, je ne connais pas Gimp, je ne peux donc pas vous proposer des tutos dessus… désolé…
Long à nous faire profiter de la suite ;p
Pour ce qui est de Photoshop, je vais donc télécharger la démo !
Merci, et à bientôt pour le nouveau tutoriel j’espère
Désolé Jeremy, je fais aussi vite que je peux. Je suis déjà très occupé par ailleurs donc… et puis celui-ci est sorti depuis un moment !
A très bientôt
depuis ce matin j’ai fais tous les tutos pour wordpress, j’ai hate de découvrir la suite. Merci Francis pour ce travail si difficile, mais très bien réalisé. Je suis un vrai débutant et je suis tout fier d’avoir pu réaliser tant de choses :’)
Pour les utilisateurs Mac, voici un petit logiciel gratuit - PIXELSTICK - qui leur sera bien utile pour calculer les distances sur leur écran et pour définir ainsi les largeurs des “sidebars”…
http://www.pixelatedsoftware.c.....index.html
Salut Francis, je voudrais deja dir bravo pour ton site où j’ai trouvé beaucoup d’informations interessantes!
C’est en faisant une recherche pour savoir comment il était possible d’intégrer une police exotique dans un theme WP personnalisé que j’en suis arrivé ici. (pour ne pas décrocher ensuite!) Aborderas-tu le sujet dans ce prochain tuto?
Merci pour tes explications!
NCA
NCA > Et bien, tu ne crois pas si bien dire parce que je vais faire un article ou plutôt un tuto là -dessus d’ici une semaine ou deux…
Salut !! Merci beaucoup pour les tutos Wordpress Css/Php ça m’a beaucoup aidé !
Tout comme Jack je m’impatiente :p je sais utiliser photoshop et j’ai déjà fait créé un template, maintenant il faut que j’associe chaque “bloc” à sa fonction… Mais je sais pas comment faire :/
Allez bon courage ! @+
Bonjour et un grand merci pour tout ces tutos!!
Gros boulot pout tout rédigé!!
tiens! j’ai un petit probleme.
lorsque j’essai de laissé un commentaire, le message d’erreur suivant s’affiche:
Warning: Cannot modify header information - headers already sent by (output started at C:\wamp\www\wordpress\wp-content\themes\creation theme\functions.php:2) in C:\wamp\www\wordpress\wp-includes\pluggable.php on line 390
Mais le comm est quand meme pris en compte
Ca c’est sûrement une histoire de plugin qui fout la m**** …
c’est bon c’est parti tout seul….
Sinon, tu avais parlé d’enlever le titre du blog sans le supprimer dans le code source.
il me semble ne pas l’avoir vu expliqué dans un tuto.
jul > Ca fait partie des tutos à venir
cher francis,
bon boulot et très intéressant…j’attends comme tout le monde, je pense, la suite du tuto avec photoshop…. parce que mon croquis est pret depuis des semaines!!!
Moi aussi j’attends la suite avec impatience
Merci pour toute cette superbe série de tutoriels!!! J’ai adoré, et j’en parle du coup beaucoup autour de moi! Même si je n’ai pas réussi à créer le design de mon blog (on attends tous la suite avec impatience
j’ai compris l’architecture, l’organisation de Wordpress, et ça me permet de bidouiller beaucoup plus facilement.
Félicitation, et courage pour la suite!
Salut !
Je ne suis pas encore arrivé à ce tuto mais je vois qu’il date d’il y a lontemps, donc je me demandais ( et j’espère ) si les prochains tutos arriveront rapidement ?
Merci !
Freak-Geek > Les tutos sont presque prêts. Maintenant, difficile de dire quand je vais les publier. Tout dépendra de mon emploi du temps… Mais je pense que Juillet devrait être une date convenable ! Désolé pour ne pas avoir continué mais la vie a pris un autre tournant depuis Novembre et je n’ai que très peu de temps pour moi et pour bloguer, donc tout prend plus de temps !