Diseño Responsivo, plantilla para Inkscape y Foundation.

Todos los que alguna vez han hecho  desarrollo web han tenido que maquetar una página, es algo obligatorio antes de adentrarse en las elegantes estructuras de Bases de Datos del Backend o en el no-tan-elegante JavaScript del Frontend. Conforme vamos avanzando y tomando práctica nos damos cuenta que aunque nada se compara con el control que ofrece  maquetar desde cero, es mucho mejor construir todo sobre un framework CSS como Twitter Bootstrap, o mi favorito: Zurb Foundation.

Hay un paso que es necesario dar antes de maquetar: Diseñar la página… Un paso que nos saltamos casi siempre los desarrolladores, con nuestro desconocimiento en el uso de los programas de diseño y nuestras ansias por adentrarnos en el código, regularmente con resultados nefastos. Al pasar el tiempo nos damos cuenta y decidimos aprender algo de diseño, en mi caso ahora puedo manejar decentemente Inkscape, un muy buen programa de dibujo vectorial con licencia libre.

Y así llegamos al tema de este post: algunos conceptos a tener en claro cuando se diseña con grids responsivos, una plantilla que hemos desarrollado en CianCoders para trabajar grids con Inkscape. Se espera que el lector tenga conocimientos mínimos sobre maquetado web y uso de Foundation o Bootstrap.

Pensar en columnas

La gran mayoría de frameworks CSS se basan en un esquema de 12 columnas, básicamente facilitando la tarea de dividir la página en 2, 3, 4, y 6 secciones, y hacer que éstas secciones se comporten de determinadas formas cuando varía el ancho de la pantalla, para ofrecer siempre la información más relevante tanto en pantallas extra grandes, como en las pequeñas pantallas de los teléfonos celulares.

La ventaja de ser mayormente desarrollador y maquetador antes que diseñador, es que se puede visualizar el HTML y el CSS desde el principio, tomando en cuenta todos los posibles problemas y al mismo tiempo las mejores formas de hacer que todo se vea bien al final, como por ejemplo qué tamaño debería tener una imagen para ajustarse perfectamente a un número de columnas o el número mínimo de columnas que se deberían reservar para el cuerpo principal de la página. En diseño responsivo siempre debemos pensar en columnas.

Ya sea que la página sea la tradicional con barras laterales y el contenido al centro, o el moderno fondo animado y las letras light, todo se puede resumir a cuántas columnas deberían ocupar las barras laterales, o cuántas debería ocupar el texto sobre el vídeo, cuántas columnas ocupa el logotipo, cuántas columnas quedan para los banners, etc.

Por ejemplo, esta sección de la página de zurb (los creadores de Foundation):

zurb

 

Si quisiéramos un diseño similar, podríamos empezar por definir el número de contenidos que queremos presentar, y asignar a cada uno un número de columnas, 3 columnas para las imágenes de arriba, y una sección de 1/3 + 2/3 abajo ( es decir, 4 y 8 columnas). Para poder observarlo resaltemos las columnas:

zurb2

 

Como se puede ver, las imágenes de arriba ocupan 3 columnas cada una, y los contenidos de abajo 4 y 8 respectivamente (el último repartido en 3 y 5 columnas).

Si no tomamos en cuenta esta estructura de columnas desde un principio, no podemos lograr el efecto responsivo adecuadamente, y mas importante, el diseño inicial no se parecerá en nada al resultado final, algo que puede molestar mucho a nuestros clientes.

 

Las columnas son inmutables

Sí, lo son, aunque parecieran cambiar de ancho, las columnas tienen el ancho definido en porcentajes en relación al ancho de la pantalla, de esta forma siempre habrán 12 columnas visibles, aún cuando el ancho de la pantalla sea tan pequeño como en un teléfono móvil, la única diferencia es que el ancho de la columna se hace cada vez más pequeño reduciendo el contenido que puede manejar. Allí es donde entra el siguiente paso, diseñar las etapas responsivas.

Como el número de columnas nunca cambia, lo que debe cambiar es la cantidad de columnas que abarca un contenido, por ejemplo, veamos que pasa cuando se reduce el ancho visible de la página:

zurb3

 

Se puede observar cómo todo se adapta y por lo mismo todo es mas delgado, debido a que las columnas se han vuelto mas estrechas:

zurb4

 

Puede observarse cómo las columnas se volvieron más estrechas, pero se sigue manteniendo el ancho en columnas para cada contenido.

Para hacer que el contenido se adapte al ancho de pantalla facilitando la lectura, se cambia la cantidad de columnas que abarca, por ejemplo para las imágenes de arriba, de usar sólo 3 columnas, se pasa a utilizar todas, es decir 12:

zurb5

 

veamos de nuevo las columnas:

zurb6

 

Es importante observar que los márgenes, también conocidos como “gutter”, a diferencia de los espacios para contenido, no varían nunca de ancho, siempre mantienen el mismo ancho sin imp0rtar nada, ya sea en una pantalla 1080p o en una pequeña pantalla de celular. Esto es importante conocerlo al momento de hacer grids anidados o cuando se trata de hacer que un contenido quede más cerca de otro (cosa que puede resultar demasiado trabajoso y es mejor diseñar para que eso no sea necesario).

 

Diseño en Inkscape

Inkscape es un editor de dibujos vectoriales, que aprovechando la tendencia actual de hacer páginas ligeras y “flat” se convierte en una herramienta muy buena para diseñar páginas… Pero, ¿cómo empezar?

Para diseñar una página, como con todo proceso creativo, cada quien debe desarrollar su método, lo que sí podemos generalizar son las herramientas que pueden resultar útiles. Entre éstas y en especial si vamos a utilizar Foundation (puede que funcione también con Bootstrap), necesitamos una plantilla base que nos sirva de guía para visualizar las columnas de un diseño responsivo.

Existen algunas soluciones para esto, pero no pude encontrar alguna que sea específica para Inkscape, o que al menos se trabaje en un archivo .svg , así que en CianCoders hemos creado una plantilla que estaremos usando en adelante:

zurb8

La plantilla comienza ya con los valores iniciales de Foundation, un grid de 12 columnas, con 1000px de ancho y 30px de “gutter”, es decir la separación entre columnas, que se traduce en 15 px de padding (en realidad todo se trabaja en rem, pero es más fácil visualizarlo en px).

También se puede ver cómo incluye un set de otros tamaños de columnas, o NESTED GRIDS, pensados para calcular el ancho de las columnas cuando se anidan o para comparar cómo se verían las 12 columnas cuando se reduce el ancho de la pantalla en un tercio, la mitad, etc.

En el archivo SVG, toda la plantilla está en la capa 1, nombrada como GRID y bloqueada, así es fácil agregar nuestro diseño encima y simplemente ocultar o mostrar todo sin afectar nada.

Es importante notar, que Inkscape parece no llevarse bien con elementos agrupados, así que si quieres utilizar los grids anidados, trata de trabajar sin agrupar las columnas, porque es muy probable que al escalar para cubrir el área que necesites, el ancho de los márgenes varíe mucho, algo que no debe pasar.

Para terminar, aquí dejo el archivo para su descarga:

 

Comments

johnjonescode

Muchas gracias por compartir la información de la mejor forma y sobretodo muy entendible Saludos.

22 febrero, 2016