Scarica il nostro workbook gratuito per progettare il tuo sito in tutta sicurezza.
L'indirizzo e-mail inserito non è valido.
Grazie per l'iscrizione.
Indicando la tua e-mail, confermi di aver letto e compreso la nostra Informativa sulla privacy e acconsenti a ricevere materiale di marketing da parte di Squarespace.
Quando si progetta un nuovo sito, gli elementi di base, come immagini, testi e link per navigarlo, possono essere chiari alla maggior parte delle persone. L'aspetto più difficile è come collegarli. Quanto deve essere lungo il tuo testo? Come si scelgono le immagini per una pagina?
Sebbene i modelli di Squarespace e il Kit di design Squarespace con IA siano buoni punti di partenza, avere una buona padronanza di alcune regole di progettazione ti dà una marcia in più per rendere unico il tuo sito. Abbiamo contattato Jon Wilson, uno degli esperti di Design del prodotto che si occupano dei modelli di Squarespace, per chiedergli qualche consiglio su come orientarsi tra le basi della progettazione di un sito web.
I due componenti principali della progettazione di un sito web
I vari elementi che intervengono nella progettazione di un sito web si dividono in due categorie principali: progettazione visiva e interfaccia utente funzionale (UI).
Progettazione visiva: comprende tutto ciò che vedi, come le palette di colori, i tipi di carattere e la tipografia, il layout, il tono di voce e le immagini (icone, foto, illustrazioni e così via).
Interfaccia utente funzionale: comprende tutti gli aspetti con cui i tuoi visitatori interagiscono sul tuo sito, come pulsanti, navigazione, moduli o pagine di prodotto e checkout.
Per prendere scelte di design informate, in primo luogo, devi "definire lo scopo strategico del tuo sito web, capire se è destinato alla pura espressione del brand, alla presentazione di informazioni, alla conversione, alla vendita, all'acquisizione di lead o a qualcos'altro", spiega Wilson.
"Lo scopo del tuo sito è supportare i lead in arrivo e comunicare con i clienti? Il focus sarà sulla presentazione accessibile dei contenuti, che andranno presentati più in alto nella pagina, per fare in modo che soddisfino le aspettative dei campi di input e permettano ai tuoi clienti di raggiungerti con il minor attrito possibile".
Stabilisci gli obiettivi utilizzando i nostri 10 principi fondamentali del web design
"Non è necessario avere una risposta per tutte le sezioni di tutte le pagine."
1. Scegli gli elementi visivi tenendo conto del loro contesto e scopo
Quando scegli le immagini per il tuo sito web, cerca attieniti a immagini o design che riflettano l'energia del tuo brand o della tua missione per tipo, palette di colori o argomento.
Considera poi la funzione e il posizionamento di queste immagini. In questo modo, capirai quante te ne servono e dove posizionarle. L'obiettivo principale di un elemento visivo è di:
Trasmettere alcune informazioni
Aggiungi contesto al tuo testo
Evocare emozioni
Decorare
Una combinazione delle precedenti
Se sei bloccato, considera la funzione delle immagini. "Ad esempio, le immagini principali devono attirare l'attenzione, creare spazio per posizionare il testo in modo leggibile e impostare efficacemente le aspettative riguardanti il tono per il resto del sito", afferma Wilson.
Ricorda: anche la qualità delle immagini che scegli è importante. "Se le tue immagini non sono di alta qualità e/o sei troppo occupato per crearne di nuove, prova a renderle più piccole", svela Wilson. "Evita di mostrare a tutta larghezza risorse di bassa qualità".
Ottieni altri suggerimenti per aggiungere foto al tuo sito web
2. Mantieni il testo preciso e conciso
"Un vecchio studio del gruppo Nielsen Norman suggerisce che, in media, gli utenti leggono circa il 20% delle parole su una pagina web", afferma Wilson. "I testi molto lunghi, ad eccezione delle esperienze editoriali, possono essere faticosi sia da creare che da digerire.
Per farla breve, quando si tratta della quantità di parole sullo schermo: meno è meglio".
Usa queste linee guida generali come lista di controllo quando ricontrolli il testo che scrivi.
Prendi in considerazione il tuo pubblico
Evita le ripetizioni
Usa un linguaggio chiaro
Rendi il testo analizzabile a colpo d'occhio
Quando crei gli inviti all'azione (CTA), come pulsanti o testo per chiedere a qualcuno di contattarti, di continuare a leggere o di acquistare qualcosa, chiarisci dove lo porterà il suo clic. Le CTA sono brevi, spesso di 20 caratteri o meno, e invitano all'azione, per esempio "Acquista ora".
Ricorda che non esiste una regola d'oro che si applica a ogni singolo sito web. Quante parole ci vogliono per far capire il tuo punto di vista con il tuo tono di voce?
In caso di indecisione, guarda siti web simili al tuo. Fai caso ai testi più lunghi e a quelli più corti. Ci sono stati momenti in cui hai iniziato a saltare delle righe o a distrarti? Ad esempio, il testo di una homepage è probabilmente composto da 200 parole o meno. La pagina "Chi siamo", invece, può avvicinarsi alle 500 parole.
Scopri come utilizzare l'Squarespace AI per ricevere assistenza nella stesura del testo
"La grande tentazione è voler creare una pagina per ogni aspetto del tuo business, per poi collegarle tutte nella navigazione principale, ma fidati: semplice è meglio."
3. Crea link di navigazione orientati all'azione
La navigazione è il punto in cui hai il massimo controllo sulle parti funzionali del tuo sito web. Per creare una navigazione facile da usare, tieni a mente due cose principali.
Lo scopo fondamentale del tuo sito web
Meno è meglio, anche nella navigazione
"Il tuo sito web è uno strumento per facilitare l'acquisto online dei tuoi prodotti? Stai cercando punti di ingresso che consentano ai tuoi visitatori di programmare del tempo con te?" prosegue Wilson. "La definizione di questi obiettivi definirà il modo in cui si struttura il linguaggio della navigazione e i Call-to-Action principali come 'Acquista' o 'Programma'".
L'approccio "less is more", o "meno è meglio", garantisce che i visitatori trovino ciò che stanno cercando in modo rapido ed efficiente. "Questo aiuterà a ridurre la quantità di informazioni che una persona deve analizzare prima di trovare i link più pertinenti alle proprie esigenze", spiega Wilson. "La grande tentazione è quella di voler creare una pagina per ogni aspetto del tuo business, per poi collegarle tutte nella navigazione principale, ma fidati: semplice è meglio."
Leggi la nostra guida alla progettazione della navigazione
4. Costruisci una moodboard
Se passare direttamente all'editor del sito ti sembra troppo, come primo passo, crea una moodboard di immagini e siti web che trovi stimolanti. Cerca i motivi per cui ciò che hai salvato ti ha colpito, per esempio determinati colori, stili di testo o layout.
"Una volta composto un archivio di layout, tavolozze di colori e altre composizioni di design stimolanti, è il momento di iniziare a creare qualche layout personalizzato. Ed è lì che inizia il divertimento", afferma Wilson. "Con le funzionalità dell'editor di siti web di Squarespace, puoi esplorare diverse possibilità di design fino a quando non arrivi all'iterazione perfetta per il tuo marchio".
5. In caso di dubbio, inizia con la sezione principale
La sezione principale, ovvero lo spazio immediatamente successivo al logo e alla barra di navigazione principale, è spesso una delle più importanti del tuo sito web.
"I tuoi visitatori impiegheranno letteralmente meno di un secondo per farsi un'idea della tua attività dopo aver dato una prima occhiata al tuo sito", afferma Wilson. "Questo rende il design visivo, il layout, i contenuti, la messaggistica e i Call-to-Action nella sezione principale di fondamentale importanza. È anche un'opportunità per impostare visivamente il tono per il resto del tuo sito web".
Per la tua sezione principale, scegli un'immagine e/o un testo che riassuma il tuo brand o la tua attività e ciò che offri ai visitatori del sito. Una risorsa utile per gli utenti di Squarespace è il catalogo delle sezioni, che contiene design curati applicabili immediatamente al tuo sito.
"Se la tua azienda o il tuo brand non hanno uno standard visivo ben definito in questa fase, la sezione principale è anche un'ottima opportunità per esplorare diversi abbinamenti di caratteri, colori, immagini e layout", aggiunge Wilson. "Questo compito può sembrare scoraggiante, all'inizio, ma è importante ribadire che questa è solo una sezione del sito web e non è necessario avere già tutte le risposte per ogni sezione di ogni singola pagina".
6. Rendilo unico
"Una personalità unica o una 'firma di design' è una componente fondamentale nella creazione di qualsiasi esperienza digitale memorabile", afferma Wilson. "Catturare l'attenzione del pubblico e farsi notare è un modo per aiutare il tuo brand o la tua attività a distinguersi, attrarre o convertire nuovi clienti. Una volta definito il carattere generale del tuo brand, puoi iniziare a lavorare su questi attributi dando sfogo alla tua creatività. In particolare, ti consigliamo di giocare con il colore, i caratteri, il layout, la grafica e il tono dei contenuti".
Caratteri: esplora la libreria di font esclusivi di Squarespace per trovarne uno che esprima la personalità del tuo brand e si accordi con le immagini. Gioca con i contrasti di scala tra le dimensioni del testo del titolo e quelle del corpo del testo utilizzando funzioni come Scala testo.
Layout: sperimenta con l'asimmetria e lo spazio bianco. I Blocchi forma e le Forme immagine sono ottimi modi per dare un tocco di vita e giocosità alle forme con angoli retti, come quadrati e rettangoli.
Tono di voce: il modo in cui parli di te, dei tuoi prodotti o servizi e del tuo lavoro può variare notevolmente a seconda della risposta emotiva che vuoi evocare nel tuo pubblico.