Relume Site builder: L'outil de génération IA de conception de sites Web et de création de  Wireframes pour les designer.

Blog

Alexandre Teillet
13/12/24
écrit par
Alexandre Teillet - Fondateur de l'Agence Webflow Mekaa
Alexandre Teillet
Fondateur @mekaa
Sommaire
Partager l’article

Les outils AI sont partout aujourd'hui. Il est même difficile de s'en passer dans le monde du travail actuel. Plongeons ensemble dans les découvertes de relume et de son site builder qui révolutionne la création de page Web. Découvrez comment créer un site internet en quelques secondes. Vraiment ?

Qu'est-ce que relume et comment fonctionne cet outil innovant ?

Relume.io est un outil innovant qui permet aux utilisateurs de créer rapidement des prototypes et des maquettes pour un site web. Grâce à une interface intuitive, il facilite l'apprentissage et aide les utilisateurs à apprendre à concevoir et à apprendre à créer. En utilisant l'AI pour créer des wireframes directement, Relume permet de passer de Figma à Webflow sans effort. Nous autres développeurs pouvons ainsi modifier les éléments de manière dynamique, ce qui constitue un véritable gain de temps pour les développeurs.

Avec le builder de Relume, chaque section est conçue pour répondre aux objectifs du site, permettant ainsi de personnaliser chaque détail avec un simple clic. Les ressources Relume incluent une documentation détaillée et des plugins qui facilitent la transition de Figma vers Webflow.

En quoi Relume se démarque-t-il des autres outils de création de sites web ?

Relume Site Builder se démarque de tous les outils de création web par la richesse de sa bibliothèque de composants Webflow vierges, qui permet à l'intelligence artificielle d'être la plus pertinente possible. Cette base de composants UX est accessible dans Figma ou Webflow et vous laisse ainsi libre de choisir le type d'outil dont vous avez besoin. De plus, Relume étant anciennement une agence Webflow, les fondateurs Dan Anisse et Daniel James Slater sont parfaitement au courant des problématiques rencontrées par des agences comme Mekaa.

Génération automatique des sitemaps (plan de site)

Le sitemap, ou plan de site, est un élément essentiel à définir en début de projet. Il permet de poser sur le papier l'arborescence du site web. Relume vous offre la possibilité de générer automatiquement cet élément de deux manières différentes. La première consiste à ajouter votre propre prompt. Ici, rien de compliqué : il vous suffit simplement de décrire le type de site que vous souhaitez créer. Un petit plus non négligeable : vous pouvez même choisir la langue de celui-ci. La seconde méthode repose sur l'import du sitemap d'un site déjà existant. Cette fonctionnalité va alors crawler les différentes pages de votre site actuel pour les intégrer à votre nouveau sitemap. Il est primordial que les éléments clés figurent sur votre plan de site afin de faciliter la génération des wireframes par la suite.

Génération de sitemap grâce à un prompt
Génération de sitemap grâce à un prompt

{{banner}}

Site builder : création de wireframes en quelques seconde

Relume génère automatiquement vos wireframes basés sur votre sitemap. Il va donc falloir être le plus pertinent possible dans le choix de vos sections. Évidemment vous pourrez facilement changer le type de section que vous souhaitez en appuyant sur le bouton magique "Generate". Plus vous donnerez de contexte à l'AI, plus celle-ci sera en mesure de comprendre les objectifs du site.

Génération de Wireframe grâce à Relume
Génération automatique des Wireframe

Exportation les wireframes dans Figma et Webflow

Une fois votre sitemap créé et vos wireframes générés avec du contenu, vous pourrez exporter votre site vers Figma pour perfectionner le design de votre structure. Après avoir finalisé le design, vous aurez la possibilité d'importer aisément vos wireframes fraîchement conçus dans Webflow grâce au plugin Relume dédié. Pour optimiser votre temps, vous pouvez également utiliser directement le plugin Figma to Webflow qui permet de transférer vos designs de Figma to Webflow de manière fluide et automatisée.

Import des Wireframe dans Figma
Import des Wireframe dans Figma

