Site narratif de marque
Instructions
Mission principale
Contexte : Les récits de marque se présentent souvent sous forme de documents textuels ou de présentations PowerPoint, sans pour autant offrir une expérience immersive. Une page de marque réussie devrait ressembler à un magazine visuellement attrayant, que l’on peut parcourir à toute vitesse. Grâce à une mise en page soignée, des animations et un rythme adaptés, les visiteurs peuvent ainsi comprendre naturellement la philosophie et le ton de la marque.
Objectifs spécifiques :
L'histoire de la marque est décomposée en 4 à 8 nœuds narratifs, chaque nœud correspondant à un chapitre visuel.
Étudiez les sites web de marques de référence pour en extraire l'inspiration visuelle et les références de conception.
Concevoir un système de style visuel sophistiqué (palette de couleurs, typographie, mise en page, effets de mouvement) qui soit en accord avec l'identité de la marque.
Générez une page web interactive à défilement qui inclut des modules tels que la chronologie, les étapes clés et l'évolution du produit.
Veillez à ce que la page ait une apparence visuellement sophistiquée, élégante et minimaliste, en évitant les designs bon marché ou trop décorés.
Principales contraintes :
Le style visuel doit être cohérent avec le ton de la marque (par exemple, marques technologiques → calme et sobre, marques de beauté → chaleureux et doux).
Les effets d'animation doivent être sobres et modérés, au service du récit plutôt que de la démonstration de compétences techniques.
La vitesse de chargement des pages et la fluidité de l'interaction sont essentielles pour garantir une bonne expérience utilisateur.
Avant de réaliser la tâche, les utilisateurs doivent fournir des informations pertinentes telles que l'histoire de la marque, son contexte et ses valeurs.
Étape 1 : Comprendre l’histoire de la marque et extraire la structure narrative
Objectif : Acquérir une compréhension approfondie du contenu central de l'histoire de la marque et identifier les points narratifs clés et les courbes émotionnelles.
action:
Lisez attentivement le texte de présentation de la marque fourni par l'utilisateur et identifiez les éléments suivants :
-Origine et contexte de la marque
-Concepts/Valeurs fondamentaux
- Événements clés (lancement de produit, récompenses, percées chez les utilisateurs, etc.)
- L'histoire du fondateur ou de l'équipe (le cas échéant)
-Vision de la marque/Orientation future
- Décomposez le récit en 4 à 8 nœuds narratifs, chaque nœud contenant :
- Titre du nœud (concis et percutant, 5 à 10 mots)
-Informations essentielles (résumées en 1 à 2 phrases)
- Ton émotionnel (par exemple, chaleur, détermination, percée, espoir)
Élaborez le flux narratif et déterminez les relations logiques et la progression émotionnelle entre les différents nœuds.
Normes de qualité :
- Le nombre de nœuds narratifs doit être modéré (trop peu donneront l'impression que le récit est superficiel, trop nombreux le rendront long).
- Chaque nœud a un objectif narratif clair, évitant ainsi la duplication des informations.
-Le récit global comporte un début, un développement, un point culminant et une résolution, avec des moments culminants émotionnels.
Étape 2 : Rechercher des marques de référence et collecter des sources d’inspiration visuelles
Objectif : En se basant sur le ton de la marque, rechercher et analyser des sites web de marques exceptionnelles présentant des styles similaires ou comparables afin d'en extraire une inspiration visuelle et des références de conception.
action:
1. Déterminer la direction de la recherche de points de référence :
Sur la base des mots clés relatifs au ton de la marque extraits à l'étape 1 (tels que « {mots clés relatifs au ton de la marque} »), élaborez une stratégie de recherche.
Définir 2 à 3 dimensions de recherche :
Références dans le même secteur (par exemple, marques de cosmétiques nationales exceptionnelles)
Collaborations intersectorielles autour de thèmes similaires (par exemple, des marques d'autres catégories qui mettent également l'accent sur « l'esthétique orientale », comme les boissons à base de thé et l'ameublement).
Exemples de design primés (par exemple, des sites web primés avec des styles similaires sur Awwwards et FWA)
2. Rechercher et filtrer les marques comparables :
Utilisez un outil de recherche pour rechercher des mots clés tels que :
"{Secteur} + Site web de marque + Design"
"{mots-clés du ton} + site web de la marque + prix"
« Meilleur design de site web {Secteur} 2024 »
Sélectionnez 3 à 5 sites web de marques dont le style visuel mérite d'être pris comme référence.
Privilégiez les sites web bénéficiant d'un positionnement haut de gamme, d'un excellent design et d'une fonctionnalité de narration défilante.
3. Analyse approfondie des sites web de référence :
Analysez visuellement chaque site web de référence et notez les éléments suivants :
Palette de couleurs : combinaison de la couleur principale, de la couleur de fond et de la couleur d’accentuation
Utilisation des polices : sélection des polices, hiérarchie des tailles pour les titres et le corps du texte
Caractéristiques typographiques : rapport d’espacement blanc, système de grille, alignement.
Style d'animation : méthode de déclenchement par défilement, durée d'animation, effet de parallaxe
Structure narrative : division en chapitres, rythme du contenu, mise en valeur visuelle
Extraire les pages ou modules clés comme références visuelles
4. Extraire l'inspiration du design :
Résumez les caractéristiques communes des sites web de référence (par exemple : « Ces marques utilisent généralement de grands espaces blancs + des titres à empattements + des animations en dégradé »).
Identifier les techniques de conception uniques dont on peut s'inspirer (par exemple : « La chronologie de la marque A utilise le défilement horizontal, ce qui est très innovant »).
Identifiez les pièges de conception à éviter (par exemple : « La marque B a trop d’animations, ce qui lui donne un aspect tape-à-l’œil »).
Développer 3 à 5 sources d'inspiration claires en matière de design qui serviront de principes directeurs pour les travaux de conception ultérieurs.
Normes de qualité :
Le nombre de marques de référence est modéré (3-5), couvrant à la fois les pairs du secteur et les références intersectorielles.
L'analyse est exhaustive et couvre la palette de couleurs, la police de caractères, la typographie, l'animation et la structure.
Le design doit inspirer des idées concrètes et réalisables, plutôt que des notions vagues de concepts « de haut niveau ».
Distinguez clairement les éléments de conception « dignes d’être cités en exemple » de ceux qu’il convient d’« éviter ».
Une fois l'étude terminée, vérifiez auprès de l'utilisateur s'il est satisfait de la prestation. Dans le cas contraire, apportez des modifications en fonction de ses commentaires jusqu'à ce qu'il soit satisfait.
Étape 3 : Définir le système de style visuel de la marque
Objectif : Concevoir, à partir des résultats d'une étude comparative et en tenant compte du style propre à la marque, un système de style visuel sophistiqué, élégant et minimaliste.
action:
Sur la base de l'analyse du ton de la marque à l'étape 1 et des résultats de l'étude comparative à l'étape 2, les mots clés du ton visuel ont été déterminés.
Conception du schéma de couleurs :
Palette de couleurs principale : Choisissez 1 à 2 couleurs principales qui représentent le caractère de la marque (indiquez les valeurs de couleur).
Couleurs secondaires : 2 à 3 couleurs secondaires utilisées pour la superposition et l’embellissement visuel.
Couleur de fond : Privilégiez les fonds blanc cassé doux, gris clair ou foncés, et évitez le blanc pur (#FFFFFF).
Couleur d'accentuation : Couleur à fort contraste utilisée pour mettre en évidence les boutons d'appel à l'action ou les informations clés.
En vous référant aux schémas de couleurs des marques de référence, assurez-vous que le schéma de couleurs est conforme aux normes esthétiques du secteur.
Choisissez une combinaison de polices :
Police du titre : Choisissez une police qui reflète le design et l’identité de la marque (par exemple, les polices à empattement sont élégantes, les polices sans empattement sont modernes).
Police du texte courant : Une police très lisible qui crée un contraste marqué avec les titres.
Évitez d'utiliser des polices système trop courantes (telles que Arial et SimSun).
Définir les principes de mise en page :
Stratégie d'espace blanc : Un espace blanc généreux crée une impression de sophistication et évite la surcharge d'informations.
Système de grille : Utilise une disposition en grille régulière pour maintenir l'ordre visuel.
Alignement : Privilégiez l’alignement à gauche ou centré et évitez l’alignement justifié.
Déterminez le style d'animation :
Parallaxe : Les éléments situés à différents niveaux se déplacent à des vitesses différentes, créant une impression d'espace.
Animation en fondu : le contenu apparaît progressivement au fur et à mesure que vous faites défiler la page, avec un rythme élégant.
Micro-animations : des animations détaillées telles que l’état de survol et les interactions avec les boutons renforcent la sophistication générale.
Durée de l'animation : contrôlée entre 0,3 et 0,8 seconde, afin d'éviter qu'elle ne soit ni trop rapide ni trop lente.
Inspirez-vous des techniques d'animation graphique efficaces des marques de référence et évitez les pièges de conception déjà identifiés.
Normes de qualité :
La palette de couleurs est en accord avec l'image de la marque ; les couleurs sont harmonieuses et non criardes.
Choisissez des polices de caractères esthétiques, en évitant les polices bon marché ou obsolètes.
La mise en page offre une forte impression d'espace, de nombreux espaces blancs et une hiérarchie claire des informations.
Les effets de mouvement sont sobres et mesurés, au service du récit plutôt que de mettre en valeur des prouesses techniques.
Le système de style maintient le même niveau de qualité que les cas exceptionnels de l'étude comparative.
Une fois la définition finalisée, vérifiez auprès de l'utilisateur s'il est satisfait de la livraison. Dans le cas contraire, apportez des modifications en fonction de ses commentaires jusqu'à ce qu'il le soit.
Étape 4 : Concevoir la structure de la page et le flux d’interaction
Objectif : Planifier la structure globale et le flux d'interaction de défilement de la page afin d'assurer un rythme narratif fluide.
action:
La structure générale de la page est conçue, incluant les modules suivants :
Module d'ouverture (Section principale) :
Nom de marque/Logo
Un slogan de marque ou un concept central en une seule phrase
Indices visuels pour guider le défilement (par exemple, une animation de flèche vers le bas).
Optionnel : vidéo d’arrière-plan en plein écran ou grande image
Module de chapitre narratif (conçu à partir des nœuds de l'étape 1) :
Chaque nœud correspond à un chapitre visuel indépendant.
Les chapitres peuvent être enchaînés les uns après les autres par défilement, séparateurs, espaces blancs ou animations de transition.
Chaque chapitre comprend : un titre, le corps du texte, des illustrations/images et des horodatages (le cas échéant).
Module Chronologie (optionnel, adapté aux marques ayant des échéanciers spécifiques) :
axe temporel vertical ou horizontal
Marquage clé de l'année/date
Descriptions des événements et images correspondantes à chaque étape.
Module d'affichage des produits/étapes clés :
Mise en page en grille ou en cartes
Images du produit + brève description
Effet de survol : zoom avant, affichage d’informations supplémentaires, etc.
Module « Histoire du fondateur/de l’équipe » (le cas échéant) :
Photos et légendes des stories des utilisateurs
Vous pouvez utiliser une disposition immersive en écran partagé ou en plein écran.
Section de clôture :
Rédaction publicitaire axée sur la vision de marque ou l'avenir
Boutons d'appel à l'action (par exemple, « En savoir plus », « Explorer les produits », « Nous contacter »)
Liens vers les réseaux sociaux ou informations de contact
Planifiez le processus interactif de défilement :
Déterminez le point de déclenchement du défilement pour chaque module (par exemple, déclencher l'animation lorsque le défilement atteint 50 % de la fenêtre d'affichage).
Concevoir des effets de transition entre les modules (fondu en entrée/sortie, défilement parallaxe, déplacement d'éléments, etc.).
Veillez à un rythme de défilement naturel et évitez les animations trop fréquentes qui pourraient provoquer une fatigue visuelle.
En référence aux conceptions d'interaction efficaces de marques de référence
Concevoir une stratégie de mise en page adaptative (pour garantir une bonne expérience sur les ordinateurs et les appareils mobiles).
Normes de qualité :
La structure des pages est logiquement claire, et le récit se déroule de manière naturelle et fluide.
Chaque module possède un objectif visuel clair afin d'éviter la surcharge d'informations.
Le défilement se fait à un rythme modéré qui ne provoque ni brusquerie ni fatigue chez l'utilisateur.
La conception adaptative est soigneusement étudiée, garantissant une expérience mobile sans compromis.
Étape 5 : Rédiger les instructions de génération de la page Web.
Objectif : Traduire le système de style visuel et la structure de la page en instructions de génération de page Web claires et détaillées pour l'outil generateWebpage.
action:
Rédigez des instructions structurées comprenant les éléments suivants :
1. Description générale du style :
Décrivez en détail le style visuel en utilisant un langage naturel (en vous basant sur le système de style de l'étape 3).
Exemple : « Un style sobre et élégant, inspiré de l’esthétique orientale, se caractérise par un fond blanc cassé doux (#F9F7F2), des couleurs dominantes comme un brun thé chaud (#8B7355) et un rose délicat (#E8D5C4). Le titre utilise une police à empattements, tandis que le texte courant est en police sans empattements. L’espacement généreux des caractères blancs confère une impression de sophistication. Les animations, principalement des fondus enchaînés et des effets de parallaxe, offrent un rythme fluide et élégant. »
2. Description de la structure de la page :
Décrivez la structure de la page dans l'ordre des modules.
Exemple : « La page s’ouvre sur une section Hero en plein écran, affichant le nom et le slogan de la marque sur un fond reprenant son image principale, avec une invitation à faire défiler vers le bas. Suivent quatre sections narratives, chacune comprenant un titre, un texte et une image, disposées en colonnes alternées. Vient ensuite une chronologie verticale retraçant l’évolution de la marque. Enfin, un module de conclusion présente la vision de la marque et un bouton d’appel à l’action. »
3. Détails de l'interaction :
Décrivez les principaux effets interactifs et animations.
Exemple : « Lors du défilement, le contenu du chapitre apparaît progressivement à l’écran. Les images d’arrière-plan défilent plus lentement, créant un effet de parallaxe. Les nœuds de la chronologie s’illuminent lors du défilement jusqu’à leur position correspondante. Les fiches produits s’agrandissent légèrement et affichent des ombres au survol de la souris. »
4. Marqueurs d'espace réservé au contenu :
Indiquez clairement quel contenu doit être extrait des documents fournis par l'utilisateur.
Exemple : « Le nom de la marque utilise '{Brand Name}', le slogan utilise '{Brand Slogan}', le contenu narratif est extrait de '{Brand Story Copy}', les événements de la chronologie sont extraits de '{Milestone List}' et les images du produit utilisent '{Product Image Resources}'. »
5. Conseils techniques de mise en œuvre (facultatif) :
Si des exigences techniques particulières doivent être spécifiées, veuillez en fournir une brève description.
Exemple : « Utilisez l’API Intersection Observer pour implémenter des animations déclenchées par le défilement. Utilisez CSS Grid pour implémenter des mises en page réactives. »
Normes de qualité :
Les instructions sont claires et détaillées, permettant à l'IA de comprendre avec précision l'intention de conception.
Le style visuel est décrit en détail (les couleurs ont des valeurs chromatiques, les polices ont des types et les animations ont des durées).
Grâce à des emplacements de contenu clairement définis, l'IA sait où trouver les données.
La longueur totale des instructions est modérée (trop courtes, et les informations sont insuffisantes ; trop longues, et cela peut entraîner des malentendus).
Générer une page de marque interactive (page web HTML) :
Comprend un récit complet de l'histoire de la marque
Fonctionnalités d'interaction par défilement et d'effets d'animation
Conception adaptative, compatible avec les ordinateurs et les appareils mobiles.
Le style visuel est conforme aux standards « haut de gamme, élégant et minimaliste ».
Structure du contenu :
Section Héros (Module d'ouverture)
4 à 8 chapitres narratifs
Module chronologique/jalon (le cas échéant)
Module d'affichage du produit (le cas échéant)
Module « Histoire du fondateur/de l’équipe » (le cas échéant)
Section de clôture
Normes de qualité :
Qualité visuelle : palette de couleurs harmonieuse et sophistiquée, choix de police approprié, mise en page claire et élégante, et espace blanc généreux.
Expérience interactive : défilement fluide, animations naturelles et sobres, réponse rapide et une expérience mobile optimale.
Exhaustivité du contenu : L’histoire de la marque contient des informations clés, possède une logique narrative claire et correspond précisément au texte et aux images.
Critères esthétiques : L’esthétique générale doit dégager un sentiment de sophistication, d’élégance et de simplicité, en évitant la médiocrité ou une ornementation excessive.
Analyse comparative du secteur : La qualité visuelle atteint le même niveau que les marques de référence.
Style et présentation
Principes esthétiques fondamentaux :
Une impression de sophistication : créée par des palettes de couleurs sobres, une typographie raffinée, de larges espaces blancs et des effets d'animation subtils.
Élégance : Un rythme harmonieux, des transitions naturelles et l’absence d’éléments visuels abrupts ou agressifs.
Simplicité : en éliminant les décorations inutiles, chaque élément a une fonction et une signification claires.
Direction de référence visuelle :
Sites officiels de marques haut de gamme (telles qu'Apple, Aesop, Muji)
Sites web de magazines de design (comme It's Nice That, œuvres primées aux Awwwards)
Sites web d'expositions d'art (mettant l'accent sur l'espace blanc et le rythme visuel)
Les sites web de marques de référence étudiés à l'étape 2
Styles à éviter :
Le style Taobao, excessivement décoré et encombré
Le style « tape-à-l'œil », excessivement voyant et à effets marqués
Le choix de couleurs criardes et l'agencement chaotique créent une esthétique «bon marché».
Le « style modèle » excessivement conservateur et sans inspiration
Description
Recommandé par
nene@YouMind
Pourquoi nous recommandons cette compétence
Cette compétence transforme l'histoire de votre marque en un magazine visuel immersif. Grâce à une mise en page soignée, des animations élégantes et une narration fluide, elle crée une page web interactive, haut de gamme et minimaliste, permettant aux utilisateurs de ressentir profondément le charme de la marque.
Transformez les textes et supports de l'histoire de votre marque en une page web narrative à défilement au design raffiné, transmettant la valeur et l'émotion de la marque grâce à des effets visuels et interactifs.
Compétences associées
Tout voir
Page webCréateur de pages explorables
Un rapport explique. Une page permet aux gens de découvrir par eux-mêmes. YouMind sait déjà créer des pages web. Explorable Explainer décide quoi créer — il transforme un travail de recherche, un ensemble de données ou un sujet en une seule page interactive dans la tradition des graphiques de presse et des explications explorables : un récit piloté par le défilement, de vrais graphiques, des commandes que vous pouvez déplacer, des sources que vous pouvez vérifier. Il planifie avant de coder. Vous approuvez d'abord un plan de construction : la question à laquelle la page répond, la révélation — le moment où le lecteur devrait ressentir « oh » — une structure de défilement de cinq à huit sections, deux à quatre interactions chacune justifiée par ce que le lecteur apprend en la déplaçant, et un contrat de données listant chaque chiffre et sa provenance. Ensuite, il crée un fichier HTML autonome sans étape de construction. Balisage sémantique. Tous les nombres dans une unique constante DATA modifiable en haut. Des révélations au défilement qui ne se cassent pas sur un téléphone. Chaque contrôle est un véritable élément de formulaire opérable au clavier, avec un texte dynamique décrivant sa valeur actuelle. L'accessibilité est intégrée plutôt que plaquée : contraste 4,5:1, anneaux de focus visibles, texte alternatif partout, aucune signification transmise par la seule couleur, respect de la réduction des mouvements, responsive dès 360px. Avant de livrer, il effectue un auto-examen en cinq points et rapporte honnêtement les résultats : la révélation fonctionne-t-elle vraiment, la page se lit-elle toujours avec JavaScript désactivé, l'ordre de tabulation est-il cohérent, chaque chiffre est-il traçable, y a-t-il quelque chose qui s'anime et qu'un lecteur voudrait arrêter. Deux règles qu'il ne brisera jamais : il n'invente jamais de données pour embellir un graphique, et il vous signale lorsque vos chiffres contredisent votre brouillon. Pour les chercheurs, analystes, journalistes, enseignants, fondateurs indépendants et consultants qui souhaitent que leur travail soit exploré plutôt que survolé.
Page webPages web douces et flottantes
Système de design web au style lumière douce de jour : canevas bleu ciel pâle (#ebf5ff), grands caractères d'affichage avec graisse fixe de 500 (jusqu'à 148px en responsive), cartes à coins arrondis de 32px et pilules de 9999px, CTA solide noir quasi pur #181d27, blocs pastel et illustrations 3D flottantes aux allures d'argile. La profondeur repose uniquement sur le décalage de teinte entre le canevas et les cartes, les cartes de contenu étant sans ombre. Convient pour les besoins « style lumière douce de jour », « landing pages avec illustrations 3D », « canevas bleu clair », « style cartes arrondies », « site SaaS », « style Linear/Framer », etc. Accessibilité et responsive intégrés.
Page webStyle Fashion Creative Design
Système de design de pages web de style affiche éditoriale de mode : toile en papier crème chaud (#fffef7), titres surdimensionnés avec un poids de police de 300 (64–84px), photographies en pleine page, zéro ombre, cartes à angles droits + boutons avec un rayon de pilule de 1440px. Convient aux besoins tels que « style de design mode », « mise en page magazine », « style affiche », « page web de livre d'art », « portfolio de studio », « page de galerie », etc. Il peut transformer tout contenu en une page au style éditorial de haute couture.
Site narratif de marque
Instructions
Mission principale
Contexte : Les récits de marque se présentent souvent sous forme de documents textuels ou de présentations PowerPoint, sans pour autant offrir une expérience immersive. Une page de marque réussie devrait ressembler à un magazine visuellement attrayant, que l’on peut parcourir à toute vitesse. Grâce à une mise en page soignée, des animations et un rythme adaptés, les visiteurs peuvent ainsi comprendre naturellement la philosophie et le ton de la marque.
Objectifs spécifiques :
L'histoire de la marque est décomposée en 4 à 8 nœuds narratifs, chaque nœud correspondant à un chapitre visuel.
Étudiez les sites web de marques de référence pour en extraire l'inspiration visuelle et les références de conception.
Concevoir un système de style visuel sophistiqué (palette de couleurs, typographie, mise en page, effets de mouvement) qui soit en accord avec l'identité de la marque.
Générez une page web interactive à défilement qui inclut des modules tels que la chronologie, les étapes clés et l'évolution du produit.
Veillez à ce que la page ait une apparence visuellement sophistiquée, élégante et minimaliste, en évitant les designs bon marché ou trop décorés.
Principales contraintes :
Le style visuel doit être cohérent avec le ton de la marque (par exemple, marques technologiques → calme et sobre, marques de beauté → chaleureux et doux).
Les effets d'animation doivent être sobres et modérés, au service du récit plutôt que de la démonstration de compétences techniques.
La vitesse de chargement des pages et la fluidité de l'interaction sont essentielles pour garantir une bonne expérience utilisateur.
Avant de réaliser la tâche, les utilisateurs doivent fournir des informations pertinentes telles que l'histoire de la marque, son contexte et ses valeurs.
Étape 1 : Comprendre l’histoire de la marque et extraire la structure narrative
Objectif : Acquérir une compréhension approfondie du contenu central de l'histoire de la marque et identifier les points narratifs clés et les courbes émotionnelles.
action:
Lisez attentivement le texte de présentation de la marque fourni par l'utilisateur et identifiez les éléments suivants :
-Origine et contexte de la marque
-Concepts/Valeurs fondamentaux
- Événements clés (lancement de produit, récompenses, percées chez les utilisateurs, etc.)
- L'histoire du fondateur ou de l'équipe (le cas échéant)
-Vision de la marque/Orientation future
- Décomposez le récit en 4 à 8 nœuds narratifs, chaque nœud contenant :
- Titre du nœud (concis et percutant, 5 à 10 mots)
-Informations essentielles (résumées en 1 à 2 phrases)
- Ton émotionnel (par exemple, chaleur, détermination, percée, espoir)
Élaborez le flux narratif et déterminez les relations logiques et la progression émotionnelle entre les différents nœuds.
Normes de qualité :
- Le nombre de nœuds narratifs doit être modéré (trop peu donneront l'impression que le récit est superficiel, trop nombreux le rendront long).
- Chaque nœud a un objectif narratif clair, évitant ainsi la duplication des informations.
-Le récit global comporte un début, un développement, un point culminant et une résolution, avec des moments culminants émotionnels.
Étape 2 : Rechercher des marques de référence et collecter des sources d’inspiration visuelles
Objectif : En se basant sur le ton de la marque, rechercher et analyser des sites web de marques exceptionnelles présentant des styles similaires ou comparables afin d'en extraire une inspiration visuelle et des références de conception.
action:
1. Déterminer la direction de la recherche de points de référence :
Sur la base des mots clés relatifs au ton de la marque extraits à l'étape 1 (tels que « {mots clés relatifs au ton de la marque} »), élaborez une stratégie de recherche.
Définir 2 à 3 dimensions de recherche :
Références dans le même secteur (par exemple, marques de cosmétiques nationales exceptionnelles)
Collaborations intersectorielles autour de thèmes similaires (par exemple, des marques d'autres catégories qui mettent également l'accent sur « l'esthétique orientale », comme les boissons à base de thé et l'ameublement).
Exemples de design primés (par exemple, des sites web primés avec des styles similaires sur Awwwards et FWA)
2. Rechercher et filtrer les marques comparables :
Utilisez un outil de recherche pour rechercher des mots clés tels que :
"{Secteur} + Site web de marque + Design"
"{mots-clés du ton} + site web de la marque + prix"
« Meilleur design de site web {Secteur} 2024 »
Sélectionnez 3 à 5 sites web de marques dont le style visuel mérite d'être pris comme référence.
Privilégiez les sites web bénéficiant d'un positionnement haut de gamme, d'un excellent design et d'une fonctionnalité de narration défilante.
3. Analyse approfondie des sites web de référence :
Analysez visuellement chaque site web de référence et notez les éléments suivants :
Palette de couleurs : combinaison de la couleur principale, de la couleur de fond et de la couleur d’accentuation
Utilisation des polices : sélection des polices, hiérarchie des tailles pour les titres et le corps du texte
Caractéristiques typographiques : rapport d’espacement blanc, système de grille, alignement.
Style d'animation : méthode de déclenchement par défilement, durée d'animation, effet de parallaxe
Structure narrative : division en chapitres, rythme du contenu, mise en valeur visuelle
Extraire les pages ou modules clés comme références visuelles
4. Extraire l'inspiration du design :
Résumez les caractéristiques communes des sites web de référence (par exemple : « Ces marques utilisent généralement de grands espaces blancs + des titres à empattements + des animations en dégradé »).
Identifier les techniques de conception uniques dont on peut s'inspirer (par exemple : « La chronologie de la marque A utilise le défilement horizontal, ce qui est très innovant »).
Identifiez les pièges de conception à éviter (par exemple : « La marque B a trop d’animations, ce qui lui donne un aspect tape-à-l’œil »).
Développer 3 à 5 sources d'inspiration claires en matière de design qui serviront de principes directeurs pour les travaux de conception ultérieurs.
Normes de qualité :
Le nombre de marques de référence est modéré (3-5), couvrant à la fois les pairs du secteur et les références intersectorielles.
L'analyse est exhaustive et couvre la palette de couleurs, la police de caractères, la typographie, l'animation et la structure.
Le design doit inspirer des idées concrètes et réalisables, plutôt que des notions vagues de concepts « de haut niveau ».
Distinguez clairement les éléments de conception « dignes d’être cités en exemple » de ceux qu’il convient d’« éviter ».
Une fois l'étude terminée, vérifiez auprès de l'utilisateur s'il est satisfait de la prestation. Dans le cas contraire, apportez des modifications en fonction de ses commentaires jusqu'à ce qu'il soit satisfait.
Étape 3 : Définir le système de style visuel de la marque
Objectif : Concevoir, à partir des résultats d'une étude comparative et en tenant compte du style propre à la marque, un système de style visuel sophistiqué, élégant et minimaliste.
action:
Sur la base de l'analyse du ton de la marque à l'étape 1 et des résultats de l'étude comparative à l'étape 2, les mots clés du ton visuel ont été déterminés.
Conception du schéma de couleurs :
Palette de couleurs principale : Choisissez 1 à 2 couleurs principales qui représentent le caractère de la marque (indiquez les valeurs de couleur).
Couleurs secondaires : 2 à 3 couleurs secondaires utilisées pour la superposition et l’embellissement visuel.
Couleur de fond : Privilégiez les fonds blanc cassé doux, gris clair ou foncés, et évitez le blanc pur (#FFFFFF).
Couleur d'accentuation : Couleur à fort contraste utilisée pour mettre en évidence les boutons d'appel à l'action ou les informations clés.
En vous référant aux schémas de couleurs des marques de référence, assurez-vous que le schéma de couleurs est conforme aux normes esthétiques du secteur.
Choisissez une combinaison de polices :
Police du titre : Choisissez une police qui reflète le design et l’identité de la marque (par exemple, les polices à empattement sont élégantes, les polices sans empattement sont modernes).
Police du texte courant : Une police très lisible qui crée un contraste marqué avec les titres.
Évitez d'utiliser des polices système trop courantes (telles que Arial et SimSun).
Définir les principes de mise en page :
Stratégie d'espace blanc : Un espace blanc généreux crée une impression de sophistication et évite la surcharge d'informations.
Système de grille : Utilise une disposition en grille régulière pour maintenir l'ordre visuel.
Alignement : Privilégiez l’alignement à gauche ou centré et évitez l’alignement justifié.
Déterminez le style d'animation :
Parallaxe : Les éléments situés à différents niveaux se déplacent à des vitesses différentes, créant une impression d'espace.
Animation en fondu : le contenu apparaît progressivement au fur et à mesure que vous faites défiler la page, avec un rythme élégant.
Micro-animations : des animations détaillées telles que l’état de survol et les interactions avec les boutons renforcent la sophistication générale.
Durée de l'animation : contrôlée entre 0,3 et 0,8 seconde, afin d'éviter qu'elle ne soit ni trop rapide ni trop lente.
Inspirez-vous des techniques d'animation graphique efficaces des marques de référence et évitez les pièges de conception déjà identifiés.
Normes de qualité :
La palette de couleurs est en accord avec l'image de la marque ; les couleurs sont harmonieuses et non criardes.
Choisissez des polices de caractères esthétiques, en évitant les polices bon marché ou obsolètes.
La mise en page offre une forte impression d'espace, de nombreux espaces blancs et une hiérarchie claire des informations.
Les effets de mouvement sont sobres et mesurés, au service du récit plutôt que de mettre en valeur des prouesses techniques.
Le système de style maintient le même niveau de qualité que les cas exceptionnels de l'étude comparative.
Une fois la définition finalisée, vérifiez auprès de l'utilisateur s'il est satisfait de la livraison. Dans le cas contraire, apportez des modifications en fonction de ses commentaires jusqu'à ce qu'il le soit.
Étape 4 : Concevoir la structure de la page et le flux d’interaction
Objectif : Planifier la structure globale et le flux d'interaction de défilement de la page afin d'assurer un rythme narratif fluide.
action:
La structure générale de la page est conçue, incluant les modules suivants :
Module d'ouverture (Section principale) :
Nom de marque/Logo
Un slogan de marque ou un concept central en une seule phrase
Indices visuels pour guider le défilement (par exemple, une animation de flèche vers le bas).
Optionnel : vidéo d’arrière-plan en plein écran ou grande image
Module de chapitre narratif (conçu à partir des nœuds de l'étape 1) :
Chaque nœud correspond à un chapitre visuel indépendant.
Les chapitres peuvent être enchaînés les uns après les autres par défilement, séparateurs, espaces blancs ou animations de transition.
Chaque chapitre comprend : un titre, le corps du texte, des illustrations/images et des horodatages (le cas échéant).
Module Chronologie (optionnel, adapté aux marques ayant des échéanciers spécifiques) :
axe temporel vertical ou horizontal
Marquage clé de l'année/date
Descriptions des événements et images correspondantes à chaque étape.
Module d'affichage des produits/étapes clés :
Mise en page en grille ou en cartes
Images du produit + brève description
Effet de survol : zoom avant, affichage d’informations supplémentaires, etc.
Module « Histoire du fondateur/de l’équipe » (le cas échéant) :
Photos et légendes des stories des utilisateurs
Vous pouvez utiliser une disposition immersive en écran partagé ou en plein écran.
Section de clôture :
Rédaction publicitaire axée sur la vision de marque ou l'avenir
Boutons d'appel à l'action (par exemple, « En savoir plus », « Explorer les produits », « Nous contacter »)
Liens vers les réseaux sociaux ou informations de contact
Planifiez le processus interactif de défilement :
Déterminez le point de déclenchement du défilement pour chaque module (par exemple, déclencher l'animation lorsque le défilement atteint 50 % de la fenêtre d'affichage).
Concevoir des effets de transition entre les modules (fondu en entrée/sortie, défilement parallaxe, déplacement d'éléments, etc.).
Veillez à un rythme de défilement naturel et évitez les animations trop fréquentes qui pourraient provoquer une fatigue visuelle.
En référence aux conceptions d'interaction efficaces de marques de référence
Concevoir une stratégie de mise en page adaptative (pour garantir une bonne expérience sur les ordinateurs et les appareils mobiles).
Normes de qualité :
La structure des pages est logiquement claire, et le récit se déroule de manière naturelle et fluide.
Chaque module possède un objectif visuel clair afin d'éviter la surcharge d'informations.
Le défilement se fait à un rythme modéré qui ne provoque ni brusquerie ni fatigue chez l'utilisateur.
La conception adaptative est soigneusement étudiée, garantissant une expérience mobile sans compromis.
Étape 5 : Rédiger les instructions de génération de la page Web.
Objectif : Traduire le système de style visuel et la structure de la page en instructions de génération de page Web claires et détaillées pour l'outil generateWebpage.
action:
Rédigez des instructions structurées comprenant les éléments suivants :
1. Description générale du style :
Décrivez en détail le style visuel en utilisant un langage naturel (en vous basant sur le système de style de l'étape 3).
Exemple : « Un style sobre et élégant, inspiré de l’esthétique orientale, se caractérise par un fond blanc cassé doux (#F9F7F2), des couleurs dominantes comme un brun thé chaud (#8B7355) et un rose délicat (#E8D5C4). Le titre utilise une police à empattements, tandis que le texte courant est en police sans empattements. L’espacement généreux des caractères blancs confère une impression de sophistication. Les animations, principalement des fondus enchaînés et des effets de parallaxe, offrent un rythme fluide et élégant. »
2. Description de la structure de la page :
Décrivez la structure de la page dans l'ordre des modules.
Exemple : « La page s’ouvre sur une section Hero en plein écran, affichant le nom et le slogan de la marque sur un fond reprenant son image principale, avec une invitation à faire défiler vers le bas. Suivent quatre sections narratives, chacune comprenant un titre, un texte et une image, disposées en colonnes alternées. Vient ensuite une chronologie verticale retraçant l’évolution de la marque. Enfin, un module de conclusion présente la vision de la marque et un bouton d’appel à l’action. »
3. Détails de l'interaction :
Décrivez les principaux effets interactifs et animations.
Exemple : « Lors du défilement, le contenu du chapitre apparaît progressivement à l’écran. Les images d’arrière-plan défilent plus lentement, créant un effet de parallaxe. Les nœuds de la chronologie s’illuminent lors du défilement jusqu’à leur position correspondante. Les fiches produits s’agrandissent légèrement et affichent des ombres au survol de la souris. »
4. Marqueurs d'espace réservé au contenu :
Indiquez clairement quel contenu doit être extrait des documents fournis par l'utilisateur.
Exemple : « Le nom de la marque utilise '{Brand Name}', le slogan utilise '{Brand Slogan}', le contenu narratif est extrait de '{Brand Story Copy}', les événements de la chronologie sont extraits de '{Milestone List}' et les images du produit utilisent '{Product Image Resources}'. »
5. Conseils techniques de mise en œuvre (facultatif) :
Si des exigences techniques particulières doivent être spécifiées, veuillez en fournir une brève description.
Exemple : « Utilisez l’API Intersection Observer pour implémenter des animations déclenchées par le défilement. Utilisez CSS Grid pour implémenter des mises en page réactives. »
Normes de qualité :
Les instructions sont claires et détaillées, permettant à l'IA de comprendre avec précision l'intention de conception.
Le style visuel est décrit en détail (les couleurs ont des valeurs chromatiques, les polices ont des types et les animations ont des durées).
Grâce à des emplacements de contenu clairement définis, l'IA sait où trouver les données.
La longueur totale des instructions est modérée (trop courtes, et les informations sont insuffisantes ; trop longues, et cela peut entraîner des malentendus).
Générer une page de marque interactive (page web HTML) :
Comprend un récit complet de l'histoire de la marque
Fonctionnalités d'interaction par défilement et d'effets d'animation
Conception adaptative, compatible avec les ordinateurs et les appareils mobiles.
Le style visuel est conforme aux standards « haut de gamme, élégant et minimaliste ».
Structure du contenu :
Section Héros (Module d'ouverture)
4 à 8 chapitres narratifs
Module chronologique/jalon (le cas échéant)
Module d'affichage du produit (le cas échéant)
Module « Histoire du fondateur/de l’équipe » (le cas échéant)
Section de clôture
Normes de qualité :
Qualité visuelle : palette de couleurs harmonieuse et sophistiquée, choix de police approprié, mise en page claire et élégante, et espace blanc généreux.
Expérience interactive : défilement fluide, animations naturelles et sobres, réponse rapide et une expérience mobile optimale.
Exhaustivité du contenu : L’histoire de la marque contient des informations clés, possède une logique narrative claire et correspond précisément au texte et aux images.
Critères esthétiques : L’esthétique générale doit dégager un sentiment de sophistication, d’élégance et de simplicité, en évitant la médiocrité ou une ornementation excessive.
Analyse comparative du secteur : La qualité visuelle atteint le même niveau que les marques de référence.
Style et présentation
Principes esthétiques fondamentaux :
Une impression de sophistication : créée par des palettes de couleurs sobres, une typographie raffinée, de larges espaces blancs et des effets d'animation subtils.
Élégance : Un rythme harmonieux, des transitions naturelles et l’absence d’éléments visuels abrupts ou agressifs.
Simplicité : en éliminant les décorations inutiles, chaque élément a une fonction et une signification claires.
Direction de référence visuelle :
Sites officiels de marques haut de gamme (telles qu'Apple, Aesop, Muji)
Sites web de magazines de design (comme It's Nice That, œuvres primées aux Awwwards)
Sites web d'expositions d'art (mettant l'accent sur l'espace blanc et le rythme visuel)
Les sites web de marques de référence étudiés à l'étape 2
Styles à éviter :
Le style Taobao, excessivement décoré et encombré
Le style « tape-à-l'œil », excessivement voyant et à effets marqués
Le choix de couleurs criardes et l'agencement chaotique créent une esthétique «bon marché».
Le « style modèle » excessivement conservateur et sans inspiration
Description
Recommandé par
nene@YouMind
Pourquoi nous recommandons cette compétence
Cette compétence transforme l'histoire de votre marque en un magazine visuel immersif. Grâce à une mise en page soignée, des animations élégantes et une narration fluide, elle crée une page web interactive, haut de gamme et minimaliste, permettant aux utilisateurs de ressentir profondément le charme de la marque.
Transformez les textes et supports de l'histoire de votre marque en une page web narrative à défilement au design raffiné, transmettant la valeur et l'émotion de la marque grâce à des effets visuels et interactifs.
Compétences associées
Tout voirPage webCréateur de pages explorables
Un rapport explique. Une page permet aux gens de découvrir par eux-mêmes. YouMind sait déjà créer des pages web. Explorable Explainer décide quoi créer — il transforme un travail de recherche, un ensemble de données ou un sujet en une seule page interactive dans la tradition des graphiques de presse et des explications explorables : un récit piloté par le défilement, de vrais graphiques, des commandes que vous pouvez déplacer, des sources que vous pouvez vérifier. Il planifie avant de coder. Vous approuvez d'abord un plan de construction : la question à laquelle la page répond, la révélation — le moment où le lecteur devrait ressentir « oh » — une structure de défilement de cinq à huit sections, deux à quatre interactions chacune justifiée par ce que le lecteur apprend en la déplaçant, et un contrat de données listant chaque chiffre et sa provenance. Ensuite, il crée un fichier HTML autonome sans étape de construction. Balisage sémantique. Tous les nombres dans une unique constante DATA modifiable en haut. Des révélations au défilement qui ne se cassent pas sur un téléphone. Chaque contrôle est un véritable élément de formulaire opérable au clavier, avec un texte dynamique décrivant sa valeur actuelle. L'accessibilité est intégrée plutôt que plaquée : contraste 4,5:1, anneaux de focus visibles, texte alternatif partout, aucune signification transmise par la seule couleur, respect de la réduction des mouvements, responsive dès 360px. Avant de livrer, il effectue un auto-examen en cinq points et rapporte honnêtement les résultats : la révélation fonctionne-t-elle vraiment, la page se lit-elle toujours avec JavaScript désactivé, l'ordre de tabulation est-il cohérent, chaque chiffre est-il traçable, y a-t-il quelque chose qui s'anime et qu'un lecteur voudrait arrêter. Deux règles qu'il ne brisera jamais : il n'invente jamais de données pour embellir un graphique, et il vous signale lorsque vos chiffres contredisent votre brouillon. Pour les chercheurs, analystes, journalistes, enseignants, fondateurs indépendants et consultants qui souhaitent que leur travail soit exploré plutôt que survolé.
Page webPages web douces et flottantes
Système de design web au style lumière douce de jour : canevas bleu ciel pâle (#ebf5ff), grands caractères d'affichage avec graisse fixe de 500 (jusqu'à 148px en responsive), cartes à coins arrondis de 32px et pilules de 9999px, CTA solide noir quasi pur #181d27, blocs pastel et illustrations 3D flottantes aux allures d'argile. La profondeur repose uniquement sur le décalage de teinte entre le canevas et les cartes, les cartes de contenu étant sans ombre. Convient pour les besoins « style lumière douce de jour », « landing pages avec illustrations 3D », « canevas bleu clair », « style cartes arrondies », « site SaaS », « style Linear/Framer », etc. Accessibilité et responsive intégrés.
Page webStyle Fashion Creative Design
Système de design de pages web de style affiche éditoriale de mode : toile en papier crème chaud (#fffef7), titres surdimensionnés avec un poids de police de 300 (64–84px), photographies en pleine page, zéro ombre, cartes à angles droits + boutons avec un rayon de pilule de 1440px. Convient aux besoins tels que « style de design mode », « mise en page magazine », « style affiche », « page web de livre d'art », « portfolio de studio », « page de galerie », etc. Il peut transformer tout contenu en une page au style éditorial de haute couture.
Trouve ta prochaine compétence préférée
Explore d'autres compétences IA sélectionnées pour la recherche, la création et le travail quotidien.