Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Workflow

Usando el Sistema de Grids 960 como un Marco de Diseño

by
Read Time:14 minsLanguages:

Spanish (Español) translation by Claudia Márquez (you can also view the original English article)

El 960 Grid System ha existido desde hace un tiempo ... pero se ha utilizado principalmente en el lado de la codificación de proyectos como un marco HTML / CSS. Hoy vamos a analizar las ventajas de utilizar sistemas de grillas como 960GS desde el inicio de un proyecto, incluso antes de abrir Photoshop o Fireworks.  Si no ha utilizado un marco anteriormente, o si solo desea un buen repaso, ¡este es un buen lugar para comenzar! 


Un poco de contexto: Nuestro sitio hermano, Nettuts, ha publicado un montón de excelentes artículos sobre el uso de marcos de CSS como herramienta de codificación. Todos son relevantes para esta discusión, así que ve a verlos cuando tengas oportunidad. Este artículo, sin embargo, analizará las ventajas de utilizar un marco para diseñadores web específicamente. No profundizaremos demasiado en la codificación, en cambio, vamos a analizar cómo el uso de un marco puede ser una herramienta poderosa en la fase de diseño, incluso antes de que la codificación comience.  Bien, ¡vamos a sumergirnos!

Buceando en Frameworks

Hay muchas posibilidades de que ya haya escuchado o utilizado algún tipo de marco de CSS ... pero, por si acaso, repasemos los beneficios clave de usar un marco CSS (también conocido como sistema de grillas) en cualquier proyecto web:

  • Proporciona un "marco" que está diseñado para verse bien en todos los monitores.
  • Agiliza el proceso de diseño definiendo medidas exactas.
  • Reduce el tiempo de desarrollo al proporcionar HTML / CSS precodificado.
  • En un mundo perfecto, ayuda a los diseñadores y desarrolladores a comunicarse mejor, suavizando el proceso de pasar del Diseño a la Codificación. 

En última instancia, un marco de CSS debería ayudar a establecer algunas pautas básicas para las columnas de contenido, al tiempo que proporciona a los diseñadores un control total sobre sus diseños.

En este artículo: voy a explicar qué es un marco de CSS, y por qué elegí 960. Luego, repasaré los conceptos básicos de cómo aplicar el 960 Grid. Para finalizar nuestra discusión, le mostraré algunos sitios que están usando la cuadrícula 960 y cómo están estructurados. 


Marcos de CSS: una breve descripción 

Un CSS Framework es una serie de hojas de estilo creadas para facilitar la vida de un desarrollador web. Representan las diversas peculiaridades de los navegadores, son fácilmente adaptables y aplican principios básicos de diseño (como el establecimiento de márgenes visualmente agradables entre los elementos).

A menudo, estos marcos también tienen hojas de estilo de tipografía, que pueden actuar como un gran lugar para comenzar a trabajar en la tipografía de su sitio (para obtener más información acerca de la tipografía, consulte este artículo).

Hay dos principales marcos de CSS en este momento: Blueprint y 960. Ambos son marcos perfectamente capaces, con excelentes características y facilidad de uso.  Simplemente se trata de una cuestión de preferencia de qué marco se siente más cómodo de usar.

Antes de comenzar la fase de diseño de un proyecto, es importante analizar la selección de un marco con la persona que va a codificar el sitio.  A menudo, los desarrolladores tendrán preferencias hacia un marco de CSS particular, y como una de las principales razones por las que usamos marcos durante la fase de diseño es suavizar la transición del diseño a la codificación, es una decisión importante.  Si usted mismo está codificando el proyecto, simplemente asegúrese de que se sienta cómodo con el marco de trabajo de cuadrícula que elija; no hay nada peor que diseñar un sitio completo basado en un marco que termine desaprobando. 


960 GS: los detalles arenosos

Personalmente, encontré que la 960 Grid se adapta mejor a mis necesidades, así que eso es lo que he adoptado y eso es lo que vamos a discutir en este artículo. Sin embargo, los principios generales que discutiremos se aplicarán a cualquier marco, incluido Blueprint. 

