El espacio en blanco es una poderosa herramienta de diseño que mejora la legibilidad e incluso permite establecer una correcta lectura visual del diseño final. Sin embargo, ahora que los dispositivos móviles son tan populares y empleados por un gran porcentaje de la población, es importante que también sepas cómo aplicar estos espacios en blanco en diseños responsive.
Para lograr un diseño legible en dispositivos móviles es necesario que también hagas uso de los espacios en blanco. Debido al tamaño de la pantalla te puedes sentir limitado, pero existen ciertas acciones que puedes tomar en cuenta y las cuales te mencionamos en este artículo.
Reorganizar la navegación
Una de las primeras acciones a tomar para manejar los espacios en blanco es reordenar el menú de navegación. De hecho, debido al limitado espacio en pantalla que poseen los dispositivos móviles, el menú debe ser minimizado.
La opción más común es colocar un icono de menú hamburguesa en la parte superior derecha. Este pequeño icono es un indicador de que el menú se encuentra minimizado. Una vez que el usuario selecciona el icono, aparecerá una pantalla con todos los enlaces del menú para que el usuario elija la sección que desea visitar. En estos casos debes considerar los espacios entre cada elemento del menú. Ya que serán elementos que deben ser activados con el dedo, debes asegurarte que tengan suficiente espacio para ser seleccionados sin problemas.
El menú hamburguesa solo es útil cuando un menú contiene muchos elementos. Si tienes pocas secciones puedes optar por un menú siempre visible en la parte inferior o incluso colocar pestañas en la parte superior. De esta manera, el menú se hace aún más accesible y se encuentra siempre visible para los visitantes.
Pasar de un formato horizontal a uno vertical
El formato de los dispositivos móviles suele ser vertical, mientras que en los ordenadores es horizontal. Puede existir scrolling vertical, pero se cuenta con un gran espacio horizontal para organizar los elementos que forman parte del sitio web. Esta es una diferencia crucial que debes considerar al trabajar con diseño responsive.
En un sitio web para ordenadores, el layout se suele dividir en 3 o más columnas. En ciertos casos, estas columnas son claramente visibles para el usuario y aunque no lo sean, sirven para organizar mejor los elementos. Sin embargo, en dispositivos móviles se suele emplear una sola columna debido al espacio limitado con el que se cuenta.
Aunque puedes pensar que es una buena idea que tu contenido ocupe todo el ancho de la pantalla, no siempre es posible. En el caso de imágenes de fondo no hay problema, pero si se trata de texto, es necesario que se tome en cuenta los espacios en blanco y exista un margen a los lados.
Revisar el tamaño de las fuentes y su espaciado
Otro punto a considerar es el tamaño de las fuentes en dispositivos móviles. En algunos casos es posible que sólo necesites hacer ajustes mínimos. Sin embargo, si has jugado con la tipografía y has añadido enormes títulos o citas en menor puntaje, es necesario que ajustes este texto para que pueda ser visualizado en móviles.
Recuerda que no solo puedes controlar el propio puntaje de las fuentes que utilizas, sino también modificar el color, el alto de línea, el espaciado entre letras y los márgenes entre dos bloques de texto. Modificar todas estas propiedades puede mejorar el uso que le das a tu tipografía en dispositivos móviles.
Recuerda considerar el formato y el espacio total con el que cuentas, en especial el horizontal. Las palabras de títulos no deberían estar separadas por guiones, sino leerse de un modo más fluido. Examina cuidadosamente las características y propiedades de tu tipografía, realiza las pruebas necesarias para
Modificar las dimensiones de tus imágenes
Otro recurso que debes considerar son las imágenes. Por el propio formato de los monitores de un ordenador, se suelen elegir fotografías que tienen un ancho mayor en comparación con su altura. En dispositivos móviles, estas fotografías deben ser modificadas para que se puedan visualizar correctamente en estos dispositivos.
En muchos casos no solo se hace la fotografía más pequeña, sino que también se puede recortar u ordenar para que se muestre una parte específica de la imagen. Este es un pequeño detalle que puede mejorar la experiencia de usuario pues la imagen y el texto se relacionan entre sí en un sitio web.
No siempre es necesario mostrar fotografías. En algunos casos puedes eliminarlas de ciertas secciones de la experiencia móvil si deseas destacar otros elementos. Por ejemplo, bien podrías eliminar los sliders de imágenes de la pantalla de inicio si consideras que los enlaces o ciertos botones son más relevantes.
