Faire le webdesign de son blog gratuitement
5924
post-template-default,single,single-post,postid-5924,single-format-standard,qode-social-login-1.0,qode-restaurant-1.0,ajax_fade,page_not_loaded,,select-theme-ver-4.5,vertical_menu_enabled,menu-animation-underline,wpb-js-composer js-comp-ver-5.5.2,vc_responsive

Faire le design de son blog gratuitement

Tadaaa ! Un énième design du blog pour fêter le printemps. Ok c’est bientôt l’été, mais ici, ça ne fait pas longtemps qu’il est là, alors on l’apprivoise à peine… Le printemps à Montréal ça veut dire 2 jours de très beau temps à faire péter les barbecues et 2 jours de pluie pour pas que tu t’emballes. C’est bien la première fois que j’ai des bottes de pluie depuis des années. Et à Montréal, on ren-ta-bi-lise ! Mais j’aime ça. Les bottes, pas la pluie. Bref.

Webdesign : par où commencer ?

Donc le design ! Eh bien je ne vais pas vous mentir, il n’y a pas de secret. Si vous voulez faire un design personnalisé de votre blog, qu’il vous ressemble, tout ça, tout ça, il vous faudra : DU TEMPS.

Choisir le thème de son blog

Juste ça, c’est ce qui m’a pris le plus de temps. Bien choisir son thème n’est pas si facile. Pour ma part, je regarde surtout les fonctionnalités et les possibilités pour modifier le design. Pour voir ça, je télécharge le thème et j’ouvre la feuille de style (style.css). Puis là, faut avoir déjà fait un peu de code pour s’apercevoir si oui ou non on pourra modifier facilement le CSS. Si vous n’en avez jamais fait, vous vous en rendrez vite compte de toute façon et vous recommencerez à cherche un thème.
Je ne fais pas vraiment attention au design quand je choisis mon thème, car je sais que je vais tout modifier. Ce sont les propriétés des thèmes qui m’ont convaincues, plus que l’esthétisme, il y en avait des plus jolis ! Le thème précédent que j’avais utilisé était Halifax : http://demo.fabthemes.com/halifax. J’aimais beaucoup que les photos soient mises en avant. Après avoir modifié tout le design, j’avais même rajouté un 2ème menu, des widgets dans le footer… Vous-vous rappelez ?
screencapture-laulineafaitdesphotos-com-2
Puis j’ai voulu mettre un peu plus en avant le contenu, car si au départ mon « blog » ne devait être qu’un étalage de l’évolution de mes photos, il est vite devenu plus qu’une vitrine. Aujourd’hui mes articles se sont rallongés et je n’en finis plus d’écrire des mots. Alors j’ai choisi le thème Yegorhttp://demo.fabthemes.com/yegor. Ce qui m’a beaucoup plu dans celui-ci, c’est le carrousel (la bande violette sur la démo). Je me suis tout de suite dit que ce serait chouette de mettre en avant ma vie d’expat à Montréal. Encore une fois, je n’étais pas super fan du design, donc ça voulait dire + de travail pour arranger tout ça à mon goût, mais les fonctionnalités ont encore gagné !
Je viens de m’apercevoir que les 2 thèmes viennent finalement du même site, mais il y’en a des centaines, voir des milliers d’autres. Et ce qui est vraiment (vraiment) long, c’est de faire le tri. Vous pouvez en trouver de jolis pour WordPress sur WPExplorer, WPMarmite ou encore WPShower.

Créer un design qui vous ressemble

Là encore, ce n’est pas évident. Le choix est vaste et il existe une infinie de possibilités. Les indécisions m’ont tourmentées pendant plusieurs jours. Quand j’avançais de 2 pas, c’était pour mieux reculais de 3.

Ok le bleu c’est cool, mais j’aime bien le rose aussi. Les petits points, j’adore ça, mais les lignes aussi. Je voudrais un blog sérieux mais chaleureux, ou alors complètement fou ! Oh j’aime bien le traitement de tel blog et celui-là. Ou peut-être plus lui !

Si vous pouvez, trouvez une ligne directrice et n’en changez plus, vous gagnerez beaucoup de temps.
Mon blog en a déjà vu de toutes les couleurs en peu de temps, et les designs qui sont restés le plus longtemps sont finalement ceux que j’ai l’habitude de faire ou d’aimer. Je suis déjà partie dans des délires qui me plaisaient sur le moment, mais beaucoup moins 3 semaines après. Je vais presque chaque jour sur mon blog, alors c’est facile de se lasser. N’hésitez pas à faire dans la simplicité. Un design pas trop chargé et tout le monde y gagne 🙂
Pour ma part, je commence ma maquette sur Photoshop, pour voir le résultat plus rapidement. Mais des fois, je trouve ça plus rapide des faire des tests directement dans le code. Évidemment, des fois vous n’aurez pas le choix (pour le logo par exemple !).
logo_laulinea_900px

