Cómo mejorar y trabajar de forma adecuada un diseño responsive

En este post hablaremos sobre sobre varios tips que nos pueden servir de mucha ayuda a la hora de enfrentarnos a un diseño responsive desde un punto de vista visual. Además explicamos brevemente en qué consiste y qué puntos debemos tener en cuenta para trabajarlo de manera correcta y conseguir un efecto wow. 

El término “responsive o adaptativo” corresponde dentro del diseño web, a una técnica que se basa en redimensionar los elementos de un producto digital y colocarlos de manera que se adapten al tamaño de cada dispositivo para mejorar la visualización y la experiencia de usuario.

Cualquier diseñador UX/UI seguramente se ha ido encontrando diferentes dificultades o dudas que le hayan hecho darse cuenta de que no es suficiente con crear un producto bonito, sino que a su vez tiene que ser flexible, funcional y adaptable.

Hoy en día está comprobado que hay un gran porcentaje de la población que navega por internet desde el móvil, y este es probable que supere en muchos casos al de la población que lo haga desde el ordenador..por lo tanto es esencial que un site sea responsive, ya que sino es difícil que sobreviva en la era digital actual.

Los dispositivos más comunes son ordenadores, tablets y smartphones. Además a la hora de crear un producto digital es importante tener en cuenta el tipo de contenido y el target al que va dirigido, de esta manera tendremos más pistas sobre desde qué dispositivo se suele acceder más al mismo.

Encontrarte en una web y navegar por ella de manera rápida y fácil es muy gratificante, para cualquier tipo de usuario, por eso como diseñadores, debemos ponernos en la piel de uno y qué mejor que nosotros mismos para saber cómo nos gustaría encontrarnos un site en el que nos sentamos cómodos y ágiles a la hora de navegar por él.

Cuando desarrollamos un estilo visual es importante saber las diferentes resoluciones de pantalla y analizar qué retícula nos encajará mejor con nuestro tipo de producto.

No es lo mismo, ver un diseño en un dispositivo pequeño como en uno grande. Es importante no perder el control de la legibilidad y ser conscientes de que un mal uso de los elementos gráficos, pueden hacer que el usuario abandone en menos de 3 segundos nuestra página, ya que le ha resultado compleja la experiencia de lectura o la búsqueda de información.. y está claro que no queremos eso.

Una vez dicho esto.. ¿Qué debemos hacer entonces para conseguir un buen diseño responsive?

1.Las jerarquías importan y tus ojos lo saben

Cuando trabajamos resoluciones diferentes tenemos que tener en cuenta el uso tipográfico. 

Es importante hacer un estudio previo de las jerarquías y crear solo los estilos de texto necesarios manteniendo una coherencia visual entre ellos.

Tendremos que tener en cuenta que tamaños queremos que cambien en un punto de corte u en otro. Nosotros recomendamos que los estilos de texto se modifiquen lo menos posible entre resoluciones, de esta manera facilitaremos mucho el trabajo de cara a front. 

Hay textos concretos como titulares, destacados o elementos numéricos, que muchas veces nos piden a gritos un cambio de tamaño en otra resolución, así que en este tipo de casos conseguiremos que se adapten al dispositivo y mejoraremos su legibilidad.

2.Una buena composición y los espacios adecuados puede ser la guinda del pastel

A la hora de trabajar la estructura de la página y los espacios, debemos tener en cuenta la retícula definida en cada resolución. El contenido siempre irá adaptándose hacia abajo de izquierda a derecha.

Es importante conocer bien la altura de pantalla de cada dispositivo ya que ésta nos dará una valiosa información clave para adaptar mejor el diseño y conseguir una buena optimización de espacios. A primera vista, este punto no parece muy relevante, pero es clave para que el usuario sepa reconocer rápidamente dónde se encuentra y diferencie bien una sección de otra.

Un buen uso de los espacios verticales es esencial dentro del diseño responsive. Dependiendo del dispositivo, éstos deberán ser más o menos óptimos. Además entre resoluciones, es recomendable mantener una coherencia proporcional entre ellos, así conseguiremos que al pasar de un punto de corte a otro, todo el contenido fluya de arriba a abajo de una forma fina y controlada sin perder la estabilidad entre los diferentes elementos que forman el diseño.

3.Las apariencias engañan, mejor que compruebes el diseño en el dispositivo

Una vez estamos estudiando el comportamiento de los diferentes elementos gráficos, es muy importante que lo vayamos viendo en el dispositivo correspondiente. En la mayoría de las ocasiones las apariencias engañan.. y creernos cuando decimos que la apariencia de jerarquías, alturas, espacios etc…no son reales 100% sin verlo en el propio dispositivo. Este consejo es muy importante tenerlo presente, ya que nos ayudará enormemente en el desarrollo de la construcción del producto.

Para ello podemos utilizar, tanto alguna de las siguientes herramientas como Mirror o Crystal para Sketch, dependiendo si eres de iOS o Android, o la misma app de Figma para dispositivos smartphone y tablet.

4. Dónde se ponga un buen formato de imagen…

Respecto a las imágenes también tendremos que estudiar su comportamiento, y los tipos de formatos que suelen aparecer más a menudo en los diferentes dispositivos. Por ejemplo, en tablet ya sabemos que la altura de pantalla es una de las más altas, con lo que una imagen debería adquirir un formato más vertical para hacer una adaptación más adecuada.

O lo mismo pasa en smartphone.. las imágenes suelen adquirir un formato más vertical en la mayoría de los casos, pero habrá que tener en cuenta que el espacio es menor, así que tendremos que jugar con alturas “óptimas” para no generar demasiado scroll y no aburrir al usuario con un scroll infinito.

Algunas imágenes se enmascararán, otras se adaptarán proporcionalmente y/o se sustituirán por otra de otro formato. 

5. Saltarse la retícula no es un drama en algunas ocasiones…

Al llegar a este punto, podéis pensar que se nos ha ido la pinza un poquito, pero no es así. Lo dicho, no siempre es un drama saltarse las “normas establecidas”… y gracias a ello podemos conseguir un efecto wow al permitirnos ciertas licencias en cuanto a la retícula.

Un ejemplo con el que podemos experimentar es en las cabeceras o en los footer. La mayoría de las veces tendemos a componer todo dentro de una retícula, y sí, eso está muy bien, pero cuando adaptamos un diseño a resoluciones de tamaños “grandes” como a 1680, 1920 o 2560.. es un buen truco, sacar fuera de ésta ciertos elementos y darles un margen determinado por cada lado.