Contenido

1. Introduccion .......................................................................................................................... 2
1.1 Metas................................................................................................................................... 3
1.2 Principios ............................................................................................................................. 4
1.2.1 El material es la metfora: ........................................................................................... 4
1.2.2 Intrpido, grfico, intencional: ..................................................................................... 5
1.2.3 Movimiento proporciona significado: .......................................................................... 5
1.3 Ambiente ............................................................................................................................. 5
Espesor del material .............................................................................................................. 6
Oscuridad .............................................................................................................................. 6
Mundo 3D.............................................................................................................................. 6
Luz y Sombra ......................................................................................................................... 7
2. Propiedades materiales............................................................................................................. 7
3. Elevacin y sombras .................................................................................................................. 7
Elevacin ................................................................................................................................... 7
Elevacin descansando ............................................................................................................. 7
Compensaciones de elevacin dinmicos................................................................................. 8
4. Elevacin (Android) ................................................................................................................... 8
4.1 Presupuesto: ....................................................................................................................... 8
4.2 Elevacin descansando ....................................................................................................... 8
4.3 Elevaciones de componente: .............................................................................................. 8
4.4 Elevacin sensible y desplazamientos dinmicos de elevacin .......................................... 9
4.5 Evitando la interferencia de elevacin ................................................................................ 9
4.6 Comparaciones de elevacin de componentes .................................................................. 9
5. Las relaciones entre objetos ................................................................................................... 11
5.1 Jerarqua de objetos .......................................................................................................... 11
5.2 Excepciones ....................................................................................................................... 11
5.3 Interaccin......................................................................................................................... 11
6. Bibliografa .............................................................................................................................. 12
7. Conclusion ............................................................................................................................... 12
1. Introduccion

En el desarrollo de software, un entorno de trabajo (Framework) es una estructura

conceptual y tecnolgica de asistencia definida, normalmente, con artefactos o
mdulos concretos de software, que puede servir de base para la organizacin y
desarrollo de software. Tpicamente, puede incluir soporte de programas, bibliotecas,
y un lenguaje interpretado, entre otras herramientas, para as ayudar a desarrollar y
unir los diferentes componentes de un proyecto.

La metfora de material define la relacin entre el espacio y el movimiento. La idea es

que la tecnologa es inspirada en el papel y la tinta y se utiliza para facilitar la
creatividad y la innovacin. Las superficies y los bordes proporcionan indicaciones
visuales familiares que permiten a los usuarios comprender rpidamente la tecnologa
ms all del mundo fsico.
Elementos y componentes tales como cuadriculas, tipografa, color y las imgenes no
slo son visualmente agradables, sino que tambin crean un sentido de jerarqua,
significado y enfoque. Con nfasis en diferentes acciones y componentes crean una
gua visual para los usuarios.

El movimiento permite al usuario dibujar un paralelo entre lo que ven en la pantalla y

en la vida real. Al proporcionar tanto la retroalimentacin y la familiaridad, lo que
permite al usuario sumergirse completamente en una tecnologa desconocida. El
movimiento posee consistencia y continuidad, adems de dar a los usuarios la
Informacin adicional subconsciente sobre objetos y transformaciones.

1.1 Metas
Crear un lenguaje visual que sintetiza los principios clsicos de un buen diseo con la
innovacin y la posibilidad de que la tecnologa y la ciencia.

Desarrollar un nico sistema subyacente que permite una experiencia unificada a

travs de plataformas y tamaos de los dispositivos. Preceptos mviles son
fundamentales, pero el tacto, la voz, el ratn y el teclado son todos los mtodos de
entrada de clase primera.

1.2 Principios

1.2.1 El material es la metfora:

Una metfora material es la teora unificadora de un espacio racionalizado y un

sistema de movimiento. El material se basa en la realidad tctil, inspirado en el estudio
del papel y la tinta, sin embargo, tecnolgicamente avanzado y abierto a la
imaginacin y la magia.
Las superficies y los bordes del material proporcionan indicaciones visuales que se
basan en la realidad. El uso de atributos tctiles familiares ayuda a los usuarios a
entender rpidamente affordances(es la cualidad de un objeto o ambiente que
permite a un individuo realizar una accin). Sin embargo, la flexibilidad del material
crea nuevos aspectos que sustituyen a los que en el mundo fsico, sin romper las reglas
de la fsica.
Los fundamentos de la luz, de la superficie, y el movimiento son clave para transmitir
movimiento de los objetos, interactan, y existen en el espacio y en relacin a la otra
iluminacin realista muestra costuras, divide el espacio, e indica las partes en
movimiento.

1.2.2 Intrpido, grfico, intencional:

Los elementos fundamentales de diseo basado en la imprenta - tipografa, rejillas, el

