DISEÑOS Y NORMAS GENERALES DE LA DIAGRAMACIÓN

1 PRINCIPIOS BÁSICOS DEL DISEÑO

A comienzos del s. XX, un grupo de psicólogos alemanes crea un movimiento llamado
Gestalt . Dan explicaciones sobre cómo agrupamos los estímulos.

1.1 PRINCIPIOS DE SEMEJANZA

Cuando en un diseño se puede percibir un conjunto equilibrado a partir de un patrón de
figuras parecidas, el espectador lo va a percibir como una unidad.

Para destacar un elemento, habría que romper el patrón.

Este efecto se ve mucho en internet. Los diseñadores aplican este principio de manera
habitual para destacar la información que quieren que los espectadores vean destacadas

1.2 PRINCIPIO DE CONTINUIDAD

El espectador tiende a seguir la continuidad de la figura por encima del color.
En esta figura tendemos a seguir la línea recta o la curva sin dejarnos llevar por
el cambio de
color.

1.3 PRINCIPIO DE CIERRE

Al encontrarnos con una imagen sin cerrar, nuestro cerebro intentará cerrarla para generar
una imagen completa.

1.4 PRINCIPIO DE PROXIMIDAD

Formas que se encuentran próximas entre sí se pueden percibir como un todo. Para que
el efecto funcione, estas formas deben tener en común alguna de estas características:
color, tamaño o forma.
1.5 PRINCIPIOS DE FIGURAS Y FONDO
Este efecto es muy conocido y es fácil encontrar juegos visuales de ello.
El ojo tiende a ver un objeto separado de lo que le rodea porque el cerebro
no es capaz de tratar un mismo objeto como forma y fondo a la vez.
Para el cerebro son dos cosas separadas la forma y el fondo, por eso o vemos
la figura o vemos el fondo.

1.6 PRINCIPIOS DE SIMETRÍA Y ORDEN

El cerebro buscará siempre visualizar los elementos como figuras ordenadas.
Si un objeto está compuesto por figuras ordenadas de forma simétrica se verán como parte
del mismo grupo.
El desorden en la composición hace que el espectador se distraiga intentando ordenar el
diseño en lugar de centrarse en el mensaje.

1.7 PRINCIPIO DE DIRECCIÓN COMÚN

Cuando un grupo de objetos forman un patrón ordenado en la misma dirección
se ven como parte de un grupo.

ESTOS PRINCIPIOS NO SON LEYES QUE HAYA QUE SEGUIR OBLIGATORIAMENTE.

SON UNA SERIE DE REGLAS QUE SE USAN EN LA COMPOSICIÓN EN PINTURA,
CINE, FOTOGRAFÍA, DISEÑO Y MAQUETACIÓN.

2 MAQUETACIÓN
Maquetar es hacer una maqueta de una presentación que se va a imprimir
Maqueta: es un modelo previo de un texto o un libro que se va a publicar,
usado para determinar sus características definitivas
- La maquetación e sua gestión de forma y espacios
Pauta: documento que define las características de un publicación impresa
- No se puede incluir diagramas
- Se usa habitualmente para obras expensas y de estructura
homogénea

Para Martínez de Sousa (2005), la maqueta es un diagrama que sirve de base

para la compaginación de obras impresas.

Cuando una obra es muy compleja, la maqueta se complementa con una página modelo que
sirve de referencia
3 COMPAGINACIÓN
La compaginación consiste en armonizar las diferentes páginas que componen una
publicación, tanto desde un punto de vista de forma como de contenido.
Antes de los programas informáticos de autoedición, la compaginación se realizaba con la
galerada
En la actualidad, los programas de autoedición han mejorado las técnicas de compaginación
y han facilitado el proceso de maquetación, mejorando la calidad del trabajo y los resultados.
No obstante, existen fallos habituales que no detectan los programas de autoedición

El autor de una maquetación es responsable de buscar la armonía y el equilibrio en todas las

páginas de la composición con una serie de normas:
➢ Conseguir que los renglones de un mismo párrafo queden juntos en la
misma página o en la misma columna. Evitar las líneas huérfanas y las
líneas viudas
➢ Cualquier modificación de un texto tiene repercusiones sobre él, por
ejemplo al cambiar una palabra por otra
➢ Las modificaciones en espacios repercuten sobre la forma del conjunto.

