Missione principale

Premessa: Spesso le storie di un brand sono presentate in documenti di testo o presentazioni PowerPoint, prive di uno stile di presentazione coinvolgente. Una pagina di brand efficace dovrebbe assomigliare a una rivista visivamente accattivante, scorrevole e con un layout, animazioni e ritmo attentamente studiati per consentire ai visitatori di comprendere in modo naturale la filosofia del brand e di percepirne il tono durante la navigazione.

Obiettivi specifici:

La storia del marchio è suddivisa in 4-8 nodi narrativi, ognuno dei quali corrisponde a un capitolo visivo.

Studia i siti web di marchi di riferimento per trarne ispirazione visiva e spunti di design.

Progettare un sistema di stile visivo sofisticato (combinazione di colori, tipografia, layout, effetti di movimento) in linea con l'identità del marchio.

Genera una pagina web interattiva a scorrimento che includa moduli come cronologia, traguardi e evoluzione del prodotto.

Assicurati che la pagina abbia un aspetto visivamente sofisticato, elegante e minimalista, evitando design economici o eccessivamente decorati.

Vincoli principali:

Lo stile visivo deve essere coerente con il tono del marchio (ad esempio, marchi tecnologici → calmo e sobrio, marchi di bellezza → caldo e delicato).

Gli effetti di animazione dovrebbero essere sobri e moderati, al servizio della narrazione piuttosto che ostentare abilità tecniche.

La velocità di caricamento della pagina e la fluidità dell'interazione devono garantire una buona esperienza utente.

Prima di iniziare l'attività, gli utenti devono fornire informazioni pertinenti come la storia del marchio, il contesto e i valori.

Fase 1: Comprendere la storia del marchio ed estrarre la struttura narrativa

Obiettivo: Acquisire una profonda comprensione del contenuto centrale della storia del marchio e identificare i punti narrativi chiave e le curve emotive.

azione:

Leggi attentamente il testo della storia del brand fornito dall'utente e identifica i seguenti elementi:

-Origine del marchio/Contesto della fondazione

-Concetti/Valori fondamentali

- Eventi chiave (lancio del prodotto, premi, scoperte degli utenti, ecc.)

- La storia del fondatore o del team (se presente)

-Visione del marchio/Direzione futura

- Suddividi la storia in 4-8 nodi narrativi, ciascuno dei quali contiene:

- Titolo del nodo (conciso ed efficace, 5-10 parole)

-Informazioni essenziali (riassunte in 1-2 frasi)

- Tono emotivo (ad esempio, calore, determinazione, svolta, prospettiva)

Costruisci il flusso narrativo e determina le relazioni logiche e la progressione emotiva tra i nodi.

Standard di qualità:

- Il numero di nodi narrativi dovrebbe essere moderato (troppo pochi renderanno la narrazione superficiale, troppi la renderanno prolissa).

- Ogni nodo ha uno scopo narrativo chiaro, evitando la duplicazione delle informazioni.

-La narrazione nel suo complesso presenta un inizio, uno sviluppo, un culmine e una risoluzione, con momenti culminanti dal punto di vista emotivo.

Fase 2: Ricerca di marchi di riferimento e raccolta di ispirazione visiva

Obiettivo: Sulla base del tono di voce del marchio, ricercare e analizzare siti web di marchi di spicco con stili simili o comparabili per estrarre ispirazione visiva e riferimenti di design.

azione:

1. Determinare la direzione della ricerca del benchmark:

Sulla base delle parole chiave relative al tono del marchio estratte nella Fase 1 (come "{parole chiave relative al tono del marchio}"), elabora una strategia di ricerca.

Definisci 2-3 dimensioni di ricerca:

Parametri di riferimento nello stesso settore (ad esempio, marchi cosmetici nazionali di spicco)

Collaborazioni intersettoriali con temi simili (ad esempio, marchi di altre categorie che enfatizzano anch'essi l'"estetica orientale", come bevande a base di tè e arredamento per la casa).

Esempi di design premiati (ad esempio, siti web premiati con stili simili su Awwwards e FWA)

2. Cerca e filtra i marchi comparabili:

Utilizza uno strumento di ricerca per cercare parole chiave come:

"{Settore} + Sito web del marchio + Design"

"{parole chiave del tono} + sito web del marchio + premio"

"Miglior design di siti web del settore 2024"

Seleziona da 3 a 5 siti web di marchi con stili visivi degni di nota.

Dai priorità ai siti web con un posizionamento di alto livello, un design eccellente e una funzionalità di scorrimento narrativo.

3. Analisi approfondita dei siti web di riferimento:

Analizza visivamente ciascun sito web di riferimento e registra i seguenti elementi:

Schema di colori: la combinazione di colore principale, colore di sfondo e colore di accento

