English 91 399 58 81
Compartir

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

2 julio, 2020

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.

Otro claro ejemplo, pueden ser las imágenes. Podemos querer una retícula más cerrada para la mayoría de módulos que puedan aparecer en un template, especialmente módulos más textuales, pero es posible que alguna imagen queramos que gane más presencia y puede ser interesante sacarla del grid y añadirle unos márgenes específicos.

 

6.Una buena aclaración nunca está de más, y el equipo de front te lo agradecerán de por vida

Cuando creamos una línea visual, en nuestra cabeza es muy probable que la tengamos muy clara..pero eso no significa que cuando nuestro trabajo pase a un departamento de desarrollo front se encuentren con la misma claridad de la que partes tú. Por eso es una buena práctica dejar mediante anotaciones o ejemplo visuales el comportamiento de todo aquello que pueda generar duda.

No es necesario hacer un estudio de todos los elementos diseñados en las diferentes resoluciones, a veces sólo basta con dejar una pequeña aclaración de cómo se comportará cuando llegue a un punto de corte u otro, sin necesidad de representar gráficamente el ejemplo. Esto parece a simple vista algo sin importancia…pero puede ahorrarnos mucho trabajo 😉

7.¡No te engañes!, adaptar un contenido no es hacerlo más pequeño.

Como bien dice el título, no te dejes engañar tan fácilmente por el concepto “adaptar”, especialmente cuando adaptamos hacia abajo. Cada dispositivo es un mundo, y no vale con reducir proporcionalmente un elemento hacia abajo de resolución en resolución… ya hemos comentado anteriormente que en el caso de tablet, es un tipo de dispositivo en el que la información se suele consumir verticalmente, por lo tanto nuestro diseño debería ser pensado partiendo de esa verticalidad.

 

Para concluir, es importante tener en cuenta que hoy en día utilizamos muchos dispositivos diferentes, y que el consumo de información es esencial en cualquier plataforma digital. No somos solo diseñadores que damos un formato visual a un producto, sino que diseñamos por y para que el usuario tenga una buena experiencia a la hora de navegar en un entorno web. Por eso es necesario que nos fijemos en los pequeños detalles, y que busquemos la mejor forma para crear un contenido visual que pueda ser igual de impactante desde cualquier dispositivo, ya sea pequeño o grande.

A lo largo de muchos proyectos, nos hemos ido encontrando dificultades que nos han hecho replantearnos diferentes metodologías y formas de trabajar. Pero hay una cosa que sí la tenemos clara.. y es que el producto hay que mimarlo.. y qué mejor forma que analizarlo y estudiarlo con detalle para conseguir el mejor resultado. Cualquier dispositivo es igual de importante. Aunque sí es cierto que dependiendo del tipo de producto que estemos diseñando, habrá que poner el punto de enfoque en aquél que tenga más tráfico.

Un par de tips nunca vienen mal, así que esperamos que os ayuden esta pequeña lista en vuestros futuros proyectos.

También te puede interesar

  • Diseñar productos frescos y diferentes para un mismo sector

    Metodologías

    2 julio 2020

    Cómo afrontar varios proyectos del mismo sector y conseguir productos frescos y únicos adaptados a cada cliente.

  • Sistemas de diseño: Enamorados de Adele

    Metodologías

    2 abril 2018

    No, no hablamos de la cantante británica, sino de un proyecto Open Source que está revolucionando el mundo de los sistemas de diseño. No, no hablamos de la cantante británica, sino de un proyecto Open Source que está revolucionando el mundo de los sistemas de diseño. Pero, ¿qué es exactamente ​Adele​? Única en su especie Adele​ es la primera biblioteca de sistemas...

Compartir

Suscríbete a nuestra newsletter