Nel web design le dimensioni contano

Martina Toldo -

web design

Cosa comporta la grande varietà di dispositivi nella progettazione di un sito web

Pc, computer fissi, tablet, smartphone e chi più ne ha più ne metta! I device connessi alle rete sono il presente e saranno il futuro: ecco perché, per chi ha un’attività, è sempre più importante essere presente online e perché l’esigenza di avere un sito web è sempre più alta. Ma se da una lato, per il nostro cliente, questa diffusione è un vantaggio, per noi web designer è un cosa in più di cui tener conto in fase di progettazione.

Quali sono le problematiche che derivano dalla diffusione di una grande varietà di device? Su quali aspetti influiscono?

Possiamo suddividere la fase di istruzione del cliente in due parti: una prima parte puramente comunicativa in cui spiegheremo quali sono, dal punto di vista tecnico, i limiti e i vantaggi della tecnologia attuale e solo in un secondo momento procederemo con la fase di richiesta, in cui comunicheremo quali sono le informazioni e i file di cui abbiamo bisogno (e perché) per cominciare a lavorare.
È importante non scendere troppo nel dettaglio ed esprimersi con termini semplici che tutti possano comprendere e fare sempre un esempio concreto per rafforzare il concetto espresso.
In questo articolo parleremo solo della parte puramente comunicativa (per la seconda parte continuate a seguire la rubrica!).

Alcune cose noi le diamo per scontate, ma fidatevi che per chi non è del mestiere non lo sono!
Vediamo, partendo dalle osservazioni ricorrenti dei clienti, come poterle anticipare:

Sul mio computer i colori sono brutti, non è lo stesso colore che vedo da te!

MTPill n°1
Ogni monitor è diverso e legge i colori in modo diverso.
Meglio essere onesti da subito: non è una cosa controllabile.

È bene spiegare che quello che il progettista può fare per evitare risultati indesiderati è visualizzare il sito sui device più in uso ed evitare di utilizzare i colori che risultano più alterabili per garantire alla maggior parte degli utenti una vista ottimizzata e sempre leggibile, ma nulla più.

Esempio pratico: il grigio, nelle sue tonalità più chiare, è un colore rischioso: su alcuni device viene visualizzato quasi bianco. Non vuol dire che non si possa usare, ma è consigliabile affiancarvici un colore diverso dal bianco (se lo si usa per delimitare una zona, per esempio) o delle scritte abbastanza contrastanti (se lo si usa come sfondo) e così via.

Ma perché sullo smartphone sparisce il menù?

MTPill n°2
I siti, oggigiorno, devono essere responsive. Cosa vuol dire? Vuol dire che devono essere pensati per poter funzionare su tutti i tipi di device, per adattarsi alla dimensione dello schermo su cui vengono visualizzati. Questo comporta un’attenta progettazione dell’architettura del sito (l’organizzazione dei collegamenti tra le pagine) e un’attenzione ulteriore all’organizzazione del contenuto.

Esempio pratico: qui sono riportate due immagini che ti mostrano come viene visualizzato lo stesso sito su un pc e su uno smartphone. Su pc il menù principale è disposto in orizzontale, quindi le voci devono essere limitate; su smartphone, invece, potrei ipotizzarne molte di più visto che vengono visualizzate in elenco. Bisogna trovare il giusto compromesso.

web design

Non mi piace questo carattere, e poi…tutto nero è triste!

MTPill n°3
La percezione dei caratteri a monitor/schermo è diversa da quella su carta. Sono stati fatti diversi studi su quali siano le font e i colori più indicati da utilizzare per ottimizzare la leggibilità su schermo, quindi di solito la scelta è più funzionale che estetica. Inoltre alcune font sono private e non funzionano su tutti i dispositivi, ma solo su quelli predisposti o su cui sono state installate.
Per la personalizzazione del sito è molto meglio puntare su immagini e icone!

Esempio pratico: più il testo è lungo e più la leggibilità dello stesso è importante. Per i testi lunghi si tende sempre a utilizzare un carattere non graziato e un colore scuro su fondo chiaro (in questo modo l’occhio si stanca meno). Ci si può permettere un po’ più di creatività sui titoli.

Le cose da dire sono moltissime, ma come anticipato non dobbiamo insegnare ai nostri clienti a fare il nostro lavoro, dobbiamo semplicemente trasferirgli le informazioni di base per prepararli a quello che sarà il risultato della loro commissione.

Leggi il prossimo articolo per sapere, invece, cosa chiedere al cliente e come per poter cominciare a lavorare!

A presto 🙂


Segui la Rubrica: “Design: come spiegarlo al tuo cliente”

Prevenire è meglio che curare


MT__Banner_telegram

Industrial Designer – Sinesy
Ho scelto di diventare designer perchè è il lavoro che coniuga la mia razionalità da ingegnere e la mia creatività da artista. In Sinesy passo le giornate a scarabocchiare il mio sketchbook per poi trasferire le mie idee in digitale e contribuire a rendere tutto più bello e funzionale.