Cosa abbiamo affrontato

Sessione 6/6

Cosa abbiamo affrontato

Il workflow che segue un designer dall’idea al prototipo interattivo, fino al passaggio al codice

Cosa abbiamo affrontato

Abbiamo visto il workflow manuale, e le scorciatoie AI

AI ci ha permesso di accelerarci tanto, ma al contempo ha preso varie decisioni senza molto sendo. Può essere un buon punto di partenza su cui poi iterare, ma da solo non basta (AI Slop)

Cosa abbiamo affrontato

Abbiamo visto come funziona Figma, e come possiamo creare design low-fi, da passare magari all’AI come reference su cui esercitiamo il pieno controllo, o anche design hi-fi, con un ricco dettaglio visivo e prototipazione fino a interazioni dalle animazioni curatissime.

Cosa abbiamo affrontato

L’AI avanzerà sempre di più, per cui dobbiamo abituarci a questo strumento sempre più potente ed utile. Ma rimarrà uno strumento, e sta a noi decidere come impugnarlo.

Cosa abbiamo affrontato

Da visione a interazione

Troviamo il miglior workflow ad oggi a noi accessibile per portare la nostra visione in qualcosa che possiamo vedere, o addirittura qualcosa con cui possiamo interagire (ricordiamo che 4 anni fa sarebbe stata fantascienza più totale passare dal concept al prototipo funzionante nel giro di pochi minuti).

I tool

Figma

Google Flow

Whimsical

ChatGPT Images

I tool

Figma

Figma - un canvas che ci permette di muoverci velocemente buttando giù idea, assemblando schermate e prototipando interazioni.

Possiamo utilizzare plugin per inserire immagini (Unsplash e Pexels), icone (Google Material Icons) o per sincronizzare dati da fonti esterne, come Google Sheets (Google Sheets Sync).

Come Mirò, ma con molte funzionalità in più: Figma può essere il luogo in cui i design vivono come single source of truth, casa per i designer dove pm e dev sono ospiti graditi.

I tool

Google Flow - ci permette di generare immagini Nano Banana molto più velocemente che con Gemini, potendo facilmente generare anche 4 o più immagini alla volta (anche 20+ immagini in parallelo). Ottimo per iterare sullo stile, o per creare illustrazioni e altri asset grafici.

I tool

Whimsical

Whimsical - Un ottimo visualizer e editor dei diagrammi Mermaid generati dai LLM come Gemini o ChatGPT.

ChatGPT Images

ChatGPT Images - un modello di generazione immagini potentissimo, soprattutto in modalità thinking (esclusiva degli account a pagamento). Permette di creare immagini che integrano sezioni ed elemeni UI sensati, quelli che spesso una generazione diretta in codice trascura nelle prime iterazioni.

Workflow con gli LLM:

Generazione dei diagrammi Mermaid.
Generazione di un user flow, problem framing canvas canvas o iterazione su un flow/canvas creato da noi.
Generazione di un prototipo in HTML.
Generazione di immagini per guida stilistica o per bozza di contenuto di un layout.

Workflow con gli LLM:

La reverse interaction - per mettere in discussione le nostre idee lasciando all’AI il compito di interrogarci e di mettere in discussione / criticare le nostre scelte. Non vogliamo che l’AI ci fornisca le risposte, ma che ci dia un punto di vista che potrebbe esserci sfuggito, permettendoci di iterare e migliorare la qualità del nostro lavoro.
Generazione di un intero applicativo attraverso Codex e sistemi simili.

Workflow per il deploy del codice del prototipo

Workflow per il deploy del codice del prototipo - un file .html può essere facilmente condiviso in un’email, ma alcuni altri tipi di prototipi necessitano di workflow o infrastruttura un po’ più complessi per essere facilmente condivisi. I più tecnici di voi sono hanno già dimostrato che sono in grado di gestire al meglio la condivisione di prototipi del genere, consiglio di sfruttare le loro skill per mettere in piedi un’infrastruttura che possa accelerare la prototipazione per tutti.

Workflow per il deploy del codice del prototipo

Ad esempio

Ad esempio, mettendo in piedi delle macchine virtuali con su Codex (o harness simili) con le skill che facilitino l’interazione e il deploy dei prototipi.

I principi del design da tenere a mente

Delight

Far vedere che dedichiamo la nostra attenzione nella progettazione delle esperienze, digitali e non, con grande cura di dettagli che aggiungano meraviglia. La rezione emotiva viscerale è un risultato importante per il quale bisogna progettare (fare design), la logica funzionale e le KPI del business non sono le uniche cose che meritano la nostra attenzione in fase del design.

Okram’s Razor

La soluzione migliore è la più semplice. La complessità aggiunge possibilità di errori e distrae. Semplifichiamo.

I principi del design da tenere a mente

Gerarchia semantica e visiva

Non dobbiamo mai mettere tutto sullo stesso piano d’importanza. Dobbiamo essere noi a guidare l’attenzione dell’utente, e se lo facciamo bene l’utente si fiderà di noi e si lascerà guidare. Come si fa? Per gli elementi più importanti aumentiamo la grandezza e il contrasto (es. grassetto, colore più scuro su sfondo chiaro), e li diminuiamo per elementi man mano meno rilevanti. Infine rimuoviamo le distrazioni.

I principi del design da tenere a mente

Horror Vacui

Capiamo come una boutique di lusso ha pochi elementi e molto spazio vuoto. Per essere percepiti con valore

Stile

Serve avere occhio. Bisogna investire nel creare contenuti graficamente belli - e non c’è modo se non lavorando con creator director, grafici e illustratori veramente bravi. L’AI può essere un tool potente nelle mani di una persona dal gusto forte, ma l’AI non ci arriva da sola.

Chiusura

AI accelera. Il design decide.

01

Partite dal workflow, non dal tool.

02

Usate l’AI per moltiplicare alternative, non per delegare il gusto.

03

Portate ogni output a un livello che meriti di essere visto, discusso e iterato.