espacio, la escala, el color y el uso de imgenes - Gua de tratamientos visuales. Estos
elementos hacen mucho ms que agradable a la vista. Crean jerarqua, el significado y
el enfoque. Deliberadas opciones de color, imgenes de borde a borde, tipografa a
gran escala, y el espacio en blanco intencionalmente crean una interfaz grfica audaz y
capaz de sumergir al usuario en la experiencia.
El nfasis en las acciones del usuario hace que la funcionalidad principal evidentes de
inmediato y proporciona puntos de referencia para el usuario.

1.2.3 Movimiento proporciona significado:

Movimiento respeta y refuerza el usuario como el motor primario. Acciones de los

usuarios primarios son puntos de inflexin que inician el movimiento, la
transformacin de todo el diseo.
Toda accin 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, que sirve para centrar la atencin y
mantener la continuidad. La retroalimentacin es sutil pero clara. Las transiciones son
eficientes pero coherente.

1.3 Ambiente

Material Design es un entorno tridimensional que contiene sombras de luz, materiales

y elenco.

- Todos los objetos materiales tienen x, y, z y dimensiones.

- Todos los objetos materiales tienen una nica posicin del eje z.

- Luces de las teclas direccionales crean sombras y luz ambiental crea sombras suaves.
Espesor del material

1DP

Oscuridad

Las sombras se crean por la diferencia de elevacin entre el material de superposicin.

Mundo 3D

El entorno material es un espacio en 3D, lo que significa que todos los objetos tienen x, y, z y
dimensiones. El eje z est alineada perpendicularmente al plano de la pantalla, con el eje z
positivo se extiende hacia el espectador. Cada hoja de material ocupa una nica posicin a lo
largo del eje z y tiene un espesor 1DP estndar, equivalente a un pxel de espesor en las
pantallas con una densidad de pxeles 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 manipulacin del eje y.
Luz y Sombra

Dentro del entorno material, las luces virtuales iluminan la escena. Luces de las teclas
direccionales crean sombras, mientras que la luz ambiental crea sombras suaves desde
todos los ngulos.

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 manipulacin de slo el eje.

2. Propiedades materiales

Slido ocupa nicos puntos en el espacio impenetrable forma mutables cambios en el

tamao slo a lo largo de su plano indeformable puede unirse a otro material se puede
separar, dividir, y curar puede ser creada ni destruida mueve a lo largo de cualquier
eje.

3. Elevacin y sombras

Los objetos en el diseo de materiales poseen cualidades similares a los objetos en el

mundo fsico.

En el mundo fsico, los objetos pueden ser apilados y fijados entre s, pero no pueden
pasar a travs de uno al otro. Los objetos tambin proyectan sombras y reflejan la luz.

El diseo de materiales refleja estas cualidades para formar un modelo espacial que es
familiar para los usuarios y puede ser aplicado consistentemente a travs de
aplicaciones.

Elevacin

Medido desde la parte delantera de una superficie a la parte frontal de otra, la elevacin de un
elemento indica la distancia entre las superficies y la profundidad de su sombra.

Elevacin descansando
 Todos los elementos materiales tienen elevaciones de descanso. Mientras que los
componentes tienen elevaciones de descanso consistentes a travs de aplicaciones, que
pueden tener diferentes elevaciones de descanso a travs de plataformas y dispositivos.

Compensaciones de elevacin dinmicos

Offset de elevacin dinmicos son la elevacin objetivo que un componente se mueve hacia,
con relacin a su estado de reposo.

4. Elevacin (Android)
La elevacin es la profundidad relativa, o la distancia, entre dos superficies a lo largo
del eje z.

4.1 Presupuesto:

La elevacin se mide en las mismas unidades que los ejes X e Y, normalmente en

pxeles independientes de la densidad (DP). Debido a que los elementos materiales
tienen profundidad (todo el material es 1DP de espesor), la elevacin se mide en
distancia desde la parte superior de una superficie a la parte superior de otro.

La elevacin de un objeto secundario es relativa a la elevacin del objeto padre.

Las imgenes y los valores que se muestran son para aplicaciones de Android.

4.2 Elevacin descansando

Todos los objetos materiales, independientemente de su tamao, tienen una elevacin

de descanso, o elevacin por defecto que no cambia. Si un objeto cambia de elevacin,
se debe volver a su elevacin de descanso tan pronto como sea posible.
La elevacin de descanso de escritorio es 2DP por debajo de los valores indicados para
dar cabida a los entornos de ratn y no tctiles.

4.3 Elevaciones de componente:

Componentes mantienen elevaciones de descanso consistentes a travs de

aplicaciones. Por ejemplo, la elevacin del botn de accin flotante no vara de una
aplicacin a otra.
 Los componentes pueden tener diferentes elevaciones de descanso a travs de
plataformas y dispositivos, dependiendo de la profundidad del medio ambiente. Por
ejemplo, TV tiene una profundidad mayor que escritorio ya que tiene una pantalla ms
grande y se ve desde ms lejos. Del mismo modo, tanto de televisin como de
escritorio tienen una profundidad superior a mvil.