960.gs se basa en poner todos los elementos de su sitio en un recipiente de 960px de ancho (clever girl) y dividir ese recipiente en 12, 16 o 24 columnas de igual tamaño. Proporcionan una herramienta para usar anchos alternos, pero 960 es para lo que se desarrolló todo el sistema y se ve bastante nítido.

¿Por qué 960px?  Porque 960px es un ancho adecuado para la gran cantidad de plataformas en las que navegamos por la web. Básicamente, permite que un monitor de 1024 píxeles de ancho muestre el sitio con precisión y sin desplazamiento horizontal, lo que representa el ancho del navegador Chrome, barras de desplazamiento y un poco de relleno para mayor legibilidad. Siempre hay un margen de 10 píxeles a la derecha e izquierda de la columna de contenido principal, lo que significa que los navegadores más pequeños siempre podrán leer el contenido más alejado a la izquierda sin que el texto se empalme sino contra la ventana del navegador. 

Además, todos los números en el 960GS son números enteros basados en la proporción áurea - no hay puntos decimales o problemas de espaciado funky. Si ha leído nuestro artículo sobre Matemáticas y Diseño Web, ya sabe lo importante que es obtener estos números. 

Una de las omisiones evidentes, o características agradables, según cómo la mire, es la forma en que el 960 maneja (o no) la tipografía.  Hay un archivo text.css incluido, pero esto es principalmente para garantizar que haya al menos algo en su lugar, de modo que a medida que realiza prototipos rápidos, elementos comunes como encabezados, párrafos y listas tengan un estilo básico.

¿En qué se diferencia Blueprint?

No entraré en demasiada profundidad aquí, pero analicemos brevemente las diferencias clave entre 960.gs y Blueprint. Primero, Blueprint es un marco CSS basado en 950px, es muy similar a 960 en la forma en que maneja el diseño básico (BP usa 24 columnas con enfoques similares al relleno y las proporciones) ... pero ahí es donde Blueprint deja de ser similar .


Blueprint permite estilos y notificaciones de formularios específicos, algo que desearía que implementara el 960.

Blueprint es un sistema de marco mucho más complejo, robusto y completo. Se ha creado como una hoja de estilo completa para prácticamente todos los elementos que se te ocurran (botones de opción, tablas, etc.). Hay cosas que me gustan de Blueprint, la más notable es su estilo para los elementos del formulario y las clases de notificación integradas. Además, incluye un conjunto completo de estilos para:

  • Tipografía: BP proporciona tamaño de tipografía y valores predeterminados de espacio para todos los elementos.
  • Estilo de elemento de formulario: estilo para formularios y algunas clases que se pueden usar para agregar a formularios (como campos obligatorios).
  • Estilos de impresión: imprima hojas de estilo para cuando los surfistas presionen el botón Imprimir.
  • Interfaz de usuario para complementos: CSS preconstruidos (y, a veces, imágenes) para botones, pestañas y sprites.

El problema que tuve con Blueprint es que es demasiado complejo de usar en la fase de diseño ... crear un diseño desde cero significa volver a formatear todo lo que proporcionan, y a menudo es difícil mantenerse al día con la amplitud total que ofrece BP. Por el contrario, 960.gs ofrece solo un diseño, perfecto para permitir que un diseñador sea creativo dentro de límites realistas.


Usando el sistema 960 Grid

El 960 Grid es casi terriblemente fácil de usar (de hecho, puede comenzar a preguntarse: "¿Por qué no estaba usando esto antes?"),  con solo unas pocas reglas simples que debes cumplir.

Descargue el 960 Grid de 960.gs

Después de descargarlo, eche un vistazo al directorio que acaba de descomprimir. Quiero llamar su atención sobre dos carpetas: "sketch_sheets" y "templates". La carpeta "Hojas de boceto" contiene un PDF de varios tamaños de cuadrícula dentro de una ventana del navegador, y la carpeta "plantilla" contiene plantillas para casi todos los programas gráficos bajo el sol (como GIMP, Fireworks y Photoshop).

Sketch Sheets: facilitando tu vida ... 

El propósito de un Marco CSS es facilitarle la vida, y siempre debe buscar maneras de ayudarlo a reducir el tiempo que lleva crear un diseño. Use estas plantillas al crear un diseño en Photoshop, imprima copias de las "hojas de bocetos" cuando discuta los detalles de un proyecto con un cliente (¡y asegúrese de mirar esto antes de ir!).