4 COMPOSICIÓN
En el contexto de diseño y la maquetación, se refiere a la organización y disposición visual de
elementos como texto, imágenes, colores y espacios en una página o diseño.
Se trata de crear una armonía y equilibrio entre estos elementos para lograr una
presentación atractiva y efectiva

En resumen, la composición es la colocación en el espacio de los elementos de una forma

equilibrada y armoniosa

4.1 GUÍA DE CONCEPTOS PARA DISEÑAR Y COMPONER EN DISEÑO GRÁFICO

EQUILIBRIO
Clave para una composición visualmente armoniosa, existen 3 tipos:
● Simétrico: Los elementos se colocan de manera similar en ambos
lados de un eje central
● Asimétrico: Los elementos se equilibran mediante su tamaño,
color, valor o posición
● Radial: Los elementos se disponen en torno a un punto central.

Balance de una composición:

● Balance simétrico: los elementos se disponen simétricamente a ambos lados de
los ejes, horizontal o vertical.
● Balance asimétrico: los elementos no mantienen simetría por forma, pero sí por
peso visual.

JERARQUÍA Y CONTRASTE
La jerarquía visual: es la forma en que organizamos y presentamos los elementos para
guiar la atención del espectador. Un elemento se puede destacar del resto por su forma, su
color o su tamaño.
Contraste: se produce cuando elementos opuestos se colocan cerca uno del otro. Se puede
utilizar el contraste en términos de color, tamaño, forma o estilo para enfatizar elementos,
crear impacto visual y mejorar la legibilidad.

ESPACIO NEGATIVO
Es el espacio vacío alrededor y entre los elementos de una composición.
No subestimes su poder, ya que puede ayudar a equilibrar la composición,
mejorar la legibilidad y resaltar elementos clave.

RITMO
Repetición y variación de los elementos en una composición.
El ritmo de una composición puede ser:
● Radial: si los elementos se disponen de forma circular
● Lineal: si la disposición de los elementos da una forma de
continuidad.

TIPOGRAFÍA
Considera la legibilidad, la coherencia con la temática y el mensaje, y la jerarquía
visual al seleccionar fuentes.Además, presta atención al espaciado, el interlineado
y la alineación para mejorar la legibilidad y la estética tipográfica.

COLOR
Comprender la teoría del color y cómo los colores interactúan entre sí te
ayudará a crear composiciones equilibradas y atractivas.
Utiliza una paleta de colores coherente y considera el significado y la
psicología del color en relación con el mensaje que deseas transmitir.

ESCALA Y PROPORCIÓN
Se refieren al tamaño relativo de los elementos en una composición.
Hay 3 subcategorías:
Tamaño: cuando hay con elementos de diferentes tamaños relacionados entre sí.
Proporción: elementos relacionados unos con otros, en una proporción visualmente
armónica.
División: elementos divididos en diferentes tamaños, creando todos ellos una unidad.
UNIDAD Y COHERENCIA
● Mantén la unidad y coherencia visual en tu diseño.
● Utiliza elementos y estilos consistentes para crear una identidad visual sólida.
● Evita mezclar demasiados estilos o elementos discordantes que puedan distraer o
confundir al espectador.
Esta unidad se puede conseguir mediante la repetición de motivos, la sucesión o el uso de la
proximidad

EXPERIMENTACIÓN Y CREATIVIDAD
El diseño gráfico es un campo en constante evolución, y la innovación surge de la
experimentación. Prueba nuevas ideas, técnicas y enfoques para desarrollar tu propio estilo y
destacar en tus proyectos

5 LA IMAGEN DIGITAL
5.1 LA IMAGEN VECTORIAL
Es la descripción de las trayectorias que definen el contorno de las figuras
El tamaño de los ficheros es muy pequeño y la calidad de la impresión depende del
dispositivo y no del fichero, que no contiene información de resolución.
Los programas de ordenador que se encargan de la manipulación son las aplicaciones de
ilustración como Illustrator, Inkscape o Figma.

5.2 LA IMAGEN BITMAP O RASTER

