Come costruire un sito web per un nuovo prodotto (e come lo abbiamo fatto) |

Se non hai ancora una creatività breve, inizia da qui. Un brief creativo illustra esattamente come intendi parlare del tuo prodotto o della tua azienda. Definisce il tono di voce del tuo marchio, la tavolozza dei colori, la tua dichiarazione di valore e molto altro ancora. Il tuo brief creativo definisce in che modo il tuo sito web comunicherà con i clienti.

Potresti aver già redatto un brief creativo se hai seguito il processo di sviluppo del logo. Se è così, puoi riutilizzarlo per il tuo sito web. Se non hai ancora sviluppato un brief creativo, ora è il momento di crearne uno.

Fortunatamente, ho già scritto un articolo dettagliato che ti insegna come farlo, che include esempi del brief creativo di Outpost, quindi puoi vedere come abbiamo costruito il nostro. Quindi, se hai bisogno di lavorare sul tuo brief creativo, guarda il mio articolo su come abbiamo sviluppato il nostro logo e il suo brief creativo e poi torna qui quando sei pronto.

Crea una sitemap

Con il tuo brief creativo mano, inizierai a lavorare sulla tua sitemap. Una mappa del sito è semplicemente una struttura che elenca tutte le pagine (compresi i loro scopi e obiettivi) che prevedi di includere nel tuo sito.

Ecco la mappa del sito che abbiamo sviluppato per Outpost:

1. 1. Home : Panoramica del prodotto e un "invito all'azione" per iscriversi a una prova gratuita. Collegamenti secondari ad altre pagine che descrivono le funzioni.
   2. Panoramica delle funzioni : una panoramica di tutte le funzioni con collegamenti alle pagine delle caratteristiche dettagliate.
      1. Dettagli delle funzioni per la funzione A: Dettagli della funzione A.
      2. Dettagli della funzione per Funzione B: dettagli della funzione B.
      3. Ripeti per tutte le funzioni.

• Prezzi: dettagli sui piani tariffari e link per registrarsi per una prova gratuita.
• Clienti: Profili di clienti di successo.
• Chi siamo: Panoramica di chi siamo, la nostra missione e la nostra storia.
• Contattaci: Informazioni di contatto, orari, posizione.
• Lavori: Elenco delle nostre attuali aperture di lavoro.
• Informativa sulla privacy: Informativa sulla privacy di Outpost.
• Blog: Homepage per il blog che elenca i post recenti del blog.
• Post del blog: Ci saranno più post di blog. Questa pagina sarà il modello per loro.
• Centro assistenza: Il nostro Centro assistenza sarà supportato da Zendesk.

Naturalmente, il tuo sito sarà probabilmente molto diverso dalla Sitemap degli Avamposti. Se sei un ristorante, ad esempio, probabilmente avrai una pagina o due per i menu e una pagina per le prenotazioni. Se stai creando un negozio online, probabilmente avrai molte pagine di prodotto diverse.

I tuoi documenti Sitemap, nel miglior modo possibile, quali pensi che il tuo sito includerà. Questo piccolo pezzetto di pianificazione renderà il resto della pianificazione e dello sviluppo del sito molto più semplice, quindi vale la pena investire in questa fase iniziale.

Scrivi la tua copia prima di progettare

Penserai che non l'ho fatto ottenere l'ordine proprio qui Non dovresti progettare il tuo sito web prima di pensare a quali parole inserirai nella pagina?

In effetti, l'approccio migliore è fare le cose "all'indietro" e pensare prima alla copia del tuo sito web e poi progettare in giro quella copia. Perché? Perché ciò che vuoi comunicare ai tuoi clienti è molto più importante della reale progettazione finale del tuo sito. Ovviamente, il design è importante e vuoi avere un sito che sembra bello, ma se non puoi comunicare i tuoi messaggi chiave ai tuoi utenti, un buon design non farà la differenza.