Ejemplo de una hoja de bocetos impresa ... con algunos bocetos sobre ella. 

De hecho, sugeriría usar estas hojas de bocetos cada vez que inicie un proyecto: le permitirán experimentar libremente antes de encerrarse en cualquier diseño.  Solo le tomará 5 minutos de bocetos para darse cuenta de que un diseño funcionará o no, en lugar de 50 minutos + si lo hubiera diseñado y codificado. 


Diseñando con las plantillas 960

Una vez que haya llegado a un acuerdo básico sobre el concepto esbozado para el sitio, es hora de descifrar los archivos de plantilla. Esta es probablemente la razón principal por la que me gusta usar el sistema 960 ... viene pre-empaquetado con plantillas para casi cualquier programa que se te ocurra. Yo uso Photoshop, así que aquí hay una captura de pantalla de la plantilla proporcionada:

El beneficio clave aquí es simple: la plantilla tiene guías pre compiladas para todas las columnas de contenido principal que corresponden directamente al marco CSS en el lado de codificación de las cosas. Es fácil dibujar rápidamente sus principales columnas de contenido y mantener todo en su diseño limpio y organizado. 

Los diseñadores experimentados pueden ver esto como "diseño con ruedas de entrenamiento", pero francamente, no hay nada de malo en tener un sistema de superposición simple para ayudar a guiar el marco para un diseño web.

Todavía tiene que diseñar todo en el sitio (¡por supuesto!), Pero al mantener su diseño en línea con las guías, hará que el aspecto de desarrollo de las cosas sea mucho más fácil. Como beneficio adicional, tener un enfoque uniforme para el relleno entre las celdas de contenido es una excelente manera de hacer que su diseño se vea más profesional. Lea más sobre por qué "Pixel Perfect Comps" aquí.


Configurarlo

Ahora que ha conseguido un diseño clave, es hora de que hablemos de la sintaxis de la cuadrícula 960. Como mencioné en la introducción, puede encontrar mucha más información sobre el uso y creación de prototipos con marcos CSS en Nettuts, así que solo voy a cubrir los conceptos básicos aquí.

Primero, deberá hacer referencia a los archivos CSS apropiados en su diseño: reset.css (el archivo de restablecimiento que da cuenta de las peculiaridades del navegador), text.css (la hoja de estilo de tipografía incorporada) y 960.css (o 960_24_col. css si está usando una cuadrícula de 24 columnas). Por lo general, pongo todo el estilo de mi sitio específico en un archivo separado (generalmente llamado style.css), para asegurarme de no romper nada en el Framework.

Consejo rápido: Haga referencia a su propia hoja de estilo después de hacer referencia al Marco, para que pueda ajustar aspectos específicos del marco sin alterar el Marco en sí (y si comete un error, no tiene que volver a descargar y sobrescribir los archivos del Marco ) Con estos 4 archivos, ahora está listo para comenzar a diseñar su sitio.

Aquí hay una descripción general rápida de la sintaxis extraída del sitio 960.gs:

El primer div es tu contenedor, en qué se almacenará tu contenido. Al definir su clase como "contenedor_12", usted está diciendo: "Quiero que este contenedor tenga una cuadrícula de 12 columnas" (la misma práctica se aplica cuando se usa una cuadrícula de 16 y 24 columnas).

Ahora que ha definido el contenedor como un diseño de 12 columnas, comienza a estructurar su sitio de manera que se ajuste al diseño. Si observas los siguientes elementos div en la jerarquía (como se observa en las pestañas), verás la sintaxis de sus definiciones. "Grid_7" y "grid_3" son fáciles de entender: está diciendo que este elemento div ocupará un número X de columnas. Sin embargo, 7 + 3 = 10 <12, lo que significa que tendrá 2 columnas vacías al final del contenedor, ¿verdad? Bueno, aquí es donde entra en juego el aspecto de prefijo y sufijo de la definición de clase. Con una definición de clase de "grid_x sufijo_y", estás diciendo: "Quiero que este div ocupe X columnas, y que haya Y número de columnas vacías después de él". (Esto también se aplica al prefijo). Entonces, dado que "Grid_7" tiene un prefijo de 1, y "Grid_3" tiene un sufijo de 1, 7 + 3 + 1 + 1 = 12!

