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