Come disegnare il miglior layout per il tuo sito? In questo articolo, oltre a darti una definizione di layout web e alcune semplici linee guida da rispettare sempre nella progettazione di un sito, ti mostro i vantaggi e gli svantaggi di un design realizzato con Photoshop o in html, ma anche con Canva, l’applicazione che accorcia le distanze tra te e l’aspetto del tuo sito. Pronto a leggere i consigli che ho da darti?

Cos’è un layout web e perché è così importante?

Il layout di un sito Web è un modello che definisce la struttura di un sito Web: in altre parole si tratta dell’aspetto grafico, del design.

Esso ha il ruolo di comporre e presentare in modo efficace per gli utenti le informazioni presenti su un sito, usando al meglio i diversi elementi grafici che possiamo trovare su un sito Web.

Un buon layout aiuta gli utenti che atterrano sul tuo sito, perché rende le informazioni importanti facilmente accessibili e intuitive da trovare. Di contro, un layout errato si trasforma in un’esperienza frustrante per gli utenti.

Quante volte ti è capitato di cercare informazioni e atterrare su siti web in cui raccapezzarti è davvero complicato? Nmila? Beh, la reazione più immediata è stata cliccare su “indietro” e ripetere la ricerca su Google. Questo è ciò che fanno la maggior parte delle persone che si imbattono su siti con un layout grafico inefficace, e quindi poco chiaro.

Le persone tendono ad abbandonare rapidamente un sito in cui non riescono a trovare ciò che stanno cercando.

Linee guida del web design

Tutti vogliono disegnare e strutturare il proprio sito web secondo i propri gusti personali. Ma… se decidi di intraprendere “la strada del coraggio”, devi anche essere pronto a prenderti le responsabilità delle tue scelte. Qualche esempio?

Voglio il logo più grande e in alto a destra, per distinguermi“.

Non mi piacciono i pulsanti grandi: preferisco i link. Sottolineati, come negli anni ’90“.

Non voglio dati di contatto nelle pagine. C’è già la pagina Contatti!“.

Sembrano richieste innocue, vero? E invece ti assicuro che non lo sono per niente! Anche nel web design esistono degli standard – indiscutibili – che aiutano il tuo sito web a soddisfare le aspettative dei visitatori digitali. A prescindere dalle tue scelte nella definizione del layout del tuo progetto web, devi esserne consapevole.

Secondo Jacob Nielsen, massimo esperto mondiale di usabilità sul web e autore di molti libri sull’argomento, quasi l’80% delle persone che naviga online si aspetta di trovare determinati elementi in specifiche posizioni sui siti web. Destrutturando migliaia di siti web. Nielsen ha stilato una lista di elementi/funzionalità che gli utenti si aspettano di trovare su un sito. Riportarla per intero in questo articolo sarebbe davvero troppo, ma voglio condividere con te gli standard più importanti.

#1. Posizione del logo

In alto. A sinistra. Sempre.

#2. Presenza di una splash page (pagina di intro al sito)

Mai. Usanza in voga negli anni ’90, quando i siti erano affare di pochi e si navigava online per passatempo più che per necessità.

#3. Posizione del menu

Presente in ogni pagina, in alto. E che preferibilmente rimanga visibile durante lo scroll delle pagine. Come a dire che non abbiamo tempo da perdere e dobbiamo poter cliccare su altri contenuti in tempi molto ridotti.

#4. Proposta di valore & Call To Action

A prescindere da quale sia il principale obiettivo del sito, il primo contenuto che l’utente vede trovare esplicitato sul tuo sito è il problema che risolvi, il beneficio che lui ottiene e l’azione che tu vuoi che faccia! Può essere realizzato in forma grafica o testuale, poco importa. Purché ci sia.

#5. Footer

È presente e uguale in tutte le pagine del sito e contiene tutti quei dati che possono risultare più utili per gli utenti: i dati di contatto, l’indirizzo, le icone social sono un must insieme ai link a documenti/pagine di privacy e cookie policy.

Come disegnare un layout web?

Il processo di realizzazione di un sito web old-style – cioè prima dell’avvento di WordPress, One Minute Site e altri sistemi di gestione delle informazioni  (cms) user-friendly per l’utente- si basava su due fasi distinte e separate:

  1. designing
  2. coding

Vediamo nello specifico come si faceva, solo qualche anno fa.

Disegnare un layout web con Photoshop

Photoshop è un ottimo programma per la realizzazione di design web accattivanti e personalizzati, sempre che si abbiano le conoscenze e le competenze teoriche, tecniche e pratiche per il suo miglior utilizzo. In caso contrario, per creare un web design di rispetto devi affidarti a un professionista.

Ma per quanto possa essere gradevole e ben fatta la struttura finale, devi sapere che non ti basterà esportarla in HTML (funzionalità integrata in Photoshop) per poter cantare vittoria. Il codice (auto)prodotto, infatti, dev’essere necessariamente rimaneggiato per risultare ottimizzato ed evitare penalizzazioni da parte di Google.

Inoltre, l’export del design non ti garantirà una presenza responsive sul web: quindi serviranno almeno due o tre operazioni distinte di designing e altrettante di coding per poter offrire ai visitatori un sito ottimizzato a prescindere dal tipo di dispositivo utilizzato per la navigazione.

