Divorando rapidamente la sua concorrenza, Sketch è pronto a superare Photoshop come strumento di prototipazione dell'interfaccia, al punto che molti sviluppatori ora preferiscono che i designer cedano i file di Sketch piuttosto che i file Photoshop a strati.
A differenza di Photoshop, il software grafico Sketch è stato creato da zero per la progettazione di interfacce interattive.
Crea composizioni live in modo che i clienti possano visualizzare in anteprima cosa succede quando fanno clic, strisciano o toccano il tuo progetto sul loro desktop, laptop, tablet o telefono.
Per tutto questo, i designer che utilizzano Photoshop per creare interfacce utente per desktop e dispositivi mobili potrebbero voler dare a Sketch uno sguardo più da vicino.
Originario dei Paesi Bassi, Sketch è un programma di progettazione vettoriale solo per Mac incentrato sulla creazione di prototipi interattivi di progetti web e di app.
Il tipo di design funzionante che Sketch produce consente ai tuoi clienti di avere un'idea migliore di come tutto appare e risponde.
Ciò a sua volta consente loro di fornire un feedback più utile sulla funzionalità (interfaccia utente o UI) e sull'esperienza utente (UX) e di conseguenza consente un'approvazione informata prima della fase di sviluppo, riducendo la frustrazione e risparmiando tempo e denaro.
La concezione relativamente recente di Sketch (2008) era incentrata sul design collaborativo per gli schermi, quindi ha un vantaggio su Photoshop, che ha debuttato 30 anni prima, quando la parola schermo aveva a che fare con la misurazione della densità dei mezzitoni.
I progettisti iniziarono a fare affidamento su Adobe Photoshop ($ 9,99 / mese in Adobe) per organizzare e consegnare i file di progettazione dell'interfaccia perché era lo strumento migliore nella confezione per portare a termine il lavoro, non perché era uno strumento creato appositamente per quello scopo.
Tuttavia, Sketch non è solo nello spazio di progettazione UX.
Adobe XD (XD sta per Experience Design), rilasciato nel 2016 come parte di Creative Cloud di Adobe per Windows e Mac, è anche uno strumento basato su vettori per wireframing e produzione di prototipi interattivi di click-through.
Un secondo concorrente basato su vettori, pubblicizzato come "lo strumento di progettazione dello schermo più potente al mondo", è Studio della piattaforma di gestione del sistema di progettazione pesante, InVision (gratuito per un prototipo, $ 25 al mese per prototipi illimitati).
A differenza di Sketch e XD, Studio ha un modulo di animazione avanzato integrato.
Il lavoro svolto in Sketch può essere sincronizzato con la piattaforma InVision utilizzando il proprio plug-in Craft Manager.
Adobe offre un piano iniziale XD gratuito con spazio di archiviazione limitato (2 GB) e utilizzo di una parte della raccolta Adobe Fonts.
La versione completa di XD è disponibile come parte dell'abbonamento Adobe Creative Cloud (CC), da $ 20,99 al mese per la singola app o da $ 54,99 all'anno per tutte le app Creative Cloud, incluse Illustrator ($ 19,99 su Adobe), InDesign e Photoshop.
Sketch utilizza una variante su un modello di abbonamento, che costa $ 99 all'anno per dispositivo (computer o cellulare), per i privati.
Ciò include un anno di aggiornamenti e Sketch Cloud (per la condivisione e la collaborazione online), dopodiché puoi conservare e utilizzare la versione corrente per sempre o rinnovarla per $ 69 all'anno per recuperare aggiornamenti regolari e vantaggi cloud.
Il contratto multilicenza varia da $ 64 all'anno per dispositivo da due a nove dispositivi fino a $ 49 ciascuno per 50 o più dispositivi.
Vale la pena notare che quando si acquista una licenza, si ha diritto a una sola postazione (per l'utilizzo su un solo computer).
Se utilizzi più Mac, come un desktop e un laptop, sei sfortunato e dovrai acquistare due posti.
Molte app basate su abbonamento consentono due postazioni per licenza come una buona svolta per quei creativi che lavorano sodo che lavorano sul loro desktop in ufficio e sul loro laptop a casa.
Un inconveniente correlato è che se si desidera utilizzare Sketch su un nuovo Mac o se è stato necessario riformattare l'unità, è necessario annullare la registrazione di Sketch dalla vecchia macchina / unità e quindi registrarsi nuovamente.
Iniziare
Sketch è un gioco da ragazzi da scaricare dal sito dell'azienda (sketchapp.com); c'è una prova gratuita di 30 giorni, senza carta di credito richiesta.
Sketch richiede MacOS 10.13.4 (High Sierra) o versioni successive.
L'azienda avverte che se si lavora con documenti complessi e multipagina con centinaia di tavole da disegno, si consiglia uno dei Mac più potenti e caricati in RAM.
Ho testato Sketch 53.2 su un MacBook Pro 2018 con un processore Intel Core i9 da 2,9 GHz, 32 GB di RAM e una scheda grafica Radeon Pro 560X.
Proprio sulla pagina di download, Sketch offre una guida per principianti, un'ampia documentazione, tutorial e suggerimenti e collegamenti ai social media e alle comunità di sviluppatori, blog e chat e Dribble.
È accogliente e stimolante vedere un elenco di incontri ed eventi della comunità di design globale.
Inoltre, il sito offre una moltitudine di risorse UX / UI per app Sketch gratuite e premium, inclusi kit wireframe, kit per interfaccia utente mobile, modelli, prototipi, dashboard, concetti e icone.
Interfaccia e tela
Sketch dà l'esempio e fornisce un'interfaccia utente pulita e contestuale con tre sezioni principali e (in base alla progettazione) senza pannelli mobili.
Se sei già un utente Mac, troverai familiare l'interfaccia utente di Sketch, perché è modellata sulle interfacce delle app Apple come Pages, Numbers e Keynote.
Con questa ultima versione, la modalità oscura di Apple è ora supportata.
Sul lato sinistro dello schermo, troverai l'Elenco pagine con un inventario dei tuoi livelli, singoli elementi di contenuto su quei livelli e tavole da disegno e il contenuto con nome su di essi.
A destra c'è l'Inspector dove puoi armeggiare con le proprietà del contenuto su qualsiasi livello che hai selezionato.
In alto hai la barra degli strumenti che ospita strumenti e azioni.
Al centro della scena c'è la tua tela dove crei la magia.
L'Elenco pagine semplifica l'organizzazione, l'assegnazione o la modifica dei livelli, oltre a consentire di denominare, raggruppare, selezionare e duplicare gli elementi di contenuto in modo che il flusso di lavoro sia efficiente.
Sarai in perfetta forma quando arriverà il momento di consegnare i file a uno sviluppatore.
Sketch lubrifica il tuo flusso di lavoro facilitando o automatizzando le attività comuni con librerie, stili di testo e livelli, istanze di simboli e predefiniti facili da creare.
Inoltre, sono disponibili centinaia di kit di interfaccia utente, modelli e plug-in che consentono di risparmiare tempo che estendono ulteriormente le funzionalità di Sketch in una miriade di modi.
Disegno e composizione in Sketch
Come un ghepardo sta alla corsa, Sketch sta alla prototipazione.
Un ghepardo è certamente in grado di camminare, ma ciò per cui si è evoluto è correre.
Allo stesso modo, puoi assolutamente disegnare in Sketch, e va bene per questo, ma la cosa straordinaria di Sketch è la sua prototipazione.
Tuttavia, vale la pena avere una panoramica di ciò che può essere fatto con gli strumenti di disegno di Sketch.
Tutta la creazione, l'importazione e l'assemblaggio del contenuto inizia con un clic sul menu a discesa Inserisci.
Lì troverai la forma, il disegno e gli strumenti di testo previsti.
A destra ci sono le operazioni di disposizione come portare in primo piano, allineamento e distribuzione; e strumenti booleani di base non distruttivi come Unione, Sottrai, Interseca e Differenza.
Gli strumenti vettoriali intuitivi ed efficienti consentono la creazione e la modifica di forme, dei loro punti e delle curve di Bézier.
Sebbene Sketch possa gestire le attività di disegno essenziali, non è Illustrator, né dovrebbe esserlo.
La tipografia di base in Sketch è semplice, con caratteristiche simili a Microsoft Word insieme a opzioni decorative per ombre, riempimenti e bordi.
La formattazione di blocchi di testo può richiedere un certo sforzo manuale in Sketch che, ad esempio, non supporta la tabulazione: è necessario utilizzare la barra spaziatrice per simulare l'effetto desiderato.
Va bene, perché qualsiasi composizione complessa è inutile quando si progettano layout reattivi: tutto ciò che è tipografico (dimensioni, interruzioni di riga, sillabazione e così via) cambia quando viene visualizzato sui vari dispositivi di dimensioni diverse.
Prototipazione e responsive design
A differenza di altri programmi di disegno (ma molto simile ad Adobe XD), Sketch facilita la creazione di un prototipo interattivo.
Per simulare il percorso del tuo sito o della tua app (UI) e come sarà l'esperienza (UX), puoi assegnare determinate aree come menu, simboli, sezioni, pagine e istanze e definire gli hotspot (aree cliccabili).
Non solo puoi visualizzare in anteprima i tuoi sforzi dall'interno dell'app, ma puoi anche utilizzare Sketch Mirror (maggiori informazioni su questa funzione di seguito).
Una nuova particolarità in Sketch è che puoi popolare il testo del prototipo e i campi forma con dati realistici dinamici piuttosto che essere legato al solito tedio di Lorum Ipsum.
Nei livelli di testo o forma selezionati, è possibile assegnare un file di origine da cui importare testo o immagini.
Sketch funziona abbastanza bene con gli altri, e non solo all'interno dell'app.
È stato un piacere scoprire che potevo copiare e incollare un'icona creata in Illustrator.
Al momento dell'importazione, Sketch ha creato un livello raggruppato per la mia arte e da lì ho potuto utilizzare l'icona così com'è, aggiungerla a una libreria o creare un simbolo, proprio come puoi fare con qualsiasi immagine creata all'interno dell'app.
Nel mercato odierno, qualsiasi design ben concepito e destinato allo schermo deve essere reattivo.
Ciò significa che il contenuto all'interno della schermata di un'app o di una pagina Web si ridimensiona automaticamente e si sposta, a seconda del dispositivo di visualizzazione (desktop, laptop, cellulare, tablet).
Pertanto, il testo viene ridimensionato, le interruzioni di riga cambiano e le immagini si restringono, si espandono o si nascondono, a seconda di ciò che avrà un aspetto migliore su ciascun dispositivo.
In Sketch, è necessario creare layout varianti e semplificazioni delle diverse proporzioni manualmente, copiando e incollando ogni elemento o gruppo.
Tuttavia, vorrei che ci fosse un'opzione di regolazione intelligente per modifiche del layout reattivo simile a Ridimensionamento reattivo in XD o anche alla funzione Regola layout di InDesign.
Sebbene la regolazione del layout non rappresenti quasi mai una soluzione perfetta, fa sicuramente risparmiare tempo e fornisce un punto di partenza migliore rispetto a una pagina vuota.
Per visualizzare in anteprima i tuoi progetti di Sketch in tempo reale sui tuoi dispositivi, c'è lo Sketch Mirror gratuito per iOS, oltre a diverse app per farlo sui dispositivi Android.
In tutti i casi, i dispositivi avranno bisogno di una connessione Wi-Fi o USB.
Prendere decisioni di progettazione informate avvantaggia il flusso di lavoro di chiunque e, a tal fine, essere in grado di vedere le tue regolazioni, ritagli e ridimensionamento del testo in tempo reale con Sketch Mirror sul dispositivo reale è una risorsa pesante.
Produzione e collaborazione
Quando il tuo lavoro è pronto per il feedback del cliente o per la collaborazione in team, ci sono diversi modi per condividerlo.
Il metodo principale è caricare il documento su Sketch Cloud.
Dopo il caricamento, ottieni un URL e puoi scegliere chi invitare a visualizzare il documento e impostare uno dei tre livelli di accesso: Commento, Scarica o Usa come libreria.
Chiunque abbia il collegamento può utilizzare gli strumenti di commento incorporati e, se apre la pagina su un tablet o un telefono, sarà in grado di visualizzare l'anteprima delle tavole da disegno a piena risoluzione purché vi sia un layout per il loro ..
.
