Encuentra en esta serie de presentaciones, la información necesaria para iniciar un proyecto editorial con las bases y principios básicos de la "diagramación" en diseño visual.

1. DIA
GRAMA-
CIÓN
COMUNICACIÓN VISUAL
Fundamentos y principios básicos

2. La diagramación, también llamada
maquetación, es un oficio del diseño
editorial que se encarga de organizar en un
espacio, contenidos escritos, visuales y en
algunos casos audiovisuales (multimedia)
en medios impresos y electrónicos, como
publicaciones editoriales.
Una de las numerosas herramientas
que el diseñador tiene a su disposición
para dirigir al lector por el contenido.
MAQUETACIÓN
DIAGRAMACIÓN

3. FUNDAMENTOS
Conocer y saber relacionar los elementos de contenido editorial
Saber qué es una retícula compositiva, estructura y función.
Aplicar y reconocer los principios compositivos.
Identificar las partes funcionales y de comunicación
del contenido textual y tipográfico dentro de una pieza editorial
especializada.

4. EDITORIAL
CONTENIDO
ELEMENTOS

5. Desiciones de diseño
+ -
COLOR TIPOGRAFÍAIMÁGEN GRÁFICOSTEXTO
VARIABLES QUE DETERMINAN
ELTIPO DE PIEZAEDITORIAL
TIPOS DE CONTENIDO
[
[

6. Libro
Revista
Brochure
Catálogo
EDITORIALES
Fanzine
Reporte
Web
Portafolio
Periódico
PIEZAS

12. Difusión de productos,
servicios e ideas,
brindar información útil
para la sociedad.

13. Formato
Determina las proporciones
externas de la página
Retícula
Determina las divisiones
internas de la página,
estructura de navegación
compositiva.
Composición
Influye en la posición
(ubicación exacta)
de los elementos y su relación
dentro de la página.
Maquetación
Diagramación
Distribución proporcional
de los espacios de un texto.
Cuando nos referimos a la forma
de composición de los elementos
de contenido editorial.
o
La forma
en que los elementos
FUNCIONAN
dentro del formato.
La forma
en que los elementos
SE RELACIONAN
dentro del formato.

14. Retícula
Grilla
Rejilla
Conceptos
básicos
- Estructura de navegación compositiva -

15. Todos los trabajos de maquetación, deben llevar una
guía a través de una estructura estudiada y de
tamaños fijos. Para ello usamos, la retícula
compositiva, que consiste en una guía en los
elementos de la maquetación en papel, con la finalidad
de conseguir, un orden y estética.

16. Comprender la forma en que las imágenes
y el texto funcionan dentro de una
composición es una parte esencial
de la elaboración del diseño.
La forma en que se distribuye una
composición añade valor y fuerza al texto
aportándole un sentimiento y una actitud
determinados, lo cual influye sobre el modo
en que se lee, ve o percibe dicho texto.

17. La creación de una composición no solo hace referencia a la
colocación del texto dentro de la página, sino también, a la forma en
que el texto se integra con las imágenes y el resto de los elementos
de la página.
En el caso del diseño destinado a la impresión (folletos libros, revistas,
informes anuales, etc.), las bases de la composición se derivan en
buena medida de los valores estéticos. El objetivo tradicional de una
buena composición es guiar al lector por el texto. El objeto o el
producto en sí mismos también afectan la composición, puesto que el
contenido ejerce una gran influencia sobre la forma.
Por lo tanto, cada publicación debe tratarse de una manera diferente,
al igual que las revistas, los periódicos, las páginas web o los formatos
tridimensionales (envases o sistemas de orientación e información,
por ejemplo)

18. RetículaAporta consistencia a la publicación
Coherencia visual ::::: concentración en el contenido
Proporciona el mecanismo de formalización
de la relación de los elementos de contenido editorial
Los sistemas básicos determinan la anchura de los márgenes;
proporciones de la zona impresa, el número, la longitud
y la profundidad de las columnas y la anchura de los intérvalos entre éstas.
Los sistemas complejos definen la base sobre la que se asientan los tipos
y pueden determinar incluso el formato de las imágenes,
la posición de los títulos, folios, notas al pie, etc.

19. Principios
básicos

20. SECCIÓN
O PROPORCIÓN
ÁUREA
Forma clásica o formal
de crear una composición
con un equilibrio armónico.
Sus “proporciones divinas”
son aplicadas por muchos
diseñadores a la hora de
crear una retícula para una
composición o un formato
de página.

22. El rectángulo de sección áurea se puede
dividir de manera que la relación entre el más
pequeño y el más grande sea la misma que
entre el más grande y el todo.
Un rectángulo de sección áurea se puede
extraer de un cuadrado.
El cuadrado y el rectángulo poseen una
relación consistente: si se añade un cuadrado
a la parte alargada del rectángulo, o se forma
en su interior, se crea una nueva sección
áurea.
La consistente relación entre cuadrado y
rectángulo crea una secuencia logarítmica en
espiral.

24. Ideal místico de belleza
Presente en la naturaleza
Espiral logarítmica
Cada número es la suma de los dos que le peceden
sucesión de Fibonacci
0,1,1,2,3,5,8,13,21...
Antes descubierta por matemáticos indios tales como Pingala (200 a.c.), Gopala (antes de 1135) y Hemachandra (c. 1150)

27. Jan Tschichold

28. LeCorbusiere

29. Propone una versión moderna de la sección áurea que subdivide el
formato en relación con las proporciones de la figura humana. Llamó
Modulor a su sistema de proporciones (edificios, muebles e impresos)

31. Robert
Bringhurst

32. Compara las proporciones
de la página con la escala
cromática de la música
occidental: ambas se
definen mediante
intervalos numéricos.
Iguala el octavo con el
cuadrado, relación 1:2

33. Ritmo y Proporción
Armonía y Contrapunto
Formas estructurales y
Dispositivos
Símbolos analfabetas
La elección y combinación de Tipo
Interludio histórico
Hacer la página
El Estado delArte
Preparación de la fuente
Rondando los libros de muestras
Algunos capítulos de la tercera edición:

34. Formatos
Estructura
BASES

35. Aprender las reglas

36. La creación de una estructura o retícula apartir de
coordenadas verticales y horizontales permite al
diseñador experimentar con la colocación del contenido
en diferentes posiciones dentro d ela página.
La retícula no sólo determina el lugar donde puede
aparecer un contenido, sino que también constituye la
base para la construcción de la página, es decir el
marco donde se ordenan el texto y las imágenes.

37. Una retícula puede ser simétrica, asimétrica o
modular, y puede ser todo lo sencilla o compleja
que exija el diseño.
La aplicación y el uso de cada composición
son aspectos que también deben tenerse en
cuenta a la hora de crear sistemas de orientación
e información u otros sistemas tridimensionales.
( diseño de envases y etiquetas por ej.)

38. RETÍCULASIMÉTRICA
Esta composición se basa en una retícula simétrica de dos
columnas: las páginas derecha e izquierda son un reflejo exacto que
da como resultado una composición equilibrada, pero previsible.,La
columna ancha contiene el texto principal, mientras que la columna
estrecha puede contener información, ilustraciones o instrucciones.

39. RETÍCULAASIMÉTRICA
Composición asimétrica formada por dos columnas. Las páginas
izquierda y derecha utilizan la misma retícula, a diferencia d e la
retícula simétrica. Una vez más, la columna ancha contiene el texto
principal, mientras que la columna estrecha puede contener
información, ilustraciones o instrucciones.

40. RETÍCULAMODULAR
La retícula modular se basa en una serie de bloques o módulos.
Esta puede ser simétrica o asimétrica. Una de sus características de
la estructura es que los elementos (ej. imágenes) pueden
extenderse por múltiples módulos.

41. ELEMENTOS DE LARETÍCULA
Conocer los componentes

42. COLUMNAS
Alineaciones verticales
que contienen tipos o
imágenes. El ancho y
el número de
columnas de una
página o de una
pantalla dependen del
contenido.
ZONAS ESPACIALES
Grupos de módulos o
columnas que pueden
formar zonas
específicas de tipo,
publicidad, imágenes
u otra información.
LÍNEADE FLUJO
Alineaciones que
descomponen el
espacio en bandas
horizontales. No son
líneas reales, sino que
sirven para organizar
el espacio y los
elementos con el fin
de guiar al lector por
la página
MARCADORES
Ayudan al lector a
moverse por un
documento. Los
marcadores, que
indican la ubicación
del material, incluyen
números de página,
cabeceras repetidas,
pies de página e
iconos.
MÓDULOS
Divisiones individuales
separadas por un
espacio consistente.
CRean una retícula
repetitiva y ordenada.
Combinando módulos se
obtienen columnas y filas
de diversos tamaños.
MÁRGENES
Zonas intermedias.
representan la cantidad
de espacio entre el borde
del formato, incluido el
márgen del lomo, y el
contenido de la página.
Los márgenes también
pueden albergar
información secundaria,
como notas.

43. DIAGRAMAS DE RETÍCULAS BÁSICAS
Estructuras básicas

44. RETÍCULA
DE UNASOLA
COLUMNA
se emplea por lo
general para texto
seguido, como
ensayos, informes o
libros. El principal
elemento de la página
es el bloque de texto.
RETÍCULA
DE DOS
COLUMNAS
Sirve para organizar
un texto extenso o
para presentar
diferentes tipos de
información en
columnas separadas.
Puede incluir
columnas de ancho
igual o distinto.
Para conseguir las
proporciones ideales,
cuando una columna
es más ancha que la
otra, la primera debe
ser el doble de ancha
que la segunda.
1
2
RETÍCULAS
DE MÚLTIPLES
COLUMNAS
Permite una mayor
flexibilidad
que las de una o dos
columnas. Combinan
varias de diversas
anchuras y resultan
útiles para revistas y
páginas web.
3

45. RETÍCULAS
MODULARES
Son las más
adecuadas para
organizar el tipo de
información compleja
que hallamos en
periódicos,
calendarios, gráficos y
tablas. Combinan
columnas verticales y
horizontales, que
distribuyen la
estructura en espacios
más pequeños.
4
RETÍCULAS
JERÁRQUICAS
Descomponen la
página en zonas.
Muchas de ellas se
componen de
columnas horizontales.
5

46. Crear una retícula
simétrica1
1
ELRECTÁNGULOAÚREO
Se toman dos páginas iguales
y proporcionadas. Se trazan unas
medias líneas diagonales desde
el centro hasta las esquinas inf.
izquierda (verso) e inferior
derecha (recto) de cada página.
2 Se crea una línea diagonal
completa desde el centro hasta
las esquinas inf. izquierda (verso)
e inf. derecha (recto) de cada
página.
3 En la página izquierda se dibuja
una línea desde el punto de
intersección entre las medias
líneas diagonales y las diagonales
completas (verso) hasta la parte
superior de la página.

47. 4 Se dibuja una línea desde la
parte superior de la página izq.
(verso) hasta el punto de
intersección entre las medias
líneas diagonales completas de
la página derecha (recto).
6 Se repiten los mismos pasos,
pero esta vez en la página
derecha (recto). De este modo
se obtienen dos áreas
totalmente equilibradas
y simétricas para crear el texto.
5 Se traza una línea hacia la
izquierda desde el nuevo punto de
intersección de la media línea
diagonal de la página izq. (verso)
para unirla con la diagonal
completa y, a continuación, hacia
abajo para cruzarse con la media
línea diagonal y, finalmente, hacia
arriba para crear el área donde se
colocará el texto.

48. Conocer la importancia
de los márgenes en la página

49. LAS MÁRGENES
Parte fundamental del diseño de una publicación.
Para configurar una tipo y su tamaño principalmente se tiene que
configurar las columnas, y para configurar las columnas, hay que
empezar por definir márgenes adecuados.
Las márgenes contribuyen a hacer más concreto el diseño y el
espacio en blanco que les rodea crea una sensación de confort y de
pertenencia.
Primero hay que visualizar las márgenes, pensando en la apariencia
que se le quiere dar a los elementos de la página, de acuerdo
al mensaje que se quiere transmitir a los lectores.
Las márgenes dan a las páginas, una dosis necesaria del espacio
en blanco vital para que respire el diseño.

50. FUNCIÓN DE LAS MÁRGENES
La primera es la visual, ya que proporcionan una zona de
amortiguación manteniendo el texto y los gráficos, evitando que "se
caiga la página".
Tienen funciones prácticas también. Dejan el espacio para que el
lector mantenga la publicación sin ocultar el texto con los dedos. Si
usted está trabajando en algunos manuales, libros de texto o libros de
trabajo se puede dejar más espacio en la margen de pie (inferior) de
modo que el usuario puede tomar notas si es necesario. Si la
publicación se va a encuadernar con grapas o anillada, tendrá que
dejar más espacio para el margen interior.

51. CONFIGURACIÓN
DE LAS MÁRGENES
Hay que configurar los márgenes en una relación
matemática a la página. La más famosa relación es la
"sección áurea" .
Vamos a aclarar.Altura de la caja de texto, debe ser igual
a la anchura de la página. Esta es la relación de 02:03.
Esto se traduce en proporciones 2:3:4:6 de la margen. La
margen interna debe ser de 2 unidades, la superior 3, la
margen exterior debe ser de 4 unidades y el fondo de 6.

52. Este tipo de configuración de márgenes es muy elegante y muy pocas revistas se lo puede permitir.
El diseño de revistas contempporáneas, está intercambiando el tamaño de los márgenes superior e
inferior. Muy diferente a la "sección áurea", que es más común en los diseños de libros.
La configuración del margen obtuso es cuando usted tiene los cuatro márgenes de un mismo tamaño.
Aunque torpe esta configuración se puede ver muy a menudo en el diseño de la revista contemporánea.

53. Este tipo de márgenes también se encuentra en periódicos y otras publicaciones
en las que desee ubicar la mayor información posible sobre la página.
Márgenes de revistas contemporáneas
Observe cómo cada margen es del mismo tamaño

54. 12
3
4
DESCRIPCIÓN
DE LAS MÁRGENES

55. 1 2
Margen interior
Está en gran forma afectada por la
forma en que la publicación se une
y por el grosor de la publicación.
Para que sea más fácil la lectura. Si
la publicación es muy gruesa debe
realizarse una margen interna más
amplia de lo habitual.
Margen exterior
Estas son las partes de las
publicaciones que son más visibles.
Usted debe colocar el mejor contenido
en estas partes. Las márgenes
externas deben ser más anchas que
las interiores si quiere crear una
apariencia más elegante de la
publicación y este tipo de
configuración de margen se denomina
"margen estudiada". En este espacio
se pueden colocar bandas, viñetas,
notas, pie de páginas, etc

56. 3 4
Margen superior
Este margen puede y debe ser la
más grande. El espacio en blanco
por encima del bloque principal del
texto está actuando como una
introducción a la página. Esto no es
un desperdicio de espacio. La
generosa margen superior, crea
una sensación ligera y relajada.
También mejora el fondo para
títulos de las secciones , que son
dispositivos de navegación útiles.
Margen inferior
El tamaño de esta margen
debe ser al menos la mitad del
tamaño de la parte superior.
La margen inferior es la
menos importante, ya que no
se coloque ninguna
información relevante.
Excepto la paginación.

57. Book margins
Las márgenes tradicionales del libro comienzan con la margen superior.
Cuando usted elige el tamaño de la margen superior debe ser el doble que el tamaño del
margen inferior. La margen interior debe ser de 0,75 que la margen superior y la margen
exterior debe fijarse en dos veces el tamaño de la margen interior.
En el diseño de libros las márgenes interiores deben ser ajustadas para permitir la
curvatura cuando el libro está abierto.
Este tipo de diseño transmite elegancia y simplicidad.

58. Tense margins Informal margins
Formal margins Elegant centered margins
Aquí hay algunos
ejemplos más de
las configuraciones
de los márgenes
que no son
tradicionales.

59. Principios
Espacio
equilibrio
y jerarquíaCOMPRENDER LAFORMAEN QUE LAS IMÁGENES
Y ELTEXTO FUNCIONAN DENTRO DE UNACOMPOSICIÓN.
CUANDO ESTOS PRINCIPIOS SEAPLICANATODOS LOS ELEMENTOS
DE UNAPÁGINA, SE CREALABASE DEL“VOCABULARIO DELDISEÑO”
DE UN DISEÑADOR GRÁFICO.

60. EspacioEl contexto dentro del cual existen los elementos de diseño.
Entorno físico donde se forma y percibe un mensaje.

61. El espacio en blanco
es el pulmón
de una composición.
No se incluye por motivos
estéticos, sino físicos.Derek Birdsall

62. “Espacio en blanco” o “Espacio negativo”
hace referencia al espacio que se encuentra alrededor
o entre todos los elementos de un diseño
(el texto, las imágenes, los márgenes,
entre columnas y entre líneas de tipos).

63. El uso correcto del espacio en blanco
añade elegancia a la forma y la estructura
de una composición y mejora
las cualidades ritmicas del diseño.

65. PASIVO ACTIVO
Composición simétrica,
fondo sobre el cual se
ubica una imagen central.
Composición asimétrica,
sugiere movimiento y actividad
debido a la desigualdad en el orden
y equilibrio d elos elementos.
Espacio que trasmite dinamismo.

66. RECESIVO DOMINANTE
Elemento dominante
es el perímetro (espacio
en blanco) alrededor
del elemento central.
El espacio se convierte
en una form positiva.
En este caso, el elemento
se convierte en el centro
de atención. “Domina”
al espacio en blanco.

67. Equilibrio
Cuando se crea un diseño es impresciendible que sus distintos
elementos individuales guarden un equilibrio armónico entre sí.

68. Para estar bien equilibrado,
un diseño debe contener
un mensaje claro y conciso.

69. Estados de equilibrio:
Simetría
Diseño vertical y equilibrado centralmente, por regla
general es un diseño más formal por su contexto y
uso.
Asimetría
Diseño menos rígido y el uso de su contenido es
más variado.
Estática o ruido
Diseño deliberadamente caótico, o bien no se ha
cuidado lo suficiente o tiene una legibilidad limitada.

70. SIMÉTRICO
En un diseño simétrico, las páginas derecha e izquierda son un reflejo
exacto, lo que conforma la base para una composición tranquila y equilibrada.

71. ASIMÉTRICO
En un diseño asimétrico, las páginas derecha e izquierda son un reflejo
exacto, a diferencia de la simétrica es que da como resultado una composición
más dinámica y activadonde el ojo recorre la página.
El diferente ancho de los márgenes también añade dinamismo al diseño.

72. ESTÁTICAO RUIDO
Composición caótica que puede causar estancamiento
en la navegación de la lectura.

73. Además de estos tres estados,
existen unas REGLAS generales
que pueden aplicarse cada vez
que se crea una composición

74. REGLADE LOS IMPARES
Es más cómodo para el espectador contemplar una composición
con un número de elementos impar. Para ello se utiliza un elemento central,
que se “encuandra” dentro de un número impar de elementos de soporte.

75. REGLADE LOS TERCIOS
Técnica habitual en los ámbitos de la fotografía y el arte.
La página se divide en tercios para crear “puntos calientes” de interés
en los cuales centrarse. Esta regla favorece la colocación descentrada
de los elementos para añadir dinamismo a la página.

76. Jerarquía
Cuando se crea un diseño es impresciendible que sus distintos
elementos individuales guarden un equilibrio armónico entre sí.
El establecimiento de una jerarquía de elementos
permite expresar la importancia de cada elemento
Todas las obras de diseño deben contener un fuerte punto focal
que atraiga la mirada del espectador.

77. PORAGRUPACIÓN
La agrupación ponderada de elementos en una composición aumenta
la expresión e importancia de determinados elementos. El uso del tamaño
como una de las jerarquías todavía enfatíza más este efecto.
FORMASDEJERARQUÍA

78. FORMASDEJERARQUÍA
POR COLOR
Además de destacar el texto principal, el color añade un valor jerárquico
a la composición. El color está unido generalmente al servicio de una estrategia
o un objetivo determinados, o bien pretende ayudar al lector/espectador,
pero nunca confundirlo, salvo que ello forme parte del diseño deliberadamente.

79. FORMASDEJERARQUÍA
POR CARACTERÍSTICAS
COMUNES
La forma, la escala y la alineación aportan armonía
a la estructura de una composición.
La agrupación de elementos similares por su color o características comunes
permite organizar el contenido de modo que destaque el mensaje.

80. FORMASDEJERARQUÍA
POR ORIENTACIÓN
No debe asumirse que las imágenes y los textos
deben colocarse siempre rectos. Se puede experimentar con la alineación vertical,
horizontal y transversal o con la colocación de los elementos
en distintos ángulos u orientaciones.

81. FORMASDEJERARQUÍA
POR ESCALA
La experimentación con la escala permite introducir una jerarquía
y controlar el flujo de la lectura.

82. COMUNICACIÓN VISUAL
Mónica Peláez
mp.comunicando@gmail.com
Cali, Col.
312 8432148
Adaptación y diseño:
https://www.facebook.com/pages/MOPE-comunicaci%C3%B3n-visual/822308044457814
MOPE comunicación visual