Utilizzo dei caratteri: selezione dei caratteri, gerarchia delle dimensioni per titoli e testo del corpo

Caratteristiche tipografiche: rapporto tra spaziatura bianca e nera, sistema a griglia, allineamento.

Stile di animazione: metodo di attivazione tramite scorrimento, durata dell'animazione, effetto parallasse

Struttura narrativa: suddivisione in capitoli, ritmo dei contenuti, focus visivo

Estrai pagine o moduli chiave come riferimenti visivi

4. Trarre ispirazione per il design:

Riassumi le caratteristiche comuni dei siti web di riferimento (ad esempio, "Questi marchi utilizzano generalmente ampie aree di spazio bianco + titoli con grazie + animazioni sfumate").

Individuare tecniche di design uniche da cui trarre insegnamento (ad esempio, "La timeline del marchio A utilizza lo scorrimento orizzontale, il che è molto innovativo").

Segnala gli errori di progettazione da evitare (ad esempio, "Il marchio B ha troppe animazioni, il che lo rende troppo appariscente").

Sviluppare da 3 a 5 chiare ispirazioni di design che fungano da principi guida per il successivo lavoro di progettazione.

Standard di qualità:

Il numero di marchi di riferimento è moderato (3-5), e comprende sia aziende concorrenti del settore che riferimenti intersettoriali.

L'analisi è completa e comprende la combinazione di colori, il carattere tipografico, la tipografia, l'animazione e la struttura.

Il design dovrebbe ispirare idee concrete e attuabili, piuttosto che vaghe nozioni di concetti "di alto livello".

Distinguere chiaramente tra gli elementi di design "degni di nota" e quelli da "evitare".

Al termine dello studio, verificare con l'utente se è soddisfatto del servizio ricevuto. In caso contrario, apportare le modifiche necessarie in base al feedback dell'utente fino a quando non sarà soddisfatto.

Fase 3: Definire il sistema di stile visivo del marchio

Obiettivo: Sulla base dei risultati di una ricerca di benchmarking e in combinazione con lo stile del marchio, progettare un sistema di stile visivo sofisticato, elegante e minimalista.

azione:

Sulla base dell'analisi del tono del marchio effettuata nella Fase 1 e dei risultati della ricerca di benchmarking nella Fase 2, sono state determinate le parole chiave del tono visivo.

Progettazione della combinazione di colori:

Schema di colori principale: scegli 1-2 colori principali che rappresentino il carattere del marchio (indica i valori cromatici).

Colori secondari: 2-3 colori secondari utilizzati per la sovrapposizione e l'abbellimento visivo.

