Volvemos a la carga con esta sección dedicada a los desarrolladores y los diseñadores. En la anterior entrega de esta sección, introducimos uno de los conceptos más importantes de cara al diseño en Material Design: las superficies.

En este caso, vamos a tratar el tema sobre cómo gestionar el contenido que vamos a incluir dentro de cada superficie.

Leyes implícitas al usuario

En primer lugar, para saber cuál es la mejor forma de organizar el contenido para los usuarios, deberíamos basarnos en las leyes a las que los usuarios están acostumbrados, normas que no son si quiera necesarias explicar para su entendimiento:

• Experiencia en el pasado: Ésta es una de las normas de hecho más importantes a considerar, pues el usuario ya está acostumbrado a una forma de ver los datos hasta ahora. Mantener esa estructura, sin duda, ayuda.
• Proximidad: Cuando hay información relativamente cerca, esto suele significar que la información está relacionada. Lo mismo cuando está más separada. Por ejemplo, en una lista dejaremos más cerca elementos relacionados entre sí, separándolos de los que estén al mismo nivel.

Organización de las líneas y grids

El siguiente paso sería saber qué espacio deberíamos dar para el texto, con qué tamaño… De esta manera, podríamos saber la mejor forma para organizar el grid que forma nuestra pantalla.

Para ello, hay que considerar una serie de normas que aplicar:

• Línea base: Deberemos establecer la altura de una línea simple a un valor fijo, para no resaltar una información por encima de otras.
• Imágenes icono de elementos: En el caso de elementos de listas por ejemplo, donde utilizaremos iconos, con una proporción acorde al texto.
• Espaciado: Es también importante no saturar la información en la pantalla, dando la sensación de buena organización.

Colores: La paleta Material Design

Si algo cobra especial importancia también en Material Design, es precisamente el uso de colores para resaltar la información adecuadamente.

Para ello,  introduce dos colores que cobran todo el protagonismo:

• Color primario: Este color será el que distinga nuestra aplicación, será el color base de nuestra aplicación. En torno a él, construiremos un rango de colores, cual gradiente, para poder tener variaciones del mismo.
• Color acento: Este color deberá contrastar enormemente con el anterior, y será el color que debe llamar la atención del usuario en todo momento. Este color es para no abusar de él, pues un abuso del mismo descentraría al usuario. Lo utilizaremos por ejemplo en los botones flotantes, o en los elementos que tengan el foco…

Tipografía

Respecto a la tipografía, lo más normal que podíamos pensar es en el uso de Roboto, pues nos facilita mucho la vida y es un tipo de letra que llama la atención.

A pesar de eso, podríamos elegir otra tipografía para diferenciarnos, pero deberíamos tener en cuenta las siguientes normas:

• No usar diferentes tipos de tipografías en la aplicación, pues al final haría que nuestra aplicación carezca de estilo definido
• No utilizar tipografías muy llamativas, al más puro estilo tipografía de logo
• No utilizar tipografías que se vean distorsionadas en determinados tipos de pantallas

Imágenes

Por último, hablaremos de otro de los elementos más importantes: las imágenes. Sobre éstas, lo más importante es distinguir los 3 tipos principales de imágenes:

• Fotografía: Este tipo de elementos se utiliza para los contactos, para ver paisajes, lugares… Un sinfín de cosas.
• Ilustración: Estas imágenes se caracterizan por ser una imagen normalmente llamativa en colores para captar la atención del usuario. Además, deben presentar un significado muy simbólico, que haga al usuario no necesitar apenas pensar.
• Iconografía: Estas imágenes suelen ser menores que las anteriores, por lo que deben ser un único color normalmente y hacer alusión a un significado muy específico, sin necesidad de más.

A partir de aquí, hay que jugar con las imágenes para, según donde las utilicemos, saber integrarlas de la mejor manera posible. Así por ejemplo, utilizaremos avatares circulares para listas como los contactos por ejemplo, o pondremos especial atención en la imagen que utilicemos de cabecera de una pantalla (tanto en su ratio, como en incluir un gradiente para su total integración con los posibles iconos).

Y visto esto, tenemos suficiente información como para pensar en la mejor manera de mostrar nuestra información. Así que nos despedimos hasta la próxima semana, donde volveremos con otro concepto importante: la animación. Pues hasta ahora hemos hablado de contenido estático, pero también hablaremos de contenido dinámico y cómo gestionarlo.