I principi del web design sono dei punti chiave che non puoi ignorare quando decidi di prendere in carico un nuovo progetto da pubblicare online. Se vuoi realizzare un sito web efficace hai una serie di elementi da valutare.
Il primo? Acquistare un hosting veloce e di qualità. poi devi scegliere un dominio con relativa estensione, infine arrivano tutti i passaggi chiave: analisi SEO, ottimizzazione delle immagini, struttura degli URL e altro ancora. Però chi si occupa dell’estetica ha le sue responsabilità. Che possono influenzare l’user experience, le prestazioni sui motori di ricerca e addirittura il ROI. Ovvero il ritorno degli investimenti.
Allora, quali sono i principi del web design che non devono essere persi di vista? Ecco una serie di punti che si dovrebbero prendere in considerazione per creare un sito web, un blog o un ecommerce.
Argomenti
Lo sai che adesso Google prende in considerazione solo il tuo sito web nella versione mobile? Il passaggio al Mobile First Index prevede questo, ecco perché nella progettazione e successiva realizzazione del sito web la versione pensata per lo smartphone non deve essere sorella minore della grande tradizione desktop.
Quando lavori con wireframe e mockup inizia a ragionare su come deve essere presentato il contenuto su uno schermo da 4 pollici, come realizzare pagine che possano caricarsi bene anche con connessioni poco stabili (anche 3G) e rispettando dei criteri di design comprensibili anche attraverso una logica responsive.
Magari da desktop le pagine si vedono e navigano bene ma tutto quello che hai pensato si applica bene da mobile? Prima di iniziare a ragionare sulla realizzazione assicurati che il design rispetti le regole di Google.
Da leggere: perché è importante avere un sito web veloce?
Oggi è un punto chiave della tua strategia SEO ma anche per quella destinata al miglioramento dell’esperienza utente. Un sito web non può permettersi di perdere decimi di secondo preziosi.
Ogni istante di ritardo è bounce rate che aumenta e clienti che vanno via. Per questo devi acquistare un hosting veloce ma non solo: tra i principi del web design c’è anche quello che impone un’attenzione in più per tutto ciò che permette alla pagina web di caricarsi in tempi minimi. Un punto da ricordare sempre?
Maggiore è la complessità del design, superiori sono i rischi di avere difficoltà nel processo di snellimento del codice per avere siti web veloci. Lo stesso discorso riguarda la presenza di plugin, page builder ed estensioni: ragiona in termini di semplicità. E usa sempre il Pagespeed Insight di Google.
Quando progetti un sito web – pensando al mobile – ricorda che esiste una regola fondamentale tra i principi di web design: pensare all’above the fold come il punto in cui le persone decidono se rimanere sul sito. Quando i potenziali utenti atterrano sulla pagina è la prima parte a dare il massimo.
Lo deve fare comunicando subito i valori della risorsa e riducendo i tempi di caricamento rispettando i termini del Largest Contentful Paint (LCP). Quindi devi essere veloce, semplice e immediato.
“Elements above the fold were seen more than elements below the fold: the 100 pixels just above the fold were viewed 102% more than the 100 pixels just below the fold”. Gli elementi che si trovano nell’area above the fold, secondo Jakob Nielsen, sono più visti rispetto a quelli below the fold con un plus del 102%. Ecco perché bisogna anche lavorare in modo da incoraggiare e spingere verso lo scrolling.
Quando studi il design del sito web pensa all’equilibrio con il font. Deve essere leggero (anche questo elemento contribuisce al tempo di caricamento pagina) ma anche esteticamente collegato al progetto.
Meglio evitare troppe soluzioni diverse all’interno della stessa pagina e punta a un font di grandi dimensioni, minimo 14 pixel per il bodycopy e soluzioni più abbondanti per gli header. Che devono essere usati per indicare la gerarchia interna della pagina web: non usare H2 e H3 per aumentare il font.
Non devi usare gli header neanche per dare importanza a un trafiletto, per questo scopo devi usare i fogli di stile e non questi elementi che sono semanticamente rilevanti lato HTML. Quindi non messi a caso.
Vero, hai bisogno di pagine veloci. Ma questo non significa scegliere immagini di scarso livello. Evita le immagini stock e non caricare visual di scarsa qualità: puoi caricare tranquillamente immagini leggere ma sempre di prima scelta grazie a siti come Unsplash che permettono di scaricare foto di alta qualità.
Ma sempre con licenza Creative Commons Zero. Ciò significa che puoi usare le foto di questo portale (unsplash.com) senza alcun problema rispetto alla proprietà del contenuto. Prima dell’upload, però, ricorda di ridimensionare nel modo giusto e comprimi con tool come Optimizilla e Kraken.io.
Da leggere: cos’è e cosa sapere sul lazy load
Sempre rimanendo tra le novità proposte da Google, chi si occupa della progettazione di siti web efficaci deve sempre valutare il buon equilibrio con i Core Web Vitals. Vale a dire gli elementi fondamentali che migliorano l’esperienza utente su una pagina web. Parliamo di 3 elementi fondamentali, ovvero?
C’è il First Input Delay, vale a dire il tempo di reazione di un elemento cliccato o usato dall’utente. Il Largest Contentful Paint invece è il tempo di caricamento del primo blocco di contenuto più impegnativo (ad esempio l’immagine dell’above the fold). Poi c’è il Cumulative Layout Shift, vale a dire lo spostamento degli elementi grafici. Tutto questo deve essere curato al dettaglio da chi si occupa del web design. Sei d’accordo? Hai trovato problemi a seguire le linee guida di Google? Lascia la tua esperienza nei commenti.
