037 Semplificarsi la vita: gli strumenti di collaborazione

Figma, InVision, Adobe XD, tutti li usano, tutti ne parlano, tutti li apprezzano, ma siamo certi di saperli utilizzare al meglio?
Quando un componente può fare la differenza!


IN PRIMO PIANO:

INSTAGRAM: @cercasiai
EMAIL: aaaicercasi @ gmail.com
TWITTER: @Aicercasi

Myfoglio.com è l’app di fatture freemium, sicura e completa già dalla versione non a pagamento. Provala qui:
https://www.myfoglio.com/

Concorso 2021: inviami un email a aaaicercasi @ gmail.com con indicato cosa fai e perché sei un ascoltatore “specialissimo” e a fine 2021, se mi avrai convinto, potrai vincere un abbonamento myfoglio premium!

PUNTATA 009: ruoli da designer
https://www.spreaker.com/user/aaaicercasi/009ruolidadesigner

Figma
https://www.figma.com/

inVision
https://www.invisionapp.com/

Adobe XD
https://www.adobe.com/products/xd.html

Zeroheight
https://zeroheight.com/

Argomenti della puntata:

  • Strumenti di collaborazione
  • Comunicazione tra designer e designer, designer e programmatore, designer e cliente
  • Ci si può anche disegnare direttamente
  • Come usarli bene
  • Uso dei componenti
  • Allineare ogni parte del progetto istantaneamente
  • Espandibili
  • Creare oggetti una volta sola e utilizzarli ovunque
  • Librerie condivise, palette di colori, heading e tutto ciò che serve per un praticissimo design system
  • Puoi usarli ANCHE per fare prototipi…

Ascoltala qui:

Iscriviti:
iTunes | Spreaker | Spotify | CastBox (Android) | Google Podcast | Deezer | Podchaser

Trascrizione:

