MDU-SIG IBERO 2010.

PORTAFOLIO VISUAL DE PROYECTOS

Cesar Velandia

Reporte No7. LA RETICULA

ABSTRACT

LA RETÍCULA (GRID EN INGLÉS), ES UNA HERRAMIENTA MUY ÚTIL QUE NOS

PUEDE ASEGURAR MAYOR EQUILIBRIO EN NUESTRA COMPOSICIÓN AL
MOMENTO DE DISEÑAR.

ES UNA ESTRUCTURA EN DOS DIMENSIONES HECHA DE LÍNEAS VERTICALES Y

HORIZONTALES UTILIZADA PARA ESTRUCTURAR EL CONTENIDO, SIRVE COMO
UNA ARMAZÓN O ESQUELETO PARA ORGANIZAR TEXTOS, IMÁGENES O VIDEOS
DE UNA FORMA RACIONAL Y FÁCIL DE VISUALIZAR.

SUS ORÍGENES SE REMONTAN A LOS PINTORES DEL RENACIMIENTO, LOS

CUALES SE BASABAN EN LA PROPORCIÓN DIVINA O ÁUREA, PASARON VARIAS
SIGLOS PARA QUE SE EVOLUCIONARA EN EL TEMA FORMALMENTE, SÓLO
HASTA DESPUÉS DE LA SEGUNDA GUERRA MUNDIAL SE EMPEZARON A
UTILIZAR RETÍCULAS.

UNO DE LOS TRABAJOS MÁS INTERESANTES SOBRE EL TEMA ES EL DEL

DISEÑADOR SUIZO MÜLLER-BROCKMANN CON SU LIBRO GRID SYSTEMS IN
GRAPHIC DESIGN EL CUAL AYUDÓ APROPAGAR EL USO DE LA RETÍCULA
PRIMERO EN EUROPA Y LUEGO EN NORTE AMÉRICA.

A MEDIADOS DE LOS AÑOS 70’S LA ENSEÑANZA DE LAS RETÍCULAS SE VOLVIÓ

ESTÁNDAR EN EUROPA, NORTE AMÉRICA Y LATINOAMERICA, EN LOS AÑOS 80
SE CREÓ UN MOVIMIENTO EN CONTRA DE LA RETÍCULA PORQUE PENSABAN
QUE LIMITABA A LOS DISEÑADORES Y SU CREATIVIDAD, LO VEÍAN COMO UNA
CAMISA DE FUERZA DE LA CUAL QUERÍAN LIBERARSE.

SIENDO UN TEMA MUY EXTENSO Y DE MULTIPLES APLICACIONES EN EL

DISENO GRAFICO Y DISENO WEB, AMPLIARE CON ESPECIAL INTERES EL TEMA
DIRIGIDO A LA REGLA DE TERCIOS.

El nuevo uso de la retícula

Actualmente muchos diseñadores web, han tenido un renovado interés por las
retículas y su implementación en diseños en html y css.

Las retículas son divisiones teóricas estables de la superficie de un impreso, que

se utilizan para estructurar los contenidos del mismo.

Las retículas más comunes se forman a base de columnas, márgenes y espacios

horizontales, previstos para titulares, secciones u otros elementos del diseño.

Además hay retículas apropiadas para la modulación de la publicidad o para

publicaciones especiales.
La retícula (malla, red, entramado) como sistema representa la forma de
organización de un espacio delimitado por la pagina, usando una combinación de
márgenes, líneas de guía, filas y columnas. Esto se observa comúnmente en el
layout de un periódico o de una revista. Una retícula o una superposición de
retículas pueden usarse en un proyecto en su totalidad para lograr una imagen
consistente y fiel. En un producto terminado la retícula es invisible, pero ha
ayudado exitosamente a crear layouts para impresión y páginas web.

Tipos de Retículas

No existe un límite para la creación de fondos o bases reticulares o grid layouts.

