{"id":6235,"date":"2019-03-26T09:17:46","date_gmt":"2019-03-26T08:17:46","guid":{"rendered":"https:\/\/www.addlance.com\/blog\/?p=6235"},"modified":"2021-02-17T23:33:07","modified_gmt":"2021-02-17T22:33:07","slug":"material-design","status":"publish","type":"post","link":"https:\/\/seven.addlance.com\/beta\/blog\/material-design\/","title":{"rendered":"Material Design, da Google alla User Experience: Viaggio nella Progettazione delle Interfacce grafiche"},"content":{"rendered":"<div id=\"attachment_6237\" style=\"width: 310px\" class=\"wp-caption alignright\"><img decoding=\"async\" aria-describedby=\"caption-attachment-6237\" class=\"wp-image-6237 size-medium\" title=\"Material Design Google\" src=\"https:\/\/www.addlance.com\/wp-content\/uploads\/2019\/03\/material_design_awards_inline_002_Google-300x169.jpg\" alt=\"Material Design Google\" width=\"300\" height=\"169\" srcset=\"https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2019\/03\/material_design_awards_inline_002_Google-300x169.jpg 300w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2019\/03\/material_design_awards_inline_002_Google-1024x576.jpg 1024w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2019\/03\/material_design_awards_inline_002_Google-768x432.jpg 768w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2019\/03\/material_design_awards_inline_002_Google-1536x864.jpg 1536w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2019\/03\/material_design_awards_inline_002_Google-2048x1152.jpg 2048w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2019\/03\/material_design_awards_inline_002_Google-610x343.jpg 610w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2019\/03\/material_design_awards_inline_002_Google-1080x608.jpg 1080w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><p id=\"caption-attachment-6237\" class=\"wp-caption-text\">Fonte: Google Design<\/p><\/div>\n<p>Oggi navigare su siti internet o <em>app<\/em> \u00e8 diventato per noi quasi scontato. Milioni sono le pagine e le applicazioni che visitiamo ed usiamo tutti i giorni, ma cosa c&#8217;\u00e8 dietro tutto quello che vediamo? Sicuramente una lunga ed attenta progettazione, specialmente per quanto riguarda <strong>l&#8217;<a href=\"https:\/\/www.addlance.com\/s\/web-design\">interfaccia grafica<\/a><\/strong> che visualizziamo. Il <em>design <\/em>che ci appare non \u00e8 solo un qualcosa di puramente estetico, ma \u00e8 studiato per permetterci di usufruire al meglio del servizio, prodotto o semplicemente pagina che andremo a visualizzare. Il <em><strong>Material Design<\/strong><\/em>, nasce ad opera di <strong>Google <\/strong>ed ha come intento proprio quello di dare una maggiore definizione al concetto di progettazione delle <strong>interfacce grafiche<\/strong> per supporti virtuali.<\/p>\n<p><!--more--><\/p>\n<h2>Material Design: nella creazione di interfacce, l&#8217;esperienza utente \u00e8 al centro di tutto<\/h2>\n<p>Citando Google<\/p>\n<blockquote><p>il <em><strong>Material Design<\/strong><\/em> \u00e8 un linguaggio visivo che sintetizza i principi classici del buon <em>design<\/em> con l&#8217;innovazione della tecnologia e della scienza.<\/p><\/blockquote>\n<p>&nbsp;<\/p>\n<p style=\"text-align: center;\">Leggi anche <a href=\"https:\/\/www.addlance.com\/blog\/heatmap-mappe-di-calore\/\">Come migliorare l\u2019esperienza utente usando la Heatmap<\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Viene presentato nel <strong>2014<\/strong> alla conferenza <strong>Google I \/ O<\/strong>, come un <em>design <\/em>innovativo che pone <strong>l&#8217;esperienza dell&#8217;utente al centro<\/strong> di tutto il processo di creazione, creando un aspetto grafico in grado di risultare:<\/p>\n<ul>\n<li>Intuitivo<\/li>\n<li>Elegante<\/li>\n<li>Interattivo.<\/li>\n<\/ul>\n<p>Inoltre, \u00e8 pensato per essere utilizzato ed adattato a dispositivi di dimensioni diverse come <em>tablet, smartphone, desktop<\/em> e visualizzato da sistemi operativi come <strong>Android, iOs, Windows<\/strong>, fino alle piattaforme Web, mantenendo, per ogni dispositivo, tutti gli aspetti estetici tipici di questo <em>design.<\/em><\/p>\n<h2>Dallo <em>Scheumorfismo<\/em> passando per il <em>Flat design<\/em>: ecco come nasce l&#8217;idea del <em>Material design\u00a0<\/em><\/h2>\n<p>Fino a prima dell&#8217;avvento di questo nuovo modo di progettare le interfacce virtuali, esistevano due tipi di <em>design<\/em>, tutt&#8217;ora utilizzati: lo <em><strong>scheumorfismo<\/strong><\/em> ed il <strong><em>flat design<\/em><\/strong>.<\/p>\n<p>Lo scheumorfismo \u00e8 quella corrente del <em>design<\/em> che si propone di <strong>rappresentare un oggetto nella sua forma reale.<\/strong> Il nome deriva dal greco ed indica \u00e8 un ornamento fisico o grafico apposto su un oggetto, allo scopo di richiamare le caratteristiche estetiche di un altro. Questo tipo di <em>design<\/em> era molto diffuso in passato, specialmente sui supporti <strong>Apple<\/strong> e puntava <strong>all&#8217;idea di familiarit\u00e0<\/strong>. L&#8217;utente si approcciava pi\u00f9 facilmente all&#8217;uso del digitale, in quanto vi ritrovava forme di uso quotidiano.<\/p>\n<p>Lo scheumorfismo tuttavia presenta alcuni problemi, come la <strong>lentezza <\/strong>nella realizzazione e la <strong>poca compatibilit\u00e0 <\/strong>con i linguaggi web. Dal 2010 in poi si assiste ad un cambio di tendenza, diffuso ad opera di <strong>Microsoft,<\/strong> con l&#8217;avvento del <em>Flat design<\/em>. Tutto il concetto di realistico viene messo da parte, in favore di un design \u201cpiatto\u201d (appunto <em>flat<\/em>), semplice, definito ed altamente stilizzato. Il <em>Flat design<\/em> non si pone pi\u00f9 come imitazione della realt\u00e0, ma <strong>crea un <em>design<\/em> a s\u00e9<\/strong>, perfetto per i supporti digitali. Tuttavia questo tipo di <em>design <\/em>ha alcune <strong>carenze a livello di usabilit\u00e0<\/strong>, spesso non \u00e8 semplice e intuitivo per l&#8217;utente.<\/p>\n<p>Ed \u00e8 in questo quadro che si colloca il <strong><em>Material design<\/em><\/strong>, interpretando il ruolo di un <em>design<\/em> che <strong>risolve ed innova<\/strong> rispetto ai suoi predecessori.<\/p>\n<h2>Material Design, perch\u00e9 <em>Material<\/em> e perch\u00e9 <em>design<\/em>?<\/h2>\n<p>Sempre citando Google,<\/p>\n<blockquote><p><em>Material<\/em> \u00e8 una metafora, un bisogno di dare un senso materiale ad un <em>design<\/em> immateriale.<\/p><\/blockquote>\n<p>Come abbiamo gi\u00e0 visto, la problematica del <em>flat<\/em> \u00e8 appunto l&#8217;usabilit\u00e0, in quanto un <em>design<\/em> troppo &#8220;piatto&#8221; <strong>non riesce a farsi comprendere perfettamente dall\u2019utente. <\/strong>Ed \u00e8 qui che nasce la sfida di <strong>Google<\/strong>, con il suo nuovo <em>design<\/em>, ispirato al mondo fisico, con superfici che riflettono la luce e le ombre e si comportano in modo dinamico. <strong>Il materiale, in questo caso, \u00e8 un tessuto digitale che risponde in base a come interagisce con l&#8217;utente<\/strong>.<\/p>\n<p>Alla base della filosofia del <em>Material<\/em> vi \u00e8 <strong>l&#8217;esperienza tattile<\/strong>, infatti \u00e8 pensato principalmente per essere usato su tutti quegli applicativi <em>touch<\/em> nel modo pi\u00f9 fluido e semplice possibile. Ombre, spigoli, dimensioni e soprattutto la dinamicit\u00e0 contribuiscono a <strong>rendere l&#8217;esperienza dell\u2019utente ancora pi\u00f9 realistica.<\/strong><\/p>\n<p style=\"text-align: center;\"><strong>\u00a0<\/strong>Leggi anche <a href=\"https:\/\/www.addlance.com\/blog\/fare-una-app\/\">Fare una App: le 10 regole d\u2019oro per creare una interfaccia utente efficace<\/a><\/p>\n<p>&nbsp;<\/p>\n<h2>Le 6 caratteristiche del <em>Material design<\/em><\/h2>\n<p>Numerosi sono i tratti distintivi scelti da Google per rappresentare l&#8217;interfaccia grafica del <em>Material design<\/em>. Scelte assolutamente non casuali, ma frutto di un lungo ed attento studio, rivolto all&#8217;<strong>usabilit\u00e0<\/strong> e all&#8217;<strong>adattabilit\u00e0<\/strong>. Inoltre, fornisce tutti gli <strong>standard di progettazione<\/strong> specifici per lo sviluppo di applicazioni su dispositivi <strong>Android, Web e iOs.<\/strong><\/p>\n<h3>1) Il Colore, ovvero la Google color palette<\/h3>\n<p>Il <em>Material<\/em> dedica ampio spazio alla <strong>scelta del colore<\/strong>, proponendo una vastissima gamma di scelte, in particolar modo vengono fornite delle <em>palette<\/em> con varie gamme cromatiche, per distinguere al meglio gli elementi UI e le varie parti dell&#8217;interfaccia. E\u2019 possibile scegliere fra sfumature di un solo colore primario o mettere in contrasto un colore primario ed uno secondario. In base a ci\u00f2 vengono poi definiti i colori per superfici, sfondi e messaggi di errore. Tutto il processo di scelta \u00e8 assistito attraverso un apposito <strong>generatore di colori<\/strong> che permette di creare la combinazione adatta in base a ci\u00f2 che pi\u00f9 preferiamo.<\/p>\n<p>&nbsp;<\/p>\n<h3>2) Le Icone, ovvero gli elementi base dell&#8217;usabilit\u00e0 app e web<\/h3>\n<p>Le icone sono ormai parte del linguaggio del web, sono universalmente comprensibili e ci aiutano a riconoscere le funzioni senza l&#8217;utilizzo di parole. Sono elementi base per quanto riguarda l&#8217;usabilit\u00e0 di un&#8217;applicazione o di un sito web. Il <em>Material design<\/em> considera due tipi di icone:<\/p>\n<ul>\n<li><strong>Icone &#8220;Product&#8221;<\/strong>, con dimensioni di 48 dp che comunicano l&#8217;idea alla base del prodotto e che rappresentano l&#8217;applicazione stessa<\/li>\n<li><strong>Icone di sistema<\/strong>, con dimensione 28dp, che, invece, individuano i comandi e le azioni possibili, all&#8217;interno dell&#8217;applicazione. Numerose sono le linee guida che riguardano l&#8217;uso e la creazione di queste icone, anche per quanto riguarda il colore e la forma.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3>3) La Tipografia: non solo esigenza stilistica<\/h3>\n<p>Il testo \u00e8 un <strong>elemento grafico fondamentale<\/strong> ed il <em>Material<\/em> non lascia nulla al caso, nemmeno per quanto riguarda la tipografia. Il testo \u00e8 essenziale, soprattutto per il posizionamento sui motori di ricerca e la scelta della <em>Font<\/em> non soddisfa solo un&#8217;esigenza stilistica, ma anche di <strong>immediatezza<\/strong> e <strong>leggibilit\u00e0<\/strong>. <strong>Roboto e Noto<\/strong> sono i caratteri scelti da <strong>Google<\/strong> e, la progettazione <em>Material<\/em>, indica linee guida chiare per gestire la scrittura di tutte le parti dell&#8217;interfaccia utente.<\/p>\n<p>&nbsp;<\/p>\n<h3>5) Il Layout che migliora la coerenza tra gli ambienti<\/h3>\n<p>Il layout nel <em>Material design<\/em> utilizza strumenti come griglie di base e modelli strutturali per migliorare la coerenza tra gli ambienti. Questi layout sono <strong>in grado di adattarsi alle varie dimensioni dei supporti<\/strong> su cui sono visualizzati in modo da creare un <em>design<\/em> completamente <strong>responsivo<\/strong>.<\/p>\n<p>Infatti attraverso l&#8217;uso di colonne, spazi e margini, che si adattano in base ai vari &#8220;<em>breakpoint&#8221;<\/em>, vengono definite le dimensioni dei singoli supporti come <em>tablet, smartphone o desktop<\/em> ed \u00e8 possibile creare un <strong><em>design dinamico<\/em><\/strong> in grado di adattarsi ad ogni <em>device,<\/em> mantenendo le caratteristiche di usabilit\u00e0, anche attraverso la trasformazione degli elementi che lo compongono.<\/p>\n<p>&nbsp;<\/p>\n<h2>Insomma, il <em>Material design<\/em> \u00e8 un vero e proprio metodo di progettazione che ogni <em>User designer<\/em> dovrebbe praticare<\/h2>\n<p>Indubbiamente il <em>Material design<\/em> ha posto le basi per la creazione di un modo di disegnare e progettare tipico dei prodotti destinati al web, considerando tutta una serie di aspetti che fino ad ora non erano stati considerati ufficialmente e cercando di colmare tantissime lacune, creando un vero e proprio metodo di progettazione.<\/p>\n<p>Sicuramente oggi \u00e8 un grandissimo riferimento per tutti i <em>designer <\/em>che si approcciano <strong><em>all&#8217;User Interface,<\/em><\/strong> in quanto offre numerosissimi spunti, raccogliendo tutta una serie di principi ed informazioni che un <strong><em>User designer<\/em><\/strong> non dovrebbe mai trascurare.<\/p>\n<p><em>Guest post a cura di Giorgia di Serafino<\/em><\/p>\n<p>&nbsp;    \t<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Il Material design ideato da Google nel 2014 \u00e8 oggi un vero e proprio metodo di progettazione per creare app e siti web ottimali per l&#8217;esperienza utente<\/p>\n","protected":false},"author":5,"featured_media":6237,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":""},"categories":[16],"tags":[31],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/posts\/6235"}],"collection":[{"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/comments?post=6235"}],"version-history":[{"count":1,"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/posts\/6235\/revisions"}],"predecessor-version":[{"id":10798,"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/posts\/6235\/revisions\/10798"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/media\/6237"}],"wp:attachment":[{"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/media?parent=6235"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/categories?post=6235"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/tags?post=6235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}