Nouveau design en place : plus bleu, plus carré, plus centré

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

Nouveau design en place : plus bleu, plus carré, plus centré

Juste un mot pour vous signaler que l’ancien design dont vous pouvez admirer une partie ci-dessus vient de laisser place au nouveau design SquaryBluevie. J’ai essayé de faire quelque chose de plus clair et de plus structuré en repensant notamment le haut de la page — les mauvaises langues diront que ce n’était pas difficile ^_^ ! Comme son nom l’évoque, ce thème est plus carré et plus bleu car je me suis rendu compte que j’utilisais très peu cette couleur ainsi que les formes carrées. Par ailleurs, comme je n’ai pas un goût très prononcé pour les alignements centrés (je préfère souvent les alignements improbables), j’en ai profité pour me forcer un peu afin d’élargir mon horizon visuel.

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



29 commentaires pour “Nouveau design en place : plus bleu, plus carré, plus centré”

  1. Flavien dit :

    Ouah !! Je suis en admiration, je dois dire que là : j’adore ! C’est très léger, très agréable

    Je n’ai pas trop trop le cadre de la sidebar, mais sinon, j’aime beaucoup.

    Aussi : ta photo dans laquelle il est noté « Edito », l’arrondi n’est pas transparent donc du coup, sur le bleu, cela se voit. Mais ça, c’est du détail…

    Pourrais-je savoir en combien de temps (environ) fais-tu le thème d’un blog ?

    Merci et bonne journée !

    Flavien

  2. Remy dit :

    heuuu … il faudra debuggé ça sur safari car la j’ai eu un peu peur au depart …  (typo serif / hx non stylé / lien en blue web defaut /roll-ovre sur le rss defaillant) !!!

    sur firefox ça va deja beaucoup mieux  … sobre … et efficace (et l’edito est toujours en lipsum)

  3. Palleas dit :

    Sympa, mais je n’aime pas vraiment les blocs du header, surtout du titre en fait, limite des bords arrondis peu être ?

  4. Damien Ravé dit :

    J’aime bien l’idée d’onglets sur la nav pour passer des catégories aux articles, aux commentaires et aux tags. L’allègement visuel est assez évident (quatre fois moins d’espace occupé). Par contre je me demande si en termes de visibilité de ton information, ça risque pas d’enterrer les contenus.

    J’ai eu la même réflexion sur la refonte de mon blog il y a quelques jours, et j’ai décidé de tout rendre visible. On m’a reproché l’aspect bordélique, mais du coup l’ensemble des contenus est visible sans clic supplémentaire.

    Il faudrait que je fasse du A/B testing en chargeant une version « déroulée » ou une version « onglets » et analyser les stats pour voir l’impact sur les visiteurs.

  5. Romain F. dit :

    Le problème quand tu change quelque chose, c’est que certains vont aimer, d’autres pas !

    Sur le coup, je suis de ceux qui n’aime pas : – trop de bleu – le logo carré ne passe vraiment pas – le header est trop grand

    C’est pas très constructif, c’est même plutôt gratuit comme critique, et surtout très personnel, l’essentiel c’est que ça ressemble à ce que tu souhaites et que le contenu reste de qualité :)

  6. Rémi dit :

    Je n’aime pas non plus, beaucoup trop froid et impersonnelle (surtout à cause du bleu).

    Oui, j’aime pas du tout désolé :P Je reste nostalgique de l’ancienne version (celle blanche, verte et rose si je me rappelle bien :P)

  7. Bruno Bichet dit :

    @Flavien > Merci pour ton bon goût :D La photo était provisoire le temps que je retrouve l’original. C’est réglé maintenant. Concernant le temps passé sur le thème, je dirais : beaucoup trop ! En fait, j’ai beaucoup expérimenté en ajoutant des éléments, en les supprimant, en les remettant, pour finir par essayer de faire en sorte de pouvoir modifier facilement certaines zones, soit en ajoutant des widgets, soit en modifiant le code… Bref, tout ça pour te dire que je n’en sais rien. Mais à partir du moment où on sait exactement ce qu’on veut (croquis à l’appuis et fonctionnalités sous la main, je pense qu’en deux ou trois jours c’est jouable.

    @Remy > Arf, Safari… Ouais, c’est vrai qu’il faut aussi compter avec les bizarreries des applemaniaques ^_^v

    Après vérification (safari existe aussi sur windows \o/ ) il semble qu’il s’agit d’un problème lié à la syntaxe des règles d’import… Je vais regarder tout ça d’un peu plus près. Ce qui est bizarre, c’est que ça ne concerne pas toutes les propriétés héritées de fichiers CSS importés mais surtout font-family, font-size et color…

    @Palleas > J’aime bien les coins arrondis également, mais bon, j’ai essayé autre chose. Quand tu parles des titres, tu parles du logo ou des titres des deux blocs de chaque côté ?

    @Damien Ravé > Le thème provisoire affichait tout, et franchement ça faisait pas mal fouillis. Pourtant j’avais mis pas mal de choses dans un bigfooter, mais ça restait limite. Avec les onglets l’avantage en terme de place est évident, et ça permet en plus au visiteur d’avoir une vue d’ensemble du blog en 3 clics !

    L’intérêt de proposer la liste des derniers articles par exemple s’impose quand les contenus sont dispersés un peu partout (l’édito en haut, le billet A l’affiche, les articles du blog, etc.). Ca donne au moins une vision plus linéaire avec une ligne de temps plus réaliste comme l’édito/billet d’humeur peut rester longtemps, de même que le billet « A l’affiche ».

    Je ne pense pas que ça enterre les contenus. j’ai même tendance à penser le contraire, puisque ça permet, par exemple, d’afficher moins bas sur la page les anciens billets « A l’affiche », ou les tutoriels au hasard. Mais bon, les stats en diront plus à l’usage.

    @Romain F. > Désolé que ça ne te plaise pas, mais comme on dit toujours, les goûts et les couleurs ;) Je te comprends d’autant plus que je me suis un peu forcé à utiliser du bleu et des coins carré alors que j’ai une panoplie de CSS et de scripts pour arrondir tout ça, m’enfin… ;)

    @Rémi > Si tu es nostalgique de l’avant avant-dernier design, il te reste la possibilité de passer un peu de temps sur Notorious Blog ;))

  8. Flavien dit :

    @Bruno Bichet : trois jours pleins ? (disons, une dizaine de d’heure par jour)

  9. Bruno Bichet dit :

    @Remy > Bon, je viens de réunir tous les imports dans la feuille de style principale et Safari est content. Peux-tu refaire un test si tu as une version Mac de Safari ? Merci d’avance !

    @Flavien > lol, oui bien sûr, je parle de journées de 8h/10h :))

  10. Remy dit :

    yep … safari et content ;) … c’est beaucoup mieux ainsi

  11. guiralantoine dit :

    Salut bruno! Juste une petite remarque : un petit bug après un clic sur les liens : à l’affiche/articles.tutoriels dans ta speed bar en haut a gauche. Chez moi le background reste apres le clic mais le color revient à sa couleur d’origine…du coup plus moyen de lire quoique ce soit :) Sinon encore une fois du bon boulot! A bientôt!

  12. Bruno Bichet dit :

    @guiralantoire > Je n’ai pas réussi à reproduire le bug dont tu parles, mais je l’avais remarqué et je pensais qu’il s’était fait hara-kiri tout seul :) Apparemment, non… Je regarderai ça demain.

    Sinon, le costard-cravatte te va bien, faudrait le mettre un soir sur Y!Live :D

  13. guiralantoine dit :

    héhé merci d’être passé lol j’y penserais à la rentrée parce que je ne l’ai pas emmené a barcelone :D Donc pas de costard avant le 1er septembre… Pour le bug je suis sous ff3 et XP si jamais je peux faire quelque chose n’hésites pas ;)

    Je vais essayer de passer un de ces 4 sur Y!Live et de trouver deux min pour twitter un peu mais la vie barcelonaise est beaucoup moisn calem que la vie limougeaude :D

    A bientôt!

  14. nico dit :

    C’est clean, bravo ! Moi je trouve ce désign très agréable, la lecture des billets n’en est que plus confortable. Je préfère ce système de menus également, plus concis.

    Encore bravo, du bon boulot !

    (manque seulement un lien RSS pour chaque article, plus sympa que le mail pour suivre les discussions, à mon goût…)

  15. Bruno Bichet dit :

    @nico > Encore quelqu’un qui a du goût ^_^’ Pour le lien RSS pour chaque article, tu penses à quoi exactement, parce que flux global est disponible avec la grosse icône en haut de la page et le flux des commentaires est accessible en bas de page avec la possibilité de recevoir les billets par mail.

  16. remy dit :

    je pense que Nico pense au RSS des commentaires d’un article précis… moi je l’ai mis egalement (juste au dessous de la case a cocher pour suivre les commentaire de ce billet par e-mail.

  17. remy dit :

    il s’agit en fait d’un lien du type : http://www.url.com/ton-article/feed

  18. Bruno Bichet dit :

    @remy > ah ok merci, j’avais pas capté ^_^v Voilà, c’est fait, juste sous le suivi des commentaires par e-mail :)

  19. annso dit :

    Bon, je m’excuse pour ce commentaire négatif, mais il faut bien qu’il y en ai! Sur ce design (ou sur celui d’avant) je trouve la présentation vraiment fouilli! Il y a de l’information partout, ça n’est pas vraiment clair…

    Le nouveau header est très sympa, mais dès qu’on descend un peu ben, je suis perdue… On a un énorme a l’affiche avec un bout de bannière qu’on dait pas trop ce qu’il vient faire là… Suivi d’un bout d’article. Encore plus bas, on a d’autres bouts d’articles avec d’autres bouts d’images, on comprends pas trop ce qui va avec quoi… Y a même un 2ème ‘a l’affiche’ (ça fait beaucoup d’affiches!)

    Je pense que ça manque d’espace, de respiration et d’harmonisation.

    Voilà mes remarques à 2 francs 50, désolé de ne pas adhérer du tout!

  20. xuxu dit :

    Hey, toi aussi t’as profité de tes vacances pour faire un CSS Refresh ^^. Bon je vais faire comme tous les autres et faire deux petites remarque :p J’ai juste l’impression que l’image « .fullthumb » fait un peu doublon avec le nouveau logo en « h1″. La sidebar parait juste un peu vide pour le moment non ? Sinon, vive le blue style :)

  21. Bruno Bichet dit :

    @annso > Merci pour ton avis constructif. J’ai effectué des modifs en essayant de tenir compte de tes remarques. J’ai mis un fond sur le billet A l’affiche / En bref et j’ai harmonisé le titre avec le reste.

    J’ai supprimé également le tutoriel wordpress au hasard pour aéré un peu. J’ai amélioré également l’affichage des images au-dessus des billets courts et j’ai modifié l’intitulé pour éviter les confusions entre les deux (anciennement) « A l’affiche ». Il y a maintenant « C’est vite dit ! » et « En bref ». Sachant que les billets regroupé sous ces intitulés appartiennent à la même rubrique. Merci encore :)

    @xuxu > Yep, dommage qu’il n’y ait pas eu de concours cette année ;) Je vais remplir la sidebar peu à peu : un changement de thème, c’est fait aussi pour prévoir des nouveaux contenus. J’aimais bien ton ancien thème mais je pense que je m’habituerai à celui-ci ^_^

  22. YoTsumi dit :

    Pour ma part, j’apprécie globalement ce nouveau design, bien que légèrement trop … bleu à mon gout.

    Mais il y a une chose qui m’interpelle énormément, c’est l’image ‘Css4Design’ dans le header (logo.png), que je trouve absolument horrible. J’ai même ouvert cette image à côté pour vérifier si il n’y avait pas un problème de transparence, et ça n’a pas l’air d’être le cas. Trop carrée, trop découpée sec, trop flashante. A mon humble avis, c’est le premier point à revoir.

    Aprés tu devrais aussi modifier le code de tes adsense pour les mettre elles aussi dans un ton de bleu.

  23. burningHat dit :

    Je vais faire ni critique positive ni négative ni même constructive (j’ai un gros coup de barre là alors ça servirait pas à grand chose :p) mais juste une petite suggestion : tu devrais updater ta favicon pour qu’elle soit dans les mêmes tons bleus à mon très humble avis, nope ?

  24. Flavien dit :

    Au contraire, moi j’aime bien le nouvel header… ;-)

  25. Salut Bruno,

    Joli, même si je crois quand même préférer le design précédent.

    Au niveau ergonomique rien à redire par contre :D

  26. Nico dit :

    Bien joué Bruno, je le prefere à l’ancien moi.

  27. Bruno Bichet dit :

    @YoTsumi > C’était un peu trop bleu, en effet, j’ai ajouté une couleur d’accompagnement dans les tons verts pour voir ce que ça donne.

    Pour le logo, je crois que pour le coup, c’est une question d’habitude : à force de voir des logos ombrés avec coins arrondis et/ou dégradés partout, etc, on finit peut-être par trouver « horrible » ce qui sort de l’ordinaire… :p

    burningHat >

    Ce favicon date de près de 2 ans et je l’ai gardé depuis par nostalgie de mon premier thème Dotclear… Je devrais le mettre à jour, c’est vrai. Bientôt ;)

    @Flavien > Merci encore ;)

    @alex > Lorsque les contenus sont nombreux, l’ergonomie est plus importante que le design. Pour la prochaine version, une fois que j’aurais trouvé mon rythme de croisière avec ce thème, je travaillerai sur un thème alliant joli design et ergonomie béton ;))

    @Nico > héhé, encore un qui a bon goût ^_^v Merci nicolas :)

  28. annso dit :

    juste pour dire que c’est bien plus clair comme ça! On différencie bien les différentes zones, les titres des articles, et les articles! youpiii!

  29. Shao69 dit :

    Je trouve ce design très frais et clair, tout a fait adapter à l’air du temps. Beau travail et merci pour nos petits yeux de lecteurs assidus ;-)



Colophon

CSS & Webdesign 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 - 2011.

Contactez l'auteur du site