Sketch versione 55: ecco le novità
Da circa un mese è stata rilasciata la versione 55 del nostro amato Sketch.
Sarò breve, le novità di questa versione sono fondamentalmente 2:
- La nuova funzione Smart Distribute
- La creazione di un livello da codice SVG
Vediamo velocemente di cosa stiamo parlando.
Smart Distribute
Forse una tra le funzioni di cui si sentiva più la mancanza, Smart Distribute permette di gestire la spaziatura tra gli elementi di di una riga o una colonna. Occhio, non sto parlando della vecchia Arrange > Distribute che distribuisce uniformemente gli elementi in base alla posizione del primo e dell'ultimo elemento.
Come funziona Smart Distribute?
Una volta selezionati più elementi, appariranno delle maniglie bianche tra essi. Trascinando queste maniglie, riuscirai ad avvicinare o allontanare gli elementi spaziandoli tra loro in maniera uniforme.
Inoltre è possibile impostare la spaziatura inserendo un valore in pixel dall'Inspector.
Purtroppo al momento la funzione è disponibile solo per righe o colonne specificando lo spazio verticale oppure orizzontale. Non è possibile impostare contemporaneamente i 2 valori per gestire delle griglie.
N.B.: questa funzione non fa altro che riposizionare gli elementi. Quindi, ad esempio, qualora dovessi eliminare un elemento, gli altri non si ridistribuiranno automaticamente secondo il valore impostato. Per gestire situazioni simili consiglio caldamente il plugin Anima che gestisce le spaziature in maniera dinamica (funzione Stack, una manna dal cielo per gestire righe, griglie e altro).
UPDATE: dalla versione 56 puoi utilizzare Smart Distribute per controllare la spaziatura nelle griglie. È possibile regolare facilmente la spaziatura verticale e orizzontale tra le righe e le colonne di livelli. La versione 57 invece integra anche una funzione per il riordinamento dei livelli nella griglia.
Copia incolla da codice SVG
Può capitare di dover copiare un'icona dal web e magari questa non è stata incorporata come un'immagine ma direttamente come codice SVG.
Non so a quanti sia capitato, a me diverse volte. Prima di questo aggiornamento bisognava trovare l'escamotage per salvare in qualche modo quel codice per importarlo in Sketch (ad esempio in un editor di testo e poi salvarlo con estensione .svg).
Con questa nuova implementazione invece basterà copiare il codice SVG, passare a Sketch e incollare il codice. Così facendo verrà generato un livello basato sul codice SVG incollato! 🧙♀️
Altre piccole migliorie
- Migliorate le performance di azionamento delle griglie quando usiamo linee, frecce, livelli e nuovi simboli
- Il copia–incolla di simboli e pagine tra documenti diversi è più veloce e affidabile
- I livelli adesso si agganciano anche al testo ruotato
Conclusione
Dopo qualche settimana di utilizzo posso dire che la funzione Smart Distribute risulta molto comoda e fa risparmiare un po' di tempo. I ragazzacci di Bohemian stanno continuando a lavorare strabene su Sketch 💪
Sketch introduce i prototipi... ed è subito delusione
https://youtu.be/5bsptX8MdPg
Pochi giorni fa, per esattezza il 28 febbraio, Sketch rilascia la versione 49 con un nuova funzionalità: i prototipi.
Dal video sembra tutto molto figo, un'unico software dove è possibile progettare la nostra UI e al tempo stesso sviluppare il prototipo. Cosa potevi chiedere di meglio?
Breve triste storia: preso dall'entusiasmo corro a rinnovare la licenza per poter scaricare la nuova versione. Sono bastati 5 minuti per arrivare alla conclusione che la nuova funzione di prototipazione è davvero deludente.
Panoramica
Come cita il sito ufficiale:
"Ora puoi collegare le tavole da disegno con i Link e i livelli Hotspot per creare prototipi dei tuoi progetti che possono essere visualizzati in Sketch Preview, Sketch Cloud e Sketch Mirror su iOS".
Per fartela breve quando nel tuo progetto hai più Artboard avrai la possibilità, su qualsiasi livello, di impostare un link per collegare un'altra Artboard.
Una volta creato il collegamento dalle proprietà Prototyping potrai settare alcuni parametri (nel pannello Inspector a destra).
Nel dropdown Target potrai scegliere o cambiare l'Artboard di destinazione mentre più giù, da Animation potrai appunto scegliere il tipo di animazione utilizzata durante la transizione da una schermata all'altra.
Inoltre potrai scegliere di disegnare un Hotspot, ovvero un'area rettangolare che fungerà da link senza che questo sia associato ad un livello specifico.
Troverai un tasto Preview che ti permetterà subito di visualizzare e navigare il prototipo.
Il prototipo può essere caricato su Sketch Cloud e quindi condiviso tramite link.
Puoi visualizzare il prototipo sul tuo smartphone con Sketch Mirror, a patto che si tratti di iOS 10 o successivi (via Wi-Fi o USB).
Fine!
La mia opinione
Onestamente, dal software leader nel design della UI, mi sarei aspettato qualcosa in più, a partire dalle animazioni tra le schermate: al momento è possibile solo scegliere la direzione di entrata della schermata successiva (da destra, da sinistra, dal basso o dall'alto) oppure scegliere di non usare un'animazione. Tralasciando il fatto che ci sono molte più animazioni in InVision, ma manca anche la più semplice delle animazioni: un fade, una classica dissolvenza.
Mi aspettavo che i prototipi potessero essere visualizzati anche su dispositivi Android, pazienza.
Non mi sarebbe dispiaciuto poter animare dei singoli livelli, ma per questo sembra che Sketch sia ancora molto lontano. Per prototipi high fidelity vorrà dire che continuerò ad usare il mio fidato Flinto.
Insomma, questa nuova funzione prototipi di Sketch fa molto meno di quello che fa InVision.
In conclusione, sembra una funzionalità ancora molto acerba. Forse Sketch ha accelerato la pubblicazione di questa funzionalità per cercare di bruciare sul tempo l'uscita su larga scala di InVision Studio? Chi lo sa. Spero solo che Bohemian si dia da fare per perfezionare questa feature.
Sketch è migliore di Illustrator per disegnare interfacce?
Oggi voglio dirti perché quando disegno interfacce preferisco utilizzare Sketch rispetto ad Adobe Illustrator. Quando si parla di progettazione grafica, chiaramente ognuno ha le sue preferenze in quanto a software, ma se progetti user interface e ancora non conosci Sketch, allora è arrivato il momento di dargli un'occhiata (fidati, te ne innamorerai presto).
Premessa: Questo non è un articolo sponsorizzato e non ho alcun interesse economico nel promuovere l'uno o l'altro software.
Nota dolente: Purtroppo Sketch è disponibile solo per Mac. Se possiedi Windows mi dispiace che tu non possa provarlo.
Per anni ho progettato interfacce di siti web con Adobe Photoshop, quando ancora lo skeumorfismo era sulla cresta dell'onda, poi sono passato ad Adobe Illustrator e da qualche anno ormai uso prevalentemente Sketch.
Andiamo a vedere quali sono i vantaggi di Sketch rispetto ad Illustrator.
1) Prezzo
Il prezzo non è da sottovalutare, specie per un freelance, magari all'inizio della propria carriera. Attualmente Sketch ha un costo di 99 $ una tantum (circa 84,33 €) e comprende aggiornamenti gratuiti nell'arco di un anno. Invece per acquistare Illustrator sono necessari almeno 292,57 € (più del triplo) per una licenza con scadenza annuale.
2) Semplicità e interfaccia
Parliamoci chiaro, io amo Illustrator! Ma ha un sacco di strumenti, che per quanto utilissimi, non utilizzeremo mai e poi mai nell'interface design. La vastità di strumenti che possiede Illustrator richiede quindi un'interfaccia più complessa e organizzata, il che si traduce in più tempo nel trovare ciò che cerchiamo e da parte nostra richiederà sicuramente un maggiore impegno cognitivo.
Sketch ha un'interfaccia molto molto essenziale, tutto a portata di mano. Pochi strumenti che fanno il loro sporco lavoro.
3) Librerie e simboli
Entrambi i programmi incorporano la funzione Simboli, ma quella di Sketch è nettamente superiore.
Piccola panoramica sui simboli
Possiamo intenderli come degli oggetti (elementi o insieme di elementi) che possono essere riutilizzati più volte in più istanze e che sono sempre legati all'oggetto master. OK, in italiano cosa vuol dire? Esempio, se dovrai creare più pulsanti dallo stesso aspetto, allora se userai la funzione simboli, questo ti velocizzerà perché non dovrai ogni volta fare copia incolla, ma cosa molto più importante, ti darà anche l'opportunità qualora tu volessi cambiare aspetto a tutti i pulsanti, di modificare solo l'oggetto master e vedere quindi tutti i simboli collegati aggiornarsi come per magia! Figo, no?!
Inoltre dalla versione 47 di Sketch è stata introdotta la funzione Librerie che ti permetterà di condividere stessi simboli in documenti differenti e averli sempre aggiornati e sincronizzati. Utilissimo, specie quando si lavora su progetti più grandi oppure in team.
4) Plugin
Entrambi supportano l'integrazione di plugin che ti permetteranno di aggiungere funzioni e migliorare il tuo flusso di lavoro. Sketch vince a mani basse: molti più plugin, anche gratuiti.
Ne troverai un sacco sul web, qui quelli sul sito ufficiale.
A tal proposito uno dei plugin per Sketch che ho trovato utilissimo e che uso quotidianamente è Craft di InVision che permette direttamente da Sketch di caricare schermate su InVision per creare i prototipi dei vostri progetti.
Conclusioni
Sketch lo trovo molto più adeguato per user interface design. Ad oggi non trovo ci siano validi rivali, è semplice e abbastanza intuitivo e lo consiglio a tutti coloro che disegnano interfacce. Sia chiaro, Sketch è dedicato solo alla progettazione di UI (anche se qualcuno ci fa anche illustrazioni). Illustrator rimane sempre e comunque un ottimo programma, completo, ideale per progettazione di loghi, prodotti per la stampa, illustrazioni e tanto altro. Personalmente per la progettazione di icone continuo a preferire il buon Illustrator.