Design, le grand nettoyage de printemps

Les mauvaises langues qui diront que j’ai parcouru tous les didacticiels Photoshop estampillés “web 2.0” afin de réaliser ce thème ne seront pas très loin de la vérité. Cette remise à neuf part d’une constatation évidente : difficile de parler d’ergonomie et de webdesign quand on a un design peu soigné, et surtout peu utilisable. Certes, les cordonniers sont toujours les plus mal chaussés, mais il y avait des limites.

C’est la seconde fois que je commence par coucher le résultat final sous Photoshop, avant de me lancer dans le développement, et les résultats sont visibles : c’est nettement plus propre. Ma démarche habituelle consiste à ouvrir Textmate avec une vague idée de ce que je veux faire, et à coder. La démarche inverse, même si elle est beaucoup plus fastidieuse en rajoutant un très grand nombre d’étapes nécessitant un outil que je ne maîtrise pas du tout, est aussi très intéressante, puisqu’elle m’oblige à aborder les problèmes à venir en amont.

J’imagine qu’il y a un certain nombre de bugs sous Internet Explorer, principalement dans sa version 6 à cause du manque de support de l’alpha des images au format PNG, mais je n’ai pas de machines sous Windows pour tester. Ils attendront donc lundi soir que je sois au bureau pour un recensement exhaustif.

Et pour finir, la liste de mes sources d’inspiration :

<li><a href="http://iris-design.info/photoshop/web-20-style-buttons/">Iris Design</a> pour les gros boutons Aqua de la barre latérale.</li>
<li><a href="http://www.shadowness.com/tutorial381">Shadowness</a> pour les onglets de navigation.</li>
<li><a href="http://www.simpleentrepreneur.com">Simple entrepreneur</a> pour la mise en valeur des zones de souscription.</li>

under the bridge

Publié le 05 mai 2007 à 20h34 Publié sous Blogs, Twitter et micro blogging

Mots clés design, webdesign, css, ihm, photoshop, xhtml, theme

Si cet article vous a plu, suivez-moi sur Twitter

13 commentaires sur Design, le grand nettoyage de printemps »

Par khalid le 05 mai 2007 à 21h42 :

Bravo, c’est vraiment très réussi :-) C’est vrai que ça change beaucoup par rapport au thème précédent, je trouve celui là très vivant ça fait un peu Mac avec une touche de KDE ;-) Juste une remarque, les dates sont encore en Anglais par exemple les noms des mois “April3… et aussi dans l’onglet “Articles” il y a toujours “posted in” qui résiste..
Par Denzen le 06 mai 2007 à 01h28 :

Ouch, il y a vraiment un problème avec les couleurs, de ce point de vue là, je suis pas super fan. Et puis (je suis désolé) les boutons énormes, j’accroche pas trop non plus… C’est pas trop à mon goût en fait. Fait gaffe au line-height de ton menu à droite, dans Safari, “numériques” chevauche “Liberté d’expression et droits”. Voilà pour ma critique, excuse-moi de me montrer pas très enthousiaste :/
Par Samuel MARTIN le 06 mai 2007 à 01h39 :

Très sympa !

Pour louper Abonnement Rss, email il faut être aveugle :D. Moi y a juste la couleur bleu du pied de page qui me gêne un peu .. encore que …

En tout cas la remarque générale que je peux faire, c’est que tout est facilement accessible, la lecture est agréable. Je plisse juste les yeux pour lire ça: Publié le 05 May 2007 à 20h34 sous Web, Typo, Les turpitudes de la vie, La vie de ce blog. Mais un coup de scroll suffit pour agrandir le tout.
Par Samuel MARTIN le 06 mai 2007 à 01h48 :

Ajout au précédent commentaire :

Quand on survole les différents liens de la sidebar “Thématiques” on pourrait s’attendre à un changement de couleur de fond. Je passerais le fond en bleu et l’hyperlien en blanc.

Pour avoir de l’inspiration je suis abonné à des sites comme : http://www.cssdrive.com/ http://css-galleries.com/ http://thesis.veracon.net/ http://cssvault.com/ http://www.cssplay.co.uk/
Par Moe le 06 mai 2007 à 02h20 :

Les onglets sont plutôt jolis mais n’indiquent pas s’ils sont actifs ou non, c’est un peu déroutant, surtout que CV n’ouvre pas un onglet mais un fichier PDF ! De plus la page des archives s’affiche mal chez moi : http://img520.imageshack.us/my.php?image=20070506021120fredericdvt1.png (Firefox 2.0.0.3 Ubuntu 7.04).

J’aimais bien l’ancien design avec le bloc en bas de page et son fond noir. Le fond bleu m’accroche moins, il contraste moins avec le reste de la page.
Par Nath le 06 mai 2007 à 08h14 :

Plus agréable, en effet. Et visiblement ça se charge plus facilement (j’avais un gros blocage quand je chargeais ton site depuis netvibes).
Par Groumphy le 06 mai 2007 à 08h52 :

Ah ouiiiii ! Superbe… Par contre, le “design web 2.0” je ne trouve pas… Chacun son design, chacun sa culotte, chacun… Enfin on se comprend.

Belle réalisation dans tous les cas !
Par Amaury le 06 mai 2007 à 08h52 :

Oo a oui, quand même ! ça pourrait faire mal aux yeux :)
Par Frédéric de Villamil le 06 mai 2007 à 09h53 :
Merci pour ces retours, surtout les critiques, c’est comme ça qu’on avance.

Il y a 3-4 petites choses qui vont effectivement changer :
Je vais profiter de mon dimanche pêche aux moules et de mon 8 mai pour corriger tout ça.
Par DaSayan le 06 mai 2007 à 11h50 :

Très beau design, je plussoie avec les autres en ce qui concerne la différence entre onglets actifs / inactifs :)
Par Tartopom le 06 mai 2007 à 12h42 :

Ahhhh j’aime pas du tout ;).

Les couleurs, les boutons aqua énorme et la rondeur de l’ensemble ne m’enchante pas. A contrario, j’adorais l’ancien design au niveau des couleurs et du style. Je le trouvais moins fouillis, moins chargé : plus propre.
Par Bastien le 07 mai 2007 à 09h37 :

tres bien, par contre je n’accroche toujours pas avec le fait que tu ne mettes qu’un article sur la premiere page !! et les autres en lien tout en bas
Par Frédéric de Villamil le 07 mai 2007 à 11h52 :

En fait, je me rends compte que c’est à l’usage que j’en vois les imperfections. J’ai déjà une liste de choses à faire longue comme un programme présidentiel de gauche (qui a dit “3 lignes” ?), je vais donc faire ça rapidement, certainement entre ce soir et demain.

Mon seul souci vient – une fois de plus – de photoshop que je ne maîtrise pas et qui me prend donc énormément de temps, pour pas forcément grand-chose.