Préparer une structure et un wireframe

Un thème wordpress se réfléchit sur base de templates, on l’a vu. Construire un thème demande donc d’avoir compris les différents templates accessibles et d’en jouer pour répondre àla demande. A partir de là, on réfléchit àla structure de chacun de ces templates, généralement sur base de wireframes avec du papier et un stylo.

1/2 | Suivant

Identifier les besoins

Lors de réunions préparatoire, il faut évidemment identifier le besoin auquel répondra le site. Typiquement, notre site est un portfolio de graphiste.
On aura besoin de :
 définir les compétences de celui-ci,
 de montrer l’activité récente,
 de montrer des productions liées aux différents champs de compétence,
 permettre le contact via un formulaire,
 renvoyer vers les réseaux sociaux
Le design du site doit être en accord avec les choix esthétiques que défend notre graphiste. Ici un design simple, voire minimal, mais orienté sur le contenu et élégant.

Identifier la structure

Un site possède toujours une page d’entrée, qui est en général la page la plus complexe àconstruire, puisqu’elle contiendra - en plus d’un header et d’un footer - différents contenus piochés dans la base de donnée.

Typiquement : la baseline du site, quelques productions récentes mises en avant, un certain nombre de contenus liés àdes catégories précises.

A partir de cette page, le menu et les différents éléments de cette page vont pointer vers des contenus spécifiques, typiquement des pages, des posts et des catégories.

Préparer les wireframes de ces différentes page sera donc la première mission.

Voici une mise en page assez simple.

On commence par une vue du template affichant un article :

Puis on réfléchit aux autres gabarits principaux : le template des catégories et la page d’entrée du site.

(L’idée ici est de proposer un premier cas d’intégration et de développement, il n’y a rien de compliqué àréaliser en Wordpress donc)

Identifier les templates

Ce site étant simple, il va demander le développement des templates de base de Wordpress que sont
 home.php : le template de la page d’entrée
 single.php : le template des articles (post)
 page.php : le template des page (typiquement une page "a propos"
 archive.php : le template par catégorie

On doit alors répondre àquelques question spécifique au web :
sur les écrans larges, comment se disposent les contenus ?
 occupent-ils tous l’espace de la page de gauche àdroite ?
 limitent-ils leur taille en se centrant dans la page ?
 limitent-ils leur taille en restant sur la gauche ?

Quelques détails graphiques ou spécificité de navigation peuvent alors être pensés. Typiquement :
 un choix radical de typo ou de couleur,
 une disposition de la navigation particulière (dans l’espace, dans la manière dont elle apparait (survol, clic, etc)
 un accès aux infos particulier (au hasard, muet, ou au contraire par saturation)
 un méthode d’affichage des images (très grandes, très petites, colorisées, avec un effet d’apparition/disparition, etc)

Trop de détails nuisent àla lisibilité et rendent le site brouillon, voire compliqué àmaintenir dans le temps. Tout le monde n’a pas le temps de redévelopper un site tous les 6 mois, faites des choix qui peuvent tenir un an ou deux au moins. Évitez les trucs àla mode, ils seront démodés rapidement.