Come la penso? → Mi sento di dire che Photoshop rimane un ottimo compagno di viaggio per la realizzazione e l’ottimizzazione delle immagini o grafiche da utilizzare sul tuo sito web. Ma visto che gli anni ’90 sono passati da un po’ e tenendo in considerazione i continui aggiornamenti di Google e gli alti standard – qualitativi e funzionali – cui sono abituati i webnauti, non credo che tu abbia  tempo da investire su Photoshop. A meno che tu non faccia parte di un’agenzia web. In questo caso, le due fasi di sviluppo di un sito (designing e coding) sono spesso portate avanti parallelamente grazie alla collaborazione di più  professionisti, per ottenere un prodotto davvero unico, personalizzato e irripetibile.

Canva: uno strumento per disegnare la grafica del tuo sito

Sia Photoshop che HTML possono essere due valide alternative, se mastichi di grafica e di linguaggi di programmazione. Altrimenti, se non hai esperienza ti propongo di dare un’occhiata a Canva, uno strumento di grafica indispensabile che ti permette di realizzare contenuti per social media, materiali stampati e tanto altro.

Se non sei a digiuno di programmazione, ma la grafica non è il tuo forte, con Canva puoi impostare dei wireframe/mockup/mini siti web (scegliendo tra diversi modelli) in 5 semplici passi:

  1. Accedere o creare un account su canva.com
  2. Scegliere il modello che fa al caso tuo
  3. Personalizzarlo con le tue foto o scegliendo tra milioni di immagini disponibili
  4. Aggiungere filtri alle immagini, scegliere tra milioni di elementi grafici e modificare testi e caratteri
  5. Salvare, condividere e pubblicare.

Disegnare il layout di un sito web: con photoshop o in html?

Come si vede dal dettaglio nell’immagine, con Canva hai la possibilità di pubblicare il tuo sito in 4 modalità differenti:

  • presentazione: sito multipagina con navigazione semplificata
  • scorrimento: sito monopagina di slide a scorrimento
  • navigazione classsica: sito multipagina con menu di navigazione
  • standard: sito monopagina con menu di navigazione.

In questo caso non puoi (non ancora!) esportare il codice sorgente della struttura su un tuo spazio di hosting. Ma puoi sempre dare in pasto a bit.ly il link del tuo canva-minisito e giocarti la carta dell’advertising puntando tutto sul link semplificato.

Disegnare un layout web in HTML?

Per le stesse motivazioni, usare direttamente l’HTML per realizzare un layout può essere ormai considerata un processo anacronistico ed economicamente dispendioso: si torna infatti alla necessità di codificare tutte le differenziazioni necessarie per garantire la produzione di un sito responsive. A meno che tu (o il professionista cui ti rivolgi) non abbia una serie di template già pronti e ottimizzati, i tempi e i costi di sviluppo potrebbero di gran lunga superare il budget a tua disposizione.

Diverso il discorso in caso di landing page (o siti one-page). Qui creare una pagina in html può essere vantaggioso. Per almeno una motivazione:

  • Performance elevate: parlo della velocità di apertura della pagina. L’html è un linguaggio di programmazione leggero e che necessita davvero di poche risorse per essere scaricato. Se promuovi la pagina e vuoi aumentare il numero delle persone che visualizzano la pagina di atterraggio, ti consiglio di sfruttare risorse veloci e leggere. Come l’html. Un sito strabiliante che si apre in modo lento potrebbe essere difficile da promuovere.

Come la penso? → Ti do una dritta. Puoi crare una landing page in html anche con One Minute Site. O meglio, tutte le pagine web che deciderai di mettere online su questa piattaforma sono in html. Ecco perché i siti sono così veloci. Ecco, per esempio, la scheda prodotto di un eCommerce: guarda tu stesso.

Di tools per disegnare un layout ne hai tanti, ma hai le risorse per farlo?

Progettare un sito web è da molti considerato un impegno semplice e secondario, invece come abbiamo visto non basta essere un creativo né uno sviluppatore: è necessario un lavoro in team o la multi-competenza su entrambi i fronti per buttare giù un modello di partenza. Già perché poi serviranno anche competenze in ambito SEO, copywriting, neuroscienze e forse ho dimenticato qualcosa!

Strumenti come Photoshop, Canva e la conoscenza del codice HTML (e degli annessi e connessi – CSS e JS) sono sicuramente un utile punto di partenza, ma non bastano per poter realizzare un intero sito in completa autonomia. Lo stesso vale per le piattaforme gratuite. One Minute Site compresa. A meno che non studi e ti impegni a capire come funziona il web e come comunicare online con il tuo pubblico. Se non hai le skills necessarie, utilizzare in autonomia uno strumento, anche efficace, potrebbe essere deludente. E tu non vuoi impiegare ore a capire come creare il miglior layout per il tuo sito, giusto?

Ecco perché rivolgerti a un team di professionisti può essere il miglior modo per create il layout dei tuoi sogni. Pratico, bello, funzionale.

One Minute Site, oltre ad essere un cms (Content management system) che ti consente di pubblicare un sito in autonomia (anche gratis) ti offre l’opportunità di affidare il tuo progetto a un team di esperti (anche se sei un consulente), che si fanno carico dei tuoi desideri e danno vita al migliore progetto che tu possa realizzare, con un budget davvero accessibile a chiunque. Vuoi saperne di più?

 

[Photocredit: silviarita da Pixabay]

0

Lascia il tuo commento

Lascia qua la tua recensione.
Dicci cosa ne pensi dell’articolo.

Leave a Reply

Your email address will not be published. Required fields are marked *