Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

942 — Screenshot de mon prochain design #spoil

Pour rassurer Mikhail qui se demandait si le prochain thème à venir sur ce blog gardera la simplicité et la sobriété du thème Hybrid, voici un aperçu de mon prochain thème pour WordPress. Le design est encore encapsulé au format .ai d’Illustrator. Il me reste encore un peu de travail à faire et en attendant l’intégration HTML5 et CSS voici une capture d’écran :

Avec la grille horizontale et verticale

Parce que les grilles en 950 ou 960 pixels commencent à me fatiguer, j’ai opté pour une grille de 942 pixels de large en 16 colonnes de 42px et 18px de gouttière. Pourquoi 42 ? J’ai 42 ans cette année et je chausse du 42 ;)

new-design-v4

Sans la grille

new-design-gridless-v4

L’objectif est de conserver la sobriété et la lisibilité d’un thème comme Hybrid tout en apportant le maximum de personnalité et de chaleur humaine. J’espère m’être approché du but.

Je vous ai compris ;)

Vous avez été nombreux à trouver le dégradé blanc -> orange un peu cheap ou manquant de sobriété par rapport au reste du design. J’ai remis cent fois sur le métier mon ouvrage et voilà !

  • Suppression pure et simple du dégradé
  • Ajout d’une ligne dans les gris-clair pour séparer les parties et structurer la page,
  • Par ailleurs, Je tenais aussi à montrer le menu déroulant pour l’affichage des tags et des catégories suite au commentaire d’Auré ;)

Aperçu du header

focus-header-nouveau-design

Aperçu de la partie centrale

focus-partie-centrale-nouveau-design

Aperçu du footer

focus-footer-nouveau-design



