Revisione e valutazione dello schizzo

Rapidamente divorando la sua concorrenza, Sketch è pronto a superare Photoshop come strumento di prototipazione dell'interfaccia, al punto che molti sviluppatori ora preferiscono i progettisti a distribuire file Sketch piuttosto che file Photoshop a strati. A differenza di Photoshop, il software grafico Sketch è stato creato da zero per la progettazione di interfacce interattive. Crea composizioni dal vivo in modo che i clienti possano visualizzare in anteprima ciò che accade quando fanno clic, sfiorano o toccano il disegno sul desktop, laptop, tablet o telefono. Per questo motivo, i progettisti che usano Photoshop per creare interfacce utente per desktop e dispositivi mobili potrebbero voler dare un'occhiata più da vicino a Sketch.

Originario dei Paesi Bassi, Sketch è un programma di progettazione vettoriale solo per Mac che si concentra sulla creazione di prototipi interattivi di progetti web e app. Il tipo di design funzionante prodotto da Sketch 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 interfaccia utente) e sull'esperienza utente (UX), e di conseguenza consente l'approvazione informata prima della fase di sviluppo, frenando la frustrazione e risparmiando tempo e denaro.

La concezione relativamente recente di Sketch (2008) era focalizzata sul design collaborativo per gli schermi, quindi ha un vantaggio rispetto a Photoshop, che ha debuttato 30 anni prima, quando la parola schermo aveva a che fare con la misurazione della densità dei mezzitoni. I progettisti hanno iniziato ad appoggiarsi ad Adobe Photoshop 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é fosse uno strumento creato appositamente per tale scopo.

Tuttavia, Sketch non è il solo nello spazio di progettazione UX. Adobe XD (XD sta per Experience Design), rilasciato nel 2016 come parte di Adobe Creative Cloud per Windows e Mac, è anche uno strumento vettoriale per il wireframing e la produzione di prototipi interattivi di click-through.

Un secondo concorrente basato su vettori, pubblicizzato come "il più potente strumento di progettazione dello schermo al mondo", è Studio della piattaforma di gestione del sistema di progettazione dei pesi massimi, 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 di avvio XD gratuito con spazio di archiviazione e utilizzo limitati (2 GB) di una parte della raccolta di Adobe Fonts. La versione completa di XD è disponibile come parte dell'abbonamento Adobe Creative Cloud (CC), a partire da $ 20, 99 al mese per la singola app o da $ 54, 99 all'anno per tutte le app Creative Cloud, tra cui Illustrator, InDesign e Photoshop.

Sketch utilizza una variante su un modello di abbonamento, al costo di $ 99 all'anno per dispositivo (computer o cellulare), per gli individui. Ciò include un anno di aggiornamenti e Sketch Cloud (per la condivisione e la collaborazione online), dopodiché è possibile conservare e utilizzare la versione corrente per sempre o rinnovare per $ 69 all'anno per recuperare aggiornamenti regolari e vantaggi cloud. I contratti multilicenza vanno da $ 64 all'anno per dispositivo per 2-9 dispositivi fino a $ 49 ciascuno per 50 o più dispositivi.