Por ahora, sé que te estás preguntando acerca de los elementos Div anidados en el div "Grid_7". Bueno, puedes anidar divs que ocupan un número específico de columnas dentro de otro div, siempre que no exceda el tamaño de su grilla padre. Además, los elementos primero y último deben tener "alfa" y "omega" anexados a su definición de clase, respectivamente. Entonces, en nuestro código de ejemplo: "grid_2 alpha" es el primer div anidado dentro de "grid_7", el siguiente elemento "grid_3" está en el medio (y por lo tanto no necesita un "alfa" o "omega" anexado), y finalmente "grid_2_ omega" es la última div anidada dentro de "grid_7". Y dado que 2 + 3 + 2 = 7, la definición es correcta.


Poniéndolo todo junto: un breve ejemplo

Con el fin de ilustrar todo este proceso, veamos un ejemplo rápido del uso del Marco 960 durante la fase de diseño de un proyecto personal mío.

El diseño en sí es bastante simple, pero es la manera perfecta de mostrarle cómo el marco puede actuar como una herramienta a través del proceso de diseño.

La Página Web de Cerberus: El ejemplo que nos va el uso

Mass Effect 2 es uno de mis juegos favoritos de los últimos 5 años, y sentí que crear un sitio para la organización ficticia "Cerberus" sería un desafío. Los principales aspectos de la organización son: profesionalismo y destreza tecnológica, que quería transmitir con un diseño limpio que utilizara todo su esquema de color. Para empezar, esbocé el diseño del sitio (sería hipócrita para mí actuar de otra manera, ¿no?).

Mientras miraba el boceto de diseño, vi cómo hacer que el diseño funcione en el 960 Grid.

A continuación se muestra el esqueleto HTML para mi sitio:

Si se dio cuenta, el logo solo cubría 2 columnas, mientras que el encabezado secundario ocupaba los 12 espacios. Como el encabezado div tenía 12 columnas de largo, cualquier subelemento puede tener hasta 12 columnas de largo. Este truco me permitió hacer el encabezado, ya que el logotipo ocupaba 2 columnas y dejaba el resto en blanco (la imagen es en realidad la imagen de fondo del div del encabezado). Y como el encabezado secundario tenía 12 columnas de ancho, llenó todo el ancho debajo del logotipo (ya que no cabía todo su contenido dentro de los 10 espacios restantes después del logotipo).

Esta es en realidad una distinción importante que hacer, y es otra herramienta de diseño que debe utilizar (y para estar seguro, podría usar "prefijo" o "sufijo" para garantizar que se reserve una cierta cantidad de espacio). El resto del sitio es bastante sencillo: 8 columnas para el contenido principal y 4 para la barra lateral. Cada elemento de la barra lateral es un elemento div separado; se amontonan uno encima del otro porque están restringidos al ancho de 4 columnas.

Para ilustrar cómo está configurado el sitio, tomé una captura de pantalla del sitio y marqué claramente las columnas:


Ejemplos del Grid 960 en acción

Ahora, mi propio ejemplo podría no ser la mejor manera de inspirarte para salir y crear algunos diseñadores web asesinos, así que aquí hay solo algunos ejemplos del sistema 960 en acción.  Puede encontrar más en el sitio 960.gs.


Palabras de clausura

97/5000Uno de los aspectos más atractivos de un Marco CSS es la comodidad que ofrecen a los diseñadores. Sin embargo, como cualquier otra herramienta, debes asegurarte de que la estás utilizando de manera relevante y que valga la pena. No intente usarlo si no se ajusta al diseño, y no permita que restrinja su creatividad. Para la mayoría de los proyectos (especialmente aquellos para diseños complejos basados en periódicos o blogs), un marco CSS puede ser una gran herramienta para ahorrar tiempo, no solo para escupir HTML / CSS rápido, sino para todo el proceso de diseño.

¿Quieres leer más sobre la codificación con marcos CSS? Consulte la biblioteca de artículos de Nettuts sobre el tema (desplácese hacia abajo para obtener más información avanzada).

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.