All For Design

Le processus de création d’un blog est souvent long et fastidieux. Celui-ci ne déroge pas à la règle puisque j’ai passé environ 2 mois à travailler d’arrache-pied après mes heures de travail pour créer « All For Design ».

Je souhaitais consacrer une page à la méthodologie, aux sources d’inspiration et aux moyens utilisés pour créer ce blog.

Méthodologie

Comme je le disais en introduction, il faut du temps pour créer un blog pour peu qu’on veuille le personnaliser entièrement. En général, lorsque je crée des sites (web ou wap), ma méthodologie est la suivante :

• Phase de recherche et de benchmark : le client, le marché, la concurrence.
• Définition des objectifs : but du site, quelle image, quelles cibles etc…
• Wireframe : mise en place des zones de contenu principales
• Premier Feedback du client et ajustement si besoin
• Réalisation de la charte graphique si elle n’existe pas
• Création de la maquette graphique : Homepage + 1 à 2 pages de contenu
• Second Feedback du client et ajustement si besoin
• Réalisation de la maquette graphique des autres pages du site
• Validation de la Phase 1
• Découpage des éléments graphiques
• Intégration xhtml/css
• Phase de tests multi-navigateurs : j’ai pour habitude de développer sur Firefox et de vérifier ensuite la compatibilité sur : IE6, 7, (maintenant 8), Safari, Chrome.
• Validation de la Phase 2 avec le client et correction si besoin

Mon travail s’arrête normalement à cette étape. C’est là que je passe la main aux développeurs qui vont dynamiser les pages. Il arrive que j’apporte quelques corrections par la suite car la dynamisation du contenu peut parfois engendrer des petits soucis de mise en page.

Revenons à la création de ce blog. Il est bien évident que je n’ai pas été aussi loin dans la méthodologie pour deux raisons. D’une part, c’est un blog et non un site. J’utilise Wordpress qui remplace toute une équipe de développeurs et je suis mon propre client, ce qui me fait gagner beaucoup de temps. D’autre part, le travail effectué sur ce blog est avant tout un loisir. Je suis donc beaucoup moins strict dans le processus de création.

Voici les étapes que j’ai suivi :

• Travail de recherche et d’inspiration
• Réalisation de la maquette graphique de toutes les pages du blog
• Découpage des éléments graphiques
• Travail d’intégration xhtml/css
• Ré-écriture de tous les articles du blog, mise à jour des images
• Phase de test inter-navigateurs, mise en place des css alternatifs pour les navigateurs plus anciens

Recherche et Inspiration…

Pour commencer, des recherches sur le web ont été nécessaires afin de combler mon manque de connaissances de Wordpress. Je me suis très vite aperçu de la force de cet outil. On peut effectivement tout faire ou presque sur Wordpress. J’avais également à portée de main un livre qui m’a beaucoup aidé : « Wordpress, toutes les clés pour créer, maintenir et faire évoluer votre blog » de Francis Chouquet.

Je savais que je souhaitais un blog assez « graphique ». J’ai donc parcouru le net à la recherche de sources d’inspiration. Voici quelques-uns des sites qui m’ont inspiré pour créer ce blog :

Le travail de création graphique

Après avoir fait ce travail de recherche, j’ai ensuite pu créer mon propre template graphique à l’aide de Photoshop. C’est durant cette phase de création que j’ai défini ma charte graphique : couleurs, polices, mise en page etc… Cette phase a été assez longue. J’ai fait de nombreux essais avant d’obtenir un résultat qui me convenait.

J’ai choisi les polices en respectant certaines règles : Verdana pour le texte car cette police se prête particulièrement bien au web. Pas de serif pour une meilleure lisibilité, et pas ou peu de pixellisation. Même si elle est « banale », cette police a le mérite d’être très propre et très lisible sur un moniteur.

Pour les titres, j’ai choisi une police avec Serif dans un but plus esthétique. Là encore, j’ai préféré utiliser Georgia, une police accessible à tout le monde (ou presque).

Le titre principal a été créé avec une police que j’aime particulièrement : Romeral créée par Juan Pablo De Gregorio.

Toutes les photographies utilisées pour créer le thème proviennent du site « SXC » et sont libres de droits. Les icônes qui m’ont servi à agrémenter le design proviennent de Smashing Magazine, du site de Rogie King Komodo Media et de l’excellent blog Productive Dream.

L’intégration

Le choix de cette plateforme a été motivé par ma curiosité et mon envie de découvrir cet outil de plus en plus utilisé. Aussi, la possibilité de modifier le code source pour créer mon propre thème de A à Z m’a semblé être une option intéressante dans ma démarche créative.

Comme vous pouvez vous en douter, la prise en main a été longue et fastidieuse, surtout pour un non-développeur comme moi. Heureusement, Wordpress est extrêmement bien documenté sur le net. Avec ce CMS, chaque problème trouve une solution sur le web!

Je ne vais pas lister tous les plugins que j’ai installé mais simplement ceux qui m’ont été très utiles : All in One SEO pour optimiser le référencement, contactform7 pour les formulaires de contact, WP Security Scan pour sécuriser votre blog et Live Comment Preview pour afficher les preview des commentaires.

L’animation du carousel de sites web (sidebar) et des projets personnels à été réalisé grâce au script jcarousellite de Ganeshji Marwaha.

La principale difficulté a été de gérer correctement la partie commentaires. Entre les CSS, le php et la mise en place de certains plugins je dois bien avouer que cette partie m’a pris du temps.

Conclusion

J’espère que cette page a pu répondre à certaines de vos questions concernant la création de ce blog. Je n’ai pas la prétention de penser que mon travail est parfait ; je compte sur vous pour me faire part de vos remarques et de tous commentaires pouvant faire évoluer ce blog.