Ente accreditato Regione Veneto n.4271

#3 Restyling venetoformazione.it: la grafica

Pubblicato da Luca Binotto // 31 Luglio 2015 // 144 visualizzazioni

restyling-grafica-web   Per alcuni costruire la grafica di un sito web diventa un’ossessione. Altri la fanno più facile, cercando di privilegiare l’essenzialità. Oggi parliamo della scelta della grafica, nel progetto di restyling del nostro nuovo sito web. Prima, di addentrarci nell’argomento, meglio ricordare un particolare importante.

Premessa

La grafica di un sito web, come nella più classica comunicazione stampata, deve esprimere il carattere e l’’identità del brand che rappresenta. Ogni particolare deve, o dovrebbe, riferirsi alle regole di comunicazione visiva che utilizza quel brand. Primo problema: le avete delle linee guida? Ogni sito internet, meglio ancora se corporate, come anticipato, dovrebbe rispondere alle linee guida identificate dalla strategia di comunicazione corporate, raccolte nel documento di Corporate identity, cioè quel documento che chiarisce le regole di utilizzo del logo, la formattazione dei testi e il visual aziendale declinato per tutti i supporti di comunicazione. L’obiettivo è implementare una strategia di comunicazione che a più livelli coordini tutti gli elementi. In poche parole, bisogna puntare la barca in un’unica direzione. Munitevi di questo documento, altrimenti sarà molto difficile coordinare la vostra comunicazione e il risultato sarebbe fortemente penalizzato.

Cosa deve esprimere il sito?

Da sempre Veneto Formazione, mette al centro del villaggio lo studente, l’offerta formativa e il metodo di insegnamento. Tuttavia, nel sito attuale, questi elementi non sono abbastanza enfatizzati. Lo stile è istituzionale, lineare e informativo. Ci siamo accorti che questo non bastava più. È stato quindi necessario rivedere le nostre priorità e stabilire delle nuove linee guida. L’attenzione è stata, quindi, spostata maggiormente sui bisogni dell’utente, con l’obiettivo di rassicurarlo rispetto al percorso formativo che avrebbe intrapreso, alla serietà della scuola e al metodo di insegnamento.

Il layout

Testo in colonne? Quante colonne? One page site? Sono diverse le idee che abbiamo buttato sul tavolo. Abbiamo escluso il one page site praticamente subito, perché più indicato per quei siti dove i contenuti sono ridotti e inoltre perché non è molto efficace lato SEO. Sulla base delle nostre ricerche e in funzione di obiettivi e target, abbiamo scelto un layout a 12 colonne, adattabile in funzione dell’argomento della pagina, ovviamente responsive con un design grafico orientato al flat. Non siamo ancora arrivati alla scelta definitiva di un framework. Tra i candidati, stiamo valutando i popolarissimi Bootstrap e Foundation o il meno noto Materialize. Come ultima cosa, abbiamo optato per uno schema a fasce, o come piace chiamarlo a me, a blocchi tematici. Il perché ve lo dico subito. Volevamo garantire una grande versatilità di navigazione, ma allo stesso tempo fornire all’utente una base solida per conoscere la nostra struttura, senza spingerlo forzatamente verso un appuntamento al buio. Per raggiungere questo obiettivo è indispensabile aumentare il tempo di permanenza degli utenti nel sito, con un mix di contenuti e approfondimenti di qualità che stimolasse l’interazione e favorisse una più completa user experience.

Il font

La scelta del font per un sito internet aziendale è un concetto troppo limitato. Avere una visione globale di tutte le applicazioni di uno o più font risulta più efficace, oltre a rafforzare l’immagine aziendale.

  1. Leggibilità: il font deve essere leggibile in tutte le situazioni applicative, dalla pagina web alla carta stampata. Le buone performance di un blog, dipendono anche dalla scelta di un font ben contrastato, chiaro che non stanchi l’occhio.
  2. Disponibilità: bisogna prevedere di utilizzare il font con stili differenti, dal bold, all’italic, dal light al regular e così via. Quindi, è bene ricordare che maggiore sarà la disponibilità di stili di un font, migliori saranno le vostre possibilità.
  3. Identità: il font deve rappresentare l’identità di un brand. Ad esempio, una forma regolare, squadrata, trasmette un’idea di tecnologia e precisione, una forma più tondeggiante si adatta maggiormente a temi come l’infanzia e il benessere.
  4. Coerenza: sempre e comunque. Non ce n’è mai abbastanza. Coerenza nella scelta dei font. Ad esempio l’uso di uno stile per i titoli, uno per i sottotitoli e uno per il testo. Questo vale per il sito, come per il catalogo, o la brochure. Scegliere due font diversi è possibile (spesso si accosta un Sans-serif con un Serif), senza esagerare, scegliendo la soluzione che si adatta meglio alle esigenze stilistiche e applicative. Mai caricare troppi font. Il rischio è rallentare il caricamento delle pagine.

Per la nostra strategia di comunicazione web abbiamo scelto due font: uno che si adattasse con diversi stili a tutti i contenuti del sito e uno che fosse rappresentativo del brand, da utilizzare “come il prezzemolo” in situazioni precise, chiare. Avremo modo di approfondire questo argomento nei prossimi articoli e per questo motivo preferisco non entrare troppo nel dettaglio.

Il contenuto comanda

Prendetevi sempre in anticipo sui contenuti, rispetto alla grafica. Abbandonate il Lorem Ipsum, oppure usatelo con molta attenzione, perché non vi permette di vedere il sito come sarà, ma vi genera solo quello che vorreste vedere. Disporre dei testi vi permette anche di lavorare sulla loro corretta posizione all’interno della pagina e vi lascia il tempo per programmare una schematizzazione più stimolante e originale, come potrebbe essere un’infografica o un’animazione.

Conclusione

La grafica del sito è probabilmente l’aspetto più entusiasmante della realizzazione di un sito e allo stesso tempo anche il più delicato. A complicare questa fase c’è anche l’attenzione nel coordinarsi all’interno del team di sviluppo: marketing, grafica e sviluppo devono farsi capire l’’uno con l’’altro e avere ben chiari gli obiettivi. Sembra facile, ma no lo è.

Topic: , , ,

Send this to a friend