[🆕]: Design Engineering

[pixu1980]

🆕 Nuovo capitolo - Design Engineering

Descrizione

Il Design Engineering rappresenta l'intersezione tra progettazione visiva e sviluppo tecnico, con l'obiettivo di trasformare idee e interfacce utente in componenti funzionali, scalabili e accessibili. Questo processo si articola in fasi ben definite, ciascuna con obiettivi chiari, metodologie specifiche e strumenti dedicati. Il risultato è un prodotto digitale robusto, coerente e facilmente manutenibile.

L'approccio al Design Engineering copre l'intero ciclo di vita di un'interfaccia, partendo dall'analisi iniziale del design, passando per la tokenizzazione e la scrittura del codice, fino ad arrivare alla creazione di UI Kit, testing approfondito e validazione finale.

1. Analisi del Design

• Obiettivi e metodologie per comprendere e validare le esigenze progettuali.
• Checklist di analisi.
• Strumenti per l'analisi (es. Figma, Miro, Zeplin).

2. Stesura del Progetto di Codifica (Tokenizzazione)

• Definizione dei Design Token.
• Tipologie di Token (Colori, Tipografia, Spaziature).
• Strumenti per la gestione dei token (es. Style Dictionary, Figma Tokens).

3. Scrittura del Codice

• Best practice per codice leggibile, manutenibile e accessibile.
• Modularità e riutilizzabilità dei componenti.
• Strumenti di sviluppo (es. Jest, ESLint, Prettier).

4. Derivazione degli UI Kit con Custom Elements e Progressive Enhancement

• Creazione di componenti riutilizzabili.
• Uso dei Custom Elements.
• Garantire il Progressive Enhancement.
• Strumenti consigliati (es. Storybook, Modernizr).

5. Testing e Visual Diffing

• Tipi di test (Unit, Integration, E2E, Visual Diffing).
• Strumenti di Testing (es. Jest, Cypress, Percy).
• Best practice per pipeline CI/CD.

6. Conclusioni

• L'importanza di un approccio iterativo.
• Cultura collaborativa tra designer e sviluppatori.
• Roadmap per il miglioramento continuo.

Fonti

• Design Systems Handbook
• Atomic Design by Brad Frost
• Inclusive Design Principles
• Google Material Design Guidelines
• Smashing Magazine - Design Engineering Articles

[create-issue-branch]

Branch add/design-engineering created!

[BrianAtzori]

Ciao @pixu1980 perdonami l'imperdonabile ritardo, sono riuscito solo ora a guarda effettivamente il TOC e devo dirti... WOW.

Mi sembra davvero ottimo e completo, secondo me l'output sarà una bombetta 🚀

Ti faccio solo un appunto, come giustamente richiede il capitolo menzioni molte tecnologie e strumenti ma come progetto abbiamo deciso di non prendere posizione o opinioni su framework, librerie, tools ecc ecc, per evitare flame e altro... quindi se possibile e ti riesce cerca di far arrivare il messaggio che sono un esempio di che cosa puoi utilizzare e magari suggeriscine più di uno, per il resto il TOC è fantastico e non vedo l'ora di leggere i contenuti!

Appena hai qualcosa pusha pure i contenuti che li vediamo insieme, buon lavoro!

[pixu1980]

Ciao @BrianAtzori assolutamente d'accordo.
Ho letto la policy e non ho nessuna intenzione di parlare di tecnologie specifiche ma di concetti, ne parlavamo giusto stamattina alla call di brainstorming con Nicola Centonze che mi aiuterà a redigere il capitolo.

L'unica cosa che in qualche sezione metteremo sono esempi in codice rigorosamente in tecnologia vanilla (HTML, CSS, JS), che dovrebbe essere tecnologia standard, condivisa per tutti e non dovrebbe causare flame o altro.

Non c'è nessuna intenzione di focalizzarsi, o prendere a riferimento, framework, libreria o tool.

Potrebbe succedere, se proprio dovesse essere necessario, frasi del tipo "Per svolgere questo compito serve un bundler (ad esempio Parcel, Vite, Webpack, etc etc)", una cosa del genere si dovrebbe poter fare, corretto?

[Cadienvan]

Sì, purché il contenuto non sia limitato alla necessaria conoscenza di un framework o linguaggio, sì, quindi citare strumenti che al momento della stesura sono di rilievo e obiettivamente sensati è possibile!

[BrianAtzori]

Ciao @BrianAtzori assolutamente d'accordo.

Ho letto la policy e non ho nessuna intenzione di parlare di tecnologie specifiche ma di concetti, ne parlavamo giusto stamattina alla call di brainstorming con Nicola Centonze che mi aiuterà a redigere il capitolo.

L'unica cosa che in qualche sezione metteremo sono esempi in codice rigorosamente in tecnologia vanilla (HTML, CSS, JS), che dovrebbe essere tecnologia standard, condivisa per tutti e non dovrebbe causare flame o altro.

Non c'è nessuna intenzione di focalizzarsi, o prendere a riferimento, framework, libreria o tool.

Potrebbe succedere, se proprio dovesse essere necessario, frasi del tipo "Per svolgere questo compito serve un bundler (ad esempio Parcel, Vite, Webpack, etc etc)", una cosa del genere si dovrebbe poter fare, corretto?

Si ma infatti la mia era solo una chiarificazione/precisazione, poi è inevitabile citare tecnologie quando si parla di determinate cose, così come è inevitabile usare building block base come l'HTML quindi va benissimo! L'esempio di frase che hai fatto è esattamente ció a cui mi riferivo e pensavo 😉