Material design (Trabajo)

IES Gran Capitán. C/. Arcos de la Frontera, S/N. 14014 – Córdoba.
http://www.iesgrancapitan.org http://informatica.iesgrancapitan.org informatica@iesgrancapitan.org
IES Gran Capitán
Módulo: HLC Desarrollo Móvil
Ciclo Formativo de Grado Superior “Desarrollo de aplicaciones Web”
Material Design
Fecha de entrega: 26-09-2016
Autor: Miguel Ángel López Moyano

Material Design 2
1. Introducción.
Con el Material Design se pretende crear un lenguaje visual para los usuarios que
sintetice los principios clásicos del buen diseño con la innovación y posibilidades de la
ciencia y la tecnología.
Las metas del Material Design son:
1) Crear un lenguaje visual que sintetice los principios clásicos del buen diseño con
la innovación y posibilidades de la ciencia y la tecnología.
2) Desarrollar un único sistema subyacente que permita una experiencia unificada a
través de plataformas y tamaños de dispositivos. Los preceptos móviles son
fundamentales, pero el tacto, la voz, el ratón y el teclado son todos los métodos
de entrada de primera clase.
El Material Design tiene tres principios:
1) “Material” es una metáfora:
“Material” es una metáfora es la teoría unificadora de un espacio racionalizado y un
sistema de movimiento. El material se basa en la realidad táctil, inspirado en el
estudio del papel y la tinta, sin embargo, tecnológicamente avanzado y abierto a la
imaginación y la magia.
Las superficies y los bordes del “material” proporcionan indicaciones visuales que
se basan en la realidad. El uso de atributos táctiles que sean familiares ayuda a los
usuarios a entender rápidamente. Sin embargo, la flexibilidad del material crea
nuevos aspectos que sustituyen a los que en el mundo físico, sin romper las reglas
de la física.
Los fundamentos de la luz, de la superficie, y el movimiento son clave para
transmitir movimiento de los objetos, interactúan, y existen en el espacio y en
relación a los otros. La iluminación realista muestra costuras, divide el espacio, e
indica las partes en movimiento.
2) Intrépido, gráfico, intencional:
Los elementos fundamentales de diseño basado en la imprenta son tipografía,
rejillas, espacio, escala, color y el uso de las imágenes. Estos elementos hacen
mucho más que agradar a la vista. Crean jerarquía, significado y el enfoque. Las
opciones de color, imágenes de borde a borde, tipografía a gran escala, y el espacio
en blanco crean de forma intencionada una interfaz gráfica audaz y capaz de
sumergir al usuario en la experiencia.
Un énfasis en las acciones del usuario hace que la funcionalidad principal aparezca
de inmediato y proporcione al usuario puntos de referencia.
3) El movimiento proporciona significado

Material Design 3
El movimiento respeta y refuerza al usuario como el motor primario. Las acciones
de los usuarios son puntos de inflexión que inician el movimiento, la transformación
de todo el diseño.
Toda acción tiene lugar en un único entorno. Los objetos se presentan al usuario sin
romper la continuidad de la experiencia, incluso a medida que se transforman y se
reorganizan.
El movimiento es significativo y apropiado, sirve para centrar la atención y
mantener la continuidad. La retroalimentación es sutil pero clara. Las transiciones
son eficientes pero coherentes.
2. Entorno.
Material Design es un entorno tridimensional que contiene luces, material y sombras
proyectadas.
Todos los objetos tienen dimensiones x, y, z.
Todos los objetos tienen una única posición del eje z.
Las luces clave crean sombras direccionales y la luz ambiental crea sombras suaves.
Las sombras se crean por la diferencia de elevación entre el material de superposición.
 Mundo 3D
El entorno es un espacio en 3D, lo que significa que todos los objetos tienen
dimensiones x, y, z. El eje z está alineado perpendicularmente al plano de la
pantalla, el eje z positivo se extiende hacia el espectador. Cada hoja de material
ocupa una única posición a lo largo del eje z y tiene un espesor estándar de 1DP,
equivalente a un píxel de espesor en las pantallas con una densidad de píxeles de
160.
En la web, el eje z se utiliza para todas las ocasiones y no para la perspectiva. El
mundo 3D se emula mediante la manipulación del eje y.
 Luz y sombra
Dentro del entorno de Material Design, las luces virtuales iluminan la escena. Las
luces claves crean sombras direccionales, mientras que la luz ambiental crea
sombras suaves desde todos los ángulos.
Las sombras en el entorno material que sean emitidos por estas dos fuentes de luz.
En el desarrollo de Android, sombras se producen cuando las fuentes de luz son
bloqueados por hojas de material en diferentes posiciones a lo largo del eje z. En la
web, las sombras se representan mediante la manipulación de sólo el eje y.

Material Design 4
3. Propiedades de Material Design.
Material Design tiene ciertas características inmutables y comportamientos inherentes.
La comprensión de estas cualidades ayudará a manipular material de una manera que
sea consistente con la visión de Material Design.
Características de Material Design:
 Sólido
 Impenetrable
 Forma mutable
 Cambios en el tamaño sólo a lo largo de su plano
 Indeformable
 Puede unirse a otros materiales
 Se puede separar, dividir, y curar
 Puede ser creada o destruida
 Se mueve a lo largo de cualquier eje
1) Propiedades físicas
El material tiene dimensiones x e y variables (medido en dp) y un espesor uniforme
(1DP).
El material arroja sombras. Las sombras resultan de la elevación relativa (posición z)
entre los elementos materiales.
El contenido se muestra en materiales, en cualquier forma y color. El contenido no
añade grosor al material.
El contenido puede comportarse de forma independiente del material, pero está limitado
dentro de los límites del material.
El material es sólido. Los eventos de entrada no pueden pasar a través del material.
Múltiples elementos materiales no pueden ocupar el mismo punto en el espacio de
forma simultánea.
El material no puede pasar a través de otro material. Por ejemplo, una lámina de
material no puede pasar a través de otra hoja de material al cambiar la elevación.
2) Transformación de materiales
- El material puede cambiar de forma.
- El material crece y se reduce sólo a lo largo de su plano.
- El material nunca se dobla o pliega.

Material Design 5
- Pueden unirse láminas de material para convertirse en una sola hoja de material.
- Cuando se divide, el material puede curarse. Por ejemplo, si se quita una porción de
material de una lámina de material, la lámina de material volverá a ser una hoja entera.
3) Movimiento del material
- El material puede ser generado o destruido en cualquier lugar en el entorno de forma
espontánea.
- El material puede moverse a lo largo de cualquier eje.
- El movimiento sobre el eje Z es normalmente un resultado de la interacción del
usuario con el material.
4. Elevación y sombras.
La elevación es la profundidad relativa, o la distancia, entre dos superficies a lo largo
del eje z.
Medido desde la parte delantera de una superficie a la parte frontal de otra, la elevación
de un elemento indica la distancia entre las superficies y la profundidad de su sombra.
Las sombras proporcionan importantes pistas visuales acerca de la profundidad de los
objetos y movimiento direccional. Son la única señal visual que indica la separación
entre las superficies. La elevación de un objeto determina la aparición de su sombra.
En movimiento, las sombras proporcionan pistas útiles acerca de la dirección de un
objeto y si la distancia entre las superficies está aumentando o disminuyendo.

Material design (Trabajo)

Más contenido relacionado

La actualidad más candente (20)

Destacado (7)

Similar a Material design (Trabajo) (20)

Más de Miguel Angel López Moyano (20)

Último (20)

Material design (Trabajo)