Vale la pena notare che quando si acquista una licenza, si ha diritto a un solo posto (per l'utilizzo su un solo computer). Se usi più Mac, come un desktop e un laptop, sei sfortunato e dovrai acquistare due posti. Molte app basate su abbonamento consentono due posti per licenza come una buona svolta per quei creativi che lavorano duramente che lavorano sul desktop in ufficio e sul 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 ripetere la registrazione.

Iniziare

Sketch è un gioco 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 successivo. La società 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 con 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, ampia documentazione, tutorial e suggerimenti e collegamenti ai suoi social media e comunità di sviluppatori, blog e chat e Dribble. È accogliente e stimolante vedere un elenco di incontri ed eventi della comunità globale del design. Inoltre, il sito offre una moltitudine di risorse UX / UI dell'app Sketch gratuite e premium tra cui kit wireframe, kit UI mobili, modelli, modelli, dashboard, concetti e icone.

Interfaccia e tela

Lo schizzo porta l'esempio e fornisce un'interfaccia utente chiara e contestuale con tre sezioni principali e (in base alla progettazione) nessun pannello mobile. Se sei già un utente Mac, troverai l'interfaccia utente di Sketch familiare, perché è modellata sulle interfacce delle app Apple come Pages, Numbers e Keynote. Con quest'ultima versione, la modalità scura 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 relativo contenuto. A destra è l'Ispettore in cui è possibile giocherellare con le proprietà del contenuto su qualsiasi livello selezionato. In alto hai la barra degli strumenti che ospita strumenti e azioni. Al centro della scena c'è la tua tela in cui crei la magia.

L'elenco pagine semplifica l'organizzazione, l'assegnazione o la modifica dei livelli, oltre a consentire di nominare, raggruppare, selezionare e duplicare gli elementi di contenuto in modo che il flusso di lavoro sia efficiente. Sarai in perfetta forma quando arriva il momento di consegnare i file a uno sviluppatore.

Sketch lubrifica il flusso di lavoro facilitando o automatizzando le attività comuni con librerie facili da realizzare, stili di testo e layer, istanze di simboli e impostazioni predefinite. Inoltre, sono disponibili centinaia di kit UI, modelli e plug-in che fanno risparmiare tempo, che estendono ulteriormente la funzionalità di Sketch in una miriade di modi.

Disegno e composizione nello schizzo

Poiché un ghepardo è in esecuzione, Sketch è alla prototipazione. Un ghepardo è sicuramente in grado di camminare, ma ciò per cui si è evoluto è correre. Allo stesso modo, puoi assolutamente disegnare in Sketch, ed è OK 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 iniziano con un clic sul menu a discesa Inserisci. Lì troverai gli strumenti di forma, disegno e testo previsti. Convenientemente a destra sono le operazioni di disposizione come portare in primo piano, allineamento e distribuzione; e strumenti booleani di base non distruttivi come Unione, Sottrai, Intersezione e Differenza. Gli strumenti vettoriali intuitivi ed efficienti consentono la creazione e la modifica di forme, i loro punti e le curve di Bezier. Sebbene Sketch sia in grado di gestire attività di disegno essenziali, non è Illustrator, né dovrebbe esserlo.

La tipografia di base in Sketch è semplice, con caratteristiche familiari simili a Microsoft Word e opzioni decorative per ombre, riempimenti e bordi. La formattazione di blocchi di tipo può richiedere uno sforzo manuale in Sketch che, ad esempio, non supporta la tabulazione: è necessario utilizzare la chiave spaziale per simulare l'effetto desiderato. Va bene, perché qualsiasi composizione complessa è inutile quando si progettano layout reattivi: tutto tipografico (dimensioni, interruzioni di riga, sillabazione e così via) cambia quando viene visualizzato sui vari dispositivi di diverse dimensioni.

Prototipazione e design reattivo

A differenza di altri programmi di disegno (ma molto simile ad Adobe XD), Sketch facilita la costruzione 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 a scorrimento o non-scrolling, link e cross-link, simboli, sezioni, pagine e istanze e definire hotspot (aree cliccabili). Non solo puoi visualizzare in anteprima i tuoi sforzi dall'interno dell'app, ma puoi anche usare Sketch Mirror (maggiori informazioni su quella funzione di seguito).

Una nuova novità di Sketch è che puoi popolare prototipi di campi di testo e forma con dati realistici dinamici piuttosto che essere legati 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 avrei potuto 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 usare l'icona così com'è, aggiungerla a una libreria o creare un simbolo, proprio come è possibile con qualsiasi arte creata all'interno dell'app.

Nel mercato odierno, qualsiasi progetto ben concepito e destinato allo schermo deve essere reattivo. Ciò significa che i contenuti all'interno di una schermata dell'app o di una pagina Web si ridimensionano e si spostano automaticamente, a seconda del dispositivo di visualizzazione (desktop, laptop, cellulare, tablet). Pertanto, il testo si ridimensiona, le interruzioni di riga cambiano e le immagini si restringono, si espandono o si nascondono, a seconda di ciò che apparirà meglio su ciascun dispositivo.

In Sketch, è necessario creare manualmente layout varianti e semplificazioni delle diverse proporzioni, copiando e incollando ciascun elemento o gruppo. Vorrei, tuttavia, che esistesse un'opzione di regolazione intelligente per le modifiche del layout reattivo simile a Responsive Resize in XD o anche alla funzione di regolazione del layout di InDesign. Sebbene Adjust Layout non renda quasi mai una soluzione perfetta, sicuramente fa risparmiare tempo e offre un posto migliore per iniziare rispetto a una pagina vuota.

Per visualizzare in anteprima i progetti di Sketch in tempo reale sui dispositivi, è disponibile Sketch Mirror gratuito per iOS, nonché 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, i ritagli e le dimensioni del testo in diretta con Sketch Mirror sul dispositivo reale è una risorsa pesante.

Produzione e collaborazione

Quando il tuo lavoro è pronto per il feedback dei clienti o la collaborazione in team, ci sono diversi modi per condividere. Il metodo principale è caricare il tuo documento su Sketch Cloud. Dopo il caricamento, ottieni un URL e puoi scegliere chi invitare per visualizzare il documento e impostare uno dei tre livelli di accesso: commento, download o utilizza come libreria. Chiunque abbia il collegamento può utilizzare gli strumenti di commento integrati e, se aprono la pagina su un tablet o un telefono, saranno in grado di visualizzare l'anteprima delle tavole da disegno alla massima risoluzione purché sia ​​disponibile un layout per il proprio dispositivo.

Le biblioteche collegano te e il tuo team alle risorse e ai preset del progetto. La creazione di questi in Sketch è un gioco da ragazzi ed è un metodo intelligente per archiviare risorse di marca flessibili in un unico punto accessibile a livello globale, sia locale sul disco rigido, sul server o persino in magazzini basati su cloud di terze parti come Dropbox. Una libreria è solo un'altra pagina di Sketch nel documento designata come libreria, che la rende disponibile e utile per l'aggiunta o la revisione di risorse.

Se modifichi un simbolo che hai creato, quando tu (o chiunque altro stia collaborando al documento) ritorni al tuo documento di progettazione, trovi un messaggio in alto a destra nella schermata che ti avvisa dell'aggiornamento. Hai quindi la possibilità di fare clic per aggiornare, oppure puoi decidere di staccare la grafica dalla Libreria. Lo schizzo è grande per ordine e organizzazione, quindi quando fai clic su quell'avviso, viene visualizzata una finestra di dialogo che elenca i componenti della libreria, mostrando sia il simbolo obsoleto che il simbolo aggiornato fianco a fianco. È fantastico avere informazioni complete a portata di mano.

In alternativa, puoi esportare le tavole da disegno come pagine PDF che possono essere contrassegnate con commenti in Anteprima Apple, Adobe Acrobat o qualsiasi altro software di visualizzazione PDF. Sketch esporta anche grafica, sezioni e pagine come file JPG, PNG e SVG. Inoltre, può esportare codice per SVG e attributi CSS.

Niente di strano in questa app

Sketch è uno strumento completo nato per i progettisti che creano esperienze di progettazione basate sullo schermo e lo fa magistralmente. Con la sua familiare (per utenti Mac), l'interfaccia intuitiva e la facile collaborazione incrociata tra i progettisti e i loro clienti, Sketch ha guadagnato la sua solida reputazione come strumento di prototipazione, perché facilita e accelera il processo di convalida e approvazione del progetto. Per il massimo delle funzionalità di illustrazione vettoriale, guarda la nostra selezione degli editor, Adobe Illustrator.