Babylon Design nouvelle version 8… Déjà !

Rubrique Divers & Variés

Déjà une nouvelle refonte graphique pour le site. La version №7 n’aura vécu que deux mois mais cette nouvelle mouture bénéficie de tout le travail effectué pour sa prédécesseuse.

Publié il y a déjà trop longtemps…

Suite à ma participation au CSS Summer Refresh 2007, j’ai eu beaucoup de retours constructifs sur ma réalisation. J’en ai pris bonnes notes et ai décidé de l’améliorer en réalisant cette nouvelle version.

R:
G:
B:
#

Vous le constaterez de vous-même, ce nouveau design se base essentiellement sur le logo, le nouveau visuel et la réapparition de la colonne de droite.

Le logo: Un léger retour à l’ancien logo car le logo de la version 7 n’en n’était pas vraiment un.
Le visuel: C’est un point que je voulais réellement intégrer depuis longtemps mais je manquais cruellement d’inspiration et de ressources mais j’ai enfin trouver mon bonheur avec mon vieux scientifique.
La colonne de droite: Etant donné les nombreux de retours suite à sa disparition concernant la perte de répère j’ai finalement décidé de la réintégrer. Maintenant je me tâte à remettre également le calendrier…

Sur cet article, je pars une petite semaine et demie pour un retour au sources, mais surtout faîtes moi ma part de vos impressions bonnes ou mauvaises !

Pour info, voici la capture d’écran de la version précédente, la №7.

Article rédigé par Samuel Le Morvan.

Ce que nos lecteurs en disent :

Clemens

J’aime beaucoup se nouveau design mais il serait beaucoup plus beau si le gris de l’arrière plan serais plus foncé comme celui-ci par exemple: #DCDCDC (essayer dans le color picker au dessus pour voir)

Shemu

C’est une bonne suggestion, je vais y réfléchir.

buh31

Bonjour,

L’association du tube à essai avec les bulles est réussi :)

Shemu

Merci

petit-agité

Je ne vois pas le bandeau du haut… je tourne sur linux avec firefox 1.5

Shemu

Ah… Peut-être un problème avec le flash en fond… Je vais voir ça.

FREUD

En voilà une bonne chose !
La version 7 ne m’avait pas vraiment titillé les iris…
Celle-ci, par contre, je la trouve vraiment pas mal ;)
Continuez comme cela, Mister Shemu.

Shemu

Hé hello Mr Freud ! Merci.

raphaël

Salut.
J’ai bien suivis les évolutions, cette version est la meilleure a mon avis d’un point de vue ergonomie et design.
Je repère cependant quelque problèmes que je me permet de te lister :

– trop de polices différentes : entre celle du logo (+ titres menu de droite + liens du menu header) la times (?) du menu de droite et Trebuchet(?) du contenu etc, Je trouve du Trebuchet, Georgia et Times, c’est un peu du de retrouver ses repères.

– Il y a je pense un sérieux problème de grille typographique au moins dans ton contenu : entre les tabulation de début de <p>, et l’absence de Titre 3, sans compter l’alignement au centre des images qui ne sont jamais assez large, c’est assez perturbant. Aussi, pour te donner un exemple, le menu du header pourrait être aligné avec le coin gauche de la date du dernier post, et d’une manière générale avec le contenu; l’icone d’article pourrait être aligné tout a gauche…
-Pour finir, je trouve que le haut de ta page est plus soigné que le bas : le footer est un peu fouillis, entre la fin du form de commentaire et la pub, un peu d’organisation serait la bienvenue..

Enfin bon je sais ce que c’est , l’éternel problème du temps.
Sinon j’aime ton blog. Rss represent.

Shemu

Salut Raphaël,
Heureux de voir que ce design te fasse réagir ! :)
– Il y a en réalité trois polices : Hamburger pour le logo et les titres images, Georgia pour la titraille et le menu, puis Trébuchet pour les textes denses. Ce qui me paraît concordant en terme de lisibilité.
– Concernant l’alignement, l’indentation des paragraphes est là pour identifier facilement ceux-ci et pour une confort de lecture. Mais il est vrai que j’ai oublié de retirer cette indentation dans les paragraphes centrés avec des images. De plus, ta remarque sur le menu du header est justifiée et je constate que j’ai un peu bâclé cette dernière étape tout à l’heure. Honte à moi, je vais corriger ça.
– Pour le footer, il me satisfait pourtant. Mais je compte ajouter un visuel par la suite, peut-être que cette prochaine évolution de plaîra ;).
En tout cas, merci pour tes remarques.