Es la que representa las fotografías digitales. Tres son los parámetros que definen a cualquier
imagen en el entorno bitmap:
● Tamaño:
- Es la medida del alto y el ancho de la imagen.
- La unidad de medida va a depender del uso al que se destinará la imagen
digitalizada.
- Para el uso en pantalla se suele utilizar el píxel y para la impresión en papel se
utiliza el centímetro o el milímetro
● La resolución:
- La resolución es una magnitud que se utiliza para las imágenes impresas,
entre las que se incluye la pantalla del ordenador.
- Indica el número de puntos que vamos a imprimir en una unidad de longitud.
La medida más empleada es el punto por pulgada
- La resolución viene determinada por el dispositivo de salida.
Cuanto mayor es la resolución, menor es el tamaño de los puntos y mayor es el detalle
 ● La profundidad del color:
- Es el parámetro utilizado para definir el número de bits que se emplean para
representar los distintos colores en cada punto. Un bit equivale a dos colores.
Una imagen con una profundidad de 4 bits (24) permite definir 16 colores,
mientras que 8 bits (28 ) dan como resultado 256 colores, lo máximo que
podemos obtener en escala de grises.
- Por color verdadero entendemos una profundidad de 24 bits (16.777.216
colores). Está por encima de lo que puede distinguir el ojo humano. La
profundidad de una imagen digital viene dada por el número de colores que
puede obtener el dispositivo de captación.

● Relación entre tamaño y resolución:

Al aumentar el tamaño se reduce la resolución y viceversa. Para conseguir aumentar
el tamaño y mantener la resolución es necesario interpolar los puntos necesarios
mediante un programa de edición.

● Formato:
Las imágenes digitales pueden tener una variedad de formatos, destacando los
siguientes:
- JPEG
- GIF
- PNG

6 COMPOSICIÓN TIPOGRÁFICA
Para que un párrafo sea legible y ofrezca un aspecto equilibrado y armonioso no sólo basta
con elegir una familia tipográfica de alta legibilidad, también hay que tener en cuenta una
serie de atributos que contribuyen a obtener una buena composición.
En un procesador de texto o un programa de autoedición se pueden ver estos parámetros
dentro de las opciones de párrafo.
● Las opciones de alinear texto son: alinear a la izquierda, a la derecha, al centro o
a ambos lados
● Separación entre caracteres: este parámetro se suele usar habitualmente en los
programas de autoedición profesional, donde suele aparecer por su nombre en inglés,
tracking o letter spacing, o simplemente como separación o espaciado entre
caracteres.
● Interlineado: representa la altura de la separación entre las líneas del texto, el
interlineado no puede ser inferior a la altura del cuerpo
 ● Longitud de la columna: La legibilidad del texto depende de dos factores. Por un
lado el tamaño del cuerpo de la letra y, por otro, de la anchura de la columna. Si se
usa una tipografía con un cuerpo muy pequeño, no se puede usar una longitud de
columna muy larga porque sería muy difícil de leer.
● El tipómetro: una herramienta que durante años fue fundamental en las imprentas
y en las redacciones de los periódicos

7 RETÍCULA Y GUÍAS
Estos elementos son herramientas fundamentales que
ayudan a lograr una composición visualmente
equilibrada y coherente.
Una retícula es una estructura de líneas y columnas que
te permite organizar y alinear los elementos en tu
diseño. Proporciona una estructura visual y ayuda a
mantener la coherencia y el equilibrio en tu diseño

● Definir una retícula: antes de comenzar a trabajar en tu diseño, es importante

definir la retícula adecuada para tu proyecto.Una retícula bien definida te ayudará a
colocar y alinear elementos de manera coherente y eficiente.
● Establecer guías: las guías son líneas horizontales o verticales que te permiten
alinear y posicionar elementos de forma precisa
● Columna y espacios: al utilizar una retícula, distribuye tus elementos a lo largo de
las columnas y utiliza los espacios entre ellas de manera efectiva. Asegúrate de que
los elementos clave se coloquen en las columnas principales para lograr una jerarquía
visual clara
● Alineación: : la alineación es fundamental en el diseño y la maquetación. La
alineación ayuda a crear una apariencia ordenada y profesional en tu diseño.
● Flexibilidad: No todas las páginas o diseños serán iguales, y es posible que debas
ajustar la retícula o las guías según las necesidades específicas de cada proyecto. La
retícula y las guías son herramientas, pero no deben limitar tu creatividad.
● Experimentación: juega con diferentes combinaciones de columnas, espacios y
alineaciones para encontrar la estructura que mejor se adapte a tu diseño.

8 PROGRAMAS DE DISEÑO Y MAQUETACIÓN

