- Cos\u2019\u00e8 l\u2019Atomic Design<\/a><\/li>
- Atomic Design e workshop di Design Thinking<\/a><\/li>
- Come applichiamo l\u2019Atomic Design durante i workshop?<\/a><\/li>
- I benefici dell\u2019Atomic Design<\/a><\/li><\/ol><\/div><\/div><\/p>
Sempre pi\u00f9 clienti hanno l’esigenza\u00a0di rinnovare interfacce complesse e obsolete<\/a>. Per supportare il passaggio da un vecchio portale\/software ad una nuova piattaforma, in Intesys adottiamo l\u2019Atomic Design<\/strong>.<\/p>\n
Cos\u2019\u00e8 l\u2019Atomic Design<\/h2>\n
L\u2019Atomic Design negli ultimi anni \u00e8 diventato un approccio molto noto nell\u2019ambito della User Experience<\/em> (UX), del Visual Design<\/em> e del Web Design<\/em>. Questo metodo di progettazione, ideato da Brad Frost<\/a>, presuppone di progettare interfacce e creare Design System<\/a> tramite l\u2019identificazione e la progettazione degli elementi minimi che compongono una schermata: atomi, molecole, organismi, template e pagine.<\/p>\n
![\"\"](\"https:\/\/www.intesys.it\/journal\/wp-content\/uploads\/sites\/13\/2019\/01\/atomic_design.png\")
<\/p>\nOgni interfaccia, infatti, va intesa come\u00a0costituita\u00a0da elementi semplici che si compongono via via in organismi pi\u00f9 complessi<\/strong>.<\/p>\n
Vediamo un esempio.
\nAnalizzando la home page di Airbnb<\/a>, possiamo facilmente notare come sia composta\u00a0da:<\/p>\n![\"\"](\"https:\/\/www.intesys.it\/journal\/wp-content\/uploads\/sites\/13\/2019\/01\/Senza-titolo.png\")
<\/p>\n- \n
- singoli atomi (ad esempio il pulsante \u201cCerca\u201d)<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/www.intesys.it\/journal\/wp-content\/uploads\/sites\/13\/2019\/01\/Schermata-2019-01-29-alle-11.43.11.png\")
<\/p>\n- \n
- molecole (ad esempio pulsante \u201c<\/span><\/span>Cerca<\/span><\/span>\u201d e\u00a0<\/span><\/span>dropdownlist<\/span><\/span>\u00a0“<\/span><\/span>Ospiti”<\/span><\/span>)<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/www.intesys.it\/journal\/wp-content\/uploads\/sites\/13\/2019\/01\/Schermata-2019-01-29-alle-11.43.19.png\")
<\/p>\n- \n
- organismi (ad esempio, titolo di sezione con testi, pulsanti, input bar, ecc)<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/www.intesys.it\/journal\/wp-content\/uploads\/sites\/13\/2019\/01\/Schermata-2019-01-29-alle-11.43.29.png\")
<\/p>\n- \n
- Template (inteso come composizione di sezioni costituite da pulsanti, testi ed immagini)<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/www.intesys.it\/journal\/wp-content\/uploads\/sites\/13\/2019\/01\/Schermata-2019-01-29-alle-11.52.36.png\")
<\/p>\nL\u2019Atomic Design pu\u00f2 essere associato anche a momenti di design partecipativo con i clienti e con gli utenti finali che conoscono bene l\u2019interfaccia.
\nQuesto permette di arrivare a soluzioni innovative, grazie alle quali l\u2019interfaccia non viene stravolta bens\u00ec migliorata, incorporando elementi d\u2019innovazione e mantenendo abitudini e logiche sedimentate da anni nei comportamenti degli utenti.<\/p>\nAtomic Design e workshop di Design Thinking<\/h2>\n
Noi, in Intesys, progettiamo interfacce adottando il Design Thinking<\/a>.
\nLe caratteristiche di questo approccio (scoprile scaricando il White Paper<\/a>!) ci aiutano a definire fin da subito le migliori soluzioni possibili affiancandoci al cliente e al reparto IT.
\nDurante il processo di divergenza\/convergenza, costruiamo assieme un nuovo ambiente digitale, identificando da principio opportunit\u00e0 e problematiche.<\/p>\nApplichiamo l\u2019Atomic Design nella fase di convergenza<\/strong>, durante la quale, dopo aver esplorato le diverse opportunit\u00e0 e soluzioni,\u00a0definiamo nel concreto l\u2019interfaccia assieme a clienti, utenti finali e sviluppatori.
\nDelineiamo le singole componenti che andranno a comporre le interfacce finali.
\nAdottare l\u2019Atomic Design in workshop di design<\/a> per la ri-progettazione di interfacce complesse, significa:<\/p>\n- \n
- definire insieme (designer, IT e cliente) le singole componenti, basate su logiche conosciute dagli utenti finali e consolidate nel tempo (vedi articolo di Nielsen e Norman Group sul progettare nuovi portali<\/a>);<\/li>\n
- comporre fin da subito un Design System basato su componenti \u201catomiche<\/a>\u201d, replicabili e ri-utilizzabili nel tempo;<\/li>\n
- utilizzare uno UI kit (quali ad esempio Material, Clay, Ant Design) per framework di sviluppo frontend SPA<\/a> (in React, Angular, Liferay).<\/li>\n<\/ul>\n
Come applichiamo l\u2019Atomic Design durante i workshop?<\/h2>\n
- comporre fin da subito un Design System basato su componenti \u201catomiche<\/a>\u201d, replicabili e ri-utilizzabili nel tempo;<\/li>\n
- definire insieme (designer, IT e cliente) le singole componenti, basate su logiche conosciute dagli utenti finali e consolidate nel tempo (vedi articolo di Nielsen e Norman Group sul progettare nuovi portali<\/a>);<\/li>\n
- Template (inteso come composizione di sezioni costituite da pulsanti, testi ed immagini)<\/li>\n<\/ul>\n
- organismi (ad esempio, titolo di sezione con testi, pulsanti, input bar, ecc)<\/li>\n<\/ul>\n
- molecole (ad esempio pulsante \u201c<\/span><\/span>Cerca<\/span><\/span>\u201d e\u00a0<\/span><\/span>dropdownlist<\/span><\/span>\u00a0“<\/span><\/span>Ospiti”<\/span><\/span>)<\/li>\n<\/ul>\n
- Atomic Design e workshop di Design Thinking<\/a><\/li>