Los más comunes incluyen retículas de 2, 3 y 4 columnas con un encabezado,
generando una retícula general de puros cuadrados. A partir de estos bloques y
la variación de anchos, bordes, tamaños de página y demás elementos de la
retícula el diseño se dirigirá a lograr una página única.

Una vez la retícula es definida, el diseñador debe tener la capacidad y el

poder para romperla. Esto no significa que el sistema reticular sea ignorado en
el proceso del diseño grafico. Por el contrario, los elementos pueden cruzar
sobre las columnas o extenderse hacia el final de la página o paginas
adyacentes. Romper la retícula llevara al diseñador seguramente a lograr
diseños más interesantes.

Retículas y Periódicos

Una vez estudiado y demostrado que el proceso de diseño a través del sistema
reticular, aporta y favorece la credibilidad de lo que se está leyendo, expresa
orden y nos traslada orden y confianza.

La retícula hace también que la lectura se efectúe con mayor rapidez, exista una
secuencia visual inducida, se visualicen los contenidos a distancias más lejanas y
se retenga con más facilidad en nuestra memoria la información que estamos
recibiendo.

Se ejemplifican a continuación retículas simples, de 2 y 4 columnas y de 3 a 6

columnas:
Las retículas simples se encuentran casi en todos los etiquetados, envasados,
periódicos, etc.

La retícula de 2 y 4 columnas es una retícula muy utilizada por los diseñadores,

ya que les permite componer una distribución equilibrada, aunque en alguna
ocasión, puedan surgir algunas composiciones demasiado simétricas.

La retícula de 3 y 6 columnas habitualmente se considera como la más acertada

para el diseño de los folletos publicitarios. Proporciona anchas y columnas muy
legibles, y además se tiene la opción, que la de tres columnas se puede
subdividir a su vez en 6 columnas.

La regla de Tercios y del Equilibrio

Esta regla establece que la mayoría de los diseños pueden ser más interesantes
dividiendo la pagina en 3 partes o columnas verticales y/u horizontales,
ubicando los elementos más importantes del diseño en estos espacios terciarios.
Este concepto, llevado a un nivel avanzado, especialmente en composición
fotográfica, se logra destacando los elementos visuales jerárquicos en los 4
puntos iniciales o más puntos de intersección de las líneas guías emplazados en
los tercios mencionados.
Los ejemplos anteriores prevén equilibrio. En el diseño anterior, la simetría
lograda por los tercios el encabezado se ubicara de forma destacada en el tercio
superior de la pagina, el logo en el tercio de la mitad, y el texto de soporte o la
información más importante esta en el tercio inferior, y define el ancho de la
pagina.

Por el contrario, este layout asimétrico tiene más elementos ubicados en el

tercio superior y en el tercio lateral izquierdo de la página. Los principales
puntos focales se localizan entorno a la intersección de las líneas de la retícula
más superior y a lo largo del costado lateral izquierdo.

Centro Visual y Equilibrio

Alinear los elementos más importantes de acuerdo a los puntos focales del
diseño en virtud del centro visual es un truco de diseño valido. El centro visual
está ubicado muy cercano a la derecha y arriba del centro actual de la pagina.
Obsérvese como el punto central o foco de cada uno de estos diseños caen o se
ubican debajo del centro visual de la página.

Véase como es fácil ubicar el centro real de la página. Esta donde las cuatro
esquinas se intersectan. Pero el foco real es la imagen del Planeta Tierra.

En este calendario los meses surgen desde el ano 2002 ubicado en el centro
visual.
Retículas y Equilibrio

Construir la estructura subyacente al diseño, la retícula puede ser un poco más

complicado pero esencial para los mejores diseños. Los diseños más equilibrados
con una gran capacidad de balance entre sus elementos, e incluso
desbalanceados dependen de una retícula y pueden ser simples o complejas
dependiendo de las necesidades del diseño y del diseñador.

Aunque a veces el uso de la retícula puede ser obvio. En el siguiente ejemplo el

