Golden Grid System

De Casiopea






Caso de Estudio
NombreGolden Grid System
AutorJoni Korpi
Palabras ClaveUX, Experiencia de usuario, Diseño de Interfaz, Diseño Centrado en las Personas, Diseño Front, Diseño Web
Estudiado enTaller de Construcción DG 4 - 2012
Estudiado porCamila Valenzuela


Columnas Plegables

Golden Gris System (GGS) divide la pantalla en hasta 18 columnas.
La primera y última columnas son usadas como márgenes externos de la grilla, lo que deja 16 columnas para usar en el diseño.
Como 16 columnas es mucho para cualquier otra cosa que no sean grandes monitores, las columnas se pliegan o combinan en 8 columnas para pantallas de tablets y en 4 para pantallas de móviles. De esta forma GGS puede cubrir fácilmente cualquier tamaño de pantalla desde los 240 hasta los 2560 pixeles.
Las dimensiones de la grilla para cada configuración están anotadas con comentarios CSS de esta forma:

/*

* Four-column grid archive
* ------------------------------------
* Margin   | # 1  2  3  4   | Margin
* 5.55555% | % 25 50 75 100 | 5.55555%
*/

Espacios entre columnas adaptables

Mientras que el ancho de columnas en GGS es proporcional al ancho de pantalla, el ancho de los espacios entre columnas es proporcional al tamaño de fuente y está definido en ems.

Las grillas adaptables que utilizan espacios entre columnas proporcionales a la pantalla pueden hacer que el contenido se sienta apretado o tirante entre sí, dependiendo del ancho de la pantalla. Con GGS esto no sucede ya que los espacios siempre están en proporción al contenido.

El funcionamiento de esto de ve en el siguiente código:

.wrapper {

         box-sizing: border-box; /* + vendor prefixes */
         width: 50%;
         margin-left: 25%;
         /* Assuming gutter width= 1.5 em */
         padding: 0 0.75 em;
        
        }

Cuadrícula base ampliable

Los diseños adaptables a menudo requieren cambiar el tamaño de la fuente para determinados anchos de pantalla, por ejemplo para hacer el texto fácil de leer en grandes monitores o para hacer que el texto se ajuste mejor a las estrechas pantallas móviles. Esto puede hacer que las proporciones del diseño se sientan desajustadas, especialmente si se usa una grilla base.

GGS evita este problema. Si los tamaños de fuentes, alturas, rellenos, márgenes y bordes son definidos en ems, todos estos se escalarán en función al tamaño de la fuente manteniendo siempre intacta la grilla base (salvo por un redondeo de 1 o 2 pixeles), esto permite mantener el ritmo vertical de la fuente sin importar el tamaño de la pantalla.

GGS viene con un set de tipos predeterminados ajustados a una grilla base de 1.5 de altura. Medida que puede ser modificada según los propios ajustes.

Golden Gridlet

Golden Gridlet es un pequeño script que agrega un botón en la esquina superior derecha de la página. Al hacer click se superpone la grilla GGS y la grilla base sobre la página, haciendo más fácil la comprobación visual de la alineación de los elementos del diseño.

Golden Gridlet debería funcionar en la mayoría de los navegadores modernos y se puede utilizar también en pantallas touch.