In questa guida rapida vogliamo offrirti 10 consigli per creare un sito web professionale, riguardanti soprattutto l’aspetto grafico e il design.
Se stai lavorando con un CMS come WordPress, oppure se stai creando un sito web in puro HTML, questi consigli ti saranno di aiuto in entrambi i casi.
Imposta un layout responsive avanzato
Per configurare dei layout responsive dovrai utilizzare le @media query in CSS, settando i breakpoints in base alla risoluzione in pixel dei dispositivi che navigheranno nel tuo sito sito web.
Nota: usando editor visuali come ad esempio Elementor per WordPress, non sarà necessario impostare manualmente i breakpoints usando le @media query, ma potrai configurarli nelle impostazioni del Plugin. Per sapere come fare cerca su Google “setup breakpoints nome_plugin”
In un sito web di basso/medio livello è sufficiente impostare 3 responsive layout:
- Mobile fino a 767px
- Tablet fino a 1024px
- Desktop da 1024px
Mentre per creare un sito web professionale consigliamo di impostare 7 responsive layout:
- Mobile fino a 320px
- Mobile fino a 480px
- Cellulari e Tablet fino a 767px
- Tablet fino a 1024px
- PC desktop da 1280px
- PC desktop da 1440px
- PC desktop e TV da 1920px
Chiaramente, sei libero di impostare più o meno breakpoints in base al target di riferimento del tuo sito web:
- Se pensi che molti utenti possano navigare nel tuo sito da Smart TV (ad esempio se offri servizi di streaming) allora darai più importanza a layout ampi;
- Se invece i tuoi dati analitici mostrano che la maggior parte degli utenti usano i cellulari, crea più breakpoints per le basse risoluzioni.
Tieni presente che si può navigare da cellulare anche con il telefono ruotato e, se farai dei test su vari siti web, vedrai che molti di questi non sono ottimizzati per questo formato di visualizzazione.
Altri non sono ottimizzati per risoluzioni basse, come ad esempio i 320px.
Se vuoi davvero creare un sito web professionale devi garantire una corretta visualizzazione di tutti gli elementi nel maggior numero di dispositivi possibili.
Usa la Console di Chrome (o di altri browser) per testare le varie risoluzioni, oppure usa questo tools gratuito.
Quali sono le risoluzioni di schermo più usate al mondo?
Puoi basarti su questi dati globali per scegliere i breakpoints del tuo sito web:
| Risoluzione schermo | % di utilizzo |
|---|---|
| 1920×1080 | 8.91% |
| 1366×768 | 7.39% |
| 360×800 | 5.08% |
| 360×640 | 4.29% |
| 414×896 | 4.17% |
| 1536×864 | 4.05% |
| 360×780 | 2.92% |
| 375×667 | 2.74% |
| 412×915 | 2.73% |
| 375×812 | 2.59% |
| 1280×720 | 2.54% |
| 360×760 | 2.49% |
| 390×844 | 2.46% |
| 1440×900 | 2.43% |
| 393×851 | 2.17% |
| 768×1024 | 1.79% |
| 393×873 | 1.77% |
| 412×892 | 1.72% |
| 360×720 | 1.52% |
| 1600×900 | 1.36% |
| Other | 34.87% |
Scegli i fonts più adatti
Se hai già una Brand Identity è molto probabile che sarai vincolato nell’uso dei caratteri, poiché questa includerà certamente i fonts da usare nel sito web.
Se non hai una brand identity, ma solo un logo che contiene dei fonts, uno dei font da usare è sicuramente quello del logo.
Se invece non hai una brand identity, ne un logo che contenga dei fonts, allora dovrai scegliere quelli più adatti al tuo progetto, senza limitarti al solo al sito web.
Tieni presente che scegliere i fonts per il sito web equivale a sceglierli anche per la comunicazione editoriale (brochure, volantini, biglietti da visita) e per tutta la comunicazione online (social network, email marketing, etc).
Ecco alcuni suggerimenti per la scelta dei fonts di un sito web professionale:
- Scegli i fonts prima di creare il sito web, poiché questi cambieranno radicalmente il suo design. Potresti usare Google Fonts per trovarli, ma dopo aver letto questa guida;
- Usa da due a tre fonts, non di più. Usa un solo font se l’obiettivo principale è la velocità di caricamento delle pagine. Sappi che un font THIN + un font BOLD, anche se della stessa famiglia (es. Arial) corrispondono a 2 font differenti da caricare nelle pagine;
- Scegli un font per i titoli, uno per il testo e un corsivo per eventuali citazioni. Potresti usare questo strumento per vedere quali solo gli abbinamenti di fonts più usati nel web;
- Trova fonts che siano facilmente leggibili, evitando quelli troppo impegnativi per gli occhi;
- Abbina i fonts in modo che siano coerenti tra loro usando strumenti come FontJoy;
- Converti i fonts in WOFF 2.0 usando un convertitore per velocizzare il caricamento delle pagine;
- Se hai scelto i Google Fonts non caricarli tramite script, ma scaricali come file e converti i TTF in file WOFF 2.0, che poi caricherai direttamente nel sito web.
Ti interessano marketing e notizie green?
Entra nel nostro canale Telegram!
Pubblichiamo 2 post a settimana da leggere in 2 minuti, nel quale sintetizziamo le ultime notizie riguardanti Marketing, Social Media e Business. E’ gratuito, non richiede registrazione e potrai uscire dal canale in qualsiasi momento:
Imposta dimensioni e intelinea dei fonts
Dimensioni e spaziature tra paragrafi e titoli sono spesso sottovalutati dai web designer, o ancor peggio impostati “a caso”. Per creare un sito web professionale dovrai calcolarli con precisione nella fase di design del sito web.
Nota: PX, EM, REM, quale misura usare per i font del tuo sito web? Nel Web design moderno si cerca di optare per EM o REM, poiché queste garantiscono maggiore “accessibilità” ed effetti responsive migliori rispetto ai PX. Gli EM sono abbastanza complessi da gestire a differenza dei REM che possono comunque garantire un ottimo risultato. Leggi questa guida per saperne di più.
Per calcolare dimensioni e spaziature in modo meticoloso, dovrai prima di tutto decidere quale sarà la dimensione in PIXEL del testo <p>, e da questa potrai calcolare i titoli H1, H2, H3, H4, H5, H6 e altri elementi come ad esempio lo <small>:
- Scegli quale sarà la dimensione del testo <p> (solitamente tra 16px e 18px);
- Usa questo tool online impostando la dimensione del testo <p> che hai scelto, così da ottenere le dimensioni di tutti i titoli <h1> <h2> etc.
- Ora dovrai impostare la spaziatura del testo per ogni singolo elemento (p, h1, h2, etc) e per farlo in modo rapido potrai usare questo tool online.
Otterrai così un effetto grafico omogeneo tra il testo e tutti i titoli del sito web.
Usa i colori in modo appropriato
Come per i fonts, se già disponi di una brand identity che include una palette di colori, oppure di un logo, sarai probabilmente vincolato nell’uso di questi colori durante la creazione del sito web.
Se invece il tuo logo è monocromatico e non hai una palette, oppure se vuoi semplicemente usare colori differenti da quelli di cui ti disponi (sconsigliato), dovrai partire dal creare una palette di colori:
- Potresti vedere le palette di tendenza per replicarle nel tuo sito;
- Potresti generare una palette di colori “casuale”;
- Oppure potresti partire da un colore che sarai certo di usare e scoprire quali colori abbinarci.
Qualsiasi metodo sceglierai, sarai certo di avere dei colori perfettamente abbinati tra loro da usare nel tuo nuovo sito web professionale.
Ovviamente, una volta scelti, dovrai replicare questi colori in tutta la tua comunicazione, da quella cartacea ai social network.
Distribuisci gli spazi vuoti tra gli elementi
Questo è un’altro elemento di design spesso sottovalutato dai meno esperti e che invece è molto importante per creare un sito web professionale.
Gli spazi vuoti (o bianchi) sono una “strategia” di web design e vengono utilizzati per bilanciare il design della pagina, organizzarne il contenuto e gli elementi e infine per migliorare l’esperienza visiva per l’utente (e di conseguenza la UX):
Avere troppi elementi attaccati tra loro è controproducente per la UX e per la UI, come lo è altrettanto avere degli spazi bianchi di differenti dimensioni.
Dovresti quindi calcolare con precisione le distanze tra tutti gli elementi, così da replicarle nell’intero sito web creando un design omogeneo:
- Testo (lettere, paragrafi, citazioni, titoli, elenchi puntati, tabelle)
- Menu di navigazione
- Immagini e loghi
- Campi dei moduli di contatto
- Tra le varie sezioni verticali che compongono una pagina
- Tra le varie sezioni orizzontali, ad esempio la sidebar
- Nelle CTA
Crea uno stile unico per le immagini
Per le immagini ora va di moda creare degli effetti di box shadow, un’ombra esterna simile a quella che usiamo nelle immagini di questo articolo.
L’ombra mette in evidenza le immagini dandogli più importanza, rendendole più visibili e, se ben fatta, rendendo più bello e professionale il sito web (anche un semplice articolo del blog).
Puoi creare un effetto di box shadow usando questo strumento:
Oppure, se preferisci, puoi scegliere tra oltre 100 effetti di box shadow presenti in questa pagina.
L’applicazione è molto semplice:
<style>
img {
box-shadow:
2.8px 2.8px 2.2px rgba(0, 0, 0, 0.025),
6.7px 6.7px 5.3px rgba(0, 0, 0, 0.036),
12.5px 12.5px 10px rgba(0, 0, 0, 0.045),
22.3px 22.3px 17.9px rgba(0, 0, 0, 0.054),
41.8px 41.8px 33.4px rgba(0, 0, 0, 0.065),
100px 100px 80px rgba(0, 0, 0, 0.09)
;
}
</style>
Ti basterà copiare il codice CSS nell’header/footer del sito web per applicarlo su tutte le immagini in tutte le pagine, oppure solo nel template degli articoli, o ancora nelle sole pagine web dove vuoi che venga applicato.
Puoi usarlo per le immagini, ma anche per altri elementi HTML come <section>, <div>, <span> etc.
Comunque non esagerare con le ombre, soprattutto nella creazione di un sito web professionale, il consiglio è di usarle in modo limitato e mai troppo scure.
Un’altra idea per donare uno stile unico alle immagini del tuo sito web, è quella di creare delle forme (dei rombi, dei triangoli, e simili).
Anche se difficilmente applicabile a tutte le immagini, potresti comunque provarci.
Dai importanza a tutti gli elementi del tuo sito web
- Menu di navigazione
- Testi e titoli
- Immagini
- Spazi bianchi
- Tabelle
- Elenchi puntati e numerati
- Pulsanti
- Notifiche
- Velocità di caricamento
Nelle pagine principali, negli articoli del blog, nelle pagine di servizio (contatti, privacy, termini e condizioni) e nelle pagine ecommerce (pagina account, carrello, checkout, etc).
Ogni elemento è importante nella creazione di un sito web professionale e va quindi curato con la giusta attenzione.
Quando vogliamo creare un sito web senza troppe pretese (basso/medio livello), spesso ci limitiamo a curare la home page o altre pagine importanti, come quella dei servizi, evitando di perdere tempo con pagine meno rilevanti.
Molto spesso, anche le pagine di prodotto restano quelle “di default” impostate da WordPress e altri CMS, ma è una delle cose più sbagliate, visto che quelle sono il fulcro che porta alla conversione e alla monetizzazione:
Quindi, se stai creando un sito web professionale, non puoi fare a meno di curare lo stile di ogni singolo elemento presente in ogni pagina, ma spesso potrai farlo solo attraverso l’uso del codice CSS.
Non usare troppe animazioni (soprattutto da mobile)
Per quanto le animazioni siano diventate quasi obbligatorie nella realizzazione di un sito web, dovrai farne un uso discreto e decisamente limitato, soprattutto da mobile.
Nota: tramite codice, oppure tramite i Visual builder, potrai attivare determinati effetti solo lato desktop, disattivandoli da mobile.
Il nostro consiglio è quello di usare animazioni semplici come il fade-in per grandi blocchi, o semplici animazioni su testo e immagini, evitando quelle su intere sezioni e controllando in modo meticoloso se queste creano dei blocchi nello scorrimento della pagina e se l’animazione che hai inserito è compatibile con tutti i browser.
Potresti usare animazioni in puro CSS anziché optare per quelle in Javascript.
Parti comunque dal presupposto che le animazioni “pesano” nel caricamento della pagina e che spesso e volentieri sono solo di disturbo nella navigazione.
Anche se piacciono molto ai clienti e rendono il sito più dinamico, l’obiettivo principale di un sito web professionale è l’accessibilità.
In questa guida troverai alcuni spunti e tools per animare il tuo sito web, senza perdere prestazioni nel caricamento delle pagine e neanche la compatibilità con i browser e dispositivi più diffusi.
Controlla la velocità di caricamento di ogni singola pagina
Con l’implementazione dei Core Web Vitals di Google la velocità di caricamento di un sito web è diventato un aspetto chiave, soprattutto in quei siti dove il Posizionamento SEO ha rilevanza.
Se stai realizzando un sito web con ambizioni di posizionamento nei motori di ricerca, ottimizzare la velocità di caricamento delle pagine non è cosa “facoltativa”, ma di primaria importanza.
Pur non dovendo puntare alla SEO, la velocità di caricamento del sito gioca comunque un ruolo chiave, ad esempio in ottica di conversioni.
Un sito web lento nel caricamento fa perdere punti % nel tasso di conversione di un ecommerce, questo è garantito dalle statistiche. Soprattutto quando gli utenti navigano da cellulare, magari in 3G (connessione decisamente lenta e ancora molto diffusa in Italia).
Qualsiasi sito vorrai realizzare, per definirlo “professionale” ma soprattutto per far si che gli utenti non lo chiudano ancor prima di aprirlo, dovrai concentrare molte delle tue attenzioni nell’ottimizzare la velocità di caricamento di ogni articolo/pagina già pubblicata e di tutte quelle che pubblicherai in seguito.
Per testare la velocità del tuo sito web puoi usare un tool come GTmetrix, ma ti suggeriamo di usare anche il PageSpeed di Google, poiché il primo è fin troppo “buono” e spesso un risultato positivo potrebbe trarti in inganno.
Usarli entrambi è l’ideale:
La cosa più importante che dovrai valutare sono i Core Web Vitals, ma se il tuo sito è nuovo, o non ha abbastanza traffico, li vedrai in modo leggermente differente rispetto a quelli che vedi nello screen di sopra.
Rivolgiti a un’agenzia web che possa aiutarti
Come avrai notato alcuni di questi consigli sono facilmente applicabili durante la creazione del tuo sito web, ma per altri è necessaria una buona “esperienza” sul campo.
Potresti continuare a studiare effettuando ricerche su internet, oppure partecipare a un corso di formazione “one to one” come quelli che proponiamo con la nostra agenzia web.
O ancora, se proprio non te la senti di andare avanti da solo, potresti usare il nostro preventivatore per la realizzazione di un sito web professionale:
