Plano de Superficie

Plano de Superficie

¿Qué son las retículas?

La retícula es una herramienta compositiva que tiene como finalidad ajustar la posición de los diferentes elementos que componen la página que se está diseñando. En otras palabras, consiste en una serie de líneas “invisibles” sobre las que ubicar los elementos del diseño, que permiten crear una estructura básica para el diseño.

Gracias a su uso, se puede dotar al diseño de una estructura interna armónica y visualmente agradable. También, si se emplean adecuadamente, el diseño tendrá un aspecto cuidado, organizado, claro y estructuralmente sólido. Sin embargo, el uso de las retículas tiene otra prioridad aun más importante que mejorar la estética. Es una forma de mejorar la comunicación entre el diseñador y el desarrollador que tendrá que ocuparse de programar el sitio web. Gracias a ellas, el encargado de desarrollo web podrá plasmar una versión interactiva y navegable lo más fiel posible desde un punto de vista visual a la maqueta que se ha diseñado.

Terminología

Unidad

Las unidades son los bloques de construcción básicos de toda retícula. Múltiples unidades forman el conjunto de la retícula. En el ejemplo inferior de BBC se puede ver una retícula de 12 unidades. Cada barra púrpura representa una unidad.

Medianil

Las barras amarillas de la ilustración representan los medianiles que separan cada par de unidades. Los medianiles son una forma de micro espacios en blanco que proporcionan a la retícula algo de espacio para respirar. Es también el espacio que se suele dejar entre las columnas.

Columnas

Múltiples unidades y medianiles juntas forman columnas que son los contenedores reales en los que ubicar el contenido—estratégicamente. Podría no parecerlo inicialmente, pero trabajar con estas restricciones puede ser liberador. Las restricciones pueden hacer que las decisiones sobre dónde colocar el contenido sean mucho más fáciles.

En el ejemplo de abajo, se pueden ver tres columnas diferentes funcionamiento. Cada columna está diseñada para un tipo de contenido o para crear énfasis.

Lo que se puede observar es que estas columnas en conjunto forman una estructura sólida que transmite consistencia y orden a través de la alineación.

Sectores

Las columnas de contenido forman sectores que son divisiones horizontales de las páginas. No es una mala idea esforzarse por conseguir sectores que contengan la misma altura desde la parte inferior de las páginas. En la práctica esto no siempre se consigue con facilidad. Si los sectores acaban con la misma altura y esto funciona en el diseño el resultado será exitoso.

La regla de los tercios

La “regla de los tercios” es un principio con el que muchos fotógrafos y artistas ya están familiarizados. Sin embargo, un diseñador web también puede hacer uso de esta regla en sus proyectos. La “regla de los tercios” en web usa una mini retícula e implica que cuando se coloca contenido sobre ciertas líneas que dividen el contenido en tercios, el resultado será más atractivo para el ojo humano. Este es un enfoque muy usado en fotografía, por ejemplo. Aunque se trata de un buen punto de inicio y suele dar los resultados deseados, es mejor entenderlo como una aproximación, no es necesario ser demasiado exactos.

Según esta regla, los puntos de mayor interés en la composición se deberían encontrar en las intersecciones o cercanas a ésta. Es decir en puntos estratégicos.

Se conoce que la mayoría de personas ven un sitio web siguiendo un patrón en forma de Z o F. Según esta información, los usuarios ven las páginas de arriba hacia abajo, de esta manera, la esquina superior izquierda es el área que tiene mayor atención y este suele ser justamente el lugar donde se coloca el logo de la empresa en una página web.

Una forma de familiarizarte con la regla de los tercios es realizar capturas de pantalla de sitios web para comprobar en qué medida cumplen con la regla de los tercios.

La retícula de doce columnas

La maquetación de la página web es recomendable hacerla teniendo en cuenta el sistema de retícula de doce unidades. Es un buen sistema para principiantes, ya que ofrece la posibilidad de dividir la web en cuatro, tres y seis columnas.

Retícula de cuatro columnas

La retícula de cuatro columnas es muy simple, y formal. Puede resultar un tanto aburrida, pero se puede adaptar a la perfección para la idea del proyecto. Cada columna ocupa tres unidades. Ejemplo de este tipo de diseño es la página de Amazon donde se encuentran todas las categorías de la web:

Retícula de tres columnas

En este tipo de retícula cada columna ocupa cuatro unidades. Este diseño resulta, en teoría, más activo que el de cuatro columnas. Sin embargo, requiere más trabajo, porque es un retícula asimétrica. El diseño de la página principal de Noticias de Gipuzkoa está basado en tres columnas:

Retícula de seis columnas

El uso de este diseño de retícula es recomendable cuando uno maneja muchos contenidos e información. Con esta maquetación cada columna ocupa dos unidades.

Combinaciones

Sin embargo, es muy común en las páginas web que se combinen dos o tres tipos de retículas. La web de El Diario Vasco es ejemplo de ello:

Conclusiones

• Énfasis: en general, es habitual que las maquetaciones simples sean más agradables para el usuario. Aún así, hay que tener en cuenta el perfil del público objetivo, porque puede que les resulte demasiado aburrido. Para romper la monotonía, es posible dar énfasis a algún contenido de la web rompiendo la retícula. Esto significa resaltar algunos contenido, por ejemplo, cambiando el tamaño de las columnas.

• Limitaciones: antes de empezar a diseñar la página web, hay que tener en cuenta las limitaciones que puedan establecer los anunciantes. La maquetación debe partir sabiendo el tamaño que tendrán los anuncios. Con la publicidad fijada, será más fácil hacer el diseño del resto.

