Progettare interfacce con Sketch
Diventando un designer più efficiente.
I tempi cambiano, la tecnologia pure. I software che abbiamo a disposizione seguono la stessa logica e si adattano a seconda delle esigenze progettuali del momento. Realizzata per venire incontro ai designer che costruiscono interfacce per web e mobile su piattaforma Mac, Sketch vi offrirà un ambiente di lavoro più semplice e immediato. Tale concetto di semplicità oltre a ridefinire il canone progettuale a cui altri software ci hanno abituato, ha fatto si che nel 2012 Sketch vincesse il premio Apple per il miglior design. Oggi voglio mostrarvi alcuni dei punti di forza di Sketch.
Un documento, layout illimitati.
Costruire layout differenti per singolo progetto non è mai stato cosi semplice. Sketch introduce il concetto di canvas infinito: avete capito bene, l’area di lavoro in pratica non ha limiti. Avrete a disposizione uno spazio virtualmente illimitato su cui progettare senza preoccuparvi dello spazio sul disco occupato dal documento, Sketch infatti è un programma interamente vettoriale e nella maggior parte dei progetti il peso del vostro documento sarà molto ridotto.
Sketch vi offre la possibilità di organizzare il vostro progetto in pagine separate su ognuna delle quali è possibile inserire una o più artboard per gestire più varianti dello stesso layout in un’unica vista. Questa cosa torna davvero molto utile nel caso di layout responsive o app pensate per esempio sia per iPhone che per iPad. Inoltre Sketch dispone di un set di artboard predefinite, con le dimensioni dei dispositivi più diffusi.
Disegno Vettoriale
Sketch possiede gli strumenti per disegno vettoriale di base come qualsiasi altro software esistente, pure la penna ☺. Quello che fa la differenza è la semplicità con cui è possibile gestire le proprietà relative a quanto creato. Infatti vi basta selezionare un oggetto per vederne apparire le proprietà sulla barra laterale. Sketch dispone di numerosi effetti tra cui ombre esterne e interne, filtri di sfocatura e riflessione come anche riempimenti avanzati, bordi e pattern di ogni tipo.
Gran parte di questi effetti può essere applicata più volte sullo stesso oggetto, senza la necessità di duplicarlo. Volete un’icona con due tipi di riempimento gradiente all’interno? Detto fatto.
Una cosa che trovo molto comoda su Sketch è la capacità di tenere sotto controllo ogni elemento del layout attraverso i campi di testo presenti nella barra laterale. Il più delle volte infatti non è necessario posizionare perfettamente un elemento nel canvas manualmente, vi basta modificare il valore numerico della proprietà corrispondente nella barra laterale fino alla cifra desiderata. I campi di testo di Sketch supportano le operazioni matematiche, inoltre quando vengono selezionati attivano sulla destra un comodo selettore per effettuare incrementi di un 1 px o pt. (Shift + Click sul selettore per incrementi di 10).
Precisione al Pixel
Questa è una delle cose che personalmente mi ha spinto ad utilizzare Sketch. Vi basta selezionare un oggetto, tenere premuto il tasto alt e posizionare il cursore su un altro oggetto senza cliccare. Magia! Sul canvas appariranno delle guide intelligenti capaci di misurare la distanza tra i due oggetti. Se è presente un artboard premendo il tasto alt otterete la posizione dell’oggetto relativa a quest’ultima.
Pur adottando una logica vettoriale Sketch terrà in considerazione la griglia pixel per ottenere risultati perfetti e mettere al bando i pixel sfocati. Non a caso è disponibile una funzione per l’arrotondamento della posizione dei punti vettoriali rispetto alla griglia pixel (con arrotondamenti di 0,5 o 1 px) e la possibilità di visualizzare un anteprima raster del canvas.
Griglia e Layout
Da questo momento non avrete più l’esigenza di scaricare ulteriori documenti o templates per organizzare i contenuti del vostro progetto con una griglia. Sketch ha una pratica funzione che ne permette l’inserimento sfruttando due diverse tipologie di griglia: a blocchi o a colonne verticali (con la possibilità di aggiungere a quest’ultima anche la variante a righe orizzontali), entrambe sono totalmente customizzabili. Gli elementi del canvas potranno essere allineati alla griglia tramite una comoda funzione di aggancio calamitato.
Esportazione degli Assets e CSS
Ok, avete disegnato l’app più rivoluzionaria dell’anno e adesso dovete esportare un numero abbastanza considerevole di assets da passare agli sviluppatori. Questo processo relativamente noioso in altri contesti, diventa rapido ed efficiente in Sketch. Il pannello Export infatti vi consente di creare delle slice in maniera istantanea, senza la necessità di disattivare la visibilità dei livelli non necessari. Personalmente uso in continuazione la funzione Add Selection to Slices, che fa esattamente quanto detto in un click.
Sketch supporta diversi formati di esportazione tra cui jpg, png, tiff, svg, pdf e eps. E No, non supporta l’importazione/esportazione in formato psd o ai. Utile l’integrazione dei servizi sharing di OS X, per inviare velocemente intere artboard o slices.
Infine, se come me avete la “brutta” abitudine di metter mano al codice, amerete la capacità di copiare il codice CSS con lo stile grafico di un elemento ed incollarlo nel vostro editor di testo preferito.
Mirroring su iPhone e iPad
Tra le tante potenzialità come non segnalare la presenza per iPhone e iPad di Sketch Mirror app per visualizzare in tempo reale l’anteprima della vostro canvas su tutti i dispositivi connessi tramite Wi-fi. Sketch Mirror supporta lo scorrimento tra più pagine e artboard in-app senza la necessità di esportare file diversi o intervenire su Sketch.
Risorse Utili
Una delle cose più interessanti da notare è il come Sketch abbia acquisito sempre più consensi da parte della comunità digitale dei designer che in tutta risposta ha generato degli ottimi contenuti gratuiti.
Free Resources — Mockups, Template, Icons
sketchappsources.com
brilliantsketch.com
sketchmine.co
iOS Devices Mockups for Sketch
http://robbiepearce.com/devices