29 commentaires pour “942 — Screenshot de mon prochain design #spoil”

  1. devzonefr dit :

    Moi j’aime bien ! Ça m’a l’air clair et épuré comme thème.

    J’ai hâte de le voir en action :)

  2. Le rendu est très agréable. :)

  3. Josselin dit :

    Hello Bruno !

    Sans oublier que 42 est LA réponse ultime à la grande question sur la vie, l’univers et le reste.

    Sinon il m’a l’air sympa comme tout ce design, je le préfère à l’ancien !

  4. Josselin dit :

    En plus tu arrives à garder ce côté « journal » que tu appréciais tant sur l’ancien, bravo ! :-)

  5. Damien dit :

    Oh c’était de ca que tu parlais il y a un mois dans la voiture lorsque on parlait justement de 42. Joli :)

  6. Gl0ubI dit :

    Ce que j’aime, c’est les couleurs :)

    Bravo.

  7. symptome dit :

    Sympathique ce futur thème WP! j’espère qu’il sera promu sur smashing magazine ;) Gael

  8. Damien dit :

    Pas fan du tout du dégradé blanc -> orange avec bord arrondis… ça fait très… cheap. Pourquoi aussi un menu aussi petit ? On est submergé d’information (la taille de ce logo ! :D) mais le menu est ridicule par rapport aux contenus.

    Sinon j’apprécie le choix d’HTML 5 (XML ou HTML d’ailleurs ?) et la mise en forme à base de grille qui donne aux contenus une organisation sympa :-)

  9. burningHat dit :

    Bah même si ton picto fétiche nous me manque un peu, j’aime vraiment beaucoup ta maquette. J’ai hâte de le voir terminé et en prod’, c’est du tout bon! En plus y a un je-ne-sais-quoi un peu rétro que j’apprécie bien :-)

  10. Bruno Bichet, intégrateur HTML & CSS dit :

    @devzonefr @Aurélien @Gl0ubI @symptome @burningHat merci à vous, ça fait plaisir de voir que ce design plait globalement ;)

  11. Romain dit :

    Je suis pas fan du dégradé blanc>orange sinon c’est plutôt cool

  12. Francis dit :

    Je le trouve très sympa ce nouveau design ! personnellement, je n’aimais pas du tout le côté rouge et noir du précédent donc je ne peux que me réjouir… J’étais très fan de celui qui est dans les tons verts avec le picto, je crois que c’est le thème que tu avais au moment du passage de DC à WP… Il me manque pas mal celui-là… Mais là, pour le moment, je trouve que c’est très réussi ! ;-)

  13. J’aime plutôt bien la charte chromatique (comment on traduit « colour scheme » ?) et le rendu du logo partiellement masqué.

    Je me demande à quoi correspond le feu, qui me paraît un peu « fioriture 2.0 » qui me paraissent un peu gratuits (à moins qu’il faille le rapprocher de « passion » ?).

    Pour le reste, c’est épuré, ce qui ne nous surprendra pas, mais heureusement moins aride que la version actuelle. Élégant.

    (Accessoirement, ce bouton « Reset » du formulaire de commentaire que fait réapparaître Hybrid me semble superflu – comme le pointait récemment un article lu je-ne-sais-où sur le design des formulaires.)

  14. burningHat dit :

    Yep me joins à Francis, c’est aussi à ce thème auquel je faisais référence ;-) mais je maintiens ce que j’ai dis à propos de celui à venir: il est classe ;-)

  15. clem dit :

    Je préfère le thème actuel.

  16. Moi, j’aime bien c’est sobre et épuré ! bonne continuation

  17. Auré dit :

    Ahhh ! Je vois enfin un aperçu du nouveau thème !

    Alors, voici un point de vue tout à fait personnel qui n’engage que moi :

    Les moins :

    • Je ne suis vraiment pas fan de cette couleur orange sur le dégradé.
    • Personnellement j’aime pouvoir naviguer via une liste de catégories. Je trouve cela plutôt pratique et ça donne un bon aperçu de la nature du contenu général. Sur le thème actuel je trouve que cette petite liste de catégories fait défaut. Comme je vois que tu ne l’as pas prévu non plus dans le cadre de la refonte, je lance l’idée…
    • Je ne suis définitivement pas convaincu par le rendu de cette barre de recherche google même si je sais qu’elle s’avère très utile.

    Les Plus :

    • Je ne peux que constater ta grande minutie dans la construction du nouveau design. La structure de la page à l’air vraiment nikel chrome avec une excellente lisibilité.
    • Le rendu du texte d’intro en haut de la page. Je trouve que ce paragraphe est très agréable à lire.
    • L’imposante police sur les titres des articles.
    • L’idée de la vidéo pour une « leçon de chose » (j’ai hâte de voir ça)

    Globalement, pour ma part, le dégradé orange, particulièrement visible, gâche tout et je préfère encore la version actuelle car je me suis finalement fait à ce thème très épuré. Cela étant on voit direct qu’il y a eu une vraie grosse réflexion pour cette v2 et il y a de bonnes idées de contenu. Je suis sur que ce sera un succès quoi qu’il en soit (dégradé orange ou pas)

    J’attends le lancement avec impatience… Bon courage Bruno

  18. Grégoire dit :

    Salut Bruno,

    Tout d’abord, je suis assez fan de ce genre de démarche participative dans le cadre d’un redesign. Surtout quil n’est pas toujours très facile de s’entendre critiquer un design qu’on a mis plusieurs heures / jours à pondre. Donc 1 : bravo.

    Ensuite, j’apprécie beaucoup les thèmes minimalistes. Donc les dernières versions de ta maquette (sans le dégradé orange…), j’aime beaucoup. EN plus un thème en grille, c’est très lisible. Et puis la petite flamme dans le footer en réponse au header, je trouve ça subtil. J’ai hâte de voir le truc live !

  19. GuillaumeB dit :

    Moi j’aim bien mais, layout clean et simple j’avoue que le logo pêche un peu. je crois que c’est la flamme qui me bloque un peu :)

  20. random dit :

    Joli thème et couleurs bien choisies

  21. Animaux dit :

    Très beau design, est-ce que je peux vous demander votre avis d’expert sur mon nouveau site sur les animaux de compagnie ? merci!

  22. weetabix dit :

    joli changement, bravo bruno42 !

  23. [...] nouvelle version de css 4 design que j’avais évoqué dans Screenshot de mon prochain design est en ligne. Il reste des ajustements à faire et quelques pétouilles que je corrige au fur et [...]

  24. [...] sur ce blog en attendant de créer 942, mon nouveau thème WordPress à partir d’une toute nouvelle charte graphique. J’ai laissé Thematic en l’état pendant plusieurs mois sans ajouter d’image, [...]

  25. Bruno Bichet, intégrateur HTML & CSS dit :

    @Damien oui, le dégradé fait peut-être un peu cheap, c’était plus ou moins voulu, mais je remettrai cette partie sur l’établi ;)

    Pour la taille du menu, il faut garder à l’esprit que la capture d’écran n’est pas en taille réelle : le screenshot fait 520 pixels de large au lieu des 942 px. La taille des textes fait 10px, c’est peut-être faible, j’irais sans doute jusqu’à 12px mais je compte surtout sur les blancs tournants généreux pour le mettre un peu en valeur. Je dis bien un peu, car ce genre de menu ne sert finalement pas à beaucoup de visiteurs et ceux qui en ont besoin le trouveront sans problème et les autres 99% ne seront pas gêner outre mensure !

  26. Bruno Bichet, intégrateur HTML & CSS dit :

    Exact, c’est bien de ce futur thème dont le parlais en début d’été ;)

  27. Bruno Bichet, intégrateur HTML & CSS dit :

    Merci Josselin, effectivement 42 est aussi la réponse ultime ;) C’est vrai que j’ai essayé de garder ce léger côté magazine qui me manquait, et vu que je n’avais pas réussi à concilier sobriété, lisibilité et magazine avec l’ancien design, je fais une nouvelle tentative avec « 942″ ;)

  28. Bruno Bichet, intégrateur HTML & CSS dit :

    Merci Auré pour ces avis qui ont achevés de me pousser à revoir le background en dégradé qui était loin de faire l’unanimité ^^ Sinon, comme tu peux le voir, le lien vers les tags ou les catégories affichent un menu déroulant ;)

    Pour la barre de recherche Google, rien n’est définitif. Je vais tester des plugins censés améliorer la recherche dans WordPress ou essayer de styler les éléments de la recherche Google.

  29. Bruno Bichet, intégrateur HTML & CSS dit :

    A première vue tout à l’air bien cohérent. J’aime bien le logo et les couleurs. Pour chipoter sur le côté graphique, les « blancs tournants sont un peu trop importants à mon goût par rapport aux contenus.

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

css 4 design est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2010.

Contactez l'auteur du site

Google Analytics Alternative