diseño asimétrico utiliza una retícula simple de tres columnas de igual ancho
cuyos elementos gráficos (imagen o texto) se balancean con el espacio vacío de
la columna izquierda. La retícula también determina los márgenes, pie de página
y numero de la pagina así como el encabezado que aparece en el mismo lugar
de la página.
En el grafico anterior, una retícula de 5x5 mantiene el diseño en línea. Esta es
obvia a lo largo del tercio inferior ya que cada cuadrado equivale a su retícula
respectiva, pero es invisible manteniendo los elementos superiores del resto del
diseño con una apariencia aleatoria.
BIBLIOGRAFIA

http://www.macromedios.net/blog/la-reticula-en-el-diseno-grafico.html

(2001) Josef Muller-Brockmann Grid Systems in Graphic Design/Raster Systeme

Fur Die Visuele Gestaltung (German and English Edition) (Hardcover) 176 pages
Publisher: Arthur Niggli; Bilingual edition.

(2004) Jim Krause. “Design Basics Index.” HOW Design Books

Grid Systems in Graphic Design – How to Use the Grid System in ...

The grid system in graphic design is a way of organizing content on a page,

using any combination of margins, guides, rows and columns.

http://graphicdesign.about.com/od/layout/a/grid_system.htm

Designs Using Lines - How are Lines Used in Graphic Design

Lines also form the grid system, the basis for layout in design. Often these lines
will be ... Explore Graphic Design. Must Reads. What is Graphic Design? ...

http://graphicdesign.about.com/od/elementsofgooddesign/f/lines.htm

Graphic Design PDF Portfolios - How to Create a Graphic Design PDF ...

Using the grid system may be helpful here. Remember that the design of
the ... Tailoring a Graphic Design Portfolio to the Client or Employer - How Much
D.. ...

http://graphicdesign.about.com/od/buildingaportfolio/a/pdf_portfolio.htm

The Elements of Design - Using the Elements of Design in Graphic ...

elements of graphic design shapes lines colors type fonts typography typefaces
text art illustrations photography ... TheGrid System · Creating Wireframes ...
http://graphicdesign.about.com/od/elementsofgooddesign/tp/elements.htm

Flash Portfolios - Examples of Successful Flash Website Portfolios

Oct 7, 2007 ... This site uses the grid system effectively to present their
work, ... Tailoring a Graphic Design Portfolio to the Client or Employer - How ...

http://graphicdesign.about.com/od/buildingaportfolio/a/flash_portfolio.htm

Graphic Design Basics - The Basics of Graphic Design

Learn the basics of graphic design, from typography to color to layout, tools and
more. ... The Grid System · How to Create Website Wireframes ...

http://graphicdesign.about.com/od/graphicdesignbasics/u/design_basics.htm

Grids - Consistency and Unity

A carefully conceived grid system also allows the designer to
introduce ... grid system takes on different lives using the same
four graphic images and ...

http://desktoppub.about.com/od/grids/l/aa_gridsunity.htm

Book Design – Working as a Graphic Designer in Book Design

How and Why to Get your Credit Line · The Grid System · Preparing Your
Document ... Review of Graphic Design Book Area 2 - Area 2 Graphic
Design Book Review ...
http://graphicdesign.about.com/od/careerpaths/a/book_design.htm

Grids for Desktop Publishing - Using Grid-Based Design in Print

Tom Arah discusses why asymmetric grids are important in design and how
to ... He covers such topics as ratios, complexgrid systems, and fixed and
fluid ...

http://desktoppub.about.com/od/grids/Grids_for_Desktop_Publishing.htm

OmniGraffle Review – Creating Wireframes and Flowcharts with ...

How to Create Website Wireframes · The Grid System · Five Rules of

Effective ...http://graphicdesign.about.com/od/recommendedsoftware/fr/omnigr
affle.htm ...

http://graphicdesign.about.com/od/recommendedsoftware/fr/omnigraffle.htm