Chatgpt en charge du copywriting

Chatgpt est intégré directement à relume pour générer automatiquement du copywriting sur vos pages. Un petit plus pour cet fonctionnalités puisque avec tout le contexte donnée sur les fonctionnalités précédente ce copywriting est ultra pertinent. Une fonctionnalité clairement conçus pour nos amis du Marketing et qui évitera la phrase "Vous avez votre copy ?"

Générer un StyleGuide (Guide de style) IA

En plus des wireframes et du contenu, Relume offre la possibilité de générer un guide de style complet pour votre site web à l'aide de l'IA. Cette fonctionnalité innovante permet de définir en quelques clics une charte graphique cohérente, incluant les couleurs, les typographies, les composants et les principales règles de design à respecter.

Le guide de style généré par Relume s'appuie sur les dernières tendances web et les meilleures pratiques UX/UI pour garantir un rendu professionnel et harmonieux. Il est entièrement personnalisable et peut être affiné selon vos préférences et l'identité visuelle de votre marque.

Grâce à cette fonctionnalité, Relume fait gagner un temps précieux aux designers en automatisant la création de cet élément essentiel à tout projet web. Plus besoin de partir d'une page blanche ou de chercher l'inspiration, l'IA se charge de proposer un style guide de qualité pour assurer la cohérence de votre site de bout en bout.

Style Guide Builder de Relume
Génération du Style Guide grâce au cette nouvelle feature BETA

Comment Relume va changer le processus de création pour les designers ?

Avec son approche basée sur l'IA générative, Relume bouleverse en profondeur les méthodes de travail des web designers et les libère des tâches les plus chronophages et répétitives. En générant automatiquement sitemaps, wireframes, contenus et même guides de style, Relume permet aux designers de se concentrer sur les aspects les plus créatifs et à forte valeur ajoutée.

Fini les heures passées à créer chaque wireframe de zéro ou à maintenir la cohérence entre les différentes pages. Avec Relume, les designers peuvent obtenir une base solide en quelques clics, puis itérer et peaufiner ce premier jet. Ils gagnent ainsi un temps précieux à chaque étape et peuvent explorer davantage d'options créatives.

De plus, l'intégration poussée avec des outils incontournables comme Figma et Webflow fluidifie tout le processus, du prototypage au design puis au développement. Grâce à Relume, les designers disposent d'un environnement unifié pour collaborer efficacement avec leurs clients et les développeurs, depuis la définition de la structure du site jusqu'à sa mise en ligne finale.

Avec son approche unique mêlant IA et savoir-faire humain, Relume révolutionne l'expérience des web designers et repousse les limites de leur productivité et de leur créativité. L'outil parfait pour répondre aux demandes toujours plus nombreuses et exigeantes du marché !

Un outil de conception web réservés aux designer ?

Bien que Relume soit particulièrement apprécié pour ses fonctionnalités avancées, l'outil se veut accessible à tous les professionnels impliqués dans la création de sites web. Grâce à son interface intuitive et ses assistants IA, Relume peut être utilisé par :

  • Les chefs de projets digitaux pour rapidement prototyper et visualiser un nouveau site
  • Les UX designers pour générer des wireframes et tester différentes structures de page
  • Les UI designers pour obtenir un kit UI de base et définir l'identité graphique du site
  • Les développeurs front-end pour récupérer des templates de page prêts à intégrer
  • Les rédacteurs et content managers pour générer et organiser le contenu des pages

Relume se positionne comme un outil transversal qui facilite la collaboration entre tous les intervenants d'un projet web. Chacun y trouvera des fonctionnalités pour optimiser son travail, de la rédaction du brief à la mise en ligne. Une vraie solution à 360° pour unifier vos équipes !

Même les débutants et les non-professionnels peuvent exploiter la puissance de Relume pour créer leur site en toute autonomie. Les nombreux modèles et l'aide contextuelle permettent à chacun d'obtenir un rendu professionnel sans compétence technique.

Quelles sont les fonctionnalités de Relume en bref ?

