In questa guida ti mostriamo con delle semplici mosse e con un piccolo breviario come migliorare il web design del tuo sito: Grafica, layout, testo e caratteri, immagini e l’importanza dei contenuti ‘Above the fold’.
Ti daremo alcuni principi e regole fondamentali da tenere sempre presenti e che formano la base del Web Design attuale, consigli per quanto riguarda la scelta dei contenuti grafici, del layout e altro ancora…
È doveroso però fare prima una premessa, o almeno cominciare con questa domanda: che cos’è il Web Design? Cerchiamo di rispondere in modo semplice ed esaustivo, senza inoltrarci in lunghe e complesse spiegazioni tecniche. Non basterebbe un libro intero, ma possiamo dire che Il web design, o anche scritto in forma unita webdesign, è tutto ciò che concerne la progettazione, la realizzazione e lo sviluppo di un sito web. Che significa questo? Il web designer, o anche un’agenzia o web agency che si occupa di design per il web è colui o colei che realizza interamente un sito, partendo dalla progettazione e dal “disegno”, fino ad arrivare alla realizzazione tecnica finale. Ci possono essere molte figure, che collaborano tra di loro, e delle più disparate: partendo dal grafico puro fino al developer, ma tutte devono tenere conto degli stessi fattori che possano determinare o meno la riuscita di un sito web.
Come un’unica squadra ricoprono ruoli diversi, ma raggiungono lo steso obiettivo: tutto parte, come quasi ogni cosa, dalla progettazione…
Come ne abbiamo già parlato nel nostro precedente articolo, sulla creazione di un sito web professionale, che il tuo spazio on-line faccia parte di un sito web aziendale o meno, ogni cosa va sempre progettata. Questo a maggior ragione quando si cominciano a gettare le basi vere e proprie di ciò che si vedrà sul web, creando poi l’intero design e l’intero aspetto grafico di un sito vetrina, di un blog, di un e-commerce oppure di un sito aziendale. In qualunque caso, prima di tutto vanno sempre pianificati gli obiettivi e i motivi per cui si è on-line. In quale nicchia ci si posiziona, il target, i clienti e la tua attività, sono questi i fattori dominanti. Una scelta di un colore, ad esempio, e di una certa impaginazione degli elementi potrebbe andare bene, un’altra invece potrebbe scostarsi troppo sia dallo scopo utile che dall’utente finale per cui si voglia che vengano fruiti e percepiti, sia perché troppo distante dalle linee della propria brand identity e dal tipo di attività. Tutto dipende come sempre da questo: in poche parole un layout o un determinato menu di navigazione potrebbe essere perfetto per un blog, ma non per un e-commerce… e ancora nella stessa categoria degli e-commerce un determinato aspetto grafico potrebbe andare bene per una nicchia e per un’attività, ma non per la tua in questione. Stessa cosa vale ovviamente anche per le immagini, il tipo di carattere scelto ed ogni altro elemento grafico che venga poi messo in evidenza sul sito. Tutto questo non deve mai perdere d’occhio l’obiettivo finale che è: mettere al centro dell’attenzione il tuo cliente e migliorare notevolmente la tua attività on-line.
Abbiamo visto che quello di rendere personalizzato e unico ogni sito web, in base alla propria attività e alla propria fascia di utenza, è un principio base del Web Design, e del Design in generale… ma ci sono anche dei pattern o linee guida con cui possiamo muoverci più tranquillamente, e a cui è bene affidarsi, e che ora vedremo.
Sarebbe buona norma iniziare sempre con un ‘albero della navigazione’…
Cioè una schematizzazione del flusso di navigazione del sito secondo un diagramma. Individuare successioni e incominciare a organizzare il materiale secondo il modo in cui lo si vorrebbe presentare nella navigazione, la gerarchia, e l’organizzazione. Così da avere già un vantaggio logico su ciò che si deve presentare e mostrare all’utente o al cliente. Non è detto poi che servano obbligatoriamente tutte le pagine “standard” o quelle più “conosciute” e che tutte le pagine presenti in un sito debbano avere la medesima importanza per ogni progetto…
Il wireframe è uno schema su carta o su pc di come verranno posizionati banner, menu di navigazione, loghi e contenuti… è giusto lo “scheletro” della struttura logica del sito, dove si iniziano a disegnare le sezioni principali che racchiudo i vari elementi, e dove posizionarli poi nella pagina web. In fase di progettazione questo è un grandissimo vantaggio: avendo solo lo scheletro in un file Photoshop, ad esempio, ogni cosa può essere cambiata e riposizionata molto più facilmente e rivista più volte, nel caso ci siano posizionamenti che non convincano.
Realizzato un wireframe è possibile creare anche una prima bozza del sito, sempre in formato grafico, con un mockup. Aggiungendo, nelle sezioni decise con il wireframe, gli elementi grafici che probabilmente risulteranno essere presenti al momento della stesura finale. È come un modellino in scala…
Un elemento chiave, tra i più importanti per un’azienda, è sicuramente il logo: forma stessa del brand e della attività e che può essere riconosciuto facilmente dai tuoi clienti e dagli internauti. Deve essere sempre ben visibile in ogni pagina e sempre nella stessa posizione. Utilizza un logo originale, semplice e chiaro e che rappresenti bene la tua azienda e la tua attività. Uno dei pattern meglio conosciuti dai navigatori è il link da questo alla Home Page del tuo sito, quindi consigliamo sempre di metterlo, rendendo così migliore la navigazione e assecondando un’abitudine ormai consueta di chi naviga.
Un altro elemento a dir poco fondamentale per un buon design è senza dubbio il menu di navigazione. Il menu deve essere chiaramente visibile, sempre nella stessa posizione in ogni pagina e facilmente accessibile, per permettere una navigazione agevole e veloce. Deve contenere tutte le pagine più importati già all’interno e una struttura dei link quanto più semplice e chiara possibile, con nomi chiari ed inequivocabili. Se si hanno molte pagine e quindi molti link, come ad esempio per un e-commerce, può essere utile suddividere i link del menu per categorie, oppure per pagine e sotto-pagine, facendo apparire così dei sotto-menu all’interno al passaggio del mouse, ma che non siano troppo grandi. Un altro utile consiglio, in questo caso, è quello di implementare anche un breadcrumb, per fare in modo che il visitatore sappia sempre dove si trovi e che possa ritornare indietro nelle categorie di prodotti o sottocategorie, e così via…
Il layout è la disposizione degli elementi in una pagina, deve essere sempre quanto più chiaro e semplice possibile e senza elementi eccessivi che possano distrarre il visitatore o appesantire il sito. Senza sezioni poco chiare in cui non è facile capire in cosa ci si è imbattuti. In genere devono avere delle intestazioni e zone di competenza ben delimitate e una gerarchia ben definita: dove le sezioni più importanti sono meglio risaltate e messe in evidenza rispetto alle altre. Importanti sono allo stesso modo anche gli spazi bianchi che danno “aria” ai contenuti. È importante determinare una struttura logica che almeno nella maggior parte dei casi sia uguale per tutte le pagine, in cui elementi come una barra di ricerca o menu laterali siano sempre nella stessa posizione, così da rendere “familiare” il layout e facile da ricordare per una seconda o terza visita.
Crea una grafica senza troppi fronzoli e non superflua, senza troppi elementi l’uno accanto all’altro e che non disturbi gli occhi con colori troppo accesi o in disuso. Rendila utile e coerente con la tua attività e il tuo brand, ma soprattutto funzionale ai contenuti e gradita alla tua nicchia e ai tuoi clienti. Se si tratta di un’attività fisica o locale con una propria immagine già costruita e definita è bene sempre riportarla anche sul sito ed avere un’unica immagine coordinata. Evita inoltre banner e popup improvvisi, perché non sono graditi agli utenti che cercano informazioni o altro in maniera veloce come si è abituati sul web. La parola chiave è: Semplicità.
Stessa cosa per le immagini: le immagini si sa, parlano sempre più di mille parole, e danno sempre un tocco in più con l’effetto scenico, ma devono essere contestualizzate e inerenti alla tua attività, molto meglio se reali e create appositamente. Evita foto di scarsa qualità o da “stock”, ma non eccedere con le risoluzioni o con immagini ad alto impatto. Un’immagine enorme, troppo pesante e ad altissima risoluzione rallenta notevolmente il caricamento della pagina, e a maggior ragione crea squilibrio e disarmonia se poi il resto degli elementi grafici non è all’altezza oppure non sono proporzionati. Cerca di trovare sempre un giusto equilibrio tra qualità e peso dell’immagine, sobrietà e il giusto valore della comunicazione visiva del tuo brand. Meglio sempre se proporzionate con i contenuti e con il layout circostante, in modo da dare equilibrio e armonia al tuo sito web.
Altro elemento chiave è la scelta dei font che formano il testo. Vi consigliamo di non usare troppi font diversi né troppi colori, ma di usarne al massimo due o tre e che siano facilmente riconducibili a determinati contesti, nel senso: potrebbe esserci un tipo di font diverso per il menu di navigazione principale, un altro per il contenuto all’interno delle pagine (come ad esempio gli articoli di un blog o di un e-commerce) mentre un altro per i titoli, o magari anche per i contenuti marginali delle pagine (come link del footer o articoli e prodotti correlati), ma l’importante è mantenere sempre una certa coerenza di stile e che siano sempre gli stessi per ogni pagina. Anche il font dei testi è da scegliere sempre a seconda della propria nicchia e contesto di attività, stessa cosa vale per il colore in uso, che può andare bene o non a seconda dei casi, ma è buona norma che sia leggibile, senza colori abbaglianti e abbastanza grande da permettere di essere letto senza difficoltà. Inoltre che sia ben visibile e in contrasto con lo sfondo su cui è posizionato, altra cosa de tenere presente è l’interlinea: che dia abbastanza spazio tra una riga e un’altra, ma che non sia troppo eccessivo.
Il termine above the fold deriva dalla tipografia ed è stato preso anche per il web design per identificare tutta quella parte di pagina che è da subito visibile nel nostro browser, senza dover scorrere in basso con il mouse. È buona norma mettere i contenuti più importanti e rilevanti alla nostra attività subito in questa zona, per dargli così maggiore visibilità a colpo d’occhio e posizione principale rispetto gli altri.
Per tutto il resto, come dice Google: “Content is King” …
Se ti è piaciuto il nostro articolo su come migliorare il web design del tuo sito lasciaci pure un commento e dicci cosa ne pensi. Siamo curiosi di sapere se utilizzi ad esempio altre tecniche, oppure se reputi che abbiamo tralasciato qualcosa o altri aspetti per te fondamentali nella costruzione di un sito web e del Web Design.
Se vuoi dai uno sguardo al nostro portfolio o visita anche gli altri articoli del nostro blog, dove speriamo ci siano altri articoli che ti possano interessare o che ti possano aiutare.
Inoltre se hai bisogno di un qualsiasi consiglio o di una consulenza ti rimandiamo alla nostra pagina di contatto, sentiti pienamente libero di scriverci per ogni cosa!
