L’importanza dell’impaginazione nella realizzazione siti web

Nel laborioso processo di realizzazione siti web uno dei passaggi fondamentali riguarda l’impaginazione, e in questo articolo voglio riportare in maniera riassuntiva alcuni punti trattati nel fantastico libro “Designing for the web” di Mark Boulton sull'argomento.

 

Nel momento in cui si inizia a pensare al layout di un sito internet bisogna tenere presente molti fattori, come l’architettura delle informazioni che andranno inglobate, l’esperienza dell’utente e l’usabilità, ma anche le scelte tipografiche, lo schema dei colori e i vari elementi grafici che dovranno essere inclusi (come logo principale, altri marchi, grafiche che caratterizzano l’identità dell’azienda, etc.).

Oltre a tutti questi elementi ce ne sono altri legati alla differenza tra i vari browser, alle dimensioni degli schermi e alle risoluzioni più utilizzate fino a considerazioni legate all’aspetto mobile, nel caso in cui ad esempio ci siano molti contenuti flash che come si sa non vengono visualizzati in dispositivi come iPhone e iPad e non sono ancora del tutto ottimizzati anche per quei dispositivi che ne permettono invece la visualizzazione.

Andando ancora oltre possono intervenire ulteriori scelte legate ad aspetti più tecnici, ad esempio decidere se usare html4 o già imbattersi in html5? Sfruttare fin da subito le potenzialità dei css3? Integrare effetti con Javascript o Jquery?

 

Unire in maniera armonica tutti questi elementi può sembrare problematico, per questo credo che l’approccio migliore sia sempre partire dalle basi. Quando le basi sono solide e soddisfacenti si possono poi a mano a mano integrare gli altri pezzi per rendere il prodotto finale sempre più accattivante e funzionale.

 

Concetto basilare per la composizione nella creazione di siti internet: la regola dei terzi

Partiamo con una semplice definizione:

La regola dei terzi è un accorgimento che è stato utilizzato per secoli dai pittori ed è tuttora molto diffuso nella composizione di una fotografia. Dividendo l'immagine in terzi e ponendo il soggetto in uno dei punti di intersezione delle linee immaginarie ottenute, si ritiene che l’immagine risulti più dinamica (rispetto ad una composizione che pone il soggetto al suo centro), ma armonica al tempo stesso.(wikepdia.org)

E’ un concetto apparentemente semplicissimo e molto facile da mettere in pratica una volta capito, ma che può cambiare l’atmosfera di una scena in maniera radicale. L’errore più comune infatti che i fotografi amatoriali commettono è quello di mettere al centro della foto il soggetto per valorizzarlo, ottenendo invece l’effetto contrario. Un esempio semplice si può fare con i paesaggi, dove verrebbe “naturale” posizionare l’orizzonte nel mezzo della foto. Se invece di nuovo seguiamo la regola dei terzi e posizioniamo l’orizzonte a due terzi dell’altezza della foto in modo da avere due terzi di cielo e un terzo di terra (o viceversa) vedremo subito come la scena fotografata acquisti interesse e dinamismo.

 

Tornando al web design e al layout questa regola ci fornisce un’ottimo punto di partenza per iniziare a disporre i vari elementi che costituiscono il sito internet. Una volta scelta la risoluzione adatta al progetto infatti possiamo iniziare a produrre una griglia che divide lo schermo in nove rettangoli o quadrati e posizionare gli elementi più importanti in prossimità delle intersezioni tra le varie linee di questa griglia.

Dobbiamo ovviamente considerare che il web non ha uno spazio verticale definito, la lunghezza della pagina può infatti cambiare notevolmente da una sezione all’altra, mentre l’unico dato che rimane costante è la larghezza. Ma come dicevo prima l’idea di partire dalle basi è un modo per razionalizzare il più possibile un processo che altrimenti rischierebbe di perdersi tra mille sfaccettature. L’impaginazione di un sito web è nel suo piccolo una forma d’arte e come tale può sicuramente trarre vantaggio dall’associazione con regole e principi matematici, ma non deve allo stesso tempo finire per venire totalmente ingabbiata, specialemente su un sito dove la flessibilità è uno dei fattori vincenti in progetti ricchi di contenuti per i navigatori.

 

L’utilizzo del triangolo in composizione e posa