En résumé, Relume regorge de fonctionnalités pensées pour simplifier et accélérer la conception web. Voici les points clés à retenir :

  • Génération automatique de sitemaps à partir d'un brief ou en important un site existant
  • Création de wireframes responsive et de prototypes interactifs pour chaque page
  • Rédaction de contenu SEO-friendly avec l'aide d'un assistant IA
  • Génération d'un guide de style complet et personnalisable
  • Intégrations avancées avec Figma et Webflow pour un flux de production optimal
  • Plugins et export de code pour faciliter le travail des développeurs
  • Bibliothèque de composants, templates et assets prêts à l'emploi
  • Outil de feedback et de collaboration en temps réel pour les équipes

Forte de toutes ces capacités, la suite Relume s'impose comme un incontournable pour tous les professionnels du web, du designer au chef de projet. Une solution tout-en-un pour concrétiser vos projets de sites plus rapidement et sereinement.

{{banner}}

L'IA au services des constructeur de sites ?

Au-delà d'un simple outil, Relume incarne une nouvelle vision de la conception web fondée sur l'intelligence artificielle. Chaque fonctionnalité a été pensée pour exploiter au mieux le potentiel des technologies d'IA générative et les mettre au service des créateurs de sites.

Là où les constructeurs de sites traditionnels (Wix, Webflow, Squarespace...) ont automatisé le développement, Relume repousse l'automatisation encore plus loin en s'attaquant au design, à la structure du contenu, aux interactions... Tout ce qui peut être généré par l'IA, Relume s'en charge pour vous.

Cette approche unique permet non seulement de gagner un temps fou, mais aussi d'explorer des pistes créatives inédites. Avec Relume, la machine devient un véritable partenaire de création qui nourrit votre inspiration et démultiplie vos capacités. De quoi envisager l'avenir de la création web sous un angle radicalement nouveau !

Comment débuter avec Relume et réaliser son premier projet ?

Vous êtes convaincu par les promesses de Relume et souhaitez tester son potentiel sur votre prochain projet web ? Rien de plus simple :

  1. Rendez-vous sur le site relume.io et créez gratuitement votre compte
  2. Démarrez un nouveau projet et laissez-vous guider par l'interface
  3. Renseignez le brief de votre projet : objectifs, cibles, ton, fonctionnalités clés...
  4. Relume génère alors un premier sitemap, des wireframes et un guide de style
  5. Affinez les propositions de l'IA selon vos préférences
  6. Générez automatiquement les contenus et optimisez-les pour le SEO
  7. Exportez vos designs dans Figma pour les peaufiner si besoin
  8. Utilisez le plugin Relume pour Webflow afin d'intégrer vos pages
  9. Réalisez les développements spécifiques et mettez votre site en ligne !

Vous pouvez obtenir un premier prototype de qualité professionnelle en quelques minutes seulement. Relume s'occupe d'une grande partie du travail pour vous permettre de concrétiser vos idées à une vitesse inédite. Vous vous concentrez uniquement sur les tâches à plus forte valeur ajoutée.

N'hésitez plus et lancez-vous dès maintenant dans l'aventure Relume pour révolutionner votre façon de construire des sites web !

{{banner}}

Quelles nouveautés peut-on attendre pour Relume en 2024 - 2025 ?

L'équipe de Relume fourmille d'idées pour enrichir toujours plus son outil et repousser les limites de la conception web assistée par IA. Parmi les évolutions déjà envisagées pour les mois à venir, on peut citer :

  • Une personnalisation encore plus poussée des styles graphiques générés
  • Un assistant IA conversationnel pour affiner les briefs et mieux comprendre les besoins
  • Des fonctionnalités avancées d'accessibilité pour générer des sites inclusifs
  • Une marketplace pour vendre ses propres templates et composants
  • Un outil de génération de maquettes et de prototypes animés
  • Davantage d'intégrations avec les CMS et outils les plus populaires
  • Des modèles spécialisés par secteur d'activité pour des designs ultra-pertinents

