Une nouvelle peau pour le blog

Une refonte tous les ans, c’est la règle….
Blague à part, je suis assez fier de vous présenter le nouveau design du site ! Cela faisait quelques mois que je le travaillais, depuis la dernière refonte en fait.

refonte wabeo design cristallin
Un design plus minéral

Le précédent thème avait posé les bases d’un arrangement graphique que j’aimais, mais qui m’avait laissé sur ma faim. J’ai donc repris mes idées et les ai laissé mûrir quelques temps.
J’ai pris le temps de poser les concepts, les technologies, les envies, les images. J’ai voulu faire rendre une ambiance beaucoup plus minérale, cristalline, mais toujours dans cette ambiance aquatique, mouvante… J’ai aussi du faire un peu de level-up en canvas 🙂

Allé, je vous fais la visite du propriétaire !

Un design plus affirmé

Comme je le disais, à la base il s’agissait pour-moi d’arriver à sortir un design plus affirmé, plus proche de l’image que j’en avais en tête.
Je voulais que le site soit emprunt d’un imaginaire des fonds marins, des abysses, de l’eau, de la roche et de l’ombre… (et ouai) mais en stylisé.
J’avais envie de formes plus angulaires, de textures plus cristallines, et de couleurs plus vibrantes… j’ai essayé de n’utiliser ni noir, ni blanc purs.

Une grosse partie du travail a été passée à réaliser le fond. Je savais exactement ce que je voulais, mais absolument pas comment le faire. Je me suis donc un peu arraché les cheveux. Il y a donc, dans ce fond, 450 formes aléatoires qui se décrochent des parois pour disparaître lentement au milieu, puis réapparaître sur les bords.

Il devait être en canvas au début, mais pour des questions de performances, je l’ai basculé sur du webGL grâce à la librairie pixiJS.

Sinon, pour le reste du design, je me suis borné à l’usage de rectangles bleutés légèrement translucides. C’est simple et ça colle bien avec l’esprit du site.

Du full ajax, mais encore mieux

Le site reste en full ajax ; il l’est même encore plus qu’avant, puisque la recherche se fait aussi en ajax.
J’ai expérimenté une nouvelle méthode pour faire mes requêtes, une méthode qui n’utilise plus admin-ajax.php. Cela m’avait donné beaucoup trop de fil à retordre inutilement, dans la précédente version du thème.

Cette nouvelle méthode permet un affichage plus rapide des contenus. Mais on vous en parlera bientôt avec Julio de BoiteAWeb.

Les différentes transitions ont été un peu simplifiées. Je les ai rendues moins agressives (l’effet de rotation 3D au survol des miniatures d’article commençait à me piquer les yeux).
Elles sont également un peu plus uniformisées, mais c’est lié au fait qu’il y ait moins de variété dans les templates.

Des changements dans la structure

Dans la précédente version du blog, j’avais deux catégories : « WordPress » et « Webdesign ». Elles ont disparues.
Je rédige trop peu d’articles pour tirer parti d’une telle classification. J’ai décidé d’expérimenter plus largement le potentiel des tags, qui ne sont pas très nombreux, mais qui se croisent régulièrement.

Cette nouvelle mouture est plus light, il y a moins de templates : une home (avec les articles), un template de grille, un single, 404 (hé hé), et attachement.
J’ai conservé la page des fichiers attachés, en fait je trouve ça assez agréable d’avoir une page avec plus d’informations sur les images que je fais pour illustrer les articles.
Néanmoins, lorsque vous lirez un article et que vous cliquerez sur une image, elle s’ouvrira bien dans une lightbox, et vous proposera d’aller visiter la page d’attachment.

Gros travail sur les images

Previously on wabeo, j’avais testé les images en SVG. C’est très léger, mais à la longue, j’ai trouvé que c’était dur à maintenir et le support des fonctionnalités liées aux SVG est plutôt mauvais. Chaque navigateur le traite à sa sauce et je n’avais pas envie de repartir là dedans.
J’ai plus largement expérimenté le canvas (pour les logos) et le CSS. Sur un design assez angulaire, ça c’est révélé plutôt simple : beaucoup de border, de box-shadow et de pseudo-éléments.
Je remercie @One_div au passage, pour le coup de main sur les formes complexes, telles que les hexagones des avatars, dans les commentaires.

Pour les formes très complexes telles que les pictos, j’ai utilisé une fonte d’icône, composée via l’application icomoon.

Une meilleure lecture sur le site

Wabeo c’est surtout un blog. Pour ça je me suis donc appliqué à rendre la lecture plus agréable. L’article dispose de plus de place pour s’afficher, en desktop, en tablette et en smartphone. Les différentes sections sont également plus facilement identifiables.

J’ai centralisé les informations relatives aux articles sur une colonne uniquement. Deux colonnes c’était pas pratique. Merci Daniel pour le conseil !

Les polices sont aussi plus grosses, et mieux choisies (en tout cas j’y ai mis plus de temps).

Quelques plugins choisis

Je n’ai pas utilisé des masses de plugins WordPress.

J’ai aussi utilisé colorbox, un plugin de jQuery pour faire des boites modales, simple et très facilement paramétrable.

Qu’en pensez-vous ?

Alors, dites-moi ce que vous en pensez ? Je suis curieux 🙂

Je remercie encore chaleureusement tous ceux qui m’ont aidés, qui m’ont donné leurs avis, qui m’ont supportés…

Merci Daniel, Djimmy, Julio, Benny, Amandine, Anne-So, Vincent, Hélène et tous les ex-collègues de FC !