Rapidement, quelques petites astuces pour un design pas trop moche

  • 3 couleurs max
  • 2 typos max (Google fonts si possible) – PAS de Comic Sans MS
  • Limitez les effets graphiques (ombre portée + dégradé, ça fait beaucoup, vraiment beaucoup !)
  • Aérez !
  • Inspirez-vous… Sans copiez 🙂

Coder

Ah ah ! LA partie geek pour refaire son design gratos, c’est d’aller jouer dans le code de notre thème ! Vous n’en aurez peut-être pas besoin si vous voulez changer juste les couleurs et le logo car la plupart des thèmes incluent ces fonctionnalités dans le tableau de bord WordPress, mais si vous voulez plus, il va falloir passer par là ! Souvent les thèmes payants incluent plus de fonctionnalités pour personnaliser son design. Ça peut être un bon compromis si vraiment vous ne voulez pas mettre vos pattes là-dedans, mais renseignez-vous bien avant sur les possibilités.
Ça fait plusieurs années maintenant que je passe des nuits à refaire le design de mon blog ou de mon site pro, je suis totalement autodidacte et j’ai tout appris (enfin le peu que je sais !) grâce à Google ! Encore une fois, pas de secret, juste des heures et des heures à lire des tutos, à en lire d’autres, à chercher des solutions, à persévérer. Ce qui au début était très prise de tête est devenu aujourd’hui agréable. J’aime coder mes petites lignes de CSS, même si mon code n’est pas propre, pas parfait, ça marche et j’en tire une satisfaction indescriptible 🙂

Quelques petites astuces d’une totale amatrice

  • Travailler en local (directement sur votre ordinateur sans passer par internet), j’utilise MAMP. Tuto d’installation ici.
  • Pour voir directement le résultat du CSS, clic droit : Procéder à l’inspection de l’élément et écrivez le code là, puis reportez-le dans votre fichier quand vous êtes satisfaits
  • Tapez sur Google vos questions simplement. Au fur et à mesure, vous retiendrez quelques mots plus professionnels et vos questions deviendront de plus en plus précises.
  • Mettez en favori les sites les plus fiables. On trouve vraiment de tout et n’importe quoi sur le net. Des explications claires, simples et pédagogiques mais aussi son contraire. Alors ne lâchez pas vos sources ! Quelques sites : www.alsacreations.comwww.cssdebutant.comhttp://fr.openclassrooms.com

Prendre sa respiration et activer le nouveau thème

Ayé ! Tout marche en local, vous êtes méga content. Il faut maintenant publiez son thème pour de vrai ! Vous devrez passer par votre FTP, comme quand vous avez installé WordPress et le mettre dans le dossier wp-content/themes. Une fois votre thème activé sur votre tableau de bord, n’oubliez pas les petits ajustements comme les widgets à activer ou les images qui seraient restées en local (vous sentez le vécu ??).
Je crois que vous avez compris le principe, si l’on veut faire son design et ne rien débourser, il faut du temps (beaucoup), de la patience, se débrouiller seul et apprendre par soi-même. Et en plus, vous pourrez être fier de vous 😉
Et pour ceux qui n’ont pas de temps, les réticents au code ou les nuls en graphisme, vous pouvez faire appel à des professionnels, mais ça, ça se paye 🙂 (Et non un logo créé juste pour vous ne coûte pas 50€.)

Et voilà le résultat après 1 semaine de recherches-webdesign-code intensif :

screencapture-laulineafaitdesphotos-com-1
J’espère que ça vous plaira. N’hésitez pas à me signaler des bugs éventuels ou à me poser vos questions dans les commentaires.
Bonne semaine tout le monde !

Post a Comment