8.1 AUTOEDICIÓN
El mundo editorial hoy está ya más centrado en los productos digitales online que en los
impresos y esto nos abre el camino a nuevos programas de diseño y maquetación para
entornos digitales. Adobe sacó una aplicación de diseño, maquetación y prototipado de
páginas web y aplicaciones móviles, llamada Adobe XD
La primera versión de Figma, Figma tiene una gran comunidad de usuarios que ayudan a los
recién llegados. Además, el uso individual para la creación de un proyecto es gratuito
8.2 RETOQUE FOTOGRÁFICO
Aunque los programas de retoque fotográfico están pensados para la modificación y
alteración de fotografías, es muy habitual que se usen con propósito general para muchas
tareas de diseño para las que hay programas más apropiados
El programa de retoque más conocido es Photoshop, de Adobe, que en el ámbito profesional
prácticamente no tiene competencia. Casi igual de potente, pero gratuito, está GIMP que
permite manipular su imagen con las diferentes herramientas
● Edición de imágenes: permite realizar ajustes de color, brillo, contraste y
saturación, así como recortar, redimensionar y rotar imágenes.
● Herramientas de dibujo y pintura: proporciona pinceles, lápices, herramientas
de clonado y herramientas de selección para crear y editar imágenes.
● Capas y máscaras: permite trabajar con capas que se pueden superponer y
manipular de forma independiente
● Edición avanzada: incluye herramientas de selección avanzadas. También
proporciona herramientas de clonado y estampado para eliminar imperfecciones o
duplicar elementos.
● Compatibilidad con formatos de archivo

8.3 REVELADO DIGITAL

Es posiblemente la categoría que menos afecta al diseño y la maquetación. El formato RAW
es un tipo de formato de archivo utilizado en fotografía digital que almacena los
datos de la imagen sin comprimir y sin procesar. Algunas ventajas de este son:
● Calidad y detalle: al no aplicar compresión ni ajustes
de procesamiento, el formato RAW conserva todos los
detalles y la calidad original de la imagen capturada por
el sensor de la cámara.
● Flexibilidad en la edición: al disponer de una mayor
cantidad de información, es posible realizar ajustes más
precisos en el balance de blancos, exposición, contraste,
saturación y otros parámetros durante la
postproducción, sin perder calidad ni introducir
artefactos.
● Recuperación de sombras y luces: el formato RAW
permite recuperar detalles en áreas subexpuestas
(sombras) y sobreexpuestas (luces), que podrían
haberse perdido en otros formatos más comprimidos.
● Personalización de ajustes de la cámara: al disparar en RAW, los ajustes de la
cámara, como la nitidez, el ruido, el perfil de color, pueden ser modificados
posteriormente

El formato RAW también presenta algunas consideraciones a tener en cuenta:

● Tamaño de archivo: los archivos RAW ocupan más espacio de almacenamiento en
la tarjeta de memoria y en el disco duro.
● Procesamiento requerido: el formato RAW requiere un paso adicional de
procesamiento en el software para obtener una imagen final lista para compartir o
imprimir, lo que implica un poco más de tiempo y conocimientos de edición.
Entre los programas más populares de revelado digital encontramos:
● Cámara RAW.
● Lightroom
● Fotos (Macintosh)
● RawTherapee

8.4 ILUSTRACIÓN VECTORIAL

Características:
● Escalabilidad
● Edición y manipulación
● Tamaño de archivo pequeño
● Precisión

Los principales programas utilizados para la edición y producción de ilustraciones

vectoriales son:
● Adobe Illustrator: Es uno de los programas más populares y es ampliamente
utilizado en el ámbito profesional. Ofrece una amplia gama de herramientas y
funciones avanzadas
● CorelDRAW: es otro software de diseño gráfico vectorial muy utilizado,
especialmente en entornos de diseño gráfico y para la creación de ilustraciones
publicitarias y comerciales.
● Inkscape: es una opción de software de código abierto y gratuito para la creación y
edición de gráficos vectoriales
● Affinity Designer: Es una aplicación comercial de diseño gráfico vectorial que ha
ganado popularidad en los últimos años. Ofrece una interfaz intuitiva y potentes
herramientas para la creación y edición de ilustraciones vectoriales.
● Figma: termina siendo un programa muy completo para todo tipo de usos y,
además, gratuito y en línea.