14, 15 e 16 dicembre 2020

NEXT LEVEL FIGMA

Online Workshop con Mirko Santangelo

workshop-intro

Con l’inizio di una nuova decade del design, la nostra comunità globale aprirà nuovi scenari per l’esplorazione creativa.
In un’era di moderni visionari, in cui la linea tra design e codice diventa sempre più sottile, Figma è diventata uno dei player maggiori nel mercato dei design tool, offrendo ai suoi utilizzatori la possibilità di abbracciare nuovi modelli di lavoro collaborativo per la gestione del flusso di progettazione digitale.

Il workshop è diviso in tre sessioni online a tema, ed illustrerà tecniche pratiche per la produzione di esperienze web in Figma, attraverso lo sviluppo di un progetto dedicato.

Le sessioni, guidate dal designer Mirko Santangelo, approfondiranno tematiche sul lavoro multidisciplinare in Figma in ambiti come l’ideazione e art direction, l’architettura delle informazioni, visual design, tipografia e interaction design.

Un focus su come lavorare in Figma per elevare la qualità delle produzione creative, iterare e validare idee velocemente, restare al passo con i design trend e non ultimo, utilizzare Figma al di là della classica progettazione statica. Ad esempio, sviluppando strumenti per estendere le capacità di Figma attraverso il creative coding e plugins — dall’automazione dei task ripetitivi, allo sviluppo di prototipi con animazioni interattive — “Designers Can Code™”.

Un’occasione di formazione professionale unica e irripetibile targata HANDOFF in cui scoprire come i progettisti del digitale possono combinare design e codice in Figma per raggiungere nuovi traguardi creativi.

Questo evento non è direttamente correlato a Figma, Friends of Figma o a nessuno dei suoi marchi

about

A chi è rivolto questo workshop

Il corso è rivolto a figure del digital design quali Creative Designer, UI Designer, Creative Developer e Graphic Designer impegnati nel misurarsi con i nuovi modelli di progettazione in Figma.

Al termine del workshop avrai acquisito conoscenze utili a massimizzare il flusso di progettazione creativa in Figma, estendere le capacità di Figma attraverso le API, e migliorare la qualità della progettazione per prodotti web responsive.

Livello di difficoltà: Intermedio/Avanzato

Good to Have: Conoscenza base o intermedia di Figma e codice front-end (HTML, CSS, JS)

whoisfor

Programmazione e formato

Le sessioni del workshop si terranno nelle seguenti giornate:

• lunedì 14 dicembre dalle 10.00 alle 13.00
• martedì 15 dicembre dalle 10.00 alle 13.00
• mercoledì 16 dicembre dalle 10.00 alle 13.00

Tutte le sessioni avranno lo stesso formato:

09:45 – 10:00 • Apertura virtuale delle porte, chat e networking
10:00 – 11:15 • Prima sessione
11:15 – 11:30 • Coffee break
10:30 – 13:00 • Seconda sessione + Domande e risposte

Di quale software avrai bisogno

Per visualizzare i webinar, installa il client Zoom per Meetings, disponibile per tutti i principali sistemi operativi. Il download e l’installazione potrebbero richiedere alcuni minuti, quindi, se possibile, scaricalo in anticipo.

Design Tools
Figma

Development Tools
VS Code
Google Chrome
– Front-End Stack (HTML, CSS, Javascript, Typescript)
– Front-end Tooling (Figma Plugin e Rest API, Parcel, NPM, Greensock GSAP)

timing

Chi è Mirko Santangelo

Nato in un piccolo paese Siciliano e trapiantato negli States. Senior Lead Designer in Paper Tiger Agency NJ / NYC.

Lavora per l’industria creativa da più di 11 anni, occupandosi di design di prodotto ed esperienze digitali interattive, sviluppo front-end, impresa e startups, mentorship e formazione professionale. Avido appassionato di tipografia ed editoria.

Ha esperienza nella leadership creativa di team multi-culturali distribuiti globalmente. Il suo lavoro lo ha portato a collaborare con aziende come Adobe, Canon, Figma, Facebook, Google, Hi-Rez Studios, Nokia, The New York Times, Insider Inc, PBS, Nikon, Ikea, Wacom per citarne alcune. Acquisendo così riconoscimenti e premi di settore e l’interesse della stampa nazionale e internazionale.
Contribuisce attivamente a diverse comunità creative, favorendo il dialogo e la condivisione delle discipline del buon design. Adobe Certified Expert, membro della design Jury di Awwwards, Figma Community Advocate in Italia per Roma e Milano.

speaker-section

Programma del workshop

Questo workshop online è suddiviso in tre giorni.

Il programma potrebbe cambiare leggermente in base a come stiamo procedendo di giorno in giorno, dando anche il tempo di rispondere alle domande.

Al termine del workshop i partecipanti riceveranno la registrazione video dell’intero workshop, per poter rivedere le sessioni in un momento più comodo.

Le sessioni si svolgeranno dalle 10:00 alle 13:00 di lunedì 145, martedì 15 e mercoledì 16 dicembre 2020

Lunedì 14 dicembre

THINK

Fig{max} Creative thinking

Semantica del Design ( ~ 45m )
Processi di ricerca generativa per il design digitale e la direzione creativa in Figma

• Curated Research: Ispirazione artistica, riferimenti e design patterns;
• Mood-boarding selettivo: collezionare e definire gli elementi del linguaggio visivo; • Validazione delle idee, gestire sessioni di brainstorming collaborativo;

 

