Intégration

Vos visuels sont prêts et vous souhaitez passer au code ? Vous avez besoin de développeurs pour vous aider à intégrer vos éléments graphiques ? Entrez dans notre tanière et faites confiance à nos développeurs pour intégrer votre « joli » en code.

Schéma représentant l'intégration

Qu’est-ce que l’intégration ?

L’intégration est la première étape du développement front. Elle sert à « mettre en code » vos maquettes graphiques. La phase d’intégration permet d’éprouver les maquettes graphiques en créant et en intégrant les composants dans une maquette fonctionnelle de votre produit. La mise en place de l’intégration de votre projet permet de créer un squelette visuel et fonctionnel qui sera utilisé pour la suite du développement front.

En plus de préparer la suite de la réalisation de votre projet, vous pourrez, une fois cette étape réalisée, naviguer concrètement à travers tous les écrans de votre produit comme s’il était en production.

Nos développeurs intégrateurs sont en veille constante sur les dernières tendances, ils possèdent les compétences techniques requises sur les différents langages de programmation. Ils veillent à ce que votre projet fournisse une bonne expérience utilisateur en prenant en compte les contraintes techniques des différents supports afin d’être ergonomique et responsive.

Quelles sont les étapes d’une bonne intégration ?

Les tâches de nos intégrateurs doivent se faire dans un certain ordre pour être véritablement efficaces.

  • Le découpage des maquettes en composants qui seront créés dans le storybook.
  • La mise en place du layout de navigation.
  • L’intégration à proprement parler des pages et des composants.
  • L’optimisation de l’accessibilité.
  • La vérification des problèmes de compatibilité entre les différents navigateurs.

Durant ce processus, différentes phases de recettes seront mises en place afin de s’assurer de la bonne qualité de l’intégration.

Illustration d'ours avec une bulle de parole

Découvrez nos prestations d’intégration

 

Schéma représentant un style guide

Le styleguide vous permettra de créer une base de travail solide

Vous avez besoin de rendre cohérent l’ensemble de vos maquettes ? Vous souhaitez établir des règles de style sur votre futur produit numérique ? Le styleguide est un outil qui permettra à tous les acteurs de votre projet de se mettre d’accord sur les règles d’utilisations des composants graphiques de vos interfaces.

Le styleguide est un document qui liste tous les éléments graphiques de votre produit numérique appelés composants. La définition de composants dans un styleguide permet, entre autres, d’améliorer la communication au sein de l’équipe de production de votre projet puisqu’il sert de référence commune.

Le storybook est une solution performante

Votre maquette est prête et vous voulez commencer la phase de développement ? Vous avez besoin de commencer votre développement avec des bases cohérentes et solides ? L’intégration d’un storybook permet aux développeurs de créer des composants réutilisables tout au long de l’intégration.

Le storybook est un outil intégré à votre projet permettant de créer et de référencer tous les composants UI de votre produit numérique au sein d’une librairie accessible à tous les développeurs. Le storybook permet aussi d’avoir une maintenabilité efficace, ainsi qu’une meilleure cohérence au sein de vos interfaces. C’est donc un outil indispensable pour commencer votre développement.

Schéma représentant un story book

Vous avez trouvé votre bonheur ?

Loading…

Questions fréquentes sur l’intégration

Pour répondre à toutes vos interrogations sur l’intégration mais aussi (et surtout) améliorer notre SEO…

À quel moment se déroule la phase d’intégration d’un projet informatique ?

L’intégration intervient juste après la conception des maquettes graphiques. Les designers auront donc déjà conçu des interfaces graphiques avec tous les éléments et composants qui seront présents sur le produit final, toutes les fonctionnalités et interactions seront aussi visualisables.

Rappel des étapes de création de projet numérique (application, site, logiciel…) :

  • Conception du moodboard : l’objectif du moodboard est d’aller chercher des idées d’univers et de “mood” qu’une marque veut appliquer. Cela se traduit par un document contenant des propositions d’ambiances graphiques (couleurs, typographies, illustrations, iconographies…)
  • Création de la charte graphique : elle reprend toutes les règles et caractéristiques d’utilisation des composants graphiques d’un projet
  • Zoning/Wireframing : le zoning et le wireframing sont deux étapes qui vont de pair. Le but étant de commencer à placer les composants sur l’interface utilisateur et d’avoir différents écrans sans style graphique, ce qui permet d’avoir rapidement un aperçu de certains écrans
  • Maquettage : grâce à la charte graphique et aux wireframes on peut créer les maquettes où le design de chaque page est respecté avec une mise en place logique des éléments 
  • Prototypage : le prototype permet de rendre la maquette fonctionnelle grâce à la mise en place des interactions avec l’utilisateur
  • Intégration : c’est la première phase de développement

