Figma for Web Designer | open

Un workshop dedicato ai designer che vogliono realizzare progetti digitali conformi con tutte le  best practice  dello sviluppo digital moderno.

Scopo del corso

Formare designer professionisti all’utilizzo di FIGMA per la progettazione di siti internet e app moderne e conformi agli standard di sviluppo software.

Il corso presume che l’utente conosca già le funzioni di design di FIGMA e che abbia una discreta manualità nell’utilizzo dello strumento. Qualora questo livello di ingresso non sia disponibile, si consiglia di seguire prima il corso 100 FIGMA.
Il corso è disponibile in due versioni (10x e 20x) che tiene conto dell’esperienza e maturità tecnica dei partecipanti presenti in aula al fine di poter armonizzare il livello tecnico delle lezioni. In fase di acquisizione dello studente, si eseguirà un test di ingresso che ne determina il livello e il tipo di corso consigliato.
La formazione verrà svolta con l’approccio flip-learning che prevede lo studio autonomo delle basi tecniche e il confronto in aula con il docente per la parte di approfondimento e discussione.

Premessa

La progettazione di interfacce di siti internet, web app e mobile app (comunemente chiamata UI) è diversa dalla creazione di layout visuali finalizzati alla stampa o al video.
Si deve ricordare che l’applicazione che stiamo progettando dovrà adattarsi a diversi tipologie di browser, dimensioni di schermi e di caratteri.
Creare l’interfaccia in modo “statico” pensando al suo utilizzo in un ambiente immutabile e fisso è sbagliato e produce dei risultati non corretti.
Gli stressi standard di accessibilità moderni impongono che il nostro sito possa adattarsi alle esigenze diverse degli utilizzatori.
 
Allo stesso modo in cui un designer esperto di stampa, adatta i contenuti e gli spazi quando progetta una brochure A4 o un cartellone pubblicitario 6 x8 m o un biglietto da visita o un video, allo stesso modo deve imparare a considerare tutte le variabili presenti negli schermi e device degli utenti, considerando che, a differenza della grafica “tradizionale” il formato di output spesso non è prevedibile e può variare nel tempo.
 
Questo corso vuole mostrare ai designer che si cimentano nella progettazione di siti internet quali sono le diverse “problematiche” che il developer deve poi risolvere quando traduce un progetto di design in una applicazione funzionante e di conseguenza come il designer possa creare un progetto più realistico e attinente al prodotto risultante finale.

Requisiti necessari per partecipare

  • esperienza professionale nel design di siti internet
  • conoscenza approfondita di tool di design come Adobe Photoshop e Illustrator
  • conoscenza basilare di Figma (aver completato i tutorial consigliati)
  • conoscenza base dell’inglese (per tutorial e interfaccia del software che sono in inglese)
  • il corso si tiene da remoto: è altamente consigliato avere un monitor con risoluzione molto alta o meglio due schermi dove poter mantenere la finestra condivisa dal docente affiancata alla propria per svolgere le esercitazioni

Modalità di partecipazione

  • Lo studente si registra sul portale https://f.academy e richiede l’accesso al corso almeno 2 settimane prima della prima lezione
  • Lo studente segue le indicazioni propedeutiche al corso, che prevedono:
    • creare un account gratuito di Figma
    • eventualmente scaricare e installare l’app
    • risponde al questionario di ingresso
    • seguire i tutorial video indicati (totale 1,5 ore di tutorial)
    • realizzare un primo progetto di pagina in accordo con quanto richiesto nel corso e caricarlo sulla piattaforma: esercizio 1.
 
Il docente, quando riceverà il materiale elaborato, valuterà il livello di conoscenza dello studente e lo ammetterà su di uno dei due livelli di corso disponibili:
  • livello 101: corso orientato a chi ha scarsa esperienza di web design moderno e non utilizza tool come Figma, Sketch o XD per realizzare progetti digitali
  • livello 201: corso orientato a chi ha già buona esperienza di uno di questi tool e che deve solo integrare le nuove competenze digital per una progettazione migliore verso la parte developer.

Modalità di esecuzione del corso

In fase di accesso al corso si richiede allo studente di mandare (condividere link) un progetto web realizzato con FIGMA (a propria scelta ma comunque uno progetto esecutivo da inviare ai developer per la produzione) o in alternativa si propone un esercizio (rifare una pagina di cui si fornisce il design di partenza in pdf) ESERCIZIO 1.
 
Analizzando il file ricevuto si decide il livello di ingresso al corso consigliato e di conseguenza si predispone una lezione di livello diverso in funzione del livello dei partecipanti.
 
Lezione 1: è di presentazione frontale e teorica: gli studenti fanno domande ma non si esercitano
Lezione 2: si riceve un video contenente la lezione tecnica al termine della lezione 1 (video della durata di 1h circa) e si riceve l’ESERCIZIO 2 da fare come compito prima della seconda lezione.
I lavori vanno consegnati entro il giovedì per permettere al docente di analizzarli per affrontare poi in aula gli errori più diffusi.
Durante la lezione 2 si correggono i “lavori” e si risponde alle domande degli studenti, mostrando nuovamente come svolgere alcuni dei compiti assegnati nel esercizio.

Video necessari da visionare prima del corso

Video consigliati extra

Da leggere per chi usa Adobe XD

Iscrivetevi all 'evento annuale di Figma 10