Quando navighiamo su di un sito internet la prima cosa che salta subito agli occhi è il layout web del sito stesso. Ma come si fa a disegnare il miglior layout per un portale web?
In questo semplice articolo, oltra a fornire alcune definizioni e alcuni consigli pratici nella progettazione di un sito, parleremo anche dei vantaggi e degli svantaggi di un design realizzato con Photoshop e in HTML.
Cos’è il layout di un sito? Perché è così importante?
Il layout di un sito Web è un modello che definisce la struttura di un sito web e la presentazione delle sue informazioni. Possiamo dire, in modo molto semplice, che si tratta dell’aspetto grafico.
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 web aiuta gli utenti a navigare all’interno del 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.
Un sito internet poco intuitivo per gli utenti difficilmente verrà visitato più volte in futuro. Infatti, gli utenti tendono ad abbandonare rapidamente un sito in cui non riescono a trovare ciò che stanno cercando.
Alcune linee guida per il web design
Progettare e realizzare un sito internet in base ai propri gusti è la cosa peggiore che possa fare. Infatti non è sempre detto che gusti personali coincidano con quelli degli utenti o del mercato.
Anche nel web design esistono degli standard – indiscutibili – che aiutano un sito internet a soddisfare le aspettative dei visitatori digitali.
Secondo Jacob Nielsen, uno dei massimi esperti di usabilità sul web e autore di molti libri, quasi l’80% deli utenti online si aspetta di trovare determinati elementi in specifiche posizioni sui siti web. Nielsen ha quindi stilato un elenco di elementi e funzionalità che i navigatori si aspettano di trovare su un sito.
L’elenco è abbastanza lungo, abbiamo deciso quindi di riportare solo gli aspetti più importanti. Vediamo quali sono:
La posizione del logo
È sempre consigliato posizionare il logo in alto a sinistra.
Presenza di una splash page (pagina di intro al sito)
Mai usarla. La splash page era molto in voga negli anni ’90. Ora gli utenti voglio accedere subito alle informazioni e la presenza di una pagina di intro porta solo all’allontanamento dei nostri utenti.
Posizione del menu
Il menu di navigazione deve essere presente in ogni pagina. La posizione ideale è in altro, menu che preferibilmente deve rimanere visibile durante lo scroll.
Usare la 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. Ancor di più il beneficio che ottiene dal tuo sito e l’azione che tu vuoi che faccia. Ci sono diversi modi per realizzare una Call to action, sia in forma grafica che testuale. L’importante, comunque, è che ci sia.
Footer
Il footer, in italiano “piè di pagina”, deve essere sempre presente e deve essere sempre uguale in tutte le pagine. Al suo interno devono essere racchiuse le informazioni più utili per gli utenti: dati di contatto, indirizzi, link alla pagina della privacy e della cookie policy.
Come disegnare un layout web?
Prima dell’avvento dei vari CMS (Content Management System) la realizzazione di un portale internet era contraddistinta da due fasi molto importanti:
- designing
- coding
Il tutto veniva fatto progettando e poi scrivendo a mano il codice necessario per la realizzazione del design web. Ciò voleva dire che solo poche persone ben preparate potevano realizzare delle interfacce degne di nota.
Usare l’HTML per la realizzazione del layout
L’HyperText Markup Language (traduzione letterale: linguaggio a marcatori per ipertesti), comunemente noto con l’acronimo HTML, è un linguaggio di markup (diffidate da chi vi dice che è un liguaggio di programmazione). Tale linguaggio è alla base della realizzazione della codifica del nostro layout web. Prima della venuta degli strumenti che ne semplificano la realizzazione tutto il codice veniva scritto a mano.
Oggi l’uso diretto dell’HTML per realizzare un layout può essere ormai considerato 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 non si abbia una serie di template già pronti e ottimizzati, i tempi e i costi di sviluppo potrebbero di gran lunga superare il budget a 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: la velocità. Infatti, l’HTML è un linguaggio leggero che necessita davvero di poche risorse per essere scaricato.
Disegnare un layout web con Photoshop
Photoshop è un ottimo programma per la manipolazione di foto e molto altro. Forse non tutti lo sanno ma può essere usato anche per la realizzazione di design web accattivanti e personalizzati. Ovviamente, 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 meglio affidarsi ad un professionista.
Per quanto possa essere gradevole e ben fatta la struttura finale, non basterà esportare la struttura in HTML – funzionalità integrata in Photoshop – per aver una interfaccia ottimizzata. Infatti, il codice prodotto da PhotoShop durante l’esportazione deve essere necessariamente rimaneggiato per risultare ottimizzato ed evitare penalizzazioni da parte di Google. Era troppo bello per essere vero, no?
Creare un layout non è per tutti
Realizzare un sito web, grazie ai numero tools anche gratuiti presenti oggi, è da molti considerato un impegno semplice e secondario. Abbiamo visto con questo semplice articolo come i problemi ci siano sempre, 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.
Come già detto in altri articoli serviranno anche competenze in ambito SEO e copywriting per ottenere il massimo dal nostro portale.
Strumenti come Photoshop 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.
A meno che non si dedichino diverse ore nello studio per acquisire le skills necessarie, imparare ad utilizzare in autonomia uno strumento, anche efficace, potrebbe essere deludente.
Rivolgersi a un team di professionisti può essere il miglior modo per create il layout web dei tuoi sogni. Pratico, bello, funzionale.
Se vuoi saperne di più non esitare a contattarci.
