{"id":7723,"date":"2020-08-03T11:43:46","date_gmt":"2020-08-03T11:43:46","guid":{"rendered":"https:\/\/www.conectasoftware.com\/?p=7723"},"modified":"2022-11-21T13:02:18","modified_gmt":"2022-11-21T13:02:18","slug":"google-material-design","status":"publish","type":"post","link":"https:\/\/www.conectasoftware.com\/magazine\/google-material-design\/","title":{"rendered":"Google Material Design"},"content":{"rendered":"Recursos para tu Identidad Visual\n\n<span style=\"color: #000000;\">+ <a style=\"color: #000000;\" href=\"https:\/\/www.conectasoftware.com\/magazine\/branding\/el-proceso-de-disenar-un-logo\/\">El Proceso De Dise\u00f1ar Un Logo<\/a><\/span>\n<span style=\"color: #000000;\">+ <a style=\"color: #000000;\" href=\"https:\/\/www.conectasoftware.com\/magazine\/branding\/la-importancia-de-la-tipografia-en-un-logotipo\/\">La importancia de la Tipograf\u00eda en Un Logotipo<\/a><\/span>\n<span style=\"color: #000000;\">+ <a class=\"ut-service-box-link \" style=\"color: #000000;\" title=\"\u00bfC\u00f3mo definir la identidad visual de la marca?\" href=\"https:\/\/www.conectasoftware.com\/magazine\/branding\/branding-visual-tamanos-de-las-imagenes-en-rrss\/\" target=\"_self\" rel=\"noopener noreferrer\">\u00bfC\u00f3mo Definir La Identidad Visual De La Marca?<\/a><\/span>\n<span style=\"color: #000000;\">+\u00a0 <a style=\"color: #000000;\" href=\"https:\/\/www.conectasoftware.com\/magazine\/diseno-web\/tipografias-bauhaus\/\">Tipograf\u00eda En Bauhaus<\/a><\/span>\n<span style=\"color: #000000;\">&#8211; Google Material Design<\/span>\n<span style=\"color: #000000;\">+ <a class=\"ut-service-box-link \" style=\"color: #000000;\" title=\"Microsoft Fluent Design System\" href=\"https:\/\/www.conectasoftware.com\/magazine\/diseno-web\/microsoft-fluent-design-system\/\" target=\"_self\" rel=\"noopener noreferrer\">Microsoft Fluent Design System<\/a><\/span>\n\n<b style=\"font-size: 16px;\">M<\/b><b style=\"font-size: 16px;\">aterial design<\/b><span style=\"font-size: 16px;\">\u00a0es una normativa de dise\u00f1o enfocado en la visualizaci\u00f3n del sistema operativo Android, adem\u00e1s en la web y en cualquier plataforma. Desarrollado por\u00a0<\/span><strong>Google<\/strong><span style=\"font-size: 16px;\"><strong>\u00a0<\/strong>y anunciado en la conferencia\u00a0<\/span>Google I\/O<span style=\"font-size: 16px;\"> en junio de 2014.<\/span>\n<div class=\"itemBody kl-blog-post-body kl-blog-cols-1\"><\/div>\n<div class=\"itemBody kl-blog-post-body kl-blog-cols-1\">\n<h2>\u00bfDe donde sali\u00f3?<\/h2>\nGoogle previamente realiz\u00f3 dise\u00f1os para cambiar las interfaces de sus aplicaciones para m\u00f3viles. El proyecto fue llamado <strong>\u2018<i>Hera<\/i>\u2019<\/strong>\n\u200b M\u00e1s adelante fue renombrado como<strong> \u2018<i>Quantum Paper\u2019<\/i><\/strong>. Para el dise\u00f1o los desarrolladores se inspiraron en la tinta y el papel para crear este lenguaje de dise\u00f1o.\nMaterial se trata de un dise\u00f1o m\u00e1s limpio, en el que predominan animaciones y transiciones de respuesta, el relleno y los efectos de profundidad tales como la iluminaci\u00f3n y las sombras.\n<blockquote><i>\u00a0\u201cA diferencia del papel, el dise\u00f1o Material se puede ampliar y redimensionar de manera inteligente. Material Design tiene superficies f\u00edsicas y bordes\u2019\u2019 &#8211;\u00a0El vicepresidente de dise\u00f1o de Google, Mat\u00edas Duarte.<\/i><\/blockquote>\n<h2><\/h2>\n<h2>\u00bfEn qu\u00e9 se basa Material Design?<\/h2>\nEl nombre viene porque est\u00e1 basado en objetos materiales. <strong>Piezas colocadas en un lugar y con un movimiento determinado.<\/strong>\nSe construye un lenguaje visual donde se recogen los principios b\u00e1sicos del <strong>\u2018buen dise\u00f1o\u2019<\/strong> contando con las nuevas tecnolog\u00edas.\nSe trata de un dise\u00f1o con la profundidad, superficies,bordes, sombras y colores tienen un papel primordial.\nGoogle Material Design tiene como objetivo guiarse por las leyes de la f\u00edsica. Donde las animaciones son l\u00f3gicas, los objetos puedan superponerse pero nunca atravesarse.. etc\n<img loading=\"lazy\" loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-7720 size-full\" src=\"https:\/\/www.conectasoftware.com\/magazine\/wp-content\/uploads\/2019\/04\/09.04-Google-Design.jpg\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" srcset=\"https:\/\/www.conectasoftware.com\/magazine\/wp-content\/uploads\/2019\/04\/09.04-Google-Design.jpg 1000w, https:\/\/www.conectasoftware.com\/magazine\/wp-content\/uploads\/2019\/04\/09.04-Google-Design-300x178.jpg 300w, https:\/\/www.conectasoftware.com\/magazine\/wp-content\/uploads\/2019\/04\/09.04-Google-Design-768x455.jpg 768w, https:\/\/www.conectasoftware.com\/magazine\/wp-content\/uploads\/2019\/04\/09.04-Google-Design-280x166.jpg 280w, https:\/\/www.conectasoftware.com\/magazine\/wp-content\/uploads\/2019\/04\/09.04-Google-Design-600x356.jpg 600w\" alt=\" Google Design\" width=\"1000\" height=\"593\" \/>\n\n<\/div>\n<h2><b>Componentes de Material Design<\/b><\/h2>\n<span style=\"font-weight: 400;\">A continuaci\u00f3n, se enumera un listado sobre los componentes que ofrece material design a los desarrolladores:<\/span>\n<ul>\n \t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Barras en la parte superior e inferior para las aplicaciones donde se ubica el men\u00fa.<\/span><\/li>\n \t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Fondos para diferenciar las interfaces de la aplicaci\u00f3n.<\/span><\/li>\n \t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Banners.<\/span><\/li>\n \t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Botones tanto para la navegaci\u00f3n como para elecciones del usuario.<\/span><\/li>\n \t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Tarjetas.<\/span><\/li>\n \t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Chips.<\/span><\/li>\n \t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Tablas para representar datos.<\/span><\/li>\n \t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Di\u00e1logos.<\/span><\/li>\n \t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Divisores de contenido.\u00a0<\/span><\/li>\n \t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Listado de im\u00e1genes.<\/span><\/li>\n \t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Listas de elementos.<\/span><\/li>\n \t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Men\u00fas.<\/span><\/li>\n \t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Men\u00fa lateral.<\/span><\/li>\n \t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Navegaci\u00f3n a trav\u00e9s de ra\u00edles.\u00a0<\/span><\/li>\n \t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Selectores de fechas.<\/span><\/li>\n \t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Indicadores de progreso.<\/span><\/li>\n \t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Controles de selecci\u00f3n.<\/span><\/li>\n \t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Botones para compartir enlaces, editar o eliminar elementos.<\/span><\/li>\n \t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Botones deslizantes.<\/span><\/li>\n \t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Elementos de tabulaci\u00f3n.<\/span><\/li>\n \t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Campos para recoger textos.<\/span><\/li>\n \t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Herramientas para modificar textos informativos cuando el usuario realiza acciones como el hover.\u00a0<\/span><\/li>\n<\/ul>\n<h2><b>Iconos de Material Design<\/b><\/h2>\n<span style=\"font-weight: 400;\">Al igual que con los componentes, material design ofrece a los desarrolladores un amplio n\u00famero de iconos que pueden ser utilizados en las aplicaciones para web, iOS y Android.\u00a0<\/span>\n<span style=\"font-weight: 400;\">Dichos iconos son ofrecidos con distintos tipos de formas:<\/span>\n<ul>\n \t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Iconos rellenos.<\/span><\/li>\n \t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Iconos con contorno.<\/span><\/li>\n \t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Iconos redondeados.<\/span><\/li>\n \t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Iconos de dos tonos.<\/span><\/li>\n \t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Iconos con formas de puntas.\u00a0<\/span><\/li>\n<\/ul>\n<h2><b>Gu\u00eda para la accesibilidad<\/b><\/h2>\n<span style=\"font-weight: 400;\">Material Design ofrece a los desarrolladores una gu\u00eda estructurada para la <a href=\"https:\/\/www.conectasoftware.com\/magazine\/diseno-web\/mejorar-la-accesibilidad-de-tu-sitio-web\/\">accesibilidad<\/a> que se basa en los principios de limpieza, robustez y especificaci\u00f3n.\u00a0<\/span>\n<ul>\n \t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">El principio de limpieza ayuda a los usuarios a navegar a trav\u00e9s de dise\u00f1os de estructuras limpias con diferentes llamadas a la acci\u00f3n.<\/span><\/li>\n \t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">El principio de robustez se basa en que el dise\u00f1o de la aplicaci\u00f3n se debe adaptar a distintos tipos de usuario.<\/span><\/li>\n \t<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">El principio de especificaci\u00f3n se basa en que las tecnolog\u00edas deben resolver la necesidad al usuario en funci\u00f3n del elemento con el que el usuario acceda a la web, como por ejemplo, a trav\u00e9s de teclados dise\u00f1ados espec\u00edficamente para gente invidente.\u00a0<\/span><\/li>\n<\/ul>\n<span style=\"font-weight: 400;\">Para ello, se tiene en cuenta el tipo de tecnolog\u00eda utilizada, la navegaci\u00f3n, el orden en el que se muestran los elementos que tienen el foco activo, los colores y el contraste, el layout y la tipograf\u00eda, los tipos de imagen y los sonidos.\u00a0<\/span>\n<div class=\"itemBody kl-blog-post-body kl-blog-cols-1\">\n<h2>Material Design Y Material.io<\/h2>\nMaterial Design \u00a0se lanz\u00f3 con un objetivo claro: <strong>unificar los criterios est\u00e9ticos y funcionales\u00a0<\/strong>basados en procesos y experiencias en torno al dise\u00f1o de Google\u2013 para la creaci\u00f3n de la interfaz de sistemas operativos.\nPor lo que, Google cre\u00f3 una nueva web como plataforma donde recopilar las herramientas y recursos que ayuden a dise\u00f1ar m\u00e1s productivos e inspiradores.\nCon el nombre de: <strong>Material.io<\/strong>\n<blockquote><i>\u00abEsta web, adem\u00e1s de construir una nueva identidad visual para la iniciativa Material Design, servir\u00e1 de apoyo a nuestra \u00faltima gu\u00eda visual y a los nuevos lanzamientos mediante todo tipo de recursos, desde herramientas hasta elementos a utilizar\u00bb &#8211;\u00a0<\/i>Nicholas Jitkoff, uno de los colaboradores de design.google.com<\/blockquote>\n<h2>\u00bfC\u00f3mo los vemos en Android?<\/h2>\nPodemos resumirlo en 3 partes:\n<ul>\n \t<li><strong>Elementos ordenados e im\u00e1genes claras<\/strong><\/li>\n<\/ul>\nHablamos de un dise\u00f1o con tipograf\u00eda clara, colores e im\u00e1genes llamativos para no perder el foco, y un sentido del orden y la jerarqu\u00eda muy marcado.\n<ul>\n \t<li><strong>Luz y sombras sensaci\u00f3n de jerarqu\u00eda<\/strong><\/li>\n<\/ul>\nLa luz y las sombras son elementos clave. Una buena iluminaci\u00f3n, nos da los indicios de c\u00f3mo se comportar\u00e1 un elemento y en qu\u00e9 nivel se encuentra.\n<ul>\n \t<li><strong>Movimiento, la mejor forma de guiar al usuario<\/strong><\/li>\n<\/ul>\nNos encontramos ate otro elemento clave. PE: un elemento que parpadea significa que trata de llamarte la atenci\u00f3n, un elemento que se contrae es que se acaba de cerrar.\nTodos los movimientos se crean en una determinada direcci\u00f3n.\n<\/div>\n<h2><span style=\"font-weight: 400;\">Dise\u00f1o para todas las pantallas<\/span><\/h2>\n<span style=\"font-weight: 400;\">Material Design es <strong>multiplataforma<\/strong>, esto quiere decir, que pueden hacer uso de su dise\u00f1o los smartphones, tablets, televisores\u2026<\/span>\n<span style=\"font-weight: 400;\">Este dise\u00f1o ha sido creado pensando en <strong>todos los sistemas no solo Android<\/strong>, tambi\u00e9n las p\u00e1ginas web pueden hacer uso del dise\u00f1o.<\/span>\n<span style=\"font-weight: 400;\">A lo largo de \u00e9ste tiempo ya hemos podido disfrutar de las aplicaciones con elementos de Material, pero una de las cr\u00edticas que m\u00e1s tuvo, es que parec\u00edan todas iguales, pero seg\u00fan vayan los desarrolladores y dise\u00f1adores entendiendo Material Design, es ah\u00ed cuando aparecen los verdaderos trabajos originales. <\/span>\n<h2>Ejemplo uso Material Design<\/h2>\n<h4>WhatsApp web<\/h4>\n<strong>Es uno de los mejores ejemplos de web Material Design<\/strong> que se pueden observar. No solo porque todos los elementos han sido construidos con este dise\u00f1o y con esta tecnolog\u00eda, si no porque adem\u00e1s\u00a0representa perfectamente lo que pretende Google, trasladar la experiencia m\u00f3vil a la web, siendo esta \u00faltima un reflejo de lo que ocurre en Android.\n<h4>Inbox<\/h4>\nPor otro lado, tenemos a Inbox de Google, se trata de la alternativa a gmail. Nos encontramos ante otro servicio que consigue<strong> aprovechar Material Design para mejorar su funcionalidad.<\/strong>\nHan a\u00f1adido men\u00fas laterales, botones flotantes, opciones desplegables&#8230;. B\u00e1sicamente una aplicaci\u00f3n convertida en web muy f\u00e1cil.\n\n<span style=\"font-weight: 400;\">Material Design es el cambio m\u00e1s importante de <strong>Android 5.0 Lollipop. <\/strong><\/span>\n<span style=\"font-weight: 400;\">Es un cambio que define en parte <strong>la estrategia de los grandes de Google.<\/strong><\/span>\n\nRecursos para construir tu Identidad Visual\n\n<span style=\"color: #000000;\">+ <a class=\"ut-service-box-link \" style=\"color: #000000;\" title=\"Microsoft Fluent Design System\" href=\"https:\/\/www.conectasoftware.com\/magazine\/diseno-web\/microsoft-fluent-design-system\/\" target=\"_self\" rel=\"noopener noreferrer\">Microsoft Fluent Design System<\/a><\/span>\nFluent Design es el sistema de dise\u00f1o de Microsoft. Conoce sus elementos, reglas y muchos ejemplos aplicados.\n<div class=\"wpb_text_column wpb_content_element \">\n<div class=\"wpb_wrapper\">Hemos desarrollado una gu\u00eda completa de estos pasos. Incluye cuestiones de estrategia, como por ejemplo los diferentes modelos de negocio disponibles, c\u00f3mo crear una estrategia de marketing y qu\u00e9 datos analizar. Puedes descargar el ebook gratis aqu\u00ed:<\/div>\n<div><\/div>\n<div>\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.conectasoftware.com\/producto\/guia-practica-para-vender-online-ebook\/\"><img loading=\"lazy\" loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" class=\"wp-image-35973\" src=\"https:\/\/www.conectasoftware.com\/magazine\/wp-content\/uploads\/2022\/11\/guia-practica-para-vender-online-ebook-banner-1280x715-1.jpg\" alt=\"\" \/><\/a><\/figure>\n<\/div>\n<\/div>\n<div class=\"wpb_content_element clearfix\">\n<div id=\"ut_am_wrap_5f61fc97553ff\" class=\"ut-image-gallery-image \">\n<div id=\"ut_reveal_5f61fc9755400\" class=\"ut-animated-image-item ut-image-gallery-item ut-animation-done \" data-appear-top-offset=\"auto\">\n<div class=\"ut-box-shadow-container ut-box-shadow-2\"><\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Recursos para tu Identidad Visual + El Proceso De Dise\u00f1ar Un Logo + La importancia de la Tipograf\u00eda en Un Logotipo + \u00bfC\u00f3mo Definir La Identidad Visual De La Marca? +\u00a0 Tipograf\u00eda En Bauhaus &#8211; Google Material Design + Microsoft Fluent Design System Material design\u00a0es una normativa de dise\u00f1o enfocado en la visualizaci\u00f3n del sistema [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":7738,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"gallery","meta":{"content-type":"","footnotes":""},"categories":[23],"tags":[],"class_list":{"0":"post-7723","1":"post","2":"type-post","3":"status-publish","4":"format-gallery","5":"has-post-thumbnail","7":"category-diseno-web","8":"post_format-post-format-gallery"},"_links":{"self":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/posts\/7723","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/comments?post=7723"}],"version-history":[{"count":5,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/posts\/7723\/revisions"}],"predecessor-version":[{"id":36153,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/posts\/7723\/revisions\/36153"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/media\/7738"}],"wp:attachment":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/media?parent=7723"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/categories?post=7723"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/tags?post=7723"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}