fire

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 :

  • File:Sketch Logo.svg - Wikimedia CommonsSketch est recommandé (uniquement sur mac)
  • Résultat de recherche d'images pour "logo xd 2020"Adobe XD (gratuit, mac et windows)
  • Description de l'image Adobe Photoshop CC icon.svg.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.
File:Sketch Logo.svg - Wikimedia CommonsLayout Settings, Description de l'image Adobe Photoshop CC icon.svg.Nouvelle disposition des repères, Résultat de recherche d'images pour "logo xd 2020"Grille de mise en page, Layout Grid (Columns)

  • 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 File:Sketch Logo.svg - Wikimedia CommonsSymbols, Résultat de recherche d'images pour "logo xd 2020"Composants, Description de l'image Adobe Photoshop CC icon.svg.Objets dynamiques vectoriels, Components
  • À exporter en svg
  • Composés d’une seule et même forme (fusionner dans la mesure du possible, File:Sketch Logo.svg - Wikimedia CommonsUnion, Résultat de recherche d'images pour "logo xd 2020"Union, Group)
  • 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 File:Sketch Logo.svg - Wikimedia CommonsSymbols, Résultat de recherche d'images pour "logo xd 2020"Composants, Components, c'est ensuite dans vos plans de travail que vous les redimensionnez / changez les couleurs (grâce aux File:Sketch Logo.svg - Wikimedia CommonsStyles, Résultat de recherche d'images pour "logo xd 2020"Couleurs, Components).
  • 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 File:Sketch Logo.svg - Wikimedia CommonsStyles, Résultat de recherche d'images pour "logo xd 2020"Couleurs,Description de l'image Adobe Photoshop CC icon.svg.Palette de couleur, Color Styles)

 

Textes :

  • Document uniforme (utilisation des File:Sketch Logo.svg - Wikimedia CommonsStyles, Résultat de recherche d'images pour "logo xd 2020"Styles de caractères, Description de l'image Adobe Photoshop CC icon.svg.Styles de caractères / paragraphes, Text Styles)
  • 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 (File:Sketch Logo.svg - Wikimedia CommonsSymbols, Résultat de recherche d'images pour "logo xd 2020"Composants, Description de l'image Adobe Photoshop CC icon.svg.Objets dynamiques, Components)

 

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.