Anche per quanto riguarda la grafica, esistono molti strumenti e risorse
che la rete e il mercato mettono a disposizione. Per creare la UI è
necessario utilizzare un software di editing grafico orientato alla produzione di
grafica web. Alcuni software grafici sono infatti pensati per la
stampa/impaginazione, altri per l’illustrazione o il photo editing, e quindi
non sono adatti per creare il visual di un sito.
In generale, la creazione dell’interfaccia richiede strumenti semplici
come forme, caratteri, colori, effetti basici, griglie, guide, strumenti di
misurazione, trasformazione, ritaglio e poco altro. Strumenti di disegno e
librerie di componenti possono tornare utili in molti casi, così come le
maschere, per creare composizioni grafiche per il web (banner, icone, ecc…).
Per illustrazioni e composizioni grafiche complesse, invece, sono necessari
software che mettono a disposizione un maggior numero di strumenti ed
effetti.
Purtroppo, una caratteristica dei programmi grafici è la loro complessità,
e la conseguente difficoltà di utilizzo per i non addetti ai lavori.
La curva di apprendimento in genere non è molto ripida, perciò nella fase iniziale l'apprendimento andrà un po' a rilento. Tuttavia, una volta
ottenuta la padronanza di un programma grafico, il passaggio a software alternativi è piuttosto rapido.
Oltre al software vero e proprio, che è lo strumento imprescindibile per
creare l’interfaccia, esistono sul web una miriade di asset grafici e risorse che possono essere scaricate,
gratuitamente o a pagamento. Si tratta di font, palette di colori,
pattern, texture, icone, elementi grafici che si possono usare nei
progetti.
In questa lezione vedremo gli strumenti essenziali per fare web
interface design.
Wireframes
Per quanto non necessari “fisicamente” per creare il visual del sito,
i wireframes costituiscono il punto di partenza ideale per creare
l’interfaccia, il manichino su cui disegnare il vestito. I wireframes, definendo
struttura e contenuti,
danno la possibilità di approcciare al design dell’interfaccia
concentrandosi unicamente sulla presentazione dei contenuti e sullo
stile comunicativo. Possiamo considerare infatti i mockups come l’evoluzione dei wireframes
che introduce la grafica aumentando il grado di fedeltà degli artefatti e
costituisce uno step avanti verso il prodotto finale.
Software di editing grafico
Se è vero che negli anni sono nati diversi software per fare grafica, c’è da
dire quando si tratta di programmi di
grafica per il web le alternative valide non sono poi così tante.
Dato che la manipolazione della grafica è complessa e richiede diverse
risorse, la differenza tra tool a pagamento e free è notevole. Proprio
per questa complessità, anche a livello implementativo, l’offerta di
programmi grafici (soprattutto free) è ridotta rispetto a quella di altre
tipologie di software.
Anche in questo caso la scelta è molto personale, ma le tre
alternative software che proponiamo di seguito hanno tutte caratteristiche complementari, che le rendono
nettamente diverse dalle altre, ed adatte solo ad un certo
tipo di pubblico.
Anche se alcuni software Adobe come Illustrator ed Indesign possono essere
utilizzati anche per creare interfacce, nel seguito proponiamo quelli più adatti per il web.
Photoshop
Adobe Photoshop è forse il software dei grafici per eccellenza. Permette di lavorare con la grafica raster o bitmap, consentendo di creare composizioni complesse, lavorando a
livello di pixel con foto, immagini ed oggetti raster o vettoriali
importati (Smart Object).
È il
capostipite di tutti i software di editing grafico a livello di
interfaccia e strumenti; da Photoshop sono nati i livelli, le selezioni, le maschere, i gruppi e
tutti i tools che oggi riteniamo “standard” in ogni programma di grafica.
Consente di fare praticamente tutto e per diversi media, per certi versi
può risultare anche “troppo” se usato solo per la creazione di interfacce
web. Richiede un buon investimento di tempo per essere utilizzato
sfruttando tutto ciò che mette a disposizione.
Sicuramente è il software più potente ed affidabile, ma anche il
più costoso. Il suo unico “limite” è che ha una gestione raster della grafica e non vettoriale. Per questo
e per via delle sue numerose e potenti caratteristiche, è anche un
programma pesante che utilizza molte risorse della macchina
su cui gira. Un tempo venduto come programma desktop per Mac e Windows, è
ora disponibile in versione CC (Creative Cloud Adobe).
Sketch
Sketch è un programma di grafica nato nel 2010. Lo scopo del tool è proprio
quello di abilitare alla
creazione di grafica per il web, in particolare di interfacce per
diversi dispositivi
.
Mette e disposizione una serie di strumenti per la progettazione responsive
come artboards ed elementi legati a piattaforme mobile come iOS ed Android.
La sua caratteristica principale, che lo pone in contrapposizione netta con
Photoshop, è di avere una gestione vettoriale della grafica. Tutti gli oggetti, ad
esempio forme e font, sono creati direttamente in vettoriale e non come
immagini raster, e per questo sono scalabili e non perdono qualità.
Per via della gestione completamente vettoriale,
il software risulta performante e molto leggero, così come i file da esso
prodotti.
Come tutti i software grafici, interfaccia e strumenti riprendono quelli
presenti in Photoshop, e nel complesso risulta più facile da usare, per via anche del numero ridotto di
feature.
Permette di creare e gestire perfettamente interfacce web, ma non permette
di lavorare con immagini raster. Di conseguenza, non è adatto a fotoritocco, effetti e creazione di composizioni grafiche
complesse.
Le sue caratteristiche più utili sono un canvas infinito con artboards e pagine multipli, i simboli
e gli
stili condivisi che permettono di creare elementi e stili riusabili. Le Libraries permettono all'interno del file Sketch di collegare un altro documento Sketch come "Libreria" di simboli. Le Libraries sono particolarmente utili per utilizzare UI kit e Design system all'interno del proprio file.
Il suo prezzo è molto abbordabile, al momento solo 99 dollari all’anno, ma esiste unicamente per Mac, e questo esclude già a priori
una fetta di mercato.
Gravit
Gravit è un software di recente produzione, disponibile unicamente online e quindi per tutte le
piattaforme (anche se non ottimizzato per mobile). Usato principalmente per
illustrazioni, permette anche di realizzare interfacce e design vettoriali.
È un po’ instabile, ma viene spesso aggiornato. Trattandosi di una web application,
risulta comodo per via della facile accessibilità, ma
d’altro canto proprio questa caratteristica può creare problemi nel caso non si abbia una connessione disponibile.
Come Sketch,
gli strumenti per la lavorazione di immagini bitmap sono limitati
mentre ha molti buoni strumenti per la grafica vettoriale. Anche Gravit gestisce il canvas infinito, ma diversamente da Sketch non ha
caratteristiche come i simboli o le multi-pagine, che sono molto utili per
il design dell'interfaccia e il riutilizzo dei componenti.
Può essere considerato un’alternativa ad Illustrator o a Fireworks,
piuttosto che a Photoshop.
È un prodotto ancora giovane e non al livello dei due competitor, ma che ha il vantaggio di essere totalmente gratuito e multipiattaforma.