Ho modificato il mockup della home, no aspetta le ultime modifiche le trovi su quello della pagina chi siamo. Ah però l font giusto è quello della pagina Contatti, ma i colori da prendere sono quelli del Blog.Di recente mi trovo più volentieri a fare la parte del Designer Frontend piuttosto che di quella del Designer puramente grafico. Se non sai la differenza ti ricordo che puoi trovare tutte le definizioni nell’episodio009 Ruoli da designers https://www.spreaker.com/user/aaaicercasi/009ruolidadesignerA volte i clienti mi chiedono se disegno anche… Sì disegno, realizzo mockup, icone, infografiche, font icon, loghi addirittura flyer e biglietti da visita. A volte. Questi due ultimi, flyer e biglietti da visita, raramente perché preferisco non farlo.Però sì, disegno e soprattutto credo di saper utilizzare in modo conforme programmi di grafica Web di nuova generazione quali Figma, InVision che servono soprattutto per collaborare, per lavorare in team, ma che in realtà accelerano il processo di realizzazione grafica all’ennesima potenza.Se usati bene.Sono strumenti pensati per collaborare. Tra designer e designer o tra designer e sviluppatore o tra entrambi e il cliente. Sono immediati, pratici, servono soprattutto per mostrare il lavoro in tempo reale, aggiustare il tiro, proporre e discutere, trasferire il lavoro tra i membri di un team di sviluppo senza preoccuparsi del “come lo apro”, “con che lo vedo”, “come si fa per vedere un colore, un font etc.” Accelerano il processo di sviluppo prima di tutto perché puoi condividere praticamente in modo immediato il tuo progetto grafico. Puoi condividerlo completamente per farti aiutare da un altro grafico in tempo reale, ma puoi anche scegliere cosa condividere. Ad esempio puoi stabilire dei permessi per far accedere uno sviluppatore solo ad alcune risorse tipo le immagini che agevolmente quest’ultimo si può scaricare dal disegno in slice decise da te, ma senza costringerti a fornirgli un pacchetto di assets zippati come eravamo abituati nei vecchi tempi andati. Inoltre lo sviluppatore può vedere a che grandezze sono associati gli heading, i colori della palette, le distanze tra gli elementi, il raggruppamento in colonne, gli spazi da lasciare tra le colonne di bootstrap (i gutters), etc. Questo in un linguaggio anche molto immediato come ad esempio uno stile css o semplicemente navigando il disegno col puntatore e prendendo nota di ogni informazione.Dall’altro canto il grafico può disegnare direttamente con questi strumenti perché hanno le curve di bezier e le forme geometriche semplici, gli strumenti per elaborare le forme, la possibilità di importare bitmap, modificare il testo, i paragrafi etc. Quindi anche se a colpo d’occhio sembrano estremamente essenziali e spartani fanno tutto quello che serve per realizzare un mockup Web degno di questo nome. In più c’è sempre la possibilità di inserire dei plugin che consentono un espansione del prodotto. In questo caso parlo di Figma che conoscono bene, ma suppongo che lo faccia anche inVision. Se così non fosse, scrivimi così potrò correggere questa puntata.Io ad esempio ho scaricato un plugin di testo sul tracciato, uno che fa i chart, un altro che mette delle etichette “Work in progress” etc.Senza contare che le community di persone che alacremente stanno lavorando su questi strumenti per fornire elementi gratuiti o economicamente accessibili pubblicano al giorno un quantitativo di assets per tutte le più svariate esigenze . Da Pablo Stanley che ha messo a disposizione le sue illustrazioni componibili ad altri meno famosi che per pochi soldi ti danno tutti gli elementi per creare un flusso di navigazione di qualsiasi progetto web ad esempio o il design system di bootstrap da utilizzare nei tuoi mockup.Insomma, un mondo estremamente affascinante e l’obiettivo finale è ridurre i tempi. Rendere tutto estremamente veloce e pratico.Questi strumenti vivono di automatismi. Chi non li utilizza, sta utilizzando lo strumento al 20% delle sue possibilità. Il principale di questi automatismi è il componente. Il componente funziona come un istanza di Flash. Il componente è un oggetto “master” che può essere duplicato e modificato in parte senza perdere le sue caratteristiche essenziali.Cosa vuol dire questo? Metti che realizzi un pulsante. Lo trasformi in componente. Lo duplichi N volte. Ora avrai tipo 10 pulsanti tutti identici. Metti che vuoi cambiare il background di uno. Semplicemente vai sulla copia e modifichi il colore del background e quello è diverso. Ma se volessi cambiare il colore di tutti e 10 i pulsanti, basterebbe che tu cambiassi il colore di background del primo pulsante creato ovvero il master, tutti seguirebbero a ruota tranne quello a cui hai cambiato singolarmente il background. Funzionano un po’ come i css: prima quelli in linea, poi quelli in pagina, poi quelli esterni. Nel caso dei componenti hanno la priorità prima le caratteristiche sul singolo se modificate, poi quelle sul master.Puoi fare tutto in questo modo. Ma soprattutto puoi creare header e footer come componenti e cambiarli in automatico su tutte le pagine create semplicemente cambiando il componente iniziale. Puoi farlo coi pulsanti, le call to action, ovviamente coi titoli, con i box delle news ripetuti in contesti diversi etc.Ci sono ovviamente quei casi in cui un oggetto deve cambiare completamente struttura pur derivando da un componente. In quel caso basta fare Detach dell’instanza ovvero staccarlo dal master e modificarlo a piacimento e non subirà più le modifiche del componente principale.Altro automatismo estremamente utile anche se più complesso da realizzare è quello che ti consente una volta creato un componente di agganciare gli elementi in esso contenuti a delle posizioni fisse e stabilire se la modifica al contenitore interverrà anche sul contenuto.In questo modo basta creare sempre il nostro pulsante e stabilire ad esempio che la scritta contenuta in esso resti sempre centrata senza subire deformazioni. Una volta fatto questo, potremmo allungare il pulsante quanto vogliamo senza che ciò interferisca col posizionamento e la visualizzazione del testo contenuto. In questo modo basterà creare una volta un pulsante per replicarlo su tutto il progetto cambiandone contenuto e lunghezza senza preoccuparsi di dover ricentrare ogni volta la scritta.Così non serve più cambiare il disegno su ogni mockup di pagina, ma semplicemente cambiare solo gli elementi mastro che comodamente uno può tenersi in una pagina separata e aggiornandoli, modificherà in automatico centinaia di mockup di pagine.Ma non c’è solo questo ovviamente. Si possono utilizzare delle palette di colore in modo che non serva ricordarsi i codici esadecimali ogni volta o peggio modificare ogni grigio a piacimento a seconda dell’umore della giornata. Oppure distribuire i componenti su più progetti. O infine creare un design system. inVision ne ha uno suo interno, io invece che utilizzo Figma mi appoggio a ZeroHeight.com per fare qualcosa di simile.E poi con questo tipo di strumenti c’è anche la possibilità di fare dei prototipi semi-funzionanti, che è una caratteristica che esalta la maggior parte dei designer, ma che a me lascia in parte quasi indifferente considerando il sistema a componenti lo strumento che più ha migliorato la mia vita di designer negli ultimi anni. Per me una rivoluzione incredibile nel modo in cui fare design Web.

%d blogger hanno fatto clic su Mi Piace per questo: