{"id":789,"date":"2022-06-28T18:57:11","date_gmt":"2022-06-29T00:57:11","guid":{"rendered":"https:\/\/www.tesseractspace.com\/blog\/?p=789"},"modified":"2022-06-29T20:01:30","modified_gmt":"2022-06-30T02:01:30","slug":"como-personalizar-material-design","status":"publish","type":"post","link":"https:\/\/www.tesseractspace.com\/blog\/como-personalizar-material-design\/","title":{"rendered":"C\u00f3mo personalizar Material Design"},"content":{"rendered":"\n

Material Design<\/a>, el sistema de dise\u00f1o creado por Google en 2014, se ha vuelto una de las opciones m\u00e1s populares para dise\u00f1ar sitios web y apps <\/em>para casi cualquier plataforma, pero con el tiempo todos esos sitios y apps <\/em>comienzan a verse iguales. Para resolver esto y hacer el sistema de dise\u00f1o m\u00e1s flexible y f\u00e1cil de personalizar, el equipo de dise\u00f1o en Google cre\u00f3 Temas para Material Design.<\/strong><\/p>\n\n\n\n

El dise\u00f1o de Temas en Material Design<\/strong><\/a> (o Material Theming<\/a><\/em>) es la capacidad de personalizar los componentes y elementos en el sistema de dise\u00f1o para reflejar mejor la identidad de una marca, un producto o simplemente para personalizar la manera en c\u00f3mo se ven sus componentes sin perder la funcionalidad que los usuarios ya conocen.<\/p>\n\n\n\n

La creaci\u00f3n de un tema en Material Design<\/strong> est\u00e1 basada en hacer ajustes a cuatro aspectos del sistema de dise\u00f1o:<\/p>\n\n\n\n

  1. Tipograf\u00eda<\/li>
  2. Color<\/li>
  3. Iconograf\u00eda<\/li>
  4. Forma de los componentes<\/li><\/ol>\n\n\n\n
    Los temas en Material Design permiten crear versiones personalizadas del sistema de dise\u00f1o. Cr\u00e9dito: Google<\/a>.<\/figcaption><\/figure>\n\n\n\n

    Material Design<\/strong> viene configurado con valores por default <\/em>para cada uno de estos aspectos del dise\u00f1o de la interfaz de sus componentes, que pueden ser f\u00e1cilmente cambiados tanto en flujos de dise\u00f1o con herramientas como Sketch <\/strong>o Figma<\/strong>, y tambi\u00e9n en el c\u00f3digo en producci\u00f3n por medio de cambios en las hojas de estilo o en las librer\u00edas de componentes de desarrollo sin necesidad de reescribir el sitio web o la app<\/em>. <\/p>\n\n\n\n

    Usando los estilos prestablecidos de los componentes se puede cambiar solo un poco o mucho c\u00f3mo se ven para crear diferentes combinaciones. Ajustando esos cuatro par\u00e1metros se pueden generar much\u00edsimas variantes, cada una un tema diferente de Material Design.<\/strong><\/p>\n\n\n\n

    Personalizaci\u00f3n: antes y despu\u00e9s<\/h3>\n\n\n\n

    Como ejemplo de un tema personalizado de Material Design<\/strong>, modificaremos los valores de tipograf\u00eda, color, iconograf\u00eda y forma de un bot\u00f3n est\u00e1ndar, que tiene los siguientes valores:<\/p>\n\n\n\n