Aller au contenu
Tous les projets

Projet d’équipe

Design web – Webjam 2026

Design du site WordPress de PhytoTech, qui présente le Q-tipousse, une invention fictive créée pour le Webjam 2026.

Découvrir le Webjam

Gagnant Meilleur site web Webjam 2026

Rôles

  • Maquettes des pages
  • Création du design system
  • Animations de survol des cartes et boutons

Outils

Utilisation de l’IA

Images et application d’animations GSAP (Claude, Gemini)

Étapes de réalisation

Les 5 grandes étapes du projet

  1. Idée et plan du site

    Un remue-méninges en équipe dès le début du défi pour choisir le Q-tipousse et PhytoTech, puis le contenu de chaque page et la navigation, pour que tout le monde parte du même plan.

  2. Wireframes et design system

    En parallèle : wireframes simples par Éli et design system complet dans Figma par Nathan, menés en même temps pour gagner du temps.

  3. Maquettes finales

    16 heures de design dans Figma avec les vrais textes et images, en faisant le point avec l’équipe toutes les 30 minutes.

  4. De HTML/CSS à WordPress

    Le HTML/CSS d’abord, codé à plusieurs sur la même branche GitHub (une page par personne, chaque commit annoncé à voix haute), puis converti en PHP pour un thème WordPress avec CPT, ACF et formulaire.

  5. Animations

    Animations codées à la main : survols des cartes et des boutons par Nathan, tiroirs par Éli. Pour GSAP, des exemples du site officiel adaptés avec Claude et Gemini.

Résultat final

Q-tipousse

Webjam 2026 — PhytoTech

Visiter le site
  • Nathan Fortier
  • Miro Leblanc
  • Yoan Robitaille
  • Éli Bousquet

Collaborateurs

Miro Leblanc (intégration et back-end WordPress), Yoan Robitaille (intégration HTML/CSS) et Éli Bousquet (intégration et animations GSAP).

Crédits

  • Design et maquettes : Nathan Fortier
  • Back-end WordPress : Miro Leblanc
  • Intégration : Yoan Robitaille et Éli Bousquet
  • Animations : Nathan Fortier (survol des cartes et boutons) et Éli Bousquet (tiroirs)

Défis et solutions

Des problèmes à régler

  • Fatigue

    Rester concentré jusqu’à 4 h du matin pour livrer le design, avec seulement 2 h de sommeil.

    Tenir grâce à un coéquipier lui aussi réveillé et à de la musique de Noël à plein volume… un 10 octobre, de 17 h à 4 h du matin.

  • Répartir les tâches

    Diviser le travail à quatre sans que personne ne bloque ou ne reste sans rien à faire.

    Attribuer un rôle précis à chacun avant même le Webjam. Comme tout le monde savait un peu tout faire, chacun pouvait ensuite aider à avancer le travail d’un autre.

Solutions

  • Tenir grâce à un coéquipier lui aussi réveillé et à de la musique de Noël à plein volume… un 10 octobre, de 17 h à 4 h du matin.

  • Attribuer un rôle précis à chacun avant même le Webjam. Comme tout le monde savait un peu tout faire, chacun pouvait ensuite aider à avancer le travail d’un autre.