À quoi correspond la phase d’intégration d’un projet numérique ?

L’intégration devra respecter la charte graphique utilisée lors de la réalisation des maquettes qui reprend toute l’identité visuelle du produit (couleurs, typographies, logos…).

L’UX/UI designer (UX pour user experience, UI pour user interface) aura réalisé une maquette répondant à des standards d’ergonomie qui devront être bien respectés par l’intégrateur, par exemple sur un site internet ça permettra d’augmenter le taux de conversion et d’optimiser le référencement naturel.

L’intégration reprend donc les normes de l’UX design et de l’UI design pour un produit autant optimisé visuellement que fonctionnellement.

L’intégration rend la maquette graphique fonctionnelle grâce aux différents langages comme JavaScript, HTML et CSS.

Pour obtenir le produit final, la phase d’intégration sera accompagnée d’un développement front-end pour intégrer la logique des éléments et aller beaucoup plus loin que la simple maquette fonctionnelle. L’intégration pourra aussi être complétée par un développement backend qui ajoutera au produit l’ensemble des fonctions permettant la gestion des données.

Comment se passe le découpage d’une maquette en composants ?

Le découpage consiste à reprendre l’ensemble des éléments du maquettage et de créer des composants réutilisables pour chaque élément grâce aux logiciels et outils de design.

Le designer sera chargé d’effectuer le prototypage et la conception graphique de chaque composant, alors que le développeur intégrateur réalisera le code qui les rendra fonctionnels.

Les composants doivent être réutilisables pour faciliter l’intégration : au moment de l’intégration il suffit de placer les éléments créés sur l’interface qui se modifieront automatiquement en cas de changement sur l’élément père.

L’ensemble des composants seront utilisés pour créer le storybook.

Comment faire un storybook ?

Le storybook reprend les éléments issus du découpage de la maquette.

Pour le créer il faut mettre l’ensemble des composants dans une librairie qui contient les paramètres de chacun et offre la possibilité de les modifier individuellement.

Le principe est le même pour n’importe quel composant (icônes, illustrations, boutons…)

Il permet, pour les développeurs, d’utiliser facilement les composants en les important directement depuis le storybook. Il permet aussi de garder une consistance sur l’ensemble des composants et d’uniformiser le code afin de ne faire qu’une modification pour tous les composants héritants du composant principal.

Le storybook est indispensable pour réaliser des prototypes ou maquettes fonctionnelles de manière optimale et gagner du temps.

Qu’est-ce que l’accessibilité numérique ?

L’accessibilité numérique consiste à rendre accessible un produit au plus grand nombre, pour ce faire il faut que le produit soit capable de s’adapter à un maximum de conditions, on peut prendre quelques exemples :

  • La prise en compte des handicaps, un bon exemple est l’ajout de sous-titre pour les personnes malentendantes ou l’utilisation d’un bon contraste de couleurs pour les personnes atteintes de daltonisme, mais les règles d’accessibilité ne se limitent pas aux handicaps, il s’agit de respecter des normes liées à l’accessibilité et à l’ergonomie permettant à un maximum de personnes d’utiliser votre application. 
  • L’adaptation aux différentes tailles d’écrans, on répond à cette problématique grâce au responsive design qui permet à la taille et à la disposition des éléments de s’adapter automatiquement à la taille de l’écran pour optimiser l’expérience utilisateur que ça soit sur mobile ou sur un grand écran. 
  • L’adaptation aux différents navigateurs, dans le cas d’un site web ou d’une web app, le produit doit fonctionner de la même manière sur les différents navigateurs, pour ce faire les testeurs vont tester chaque fonctionnalité sur un maximum de navigateurs et vérifier que le comportement demandé est respecté 

Pour faire de l’intégration on doit désigner à l’avance les spécifications que le produit devra respecter afin de réaliser une interface graphique accessible.

Pour prendre l’exemple d’un site internet, le contenu de chaque page web devra s’adapter automatiquement à la taille de l’écran, sans pour autant créer une version mobile mais en créant des composants adaptables. Les images contiendront un texte alternatif décrivant le contenu de celles-ci. Chaque page contiendra un contenu adapté aux différents navigateurs web.

Ces règles sont applicables pour tous les sites internet qu’ils soient créés en JavaScript, HTML, CSS ou via un CMS comme WordPress.

Vous souhaitez éprouver votre produit ?

Demandez un mini audit UX gratuit