2. Veille et recherche d’idée
Objectif : trouver des sources d'inspiration et vous constituer un « book » des sites remarquables qui vous inspirent. L'idée n'est pas de copier un site existant, mais de collecter les bonnes pratiques réutilisables pour votre projet personnel.
Conseils pour mener à bien cette étape
1. Diversifiez vos sources d'inspiration. Explorez différents secteurs, pas uniquement votre domaine professionnel. Si vous êtes dans la communication, regardez aussi des sites artistiques, technologiques ou de services.
Outils conseillés : Pinterest pour les tendances graphiques, Awwwards et Behance pour des sites primés et originaux. Vous pouvez aussi parcourir la vitrine officielle d'Astro, qui rassemble des sites construits avec la technologie que vous allez utiliser.
2. Analysez les sites d'un point de vue utilisateur. Navigation fluide, mise en page claire, typographie lisible, palette harmonieuse… Notez les éléments que vous trouvez efficaces et comment les adapter à votre projet.
Outils conseillés : les extensions WhatFont (polices) et ColorZilla (couleurs).
3. Ne vous limitez pas à l'esthétique. Pensez aussi aux fonctionnalités : le menu est-il fixe ? Le site est-il responsive ? Les animations apportent-elles un plus ?
Outils conseillés : Wappalyzer, pour savoir avec quelles technologies un site est construit.
4. Constituez un « moodboard » digital. Rassemblez non seulement des sites, mais aussi des éléments graphiques (logos, typographies, couleurs) qui vous parlent.
Outils conseillés : Miro, Milanote ou Canva.
5. Priorisez la pertinence sur la quantité. Limitez-vous à 3 ou 4 sites qui correspondent à l'image que vous souhaitez donner et qui sont réalistes à faire construire par un agent IA en quelques séances. Concrètement, évitez les sites qui reposent sur des animations très élaborées, de la 3D ou des effets au défilement complexes : l'agent saura les tenter, mais vous passerez vos séances à les corriger.
Outils conseillés : un Google Doc pour noter vos observations, avec des captures d'écran des éléments clés et un système de notation de ce qui pourrait être repris ou non.
Nouveau : gardez précieusement ces captures d'écran. À l'étape 4, vous pourrez les donner à l'agent en pièce jointe pour lui montrer ce que vous attendez. Une image accompagnée d'une phrase précise (« je veux un en-tête comme celui-ci, mais avec mes couleurs ») vaut mieux qu'un long paragraphe de description.
← 1. Définir la thématique et le plan du site · 3. Maquettage →