Liveblogging my website redesign 001 : Basics

So

Ça commence avec une installation «default» de WordPress dans sa dernière version, soit 3.5.1 – voir le fameux «Five minutes WordPress install» ici.

 
imageLe nouveau thème «default» de 3.5.1 s’appelle Twenty Twelve et présente une foule d’adaptations à la nouvelle mode du web, le Responsive design. C’est assez pratique si on veut plonger rapidement dans cette nouvelle manière de monter un site, parce que les fonctions de base y sont intégrées : Media Queries et autres structures logiques. On peut fouiller dans le style.ccs pour voir comment ça fonctionne et expérimenter.

Voir ici pour un breakdown sommaire de tout ce que Twenty Twelve amène comme nouveaux features.

Je sais que certaines personnes sont en train de penser «Pff, pourquoi ne pas partir un thème de zéro, c’est ben plus rapide, Twenty Twelve c’est un cop-out». Peut-être, mais après plusieurs tentatives infructueuses, où je me suis perdu dans les poils du tapis, j’aimais mieux, de un, avoir quelque chose fonctionnel rapidement, et de deux avoir une excuse pour explorer les nouveautés de WP. Plus amusant que lire une liste de «What’s new in this version» en bullet points et perdre connaissance. Ç’est pas comme ça que j’apprends. Et puis, je me sens pas si calé que ça en WP pour pouvoir partir de zéro. Y’a trop de trucs que je ne connais pas assez bien pour conduire manuel.

Fait que, une fois Twenty Twelve installé, on commence à l’adapter à nos besoins. Pour ma part, j’ai deux idées principales qui orientent mon design.

1. Une grande image en haut, pour featurer les trucs importants, genre la plus récente photo de mon Instagram, des posts que je veux highliter ou le dernier projet que je viens de mettre en ligne.

2. Pour le contenu principal, deux colonnes, une pour les articles longs, une pour les contenus courts, comme des liens ou de commentaires.

Je reviendrai sur ces deux points dans des posts plus élaborés. En attendant voici des esquisses de ma démarche.

Maquette faite avec Paper sur iPad
Maquette faite dans Penultimate sur iPad
Maquette faite avec un stylo sur une feuille de papier



Ma méthode est assez désordonnée, ou «intuitive» (ça sonne mieux). Mais en gros, les idées arrivent quand elles veulent, c’est pas toujours moi qui décide, et c’est bien d’avoir quelque chose à portée de la main pour les garder, avent qu’elles ne disparaissent. La vie est tellement rapide aujourd’hui!

Bref, le iPad est un outil très pratique, notamment avec Penultimate, qui va synchroniser automatiquement avec Dropbox, et qui me permet de revoir mes notes rapidement, peu importe où je me trouve, devant mon ordi au bureau, à mon iPad la maison, ou devant un latte dans un café quelque part.

Prochain post, je vous explique comment j’ai monté la structure de base de la page d’accueil. En attendant, laissez-moi un commentaire, que pensez-vous de cette approche? C’est tu vraiment lame de partir d’un Template existant? Quel est votre template de départ? Comment notez-vous vos idées? Je suis curieux de savoir.

Later

f

Outils : Paper, par FiftyThree, Penultimate, par Evernote, et mon stylo préféré, parce qu’il fonctionne pour le papier et le iPad : Bamboo Stylus Duo

3 Responses to “Liveblogging my website redesign 001 : Basics”

  1. jean-F

    C’est pas “lame” du tout! Faut bien différencier le design d’interface (la gestion du contenu présenté dans un contenant) et la programmation d’un site. La complexité du code est phénoménale et demande une activité de mise à jour constante. Faut choisir ses batailles je crois.

    Petite analogie : Tout le monde sait comment conduire une voiture mais pas nécessairement comment fonctionne un moteur. Mais c’est intuitif de savoir si une interface avec une voiture est bien pensée ou non. De même pour un site.
    Qqc avec du talent (un designer) peut imaginer un tableau de bord efficace, avec une typo claire et pertinente, avec une ergonomie et des fonctionnalités béton, des sièges confos qui nous permettent d’être à la bonne position pour bien voir la route, des garnitures attrayantes et sexy et des petites boites partout où ranger tout notre petit change.
    Imaginer tout ça est plus intéressant, de mon point de vue, que de savoir comment le réaliser à 100%. À chacun ses passions et je respecte le “code is poetry”, mais j’aime mieux réfléchir aux relations du contenu/contenant que de connaitre tout le code pour mettre ces éléments en action et interrelation.

    Beaux petits paper (et virtual) paper prototyping en passant.

  2. Si tu savais le nombre de fois que nos designs et intégrations de sites pour nos clients commencent sur un coin de table…

    Bien sûr, on utilise OmniGraffle pour les mockups ‘cutes’, mais au départ, rien de mieux qu’un crayon: c’est rapide ça crash jamais 🙂

  3. Antoine

    Super ton liveblogging. Pour Twenty Twelve, je trouve que l’ennui avec les thèmes de base de WP, c’est que quand on ouvre functions.php on se rend compte que beaucoup de mise en forme est programmée et que le thème a été monté par un développeur ce qui rend les personnalisations plus délicates. C’est rendu qu’on a l’impression qu’ils veulent mettre dans leurs thèmes tout ce qu’il n’ont pas eu le temps de faire proprement dans leur Admin… Je suis plutôt de l’école qui part de zéro et j’ajoute mes fonctions documentées au fur et à mesure, c’est un peu vieille école, mais je n’ai pas trouvé de thème de base assez simple pour mes simples besoins.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>