Dire al grafico che vuoi qualcosa di «minimal ma caldo» può portare a dieci risultati diversi. Brief di design per il sito trasforma preferenze e pubblico in una direzione concreta, con colori, font, impaginazione e immagini già definiti, così la discussione parte da decisioni e non da aggettivi.
Il brief si apre con una sintesi e da tre a cinque aggettivi che definiscono lo stile, poi fissa la palette, la tipografia, il layout, le immagini e i componenti, e tre cose da evitare per il tuo pubblico. I colori del testo sono abbinati agli sfondi puntando al livello AA delle WCAG, almeno 4,5 a 1.
È diverso da Idee per migliorare la UX, che parte dai problemi di un sito già online. Entrambi fanno parte della famiglia Testi per siti web.
Cosa ottieni
- Cinque o sei colori in esadecimale con il loro ruolo, costruiti attorno ai colori del marchio se li indichi
- Gli abbinamenti testo e sfondo da usare per un testo leggibile
- Una coppia di font da Google Fonts per titoli e testo, con le dimensioni per desktop e mobile
- Ordine delle sezioni della home, navigazione, griglia, spaziature e note per il mobile
- Indicazioni su immagini, icone, pulsanti, card e moduli
Cosa compili
- Nome e scopo del sito obbligatorio
-
Il nome e a cosa serve il sito, per esempio un portfolio, un negozio online o un sito di prenotazioni.
- Preferenze di stile e pubblico obbligatorio
-
Indica i colori del marchio o il logo che hai già, i siti che ti piacciono e cosa vuoi evitare.
Come si usa, passo dopo passo
-
Indica il sito e il suo scopo
Per esempio Studio Rossi, portfolio di uno studio di architettura. Un portfolio, un negozio e un sito di prenotazioni chiedono impaginazioni diverse.
-
Descrivi stile, pubblico e paletti
Lo stile che cerchi, chi visita il sito e cosa evitare. Aggiungi i colori del marchio in esadecimale e i siti che ti piacciono, con il motivo.
-
Scegli la lingua e genera
Il brief arriva in Markdown con un titolo per ogni parte, pronto da incollare in un documento condiviso.
-
Verifica prima di costruire
Prova gli abbinamenti in uno strumento di controllo del contrasto e guarda i font alle dimensioni suggerite, poi passa il brief al grafico o applicalo nel tuo page builder.
Esempio, input e risultato
Input
- website_name
- Studio Rossi, portfolio di uno studio di architettura
- design_preferences
- Minimale e caldo, molto spazio bianco, materiali naturali, per clienti privati tra 35 e 60 anni. Niente temi scuri.
Risultato
Un portfolio calmo e materico, che lascia parlare i progetti. Minimale, caldo, preciso, sobrio, tattile.
## Palette
- Sfondo #FAF8F5, bianco caldo
- Testo #2B2826, quasi nero caldo
- Primario #7D634C, rovere per link e pulsanti
- Accento #C9B8A6, sabbia per gli sfondi di sezione
- Bordi #E4DED7, pietra chiara
Testo #2B2826 su #FAF8F5, testo bianco sui pulsanti #7D634C.
## Tipografia
Titoli in Cormorant Garamond, 48 px desktop e 32 px mobile. Testo in Inter, 18 px desktop e 16 px mobile.
## Layout
Immagine di progetto a tutta larghezza, dichiarazione dello studio, griglia dei progetti, metodo, contatti. Menu in alto con quattro voci, menu a schermo intero su mobile.
## Da evitare
- Temi scuri
- Animazioni invadenti
- Testo piccolo grigio chiaro
Esempio illustrativo scritto dalla redazione e accorciato per la pagina.
Consigli per risultati migliori
- Scrivi i colori del marchio in esadecimale. La palette si costruisce attorno a loro invece di sostituirli.
- Spiega perché un sito ti piace. «Molto spazio bianco» serve più di un link da solo.
- Di' cosa non vuoi. Un no chiaro elimina intere direzioni in un colpo.
Chi lo usa, e per cosa
Titolare che si affida a un freelance
Arriva al primo incontro con una direzione scritta, così preventivo e prima bozza partono dalle stesse aspettative.
Grafico freelance al primo incontro
Trasforma gli appunti del cliente in un brief di partenza da correggere insieme.
Titolare che costruisce il sito da solo
Applica palette, font e ordine delle sezioni direttamente nelle impostazioni del tema di WordPress o del page builder.
Limiti e buone pratiche
- Scrive un brief, non un mockup. Non produce immagini, file di progetto o codice.
- I codici esadecimali sono proposte. Controlla ogni abbinamento con uno strumento di contrasto prima di andare online.
- Ogni brief usa i crediti del tuo piano, e due direzioni a confronto producono il doppio del testo. I dettagli sono nella pagina dei prezzi, oppure puoi creare un account.
Domande frequenti
Cosa contiene un brief di design per il sito?
Una sintesi della direzione con gli aggettivi che la definiscono, una palette esadecimale con i ruoli dei colori, una coppia di font per titoli e testo con le dimensioni, l'ordine delle sezioni della home e la navigazione, indicazioni su immagini e componenti, e tre cose da evitare.
Gli abbinamenti di colore sono accessibili?
Lo strumento abbina testo e sfondi puntando al livello AA delle WCAG, cioè almeno 4,5 a 1 per il testo normale, e indica quali coppie usare. Considera i codici una proposta e controlla ogni abbinamento con uno strumento di verifica del contrasto prima di pubblicare.
Posso tenere i colori del mio marchio?
Sì. Scrivili nelle preferenze, meglio in esadecimale, e la palette viene costruita attorno a loro. Lo strumento aggiunge i colori di supporto per sfondo, testo, accenti e bordi, e dice quali combinazioni vanno bene per il testo corrente e quali solo per titoli grandi o decorazioni.
Quali font propone?
Un font per i titoli e uno per il testo disponibili su Google Fonts, scelti in base allo stile e al pubblico che descrivi, con le dimensioni per desktop e mobile. I Google Fonts funzionano nella maggior parte dei page builder e nel codice su misura, ma verifica che ci siano i pesi che ti servono.
Che differenza c'è con Idee per migliorare la UX?
Il brief parte dalle tue preferenze e definisce come deve apparire un sito nuovo o rinnovato. Idee per migliorare la UX parte dai problemi di un sito già online e ordina gli interventi per impatto e impegno. Molti progetti usano il brief prima e gli interventi dopo la messa online.
Provalo nel tuo spazio di lavoro
Inizia gratis, senza carta di credito. Quando ti serve di più, la suite cresce con te, dal Lite all'Agency.
Accedi o crea un account gratuito, lo strumento si apre nel tuo spazio di lavoro.