La conception de sites internet est devenue plus que jamais un passage obligé pour une entreprise souhaitant se faire connaître et vendre ses produits et/ou services. L'outil de conception de maquette site web le plus répandu est Sketch, mais il est souvent réservé à des utilisateurs professionnels ayant déjà une expérience dans le domaine. Par conséquent, un grand nombre de personnes se sentent un peu perdues en utilisant le logiciel, et cherchent une alternative à Sketch facile à apprendre et à utiliser. Aujourd'hui, nous vous présentons un logiciel gratuit qui peut vous venir en aide dans cette tâche : Figma.
Figma et Webflow : deux outils pour créer un site web
L'utilisation d'outils de conception comme Photoshop et Sketch pour créer des sites Web est aujourd’hui une méthode : "à l'ancienne". Elle peut prendre beaucoup de temps. Figma propose tous ces outils en un seul endroit, avec une version gratuite et permet aux concepteurs d'exporter directement leurs créations. Il facilite également la collaboration, ce qui vous permet de gagner du temps et de l'argent !
1 Figma - L'outil nocode pour vos maquettes de site web
1.1 Figma un outil de design pour concevoir son site web
Figma est notre outil de design nocode préférer pour concevoir des sites web. L'outil a été conçu pour collaborer facilement sur des interfaces web et mobiles. Principal concurrent d'outils comme Sketch ou Adobe XD, il a été pensé pour concevoir un design system optimal : créer des éléments, des formes, ajouter du texte, des images, générer le code associé aux éléments, styleguide, etc. Figma vous permet ainsi de développer pour chaque projet une charte ergonomique et une charte graphique propre à l'identité visuelle de l'entreprise. Vous pourrez ainsi réaliser des prototypes de sites web de manière professionnelle
1.2 Avantages de Figma dans la conception UX et UI
Mise en place d'un system design
Figma est un outil de design simple à prendre en main. Vous pourrez facilement, concevoir des maquettes de site web, sans pour autant connaitre les fonctionnalités avancées de l’outil. Figma vous permettra de concevoir l'UX et UI de votre site web pour créer un design system complet.
Optimisation des visuels sur Figma
Figma vous met à disposition des outils pour créer et modifier des éléments vectoriels. Utiliser le "pen tool" pour créer des formes, faire des mokup 3D dans votre maquette web. L'autre avantage avec les contenu vectorisé c'est le poids. Créer ou charger dans Figma vous permettra d'optimiser le poids de chaque visuel pour ensuite l'intégrer à votre site Webflow. Si vous importez des contenus visuels non vectorisés, nous vous conseillons d'utiliser l'extension TinyImage Compressor pour améliorer les futures performances de vos pages Webflow.
Paramétrer les interactions de votre maquette
Le mode Prototype de Figma vous permet de créer des liens entre les différentes pages et éléments de votre maquette pour donner à votre développeur Webflow un meilleur aperçu du site. Il sera ainsi plus facile
Partage de projet au développeur Webflow
L'outil est gratuit et est parfaitement conçu pour collaborer à plusieurs sur un même projet en 100% cloud. Vous pourrez donc créer votre maquette web et la partager avec votre développeur Webflow pour qu'il accède à une vue d'ensemble sur les flux de votre maquette web.
Gain de temps sur votre développement Webflow
L'idéal avec Figma c'est que vous allez pouvoir créer, modifier et agencer des éléments graphiques bien plus rapidement que dans Webflow. Le maquettage Figma est donc une étape primordiale pour préparer
1.3 Comment bien préparer sa maquette Figma pour Webflow ?
Voici plusieurs phases pour bien préparer la maquettage UX de votre site web avant de commencer à la faire développer sous Weblfow.
Etape 1 - Créer un “style guide” pour chaque projet
Le style guide se rapproche beaucoup de la charte graphique d'une entreprise. C'est un document qui va regrouper l'ensemble des éléments utilisés dans la maquette et qui composeront votre future site web. Un style guide va par exemple regrouper l'iconographie de votre maquette web, les codes couleur, la typographie et la taille des polices (H1, H2, H3), les formes (boutons, background, angles, etc.), les sélecteurs ou sections call to action. Pour votre maquette Figma, comme pour votre développeur Webflow, un style guide est indispensable.
Etape 2 - Conceptualiser votre Wireframe Figma
Un Wireframe est une représentation simplifiée de votre site web. Figma vous permet de créer des wireframe regroupant les éléments statiques de base de votre futur site. Ces wireframe vous permettront de schématiser votre site simplement et rapidement avant de passer à l'étape de design. Nous vous recommandons d'utiliser la fonctionnalité FigJam pour créer des wireframe et rapidement avoir un aperçu des flux et sections de votre future maquette.
Etape 3 - Maquette de site web
La maquette de votre site vient après le wireframe en apportant une première vision du design du site. La maquette vous apportera donc une vision plus réaliste de votre site en y ajoutant les formes, couleurs, effets, etc. Ce sera un moyen d'identifier de manière plus précise les incohérences d'UX dans le design, les couleurs, les typographies, l'agencement des sections , etc. Tout comme le wireframe, la maquette de site web reste un aperçu statique de votre prochain site.
Etape 4 - Prototype de site web
Le prototype de site web est la dernière étape de conception du site avant sont développement. Il donne une vision dynamique du site web en y incluant toutes les interactions entre les pages, sections, call to action, etc. Une véritable simulation qui vous permettra de vérifier les cohérences d'UX dans votre site et mieux visualiser l'interface.
Votre maquettage de site est terminé ! Il est maintenant temps de lui donner vie.... et de le mettre en ligne ! Jump to Webflow !
Découvrez un cas client d’une conversion Figma to Webflow
2 Webflow - L'outil de développement web
Webflow est plus qu'un simple CMS. C'est un véritable outil de designer. Il n'y a aucune limite à ce que vous pouvez créer. La plateforme Webflow est un choix évident pour les webdesigners. Aujourd'hui, nous vous présentons rapidement 4 raisons pour lesquelles vous devriez utiliser WebFlow pour convertir vos conceptions Figma en sites web fonctionnels !
Une interface complète de webdesigner
Webflow vous plonge dans une interface de développement complète. Les éléments de design et conception dans Webflow sont illimités. C'est comme avoir Photoshop sous la forme d'un CMS conçu pour les concepteurs de sites Web avec les meilleures pratiques CSS. Bref, voici un aperçu.
Un outil nocode pour créer des sites performants
Pourquoi choisir Webflow ?
· Un site web rapide (code propre, meilleure performance du marché du CMS)
· Un site collaboratif (mode editor, permet l’édition à plusieurs dans l’équipe)
· Les meilleures pratiques SEO accessible en no-code
· Des sites 100% adaptatifs
Webflow a toujours su rester en avance sur son temps grâce à des technologies comme HMTL5. Un autre facteur de décision a été la vitesse de chargement des pages sur les appareils mobiles, qui était exceptionnelle par rapport aux autres sites web de leur catégorie. (Coucou les sites Wordpress qui charge en 5 secondes, au mieux)
Découvrez le CMS Webflow.
Les ressources Webflow
(1) Utilisez la communauté Webflow pour vous aider au développement de votre site
· Webflow university
· Webflow Forum
(2) Trouvez facilement de l'aide pour développer votre site web avec webflow grâce à la plateforme référençant des agences officiellement expertes.
· Espace Webflow professional partner
La mise à l’échelle de votre site
Votre site web va accompagner toute la vie de votre entreprise, il est indispensable de le construire d’une façon évolutive. Qu'il s'agisse de nouvelles lignes de produits, de nouveaux services, de nouveaux employés ou articles de blogs. Il est absolument nécessaire de créer un site dynamique. Avec Webflow, votre site peut se développer de manière flexible avec des modules et des pages dynamiques qui peuvent être dupliquées et créées sans effort.
+ Avec Webflow, chaque fois que vous ajoutez ou modifiez du contenu, la structure du site est automatiquement mise à jour, de sorte que vos lecteurs bénéficient toujours des dernières nouveautés.
Résumé des avantages d'un combo Figma <!-- fs-richtext-ignore --><> Webflow
Figma propose un outil de conception sans code qui est absolument génial : sans code, gratuit et collaboratif. Webflow vous permet de développer votre prototype et de le mettre en ligne rapidement avec les meilleures pratiques du web.
L’avis de Digidop : Webflow garanti la meilleure conversion de maquette Figma en site performant, qui convertit vos futurs visiteurs en nouveaux clients 👍
L'offre de Digidop
Nous fournissons un service de conversion de maquette sur Webflow en respectant :
- votre design
- les meilleures pratiques (SEO, Client-First, Performances Google, etc...)
- des délais records !
.jpg)
.jpg)
