Comment concevoir un thème #wordpress, 1/5 | De la maquette au prototype, A Unix Mind In A Windows WorldIl y a fort longtemps – plus précisement 3 ans – que je m’étais promis d’écrire un tutoriel sur la création de thèmes pour le CMS WordPress. Quant à mon site web personnel, j’ai arrêté de compter le nombre d’années depuis lesquelles je dois finaliser sa migration de Drupal (version 7) à un cms plus léger (en l’occurence WordPress).
Je vais donc faire d’une pierre deux coups, en publiant une série de 5 billets sur la création d’un thème WordPress.
Je commencerais avec la conception de la maquette, puis je poursuivrais avec l’intégration web, l’intégration du CMS WordPress, la gestion des contenus et du référencement et enfin les aspects relatifs à la sécurité de WordPress .
J’avais prévu de faire une retransmission en direct pour les points 1 à 3 , mais il se trouve que la qualité de la connexion que j’utilise actuellement ne le permet absolument pas . En lieu et place,  je documenterais donc les étapes par des captures d’écran et des intégration de code .
Sur ce commençons.

La maquette 

En ce qui concerne, Sketch a supplanté Fireworks, Photoshop et Gimp . Il est véloce, polyvalent, conçu pour la conception d’interface utilisateur et surtout a un coût moins elévé que Photoshop et Fireworks (qui a certes été abandonné par Adobe, mais qui se vend toujours sur le site web de la compagnie).
Il a cependant le désavantage majeur de n’être disponible que sous MacOS – mais cela n’est pas un problème en soi, étant donné qu’il est possible d’installer MacOs sous Windows –
Je ne vais pas réinventer la roue – je n’en ai pas le temps – et vais me baser sur un template sketch qui traîne depuis quelques mois sur mon disque dur.
Vous pouvez le télécharger ici . On l’explorera plus en détail lors de la prochaine étape , promis 🙂

Enfin, si vous utilisez Gimp ou … soupirs … Photohsop, vous pouvez télécharger le fichier pdf éditable ici.

Les polices utilisées sont MontSerrat et Open Sans, toutes les deux disponibles au téléchargement gratuit sur Google Fonts.

Le prototype

Le prototype diffère de la maquette dans le sens où il apporte une certaine interactivité , en combinant les différentes images de votre maquette et y ajoutant des « hotspots » , qui jouent le rôle de liens hypertextes d’une images à une autre. 
L’utilité d’un prototype est qu’il permet de donner un aperçu du site web à votre client et d’obtenir son feedback avant de se lancer dans la phase de programmation. 
Personnellement, mon choix sur le sujet se nomme Marvel. 
Ci dessous le prototype de la maquette présentée à la phase précédente . Cliquez sur les liens des réseaux sociaux ou sur ceux du menu pour interagir avec ce dernier.


 Si votre navigateur n’accepte pas les iframes, vous pouvez directement vous rendre sur la page du prototype ici

Nous verrons comment transformer tout cela en un site web responsive de 4 pages, avec – éventuellement – une navigation ajax la semaine prochaine.

 Jean Luc Houédanou