L’idée – Créer un thème (WP) en 2018 – 1/3

Pour ce blog tout nouveau tout beau, il fallait que je recolle le thème au « personnal branding » Epistol, même si un peu délaissé depuis quelques temps, j’utilise le thème Lovecraft pour le moment qui fait un bon fallback pour l’instant.

Etape 1 : – Avoir une idée de thème

Avoir une idée de thème, c’est comme celle d’avoir un blog, c’est pas la partie la plus simple.  Que faire alors ? Plutôt horizontal ? Plutôt le contraire ? Sur un format 3/6/3 ? Ou un simple 3/9 ? Qu’est-ce que ça veut dire ? 

Si on veux créer le design d’un thème, on prend les références du marché actuel : Bootstrap et ses 12 colonnes se sont imposés dans le monde du design comme du développement depuis des années : il faut alors découper son site verticalement selon autant de colonne voulue.

Etape 1.bis : Trouver l’inspiration

Du coup sans trop d’idée, il vaut mieux aller voir ce qu’il se fait de mieux en terme de design et suivre les tendances de l’époque (tout en gardant ses propres goûts).

Voici quelques pistes pour celles et ceux qui en souhaiteraient (vous pouvez bien sûr proposer vos propres ressources en commentaire, j’affinerais la liste en conséquence) : 

On remarques plusieurs tendances : l' »offset » des éléments et du contenu, des titres avec des fonts assez grosses, des typos serifs qui ne sont plus combiné avec du sans-sérif et des bloc background qui se réalignent avec le contenu au fur et à mesure, ce qui contredit la tendance du premier point plus haut.

Etape 2 : Listing

Pour commencer le sketching, il faut définir le contenu du site et ainsi les placer à la vue de l’utilisateur sans jamais les perdre. C’est tout l’objectif du design :  le visuel au service du contenu.

Je commence ainsi un petit travail de listing : 

  • Page d’accueil : 
    • Articles
    • Menu avec liens importants (accueil, catégories, cv, contact, réseaux)
  • Catégories
  • Articles (complets et liens « en passant »)
  • // Sidebar (déjà présente)
  • Contact

Le nombre d’article est limité à 10 pour ne pas surcharger la page, puisque chaque article sera affiché en entier (jusqu’à une certaine longueur, mais en général, en entier).

Chaque article comporte :

  • Un titre
  • une image en avant
  • une date de publication et de modification
  • le contenu
  • les sources
  • partage réseaux
  • commentaires
  • tags
  • catégorie

Etape 3 – Sketching

Pour entamer un sketching, sachant que ce n’est sans doute pas mon point fort, je ne peux que vous conseiller de vous renseigner mais de mon expérience personnelle : 

  • soit vous commencez à sketcher sur papier
  • soit directement en qualité basse sur un logiciel dédié

Puisque je ne sais pas du tout dessiner, encore moins sketcher sur papier, je part sur la deuxième option avec Adobe XD (Sketch étant réservé à iOS).

Pour faire mon choix de couleur rapide, j’utilise Coolors qui me génère une palette restreinte de couleur (j’incorpore celle de mon logo en premier puis génère le tout) et obtiens ceci au bout de plusieurs essai : 


(Et une palette scss pour plus tard dans notre thème WordPress.)

Dans Adobe XD, chargeons la librairie « Kit de prototypage » pour se donner des éléments de base pour faire notre low-res prototype, que je vous propose de retrouver dans le prochain article et ainsi réaliser la version « high-resolution » dans la foulée.