Scenari di collaborazione alternativa ( ~ 30m )
Non solo visual — Workflow, strategie e management di progetto in Figma

• Process Architecture: Organizzazione multi-progetto e files su modello agency; • On-boarding e condivisione delle risorse con il design team;

DEFINE

Fig{max} User Experience Design

Architettura dell’informazione ( ~ 45m )
Strumenti per la progettazione di layout web a taglio editoriale.

• Auto-layout e componenti per il mapping e la classificazione dei contenuti;
• Low-fidelity: Layout e composizione, content-blocking di un interfaccia responsive.

 

Do more with less ( ~ 45m )
Metodi di scripting in Figma per l’integrazione del codice nel flusso di lavoro

• Figma Plugin API e document-tree.
• Data parsing e automazione dei task ripetitivi.

Martedì 15 dicembre

VISUALIZE

Fig{max} UI Design per il Web

Concept e Page Design ( ~ 45m )
Definizione del visual design per contenuti e testi;

• Spatial system: ritmo orizzontale e verticale, costruzione grid system responsive; • Typesetting: scala e contrasto tipografico, definizione del type system, pairing.
• Art-direction fotografica e gestione delle immagini.

 

Colore come linguaggio ( ~ 45m ) Metodi di ricerca e applicazione dei colori;

• Costruzione palette colori e abbinamenti;
• Theming e generazione programmatica di varianti colore;

ADAPT

Fig{max} UI Design per il Web

Responsive design ( ~ 45m )
Adattamento dei layouts desktop verso i dispositivi touchscreen.

• La progettazione per i piccoli schermi.
• Simulazioni e preview su dispositivi reali.

 

Showcase & Handoff ( ~ 45m )
Utilizzare Figma sul modello di single source of truth (SSOT).

• Showtime: presentazioni live e showcase dei progetti.
• Viewers vs Editors: esportare ed accedere al progetto. • Guidelines, specifiche ed on-boarding per i developers.

Mercoledì 16 dicembre

BUILD

Fig{max} Creative Development

D.I.Y. Design Tools ( ~ 1.15 hr )
Estendere le capacità creative di Figma attraverso il codice.

• Sviluppo di una web-app per integrare animazioni avanzate attraverso i file di Figma.
• Coding per Designers: setup dell’ambiente di sviluppo, live-server locale e bundling;
• Preparazione degli assets in Figma per la realizzazione di prototipi interattivi;

ANIMATE

Fig{max} Creative Development

Motion Design ( ~ 1.30 hr )
Design e sviluppo di animazioni per il web

• Coding di animazioni interattive attraverso GSAP.
• Timeline, Easing ed Eventi DOM.
• Motion design trends, risorse e references per lo sviluppo.

Codici, sconti e regali

I nostri sponsor hanno messo a disposizione dei premi per tutti i partecipanti e regali a estrazione.

  • Fifthbeat
    1 borsa di studio per UX Dojo del valore di 2000€ per un estratto a sorte tra tutti gli iscritti
  • Avocode
    2 anni di account per un estratto a sorte tra tutti gli iscritti
  • Balsamiq
    3 mesi di estensione trial per tutti gli iscritti
  • Overflow
    20% di sconto sulla licenza annuale per tutti gli iscritti. 1 anno gratis per un estratto a sorte tra tutti gli iscritti
  • Zeplin
    3 mesi di Starter account per tutti gli iscritti
  • Stickermule
    Un codice promozionale per tutti gli iscritti

Tickets

Riserva il tuo posto in anticipo e risparmia sul prezzo

Super Early Bird

150€
  • fino al 15 novembre

Early Bird

200€
  • fino al 6 dicembre

Full Price

250€
  • dal 7 dicembre
[tt-event url='https://www.tickettailor.com/all-tickets/airbagstudiosrl/ref/website_widget/' minimal='true' bg_fill='true' show_logo='false' ]
pricing

Sponsor

Ringraziamo gli sponsor dell’evento per il prezioso supporto

Partners

La realizzazione di questo evento è stata possibile anche grazie al prezioso aiuto dei nostri partner

HANDOFF si rivolge a tutti quei professionisti, creativi digitali, designer e developer che credono nella visione di un futuro in cui queste figure professionali convergono sempre di più e le cui competenze tendono a contaminarsi.

HANDOFF vuole raccontare e diffondere il rinascimento del design digitale attraverso la testimonianza e la pratica condivisa di designer e developer professionisti che si sono contraddistinti, sulla scena italiana e internazionale, proprio per questa loro capacità di innovare con una visione più ampia e trasversale della progettazione, integrando conoscenze che solo fino a qualche anno fa erano impensabili, per l’uno e per l’altro.

location

Turning Pixels into Code

Seminari, conferenze, articoli e risorse dedicati a designer e developer digitali
Lascia qui i tuoi dati per ricevere la nostra newsletter.
I tuoi dati sono sacri ♥ No spam.
Grazie della fiducia.

Desideri maggiori informazioni o vuoi contattarci per proporre un seminario o un articolo?
Scrivici a

info@handoff.dev

mailblock

Utilizzando il sito, accetti l'utilizzo dei cookie da parte nostra. maggiori informazioni

Questo sito utilizza i cookie per fornire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o cliccando su "Accetta" permetti il loro utilizzo.

Chiudi