Come creare un sito (che non faccia schifo)

In questa piccola guida voglio spiegarti quali sono le basi per sapere come creare un sito che non faccia schifo: il titolo è volutamente scherzoso, ma i concetti che ti vado ad elencare sono dannatamente seri.

Se riesci a miscelare con cura tutti gli elementi, non solo potrai finalmente sentirti dire dal tuo collega nerd che hai un sito bello ed efficace, ma potrai comprendere quali sono gli elementi che ti permettono di scegliere la grafica giusta per creare un sito web che, assolutamente, è parte integrante della formula per creare un sito web di successo.

Non usare il tema standard di Wordpress

Se stai pensando di creare un sito con Wordpress, non utilizzare il tema standard. All'interno delle pagine di costruireunsito ti presentiamo anche un Tema decisamente avanzato, che si chiama Divi, e che puoi ottenere subito se dai un'occhiata ai video che ti mandiamo dopo che hai guardato l'introduzione in home page

Creare un sito bello


Non sempre l'acquisto di un tema grafico elegante ti permette di creare un sito web professionale: se non fai attenzione a tutti gli elementi che compongono il tema del tuo sito web, potresti "rovinare" un buon template. Per questo, qui sotto, ti voglio parlare anche degli elementi a cui devi prestare particolare attenzione quando vuoi creare un sito accattivante.

Utilizza foto di qualità

L'errore più comune di chi ha creato un sito web è quello di riempire le proprie pagine di immagini di scarsa qualità.

Hai presente quelle foto con l'omino bianco in 3D con il punto di domanda rosso? Ecco, dimenticalo. Quello è uno dei segnali d'allarme che fa pensare alle persone ad un sito di scarsa qualità ed affidabilità. Se ti è posibile fai in modo che la tua pagina web abbia sempre foto di alta qualità.

Immagini di alta qualità per un sito

Trova foto gratuite di alta qualità

Se ti stai domandando dove trovi foto di alta qualità, ma al contempo gratuite, ho una buona notizia: esistono e puoi utilizzarle anche a scopo commerciale. Ovviamente il limite dei siti che offrono le foto gratuitamente è che generalmente... sono poche! Spesso però, con un po' di fantasia, puoi adattarle alle pagine del tuo sito web.

Foto di Alta Qualità

Ti faccio un elenco di 3 siti che reputo tra migliori per scaricare foto gratuite e di alta qualità da inserire nel tuo sito:

  • Pexels: raccoglie una serie di foto di alta qualità, ha un motore di ricerca interno (in inglese) e ti suggerisce anche foto a pagamento nel caso non sia riuscito a trovare nulla che soddisfi la tua ricerca.
  • Unsplash: un sito che ha un sacco di foto con licenza "do whatever you want" (facci quello che vuoi). Il motore di ricerca interno non è eccezionale, ti consiglio di sfogliare le foto manualmente e farti trascinare dall'ispirazione.
  • Gratisography: Una collezione del fotografo Ryan McGuide, libere da copyright. Alcune veramente impressionanti, altre un po' bizzarre. Non vi è un motore di ricerca interno, ma le foto sono suddivise per categoria.

Usa uno schema di colori

Quando ti occupi del design un sito, il mio consiglio è quello di non usare mai più di 5 colori diversi: scegli un colore per i link, per gli elementi di risalto, il menu ecc. 

Adobe Kuler

Un sito molto utile per identificare uno schema di colori per il tuo design è Adobe Color CC che una volta si chiamava Adobe Kuler: non solo ti aiuta a trovare i colori analoghi, complementari o composti, ma ha anche una vasta scelta di palette grafiche pronte con cui ispirarti.

Utilizza una tecnologia moderna 

L'utilizzo di HTML5 e CSS3 ha cambiato già da molti anni la creazione dei siti, permettendo di costruire elementi grafici in movimento, suddividere il sito in aree logiche e rendere più rapido il caricamento delle pagine.

HTML5 e CSS3

Spesso, se decidi di usare un tema professionale, non devi preoccuparti della parte tecnica del tuo sito, perché troverai questo lavoro già fatto dal creatore del tema grafico. Tua responsabilità resta però scegliere un tema grafico che sia veloce a caricarsi, supportato magari da un buon hosting dove andrai ad ospitare il dominio del sito web.

Aspetto tipografico (Font)

Personalmente ti consiglio di utilizzare un solo carattere (o una famiglia di caratteri) quando crei un sito. 

Caratteri tipografici (Font)

I caratteri più leggibili e moderni sono Open Sans, Roboto o, se puoi permetterti di pagarne la licenza, Helvetica.

Un'ottima risorsa per trovare font che puoi utilizzare nel tuo sito è Google Fonts: non solo puoi scegliere tra tantissime tipologie di caratteri tipografici gratuiti, ma puoi anche inserirli nel tuo sito con un semplice codice di embed che ti viene fornito da Google.

Fai attenzione alla leggibilità

Se desideri un design professianle per il tuo sito devi usare gli spazi vuoti. Dai molta aria al tuo contenuto testuale, distanziandolo dalle immagini. Guarda questo esempio di pagina web:

Leggibilità di un sito

 

