Cuadrícula de diseño

La cuadrícula de diseño de Sitely es una excelente herramienta para crear diseños atractivos de páginas o secciones. Aunque se usa más comúnmente para crear cuadrículas de imágenes para galerías, también puede emplearse para otros contenidos como texto, botones y cajas. De hecho, Sitely te ofrece una opción de cuadrícula de diseño específica para contenido de imagen y video: se llama Cuadrícula de imagen/video. Ese elemento puede rellenar automáticamente una cuadrícula con contenido mediante un panel especial de selección de contenido. La cuadrícula estándar, de la que hablamos aquí, es una opción más flexible para quienes deseen añadir contenido personalizado a las celdas de la cuadrícula. Aparte de estas diferencias, ambas opciones de cuadrícula se configuran de forma muy similar..

Comienza agregando el elemento a tu lienzo. Al añadirlo por primera vez, contendrá la estructura predeterminada de una fila y tres columnas; se ve así:

Una vez en el lienzo, puedes empezar a aplicarle estilo y a añadir cualquier contenido que quieras. La configuración de la cuadrícula se realiza desde el panel de estilo, a la derecha de la pantalla. Aquí puedes ver los ajustes predeterminados. La cuadrícula tiene tres elementos (llamados celdas). Cada elemento está configurado en 300 x 300 píxeles, con un espaciado horizontal y vertical de 20 px. Al cambiar el número de elementos, agregas más celdas a la cuadrícula que aparecen debajo de la primera fila de celdas. Así que, si cambias el número de elementos de tres a, por ejemplo, seis, verás dos filas de celdas en tu pantalla. 

Pero puedes personalizar aún más tu cuadrícula seleccionando cada celda y pidiéndole a Sitely que cambie su tamaño y su forma. Nuevamente, en el panel de estilo verás una opción que indica a Sitely cuántas columnas y/o filas quieres que ocupe cada celda en la cuadrícula. La opción se ve así.

Por ejemplo, si configuras la primera celda de tu cuadrícula para que abarque 2 columnas y 2 filas, tu cuadrícula se verá así.

Si no ves la opción Celda de cuadrícula en el panel de estilo, es porque no seleccionaste una celda. Haz clic en una celda para resaltarla y entonces aparecerá la opción. Sabrás que la celda está seleccionada en el lienzo porque tendrá tiradores perimetrales que parecen pequeñas X.

Continúa trabajando celda por celda para ajustar sus extensiones de columna y fila hasta que tu cuadrícula quede como deseas. Aquí tienes un ejemplo de una cuadrícula simple con la que podrías terminar. Hemos añadido los abarques de columnas y filas para que veas cómo se creó la cuadrícula.

Ahora puedes aplicar estilo a tu cuadrícula usando todas las opciones disponibles en el panel de estilo. Puedes aplicar color de relleno, bordes y redondeado. Ten en cuenta que, al añadir la Cuadrícula de diseño al lienzo, tanto ella como sus celdas vienen rellenas con colores de wireframe estándar. Puedes cambiar estos colores a tu gusto en el panel de estilo.

A continuación, es hora de añadir contenido. En esencia, puedes colocar casi cualquier elemento dentro de una celda. Simplemente crea y estiliza el elemento en tu lienzo y, luego, arrástralo sobre una de las celdas para colocarlo. A medida que arrastras elementos sobre la cuadrícula, las celdas se resaltarán para indicar que estás en una zona de soltado de esa celda. Suelta el botón del mouse y el elemento caerá dentro de la celda. Así se verá el resaltado.

Si tu contenido es más grande que la celda, al soltar el elemento se recortará para que encaje dentro del límite de la celda. Es posible que debas cambiar el tamaño del contenido para adaptarlo mejor al tamaño y la forma de la celda una vez colocado. Puedes hacerlo arrastrando el tirador de redimensionamiento del elemento o, en el caso del texto, cambiando su tamaño de fuente en el panel de estilo.

Por supuesto, no estás limitado a tener un solo elemento en una celda. Si tu celda es lo suficientemente grande, puedes colocar una imagen, texto y, posiblemente, un botón, todo en la misma celda. Tú decides, así que ponte tan creativo como quieras.

Algo a tener en cuenta sobre las celdas de la cuadrícula es que todas se estilizan de la misma manera. Por ejemplo, si seleccionas una celda y cambias su color de fondo, todas las celdas de la cuadrícula adoptarán ese mismo color. Esto ayuda a garantizar la coherencia y la simetría de tus diseños de cuadrícula. Sin embargo, puedes dar a tus celdas fondos de colores diferentes incluyendo una caja como parte del contenido. Por ejemplo, si quisiera que la caja de texto ilustrada arriba tuviera un fondo azul, la crearía como parte del contenido y luego la agruparía con el texto antes de soltarla en una celda, así:

Una vez que tu contenido esté dentro de la celda, puedes ajustar de forma independiente el tamaño del fondo y del texto para que se adapte mejor al espacio disponible. 

Ponte creativo

Puede que te preguntes cómo se puede aprovechar mejor esta función de Sitely en el mundo moderno de las comunicaciones visuales, especialmente en el diseño web. Para responder a esta pregunta, basta con mirar algunas de las tendencias más recientes en diseño de páginas web, en particular, los diseños de cuadrícula Bento. Son páginas web inspiradas en la caja de almuerzo japonesa Bento. Si no estás familiarizado con ellas, se ven así:

El concepto es bastante sencillo de entender. Cada elemento de la comida está contenido en su propio compartimento. En diseño web entran en juego ideas similares. En lugar de alimentos, una página diseñada al estilo Bento tiene una serie de celdas, cada una con una sola idea o mensaje. Es un estilo que han favorecido principalmente empresas tecnológicas, como Apple. En esencia, el usuario puede escanear rápidamente toda la página para hacerse una idea de qué trata un producto o servicio. Cada idea está ordenadamente compartimentada. Al pasar el cursor o hacer clic en un compartimento, a menudo se ofrece más información sobre ese aspecto particular del producto o servicio. Este concepto de “escaneo rápido” se ha vuelto esencial en el veloz y, en gran parte impaciente, mundo de los medios digitales. Y así nació la tendencia del diseño tipo Bento Box. 

Pero, ¿por dónde empezar al diseñar una página web con este tipo de enfoque? Pues bien, lo primero que debes recordar es que necesitas mucha flexibilidad en tu cuadrícula para maximizar el potencial del concepto. Así que, en lugar de pensar en cuadrículas de 3 columnas como la ilustrada arriba, crea una cuadrícula que te ofrezca muchas más opciones de ubicación. Un buen punto de partida es intentar que tu cuadrícula de diseño coincida con la rejilla de columnas subyacente de tu lienzo de Sitely. 

Si tomamos la estructura de 12 columnas de Sitely para una página de escritorio normal, podemos configurar una cuadrícula de diseño que siga el mismo formato. La cuadrícula se configuraría así:

Y en el lienzo se vería más o menos así.

Claramente, una cuadrícula de diseño como esta te ofrece muchas opciones de abarque de filas y columnas para tus celdas individuales. A continuación se muestra un ejemplo en vivo de cómo puede usarse este concepto para transmitir eficazmente un mensaje visual a esos navegantes impacientes que no disfrutan buscando la navegación u otras páginas informativas. En su lugar, obtienen una sensación visual del mensaje de la página. Al pasar el cursor o al hacer clic/toque en los distintos elementos, pueden ver más información o imágenes más grandes del producto. Incluso se les puede llevar a otras páginas del sitio web para una explicación más detallada sobre un aspecto particular de la oferta de la página. Explora la cuadrícula a continuación para inspirarte.