Percorso di progetto — clicca una fase
Figma
www.figma.com/design/67F7sounys7XDpadyuYRgQ/
GitHub
github.com/Upstudiocreativo-context/tasselli
Drive
drive.google.com/drive/folders/1A_NUSx0GvHqU
Sito attuale
www.tasselli.it
Questionario
docs.google.com/spreadsheets/d/1LcvShuhQrF5Q
App
tasselli-upstudio.pages.dev
Prototipi UI/UX ntsproject (Adobe XD)
Esplorazione UI/UX realizzata da ntsproject, teoricamente già validata da Tasselli — base di partenza per il DS
UX Audit (Figma, pagina UX Audit)
Section con le 8 schermate XD ntsproject acquisite il 2026-10-12, base per l'analisi UX
UX Audit (FigJam)
Board con le 8 schermate XD ntsproject in sezioni (una per schermata, con zona NOTE), legenda post-it a colori. Cartella UP Studio. Le note dell'utente (commenti sul file Figma) vanno ancora importate come post-it.
Decisioni attive (17)
· Up Studio non riprogetta da zero: costruisce il design system in Figma partendo dai prototipi XD di ntsproject, allineandolo alle nuove guidelines Tasselli.
· Intervento UX limitato: solo modifiche minimali ma potenzialmente migliorative sui prototipi ntsproject.
· Le nuove guidelines Tasselli non sono ancora disponibili: si definiscono durante la costruzione del design system.
· Architettura token astryx-style sul modello Adriatica: collection Grezzi, Semantic-color (modo Light), Semantic-values, Responsive (Desktop 1440 · Tablet 768 · Mobile 390). Nessuna rampa brand finché non esistono le guidelines.
· Font di riferimento: Roboto (non condensed, non italic). Grezzi: font-family/sans-serif + 9 pesi Thin→Black in font-style/*.
· Scala tipografica (Grezzi): base 16px=1rem; 12·14·16 lineari poi ×1.25 da 16 → 20·25·31·39·49·61·76·95. Line-height per fascia in px interi (≤20px a 1.5 per WCAG 1.4.12, poi 1.35/1.25/1.15/1.1): 18·21·24·30·34·39·49·56·70·84·105.
· Letter-spacing (Grezzi) per step in %: xs 1.5 · sm 1 · md 0.5 · lg 0 · xl 0 · 2xl -0.5 · 3xl -0.5 · 4xl -1 · 5xl -1.5 · 6xl -2 · 7xl -2.5. Nei Text Styles bound ai valori px scalati per modo di Responsive.
· Responsive: typography/letter-spacing/{xs…7xl} aggiunto come alias dei Grezzi, stesso mapping per modo di font-size/line-height. Responsive verificato allineato ai Grezzi (font-size, line-height, letter-spacing).
· Responsive/typography/letter-spacing in px scalati a mano per modo (% Grezzo × size risolta / 100); Text Styles bound a Responsive. Se i % dei Grezzi cambiano, ricalcolare Responsive.
· Text Styles di test (nomi per rapporto semantico, non HTML): Label/sm·md·lg, Body/sm·md·lg, Header/Primary→Quinary, bound a Responsive+Grezzi. Viewport di test Desktop 1440 / Tablet 768 / Mobile 390 in Explorations con modo Responsive esplicito.
· Griglia opzione B (tecnica 24): Desktop 1440 24 col/margin 40/gutter 16 · Tablet 768 12 col/24/16 · Mobile 390 4 col/16/16. Layout Grid Styles Grid/Columns (bound a Responsive, adattivo), Grid/Baseline 8 (righe 8px), Grid/Columns + Baseline 8. Baseline 8 come overlay: tipografia non toccata.
· Page shell di test (header, hero, gamma prodotti a 4 card, footer) in Explorations su Desktop/Tablet/Mobile: griglia 24/12/4 e tipografia verificate insieme; layout/row-gap ripristinato in Responsive (64/48/32).
· Colori brand Tasselli nei Grezzi: color/brand/blue 50→1000 con ancore #77B2E2 (400) e #055799 (900), stessa tinta; color/brand/grey 50→1000 con ancora #9E9D9C (400). Non ancora mappati sui semantici (Gate 1).
· Grezzi: eliminate le rampe funzionali neutral e blue; neutri = color/brand/grey, azione = color/brand/blue. Nuova rampa funzionale color/purple (info = purple/600). Semantici ripuntati di conseguenza: accent/focus → brand/blue/900, neutri → brand/grey.
· Roboto Mono come seconda famiglia: Grezzi typography/font-family/mono; Text Styles Label Mono/sm·md·lg (Medium, stessi step e line-height delle Label, letter-spacing sempre 0 (typography/letter-spacing/none)) per dati tecnici.
· Icon generator table (pagina Figma): cella 64×64 a 8 segmenti con geometria rigorosa a simmetria quadrata (UNO: lati 8→56, diagonali da 8, vuoto 8; DUE: lati 16→48, diagonali da 4, vuoto 4), component set Icon cell con variante Griglia UNO/DUE, 8 booleani + ghost; tavole con ghost-grid sotto e cella attiva sopra. Interpretazione di UNO/DUE da confermare.
· UX Audit: acquisite le 8 schermate dei prototipi ntsproject con la numerazione XD (01a home wireframe, 01b home grafica, 01c menu, 01d find product, 02 Tasselli, 03 prodotti, 03.1 categoria, 04 scheda prodotto) e posizionate nella pagina Figma UX Audit (Section 'Prototipi ntsproject — schermate (Adobe XD)', larghezza 1345 px). Copie locali in ~/dev/2026-10_Tasselli/docs/ux-audit/. La home grafica (01b, 1345×8196) è inserita in 3 fette da 2732 px sotto il limite immagini di Figma (4096 px per lato), altrimenti veniva ridotta a metà risoluzione.
Team & referente
Edoardo · Digital Creative Lead
Riccardo · UI/UX Designer
Elisabetta · Project Manager
Arianna · Art Director
Michela · Account
J. Bolognini · Visual Designer (non coinvolto nel web, segue le altre applicazioni Tasselli)