Come puoi vedere, l'immagine è ben isolata rispetto al testo. Il titolo è scritto in caratteri chiari e sottili, il testo di esempio è dato dallo stesso Font ed è grande e leggibile. La lunghezza della riga non supera mai le 10-12 parole e la call to action, di cui ti parlerò più avanti, è chiara e distinguibile alla fine del paragrafo di testo.  

Usa una griglia

L'utilizzo di una griglia nel tuo template rende i contenuti eleganti e ordinati. Se desideri sviluppare il tuo sito web autonomanete, esistono dei framework, ossia un pacchetto di file CSS e HTML già pronti che adattano il contenuto del tuo sito a delle griglie.

Creare un sito con una griglia

Ecco un elenco di Framework che gestiscono le grigile e ti permettono di velocizzare lo sviluppo del tuo sito web:

  • Bootstrap: è un framework che utilizza una griglia a 12 colonne ed è responsive
  • Less framework: Less parte con un layout di default di 992 pixel, ma si adatta a 768, 480 e 320 pixel.
  • Foundation: framework creato da ZURB, foundation si basa su 12 colonne che possono essere ridimensionate a proprio piacimento. 

Cura il menu di navigazione del sito

Un altro elemento che constraddistingue un buon sito web è il menu di navigazione. Evita di utilizzare troppe voci nel menu, quando arrivi a 6-8 voci il menù è già sufficientemente affollato. 

Menu di navigazione del sito

Utilizza i menu a tendina per indicare categorie e sottocategorie, come nell'esempio qui sopra. Assicurati che, quando il layout del tuo sito è visualizzato da mobile o tablet, il menu si modifichi e si adatti alla risoluzione di questi dispositivi.

Design responsive

Se hai utilizzato uno dei framework che ti ho indicato sopra o hai scelto il nostro Divi o un qualsiasi altro tema moderno, il tuo design sarà già responsive.

Responsive Design

Un sito responsive adatta i suoi contenuti a più risoluzioni: desktop, tablet orizzontale e verticale e cellulare, sempre orizzontale e verticale. Se utilizzi il browser Google Chrome puoi ridimensionare la finestra in larghezza mentre guardi il tuo sito: se i contenuti si adattano senza che compaiano barre di scorrimento, il tuo sito è responsive.

Assicurati anche che la grafica del tuo sito permetta i tocchi sui link e sul menu, in modo da migliorare l'esperienza utente. Per verificare se il tuo sito è veloce nei caricamenti, ma anche l'esperienza utente a livello mobile, ti consiglio di utilizzare lo strumento Google PageSpeed Insights, che ti permette di valutare queste caratteristiche.

Una pagina, un'azione (non 10)

Per creare un sito che non faccia schifo non è sufficiente concentrarsi solo sulla grafica. È necessario avere cura anche delle call to action, ossia delle azioni che desideri che gli utenti compiono una volta atterrati su una pagina del tuo sito.

Call To Action

Il mio consiglio è quello di creare pagine web che sono dedicate ad una sola azione utente: ciò significa che, se una tua pagina è dedicata all'iscrizione alla newsletter, dovresti creare una pagina dedicata solo a quello, magari con un video, un esempio di contenuti che darai ai tuoi iscritti e via discorrendo.

Le pagine caotiche che ti chiedono di leggere il blog, ma anche comprare un prodotto e nel contempo iscriverti alla newsletter o fare altre azioni tutte vicine sono un problema: quando le persone vedono troppe cose da fare raggruppate in un unico posto si spaventano e lasciano il tuo sito.

Fai si che ogni pagina rispetti l'intezione di ricerca (query intent) degli utenti, altrimenti avrai direttamente perso in partenza i tuoi visitatori.

La regola dei 5 secondi

Questa è una regola che mi piace applicare per capire subito se il design di un sito o di una pagina funziona a dovere. 

Funziona così: fai vedere una pagina del tuo sito ad un amico o collega, che non deve conoscere già il tuo sito. Mostra la pagina per 5 secondi, poi nascondila.

Regola dei 5 secondi

Chiedi al tuo amico di cosa parla la pagina che gli hai appena mostrato, quali sono gli elementi che ricorda e qual è, secondo lui, lo scopo della pagina che ha visto.

Se si ricorda solo elementi strani e colorati, ma non ha menzionato ciò che tu aspetti sia la call to action di quella pagina o il suo contenuto principale, allora il design ha fallito. Quando vuoi costruire un sito che funziona questo test è importantissimo: cerca di farlo fare a più persone diverse, più o meno tecniche, più o meno inserite nella tua nicchia.

Conclusioni

La creazione di un sito internet è una materia complessa: seguendo queste linee guida penso che puoi cimentarti nella sua creazione o scegliere un template grafico che abbia tutte le caratteristiche che ti ho indicato, in modo da avere un look professionale ed elengante per tutte le pagine del tuo sito. 

Ti ricordo anche che, se ti fa piacere, puoi vedere il video che si trova qui sotto e scoprire cosa io e Antonio abbiamo pensato per le persone che desiderano creare un sito internet esteticamente bello, professionale ed ottimizzato per i motori di ricerca.

Commenti