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 la gestión de contenido de forma dinámica gracias a las animaciones.

Hoy pasamos a hablar del diseño adaptativo, siendo ésta ya la última entrega de esta mini sección que os hemos ofrecido.

El diseño adaptativo

En primer lugar, para entender el diseño adaptativo, debemos saber que éste se refiere al diseño que sabe adaptarse a cualquier tipo de pantalla. 

Pero esto no quiere decir simplemente que seamos capaces de ver la información. El diseño adaptativo también se refiere al hecho de que seamos capaces de sacar todo el provecho de Material Design y de cada pantalla en particular. Es decir, no debería ser igual la forma de mostrar la misma información en un móvil, una tablet o por ejemplo un wearable.

Diseñando para tablets

Cuando estamos diseñando para tablets, debemos pensar que no es igual que un smartphone. Si lo tratásemos igual, las tablets no habrían cogido el protagonismo que están cogiendo, pues las tablets no han venido a reemplazar al móvil.

Por ello, debemos siempre pensar en qué podemos hacer diferente a lo que hacemos en un dispositivo móvil. De este modo, hay unos errores comunes en muchos diseñadores y programadores al no pensar en diseños para tablets. Éstos son:

• Uso balanceado del espacio
• Lectura ordenada
• Calidad de la imagen
• Contextos bien definidos
• Estética

En la imagen anterior, podéis encontrar un ejemplo de mal diseño, al igual que en la siguiente, y precisamente en qué puntos flaquean:

Modificando el contenido

Uno de los mejores procesos que podemos hacer al pensar en otro tipo de pantallas, es precisamente acoplar la forma de mostrar la información.  De esta forma, por ejemplo en una pantalla de una tablet podemos mostrar información adicional que en el móvil no. Un ejemplo perfecto sería la típica vista maestro-esclavo:

Pero no todo queda ahí, también podemos pensar en dividir el contenido. De esta forma, por ejemplo, podríamos hacer que una pantalla en un teléfono móvil, en una tablet no fuese más que un simple popup. O también podríamos expandir el contenido.

Otro de los grandes recursos es simplemente reorganizar la información, como podemos ver en el siguiente ejemplo:

Para conseguir todo esto, es ideal utilizar todas las novedades de Material Design como las tarjetas y este tipo de vistas, que nos permiten independizar en base a cada pantalla, para lo que utilizaremos las diferentes definiciones de recursos en nuestro proyecto. A partir de ahí, ¡esperamos que el diseño para tablets os lleve tanto tiempo como os llevó el diseño para móvil!

Con esto llegamos al final de esta sección que os hemos ido mostrando durante las últimas semanas en torno al diseño en Material Design. Esperamos que a todos los desarrolladores y programadores os haya resultado interesante.