Diseño UX/UI con el 960 Grid System

No sirve sencillamente hacer una web para nuestra marca. No todas las webs valen y no todas las webs son igual de buenas. Si queremos destacar en los rankings de posicionamiento, está claro que debemos ser los mejores, no solo en SEO sino también en el diseño web.

Actualmente, existen diferentes sistemas para estructurar los contenidos en la web de un modo amigable que permitan la correcta lectura del contenido para las spiders de Google y que dan a nuestro usuario una experiencia sencilla e intuitiva. Nosotros os presentamos en esta entrada del blog el 960 Grid System.

960 Grid System es un sistema de rejilla o cuadrícula que utilizamos en diseño web para estructurar los contenidos de forma semántica, equilibrada, estética y cómoda para el ojo humano. Sobretodo cómoda para el ojo humano. Una correcta distribución de nuestros elementos web permite, no solo una mejor posición sino que además contribuye drásticamente a reducir riesgos relacionados con el usuario como el índice de rebote, la frustración en la navegación o las malas experiencias de compra en una tienda online. Contribuye a que el usuario deba de realizar menos esfuerzo para lograr las mismas metas, proporciona recuerdo y aprendizaje del site, permite deshacer acciones erróneas, hace más eficiente al usuario y reduce los tiempos de latencia.

El 960 Grid System es un sistema de cuadrícula para web que está diseñado para cumplir con la dimensión más común en web, la de 960 píxeles, y proporcionar un mejor flujo de trabajo en el site. En dicho sistema existen dos posibles variantes: el uso de una cuadrícula de 12 columnas a 60 píxeles o bien 16 columnas a 40 píxeles. La idea de crear este tipo de cuadrículas, es fundamentalmente la de proporcionar a nuestros diseños un patrón sobre el que poder construir rápidamente un prototipo web navegable, accesible y que proporcione una buena experiencia. Si entramos en la página oficial de 960 Grid System podremos encontrar una grandísima fuente de información muy útil donde se nos explicarán en detalle todos elementos que tenemos predefinidos solo con descargarnos el archivo. Por ejemplo, nada más descomprimir nuestro paquete donde tenemos el sistema de rejilla 960 Grid System podremos ver una batería de carpetas que tienen plantillas para infinidad de posibles programas con los que queramos maquetar nuestra web: InDesign, Photoshop, Illustrator, Corel Draw, Xara … y lo mejor, ¡tenemos un archivo CSS! Este archivo nos proporciona todo un conjunto de etiquetas de estilo para nuestra página web, con clases preparadas para que se estructure nuestra web de la mejor manera posible siguiendo uno de los dos modelos expuestos anteriormente.

Además, y por si fuera poco, este sistema de rejilla incluye un módulo instalable a nuestro código que permite hacer nuestra web responsive para que se adapte a los diferentes dispositivos.

 

Toni Tort