Tutoriel

Créer un site web de zéro avec Crewdle Build

Suivez une création réelle, d’une brève description à une page publiée : questions guidées, guide de style, parcours, plan, puis la page finie en direct.

Mis à jour le

Crewdle Build transforme une brève description en langage courant en un véritable site web fonctionnel, pas une maquette, en vous guidant à travers six étapes. Ce guide suit une création du début à la fin : une page d'accueil pour Fern & Co, une boutique fictive de plantes d'intérieur.

Étape 1 : Décrivez ce que vous voulez construire

Ouvrez Build et décrivez le site en langage courant : à quoi il sert, à qui il s'adresse et quelles sections il doit avoir. Choisissez un type de départ comme Page d'accueil, ou écrivez votre propre description. Nous avons utilisé : « Une page d'accueil chaleureuse et terreuse pour Fern & Co, une boutique de plantes d'intérieur. Il faut une section d'accueil, une section plantes en vedette, une section conseils d'entretien, les heures et l'emplacement du magasin, et une inscription à la newsletter. »

Étape 2 : Répondez à quelques questions rapides

Avant d'écrire quoi que ce soit, Build pose quelques questions rapides pour cerner l'ambiance : le style recherché, le public visé, si vous avez du vrai contenu ou préférez des espaces réservés soignés, et s'il faut respecter une marque existante.

Question guidée de Crewdle Build demandant qui est le public principal, avec des puces de réponses suggérées et une barre de progression Build pose quelques questions rapides avant d'écrire quoi que ce soit, pour que le résultat corresponde à votre intention dès le départ.

Comment répondre aux questions de configuration

  1. Cliquez sur une des réponses suggérées, ou tapez la vôtre dans la zone en dessous.
  2. Cliquez sur Suivant après chaque question ; la dernière a un bouton Soumettre.
  3. Lisez la vision que Build résume, puis cliquez sur Oui, construis-le ! pour la verrouiller.

Étape 3 : Regardez le plan et le guide de style se former

Une fois confirmé, Build verrouille un Plan de projet écrit — objectifs, utilisateurs cibles, portée, ton, et une palette de couleurs et de polices de départ — puis construit le Guide de style : vos jetons de couleur, la typographie, l'espacement et chaque composant réutilisable (boutons, cartes, sections) que le design exige.

Document du plan de projet de Crewdle Build montrant l'aperçu, les objectifs, les utilisateurs, la portée, le ton, la pile technique et les jetons de couleur Le plan de projet capture les objectifs, les utilisateurs et la portée avant qu'un seul composant ne soit construit.

Guide de style de Crewdle Build montrant une palette chaleureuse olive et terracotta avec les polices Fraunces et Nunito Sans Le guide de style contient la palette de couleurs et la typographie que Build a choisies pour la description.

Ouvrez n'importe quel composant dans l'onglet Composants pour voir son aperçu en direct, ses variantes et son tableau de propriétés.

Aperçu d'un composant HeroSection de Crewdle Build, montrant le rendu de la section d'accueil et une liste de variantes Chaque composant, comme ce HeroSection, obtient son propre aperçu avec des variantes et un tableau de propriétés.

Étape 4 : Passez en revue le parcours utilisateur, la structure et le plan

Avant d'assembler la page, Build cartographie trois autres éléments que vous pouvez inspecter et réorienter :

  • Parcours utilisateur : comment chaque type de visiteur passe de la curiosité à l'action, étape par étape, avec ses émotions, ses pensées et ses points de friction.
  • Structure : une carte d'architecture de l'information montrant comment votre contenu se connecte, ainsi que la navigation qui en découle.
  • Plan : chaque objectif du visiteur décomposé en tâches et sous-tâches, chacune liée à l'écran et au composant précis qui la réalise.

Carte du parcours utilisateur de Crewdle Build montrant l'émotion, les actions, les pensées et les points de friction sur cinq étapes pour un persona Le parcours utilisateur cartographie l'arc émotionnel de chaque persona à travers la page, étape par étape.

Diagramme de structure de Crewdle Build montrant comment la page d'accueil, la barre de navigation, la section d'accueil et d'autres concepts de contenu se connectent La structure montre comment votre contenu se connecte et la navigation qui en découle.

Plan de Crewdle Build montrant les objectifs des visiteurs décomposés en tâches associées à des écrans et composants précis Le plan relie chaque objectif du visiteur à l'écran et au composant précis qui le concrétise.

Vous pouvez répondre dans le chat à tout moment pour réorienter l'un de ces éléments ; Build intègre votre réponse dans l'étape suivante.

Étape 5 : Découvrez la page finie assemblée et en direct

Une fois le plan établi, Build assemble tous les composants dans la page réelle, en générant au passage les visuels nécessaires (comme une photo d'accueil), et la déploie automatiquement vers un aperçu en direct.

Aperçu en direct de Crewdle Build de la page d'accueil finie de Fern & Co, avec image d'accueil, titre et navigation Cliquez sur Présenter pour voir votre prototype fini et en direct, du début à la fin.

Comment prévisualiser et continuer à ajuster

  1. Cliquez sur Présenter dans la barre supérieure pour voir la page finie en plein écran, ou consultez le panneau d'aperçu ancré à droite de n'importe quel onglet.
  2. Décrivez tout changement dans le chat, par exemple « remplace par la vraie adresse du magasin », et Build met à jour les composants concernés.
  3. Une fois satisfait, cliquez sur Publier pour la mettre en ligne, ou Dupliquer pour créer une variante.

Et ensuite ?

Tout est du vrai code que vous pouvez continuer à façonner : intégrez vos propres photos et textes, connectez un domaine personnalisé, ou confiez-le à un développeur via l'éditeur de code intégré ou le Build CLI. Voir Crewdle Build pour la vue d'ensemble.

Questions fréquentes

Faut-il savoir coder pour construire un site complet de cette façon ?

Non. Vous décrivez ce que vous voulez et répondez à quelques questions guidées en langage courant ; Build s’occupe du système de design, de la structure et du code. Les développeurs peuvent optionnellement aller plus loin dans l’éditeur de code ou le Build CLI.

Puis-je changer mes réponses ou le design après le démarrage de Build ?

Oui. Répondez dans le chat à tout moment, par exemple pour ajuster l’ambiance, intégrer du vrai contenu ou modifier une section, et Build met à jour le système de design et la page en conséquence.

Qu’obtient-on à la fin : un vrai site ou juste un design ?

Un vrai site web fonctionnel, avec du code réel, déployé automatiquement vers un aperçu en direct pendant sa construction. Publiez-le pour le mettre en ligne, et connectez votre propre domaine personnalisé.

Crewdle Crewdle AI