Conception fonctionnelle & Design

Nous ne croyons pas au concept de "piste graphique" ou le client se voit présenter 4 à 5 propositions d'agences. La conception et le design, doivent être un processus itératif, impliquant fortement les utilisateurs des interfaces conçues.

Etape 1 : Le sketching

La conception de votre site ou application démarre chez nous par une série d'ateliers de travail avec vos équipes. Ateliers participatifs, ludiques et très interactifs ou l'utilisateur est placé au coeur du processus. Durant cette phase, qu'on appelle 'sketching', chaque participant dessine SA version de chaque écran de la future web-app ou du site. Un débat animé par notre ergonome et notre designer permet de confronter les différentes versions de la même page. 

Sketching - dessin au trait avant la phase de wireframing

Etape 2 : Les wireframes

Les wireframes, sont le résultat d’un travail de précision des dessins réalisés. Sans porter aucune forme de design, il s’agit de placer les éléments de chaque page à leur place. Les dimensions sont respectées au pixel prêt. Les wireframes sont interactifs et navigables, grâce à l’utilisation d'un logiciel de type Axure.

Un test utilisateur est mené également à cette étape.

Wireframes

Etape 3 : Design noir & blanc

Durant cette étape le design définitif est proposé au client, mais présenté en noir et blanc. L’idée ici est de valider ensemble les proportions, la typographie, les contrastes.

C’est une étape très importante permettant d’accélérer fortement l’étape de validation du design, car elle permet une meilleure expression des critiques que le simple ‘J’aime / J’aime pas’, la couleur n’interférant pas dans les décisions.

Design noir et blanc

Etape 4 : Design couleur

Le design est l’étape la plus gratifiante, car elle permet (enfin) de visualiser le travail des semaines et étapes précédentes. La validation est grandement simplifiée par rapport à une approche classique de présentation des pistes graphiques. Comme aux étapes précédentes, des tests utilisateurs sont effectués et des modification ultimes peuvent être apportées à la structure même des pages.

Design couleur

Etape 5 : Maquette HTML interactive

Enfin, pour chaque écran une maquette HTML est réalisée, incluant la compatiblité entre les navigateurs, les JavaScripts (JQuery) et chaque écran est validé W3C. La sémantique HTML est vérifiée et l'accessiblité est comparée aux exigences du projet (Bronze, Argent, Or...)