La conception de votre projet se réalise en parallèle de ses supports visuels pour lister toutes ses fonctionnalités à travers son expérience utilisateur. Nos outils de maquettage et de prototypage font ainsi office de cahier des charges visuel pour une meilleure projection. Cette étape est essentielle en préparation du projet. Une fois finalisée et validée, les développeurs ou futurs collaborateurs pourront se référer à la bible visuelle pour guider leur travail.

Que vous disposiez d’une charte graphique ou non, nous travaillerons à la mise en place d’un Design System. C’est-à-dire un ensemble de composants visuels ou interactifs cohérents pouvant être utilisés au sein de votre projet. Créer une logique visuelle permet de faciliter le travail des développeurs et de renforcer le professionnalisme de votre projet. Grâce aux règles définies dans le design system, les éléments s’organisent organiquement, pour allier logique, cohérence, équilibre, hiérarchie, lisibilité et accessibilité et une certaine dose de créativité pour que votre projet soit unique.

Un composant peut être lui-même composé d’autres composants plus petits. Avec le principe de l’Atomic Design, les composants d’un Design System sont triés selon leur taille. Les éléments les plus petits constituerons des composants plus grands et ainsi de suite. Cela permet de répercuter les modifications d’un composant sur tous les autres où celui-ci est utilisé. La logique s’applique au design ainsi qu’au développement.

Atome

Couleurs, polices, icones, logo, …

Molécule

Bouton, champ texte, …

Organisme

Navigation, vignette, formulaire, tableau, ...

Par perfectionnisme, nous veillons à ce que la maquette soit au plus proche de l’apparence du site final sur tous les navigateurs et supports. Pour ce faire, les outils de design web modernes utilisent des technologies web. C’est-à-dire que le rendu des couleurs, le lissage des polices et l’apparence des images seront quasi identiques que sur la maquette. De plus, pour obtenir un rendu net et précis, les icônes, logos et éléments graphiques compatibles sont intégrés en vectoriel sur le site et la maquette.

Pour créer de la cohérence dans la hiérarchie des contenus, nous intégrons dans nos chartes digitales un Spacing System. Il s’agit d’une liste de valeurs qui définit tous les espaces utilisés sur le site. Ces valeurs sont exponentielles, plus celle-ci est petite plus les éléments sont communs, si elle est élevée, les éléments sont distincts.

La grille est un ensemble de subdivisions verticales sur laquelle s'aligne tous les éléments du site. Au nombre de 12 colonnes, elle structure le site et permet de créer de la respiration.

L’utilisation de ces techniques offre ainsi des sites structurés et confortables. La position des éléments n’est pas laissée au hasard, et nous pouvons jouer sur les valeurs d’espace et de la grille pour changer toute la structure du site.

Nos projets sont pensés pour s’adapter aux différents supports (les devices) sur lesquels ils sont susceptibles d’être utilisés pour offrir une expérience optimale qu’elle soit sur ordinateur, tablette ou smartphone. En modifiant la grille, les valeurs d’espace et en utilisant des composants de plusieurs tailles, ils s’adaptent naturellement à ces différents supports. Les résolutions étant variables, nous utilisons des images de différentes tailles pour un rendu net et précis.