Aller au contenu

Ce dont nous avons besoin pour intégrer votre site

Afin que l’intégration graphique de votre site se passe le mieux possible, nous devons avoir en main tous les éléments nécessaires.

La liste des livrables ci-dessous facilite et limite les échanges entre vous et les différents intervenants, afin de fluidifier le plus possible cette partie du développement.

Un style guide et/ou style tile

Les style guide et style tile sont des documents regroupant des informations sur votre charte graphique et votre site. Bien qu’ayant un but similaire, leur contenu se différencie de cette façon :

  • Le style guide va proposer une liste des éléments de conception tels que les couleurs, la typographie, etc. Il permet de définir la charte graphique et de maintenir sa cohérence.
  • Le style tile lui est composé de « tuiles » regroupant des blocs déjà stylisés, tels que des cards faisant le lien vers un article, une liste d’éléments clés, etc. Ils permettent, sans concevoir une maquette intégrale, de se faire une idée plus précise de l’ambiance et de l’esthétique du site.

Même si une ou plusieurs maquettes nous sont fournies, elles ne représentent pas l’intégralité des pages de votre site. Il est nécessaire d’avoir ces listes d’éléments et de blocs afin de gérer l’intégration globale. De cette façon, il nous est possible d’obtenir la meilleure flexibilité possible dans l’affichage de votre contenu, sans risquer de s’éloigner de la charte graphique.

Les éléments devant être obligatoirement représentés dans ce document

  • les polices d’écriture / font avec les différentes graisses utilisées
    Si cette font n’est ni une Google Font ni une Adobe Font, il faut penser à nous envoyer la font prête pour une utilisation web. Le cas échéant, il faudra étudier les problématiques d’achat de licence web et de conversion de cette font.
  • Les éléments de typographie avec le nom de la font utilisée, sa taille et sa graisse pour chacun, à savoir :
    • les différents niveaux de titre / sous-titres
    • les liens
    • le texte standard
    • les boutons
    • tout autre élément de texte prévu
  • Les couleurs utilisées dans leur ordre d’importance. La liste doit être exhaustive.
  • Le style des boutons avec les états au survol et inactifs
  • Le style des différents types de champs de formulaires, avec l’état standard, focus et en erreur (+ style du message d’erreur)
  • Les icônes liens (exemple : réseaux sociaux) dans leur état standard et survolé
  • Les ratios des images utilisées sur le site (dans les bannières, les listes d’articles, etc)
  • Tout autre élément qui pourra se retrouver à divers endroits du site sous la même forme (liste d’articles, message flash, …)

Des maquettes graphiques validées (avec éventuellement des wireframes)

Les maquettes vont permettre d’avoir une idée plus précise de l’agencement souhaité. Dans le cas où seules la page d’accueil et une autre page « standard » sont maquettées, des wireframes ou des prototypes peuvent vous permettre de nous indiquer l’agencement des autres pages sans avoir à les styliser intégralement. Nous utiliserons alors le style guide que vous nous aurez fourni.

La validation préalable des maquettes est primordiale pour éviter une perte de temps de développement une fois celui-ci commencé si des modifications ont lieu. En intégration, la simple modification du positionnement d’un élément peut parfois provoquer une importante charge supplémentaire.

Les éléments devant être obligatoirement représentés dans ce document

  • La page d’accueil et au moins une page type du site
  • Le style du menu (ouvert sur mobile), de la recherche et de tout élément qui se retrouve partagé sur toutes les pages (avec des états au survol)
  • Les versions desktop et mobiles, la présence de la version tablette est un plus
  • Les maquettes sont à fournir dans au moins un des formats suivants :
    • Adobe XD
    • Illustrator / Photoshop
    • Sketch
  • La présence d’une grille d’intégration est préférable
  • L’accessibilité aux maquettes sous Invision est un plus

La liste des icônes, pictos et images statiques

La liste exhaustive des icônes et des pictos qui devront apparaître  sur votre site est à nous fournir idéalement dans les formats .svg ou .ai (formats vectoriels). De cette façon, aucune perte de qualité ne sera à déplorer, peu importe la taille du visuel affiché.

Attention, si du texte est inclus dans vos fichiers vectoriels, il est important qu’il soit également vectorisé et pas laissé en format texte.

Les images statiques sont celles qui ne seront pas gérées par la suite lorsque le contenu du site sera modifié / actualisé. Elles doivent nous être fournies en haute définition.

Enfin, vous devez également nous fournir le favicon de votre site, lui aussi au format vectoriel, ou en png de 512×512.

Un document regroupant les différentes animations

Si vous souhaitez faire apparaître sur votre site certains animations bien précises, un document listant ces animations vous sera demandé. Il devra inclure la liste des animations avec leur différents états et idéalement le timing.

Les animations nécessitent un code bien spécifique, il est donc important de prévoir cela le plus tôt possible dans le processus d’intégration du site.

Contact

Afin que les échanges soient facilités, nous vous demanderons le contact du ou des graphistes ayant conçus ces éléments.

Une réunion de calage avec cette équipe après réception des éléments sera aussi préférable.

Si besoin, nous pouvons également convenir d’un point ensemble en cours de conception pour aiguiller ou répondre aux questions.