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 !

Contacter l'auteur :

willy bahuaud

Je suis Willy Bahuaud, intégrateur et développeur, spécialiste de WordPress.
Besoin de mes services ? Écrivez-moi !

18 commentaires

  1. Par 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 !
  2. Par 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 🙂

  3. Par 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 🙂

  4. Par 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

  5. Par 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 ;)

  6. Par imath — Il y a 3 années
    Très belle réalisation! Bravo ;)
  7. Par 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 ;)
  8. Par 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 !

  9. Par 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 🙂

  10. Par th.quinton — Il y a 3 années
    Original, attractif, donne de nouvelles orientations, à suivre..
  11. Par 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é.
  12. Par 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 !

  13. Par 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.
  14. Par Greg — Il y a 3 années
    D’OH!
  15. Par 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

  16. Par 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 !
  17. Par 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.

  18. Par 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

Commenter