tt

Bravo pour cette nouvelle version. Une petite remarque tout de même concernant le pied de page : il mériterait d’être à la hauteur de l’entête, histoire de "finir en beauté".

Shemu

Merci tt. « A la hauteur » graphique tu veux dire ?

tt

D’un point de vue graphique. Le code html c pas mon truc.

Shemu

Je vais y travailler ;)
Pour le html, c’est pas grave ça arrive à tout le monde :)

HappyNoff

Bonjour,

je suis sous linux, iceweasel(debian) 2.0.0.7 et flash player 9. Petit soucis avec le bandeau du haut, il s’affiche par dessus le reste, seul moyen de voir le haut du site, bloquer le flash avec adblock plus :s

sinon pour la couleur du fond, les liens en blanc en haut ont un tres mauvais contraste (peut etre du a l’absence du flash ?), meme probleme pour les textes en gris sur fond gris.

Sinon le design est reussi :) mais je manque peut etre quelque chose sans flash :(

Shemu

Bien, apparment tu n’es pas le seul. Je vais essayer de résoudre cela rapidement. Mais sachant que je n’ai pas lde Linux à dispo…

Les liens d’évitement en haut ne sont pas faits pour être visible, il servent principalement aux navigateurs vocaux.

20cent

Flash et wmode transparent ne font pas bon usage sous Linux Sam… fais moi signe si tu trouve une parade mais tu verras, c’est pas gagné. :)
Cerebral

Idem, prob avec FF et Opera sous Linux (Ubuntu)
20cent

Oups, le petit № ne s’affiche pas correctement sous Firefox/Mac.

Je conserve mon petit <abbr title="numéro">n<sup>o</sup></abbr> à moi du coup. ;)
Rémi

Beau boulot, bravo ! ;)
jparia

Beau boulot mais c’est osé d’utiliser un composant flash avec de la transparence, surtout connaissant les problèmes d’incompatibilité ou de firewall…
Du fait qu’il est appellé par js, je pense qu’il faudrait ajouter le contrôle du navigateur et de sa version pour que le bandeau soit visible par tous.
Vulkanik

Moi j’accroche pas du tout à cette version.

Je préfèrais largement la version 7 !

Sinon bonne chance pour la suite et vivement les nouveaux tutos :p
Terry

Mieux cette nouvelle version sam ! :)
Forge

J’avais loupé la v7, mais la v8 cartonne, beau boulot.
Le color picker est un gadget sympa, c’est un coup à flinguer la production de la journée ça. On jouerais des heures avec ^___^

Sinon, pour le footer, la remarque des autres intervenants et tout à fait pertinente.

Aaaargh j’ai failli avoir une attaque en voyant la pub du footer, c’est un test hein, ça ne vas pas rester ? Si tu as l’intention de la laisser, tu pourras faire ce que tu veux, ça va te gacher tout ce beau dotclear, ce serait dommage.

Allez bonne continuation, et je surveille le RSS.
Mac

Félicitation pour cette nouvelle version que je trouve bien meilleur que la précédente
Tony-Coasterrider

Je voudrais pas casser l’ambiance, mais la version est superbe !

Par contre, étant sous Linux (Kubuntu) et essayé tous les navigateurs dont Firefox, ben j’ai pu accéder par chance à ce billet en rafraichissant et cliquant comme un malade pour y laisser un commentaire pour y signaler un big problème : le flash au top du site, ben cache une partie supérieure du site rendant cette partie inaccessible car le flash casse tout !

Il semblerait que ce soit la transparence du flash qui n’est pas prise en compte sous Nunux…

Peut-être faut-il tenter d’y remédier pour les Linuxiens car un Linuxien aura du mal à revenir sous Windaube. ;-)

Les commentaires sont clos.