Bref Résumé
Dans cette vidéo, Tony Lotis explique comment construire une landing page animée et interactive en utilisant Cloud Design et Cloud Code en quatre étapes. Il aborde des sujets clés tels que l'inspiration visuelle, la création de designs, les ajustements nécessaires, et l'animation finale, notamment avec des composants 3D et des effets de scroll.
- Utilisation des outils Cloud Design et Cloud Code.
- Importance de l'inspiration visuelle avant de commencer.
- Méthodes pour modifier le design sans coûteux tokens.
- Ajout d'animations et d'éléments interactifs.
Le site final — ce qu'on va construire
Tony Lotis présente un site de référence qu'il va reproduire dans la vidéo, mettant en avant des animations au scroll, de la 3D interactive et des transitions fluides. Il explique que le processus se déroule en quatre étapes majeures : trouver de l'inspiration, générer le design, passer au codage dans Cloud Code, et enfin ajouter des animations. Il introduit les outils Cloud Design pour le design visuel et Cloud Code pour le développement fonctionnel, en soulignant leur complémentarité.
Design System
Dans cette section, Tony décrit le design system qui regroupe l'identité de la marque, incluant le logo, les couleurs, et la typographie. Il l'explique comme un outil utile lorsqu'on commence un nouveau projet, permettant d'assurer la cohérence visuelle. Cependant, il met en garde contre son utilisation prématurée à cause de l'impact sur les tokens. Il propose une ressource externe, getdesign.m, pour obtenir des systèmes de design préexistants, tout en conseillant de ne pas l’utiliser immédiatement pour préserver le quota de tokens.
L'inspiration avant le prompt
Tony insiste sur l'importance de la recherche d'inspiration avant de commencer à créer dans Cloud Design. Il recommande d’utiliser des sites comme Pinterest pour collecter des captures d'écran d'exemples pertinents. L'idée est de fournir une direction visuelle claire afin d'éviter des designs génériques. Il explique comment sélectionner plusieurs captures d'écran qui guideront le style du design et maximise les résultats lors de la phase de création.
Modifier le design sans cramer de tokens
Il présente différentes techniques pour modifier un design dans Cloud Design sans épuiser son quota de tokens. Il explique les trois méthodes : l'édition directe d'un élément, l'ajout de commentaires pour des modifications spécifiques, et l'approche avancée utilisant des sliders appelés "Twix" pour des ajustements simples. Tony met en avant l'importance de considérer diverses directions avant de s'attarder sur une seule et de proposer des variations de design pertinentes.
Générer des variantes en 30 secondes
Tony démontre comment générer rapidement plusieurs variantes de design à partir d'une base, en utilisant des prompts pour demander à Cloud Design de proposer des options stylistiques différentes. Ce processus permet une exploration créative rapide, facilitant la prise de décisions sur les styles qui vont le mieux au projet. Il partage également des exemples de variations possibles, illustrant les divers résultats qu'on peut obtenir en peu de temps.
Handoff vers Claude Code — zéro perte
Dans cette section, Tony explique comment passer du design dans Cloud Design vers Cloud Code sans perdre la qualité de conception. Il montre comment utiliser le bouton de partage pour exporter le design à Cloud Code avec un prompt préécrit, garantissant que le design soit transféré tel quel. Il souligne que Cloud Code ne modifiera pas le design approuvé, ce qui assure la continuité et la cohérence de l'aspect visuel.
Sections animées avec 21.st.dev
Tony présente le site 21.st.dev, une plateforme offrant une collection gratuite de composants animés. Il explique comment intégrer ces éléments animés dans le design existant, en prenant un exemple d'une section témoignage qui défile. Chaque section peut être adaptée en spécifiant des détails à conserver tout en ajoutant des animations sans perturber le design original.
3D interactive avec Sketchfab
Il montre également comment incorporer des modèles 3D interactifs dans les sites en utilisant Sketchfab, une bibliothèque contenant des modèles créés par des designers du monde entier. Tony rappelle de choisir les fichiers au format GLB pour assurer une intégration correcte. Il explique comment transférer un modèle 3D dans Cloud Code et l'utiliser efficacement dans le projet.
L'animation au scroll — l'effet split reveal
Enfin, Tony détaille comment réaliser l'effet d'animation au scroll, où une image se divise pour révéler une vidéo en arrière-plan. Il explique qu'il faut préparer à la fois une image de couverture et une vidéo, et il fournit des instructions sur la manière de demander à Claude Code de mettre en œuvre cet effet de manière précise, garantissant ainsi un rendu professionnel et dynamique.