• Mapa mental: el diseño de la página web tiene que tener un sentido, para que el usuario pueda hacerse un mapa mental de la navegación. Las distintas páginas no deben ser totalmente distintas, y tienen que seguir un diseño básico previamente establecido.

Sistema de Retícula Infinita

¿Qué es?

Teniendo en cuenta que en la actualidad, existen múltiples opciones que permiten al usuario navegar a través de la web, es conveniente adaptar el diseño y la estructura de un sitio web para varios dispositivos, a pesar de que principalmente pueda estar diseñado para que los usuarios la visiten a través del ordenador. Las necesidades de accesibilidad a través de otros dispositivos, requieren otro tipo de necesidades de visualización y navegación, un factor que hay que tener en cuenta a la hora de realizar el diseño. Por poner un ejemplo, en determinadas situaciones, el estado de la cuadrícula puede variar, hasta situarse en una sola columna en determinadas situaciones, principalmente cuando se trata de adaptar el contenido a dispositivos móviles.

Componentes

Cabe destacar los siguientes atributos cuando se hace referencia a este tipo de retículas:

1. Jerarquía: ¿Cuál es el orden y cuáles son los elementos más importantes a la hora de definir el diseño?

2. Densidad: ¿Cuántos detalles se muestran?

3. Interacción: ¿Cómo debería ser el menú? ¿Una lista de enlaces o un desplegable? ¿Las imágenes deben aparecer de forma continuada o agrupadas?

4. Ancho: ¿Cómo está definido? ¿Tiene una unidad determinada? ¿Tiene un límite de anchura establecido?

Diseñando un sistema de retículas infinita

Para realizar el diseño de retículas infinito, se puede optar por seguir los siguientes pasos:

1. Usar unidades proporcionales

Deben tomarse decisiones acerca de la proporcionalidad del sitio web respecto a los elementos que se situarán en el propio sitio. Esto supone que cuando se toma una decisión acerca de determinadas unidades, se hace teniendo en cuenta que esta situación será determinante en las siguientes decisiones que se vayan a tomar.

• Tamaño de la fuente empleada en relación a la fuente base del documento

• Tamaño del píxel en un elemento determinado que se ajuste a una resolución determinada

• El tamaño de un elemento respecto al contenido

• Unidades de medición VH y VW, que posibilitan la inclusión de imágenes a lo largo y ancho del fondo del sitio web, así como la adaptabilidad del texto a los dispositivos en los que es cifrado. La unidad VH determina la centésima parte de la altura del viewport mientras que la unidad VW determina la centésima parte de la anchura del viewport, de tal forma que:

  • 1VH = 1% del viewport
  • 100VH = 100% del viewport
  • 1vw = 1% del viewport
  • 100vw = 100% viewport

1. Comenzar con los extremos para después resolver los entrecruzamientos Es importante, en primer lugar, contemplar la posibilidad de diseñar cada elemento en función de sus posibilidades y necesidades, teniendo en cuenta la premisa de adaptar el contenido a las necesidades de los usuarios. Es por ello que cabe la posibilidad de que un diseño extendido en exceso a lo ancho o a lo largo resulte incómodo para su visualización en determinados dispositivos. Dependiendo del contenido en cuestión, se buscará una proporción entre adaptabilidad y optimización del contenido. Hay que tener en cuenta el estado más grande y más pequeño, de tal forma que para cada uno de ellos se podrá cumplir una determinada función, de ahí que lo adecuado es realizar combinaciones de ambos formatos, de tal forma que el resultado obtenido sea beneficioso para el usuario.

2. Cambiar el estado cuando se rompan las relaciones Cuando se produce un choque entre los contenidos y el diseño de la cuadrícula llega el momento en el que el diseño debe variar para adaptarse a las necesidades de cada contexto. Aunque es difícil predecir en qué ancho respecto al contenido que aparece en la página es óptimo cambiar el estado del diseño, existen herramientas que permiten realizar una previsualización para obtener una respuesta que atiende a dicha cuestión de forma parcial, tales herramientas son Gridset y Responsive.is. Puede resultar que el estado mínimo y el máximo no contemplen situaciones de carácter intermedio, de ahí que la cantidad de diseños que se vayan a crear variarán en base a las necesidades del sitio web y de las variedades que pueden existir en su visualización.

3. Ir más allá de los extremos A su vez, pueden encontrarse situaciones en las que, el ancho de los blancos resulta demasiado corto, y produce espacios en blanco que producen una resolución del texto muy inferior, mientras que por la parte superior, el espacio entre el cuerpo del texto y los encabezados, así como el pie de página, resulte mínimo, y ofrece una sensación de acoplamiento en el que apenas existe margen en la parte superior e inferior. En esta situación, es recomendable realizar un esfuerzo por superar las barreras establecidas en los extremos, buscando un equilibrio cuyo último fin es optimizar la visualización en cada circunstancia.

Referencias

• Marketing Online Creativate. (2016, 26 enero). La retícula en diseño web. Características y funciones. https://www.creativate.es/diseno-web/la-reticula-en-diseno-web-caracteristicas-y-funciones

• Aula Formativa. (2018, 15 noviembre). La regla de los tercios en el diseño web. https://blog.aulaformativa.com/la-regla-de-los-tercios-en-el-diseno-web/

• Gonzales Melquiades, E. (s.f.). Unidades VH y VW de CSS3. https://devcode.la/tutoriales/unidades-vh-vw-css/