Estrategia de diseño mobile-first


Hoy vengo a comentarte sobre una estrategia de diseño que está siendo muy utilizada por los diseñadores web en la actualidad: la de móvil-primero, o mobile-first en inglés.

Ya conoces el auge que ha tenido el diseño web adaptable por todas las ventajas que posee, pero estarás de acuerdo en que a veces diseñar la interfaz para móvil de algunas páginas puede ser un tanto difícil, sobre todo cuando partimos de diseños para dispositivos más grandes.

Es por ello que la estrategia de móvil-primero llega a ser tan útil, ya que se trata de diseñar para las pantallas más pequeñas y luego ir ampliando hacia las más grandes, donde el orden general sería así: móvil, tablet y escritorio.

La ventaja que nos otorga esto como diseñadores está sobre todo en el tiempo y la dificultad que nos ahorra, pues una vez que se ha solucionado la parte móvil, diseñar para otros dispositivos será mucho más fácil, ya que con ello han quedado establecidos los elementos esenciales de la página. En fin, la idea general es que si tu web se ve bien en un dispositivo móvil, su contenido se trasladará mejor a otros dispositivos.

Y ahora veamos paso a paso cómo realizar este proceso de diseño:

1. Establece el contenido

Por supuesto, lo primero es saber cuál será el contenido de tu web y cada una de las páginas que poseerá, lo cual te ayudará a trabajar de forma más organizada y te ahorrará muchos dolores de cabeza. En lo particular te recomiendo hacer una hoja de cálculo con todo el contenido que desees incluir:

excel

Para mayor organización, en ese “inventario” de contenidos prioriza los más importantes, con lo cual estarás estableciendo desde el primer momento su jerarquía visual y la forma en que se mostrarán.

2. Piensa en una app

Esto puede sonar un poco extraño, pues el diseño web y el de aplicaciones móviles difieren en varios aspectos, pero lo cierto es que los usuarios siempre tenderán a tratar la web como si fuera una app, ya que esto es a lo que están acostumbrados. Por ello tu diseño debe tener todas las características de una app en cuanto a sencillez y aprovechamiento del espacio.

Ahora veamos cómo hacerlo:

  • Agranda los elementos de toque: por supuesto, los dedos son más grandes que cualquier cursor, y por tanto todos los elementos de tu diseño deben adaptarse a ese tamaño para que el usuario pueda manejarlos fácilmente (Apple recomienda 44×44 píxeles para los elementos de toque).
  • No utilices efectos de hover: el hover es ese efecto que puede, por ejemplo, cambiar el color o el tamaño de un elemento cuando pones el cursor sobre él, y es muy utilizado por la mayoría de los diseñadores para indicar que ese elemento es interactivo. Sin embargo, aún no existen controles táctiles para el hover, así que no lo utilices en tu diseño móvil.
  • Evita los gráficos grandes: las imágenes o gráficos de gran tamaño y complejidad no se visualizan bien en los dispositivos de menor tamaño, así que intenta trabajar con imágenes que sean manejables en las pantallas pequeñas.
  • Piensa en la interactividad: los usuarios de móvil están acostumbrados al movimiento, así como a tener un mínimo de control sobre la aplicación, por ello utiliza elementos expandibles, peticiones AJAX, navegación off-canvas, y todo lo que ayude al usuario a interactuar sin refrescar la página.

3. Prueba en un dispositivo real

Esto casi no necesita explicación, pues lo primordial al diseñar para móvil es comprobar que el diseño se ajusta realmente a la pantalla de un móvil. Revisa si se ven bien todos los elementos, si la tipografía es fácil de leer, si los elementos de toque tienen el tamaño apropiado, etc. Te recomiendo que esto lo hagas primero en los móviles más pequeños y luego pases a probar en los más grandes.

4. Comienza a pensar en grande

Si ya tienes solucionado todo el diseño para los dispositivos más pequeños, sólo te resta ir agrandándolo hasta que haya demasiado espacio en blanco, y luego organiza tus elementos en ese espacio.

Aquí ya puedes agregar los elementos “prescindibles”, o sea, aquellos que no son esenciales y por tanto no se muestran en las pantallas más pequeñas, aunque te recomiendo no abusar de ellos para que todo tu diseño mantenga su identidad.

Como ejemplo fíjate en cómo lo hizo la revista Smashing Magazine, que logró mantener sus elementos esenciales (en este caso los artículos y su información) más o menos de la misma forma en todos los dispositivos:

Smashing

Conclusión

La estrategia de móvil-primero te permitirá ahorrar tiempo y esfuerzo en el proceso de diseño, además de ayudarte a determinar desde el primer momento cuáles serán los elementos esenciales de tu web. Inténtalo y cuéntame cómo te fue, y si ya lo has probado no olvides compartir con todos tus impresiones en un comentario. ¡Hasta la próxima!