L'aventure ne fait que commencer pour Relume qui s'impose d'ores et déjà comme une référence de la création web propulsée par l'IA. Un outil visionnaire et prometteur qui mérite qu'on lui accorde toute notre attention !

En Résumé, le meilleur sur le marché des outils IA ?

Au terme de cette exploration des possibilités de Relume, une conclusion s'impose : cet outil marque un véritable tournant dans la démocratisation de la création web. Avec son approche globale mêlant IA et savoir-faire humain, Relume donne à tous les moyens de créer des sites professionnels en toute simplicité.

Des sitemaps aux contenus en passant par le design system, Relume automatise un nombre inédit d'étapes clés du workflow créatif. Un gain de temps et d'énergie considérable pour les équipes web, qui peuvent se recentrer sur les enjeux business et l'expérience utilisateur.

Intuitif, puissant et étonnamment simple à prendre en main, Relume séduit un public toujours plus large, des développeurs aux chefs de projet en passant par les designers. La promesse d'une expérience de création web unifiée et repensée pour tirer le meilleur parti du potentiel de l'IA générative.

Véritable couteau-suisse de la conception web nouvelle génération, Relume ne cesse d'évoluer et de repousser les limites. Les fonctionnalités actuelles ne sont qu'un début, et de nombreuses surprises attendent encore les utilisateurs dans les mois à venir. Une chose est sûre : Relume a de beaux jours devant lui et va durablement transformer notre façon d'imaginer les sites web. Une révolution à ne manquer sous aucun prétexte !

Alors, convaincu par la vision de Relume ? Il ne vous reste plus qu'à créer votre compte sur relume.io et à vous laisser guider par l'intelligence artificielle pour donner vie à vos projets les plus ambitieux. Vous verrez, créer un site web n'a jamais été aussi simple et intuitif. Bienvenue dans l'avenir de la création web !

{{banner}}

Partager l’article

Pour aller plus loin

Qu'est ce que Relume ?

Relume est une plateforme conçue pour simplifier et accélérer la création de sites Web sur Webflow. Elle propose une bibliothèque complète de composants préconstruits et personnalisables, permettant aux utilisateurs d’intégrer rapidement des sections comme des en-têtes, pieds de page, FAQ, et bien plus encore dans leurs projets. Grâce à Relume, les développeurs et designers Webflow peuvent gagner du temps, maintenir une cohérence visuelle dans leurs designs et respecter les bonnes pratiques en matière de développement. Cette ressource est idéale pour les freelances, agences et créateurs cherchant à optimiser leur processus tout en garantissant des sites de haute qualité.

Qu'est-ce que relume ai ?

Relume AI est un outil innovant qui intègre l’intelligence artificielle pour transformer la conception de sites web. Il permet de générer rapidement des sitemaps et des wireframes à partir de simples descriptions textuelles, facilitant ainsi la phase initiale de conception. Grâce à une vaste bibliothèque de plus de 1 000 composants préconstruits pour Figma et Webflow, les utilisateurs peuvent créer des designs cohérents et professionnels en un temps réduit. De plus, Relume AI offre des fonctionnalités d’exportation directe vers Figma et Webflow, simplifiant le processus de développement et permettant une collaboration en temps réel au sein des équipes.

Comment copier/coller une section relume sur Webflow ?

Pour copier une section de la bibliothèque Relume vers Webflow, commencez par vous connecter à votre compte Relume et accédez à leur bibliothèque de composants. Parcourez les sections disponibles, sélectionnez celle qui correspond à vos besoins, et cliquez sur l’option “Copy to Webflow” pour copier le composant. Ensuite, ouvrez votre projet Webflow, naviguez jusqu’à la page où vous souhaitez intégrer la section, et collez-la à l’endroit souhaité en utilisant le raccourci clavier Ctrl+V (Windows) ou Cmd+V (Mac). Une fois la section intégrée, personnalisez-la directement dans Webflow en modifiant les couleurs, textes, images, ou animations pour qu’elle corresponde parfaitement à votre projet. Ce processus simple et rapide vous permet de profiter des composants préconstruits de Relume tout en conservant une grande flexibilité dans votre design.