Cadrer le projet : maquette, arborescence, contenu et design

Vous avez appris les briques : HTML sémantique, CSS, Flexbox, Grid, responsive, accessibilité. Reste à les assembler. Avant d’écrire la moindre ligne de code, les professionnels prennent un moment pour réfléchir : à qui s’adresse le site, que doit-il contenir, à quoi doit-il ressembler ? Ce temps de cadrage évite de recommencer dix fois et vous fait gagner du temps ensuite. Dans cette leçon, vous préparez le projet final : le portfolio de Camille Morel, ou votre propre site si vous préférez.

Étape 1 : clarifier l’objectif

Un site sans objectif devient vite un fourre-tout. Répondez par écrit, en une ou deux phrases chacune, à ces questions :

• À quoi sert le site ? Camille veut présenter son travail et recevoir des demandes de devis ;
• À qui s’adresse-t-il ? À des particuliers, des artisans et des associations qui cherchent un photographe ;
• Quelle action attendue du visiteur ? Qu’il contacte Camille. C’est le « but » vers lequel tout doit mener ;
• Quelle impression produire ? Chaleureuse, soignée, professionnelle, sans surcharge.

Ces réponses servent de boussole : à chaque élément que vous ajoutez, demandez-vous s’il aide ce but. Sinon, il a peut-être sa place ailleurs… ou nulle part.

Étape 2 : inventorier le contenu

Le contenu passe avant le design. Un site se construit autour de ce qu’il a à dire, pas l’inverse. Faites la liste de ce que vous avez à disposition :

Rédigez les textes en amont, plutôt que d’écrire « Lorem ipsum » en espérant trouver l’inspiration plus tard. Un texte réel révèle immédiatement si un titre est trop long, si une carte est trop haute, si un paragraphe est trop dense.

Étape 3 : définir l’arborescence

L’arborescence du site est l’organisation de ses pages. Pour un petit portfolio, on peut choisir entre une page unique (« one-page ») avec plusieurs sections accessibles par ancres, ou plusieurs pages. Voici les deux options :

• Page unique : tout sur index.html, avec un menu qui défile vers les sections. Simple à construire et agréable pour un contenu court ;
• Plusieurs pages : index.html, projets.html, contact.html, etc. Mieux adapté à un contenu plus abondant, et plus facile à référencer page par page.

Pour le projet final, nous choisissons une page unique complétée par une page de mentions légales : c’est un excellent exercice et la quantité de contenu s’y prête. Voici le dossier du projet :

camille-morel/
├── index.html
├── mentions-legales.html
├── favicon.svg
├── css/
│   └── style.css
└── images/
    ├── portrait.jpg
    ├── apercu.jpg
    └── projets/
        ├── alpes.jpg
        ├── artisans.jpg
        └── mariage.jpg

Notez que le menu de la page d’accueil ne devra pas contenir plus de cinq entrées : Projets, À propos, Contact. Trop de choix noie le visiteur.

Étape 4 : esquisser la maquette

Une maquette (ou « wireframe ») est un schéma simple de chaque page, sans couleurs ni photos : juste des rectangles qui indiquent ce qui se place où. Prenez une feuille et un crayon. Dessinez d’abord la version mobile (une colonne), puis la version grand écran. Pour la page de Camille :

MOBILE                    ORDINATEUR
+----------------+        +--------------------------------+
| Logo   [Menu]  |        | Logo         Projets  Contact  |
+----------------+        +--------------------------------+
|     HERO       |        |  HERO : titre + accroche + bouton|
|  titre + bouton|        +--------------------------------+
+----------------+        | Projets : 3 cartes côte à côte |
| Projet 1       |        +--------------------------------+
| Projet 2       |        | À propos : portrait | texte    |
| Projet 3       |        +--------------------------------+
+----------------+        | Contact : formulaire           |
| À propos       |        +--------------------------------+
+----------------+        | Pied de page                   |
| Contact        |        +--------------------------------+
+----------------+
| Pied de page   |

Vous pouvez aussi vous aider d’un outil de maquettage, mais un simple papier fait très bien l’affaire. L’intérêt est de réfléchir à la hiérarchie : qu’est-ce qui doit se voir en premier, en deuxième ? Sur une page, l’œil est attiré par ce qui est grand, contrasté et en haut.

Étape 5 : choisir un design simple et cohérent

Vous n’avez pas besoin d’être graphiste. Quelques décisions suffisent pour un résultat cohérent :

• Palette : quatre couleurs, dont un texte foncé sur fond clair avec un bon contraste (Camille : #1d4e5f, #e0a96d, #fafaf7, #222222) ;
• Typographie : deux familles au maximum, par exemple une police à empattements pour les titres et une police système pour le texte ;
• Espacements : une échelle régulière (0,5 rem, 1 rem, 1,5 rem, 3 rem) ;
• Composants : un style de carte, un style de bouton, appliqués partout de la même façon ;
• Images : un même traitement (ratio, coins arrondis) pour toutes les photos.

La cohérence compte plus que l’originalité : un site sobre, régulier et lisible l’emporte sur un site spectaculaire mais confus.

Étape 6 : se donner des critères de réussite

Pour savoir quand le projet est terminé, fixez-vous une liste de critères vérifiables. Voici une base que vous pourrez adapter :

1. la page est valide au validateur HTML du W3C, sans erreur ;
2. elle s’affiche correctement de 320 px de large à un grand écran, sans défilement horizontal ;
3. elle est entièrement utilisable au clavier, avec un focus visible ;
4. tous les contrastes de texte respectent au moins 4,5 pour 1 ;
5. toutes les images ont un alt pertinent et sont légères ;
6. le formulaire est complet, étiqueté et validé nativement ;
7. chaque page a un title et une meta description uniques.

Le plan de travail

Divisez le travail en petites étapes testables, comme nous l’avons fait tout au long du cours :

1. La structure HTML complète, sans style ;
2. Les variables et la base du CSS ;
3. L’en-tête et la navigation ;
4. La section d’accueil (hero) ;
5. Les cartes de projets en grille ;
6. La section « À propos » ;
7. Le formulaire de contact et le pied de page ;
8. Le responsive, l’accessibilité, les finitions ;
9. La recette finale puis la mise en ligne.

À chaque étape : on code un peu, on enregistre, on teste dans le navigateur, on corrige. Si vous avez un doute, revenez à la leçon concernée.

À vous de jouer

Rédigez votre fiche de cadrage, sur papier ou dans un fichier texte, en cinq parties : objectif et public, contenu disponible, arborescence, maquette mobile et grand écran, choix de design (palette, polices, composants). Si vous suivez Camille, complétez simplement les contenus (textes, noms des projets) avec vos propres idées.

Dans la prochaine leçon, nous construisons le site complet, étape par étape, avec tout le code commenté.