Cómo crear apps con Material Design

Por

Después de la conceptualización de una app, lo segundo más importante, es el diseño. Ya que en muchas veces este es el elemento que define entre si un usuario la descarga o no. Es por ello que te aconsejo que, si estás pensando en diseñar una aplicación móvil para Android, uses Material Design.

 

Pero ¿eso qué es?

Es una guía enfocada en sintetizar los principios clásicos del diseño visual, movimientos y la unificación de interacción entre distintas plataformas y dispositivos; combinado con las innovaciones y las posibilidades de la ciencia y la tecnología.

Para que logres entenderlo poco mejor, dividiré esta normativa de diseño en 4 puntos importantes:

 

1. Superficies


Untitled-3.gif

Es el elemento clave. Material Design se basa en la superposición de elementos y su relación entre ellos mismos. 

Ya sabrás tú si los acomodas en diferente o el mismo nivel de profundidad. El objetivo de estas superficies flotantes es que puedas jugar con ellas de tal manera que acomodes los objetos que quieres que tengan más atención por parte del usuario, en una posición más elevada.

 

 2. Diseño de contenido


 GUI-design-03-People-Isometric-AurielAki_02-810x450.png

 

Aquí se seleccionan los elementos fundamentales del diseño, que harán que todo sea más agradable a la vista.

  • Paleta de colores

En este paso también debes escoger dos colores; uno será la base de tu aplicación, y a partir de ahí construirás un gradiente de colores para tener variaciones de este. Y el otro deberá contrastar con el primero.

Este se conoce como color acento, y se utiliza en botones flotantes, barras de menús u objetos que quieras resaltar.

 

  • Tipografía

Te recomiendo que no utilices tipografías muy llamativas o exageradas, ni diferentes tipos de fuente en tu aplicación, ya que parecerá que no tiene un estilo definido. Mejor elige una que vaya de acuerdo al giro de tu aplicación y sea legible.

 

  • Imágenes

Existen 3 tipos:

- Fotografía: son imágenes de personas, lugares, entre otras cosas.

- Ilustración: están constituidas por colores llamativos y un significado muy simbólico para llamar la atención del usuario.

- Iconografía: son de un solo color y hacen alusión a un significado específico.

 

  • Organización

 51.jpg

 

Deberás:

- Establecer la altura de la línea base a un valor fijo, para que no la información no esté encima de otras.

- Colocar los iconos en proporción acorde al texto.

- Dejar espacios entre todos los elementos en que no se perciba como una interfaz saturada.

 

3. Movimiento y animaciones


material-design-ehsan-rahimi.gif

Es decir, optimizar el proceso de transiciones y conseguir un efecto de fluidez en las entradas de las nuevas pantallas, la salida de las anteriores, así como el añadir animaciones a algún botón flotante, barras de navegación o cuadro de texto.

 

 4. Diseño adaptivo


attachment.png

Se debe adaptar a cualquier tipo de pantalla, pero no por esto, cometas el error tan común de querer mostrar la información de la misma forma en la tablet que en el Smartphone. 

Para tener un diseño estético, con un uso balanceado del espacio y contextos bien definidos, puedes seguir las siguientes recomendaciones:

- Acopla la forma en que aparece la interfaz. Las tablets son más grandes por lo que puedes mostrar información adicional, que desde la versión para móviles no podríais.
- Puedes expandir o dividir el contenido. Un gran ejemplo son los menús, en el celular puedes tenerlo como una lista desplegable y en la tablet, como un barra.
- Reorganiza el contenido. Utiliza tarjetas o algún otro tipo de vista que ofrece el material design para independizarlo en base a cada pantalla.

 

 Un tip más: 

Ten en cuenta utilizar los dpi, o píxeles independientes de densidadPuesto que con esta unidad podrás gestionar diferentes tipos de pantalla evitar tener los iconos distorsionados.


 

adaptar negocio

 

 

Recursos