{"id":217,"date":"2019-03-26T13:34:55","date_gmt":"2019-03-26T19:34:55","guid":{"rendered":"https:\/\/www.tesseractspace.com\/blog\/?p=217"},"modified":"2019-04-12T17:57:43","modified_gmt":"2019-04-12T22:57:43","slug":"sistema-de-diseno-material-design","status":"publish","type":"post","link":"https:\/\/www.tesseractspace.com\/blog\/sistema-de-diseno-material-design\/","title":{"rendered":"Sistema de dise\u00f1o: Material Design"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\">Cuando Larry Page tom\u00f3 el rol de CEO de Google en 2011, una de sus prioridades fue estandarizar los criterios de dise\u00f1o en los productos de la compa\u00f1\u00eda, dando los primeros pasos hacia la creaci\u00f3n de <em>Material Design<\/em>, el sistema de dise\u00f1o de Google.<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">En 2011, <strong>Google <\/strong>ya ten\u00eda varios productos para usuarios finales, desde su buscador web, <strong>Google Maps <\/strong>hasta <strong>GMail<\/strong> o <strong>Google AdWords<\/strong>. Los usuarios de estos servicios pod\u00edan utilizarlos en un navegador web, o como <em>apps<\/em> para <strong>Android <\/strong>o <strong>iOS<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">El problema entonces es que las diferentes versiones de un mismo producto era manejados por equipos diferentes, con ideas y enfoques que no siempre estaban alineados, por lo que el mismo servicio ten\u00eda muchas inconsistencias en su dise\u00f1o entre diversas plataformas.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"285\" src=\"https:\/\/i0.wp.com\/www.tesseractspace.com\/blog\/wp-content\/uploads\/2019\/03\/google-project-kennedy.jpg?resize=640%2C285&#038;ssl=1\" alt=\"Comparaci\u00f3n de las vistas de GMail en desktop, app para Android y web m\u00f3vil.\" class=\"wp-image-218\" srcset=\"https:\/\/i0.wp.com\/www.tesseractspace.com\/blog\/wp-content\/uploads\/2019\/03\/google-project-kennedy.jpg?resize=1024%2C456&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.tesseractspace.com\/blog\/wp-content\/uploads\/2019\/03\/google-project-kennedy.jpg?resize=300%2C134&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.tesseractspace.com\/blog\/wp-content\/uploads\/2019\/03\/google-project-kennedy.jpg?resize=768%2C342&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.tesseractspace.com\/blog\/wp-content\/uploads\/2019\/03\/google-project-kennedy.jpg?w=1392&amp;ssl=1 1392w, https:\/\/i0.wp.com\/www.tesseractspace.com\/blog\/wp-content\/uploads\/2019\/03\/google-project-kennedy.jpg?w=1280&amp;ssl=1 1280w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><figcaption>Comparaci\u00f3n de las vistas de GMail en desktop, app para Android y web m\u00f3vil.<\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">El primer intento de <strong>Google<\/strong> para estandarizar criterios de dise\u00f1o se llam\u00f3 <strong><a href=\"https:\/\/www.unleashed-technologies.com\/blog\/2013\/02\/13\/unified-design-inside-google%E2%80%99s-kennedy-project\">Project Kennedy<\/a>, <\/strong>con el objetivo de enfocar el dise\u00f1o en todos los productos y servicios de la empresa con los conceptos de refinamiento, espacio, limpieza, elasticidad, utilidad y sobre todo, simplicidad.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sin embargo, <strong>Project Kennedy<\/strong> se qued\u00f3 corto en su alcance, al comenzar a surgir m\u00e1s inconsistencias entre plataformas, y problemas de usabilidad e implementaci\u00f3n con los equipos de producci\u00f3n.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Material Design<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">En 2014, un equipo de dise\u00f1adores dentro de <strong>Google<\/strong>, lidereados por <strong><a href=\"https:\/\/www.linkedin.com\/in\/matiasduarte\">Mat\u00edas Duarte<\/a><\/strong>, comenzaron a trabajar en un proyecto con el nombre \u00ab<strong>Quantum Paper<\/strong>\u00ab, con el objetivo de crear un sistema de dise\u00f1o que estuviera m\u00e1s alineado a los procesos de creaci\u00f3n de productos y a los principios de la marca de <strong>Google<\/strong>. En el evento de <a href=\"https:\/\/events.google.com\/io\/\"><strong>Google I\/O<\/strong><\/a> de ese a\u00f1o se present\u00f3 una versi\u00f3n refinada llamada <strong><a href=\"https:\/\/www.material.io\">Material Design.<\/a><\/strong><\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube aligncenter wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Material makes it possible\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/m1diVY4Uzjc?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>\n<\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Desde entonces, <strong>Material Design<\/strong> ha sido adoptado por todos los equipos de dise\u00f1o y desarrollo en <strong>Google<\/strong>, y todos han colaborado al sistema de dise\u00f1o para hacerlo m\u00e1s robusto, flexible y consistente. <strong>Google <\/strong>comenz\u00f3 a publicar gu\u00edas y componentes de <strong>Material Design<\/strong> para que otros dise\u00f1adores pudieran utilizarlo para crear aplicaciones dentro del ecosistema de <strong>Google<\/strong> o incluso usarlo como punto de partida para crear sus propias versiones del mismo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Principios de Material Design<\/h3>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"337\" src=\"https:\/\/i0.wp.com\/www.tesseractspace.com\/blog\/wp-content\/uploads\/2019\/03\/material-design-system.gif?resize=600%2C337&#038;ssl=1\" alt=\"\" class=\"wp-image-219\" srcset=\"https:\/\/i0.wp.com\/www.tesseractspace.com\/blog\/wp-content\/uploads\/2019\/03\/material-design-system.gif?w=600&amp;ssl=1 600w, https:\/\/i0.wp.com\/www.tesseractspace.com\/blog\/wp-content\/uploads\/2019\/03\/material-design-system.gif?resize=300%2C169&amp;ssl=1 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Material Design <\/strong>est\u00e1 basado en 3 objetivos:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Crear un lenguaje visual que <strong>sintetice los principios cl\u00e1sicos de buen dise\u00f1o<\/strong> con la innovaci\u00f3n y posibilidades que ofrecen las nuevas tcnolog\u00edas y la ciencia.<\/li><li>Unificar el desarrollo en un mismo sistema que <strong>integre la experiencia de usuario a trav\u00e9s de m\u00faltiples plataformas<\/strong>, dispositivos y m\u00e9todos de interacci\u00f3n<\/li><li>Ser <strong>personalizable y extensible<\/strong> para proveer una base flexible para la innovaci\u00f3n y la expresi\u00f3n de la marca.<\/li><\/ol>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/www.youtube.com\/watch?v=NPjzUyax4tw\n<\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">A su vez, <strong>Material Design<\/strong> est\u00e1 basado en 5 principios de dise\u00f1o:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>El Material es la met\u00e1fora. <\/strong> <strong>Material Design <\/strong>se inspira en el mundo real y en sus texturas, incluyendo c\u00f3mo el material refleja luz y proyecta sombras. Este material es una interpretaci\u00f3n de medios como el <strong>papel<\/strong> y la <strong>tinta<\/strong> en el mundo digital.<\/li><li><strong>Es atrevido, gr\u00e1fico e intencional. <\/strong>El dise\u00f1o en <strong>Material Design<\/strong> se gu\u00eda por los m\u00e9todos de dise\u00f1o para impresos: tipograf\u00eda, rejillas, espacio, escala, color e im\u00e1genes, para crear jerarqu\u00edas, significado y enfoque que meta los usuarios en la experiencia.<\/li><li><strong>La animaci\u00f3n tiene significado.<\/strong> La animaci\u00f3n enfoca la atenci\u00f3n del usuario y ayuda a mantener la continuidad, por medio de retroalimentaci\u00f3n muy sutil y transiciones coherentes. Mientras los elementos de la interfaz aparecen en la pantalla, se transforman y reorganizan a trav\u00e9s de la interacci\u00f3n, generando as\u00ed nuevas transformaciones.<\/li><li><strong>Una base flexible.<\/strong> El sistema de dise\u00f1o de <strong>Material Design<\/strong> fue creado para permitir que una marca pueda usarla como un medio de expresi\u00f3n. Se integra con una base de c\u00f3digo hecho a la medida que permite la integraci\u00f3n natural de componentes, <em>plug-ins<\/em> y elementos de dise\u00f1o.<\/li><li><strong>Es multi-plataforma.<\/strong> <strong>Material Design<\/strong> mantiene el mismo dise\u00f1o de interfaz en diferentes plataformas, utilizando componentes en Android, iOS, Flutter y para la web.<\/li><\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Ejemplos de Material Design<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Como sistema de dise\u00f1o, <strong>Material Design<\/strong> no solo es utilizado por <strong>Google<\/strong>, sino que ha sido adoptado por muchas empresa de todos tama\u00f1os como base para la creaci\u00f3n de su propia identidad visual.<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"2015 Google Design Showcase - Highlights &amp; Award Winners\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/Xtu7ZOQScrI?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>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Recursos de Material Design<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Material Design<\/strong> tiene su sitio web oficial en <a href=\"https:\/\/www.material.io\">material.io<\/a>, en el que se pueden revisar <a href=\"https:\/\/material.io\/design\/guidelines-overview\/\">las gu\u00edas completas<\/a> y <a href=\"https:\/\/material.io\/design\/foundation-overview\/\">la documentaci\u00f3n<\/a> del sistema de dise\u00f1o, as\u00ed como gu\u00edas para dise\u00f1o e implementaci\u00f3n para <a href=\"https:\/\/material.io\/develop\/web\/\">web<\/a>, <a href=\"https:\/\/material.io\/develop\/android\/\">Android<\/a>, <a href=\"https:\/\/material.io\/develop\/ios\/\">iOS<\/a> y <a href=\"https:\/\/material.io\/develop\/flutter\/\">Flutter<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">El sitio ofrece muchos recursos para <a href=\"https:\/\/material.io\/design\/\">dise\u00f1o<\/a> y <a href=\"https:\/\/material.io\/collections\/developer-tutorials\/\">desarrollo<\/a> con <strong>Material Design<\/strong>, como <a href=\"https:\/\/material.io\/tools\/icons\/\">bibliotecas de iconos<\/a>, <a href=\"https:\/\/material.io\/tools\/color\/\">una herramienta para creaci\u00f3n de paletas de color<\/a>, y <a href=\"https:\/\/material.io\/design\/material-studies\/about-our-material-studies.html\">casos de estudio de implementaci\u00f3n del sistema de dise\u00f1o para diferentes industrias<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"> <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Material Design es un sistema de dise\u00f1o (design system) creado por Google para crear sitios y apps m\u00f3viles<\/p>\n","protected":false},"author":1,"featured_media":220,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[69,1,70],"tags":[92,45,26,21,73],"class_list":["post-217","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno","category-experiencia-de-usuario","category-tecnologia","tag-desarrollo","tag-design-systems","tag-diseno","tag-google","tag-guias","entry"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.tesseractspace.com\/blog\/wp-content\/uploads\/2019\/03\/material-design.png?fit=1520%2C720&ssl=1","jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/posts\/217","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/comments?post=217"}],"version-history":[{"count":2,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/posts\/217\/revisions"}],"predecessor-version":[{"id":410,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/posts\/217\/revisions\/410"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/media\/220"}],"wp:attachment":[{"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/media?parent=217"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/categories?post=217"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tesseractspace.com\/blog\/wp-json\/wp\/v2\/tags?post=217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}