Avant de développer un site web ou une application, il est nécessaire de passer par la phase de maquettage. Notre équipe peut se charger directement de réaliser vos maquettes, ou encore de développer directement à partir des fichiers que vous nous aurez fourni.
Mais, parce que nous avons une équipe de divas (développeurs), j'ai quelques pistes à vous donner afin d'éviter d'entendre grmmgrlgrml jusqu'à chez vous.
Logiciels :
- Sketch est recommandé (uniquement sur mac)
- Adobe XD (gratuit, mac et windows)
- Photoshop (mac et windows) non recommandé mais possible dans certains cas
- Figma (online)
Interdits : Indesign, Illustrator
Dimensions :
Desktop : 1920px de large
Mobile : L : 375, H : 812 px
Grille :
Nous utilisons une grille afin de faciliter l’integration des maquettes par les développeurs. C’est une grille Bootstrap. En responsive, les éléments passent automatique les uns en dessous des autres.
Layout Settings, 
- Largeur totale : 1140px
- 12 colonnes
- Taille des gouttières variables (20px ou 30px)
- Largeur d’une colonne en fonction de la taille des gouttières (77px ou 65px)
- Grille centrale
- Les éléments de contenu doivent se trouver dans la grille.
- Les éléments de décoration peuvent utiliser la largeur totale de la maquette.
- Il est recommandé de placer un seul élément à l’intérieur d’une colonne (ne pas chevaucher deux éléments dans une même colonne).
Icônes :
- Les icônes doivent être des
Symbols,
- À exporter en svg
- Composés d’une seule et même forme (fusionner dans la mesure du possible, Union,
- Une seule couleur (les icônes de deux couleurs seront intégrés autrement qu’en svg, mais à exporter en svg tout de même pour l'eco-conception)
- Il n’est pas nécessaire de les créer autant de fois qu’il existe de couleur / taille différente : ne doivent exister qu'une seule fois dans vos
- Ne doivent pas comporter de stroke (si nécessaire, décomposer les formes dans illustrator avant de les importer)
- Nom des icones : minuscule, pas d’espaces (tirets du 6 - si nécessaire). Exemple : icon-un.svg
Couleurs :
- Document uniforme (utilisation des
Textes :
- Document uniforme (utilisation des
- Utiliser des webfont (Google Font, Adobe Font) et utiliser le moins de styles différents possibles (limiter à 2, voir 3 dans la mesure du possible pour des questions de performance: par exemple, Regular, Semibold)
Éléments récurrents :
- Utiliser les possibilités des logiciels pour créer les éléments récurrents et optimiser le temps de travail (
RGPD :
Afin de respecter la RGPD, quelques éléments doivent être pris en compte pendant la phase de conception.
Formulaires :
- Informations : Il est nécessaire de réfléchir aux informations indispensables et celles qui ne le sont pas. Dans le cadre de la RGPD, il n’est pas possible de rendre obligatoire des informations qui n’auront pas d’utilité au responsable du site.
Exemple :
Un formulaire de contact n’a donc pas à comporter de champ “Date de naissance” ou encore “Adresse”. Un formulaire de contact a pour but de fournir ses coordonnées pour être recontacté, les champs envisageables seraient donc “Nom”, “Adresse e-mail”, et “Message”.
- Case à cocher : Il est nécessaire que l’utilisateur accepte, sur tout formulaire, que ses données soient utilisées. Une case à cochée doit être présente sur chaque formulaire avec un message type : “J’accepte que les données renseignées permettent de me recontacter dans le cadre de ma demande. En savoir plus”. Il doit également être informé de l’utilisation qui va en être faite. Un outil a été développé par Advency qui permet de générer une page de détail en lien avec l’utilisation des données. Il suffit donc d’avoir un lien sur le “En savoir plus”.
- Acceptation des cookies : Il n’est pas nécessaire de faire figurer un bandeau sur le bas de l’écran, un outil a été développé par Advency.