Perché il Team UX and Art di Ibuildings ha scelto Sketch

Restare nella proprio comfort zone, fedeli alle proprie tecnologie e software può sembrare in molti casi la soluzione più giusta e semplice, ma noi di Ibuildings crediamo che sia importante trovare soluzioni sempre nuove che si sposini alle reali esigenze di progetto e degli utilizzatori finali del prodotto che stiamo realizzando.

Per questo motivo, di comune accordo il team di UX e Frontend ha deciso di abbandonare i sicuri e ben conosciuti porti di Photoshop e Illustrator per provare ad utilizzare Sketch.

Sketch é un tool di disegno e grafica vettoriale, che nasce nel 2010, realizzato dal team Olandese di Bohemian Coding, attualmente alla versione 46.2.

Esso nasce con l’obiettivo di fornire ai designer un tool per la progettazione di interfacce che sia economico, veloce, leggero e facile da usare.

A differenza di Photoshop, con Sketch, è possibile creare design ad alta risoluzione, per esempio 326 DPI (iPhone 7) e a 401 DPI (iPhone 7 plus) senza avere pagine da quasi 1giga di file size.

La possibilità di integrazioni con diversi tool di prototipazione, tra i quali Invision (grazie all’utilizzo di Craft), consente di effettuare presentazioni di grande effetto e anche di effettuare test di usabilità montando velocemente le schermate necessarie.

Un altro lato positivo sono le shortcuts che fornisce: nel giro di un giorno o due si riesce già a lavorare facilmente con le principali.

Qui di seguito troverete una selezione di quelle più utili da cui partire:

Ctrl + C: Seleziona Colore

Consente di selezionare il colore di un pixel sullo schermo, la vista “Ingrandita” fornita da Sketch aiuta ad aumentare la precisione consentendo così selezionare con altissima precisione il pixel desiderato.

Cmd+1

Quando si usa Sketch è facile generare un alto numero di artboards per progetto. Lo shortcut Command+1 consente di effettuare uno zoom out per vedere tutte le iterazioni in un colpo solo! E’ anche ottimo in caso si desideri effettuare degli screenshots.

Alt+Hover: Misura la distanza

Con un layer selezionato alt+hover misurerà l a distanza con qualsiasi cosa su cui effettuerete un hover “over”.

A mio avviso questa opzione è molto più accurata delle smart guides fornite da Photoshop.

Cmd+R: Rinomina un layer o un gruppo

Cmd+r rende il nome di qualsiasi layer/gruppo selezionato modificabile, in modo che sia possibile rinominarlo velocemente.

La cosa ancora più comoda è che premendo “TAB” si passa rapidamente al layer successivo, in modo che esso sia direttamente editabile. Inoltre qualsiasi layer abbiate selezionato, verrà evidenziato in blu nel canvas, in modo che sappiate esattamente quale state rinominando.

Cmd+Scroll: Zoom In/Out

Questa é una shortcut meravigliosa se avete un mac e anche una delle più utili. Aiuta moltissimo per indagare i piccoli dettagli e scoprire le imperfezioni.

Cmd+Click: Seleziona un Layer

Questa shortcut é molto utile per selezionare un layer qualora si desideri spostarlo in un’altra posizione.

Cmd+.

Consente di attivare la modalità “presentazione”, questa funzione é particolarmente utile quando si lavora con iun laptop dove il real estate scarseggia sempre!

Un altro motivo per cui amiamo Sketch è il concetto di Simboli. Non importa se state disegnando un intero prodotto o solo alcune schermate, i simboli vi aiutano a mantenere i vostri file organizzati e ordinati, vi aiuteranno a comunicare più efficientemente con il team di frontend e in generale porteranno ad un notevole risparmio di tempo.

Che cosa sono i simboli? I simboli vi consentono di riutilizzare un elemento all’interno di diversi progetti/schermate, mantenendo un simbolo “master” che aggiornerà automaticamente altre istanze dello stesso simbolo quando vengono effettuate modifiche su di esso.

Normalmente i simboli vengono creati a partire da quelli elementi di un’interfaccia che vi aspettereste di riutilizzare come per esempio bottoni, liste, forms, tabs.. e che verranno ripetuti in diverse schermate, pagine e artboards nei vostri designs.

La caratteristica più importante dei simboli é proprio questa: se ad un certo punto decidete di cambiare alcune proprietà di un dato simbolo (colore, forma, dimensione del testo o di qualsiasi altra cosa) dovete modificare il master solo una volta e le modifiche verranno replicate a cascata su tutte le istanze.

Quando create un simbolo, di default Sketch vi chiederà se volete inviarlo alla “symbols page”. Questa pagina, per quanto utile ha il difetto di porre i simboli uno di fianco all’altro durante la creazione e se ne cancellate uno di essi noterete che resterà uno spazio bianco.

In questo caso viene in soccorso il plugin “Symbols Organizer” (https://github.com/sonburn/symbol-organizer) il quale consente di

organizzare la propria pagina dei simboli e lista di layer, alfabeticamente e in gruppi determinati dal nome dei simboli stessi. Consente inoltre di definire la granularità del gruppo in modo che possano essere organizzati verticalmente o orizzontalmente, inserire un massimo di simboli per riga/colonna, rinominare simboli duplicati e rimuovere simboli inutilizzati.

Infine Sketch integra anche funzioni avanzate per gestire le curve di Bezier, le operazioni Booleane, funzioni complete anche per gestire stili e attributi CSS di qualsiasi elemento. E’ possibile lavorare con precisione assoluta con ingrandimenti infiniti a livello vettoriale e per ritocchi anche a livello di singolo pixel: permette di applicare più ombre, riempimenti, gradienti, sfumature e molto altro ancora. Questo software è ottimizzato sia per i Mac con schermo tradizionale sia per i Mac Retina.

Altre Risorse Utili:

Spero che questa breve panoramica sia risultata utile, vi aggiorneremo nei prossimi mesi su come procederà la nostra avventura con Sketch!

    Alessandra Petromilli
    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade