Francis Chouquet Lettering + Logo Design

de Photoshop à WordPress #1: le croquis, première partie

0

Update: plutôt que d’écrire un nouvel article sur le croquis, je préfère réactualiser celui que j’avais déjà écrit il y a pas mal de temps mais qui est toujours d’actualité. Qui plus est, je ne suis pas sur que beaucoup d’entre vous l’aient lu donc le voici mis à jour et republié à la date d’aujourd’hui avec les commentaires d’origine que je vous invite à venir compléter ! 😉

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 un jour 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, vous allez dessiner une esquisse de la page d’accueil. Bien entendu, si vous n’y faîtes pas apparaître grand chose d’original, ce croquis n’aura pas grand intérêt. Essayez donc justement d’être un peu plus créatif sur certaines parties du blog comme l’entête, le fameux « header ». Pourquoi ne pas y prévoir une image ? Et vous allez placer votre barre de navigation à quel endroit ? Au dessus du titre du blog ? entre le titre et le contenu ? Vous verrez rapidement qu’un croquis n’est pas uniquement là pour faire un schéma d’ensemble du design de votre blog mais aussi et peut-être surtout pour en dessiner certains aspects. Donc, laissez vous aller à un peu de créativité !

Si vous arrivez à un truc comme ça, vous n’allez pas en tirer grand chose… 😀 :

croquis.JPG

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 !

Il existe également des applications ou de sites web qui vous permettent de prendre des instantanés ( « screenshots » ) de pages web et de les garder dans un coin pour vous aider à trouver l’inspiration le jour où vous allez vouloir dessiner un site web. Comme site, il y a le très connu Scrnshots.com où vous pourrez stocker tous vos screenshots. En applications, il y a le très bon LittleSnapper sur Mac OSX qui vous permet aussi de partager vos découvertes via FlickR ou leur site propre, QuickSnapper.

Screenshot de mon LittleSnapper avec de jolis sites !

Screenshot de mon LittleSnapper avec de jolis sites !

Enfin, je vous conseille ces deux articles en anglais qui vous donneront quelques exemples de croquis mais qui aussi vous apprendront à mieux tirer profit de ce temps passé à griffonner:

Donc, cherchez l’inspiration partout où elle se trouve. Pour le moment, ne vous limitez pas techniquement, que ce soit par rapport à vos compétences en Photoshop ou en WordPress. Laissez votre créativité s’exprimer et trouvez une manière originale d’afficher votre header, votre footer, les titres de vos articles, ou encore vos commentaires !

Dans le prochain tutoriel, je vous montrerai des exemples précis de croquis que j’ai fait pour différents sites mais aussi pour le thème que l’on va réaliser ensemble ici ! Rendez-vous donc au prochain numéro et d’ici là, n’hésitez pas à poser vos questions, et à montrer vos croquis ! 😉

100 Commentaires

  • 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 !! :mrgreen: 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.

  • Jérémy

    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é…

  • Jérémy

    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

  • Fusuke

    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 :’)

  • Jack

    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

  • NCA

    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 ! @+

  • jul

    Bonjour et un grand merci pour tout ces tutos!!
    Gros boulot pout tout rédigé!!

  • jul

    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**** …

  • jul

    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 ! 😉

  • Pannouf

    Salut,

    Bravo pour ces super tutos. Tous fonctionne. J’ai commencé designer ma page sur Photoshop. A quand la mise en ligne de la suite ?

    A +

  • Pannouf > C’est prévu pour Septembre !! 😉

  • Merci Francis pour les Totos, enfin j’ai réalisé mon premier theme grace à vous, il fonctionne trés bien.merci à vous.
    Ps:
    je vois que le feuille de style concerne a ceux qui écrivent de gauche a droit comme le français par exemple, mais pour ceux écrivent de droite a gauche ils sont obligés de faire un grand éffort pour changer les positions (régle rtl).
    maintenant comment en fait pour relier le graphisme au blog ?

  • adabwebmaster > Comme je l’ai mentionné plus haut, j’ajoute la suite des tutos courant du mois de septembre ! 😉

  • Monsieur Francis je vous remercie, je suis entrain de traduire les totos en arabe, votre permission est très utile pour moi. Merci.

  • Adabwebmaster > Tu peux le faire mais tu dois mettre un copyright avec un lien vers mon blog sur chaque page de tutoriel ! 😉

  • voilà ! Le premier article est déjà en ligne, Quand Francis parle en arabe! 🙂

  • Benjamin

    Je ne sais pas si tu te rends compte, mais des centaines de webmasters sont là, suspendus à tes lèvres, pour enfin pouvoir poursuivre la suite de leurs jolis thèmes 🙂

    Merci pour tout ce que tu as déjà fait, c’est d’une clarté que l’on retrouve rarement ailleurs, et pourvu que tu aies un peu de temps pour poster le reste… Courant septembre 😉

  • Cyril

    Vraiment sympa tes tutos, bien clairs etc..

    A quand la suite de cette série ? j’ai plein de question pour créer mon propre thème 😉

    A bientôt

Success, your comment is awaiting moderation.