Dalla carta al pixel: come cambia il modo di lavorare di un designer

by • 12 gennaio 2015 • Design, Focus, Risorse, Strumenti, Web designComments (0)2866

Al termine del 2010 ho avuto il piacere di scambiare qualche email con il designer e grafico Massimo Vignelli, scomparso nel maggio del 2014. In quel periodo mi occupavo solo di Web Design e scrissi a Vignelli affascinato dagli straordinari lavori realizzati lungo tutta la sua carriera. Non mi aspettavo una sua risposta, che invece arrivò qualche giorno dopo. Da visionario e intelligente qual è stato per tutta la sua carriera, Vignelli mi disse che il futuro risiede nella grafica digitale e che noi giovani progettisti dovevamo fare tesoro del bagaglio culturale appartenente alla grafica del passato.

L’errore in cui spesso inciampano i giovani, avvicinandosi a questa professione, è nel pensare di poter far a meno del web design. Per smentire questa idea basta dare uno sguardo ad alcune proposte di lavoro. Le maggiori offerte (a livello nazionale, ma soprattutto internazionale) sono rivolte a figure in grado di realizzare interfacce per il web o applicazioni per smartphone, tablet e addirittura smart tv.

Se invece si è interessati a intraprendere la carriera da freelance, bisogna essere coscienti che spesso un cliente chiederà tra le vostre competenze la realizzazione di un sito web.

Mi sono accorto come sia spesso difficile, per un grafico abituato a realizzare artefatti stampati, iniziare a lavorare col digitale. Diversamente, chi inizia lavorando con il digitale spesso è più portato alla grafica stampata. Una cosa è però resta certa, lavorare con il web e scrivere il codice base (HTML e CSS) abitua la mente a ragionare velocemente e a trovare rapidamente più soluzioni ad un singolo problema.

Di seguito ho voluto riassumere diciotto regole e consigli fondamentali, che possano aiutare i progettisti grafici, abituati a lavorare con la stampa, ad avvicinarsi alla progettazione di un sito web.

1. Logiche diverse.

La grafica digitale, rispetto alla stampata, richiede approcci e logiche diverse. Per tanto tempo si è detto che la grafica non debba seguire mode e trend, ma nel digitale la situazione è ben diversa. Il Web è senza dubbio influenzato dalle mode, basti pensare come si siano diffuse in poco tempo le interfacce di tipo Flat o recentemente il cosiddetto Material Design. Ogni anno numerosi magazine dedicano articoli sui trend che influenzeranno la progettazione d’interfacce nei mesi che seguenti. Rimanere fermi, senza informarsi e aggiornarsi, significa rischiare di progettare

2. Usabilità

In realtà il concetto di usabilità in ambito del design è sempre esistito. Con il digitale, dove vi è una maggiore interazione tra utente e sistema, l’usabilità diventa un concetto fondamentale. Ogni anno i siti delle grandi aziende e multinazionali investono tempo e soldi nei test d’usabilità. Spesso un singolo errore, in tale ambito, può causare la perdita di consistenti somme di denaro.

Il primo step per poter migliorare l’usabilità consiste nel conoscere il mezzo o il dispositivo su cui si andrà a progettare, sfruttando la nostra esperienza come utente per migliorare il prodotto. Questo assume una maggiore importanza nella realizzazione di applicazioni per tablet o smartphone dove i sistemi Android, IOS e Windows Phone hanno logiche diverse tra loro e pertanto abituano l’utente a prendere determinate decisione nell’utilizzo dell’applicativo.

3. Imparare

John Maeda nel suo libro intitolato Le leggi della semplicità, pone molta attenzione sull’imparare. La conoscenza ci aiuta soprattutto nella prime fasi di progettazione, senza di essa non si può progettare, ciò vale sia per la grafica stampata che per il digitale. Per questo motivo il progettista deve impiegare parte del suo tempo a visionare il lavoro altrui. Esistono numerosi siti che selezionano giornalmente i siti Web migliori, tra questi vi sono: Css Mania, Onepage Love o Design Inspiration; inoltre esistono social per creativi come Behance o Pinterest. Osservare significa anche imparare e abituare l’occhio a ciò che è bello, ma soprattutto funzionale.

