{"id":425,"date":"2015-03-16T13:33:16","date_gmt":"2015-03-16T12:33:16","guid":{"rendered":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/?page_id=425"},"modified":"2015-04-07T12:43:58","modified_gmt":"2015-04-07T11:43:58","slug":"material-design","status":"publish","type":"page","link":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/tendencies\/material-design\/","title":{"rendered":"Material Design"},"content":{"rendered":"<p>L\u2019arribada d\u2019Android 5.0 Lollipop al juny de 2014 tamb\u00e9 va suposar la presentaci\u00f3 oficial d\u2019un nou llenguatge visual, batejat per Google com <strong>Material Design<\/strong>. D\u2019aquesta manera, Google donava una resposta (i tamb\u00e9 una alternativa) al <a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/flat-design-disseny-pla\/\" title=\"Flat design (disseny pla)\">disseny pla<\/a> (<em>flat design<\/em>) popularitzat per Apple amb l\u2019aparici\u00f3 d\u2019iOS 7 amb prou feines un any abans.<\/p>\n<p><strong>V\u00eddeo:<\/strong> <a href=\"https:\/\/www.youtube.com\/watch?v=Q8TXgCzxEnw\" target=\"_blank\">Material Design<\/a><\/p>\n<p><iframe loading=\"lazy\" title=\"Material design\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/Q8TXgCzxEnw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>En paraules de Google, l\u2019objectiu del Material Design \u00e9s \u201cdesenvolupar un sistema \u00fanic que permeti una experi\u00e8ncia unificada a trav\u00e9s de plataformes i mides de dispositiu\u201d. Per tant, si b\u00e9 el Material Design naixia com unes pautes enfocades al disseny a Android, la seva filosofia s\u2019est\u00e9n m\u00e9s enll\u00e0 i afecta tant el disseny web com qualsevol altra plataforma (m\u00f2bils, web, <em><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/plataformes-i-resolucions\/tecnologia-portable\/\" title=\"Tecnologia portable\">wearables<\/a><\/em>, <em>smart TV<\/em>&#8230;). De fet, s\u2019espera que Google vagi aplicant progressivament el Material Design a tots els seus productes (Drive, Gmail, Google Maps, Google Calendar&#8230;) i proporcioni aix\u00ed una experi\u00e8ncia unificada, amb independ\u00e8ncia de la plataforma.<\/p>\n<p>Com a caracter\u00edstiques principals, el Material Design juga amb una tipografia clara, colors plans i cridaners i l\u2019<strong>\u00fas de l\u2019eix Z per fer sensaci\u00f3 de profunditat i organitzar jer\u00e0rquicament els elements en pantalla<\/strong>. Es tracta d\u2019un sistema en el qual les vores, les llums, les ombres i els colors, juntament amb un \u00fas cuidat de les transicions i les animacions, ajuden a guiar l\u2019usuari en l\u2019\u00fas de la interf\u00edcie.<\/p>\n<blockquote><p>Material Design t\u00e9 superf\u00edcies f\u00edsiques i vores. Les escenes i les ombres proporcionen significat sobre el que es pot tocar i com es mour\u00e0. <\/p>\n<footer> Mat\u00edas Duarte, vicepresident de disseny de Google (<a href=\"http:\/\/www.engadget.com\/2014\/06\/25\/googles-new-design-language-is-called-material-design\/\" target=\"_blank\">font<\/a>)<\/footer>\n<\/blockquote>\n<figure id=\"attachment_426\" aria-describedby=\"caption-attachment-426\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/material-design\/z_axis\/\" rel=\"attachment wp-att-426\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2015\/03\/z_Axis-300x189.png\" alt=\"A Material Design els elements tamb\u00e9 es posicionen en pantalla respecte a l\u2019eix Z (font imatge: google.com)\" width=\"300\" height=\"189\" class=\"size-medium wp-image-426\" srcset=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2015\/03\/z_Axis-300x189.png 300w, http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2015\/03\/z_Axis-1024x647.png 1024w, http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2015\/03\/z_Axis.png 1520w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><figcaption id=\"caption-attachment-426\" class=\"wp-caption-text\">A Material Design els elements tamb\u00e9 es posicionen en pantalla respecte a l\u2019eix Z (font imatge: google.com)<\/figcaption><\/figure>\n<p><strong>M\u00e9s informaci\u00f3 i enlla\u00e7os relacionats:<\/strong><br \/>\n&#8211; <a href=\"http:\/\/www.google.com\/design\/spec\/material-design\/introduction.html\" target=\"_blank\">Guia oficial de Google sobre Material Design<\/a>.<\/p>\n<p>&#8211; <a href=\"https:\/\/developer.android.com\/training\/material\/index.html\" target=\"_blank\">Guia per a desenvolupadors d\u2019apps amb Material Design<\/a>.<\/p>\n<p>&#8211; <a href=\"http:\/\/www.elandroidelibre.com\/2014\/11\/que-es-material-design.html\" target=\"_blank\">Qu\u00e8 \u00e9s el Material Design?<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>L\u2019arribada d\u2019Android 5.0 Lollipop al juny de 2014 tamb\u00e9 va suposar la presentaci\u00f3 oficial d\u2019un nou llenguatge visual, batejat per Google com Material Design. D\u2019aquesta manera, Google donava una resposta (i tamb\u00e9 una alternativa) al disseny pla (flat design) popularitzat per Apple amb l\u2019aparici\u00f3 d\u2019iOS 7 amb prou feines un any abans. V\u00eddeo: Material Design &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/tendencies\/material-design\/\" class=\"more-link\">Continua llegint <span class=\"screen-reader-text\">\u00abMaterial Design\u00bb<\/span><\/a><\/p>\n","protected":false},"author":65,"featured_media":0,"parent":653,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"plantilla-pagina.php","meta":{"footnotes":""},"tags":[],"class_list":["post-425","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/pages\/425","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/comments?post=425"}],"version-history":[{"count":7,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/pages\/425\/revisions"}],"predecessor-version":[{"id":433,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/pages\/425\/revisions\/433"}],"up":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/pages\/653"}],"wp:attachment":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/media?parent=425"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/wp-json\/wp\/v2\/tags?post=425"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}