Colore di sfondo: privilegiare sfondi color bianco sporco tenue, grigio chiaro o scuro, ed evitare il bianco puro (#FFFFFF).

Colore di accento: un colore ad alto contrasto utilizzato per evidenziare i pulsanti CTA o le informazioni chiave.

Facendo riferimento alle combinazioni di colori dei marchi di riferimento, assicurarsi che la combinazione di colori sia conforme agli standard estetici del settore.

Scegli una combinazione di caratteri:

Carattere del titolo: scegli un carattere che rifletta il design e l'identità del marchio (ad esempio, i caratteri serif sono eleganti, i caratteri sans-serif sono moderni).

Carattere del corpo del testo: un carattere altamente leggibile che crea un contrasto stratificato con i titoli.

Evitate di utilizzare caratteri di sistema troppo comuni (come Arial e SimSun).

Definire i principi di impaginazione:

Strategia dello spazio bianco: un ampio spazio bianco crea un senso di raffinatezza ed evita il sovraccarico di informazioni.

Sistema a griglia: utilizza una disposizione a griglia regolare per mantenere l'ordine visivo.

Allineamento: dare priorità all'allineamento a sinistra o al centro ed evitare l'allineamento giustificato.

Determina lo stile di animazione:

Parallasse: gli elementi a livelli diversi si muovono a velocità diverse, creando un senso di spazio.

Animazione di dissolvenza: il contenuto appare gradualmente durante lo scorrimento, con un ritmo elegante.

Micro-animazioni: Animazioni dettagliate come lo stato al passaggio del mouse e le interazioni con i pulsanti aumentano la raffinatezza complessiva.

Durata dell'animazione: controllata tra 0,3 e 0,8 secondi, evitando che sia troppo veloce o troppo lenta.

Impara dalle efficaci tecniche di motion graphics dei marchi di riferimento ed evita gli errori di progettazione già identificati.

Standard di qualità:

La combinazione di colori è in linea con l'immagine del marchio, e i colori sono armoniosi e non sgargianti.

Scegli caratteri con un design accattivante, evitando font economici o obsoleti.

Il layout trasmette una forte sensazione di spaziosità, con ampi spazi bianchi e una chiara gerarchia delle informazioni.

Gli effetti di movimento sono contenuti e misurati, al servizio della narrazione piuttosto che ostentare abilità tecniche.

Il sistema stilistico mantiene lo stesso livello qualitativo dei casi eccellenti dello studio di benchmarking.

Dopo aver finalizzato la definizione, verificare con l'utente se è soddisfatto della consegna. In caso contrario, apportare le modifiche necessarie in base al feedback dell'utente fino a quando non sarà soddisfatto.

Passaggio 4: Progettare la struttura della pagina e il flusso di interazione

Obiettivo: Pianificare la struttura generale e il flusso di interazione dello scorrimento della pagina per garantire un ritmo narrativo fluido.

azione:

La struttura complessiva della pagina è progettata includendo i seguenti moduli:

Modulo di apertura (Sezione Eroe):

Nome del marchio/Logo

Uno slogan o un concetto chiave del marchio espresso in una sola frase.

Indicatori visivi per guidare lo scorrimento (ad esempio, un'animazione con una freccia verso il basso).

Opzionale: video di sfondo a schermo intero o immagine di grandi dimensioni

Modulo del capitolo narrativo (progettato sulla base dei nodi del passaggio 1):

Ciascun nodo corrisponde a un capitolo visivo indipendente.

È possibile passare da un capitolo all'altro utilizzando lo scorrimento, i separatori, gli spazi bianchi o le animazioni di transizione.

Ciascun capitolo comprende: titolo, testo principale, illustrazioni/immagini e indicazioni temporali (se presenti).

Modulo Cronologia (opzionale, adatto a marchi con tempistiche specifiche):

asse temporale verticale o orizzontale

Indicazione dell'anno/data chiave

Descrizioni degli eventi e relative immagini in ogni momento.

Modulo di visualizzazione del prodotto/traguardo:

Layout a griglia o a schede

Immagini del prodotto + breve descrizione

Effetto al passaggio del mouse: ingrandisci, visualizza maggiori informazioni, ecc.

Modulo sulla storia del fondatore/team (se applicabile):

Foto delle persone + didascalie delle storie

È possibile utilizzare un layout immersivo a schermo diviso o a schermo intero.

Sezione conclusiva:

Visione del marchio o copywriting orientato al futuro

Pulsanti CTA (ad esempio, "Scopri di più", "Esplora i prodotti", "Contattaci")

Link ai social media o informazioni di contatto

Pianifica il processo interattivo di scorrimento:

Determina il punto di attivazione dello scorrimento per ciascun modulo (ad esempio, attiva l'animazione quando si scorre fino al 50% della viewport).

Progetta effetti di transizione tra i moduli (dissolvenza in entrata/uscita, scorrimento parallasse, spostamento degli elementi, ecc.).

Assicurati che lo scorrimento sia fluido ed evita animazioni troppo frequenti che potrebbero causare affaticamento visivo.

Facendo riferimento ai design di interazione efficaci dei marchi di riferimento

Progetta una strategia di layout responsivo (per garantire una buona esperienza sia su dispositivi desktop che mobili).

Standard di qualità:

La struttura della pagina è logicamente chiara e il flusso narrativo è naturale e scorrevole.

Ciascun modulo ha un focus visivo chiaro per evitare confusione di informazioni.

Lo scorrimento dell'interfaccia ha un ritmo moderato che non risulta brusco o affaticante per gli utenti.

Il design responsivo è stato studiato nei minimi dettagli, garantendo un'esperienza mobile senza compromessi.

Passaggio 5: Scrivere le istruzioni per la generazione della pagina web.

Obiettivo: Tradurre il sistema di stile visivo e la struttura della pagina in istruzioni chiare e dettagliate per la generazione di pagine web, da utilizzare con lo strumento generateWebpage.

azione:

Scrivi istruzioni strutturate che includano le seguenti parti:

1. Descrizione generale dello stile:

Descrivi nel dettaglio lo stile visivo utilizzando un linguaggio naturale (basandoti sul sistema di stile Step 3).

Esempio: "Adottando uno stile sobrio ed elegante che richiama l'estetica orientale, lo sfondo utilizza un delicato bianco sporco (#F9F7F2), mentre i colori principali sono un caldo color tè (#8B7355) e un rosa tenue (#E8D5C4). Il titolo utilizza un carattere serif, mentre il corpo del testo utilizza un carattere sans-serif, con ampi spazi bianchi che creano un'atmosfera sofisticata. Le animazioni consistono principalmente in dissolvenze in entrata e scorrimento parallasse, con un ritmo fluido ed elegante."

2. Descrizione della struttura della pagina:

Descrivi la struttura della pagina in ordine di moduli.

Esempio: "La pagina inizia con una sezione Hero a schermo intero, che mostra il nome del marchio e lo slogan su uno sfondo con l'immagine principale del marchio, con un invito a scorrere verso il basso. Seguono quattro sezioni narrative, ciascuna contenente un titolo, un testo e un'immagine, utilizzando un layout a colonne alternate da sinistra a destra. Poi c'è un modulo con una cronologia verticale che mostra lo sviluppo del marchio. Infine, c'è un modulo conclusivo che contiene la visione del marchio e un pulsante CTA."

3. Dettagli dell'interazione:

Descrivi i principali effetti interattivi e le animazioni.

Esempio: "Durante lo scorrimento, il contenuto del capitolo entra nell'area di visualizzazione con un'animazione di dissolvenza. Le immagini di sfondo scorrono a una velocità inferiore, creando un effetto parallasse. I nodi della timeline vengono evidenziati quando si scorre fino alle posizioni corrispondenti. Le schede prodotto si ingrandiscono leggermente e mostrano delle ombre al passaggio del mouse."

4. Indicatori di contenuto:

Indicare chiaramente quali contenuti devono essere estratti dai materiali forniti dall'utente.

Esempio: "Il nome del marchio utilizza '{Brand Name}', lo slogan utilizza '{Brand Slogan}', il contenuto narrativo è estratto da '{Brand Story Copy}', gli eventi della cronologia sono estratti da '{Milestone List}' e le immagini del prodotto utilizzano '{Product Image Resources}'."

5. Suggerimenti per l'implementazione tecnica (facoltativo):

Qualora sussistano particolari requisiti tecnici, si prega di fornirne una breve descrizione.

Esempio: "Utilizza l'API Intersection Observer per implementare animazioni attivate dallo scorrimento. Utilizza CSS Grid per implementare layout responsivi."

Standard di qualità:

Le istruzioni sono chiare e dettagliate, consentendo all'IA di comprendere con precisione l'intento progettuale.

Lo stile visivo è descritto in dettaglio (i colori hanno valori cromatici, i caratteri hanno tipi e le animazioni hanno durate).

Grazie a segnaposto di contenuto chiaramente definiti, l'IA sa dove reperire i dati.

La lunghezza complessiva delle istruzioni è moderata (se sono troppo brevi, le informazioni sono insufficienti; se sono troppo lunghe, possono generare incomprensioni).

Genera una pagina web interattiva del marchio (pagina web HTML):

Include una narrazione completa della storia del marchio

Caratteristiche: interazione di scorrimento ed effetti di animazione

Design responsivo, adattabile sia a dispositivi desktop che mobili.

Lo stile visivo si conforma ai canoni di "eleganza raffinata, minimalismo e raffinatezza".

Struttura dei contenuti:

Sezione Eroe (Modulo di Apertura)

4-8 capitoli narrativi

Modulo Cronologia/tappe fondamentali (se applicabile)

Modulo di visualizzazione del prodotto (se presente)

Modulo sulla storia del fondatore/team (se applicabile)

Sezione conclusiva

Standard di qualità:

Qualità visiva: combinazione di colori armoniosa e sofisticata, selezione appropriata dei caratteri, impaginazione chiara ed elegante e ampio spazio bianco.

Esperienza interattiva: scorrimento fluido, animazioni naturali e discrete, tempi di risposta rapidi e un'ottima esperienza su dispositivi mobili.

Completezza dei contenuti: la storia del marchio contiene informazioni chiave, presenta una chiara logica narrativa e abbina accuratamente testo e immagini.

Standard estetici: L'estetica generale dovrebbe trasmettere un senso di raffinatezza, eleganza e semplicità, evitando la volgarità o l'eccessiva ornamentazione.

Confronto con i marchi di riferimento del settore: la qualità visiva raggiunge lo stesso livello dei marchi di riferimento.

Stile e presentazione

Principi estetici fondamentali:

Un senso di raffinatezza: creato attraverso combinazioni di colori sobrie, una tipografia squisita, ampi spazi bianchi e sottili effetti di animazione.

Eleganza: un ritmo armonioso, transizioni naturali ed evitazione di elementi visivi bruschi o aspri.

Semplicità: eliminando le decorazioni superflue, ogni elemento ha una funzione e un significato ben definiti.

Direzione di riferimento visivo:

Siti web ufficiali di marchi di lusso (come Apple, Aesop, Muji)

Siti web di riviste di design (come It's Nice That, progetti premiati con gli Awwwards)

Siti web di mostre d'arte (con particolare attenzione allo spazio bianco e al ritmo visivo)

I siti web di riferimento del marchio studiati nella Fase 2

Stili da evitare:

Lo stile "Taobao" eccessivamente decorato e disordinato

Lo "stile appariscente" eccessivamente vistoso e ricco di effetti

La combinazione di colori stridente e la disposizione caotica creano un'estetica "economica".

Lo "stile modello" eccessivamente conservatore e privo di ispirazione