4. Le griglie

Nel web le griglie non sono un optional, come per l’impaginazione di un libro esse risultando fondamentali per posizionare in maniera corretta gli elementi. Per il progettista Web, il loro impiego dovrebbe essere quasi un obbligo, ignorarne l’utilizzo comporta ad ottenere elementi posizionati in modo casuale e caotico. Ho discusso ampiamente sull’argomento in un mio precedente articolo intitolato L’utilizzo delle griglie in Graphic e Web design.

5. Convenzioni e novità

Il web è caratterizzato dalle convenzioni derivanti dal suo predecessore, il giornale. È chiaro che le informazioni dovranno essere organizzate secondo una chiara gerarchia. Il titolo, ad esempio, dovrà essere più grande del testo (anche il doppio). Esso può essere seguito da uno o più sottotitoli, i quali avranno dimensioni più ridotte dei titoli, ma maggiore dei paragrafi che lo seguono.

Alle principali convezioni si aggiungono tutte quelle novità portate dall’HTML5. A differenza del giornale stampato, che risulta statico, oggi il Web può contare sull’inserimento di contenuti multimediali, come ad esempio tracce audio, video o immagini gif, che permettono di creare una maggiore dinamismo e interattività.

6. Tipografia

La tipografia in ambito web diventa un elemento fondamentale, bisogna scegliere con cura le font adatte al nostro lavoro. Per inserire una font all’interno della pagina Web ci vengono in aiuto servizi gratuiti come Google Web Font o a pagamento come il servizio offerto da Typekit dell’Adobe, che con un abbonamento mensile ci permette di accedere ad un’ampia libreria di caratteri di alta qualità. Se invece vogliamo caricare una font, scaricata gratuitamente da siti come Fontsquirrel, useremo l’istruzione CSS3 denominata font face.

Bisognerebbe evitare i caratteri di tipo script per il testo e il progettista dovrebbe calibrare la scelta tra l’utilizzo di caratteri serif e sans-serif in base alla quantità di testo presente nella pagina e alla tipologia del sito. Immaginate di dover leggere un lungo testo sul monitor composto con un carattere geometrico come il Futura, l’utente si stancherà e abbandonerà probabilmente la lettura.

Fate attenzione nell’utilizzare font non appositamente pensate per il digitale. Online ci sono servizi come quello offerto da FontSquirrel, che permettono di convertire una font nei vari formati Web, in modo da poterla utilizzare all’interno delle nostre pagine. Nella maggior parte dei casi è errato pensare che una font progettata per funzionare nella stampa possa essere impiegata anche in ambito digitale. Numerose font celebri, infatti, sono state appositamente ridisegnate per essere riutilizzate nel web e risultare maggiormente leggibili a schermo. Altri caratteri invece sono stati creati appositamente per essere utilizzati nel digitale, come ad esempio il Roboto di Google o il SanFrancisco di Apple, entrambe disponibili gratuitamente online.

L’interlinea, la distanza che intercorre tra due o più righe di testo, influisce sulla leggibilità di esso. Se in grafica è buona norma mettere un interlinea di due o tre punti in più rispetto al corpo del carattere, sul web si tende a mettere quattro o cinque pixel/punti in più, di modo che il testo risulti maggiormente leggibile.

Altra regola riguarda la lunghezza delle righe testuali. Come accade in stampa, anche nel web i testi con righe troppo lunghe risultano difficoltosi da leggere, l’occhio tenderà quindi a stancarsi facilmente. In questo caso l’impiego di un sistema di griglie potrebbe aiutare il progettista a creare una maggiore armonia tra i testi e le immagini. Se ad esempio disponiamo di nove colonne, si potrebbero utilizzare le prime quattro per il posizionamento laterale delle immagini o dei titoli e le cinque restanti per il testo.

