---
sidebar_position: 1
title: "CP 1"
description: "Synthèse de la CP 1 \"Maquetter une application\" du titre professionnel Développeur Web et Web Mobile (DWWM TP-01280m03, référentiel expiré)."
---
import Admonition from '@theme/Admonition';
# Maquetter une application
[Aller sur le contenu du nouveau référentiel en vigueur](/titres-professionnels/DWWM/intro)
## 📚 Références
- REAC _(mise à jour du 27/04/2018)_, pages 13 et 14
- RC _(mise à jour du 19/04/2018)_, page 9
## 📋 En résumé
Dans cette compétence professionnelle, tu devras démontrer tes compétences sur la conception du front-end, à savoir :
- La réalisation d'un cahier des charges
- La conception des wireframes _(desktop et mobile)_, réalisés à partir des besoins du clients _(ou user stories)_ puis des maquettes en appliquant la charte graphique
- Arborescence des pages
Comme tu peux le constater, ici il n'est pas question de code : uniquement de la conception de l'interface utilisateur et de son ergonomie 😉
Avant d'enchaîner avec les critères d'évaluation et la prochaine compétence professionnelle, voici quelques informations complémentaires qui sont importantes.
## ➕ Informations complémentaires
Bien qu'on soit tous tentés de se jeter directement dans le code, il est important de bien maquetter son application avant de commencer à coder.
Surtout si tu travailles en équipe, cela permet de bien comprendre les besoins du client et de s'assurer que tout le monde est sur la même longueur d'onde.
Voici les étapes à suivre pour bien maquetter son application :
1. **Récupération des besoins du client**
- Si tu as des user stories, c'est le moment de les relire
- Si tu n'as pas de user stories, c'est le moment de les rédiger à partir des besoins du client
- C'est aussi à ce moment que l'on rédige le cahier des charges
2. **Arborescence des pages**
- Elle permet de définir les liens entre les différentes pages de l'application, comme un plan de site
- Pense à distinguer les pages accessibles par tous des pages accessibles uniquement par les utilisateurs connectés _(par exemple)_
3. **Création des zonings**
- Ils permettent de définir les zones de l'application, sans définir le contenu
4. **Conception des wireframes**
- Ils complètent les zonings en définissant le contenu des zones
5. **Création de la charte graphique**
- Elle permet de définir les couleurs, les polices, les icônes, etc.
6. **Conception des maquettes**
- Elles permettent de visualiser l'application finale, en appliquant la charte graphique définie plus tôt sur les wireframes déjà réalisés
7. **Prototypage**
- Il permet de simuler l'application pour valider l'expérience utilisateur
- Tu as plusieurs outils pour réaliser des prototypes, comme [Figma](https://www.figma.com/fr-fr/), [Adobe XD](https://www.adobe.com/fr/products/xd.html), [Sketch](https://www.sketch.com/), etc.
Ce n'est qu'une fois toutes ces étapes réalisées que tu pourras te lancer dans le code, pour l'intégration de l'interface utilisateur.
### ⚙️ Ergonomie
- On essaye de ne pas perdre l'utilisateur avec une interface trop complexe
- On essaye de le guider dans son parcours utilisateur
- On lui évite de devoir réfléchir où se trouve l'information qu'il recherche en minimisant le nombre de clics
### 👓 Accessibilité
- On évite les couleurs trop proches ou trop peu contrastées _(WCAG)_
- On prévoit des alternatives textuelles pour les images, vidéos et autres médias
Pour vérifier si les couleurs de ton site respectent les normes d'accessibilité, tu peux utiliser des outils comme [WebAim Contrast Checker](https://webaim.org/resources/contrastchecker/), [Contrast Checker](https://contrastchecker.com/) ou encore [Coolors](https://coolors.co/contrast-checker/112a46-acc8e5).
L'idée est de viser le niveau AA au strict minimum et idéalement le niveau AAA.
Tu as également des extensions pour Firefox et Chrome qui te permettent de vérifier les contrastes directement sur ton site :
- [_(Firefox)_ WCAG Contrast Checker, par Jorge Rumoroso](https://addons.mozilla.org/fr/firefox/addon/wcag-contrast-checker)
- [_(Chrome)_ WCAG Color Contrast Checker, par Jorge Rumoroso](https://chromewebstore.google.com/detail/wcag-color-contrast-check/plnahcmalebffmaghcpcmpaciebdhgdf)
## 🎯 Critères d'évaluation
- La maquette prend en compte les spécificités fonctionnelles décrites dans les cas d'utilisation ou les scénarios utilisateur
- La maquette est conforme à l'expérience utilisateur et à l'équipement ciblé
- La maquette respecte les principes de sécurisation d'une interface utilisateur
- Le contenu de la maquette, pour la partie visible, est rédigé, en français ou en anglais, de façon adaptée à l'interlocuteur et sans faute
## 🤯 Aller plus loin _(hors référentiel)_
Même si le référentiel ne le mentionne pas, il est important de bien concevoir les wireframes _(desktop et mobile)_
pour bien comprendre les besoins du client et les retranscrire dans les maquettes.
Au delà de la prise en compte des besoins du client, il est important de prendre en compte les spécificités des utilisateurs,
allant de l'ergonomie à l'accessibilité.
---
## 🧠 Documentation
- [Wikipédia - Wireframe _(design)_](https://fr.wikipedia.org/wiki/Wireframe_(design))
- [Atlassian - User stories](https://www.atlassian.com/fr/agile/project-management/user-stories)
## 🛠️ Outils
- [Figma - Outil de création de design](https://www.figma.com/fr-fr/)
- [Adobe XD - Outil de design et de prototypage](https://www.adobe.com/fr/products/xd.html)
- [Sketch - Outil de design](https://www.sketch.com/)
- [GlooMaps - Générateur d'arborescence de pages](https://www.gloomaps.com/)
- [WebAim Contrast Checker](https://webaim.org/resources/contrastchecker/)
- [Contrast Checker](https://contrastchecker.com/)
- [Coolors - Contrast Checker](https://coolors.co/contrast-checker/112a46-acc8e5)