Intégration

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

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.

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.

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.

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.