Design sur Figma pour une expérience utilisateur optimale

Nous échangeons avec vos équipes pour comprendre vos enjeux business, commerciaux, les objectifs du projet, les moyens opérationnels et les contraintes.

Nous effectuons une analyse de marché approfondie pour comprendre le contexte commercial et compétitif de nos clients. Nous examinons les tendances du marché, les concurrents directs et indirects, ainsi que les opportunités et les menaces pour l'entreprise. Cette analyse nous permet de mieux comprendre les attentes des utilisateurs et de créer une solution qui se démarque sur le marché.

Nous étudions et explorons une variété de sources d'inspiration pour créer des idées de conception uniques et innovantes. L'analyse des tendances du secteur, des designs similaires de l'industrie, et des références web de nos clients nous permet de trouver des idées originales et créatives pour le futur branding.

Nous définissons et structurons les pages importantes du site sur un FigJam, en utilisant les informations recueillies lors des étapes précédentes. Nous travaillons à la création d'une structure claire, logique et pensée à la fois pour le SEO et la conversion. L'utilisation de mind map et de wireframes nous permet d'organiser l'information et définir la hiérarchie de la navigation du site web.

Le moodboard créé sur Figma nous permet de définir l'atmosphère et la direction artistique du projet en utilisant un ensemble d'images, de couleurs, de typographies, de textures, de formes ou de tout autre élément visuel. Ces sources d'inspirations nous permettent d'établir un univers  graphique adapté aux besoin du client, pouvant être minimaliste, institutionnel, décalé, vintage, futuriste, impactant, tech, etc. 

Si l'entreprise dispose déjà d'un logo, nous pouvons le retravailler ou le moderniser via des outils comme PhotoShop ou Illustrator pour qu'il s'intègre mieux dans la nouvelle charte graphique. La refonte du logo peut être un moyen de renforcer l'identité visuelle de l'agence web et de la rendre plus reconnaissable.

Cette étape consiste à définir les couleurs primaires et secondaires de la charte graphique. Nous choisissons les couleurs en cohérence avec le moodboard et vous les proposons en formats web et print. Nous intégrons également des règles d'utilisation des couleurs pour optimiser l'accessibilité web du futur site.

Nous prenons en considération des critères d'utilisation, de design et d'accessibilité web pour le choix des typographies. L'objectif est qu'elles s'intègrent parfaitement dans l'univers graphique tout en respectant de bons niveaux de lisibilité.

Nos chartes graphique sont orientées web, et nous vous proposons pour cela plusieurs exemples d'interfaces web sur votre fichier Figma, en cohérence avec votre nouvelle identité, pour nous aider à définir la direction artistique de votre futur site web.

Des règles d'utilisations de votre logo, de vos couleurs, vos typographies et vos éléments graphiques sont intégrés à la charte du projet Figma. Vous pourrez ainsi garder une cohérence visuelle sur tous types de supports, sur vos médias, vos campagnes publicitaires, vos événements, votre merch, etc.

Nous construisons l'architecture de chaque page de votre site internet en utilisant les informations recueillies lors des étapes précédentes. Nous veillons à ce que l'architecture soit claire, logique et intuitive pour les utilisateurs.

Nous étudions chaque section pour s'assurer que l'information soit claire, cohérente avec le message à véhiculer et que l'expérience utilisateur soit optimale. Nous veillons également à inciter les utilisateurs à effectuer des actions (conversion, clic sur un lien, renvoie vers des pages stratégiques, téléchargement de contenu, etc.)

Nous maillons les pages entre elles pour garantir une navigation fluide pour les utilisateurs. Nous veillons à ce que les liens soient logiques et faciles à retrouver.

Le but de cette étape est de donner la meilleure expérience utilisateur possible pour les potentiels leads de l'entreprise. Nous récoltons donc des retours en interne et avec vos équipes pour proposer un UX optimal.

L'intégration du copyrighting se fait au moment de la phase UX afin de penser chaque sections selon le message à véhiculer. Les sections de chaque pages pourront ainsi être designées de manière cohérente.

Nous appliquons la charte graphique définie lors des étapes précédentes sur l'interface web. Une première identité visuelle du site web prend forme avec l'intégration des couleurs, des typographies, des icônes et autres éléments graphiques.

Nous concevons un univers visuel unique et immersif sur la maquette, en utilisant des éléments de design tels que des icônes, des images, des illustrations, des textures et des motifs. Nous veillons à ce que l'univers soit en adéquation avec l'identité de l'entreprise et les besoins du projet.

Nous créons la maquette web en lien avec l'ensemble des éléments graphiques que vous nous communiquez. Nous nous occupons de l'intégration des illustrations, des mockup design, des icônes, des images, des motion design 2D, 3D, des vidéos, formes, etc.

Nos designer pensent également la maquette web avec l'ensemble des animations qui se retrouverons sur le site. C'est ici un travail de collaboration entre graphistes, web designer et développeurs web pour trouver le meilleur compromis entre design, accessibilité web et optimisations SEO.

Nos designers définissent tout le guide de styles UI du projet web. Celui-ci comprend les différentes règles de webdesign à réspecter pour garder une uniformité et une cohérence graphique sur le site. Le style guide est composé de styles de marges et espacements, de styles de couleurs, de styles de textes, de styles d'effets, et de toutes autres règles d'uniformisation du design.

Notre équipe va créer une librairie d'icônes et d'illustrations qui peuvent être utilisées dans l'ensemble de votre design system. Ces éléments visuels aideront à renforcer l'identité de votre marque tout en ajoutant de la personnalité à votre site ou application web.

Nous pensons le CMS de votre futur site Webflow dès la phase de design. Pour cela nous élaborons un un guide pour votre système de gestion de contenu (CMS), que nous validons avec vous avant le lacement du développement web.

Nous créons une bibliothèque de composants réutilisables basés sur les éléments de la maquette. Ces composants peuvent être utilisés pour créer rapidement de nouvelles maquettes et faire évoluer votre site web. Les composants réutilisables peuvent être des boutons, des formulaires, des cartes, des listes, etc.

Pour rendre la librairie de composants encore plus efficace, nous créons des familles de composants. Les familles de composants sont un groupe de composants similaires qui ont des fonctionnalités communes. Par exemple, les boutons peuvent être une famille de composants qui ont des variantes pour les couleurs et les tailles.

Nous créons des variants de composants pour offrir plus de flexibilité et de personnalisation. Les variants de composants sont des versions alternatives d'un composant de base qui ont des styles différents. Par exemple, un bouton peut avoir des variantes pour les couleurs, les tailles, les icônes, les textes, etc. Ils permettent également de définir les apparences de chacun des éléments graphiques selon leurs états (inactif, survolé, cliqué, envoyé, etc.)