Cómo diseñar una página web responsive

cómo-diseñar-página-web-responsive-13
Carlos Carrasco – Máster Diseño Web y Desarrollo Front-end

No estamos hablando de Paquita Salas: no necesitamos actores 360, pero sí webs que lo sean. Si tu web no es responsive, ni tienes web ni tienes nada.

Una web responsive es la solución al problema multi-pantalla. Hasta hace poco, las webs se hacían de manera fija con un tamaño establecido hasta que se colaron en el sarao las tablets y los smartphones. Ahora, sin tamaños fijos de páginas, ni milímetros para que saquemos la regla, la cosa se complica. Como no queremos que perdáis la cabeza, vamos a centrarnos en la parte del diseño.

1. ¿Qué es el diseño web responsive?

cómo-diseñar-página-web-responsive-07

Para diseñar una web responsive, tenemos que definir qué va a ocurrir cuando pasas de una pantalla pequeña a una grande y viceversa. Vamos a partir de que no vas a ser un diseñador cutre que tire de plantilla y que vas a diseñar una web adaptada 100% al proyecto que tienes entre manos.

2. Inspiración web de la buena

cómo-diseñar-página-web-responsive-06

Ponerte a ver webs así al azar te va a servir de poco. Vamos a ir a tiro fijo y a buscar la inspiración en galerías donde ya han hecho la criba por nosotros y se han quedado de lo bueno con lo mejor.

  • Site inspire: Una web muy limpia y muy organizada.
  • Abduzeedo: Dentro de su sección de UI/UX encontramos puras maravillas.
  • Awwwards: Si tienes que quedarte sólo con una, esta página es el Santo Grial del diseño web.

3. Navega y toma nota

cómo-diseñar-página-web-responsive-08

No se trata sólo de ver el diseño de la web, sino también de cómo se «mueve». Puedes simplemente hacer más pequeño tu navegador para ver cómo sería la visualización de la web en tablet o en móvil o usar una herramienta como Viewport Resizer para testear el responsive de las webs.

Ve tomando nota de cómo se comportan la cabecera, el menú principal, el footer y el cuerpo de las webs para quedarte con aquello que se adapte más a lo que buscas.

4. Hazte un mapa y unos wireframes

cómo-diseñar-página-web-responsive-08

Piensa en la información que tiene que llevar tu web y en cuántas pantallas vas a distribuirla. Éste será el mapa de tu web.

El wireframe serán los detalles de esas pantallas. No te vuelvas loco y boceta a mano distintas versiones para ver cuál te gusta más. Intenta siempre ser consistente manteniendo los elementos de la cabecera y el pie de página en el mismo sitio de una pantalla a otra.

5. Mobile first, empieza por el móvil

cómo-diseñar-página-web-responsive-03
Mónica Villar – Máster Diseño Web y Desarrollo Front-end

Esto puede que te suene raro, pero es así. Lo primero que tienes que sentarte a diseñar es la versión móvil de tu web. Además de tener a un número creciente de usuarios enganchados a la red en el móvil, tenemos que pensar que siempre es más fácil rellenar que limpiar.

No le des más vueltas, ¡mobile first!

6. Usa el grid

cómo-diseñar-página-web-responsive-06

El grid es un conjunto de líneas que nos van a permitir alinear y componer los elementos de la web. Tenemos que ponérselo fácil al programador y usar una rejilla que esté en consonancia con la que se usará en el código. Si no puedes hablar directamente con el programador, te aconsejamos que uses el grid de Bootstrap 4 como referencia.

No te preocupes que Juanlu Molina, que es más apañado que las pesetas, te ha preparado un vídeo explicándote cómo montar el grid de Bootstrap 4 en XD.

7. Prototipa en XD

cómo-diseñar-página-web-responsive-12

Que sí, que puedes prototipar en Photoshop, en Illustrator y hasta en un cuaderno de rallitas, pero XD es la mejor herramienta para hacerlo. Además de tener opciones de animación, la herramienta es gratuita y en el blog tenemos un tutorial de Adobe XD desde cero.

Puedes descargarte el programa aquí.

8. Orden y concierto

cómo-diseñar-página-web-responsive-02

Sé ordenado y que no se te pase por la cabeza mandarle al programador un archivo con 200 capas sin nombrar. Nómbralas con términos comprensibles y ordénalas. El programador no es mago y no lee el pensamiento. Aquí Juanlu te te da 5 consejos para que el diseñador no vuelva loco al programador.

9. De menor a mayor

cómo-diseñar-página-web-responsive-04

Una vez que tengas la versión móvil, diseña la versión para tablet y la versión para escritorio. Yendo de menos a más, no vas a tener problema ninguno porque vas a ir de lo más sencillo a lo más complejo, y no al revés.

¿Te ha quedado la cosa un poco más clara? Sabemos que enfrentarse al diseño web no es fácil, pero, amigos diseñadores gráficos, ésta es una de las ramas con más salidas laborales en el campo del diseño y, a día de hoy, raro es encontrarse una oferta de trabajo para diseñador gráfico en la que no te pidan también diseño web, así que, a ponerse las pilas.

Dinos lo que piensas

Tu email no se mostrará ;)