4.4 Elevacin sensible y desplazamientos dinmicos de elevacin

Algunos tipos de componentes tienen elevacin sensible, lo que significa que cambian
la elevacin en respuesta a la entrada del usuario (por ejemplo, normal, centrado, y
prensado) o eventos del sistema. Estos cambios de elevacin se apliquen de forma
coherente utilizando las compensaciones de elevacin dinmicos.
Compensaciones de elevacin dinmicos son la elevacin de sus objetivos que a se
mueve hacia componentes, relativos al estado de reposo del componente. Se aseguran
de que los cambios de elevacin son consistentes a travs de acciones y tipos de
componentes. Por ejemplo, todos los componentes que elevan en la prensa tienen el
mismo cambio de elevacin en relacin con su elevacin de descanso.
Una vez que el evento de entrada se ha completado o cancelado, el componente
volver a su elevacin de descanso.

4.5 Evitando la interferencia de elevacin

Los componentes con elevaciones de respuesta se encuentren con otros componentes

cuando se mueven entre sus elevaciones de descanso y desplazamientos dinmicos de
elevacin. Debido a que el material no puede pasar a travs de otro material ,
componentes evitar interferir entre s de muchas maneras, ya sea en funcin de cada
componente o utilizando todo el diseo de aplicaciones.
A nivel de componente, los componentes pueden moverse o ser eliminado antes de
que causen interferencia. Por ejemplo, un botn de accin flotante (FAB) puede
desaparecer o mover fuera de la pantalla antes de que un usuario coge una tarjeta, o
se puede mover si aparece un snack.
En el nivel de diseo, el diseo de su trazado aplicacin para minimizar las
posibilidades de interferencia. Por ejemplo, la posicin de la FAB a un lado de la
corriente de unas tarjetas por lo que la FAB no interferir cuando un usuario intenta
recoger una de las tarjetas.

4.6 Comparaciones de elevacin de componentes

En este diagrama, slo las dimensiones de elevacin y el diseo de los componentes
son exactas. Otras dimensiones y la disposicin general de los componentes son slo
ilustrativas.
5. Las relaciones entre objetos

5.1 Jerarqua de objetos

Cmo organizar objetos o colecciones de objetos, en una aplicacin determina cmo se

mueven en relacin unos con otros. Los objetos pueden moverse de forma independiente el
uno del otro o ser limitada por los objetos ms altos en la jerarqua.

Todos los objetos son parte de una jerarqua se describe en trminos de unas relaciones
principal-secundario. El "nio" en cada una de estas relaciones se refiere a un elemento que es
un subordinado a su elemento "padre". Los objetos pueden ser hijos de uno u otro sistema u
otro objeto.

Padres e hijos especficos:

Cada objeto tiene uno de los padres.

Cada objeto puede tener cualquier nmero de hijos.

Los nios heredan propiedades de transformacin de sus padres, como la posicin, rotacin,
escala, y la elevacin.

Los hermanos son objetos al mismo nivel de jerarqua.

5.2 Excepciones

Los productos que estn emparentados a la raz, tales como elementos de la interfaz primaria,
se mueven de forma independiente de otros objetos. Por ejemplo, el botn de accin flotante
no se desplaza con el contenido. Otros elementos incluyen:

- Cajn de navegacin lateral de una aplicacin

- La barra de accin
- Dilogos

5.3 Interaccin

Cmo los objetos interactan entre s viene determinada por su lugar en la jerarqua de
elementos primarios y secundarios.

Por ejemplo:

Los nios tienen una mnima separacin del eje z de sus padres; otros objetos no queden
insertados entre padres e hijos.

En una coleccin de tarjetas de desplazamiento, las tarjetas son hermanos unos de otros, por
lo que todos se mueven juntos en tndem. Son elementos secundarios del objeto coleccin de
tarjetas que controla su movimiento.
6. Bibliografa

Googlecom. (2016). Material design guidelines. Retrieved 21 November, 2016, from

https://material.google.com/material-design.

Googlecom. (2016). Material design guidelines. Retrieved 21 November, 2016, from

http://materializecss.com.

Googlecom. (2016). Material design guidelines. Retrieved 21 November, 2016, from

http://materializecss.comhttp://materialdesignblog.com/

Googlecom. (2016). Material design guidelines. Retrieved 21 November, 2016, from

http://materialdesignthemes.com/

7. Conclusion

La conclusin que tenemos despus de haber investigado sobre el tema Material

Design es que un una tendencia muy usado en casi todos los diseos de pginas web e
interfaces mviles.
La propuesta que ofrece el diseo de materiales es muy atractiva visualmente y te
ofrece una interface que interacta muy bien con el usuario, mostrando una diseo
muy llamativo pero a la ves tambin muy didctico y funcional, que por medio de
tcnicas visuales interacta de muy buena manera con el usuario ayudndole a
comprender el funcionamiento de la pgina web o aplicacin mvil desde una
perspectiva visual.