Composer des pages cohérentes avec les contenus et les objectifs du site.
Ces fiches décrivent des activités et des exercices pédagogiques. Elles ne constituent ni des offres d’emploi, ni des parcours certifiants, ni des promesses de recrutement.
Toutes les fiches métiers
Construire une présentation de site qui associe identité visuelle, structure éditoriale et parcours. Le webdesign traduit les priorités du projet dans des pages dont les informations et les actions restent compréhensibles.
Le graphisme ne remplace pas la validation des textes, des droits des photos ou des fonctionnalités. Le webdesigner travaille avec les responsables éditoriaux et l’intégration pour vérifier la page complète.
Montrer un accueil et une page intérieure avec textes longs, navigation mobile et un parcours de contact testable.
Ce repère éditorial décrit des activités fréquentes. Les intitulés et périmètres varient selon les équipes ; il ne constitue pas un référentiel de certification.
W3C : organiser les responsabilités d’accessibilité dans une équipe
Préparer une page de service et sa version mobile avec les vrais textes et des médias autorisés.
Travaillez sur une copie ou un environnement de démonstration. Définissez les données utilisées et le résultat attendu avant de commencer. Conservez vos décisions et les difficultés rencontrées afin de pouvoir expliquer la démarche.
Une composition de pages, des adaptations aux écrans et des règles de réutilisation.
La lecture des contenus et l’action attendue restent visibles sans dépendre d’un effet ou d’une image unique.
Pour chaque contrôle, notez le contexte, l’action, le résultat attendu et ce qui a été observé. Distinguez une vérification réussie d’une hypothèse restant à confirmer. Une autre personne doit pouvoir comprendre le livrable sans assister à toute sa fabrication.
Utiliser le carnet de recetteUne capture d’écran attractive ne démontre ni la compréhension de l’offre ni la qualité d’un parcours. Vérifiez la hiérarchie avec une tâche réelle.
Collaboration à explorer : Design UI.
Précisez le partage des responsabilités : qui fournit les informations, qui tranche, qui vérifie et qui entretient le résultat. Un bon passage de relais conserve les contraintes et les décisions, pas seulement le fichier final.
Emploi, métiers et formationsLe webdesign doit relier la hiérarchie visuelle à la tâche du visiteur. Une belle page ne suffit pas si l’on ne retrouve pas l’information utile, le contexte d’un prix ou l’action suivante sur téléphone.
| Compétence | Preuve à examiner | Erreur à repérer |
|---|---|---|
| Hiérarchie | Le titre, les informations décisives et l’action principale sont reconnaissables. | Toutes les zones ont le même poids ou plusieurs actions se concurrencent. |
| Médias | Le cadrage garde le sujet et le texte reste lisible sans image. | Une information essentielle est intégrée seulement dans une photo. |
| Parcours | La page reste compréhensible depuis un lien direct et au clavier. | La compréhension dépend d’avoir vu la page d’accueil. |
Télécharger la grille CSV à compléter
Le fichier reprend ce tableau et ajoute des colonnes vides pour le résultat observé, le responsable et la suite à donner. Il s’ouvre dans un tableur ; son téléchargement ne transmet pas vos observations au site.
Reprenez une page sans ses images et demandez à une autre personne d’en retrouver l’objet et l’action. Réintroduisez ensuite les visuels en vérifiant qu’ils servent la compréhension et que leurs droits et leur usage sont documentés.
Exercice approfondi : mettez en page une page de service avec introduction, photo, preuves disponibles et contact. Comparez le rendu à 390, 768, 1 440 et 1 920 pixels de largeur. Utilisez un titre long et un paragraphe de deux fois la longueur prévue pour éprouver les colonnes. Expliquez comment la largeur de lecture, la taille des titres et la place de la photo évoluent. Conservez les mêmes priorités éditoriales entre smartphone et ordinateur, même lorsque la disposition change.
Ces critères sont une base de travail à adapter au contexte. Pour chacun, notez l’action effectuée, le résultat attendu, le résultat observé et les informations restant à confirmer.
Transmettez les règles de disposition avec les maquettes. Précisez les limites de largeur, les points de changement de colonnes et le cadrage de chaque image. Vérifiez l’intégration sur le vrai contenu et sur une traduction plus longue. Gardez une capture par format pour discuter d’un écart concret : une indication telle que « rendre plus équilibré » ne suffit pas à reproduire une décision de mise en page.
Une proposition graphique doit fonctionner avec les contraintes du site. Une direction visuelle exploratoire et une maquette prête à intégrer n’engagent pas le même niveau de détail.
Une maquette peut masquer une photo lourde, un titre impossible à conserver ou une colonne incompatible avec une traduction. Testez ces contraintes avant validation.
Construisez une page représentative en HTML ou dans un prototype adapté. Comparez la lecture sur téléphone et grand écran, puis consignez les règles communes.
Il permet de montrer une démarche et ses limites. Il ne constitue ni un diplôme, ni une certification, ni la preuve d’une expérience de production.
Précisez qu’il s’agit d’un exercice, votre rôle, les contraintes, les décisions et les vérifications. Utilisez des données de test et des médias dont les droits sont établis.
La lecture des contenus et l’action attendue restent visibles sans dépendre d’un effet ou d’une image unique. Ajoutez les difficultés rencontrées et ce qui reste à vérifier plutôt que de présenter une validation absolue.
Définissez surtout les règles reliant les dispositions et montrez les changements importants. Vérifiez ensuite la réalisation entre les largeurs montrées, avec des contenus et interactions réels. Les captures seules ne décrivent pas tous les comportements.
