Sito web di Brand Story
I testi e i materiali relativi alla storia del marchio vengono trasformati in una pagina web narrativa a scorrimento con un'estetica sofisticata, che trasmette i valori e le emozioni del marchio attraverso il design visivo e l'animazione interattiva.
Featured by
Lynne Lau
Why we love this skill
Questa tecnologia trasforma la storia del tuo brand in una pagina web interattiva, coinvolgente e scorrevole, dicendo addio al testo arido. Grazie a una tipografia raffinata, animazioni discrete e uno stile visivo sofisticato, permette agli utenti di vivere il fascino del brand durante la navigazione. Che tu sia un colosso tecnologico o una startup nel settore della bellezza, puoi creare la tua "rivista visiva" per raccontare un'avvincente saga del tuo brand.
Istruzioni
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: In base al tono di voce del marchio, ricercare e analizzare siti web di marchi di successo dello stesso tipo o di stile simile 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 del marchio o un concetto chiave 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 tramite 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
Related Skills
View allRicerca sull'intelligence del mercato del lavoro | Decodifica approfondita dell'intelligence del mercato del lavoro
Smetti di fare supposizioni e inizia a sapere. Dai rischi aziendali nascosti alla vera cultura d'ufficio, trasformiamo ogni descrizione del lavoro (JD) nel tuo "manuale da insider" personale, così potrai affrontare i colloqui come un vero imprenditore e ottenere l'offerta che desideri. Basta con le incognite durante i colloqui! Trasformiamo le aride descrizioni del lavoro in "informazioni aziendali" in 10 minuti: decodifichiamo a fondo il gergo delle risorse umane, scopriamo le vere pratiche e le lacune dell'azienda e ti aiutiamo a ottenere un "vantaggio" nelle verifiche inverse sul tuo capo, vincendo nel periodo di punta delle assunzioni di marzo e aprile sfruttando l'asimmetria informativa!
Pannello di analisi delle tendenze dell'oro
Dashboard giornaliera per le decisioni di investimento in oro. Raccoglie automaticamente i dati più recenti da fonti autorevoli come CME, WGC e Reuters, fornendo analisi delle tendenze macroeconomiche, monitoraggio dei flussi di capitale, avvisi di rischio e strategie di accumulo di oro (segnali verdi/gialli/rossi). Genera una dashboard web visiva che include grafici dei prezzi dell'oro, tassi di premio, rendimenti dei titoli del Tesoro statunitensi e altri indicatori chiave per aiutare gli investitori a prendere decisioni rapide.
Generatore di prompt video n. 4
(SeeDance 2.0 Edizione Speciale)
Sito web di Brand Story
I testi e i materiali relativi alla storia del marchio vengono trasformati in una pagina web narrativa a scorrimento con un'estetica sofisticata, che trasmette i valori e le emozioni del marchio attraverso il design visivo e l'animazione interattiva.
Featured by
Lynne Lau
Why we love this skill
Questa tecnologia trasforma la storia del tuo brand in una pagina web interattiva, coinvolgente e scorrevole, dicendo addio al testo arido. Grazie a una tipografia raffinata, animazioni discrete e uno stile visivo sofisticato, permette agli utenti di vivere il fascino del brand durante la navigazione. Che tu sia un colosso tecnologico o una startup nel settore della bellezza, puoi creare la tua "rivista visiva" per raccontare un'avvincente saga del tuo brand.
Istruzioni
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: In base al tono di voce del marchio, ricercare e analizzare siti web di marchi di successo dello stesso tipo o di stile simile 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 del marchio o un concetto chiave 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 tramite 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
Related Skills
View allRicerca sull'intelligence del mercato del lavoro | Decodifica approfondita dell'intelligence del mercato del lavoro
Smetti di fare supposizioni e inizia a sapere. Dai rischi aziendali nascosti alla vera cultura d'ufficio, trasformiamo ogni descrizione del lavoro (JD) nel tuo "manuale da insider" personale, così potrai affrontare i colloqui come un vero imprenditore e ottenere l'offerta che desideri. Basta con le incognite durante i colloqui! Trasformiamo le aride descrizioni del lavoro in "informazioni aziendali" in 10 minuti: decodifichiamo a fondo il gergo delle risorse umane, scopriamo le vere pratiche e le lacune dell'azienda e ti aiutiamo a ottenere un "vantaggio" nelle verifiche inverse sul tuo capo, vincendo nel periodo di punta delle assunzioni di marzo e aprile sfruttando l'asimmetria informativa!
Pannello di analisi delle tendenze dell'oro
Dashboard giornaliera per le decisioni di investimento in oro. Raccoglie automaticamente i dati più recenti da fonti autorevoli come CME, WGC e Reuters, fornendo analisi delle tendenze macroeconomiche, monitoraggio dei flussi di capitale, avvisi di rischio e strategie di accumulo di oro (segnali verdi/gialli/rossi). Genera una dashboard web visiva che include grafici dei prezzi dell'oro, tassi di premio, rendimenti dei titoli del Tesoro statunitensi e altri indicatori chiave per aiutare gli investitori a prendere decisioni rapide.
Generatore di prompt video n. 4
(SeeDance 2.0 Edizione Speciale)
Find your next favorite skill
Explore more curated AI skills for research, creation, and everyday work.
