112 lines
6.2 KiB
Plaintext
112 lines
6.2 KiB
Plaintext
---
|
||
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
|
||
|
||
<Admonition type="warning" title="Attention, tu es en train de consulter un référentiel expiré !">
|
||
[Aller sur le contenu du nouveau référentiel en vigueur](/titres-professionnels/DWWM/intro)
|
||
</Admonition>
|
||
|
||
## 📚 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 _(<abbr title="Web Content Accessibility Guidelines">WCAG</abbr>)_
|
||
- On prévoit des alternatives textuelles pour les images, vidéos et autres médias
|
||
|
||
<Admonition type="info" title="Contrastes des couleurs">
|
||
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)_ <abbr title="Web Content Accessibility Guidelines">WCAG</abbr> Contrast Checker, par Jorge Rumoroso](https://addons.mozilla.org/fr/firefox/addon/wcag-contrast-checker)
|
||
- [_(Chrome)_ <abbr title="Web Content Accessibility Guidelines">WCAG</abbr> Color Contrast Checker, par Jorge Rumoroso](https://chromewebstore.google.com/detail/wcag-color-contrast-check/plnahcmalebffmaghcpcmpaciebdhgdf)
|
||
</Admonition>
|
||
|
||
## 🎯 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) |