18 commentaires
Julio Potier, il y a 3 années
haaa quand on vient chez wabeo, ça sent l’innovation, la recherche. Ca sent pas le themeforest ici hahaha
Bravo pour ce design hors du commun, et la navigation simple mais plutot claire.
Pour l’ajax, on voit ça chez moi 😉
See you !
Greg, il y a 3 années
Je dis bravo, ça claque, autant côté design que technique 🙂
Haaa… SF Smilies… J’airais mieux à montrer lorsque la V3 de mon site sortira x) (si elle sort un jour -_-‘)

3 bugs à signaler cependant :
– le resize de la textarea en vertical seulement serait un + àmha :

textarea { resize: vertical; }

– côté ajax, le « retour page précédente » ne fonctionne pas (bouton du navigateur). L’url change bien mais pas la page. Il faudrait attacher un event sur le changement d’url.
– côté animation du sous-menu, survoler « Thèmes » puis déplacer la souris vers le bas à gauche, boum. Solution :

.main-menu .sub-menu { pointer-event: none; }
.main-menu li:hover > .sub-menu { pointer-event: auto; }

Anyway, congrats, j’aime beaucoup 🙂

Willy Bahuaud, il y a 3 années
Ah non !! Pas de Themeforest ici monsieur !
Merci, et por l’ajax oui, il faut que le monde sache que ta technique d’ajax est excellente.
Je viens de voir que j’avais oublié de mentionner papii dans les plugins utilisés…

Bah oui, j’ai hâte de voir ta v3, je suis sûr qu’elle poutre déjà, graphiquement et techniquement.
Merci pour les retours, je corrige ça illico 🙂

Rémy, il y a 3 années
C’est vraiment une belle démo de tes compétences ton site, j’admire ! J’avoue que le site perso rien de mieux pour tester tout ce que tu as envie.

Un jour moi aussi je referai le mien…En attendant je suis curieux de cet article à propos d’AJAX, j’ai souvent l’occasion d’utiliser admin-ajax et je suis pas sûr de le faire correctement

Fabrice, il y a 3 années
C’est beau, c’est propre et ça claque ! Bravo Willy.

Ton site (et quelques autres) est toujours parmi les sites exemples WP que je montre à mes stagiaires et ils en raffolent 😉

imath, il y a 3 années
Très belle réalisation! Bravo 😉
Daniel, il y a 3 années
Bravo pour ce nouveau thème. Comme je te l’ai déjà dit, il est bien plus lisible et agréable à lire que l’ancien 😉
Aurélien Denis, il y a 3 années
J’adhère complètement ! Beaucoup d’innovations… ça donne envie de se bouger le c** pour tenter de faire aussi bien chez soi.

Top !

Gaël Poupard, il y a 3 années
Su-per-beuh !!!

La précédente version m’avait déjà bien inspirée (merci les astuces pour le sommaire notamment <3) mais je suis impressionné : cette nouvelle mouture est encore plus belle et agréable à utiliser !

Question qualité le seul «détail» qui me chiffonne est l’accessibilité : c’est le seul point qui pourrait être amélioré (à mon avis).

Excellent travail, j’ai hâte de découvrir les prochains articles : wabeo est une mine d’or pour moi 🙂

th.quinton, il y a 3 années
Original, attractif, donne de nouvelles orientations, à suivre..
Benoit, il y a 3 années
Vraiment pas mal du tout ce design ! Combien de temps cela a t’il pris en tout ?
Dans le style refonte radicale que penses tu de http://www.info-ecommerce.fr ? moins graphique mais la navigation est très travaillé.
Willy Bahuaud, il y a 3 années
Merci ! Si tu t’attaques à ta refonte maintenant, tu as de forte chance de la sortir avant ^^

Merci ! Je suis content que ça leur plaise, et si ça peut les inciter à aller vers des thèmes plus originaux, je n’en suis que lus content 😀

, Merci pour les compliments 🙂

Merci, et merci aussi pour ton regard au fil du développement de ce thème. Et merci de m’avoir initié à WordPress il y a 6ans…

Merci, aller… viens rejoindre le club des refontes…

Merci 🙂 Pour l’accessibilité je sais que c’est pas top. Mais grâce à ton blog et tes conseils, je vais corriger ça… (et merci pour la mine d’or ^^)

Je n’ai pas trop compté… j’y suis en dilettante depuis un an, et je bosse activement dessus depuis deux semaines. Le plus long ça a été de faire le background en webGL. Sympa ton site !

G3no, il y a 3 années
pfffffff c’est juste énorme ce design. pas à ma portée (chuis noob ascendant démerdard dans l’horoscope wordpressien) mais ça donne envie c’est certain.
Greg, il y a 3 années
D’OH!
Rodrigue, il y a 3 années
J’ai eu l’occasion de voir en action ton design lors de nos soirées aux pays bas, et le voici en prod.

J’aime vraiment la sensation de simplicité qu’il procure et pour être franc (maintenant qu’il est en ligne) je le trouve plus fonctionnel que l’ancien.

Super job

Anne-So L., il y a 3 années
Rapide, efficace et BEAU ! Que demander de mieux ?! Bravo WaBEO !
Par contre attention aux petites fautes d’orthographe ^^ (l’ex-collègue relou). Bisous Willy ! Bon vent et donne des news hein !
Willy Bahuaud, il y a 3 années
Merci ! Le rendre plus fonctionnel et plus graphique était mon intention ; je suis content que ça fonctionne.

Merci, expèce de grammar nazi 🙂
Je ne manquerai pas de donner des news, ne t’inquiète pas.

Said, il y a 2 années
J’ai été absolument ébahi par le rafinement du graphisme et de la fluidité de navigation. Un grand bravo

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Publié le 19 novembre 2013
par Willy Bahuaud
Catégorie Design de sites et logos