{"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\/es\/tendencies\/material-design\/","title":{"rendered":"Material Design"},"content":{"rendered":"<p>La llegada de Android 5.0 Lollipop en junio de 2014 tambi\u00e9n supuso la presentaci\u00f3n oficial de un nuevo lenguaje visual, bautizado por Google como <strong>Material Design<\/strong>. De esta manera, Google daba una respuesta (y tambi\u00e9n una alternativa) al <a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/flat-design-disseny-pla\/\">dise\u00f1o plano<\/a> (<em>flat design<\/em>) popularizado por Apple con la aparici\u00f3n de iOS 7 apenas un a\u00f1o antes.<\/p>\n<p>V\u00eddeo: <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 palabras de Google, el objetivo del Material Design es \u201cdesarrollar un sistema \u00fanico que permita una experiencia unificada a trav\u00e9s de plataformas y tama\u00f1os de dispositivo\u201d. Por tanto, si bien el Material Design nac\u00eda como unas pautas enfocadas al dise\u00f1o en Android, su filosof\u00eda se extiende m\u00e1s all\u00e1, afectando tanto al dise\u00f1o web como a cualquier otra plataforma (m\u00f3viles, web, <em><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/plataformes-i-resolucions\/tecnologia-portable\/\" title=\"Tecnologia portable\">wearables<\/a><\/em>, <em>smart TV<\/em>&#8230;). De hecho, se espera que Google vaya aplicando progresivamente el Material Design en todos sus productos (Drive, Gmail, Google Maps, Google Calendar&#8230;), proporcionando as\u00ed una experiencia unificada, con independencia de la plataforma.<\/p>\n<p>Como caracter\u00edsticas principales, el Material Design juega con una tipograf\u00eda clara, colores planos y llamativos y el <strong>uso del eje Z para dar sensaci\u00f3n de profundidad y organizar jer\u00e1rquicamente los elementos en pantalla<\/strong>. Se trata de un sistema en el que los bordes, las luces, las sombras y los colores, junto con un cuidado uso de las transiciones y las animaciones, ayudan a guiar al usuario en el uso de la interfaz.<\/p>\n<blockquote><p>\nMaterial Design tiene superficies f\u00edsicas y bordes. Las escenas y las sombras proporcionan significado sobre lo que se puede tocar y c\u00f3mo se va a mover.<\/p>\n<footer>Mat\u00edas Duarte, vicepresidente de dise\u00f1o de Google (<a href=\"http:\/\/www.engadget.com\/2014\/06\/25\/googles-new-design-language-is-called-material-design\/\" target=\"_blank\">fuente<\/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\/files\/2015\/03\/z_Axis.png\"><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\u00e1s informaci\u00f3n y enlaces relacionados:<\/strong><br \/>\n&#8211;<a href=\"http:\/\/www.google.com\/design\/spec\/material-design\/introduction.html\" target=\"_blank\">Gu\u00eda oficial de Google sobre Material Design<\/a>.<\/p>\n<p>&#8211;<a href=\"https:\/\/developer.android.com\/training\/material\/index.html\" target=\"_blank\">Gu\u00eda para desarrolladores de apps con Material Design<\/a>.<\/p>\n<p>&#8211;<a href=\"http:\/\/www.elandroidelibre.com\/2014\/11\/que-es-material-design.html\" target=\"_blank\">\u00bfQu\u00e9 es el Material Design?<\/a><br \/>\n<\/p>","protected":false},"excerpt":{"rendered":"<p>La llegada de Android 5.0 Lollipop en junio de 2014 tambi\u00e9n supuso la presentaci\u00f3n oficial de un nuevo lenguaje visual, bautizado por Google como Material Design. De esta manera, Google daba una respuesta (y tambi\u00e9n una alternativa) al dise\u00f1o plano (flat design) popularizado por Apple con la aparici\u00f3n de iOS 7 apenas un a\u00f1o antes. &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/tendencies\/material-design\/\" class=\"more-link\">Seguir leyendo<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\/es\/wp-json\/wp\/v2\/pages\/425","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/comments?post=425"}],"version-history":[{"count":7,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/pages\/425\/revisions"}],"predecessor-version":[{"id":433,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/pages\/425\/revisions\/433"}],"up":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/pages\/653"}],"wp:attachment":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/media?parent=425"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/dii\/es\/wp-json\/wp\/v2\/tags?post=425"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}