Projet
WordPress

  • Site professionnel en ligne
  • 6 séances en classe
  • Présentation : 28 mai
  • Rendu : 29 mai 23h59

Ta mission

  • Concevoir l'architecture d'un site professionnel
  • Personnaliser un thème WordPress
  • Créer des contenus variés et soignés
  • Assurer un design responsive
  • Optimiser la performance et le cache
Voir les exigences Évaluation

Concept du projet

Le principe

Créer un site web professionnel avec WordPress sur un sujet de ton choix. Le site doit être complet, soigné et mis en ligne sur un hébergement Infomaniak.

Tu travailleras sur la conception (architecture, card sorting), le design (thème, charte graphique), les contenus et la performance du site.

Exemples de sujets

  • Portfolio personnel
  • Site d'association ou de club
  • Blog thématique (sport, cuisine, tech...)
  • Site vitrine d'entreprise fictive
  • Restaurant, salon de coiffure, garage...
  • ... tout sujet est accepté !

Chaque élève choisit un sujet différent. Le contenu et la structure seront validés avec le formateur après le card sorting.

Objectifs

Architecture du site

Structurer l'information avec le card sorting et créer une navigation claire et logique

Fiche de cadrage

Card sorting

Organiser les contenus selon la logique des utilisateurs pour définir le menu et la navigation

Fiche card sorting

Charte graphique

Choisir et appliquer une palette de couleurs, des polices et un style visuel cohérent

Fiche design

Contenus de qualité

Rédiger des textes variés, intégrer des images optimisées et structurer les pages

Responsive design

Un site qui s'adapte parfaitement à tous les écrans : mobile, tablette, desktop

Performance

Tester avec Lighthouse et optimiser les temps de chargement

UX et ergonomie

Appliquer les règles de design et d'expérience utilisateur vues en cours

À rendre

Site WordPress en ligne

Ton site doit être accessible en ligne via l'hébergement Infomaniak.

Minimum 3 pages avec contenu réel :

  • Accueil — présentation, visuels, navigation
  • Contenu principal — adapté à ton sujet (produits, portfolio, articles, services...)
  • Contact — formulaire fonctionnel + coordonnées

Le sujet est libre. Le contenu des pages sera validé avec le formateur après le card sorting.

Présentation le 28 mai

Chaque élève présente son site en 5 minutes devant la classe :

  • Montrer le site en direct
  • Expliquer les choix de design et d'architecture
  • Présenter les résultats Lighthouse
  • Montrer le responsive (mobile + desktop)

Corrections possibles jusqu'au 29 mai 23h59.

Exigences

Contenus

  • Minimum 3 pages avec contenu réel
  • Textes variés : paragraphes, listes, citations
  • Images optimisées (taille et poids)
  • Au moins 1 formulaire fonctionnel
  • Contenus originaux (pas de Lorem Ipsum)

Design

  • Thème personnalisé (pas le défaut)
  • Palette de couleurs cohérente
  • Typographie soignée et lisible
  • Mise en page responsive
  • Respect des règles UX vues en cours

Performance

  • Score Lighthouse ≥ 80 (performance)
  • Plugin de cache activé et configuré
  • Images compressées
  • Pas de plugins inutiles
  • Temps de chargement raisonnable

Planification

  1. 2 avril — Séance 1

    Architecture & démarrage

    • Finaliser le card sorting → sitemap du site
    • Choisir sa palette de couleurs (Realtime Colors)
    • Choisir et installer un thème WordPress
    • Créer toutes les pages et configurer le menu
  2. Vacances de Pâques

    Devoir obligatoire

    • Rédiger le contenu de toutes les pages (textes définitifs)
    • Préparer et optimiser les images
    • Commencer à intégrer les contenus dans WordPress
    • Sans ce travail, les séances suivantes seront insuffisantes
  3. 23 avril — Séance 2

    Contenu & personnalisation

    • Intégrer tous les contenus et médias
    • Personnaliser le thème (couleurs, logo, charte)
    • Vérifier le responsive (mobile + desktop)
  4. 30 avril — Séance 3

    Finitions design & mise en ligne

    • Finitions mise en forme et design
    • Déploiement sur Infomaniak
    • Premiers tests Lighthouse
  5. 7 mai — Séance 4

    Performance & cache

    • Installer et configurer un plugin de cache
    • Optimiser les images et la performance
    • Viser un score Lighthouse ≥ 80
  6. 21 mai — Séance 5

    Dernière séance de travail

    • Tests finaux et corrections
    • Vérification de tous les critères (checklist)
    • Préparation de la présentation
  7. 28 mai — Séance 6

    Présentations

    • Présentation du site devant la classe (5 min/élève)
    • Démonstration en direct
  8. 29 mai — 23h59

    Rendu final

    • Site en ligne sur Infomaniak
    • Dernières corrections après la présentation
    • URL du site communiquée à l'enseignant

Évaluation

Grille d'évaluation (20 pts)

Critère Pts
Contenus
Contenus variés et suffisants4
Mise en forme soignée3
Design & UX
Respect de la charte graphique3
Respect des règles UX et design3
Responsive design (mobile + desktop)3
Performance
Tests de performance réalisés (Lighthouse)2
Système de cache implémenté2
Total20

Présentation (28 mai)

La présentation fait partie de l'évaluation. Chaque élève dispose de 5 minutes pour :

  • Montrer son site en direct
  • Expliquer ses choix (thème, couleurs, architecture)
  • Montrer le responsive (redimensionner le navigateur)
  • Présenter les résultats Lighthouse

Ce qui est évalué

  • La qualité du résultat final, pas la quantité
  • La cohérence entre le design et le contenu
  • Le soin apporté aux détails
  • La capacité à expliquer ses choix

Support & IA

Aide disponible

  • En classe : questions à l'enseignant pendant les séances
  • devjs.ch : section « Préparer un projet web » (card sorting, design, UX)
  • WordPress.org : documentation officielle

Utilisation de l'IA

L'IA (ChatGPT, Claude, Copilot...) est autorisée sous conditions :

  • Tu dois comprendre 100% des choix de ton site
  • Tu dois pouvoir expliquer chaque décision de design
  • L'IA peut aider pour les textes, mais le résultat doit être personnel
  • La présentation vérifiera ta compréhension réelle

Un site généré sans compréhension = 0 points.

Checklist d'auto-évaluation

Coche chaque item au fur et à mesure. Ta progression est sauvegardée automatiquement.

0% complété

Contenus

Design & UX

Performance

Préparation