7. Rendere ovvio ciò che è cliccabile

Bisogna fare molta attenzione nel colorare o sottolineare le parole di un testo con il semplice scopo di evidenziarle, questo perché l’utente tenderà a cliccarci pensando che siano dei link. Quindi bisogna rendere chiaro e visibile ciò che è cliccabile, senza confondere l’utente.

8. Le immagini

Non utilizzare fondi che possano compromettere la leggibilità del testo o che vadano in conflitto con le altre immagini utilizzate nella pagina. Tutte le immagini devono essere salvate in RGB e non superare, di norma, gli 800 kb.

Per quanto riguarda gli schermi retina, bisogna tener conto che le immagini, per essere visualizzate in maniera nitida, devono essere inserite nella pagina web a una dimensione dimezzata rispetto alla loro grandezza di default. Se ad esempio abbiamo un immagine di 900×900px bisognerà ridimensionarla mediante CSS ad una dimensione di 450x450px. Ciò comporta un aumento del peso delle immagini che influirà sul caricamento della pagina. Ad oggi non si è ancora trovata una valida soluzione a questo problema, esistono però alcuni plugin in jQuery che permettono di caricare la stessa immagine con risoluzione diversa, il plugin riconoscerà il tipo di schermo e caricherà l’immagine più idonea. Per fortuna il W3C è già a lavoro nel implementare in futuro una funzione adatta ai retina display.

9. Conoscere l’HTML e il CSS

Ci sono due scuole di pensiero al riguardo, chi sostiene che il web designer non debba conoscere il codice e chi invece sì. Personalmente penso che una conoscenza minima del HTML e CSS sia obbligatoria, in quanto si progetta con maggiore sicurezza un interfaccia e si è coscienti di ciò che si sviluppa. Il codice non deve diventare un ostacolo alla creatività, per questo motivo bisognerebbe prima disegnare l’interfaccia con appositi software grafici, per poi iniziare con pazienza a scrivere il codice in HTML e CSS. Se si è agli inizi, si possono commettere molti errori nello scrivere il codice e questo può causare una confusione nel codice, in quanto tenterà di sopperire agli errori del progettista causando ulteriori errori. In questo caso è buona norma cancellare tutto il codice che si è scritto e ricominciare da capo, così facendo si tenderà a non ricommettere gli stessi errori, migliorando la compilazione dell’HTML e del CSS.

10. Il Javascript non è un nemico

Il Javascript è un linguaggio di programmazione che si occupa del comportamento della pagina Web. La sua compilazione oggi è stata facilitata dalla realizzazione di librerie apposite, come il jQuery. Un grafico non dovrebbe conoscere questo linguaggio, ma solo implementare i plugin scritti mediante ad esso. Molti studenti vedono l’implementazione dei plugin Javascript come un ostacolo. Bisogna prendere l’abitudine e il “coraggio” di implementare i plugin Javascript consultando i siti produttori, i quali spesso mettono a disposizione tutorial dettagliati su come integrare il codice nelle pagine Web. Spesso un plugin è accompagnato da un file CSS che si occupa del suo stile, ciò significa che il progettista potrà modificare a suo piacimento l’aspetto di esso, senza soffermarsi sullo stile di default creato dal suo produttore.

11. Tools

Esistono numerosi tools per i browser che aiutano il progettista nel visionare il codice e individuare facilmente gli errori che si sono commessi nello scriverlo, uno dei più usati è Firebug, un estensione di Firefox gratuitamente scaricabile online. Con Firebug potremmo individuare facilmente le parti di codice che compongono le nostre pagine e capire se si sono lasciati per errore tag HTML aperti.

12. Il web non ha dimensioni

