Menu

Ensemble | Application mobile

Web design UI/UX

Ensemble | Application mobile

L’arborescence

La première étape dans le processus de création est l’élaboration d’une arborescence par rapport aux besoins, aux objectifs souhaités. Cette arborescence doit être ensuite figée après étude. L’analyse de l’expérience utilisateur (UX) peut être très bien apprivoisée déjà à cette étape du process.

Wireframes

Pour un design ergonomique optimal, les maquettes fonctionnelles pour chaque vue de l’application sont créées (étape important de l’UX). Ces schémas sont étudiées en fonction de l’arborescence précédemment validée, une fois établis la direction artistique peut-être alors lancée.

Recherche du logo

Avant l’élaboration de l’interface utilisateur (UI), la charte graphique doit tout d’abord exister. Ce travail de recherche consiste à étudier des pistes d’illustration pour le logo. Il est primordial de confronter plusieurs idées sur papier et choisir le plus adapté au domaine de la marque. 

Logo et Typo

La fleur : Symbole de l’espérance (annonce la future naissance du fruit). Depuis l’antiquité, l’image de la fleur est associée à l’idée de la brièveté de la vie, de la beauté et des Vertus. Le coeur : Symbole positif de la vie et de l’amour. Ici, les pétales de la fleur sont comme fermées, elles couvrent leur bouton (ici le coeur). La typographie se veut être sans sérif et avec des rondeurs.

Charte graphique

Une fois la création du logo et les déclinaisons de ses variantes, l’interface ou les supports de communication futurs sont maintenant sous des règles, colorimétriques et typographiques.

Interface Utilisateur (UI)

À cette étape du processus de création, l’arborescence, les wireframes sont fixés ainsi que la charte graphique. L’interface Utilisateur est comme ce que l’on peut appeler une « peau » ajoutée au wireframe, en appliquant les règles de la charte graphique. Le résultat lie deux compétences : le graphisme et le marketing.

 Responsive design

L’application peut être native ou non et peut être alors vue comme un produit web. Ce qui pousse dans tous les cas à la réflexion du support utilisé par l’utilisateur. Afin d’élargir au maximum les chances de conversion, le produit doit être pensé pour les écrans, tablettes ou smartphone.

 

L’interface ne va alors pas utiliser les mêmes surface, sur ordinateur 17 pouces, iPad 11 pouces et smartphone de 5 à 7 pouces par exemple :

 Illustrations animées

Cinq illustrations originales ont alors été élaborées afin de sublimer certains thèmes et apporter plus que du simple texte. Et afin de rendre le tout très actuel en 2017, ces illustrations sont passées par une phase de Motion Designing qui consiste à animer les éléments graphiques.

Motion design

Après la finalisation des différentes interfaces graphiques ainsi que des illustration animées. la phase finale du process qui est le motion designing, sert à présenter le produit avant la création de prototype ou encore de mise en ligne finale. Le motion design est le plus souvent au format video, il traduit le mieux les animations ainsi que les interactions avec l’utilisateur.

This is a unique website which will require a more modern browser to work!

Please upgrade today!