Un’altro concetto molto usato in pittura e fotografia è il triangolo. Basti pensare alla famosa Gioconda di Leonardo da Vinci la cui figura è elegantemente racchiusa in un triangolo immaginario e messa di fronte ad uno sfondo in lontananza. Triangolo che si vede moltissimo anche nelle pose fotografiche, dalla postura delle gambe, al piegamento delle braccia, fino a pose più dinamiche che interagiscono con capi di vestiario od oggetti esterni.

 

Triangolo che può trovare posto anche nelle pagine web, per rendere naturale il movimento degli occhi di chi naviga la pagina ed attirarlo verso gli elementi che si vogliono valorizzare. Non deve essere una forzatura, o un qualcosa da usare a priori, anzi di solito è una conseguenza naturale di un layout ben congeniato, dove ad esempio si conduce l’utente dal logo aziendale solitamente posizionato in alto a sinistra verso un’altro elemento importante situato sulla barra a destra magari evidenziato da un colore, da una forma o da un elemento grafico per poi ricondurlo verso il corpo del sito che va in maniera naturale a costituire il terzo vertice di questo triangolo ipotetico.

 

Gli spazi bianchi nel layout dei siti web

Una pagina web ricca di contenuti è composta da una moltitudine di immagini, testi, blocchi, pubblicità, loghi, menù, video. Layout, posizionamento e colori sicuramente giocano un ruolo fondamentale nel definire quali dei suddetti elementi verranno messi in maggior evidenza per il cliente che naviga il sito, ma c’è anche un altro aspetto che gioca un ruolo primario in tal senso e che molto spesso le web agency non prendono con la dovuta attenzione, ovvero gli spazi bianchi.

Gli spazi bianchi altro non sono che gli spazi vuoti che separano i vari elementi (in questo caso si parla di macro spazi bianchi) o gli spazi che troviamo negli elementi stessi, e in questo caso si parla di micro spazi bianchi.

 

Tra i macro spazi bianchi troviamo di solito quelli che separano le colonne di un sito con layout multicolonna, o ancora che separano il menù dal corpo del sito. Se questi sono troppo ridotti si rischia di non valorizzare in maniera chiara le parti che compongono la pagina a discapito dell’usabilità, se sono troppo esagerati si rischia di rovinare l’eleganza della pagina e la sua leggibilità.

Più delicato il discorso per quanto riguarda i micro spazi bianchi, specialmente in relazione alla tipografia generale del sito internet. Premetto che sono un amante dei siti web ricchi di contenuto, perchè sono convinto che siano i siti che avranno sempre più successo negli anni a venire. La gente che naviga su internet è affamata di informazione, è bramosa di approfondire la propria conoscenza su una determinata marca o prodotto, non si accontenta di poche righe pubblicitarie, spesso ricerca le informazioni attingendo da varie fonti proprio per ampliare quella che è la coscienza dell’argomento ricercato. Ovviamente i contenuti devono essere interessanti e ben scritti, devono soddisfare ogni esigenza o domanda di chi li ha ricercati, ma soprattutto per prima cosa devono essere facilmente leggibili, e con facilmente leggibili intendo che non devono stancare e appesantire l’occhio.

Per ottenere questa piacevolezza di lettura ecco che entrano in gioco questi micro spazi bianchi, ovvero la scelta del font, la grandezza di titoli e sottotitoli rispetto al font del corpo dell’articolo, la distanza tra le righe, la distanza tra le lettere, il colore di ogni elemento. Rendere armoniosa l’unione e la presentazione di questi elementi porta sicuramente ad una leggibilità del sito web molto elevata, trascurare questi aspetti invece porta facilmente all’effetto opposto.

 

Questa è solo una parte di uno dei processi da seguire nella realizzazione di siti web, ovviamente il discorso è ben più ampio, ed è uno dei motivi che mi spinge a pensare e ripetere che il futuro delle web agency non sarà limitato alla creazione dei siti internet, ma diventerà sempre di più un connubbio, una sorta di partnership continuativa, con l’azienda che ha richiesto il sito. Questo perchè la web agency dovrà ripetutamente ottimizzare e migliorare il layout del sito, lavorare costantemente per la sua promozione sui motori di ricerca, intervenire sulla visualizzazione dei contenuti, sull’inserimento di quelli nuovi, in maniera da mantenere integra l’impostazione data e valorizzare il sito stesso al meglio come strumento di marketing aziendale.