Le processus de design d’une application mobile est découpé en 2 parties : le design UX et le design UI. En quelques mots, une fois l’arborescence et les wireframes terminés, nous pouvons commencer la phase de design graphique.

La charte graphique

Tout projet a une identité graphique propre. En fonction des projets, le travail de L’UI designer à cette étape est plus où moins important.

• Certain projets ont une charte graphique établie à laquelle il faudra se plier.
• D’autres projets ont une charte graphique qui pourra être modifiée, adaptée au support numérique. Ici, le travail du designer consiste à trouver le juste milieu d’évolution pour que l’utilisateur fasse toujours un lien entre la marque et le produit.
• Enfin, certains projets nécessitent de concevoir la charte de A à Z, le travail de l’UI designer sera donc important : logo, couleurs, typographie, pictogramme …

– Recherches et planches tendances

Une fois la charte graphique établie, l’UI designer commence à travailler sur le style graphique de l’application. On entre dans une phase de recherche et d’inspiration pour réaliser entre deux et quatre planches tendances. Les planches tendances, aussi appelées moodboards en anglais, définissent l’univers de l’application. Réalisées à la suite de recherches créatives, elles sont constituées d’un ensemble d’images, photos, formes, matières, couleurs, mots, etc., Elles caractérisent une ambiance, une atmosphère, un univers.

Exemples : icône flat ou avec effet, aplats de couleur, dégradés ou textures.

Le but de cette phase est de permettre au client de se projeter et de choisir le style graphique, l’atmosphère souhaitée pour son application.

– Les masters

Une fois que l’axe créatif est sélectionné, l’UI designer réalise des masters.
Les masters sont les premières maquettes design, elles vont mettre en pratique la charte graphique ainsi que l’atmosphère sélectionnée. L’UI designer appliquera une empreinte graphique adaptée à la cible, à l’identité du produit.

Le but est ici de proposer aux clients plusieurs axes graphiques qui permettent au client de se projeter et de sélectionner ce qui correspond le mieux selon lui à l’identité de son produit.

– L’icône de l’application

On y pense pas, mais la création de l’icône de lancement de l’application, est une vrai carte d’identité pour l’application.

Des propositions de celui-ci sont faites au client lors de la déclinaison de masters.

– Maquettes finales

Un fois les masters sélectionnées, l’ensemble des wireframes sont designées en fonction du style graphique. La déclinaison des vues de l’application sont réalisées grâce à des outils de prototypage tel que sketch, la suite adobe ainsi qu’Invision, en collaboration avec l’UX Designer.

– Suivi de l’application

Le designer va continuer à suivre l’intégration faite lors du développement de l’application mobile, afin de s’assurer que les maquettes ont bien été respectées. L’utilisation de l’outil Sketch associé à Zeplin à pour but de fluidifier cette collaboration en fournissant aux développeurs toutes les informations dont ils ont besoin (style CSS, espacements, découpes …).

Envie d’approfondir vos connaissances sur le numérique ?