Scrivi la tua copia prima aiuta anche te e i potenziali designer a capire che cosa ogni pagina sta cercando di comunicare. Ciò si traduce in una migliore progettazione che rafforza la tua messaggistica. Anche se costruisci il tuo sito da solo con uno strumento come Squarespace, sapere cosa deve dire ciascuna pagina prima di scegliere un disegno sarà un grande risparmio di tempo.

Quando arriverà il momento della progettazione, potresti devi affinare la tua copia per assicurarti che le cose si adattino correttamente, ma sarà più facile che provare a scrivere una copia per un progetto che non è stato creato per la tua messaggistica.

Per la tua home page, probabilmente vorrai un titolo che descrive esattamente cosa fai: la tua proposta di valore chiave per i tuoi clienti. Seguirà una descrizione breve ed estesa di ciò che fa la tua azienda.

Ecco il titolo e la descrizione estesa di Outpost, il prodotto che stiamo costruendo:

Semplifica la tua e-mail condivisa

Traccia facilmente, collabora, e rispondere ai messaggi inviati a indirizzi email generici, come supporto @ o info @.

Da lì, la copia che includerai nella tua home page sarà determinata dal tipo di azienda che sei, da chi sono i tuoi clienti sono, e cosa è necessario comunicare.

Per Outpost, dobbiamo comunicare le caratteristiche e i vantaggi principali del nostro prodotto e incoraggiare i potenziali clienti a saperne di più. Vogliamo anche parlare del nostro team di assistenza clienti e di quanto sono bravi.

Ma questa potrebbe non essere la giusta configurazione per la tua home page. Se sei un ristorante, forse vuoi avere dei link ai tuoi menu o informazioni su come ottenere una prenotazione. Ogni azienda è diversa, quindi capisci cosa devi dire e poi annotala.

Non preoccuparti di iniziare con una pagina vuota, però. Invece, vieni con un elenco dei tuoi siti Web preferiti nel tuo settore e pensa a ciò che ti piace e non ti piace di ogni sito. Che tipo di navigazione usano? Quali pagine includono? Che tipo di immagini usano? Non è necessario reinventare la ruota e utilizzare un sito preferito come punto di partenza è un ottimo modo per iniziare.

Un consiglio finale: Di solito è di più. Non essere tentato di scrivere infiniti paragrafi di copia per il tuo sito web (a meno che non sia quello che i tuoi clienti si aspettano!). Se presti attenzione a come usi i siti web, scoprirai che spesso sfoglia il testo, non leggendo ogni parola. Perché è così che la maggior parte delle persone legge online, sfogliando invece di leggere ogni parola, mantenendo la tua copia breve e diretta al punto.

Sviluppa un wireframe

Un wireframe è un layout approssimativo del tuo sito web. Non è proprio un design, esattamente. È un documento che mostra approssimativamente dove andranno le cose nella pagina, senza preoccuparsi del colore o di altri elementi grafici.

Se lavori con un designer per costruire il tuo sito web, produrranno un wireframe per te come parte del processo di progettazione. Se stai creando il tuo sito web da solo, utilizzando un servizio come Squarespace o Shopify, puoi facilmente costruire un wireframe da solo.

Non lasciarti intimidire da questo passaggio. Non hai bisogno di strumenti speciali per costruire un wireframe. Basta un blocco di carta e una penna per tracciare ogni pagina del tuo sito. Ricorda, non stai "progettando" e un wireframe non deve essere carino. Ha solo bisogno di comunicare cosa va dove su una pagina.

Se hai bisogno di ispirazione, controlla gli altri siti che ti piacciono e guarda come strutturano le informazioni su ogni pagina. È perfettamente accettabile prendere in prestito layout da altri siti e trovare l'ispirazione per il tuo sito.

Se l'uso di carta e penna non fa per te, puoi utilizzare PowerPoint o Keynote per creare wireframe. Ci sono anche strumenti wireframing dedicati come Balsamiq che semplificano il processo.

Ho incluso il wireframe della homepage di Outpost qui sotto per farti un'idea di come si presenta un wireframe. Puoi anche dare un'occhiata alla copia che abbiamo creato nel passaggio precedente e uno schizzo di un'idea per un elemento grafico che vogliamo creare da un designer.