31 Comments
  • le bazar de Chloé

    22/07/2014 at 07:14 Répondre

    Ton design de blog est vraiment génial!
    Je suis actuellement en train de coder le mien en local mais pour commencer il sera très simple, j’ai pris le thème le plus simple et je le customise entièrement. J’ai mis tellement de temps à faire une maquette qui me conviennent vraiment complètement (je dois en avoir fait au moins 5 ou 6). C’est là qu’on se rend compte que c’est vraiment tout un métier!
    Belle journée à toi!

  • Milla

    15/07/2014 at 14:58 Répondre

    Article très intéressant, d’autant plus que peu de blogger (je trouve) expliquent comment ils procèdent…J’ai acheté le livre du site du zero sur le CSS/HTML et suis leur cours en parallèle sur openclassroom => c’est un miracle, je comprends enfin le CSS!! mais de la à réussir les modifs sur mon blog, c’est une toute autre histoire… le plus dur quand on utilise un modèle déjà pré-fait, c’est de savoir comment s’appelle chaque balise, et il y en a des tonnes… Je me suis demandée s’il ne valait mieux ne pas repartir de zéro carrément, je pensais que c’était comme cela que ton blog était fait.

    • Laulinea

      21/07/2014 at 20:30 Répondre

      Merci Milla !
      J’avoue des fois, quand je vois tout ce que je fais, je me demande aussi si je ne devrais pas commencer de 0. Mais finalement quand j’ai compris comment le thème fonctionne, ça me fait gagner pas mal de temps. Surtout que j’aime bien en changer (avec d’autres fonctionnalités :D) !

  • Kate

    11/07/2014 at 20:05 Répondre

    Salut Laurène !
    J’ai découvert ton blog il y a quelques jours grâce à anola-lemag, qui a parlé de ton article sur les iles 1000 îles. Depuis je viens lire tous tes articles ! Les photos sont magnifiques et la présentation du site est top !
    Tu t’es totalement sédentarisée à Montréal, ou bien tu penses faire un petit (ou plutôt grand) tour du Canada avant la fin de ton Pvt ? Tu vas essayer de rester là-bas ?
    Pour le moment, je me prépare psychologiquement à faire ma demande de PVT prochainement, c’est le côté wild et anglophone qui m’attire le plus de mon côté. Mais bon c’est pas pour tout de suite ( 1 à 2 ans) histoire de finir les études et d’économiser !
    Je profite de ton article pour te poser une question technique sur ton blog, j’essaye de créer le mien en ce moment, je suis en plein apprentissage des codes HTML/ CSS3, et vient alors la question de l’hébergement du site, je suis complétement larguée, et je ne comprends pas trop comment faire mon choix. Est ce que tous les hébergements sont aux alentours de 90e / par an ? Ca me démotive un peu …
    En tout cas, je te souhaite le meilleur pour la suite de tes aventures !
    A bientôt !

    • Laulinea

      21/07/2014 at 20:40 Répondre

      Hello Kate !
      Je suis ravie de savoir que tu aimes le blog !! Ça fait toujours chaud au coeur 😉 Et merci à Ann !
      Eh bien en fait, pas de voyage prévu pour le moment car j’ai obtenu mon JP (un autre visa pour les jeunes), donc je suis encore à Montréal pour 18 mois de + ! Après c’est encore loin, donc on verra…
      Je trouve ça fantastique tous ces jeunes (on dirait une vieille qui parle lol) qui souhaitent voyager après leurs études ! Il y a encore peu j’en aurais été incapable !
      Pour l’hébergement, je suis chez 1hebergement.com qui n’est pas très cher (4euros/mois), mais qui en ce moment commence à tourner au ralenti pour mon blog. Il va peut-être falloir que je change ! Pour mon site pro je suis chez 1and1.fr . Plus cher mais plus « connu ». Un peu le Orange de l’hébergement 🙂
      J’espère t’avoir aidé !
      A bientôt !

      • Kate

        15/08/2014 at 18:21 Répondre

        Merci beaucoup pour tes conseils, ça m’a bien aidé !

  • Céline

    09/07/2014 at 15:53 Répondre

    En tout cas c’est très réussi, ton design est sublime comme tes photos qui du coup sont vraiment bien mises en valeur, j’adore !

  • ju'

    30/06/2014 at 16:04 Répondre

    Hey ! J’adore ton nouveau design, il est juste parfait !
    Je suis en train de me créer un nouveau blog. Je commence alors tout juste sur WordPress. Hier j’avais réussi à installer un thème téléchargé sur un autre site mais la je vois qu’il y a eu une mise à jour et je nais plus trop comment faire. J’aimerais alors faire comme toi, le créer en local et l’installer après sur WordPress mais je n’ai pas vraiment compris comment on pouvait l’installer ??
    Merci d’avance =)

    • Laulinea

      30/06/2014 at 22:15 Répondre

      Est-ce que tu as suivi le tuto d’installation ? J’ai mis le lien, je me suis aidé de ça…

  • Aurelie H.

    18/06/2014 at 22:34 Répondre

    J’adore ton nouveau design, les couleurs, c’est clean, très lisible.
    Félicitation, j’espère réussir aussi un jour à me lancer.
    Des bisous
    Aurélie

    • Laulinea

      30/06/2014 at 22:10 Répondre

      Merci Aurélie ! Courage, si tu veux le faire, fais-le ! 🙂

  • Alexandra

    15/06/2014 at 23:49 Répondre

    Super article !

  • Lisa

    14/06/2014 at 13:17 Répondre

    J’adore ce nouveau design!!!! En fait, je remarque que tes designs ont toujours le même joli « look » rose et turquoise mais à chaque fois tu arrives à faire une tout nouveau mise en page qui change vraiment le design. Bravo! Je trouve fun de voir comment ton blog evolu depuis que j’ai commencé à suivre.

    • Laulinea

      17/06/2014 at 16:13 Répondre

      Merci Lisa 🙂 Oui c’est vrai que j’aime bien changer le fond des choses, l’organisation… Et même si mes goûts évoluent aussi, j’ai quand même des bases solides en choix de couleurs ahah 🙂

  • beauteo.net

    13/06/2014 at 11:04 Répondre

    Bonjour Laulinéa!
    Je suis sur ce projet actuellement et en grande recherche d’idées! Merci pour tes conseils qui vont me permettre d’avancer rapidement et objectivement. Difficile quand même avec tous ces thèmes plus beaux les uns que les autres!

    • Laulinea

      17/06/2014 at 16:11 Répondre

      Hello ! Je suis ravie si ça peut t’aider 😉 Bonne chance pour ton choix de thème… et pour la suite 😉

  • Isa

    12/06/2014 at 11:26 Répondre

    Très chouette ce nouveau théme , bravo !
    Pour ma part, je n’ai pas encore pris le risque de la faire moi-même, je sous traite 😉 mais le jour ou j’aurais le temps , je penche que j’essaierais de me concocter mon propre théme !

    • Laulinea

      17/06/2014 at 16:09 Répondre

      Merci Isa ! Ahah, je peux comprendre 🙂 Prépare-toi à passer des loooongues nuits 😀

  • Charlie

    09/06/2014 at 17:16 Répondre

    Sur mon téléphone (Google Nexus), c’est un peu la cata, le menu d’en haut (Home, About…) prend la moitié de l’écran et reste même quand on scrolle 🙁 sur PC en tout cas c’est nickel est très joli ! 🙂

    • Laulinea

      09/06/2014 at 17:20 Répondre

      Effectivement ! Je n’avais pas pensé au menu qui resterait collé en haut sur le tel ! Va falloir que je change ça vite, merci 😉

  • Aurélie - Just A Girl

    09/06/2014 at 17:11 Répondre

    Super! Le résultat est très joli, j’adore les couleurs que tu as choisies!
    Ton article me parle car je procède exactement de la même manière: j’ai appris à bidouiller toute seule (grâce au fameux clic droit > inspecter l’élément, notamment + lectures diverses sur internet): mon blog actuel d’abord (sous Blogger), et mon futur thème WordPress sur lequel j’ai commencé à travailler… D’ailleurs, il faut que je m’y (re)mette!
    A+ 😉

    • Laulinea

      17/06/2014 at 16:07 Répondre

      Merci Aurélie ! Ah ce fameux « inspecter l’élément », qu’est-ce que c’est pratique 🙂 Ton blog actuel est sous Blogger ?? On ne dirait pas ! Il est vraiment bien 😉 Bravo !

  • Crearine

    09/06/2014 at 14:14 Répondre

    Beau travail!!! Ta semaine n’a pas été vaine! J’aime beaucoup les couleurs et ‘organisation globale, c’est simple, c’est estival, c’est pratique!
    A+
    Karine

  • Ade

    09/06/2014 at 10:51 Répondre

    Super cet article ! Je m’y retrouve énormément. Je ne comprenais rien à wordpress et au design de blog il y a un an. Je savais les grandes lignes graphiques que je voulais lui donner mais pour mettre tout ça en place… J’ai demandé des conseils, regarder des tutos ! Aujourd’hui heureusement de nombreuses blogueuses proposent de l’aide aux autres pour ces parties « techniques ». Et quelle satisfaction d’ajouter un élément soi-même, de nouvelles fonctionnalités ou boutons pour simplifier la navigation, des widgets pour mieux gérer son blog. Je suis devenue accro aussi maintenant ! Comme quoi, on en découvre tous les jours sur soi-même 🙂

    • Laulinea

      17/06/2014 at 16:05 Répondre

      Félicitations Ade ! Ton site est très bien ! Et merci pour ton passage ici 🙂

  • Marie-Charlotte

    09/06/2014 at 10:38 Répondre

    Génial ton article Laurène! Et d’ailleurs je le lis sur mon cell, il passe très bien 😉 Bisous

    • Laulinea

      17/06/2014 at 16:01 Répondre

      Ah super ! Ça doit dépendre des écrans alors, il faudrait que j’uniformise tout ça 😉

  • Alex

    09/06/2014 at 07:50 Répondre

    Bonjour Laulinéa,
    Merci pour la citation de WP Marmite et félicitations pour le nouveau design de ton blog 🙂
    Bonne continuation
    Alex