Statut : Working Draft (WD)
Cette présente convention rassemble les bonnes pratiques WordPress en production appliquées par l'agence web Alsacreations.fr. Elle a pour but d'évoluer dans le temps et de s'adapter à chaque nouveau projet.
Sont indiquées en gras les étapes prioritaires dans notre processus.
| Étape | Nom | Définition | Outil préconisé |
|---|---|---|---|
| Prospection / Démarrage | Arborescence | Arborescence visuelle qui permet d’identifier les différents modèles de pages | Octopus |
| Prospection / Démarrage | Maquette d’intention | Maquette de la Home réalisée pour convaincre un client de nos compétences | Figma |
| Design | Moodboard | Planche de tendances. Type de collage qui peut être composé d'images, de texte et d'objets selon le choix de son créateur | Whimsical |
| Design | Zonings | Zones fonctionnelles, emplacements du contenu (zone emploi, zone blog) | Figma voire Octopus |
| Design | Wireframes | Zonings fil-de-fer avec texte / composants intégrés (ex. zone emploi avec 3 icônes et 2 zones de texte). Aucun design associé. | Figma |
| Design | Wireframes interactifs | Wireframes avec navigation, actions et animations possibles | Figma, Flow |
| Design | Maquettes | Couche graphique appliquée aux wireframes. Design définitif livrable pour intégration. | Figma |
| Design / Intégration | UI Kit | Couleurs utilisées, polices, visuel des composants principaux, images et icônes utilisées. Étape préparatrice à l’intégration | Figma |
| Intégration | Styleguide | Liste des composants, avec code HTML / CSS / JS associés. Assure la consistance et la maintenance de l’intégration au cours du temps | Storybook |
| Toutes | Design System | Ensemble des étapes précédentes + Guidelines (documentation et bonnes pratiques) |
Les étapes menant de la réalisation des maquettes à l’intégration web sont réalisées sous cette forme et à l’aide des outils suivants :
- Réalisation avec Figma.
- Consultation par tous et commentaires à l'aide du partage de Figma (ou option inVision).
- Inspection pour phase d'intégration à l'aide de Figma.
Au sein de notre processus interne, les contenus indispensables à produire lors de chaque étape sont consignés ci-dessous.
Les pages à ne pas oublier de faire apparaître dans l'arborescence sont :
- Pages principales. Exemples :
- Accueil (home)
- À propos
- Contact
- Page de catégorie produit / service / article
- Page de présentation produit / service / article
- Pages internes. Exemples :
- Landing pages pour télécharger un document, s’inscrire à un événement,…
- Page de remerciements suite à un téléchargement ou une inscription
- Page de résultats de recherche
- Pages annexes
- Page d'erreur 404 (voire d'erreur 500)
- Les éléments dépendants. Exemple :
- Envoi d’un mail automatique après une inscription à la newsletter ou à un événement, ou suite à un téléchargement
Un Wireframe consiste en des tracés de type “fil-de-fer” avec textes et composants intégrés (par exemple une “zone emploi” avec 3 icônes et 2 emplacements de texte).
Aucun design ni aucune couleur ne sont associés au Wireframe qui doit demeurer neutre pour se concentrer exclusivement sur les aspects fonctionnels et ergonomiques du site web.
Les pages concernées par les wireframes dépendent du projet, mais "un nombre représentatif" sera conçu (à minima la page d'accueil, une page de contenu et la page de contact).
Les éléments à ne pas oublier de faire apparaître dans les wireframes/maquettes sont :
- Le•s logo•s
- Navigation principale + secondaire (menu desktop, menu mobile)
- Fil d’ariane
- Modale (pop-in)
- Nous reprenons les textes et contenus (noms, fil d’ariane, navigation), s’il n’y en a pas, nous utilisons un texte de remplacement (ex. Schnapsum, Lorem Ipsum) mais idéalement il faut un vrai contenu
- Header et Footer
- Navigation desktop et mobile
- Barre de recherche
- Informations de contact (formulaire, adresse, téléphone)
- Liens vers
- Plan du site
- Mentions légales
- Politique de confidentialité
- Politique d'écoconception
- Conditions générales (si concerné)
- Déclaration d'accessibilité (si concerné)
- Mention “alsacréations”
- Réseaux sociaux
- Choix de la langue (en toutes lettres, pas de drapeaux)
- Options d’accessibilité (couleurs, taille de texte)
- Liens d’évitement
- Un CTA par page et/ou liens internes
- Mentions et coche sous les formulaires :
- RGPD + lien vers la Politique de confidentialité : toujours, obligatoire sous tous les formulaires sans exception.
- Si les informations saisies dans un formulaire peuvent être utilisées pour autre chose que l’objet principal de ce formulaire, il faut des opt-in par utilisation supplémentaire. Exemples :
- J'accepte de recevoir des offres commerciales
- J'accepte d’être informé•e des bons plans des partenaires de NOM DU CLIENT
- J'accepte de recevoir la newsletter mensuelle
- J'accepte les conditions générales d’utilisation (+URL)
La Maquette est l’évolution logique du Wireframe en y ajoutant la couche graphique et design. Les maquettes constituent le livrable définitif pour intégration.
La maquette doit comporter l’ensemble des éléments du wireframe (si l’élément est concerné) ainsi que :
- La page 404
- Le bandeau Cookies
La conception de nos maquettes est réalisée dans un esprit "Mobile First" (meilleures performances générales) c'est à dire que la priorité est donnée aux vues "Mobiles", puis déclinées en vues "Desktop", avec "adaptation au mieux" pour devices intermédiaires.
Les maquettes conçues respectent les Points de Rupture (Breakpoints) recommandés dans nos Guidelines CSS.
Comme pour la phase de Wireframe, les pages concernées par les maquettes Mobiles ou Desktop dépendent du projet, mais "un nombre représentatif" sera proposé (à minima la page d'accueil, une page de contenu et la page de contact).
L’UI-Kit est un document servant de passerelle entre le designer et l’intégrateur. Il s’agit d’une “planche anatomique” où sont détaillés les éléments indispensables pour l’intégration : les valeurs de couleurs, les polices, les visuels des composants principaux, images et icônes y sont représentés.
Attention : ne pas se fier au rendu des couleurs avec les pipettes des navigateurs ou d’InVision.
- Couleurs utilisées (textes, background, décorations), ainsi que couleurs
- hover (survol)
- focus (pour les éléments pouvant recevoir le focus, liens, boutons, input)
- active (pour les liens)
- visited (pour les liens)
- Familles de police (ainsi que variantes gras, semi-gras, italique, …) + lien de téléchargement
- Tailles de polices et hauteurs de lignes utilisées
- Valeurs des espacements utilisés (padding, margin)
- Valeurs des coins arrondis
- Les éléments HTML “classiques” (titres, paragraphes, listes, boutons, formulaires, tableaux)
- Composants présents dans la maquette (boîtes, alertes, pagination, navigation, …)
- Une barre de séparation horizontale :
<hr>(si présente)
- Les états d’avertissement/erreur/info sur certains éléments (si présents)
- Les champs obligatoires des formulaires
- Les champs disabled des formulaires
- Les messages d’erreur des formulaires
- Les boutons primaires et secondaires (un exemple de bouton qui n'est pas un submit, par exemple un "annuler")
- Les cases à cocher button/checkbox (avec leurs différents états)
- Les états de survol / focus (liens, formulaires, boutons, etc.)
- Les exemples de transitions ou animations (faire des liens vers des démos)
- Les Liens d’évitement masqués au départ et déclenchés avec la touche Tab (cf. nos Guidelines HTML)
- Une référence (lien) vers l’endroit où sont stockés tous les assets (images, icônes, favicon, bouton burger, polices, etc.). Le format SVG est privilégié pour les icônes, sauf cas exceptionnel
- Liens vers les banques d’images utilisées
- La compression et l’optimisation des SVG/fonts est à la charge de l’intégrateur
- La compression et l’optimisation des Bitmap (Jpeg, png, webp, avif) est à la charge du/de la webdesigneur/euse
- Option : un style de lien externe, par exemple avec une icône “↗” (accessibilité)
- L’ensemble des livrables présentés sont validés directement par le lien de consultation (Figma, inVision).
- Les autres livrables sont validés par e-mail.
Une grille de mise en forme est une aide précieuse pour le Designer (respect des alignements et des proportions). Le designer choisit son format de grille colonnes/tailles, l’applique uniformément à l’ensemble des maquettes et en informe l’Intégrateur.
L’Intégrateur, lui, va raisonner en “composants” plutôt qu’en mise en page globale et s’adapte à la grille proposée par le Designer.
Pour des raisons de performance, il est conseillé :
- Titrages : se limiter à deux Familles de police au maximum (ex. Merryweather et Roboto)
- Titrages : se limiter à 3-4 Variantes de police au maximum (ex. Merryweather bold, Roboto regular, Roboto bold, Roboto italic)
- Labeur : “system font” par défaut de préférence (ex. system-ui)
Si le nombre de variantes pour une police est supérieur à 3 alors une “Variable Font” devient plus intéressante en termes de poids/requêtes car 1 seul fichier pour toute la famille de police.
Certains mots peuvent être plus longs dans d'autres langues, il faut les simuler, notamment dans la navigation, les boutons d'action, et dans les titres pour provoquer des retours à la ligne. Smartcat permet de la traduction dans Figma.
L'icône à fournir à l’intégrateur est au format SVG et PNG à la taille 1024x1024px, si possible.
L’intégration du favicon est à la charge de l’Intégrateur et est décrite dans nos Guidelines HTML.
Afin d’optimiser la netteté des images Bitmap (jpg, png) sur écrans Retina et Haute Définition, lors de la livraison de la maquette, chaque image bitmap (photo, arrière-plan) est fournie en SD (x1) et HD (x2).
Les formats privilégiés à transmettre à l’Intégrateur :
- JPG, WebP, AVIF : photos et images bitmap en général
- PNG : images bitmap nécessitant de la transparence et une compression non destructrice
- SVG : iconographie, schémas et images vectorielles
L’intégrateur aura à sa charge l’optimisation du poids des assets (notamment le choix du format et de la compression des images). cf. Guidelines de performance.
- Tailles des zones de touch en mobile + espacements suffisants entre les zones
- Présence d’un menu de liens rapides
- Indication visuelle de la page active
- Les liens et zones cliquables sont visuellement identifiés (ex. soulignement d'un lien)
- Les éléments interactifs doivent toujours être perceptibles (ex. navigation clavier ou pointeur)
- Respecter le contraste de couleur + gammes de couleurs
- Ne pas indiquer une information uniquement par la couleur.
- Respecter une taille minimum de police pour la lisibilité.
- Clarté du/des textes/du langage
- Mise en contexte des "Call To Action"
- Boutons descriptifs (pas de “cliquez ici”)
- Indiquer l’ouverture d’un lien dans une nouvelle fenêtre (“ce lien s’ouvrira dans une nouvelle fenêtre”)
- Proposer différents médias de contact (téléphone, mail)
- Pas de textes trop longs (utiliser les titres, segmenter, aérer, intégrer des images…)
- Bon espacement des lignes de texte
- Pas de texte justifié
- Conserver les accents sur les majuscules
- Expliciter les abréviations
- Déclarer les citations
- Limiter les informations à télécharger et préférer l’incorporation directement dans la page
- Indiquer clairement quels libellés correspondent à quels champs de formulaires
- Les libellés et les champs doivent être accolés
- Boutons radios/checkboxes : le champ de sélection doit être large et pas seulement sur la box
- Indication des champs obligatoires
- Indication des formats de saisie (numérique, …)
- Validation et affichage des erreurs en temps réel des formulaires (sans actualisation)
- Indiquer le format et la taille des fichiers en téléchargement
- Icônes et/ou images accompagnées d’un texte/intitulé si nécessaire