Chi lavora con la grafica stampata è abituato a utilizzare formati prestabiliti, statici. Il web non ha formati, solitamente si può fissare una dimensione massima con istruzioni, come max-width in CSS, ma la dimensione varia in base al tipo di sito che si deve realizzare. Ciò significa che il progettista, nel disegnare l’interfaccia, deve tener conto di come essa sarà visualizzata sulle altre risoluzioni.

13. Il marchio deve essere cliccabile

Il marchio, che caratterizza l’identità di un individuo o un azienda, in un sito Web, deve essere posizionato solitamente nella parte in alto a sinistra della pagina. Esso deve poter essere sempre cliccabile e rimandare alla home page. In questo modo faciliteremo l’utente nel tornare rapidamente nella pagina principale del nostro sito.

14. Il tag title non è un optional

Mi è capitato spesso di vedere, in alcune pagine, l’assenza del tag HTML title, che viene posizionato sempre all’interno del tag principale Head. Il testo che viene messo in title viene visualizzato all’interno del tab del browser e aiuta l’utente a sfogliare e consultare le varie schede che egli ha aperto. Ma esso è importante anche nell’individuazione del sito da parte dei motori di ricerca, che utilizzeranno il testo presente in title per titolare il nostro sito nell’elenco delle ricerche.

15. La navigazione deve essere onnipresente

Altro errore comune è non riportare la navigazione in tutte le pagine del sito web, ma solo nella Home. In questo modo l’utente per spostarsi da una pagina all’altra sarà obbligato a tornare nella Home, cliccando il marchio. Il menù quindi dovrà essere presente in tutte le nostre pagine per facilitare la navigazione del nostro sito.

16. Rendere chiaro lo scroll soprattuto nei Onepage

Molti siti Onepage (che si sviluppano in unica pagina) utilizzano immagini a tutto schermo nella parte iniziale. Spesso questi siti, all’inizio, presentano una navigazione nascosta che diventa visibile allo scroll della pagina. Non tutti gli utenti però tendono a scrollare, per questo motivo bisogna in qualche modo suggerirglielo. Si può ad esempio mettere un link con una freccia che punta in basso, che al click scrollerà la pagina fino alla sezione successiva, lasciando poi posto alla comparsa della navigazione. Un altro metodo efficace è quello di rinunciare all’immagine a tutta pagina e rendere visibile parte della sezione che segue quella iniziale. Quest’ultimo metodo riuscirà a catturare l’attenzione dell’utente che per visualizzare la parte sottostante sarà costretto a scrollare.

17. Framework

I framework raccolgono una serie d’istruzioni che facilitano e velocizzano un progettista (grafico o developer) nel realizzare un progetto. Nel Web Design esistono molti framework utili per l’utilizzo delle griglie come ad esempio Bootstrap o Foundation. Inserendo delle class ai nostri tag creeremo rapidamente una griglia responsive. A volte questi framework potrebbero limitarci, soprattuto nella realizzazione di siti molto grandi che richiedono una maggiore personalizzazione, in questo caso il progettista tenderà a crearsene uno, in HTML e CSS, che si adatti ad un determinato utilizzo.

18. Software

Si è liberi di scegliere qualsiasi software si ritenga più opportuno. Quando iniziai a lavorare in questo ambito i software più utilizzati, nella realizzazione d’interfacce Web, erano Photoshop e Illustrator. Oggi sono nati molti software appositi come Macaw, Sketch 3Adobe Muse. Tra questi uno dei più diffusi è Sketch 3 per Mac Os X. Sketch 3 costa circa 89 euro e risulta più intuitivo rispetto a Photoshop o Illustrator. Contiene già tutti gli strumenti necessari per realizzare qualsiasi interfaccia web o per applicazioni. Inoltre attorno a questo software è nata una vera e propria comunità, composta da designer e sviluppatori, che ha permesso di realizzare appositi plugin che ampliano e migliorano le sue funzioni.

 

Workplace, notebook and tablet with coffee

 

[ ph © Rostislav Sedlacek – Fotolia ]

Pin It

Related Posts

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *