Cuando creamos un material didáctico en forma de manual o cuaerno de trabajo o incluso algunas presentaciones, necesitamos tener en cuenta algunos elementos de diseño que faciliten la comunicación visual y refuercen el mensaje y faciliten el aprendizaje. Tratamos aquí algunos de estos elementos.

1. ELEMENTOS BÁSICOS
DE DISEÑO GRÁFICO
EN LA CREACIÓN DE
MATERIALES DIDÁCTICOS
www.unrinconparacrear.com
Blog en http://unrinconparacrear.blogspot.com
Esta obra está bajo licencia de Creative Commons
Reconocimiento-No comercial-Compartir bajo la
misma licencia 3.0 España License

2. Elementos básicos de diseño gráfico
El objetivo de
para realizar
este módulo es
diseños senci-
conocer cuáles
llos en nues-
son los princi-
tros propios
pales elemen-
materiales
tos que pode-
didácticos.
mos utilizar
2

3. Elementos básicos de diseño gráfico
El contenido que desarrollaremos a
continuación gira en torno a los si-
guientes puntos fundamentales:
 Diseños básicos para
“no-diseñadores”
 La tipografía
 Las líneas
 Las cajas
 Las sombras
 Los gráficos
3

4. Elementos básicos de diseño gráfico
CUATRO PRINCIPIOS BÁSICOS PARA “NO-DISEÑADORES”
En el diseño de materiales didácticos no es necesario utilizar todos los
elementos del diseño gráfico en general. Recordemos que se trata de
reforzar los mensajes con el objetivo de facilitar el aprendizaje.
Identificaremos aquí cuatro principios, de los que personas sin mucha
experiencia pueden sacar mucho partido:
Aprendiendo a utilizar estos principios, se verá cómo mejoran con r a-
pidez nuestros materiales didácticos.
4

5. Elementos básicos de diseño gráfico
El contraste se crea mediante la yuxtaposi-
ción de elementos muy diferentes: grande y
pequeño, blanco y negro, ancho y estrecho,
etc.
En una página/pantalla con poco contraste, los
elementos parecen iguales, nada destaca y los co-
lores parecen oscurecerse.
Una página/pantalla con alto contraste parece tener más fuerza, es
más llamativa, más dinámica y más interesante.
Los elementos importantes, como los títulos y los símbolos, destacan
claramente y son más fáciles de encontrar.
Si bien en algunos casos es más apropiado el contraste bajo, como,
por ejemplo, en un informe financiero, los materiales didácticos son
más fáciles de utilizar y más atractivos para el participante, si tienen
un alto contraste.
Veamos algunas formas sencillas de crear contraste:
 Utilizar conjuntamente tipografía grande y pequeña.
 Utilizar una ilustración grande en una página, o una grande y
una pequeña juntas.
 Utilizar blanco y negro o negro y sombreado claro, juntos.
 Líneas gruesas y finas en la misma página.
 Dejar grandes espacios blancos y los títulos grandes y gruesos.
5

6. Elementos básicos de diseño gráfico
La repetición genera consistencia. Esta consistencia se
logra a través de aspectos como, por ejemplo:
 Colocar el título de la sección o capítulo siem-
pre en el mismo lugar de la página.
 Dar a cada nivel del encabezado su propio
estilo.
 Incluir la misma información en los pies de la
página.
 Poner una línea gruesa debajo del encabezado.
 Meter el número de página dentro de un gráfico.
 Repetir un elemento de la portada dentro del documento.
 Repetir una ilustración en diferentes tamaños, o repetir peque-
ñas piezas de él.
La repetición añade interés y ayuda a unificar el material. Repetir algo
de manera consistente, del mismo modo, hace que las páginas parez-
can pertenecer al mismo documento. Asimismo, la repetición en una
serie de materiales, hace que cada pieza parezca pertenecer a la mis-
ma “familia”.
Cuando se combinan adecuadamente contraste y repetición, los parti-
cipantes pueden comprender con rapidez cómo están organizados los
materiales, porque se les ha dado consistencia y estímulos visuales .
6

7. Elementos básicos de diseño gráfico
Desglosar la información en piezas peque-
ñas, tales como párrafos cortos y listados
con viñetas o números, y luego agruparla en
“piezas” relacionadas en torno a una uni-
dad, ayuda a los participantes a comprender
y aprender la información.
La proximidad “visual” de un grupo de piezas relacionadas, hace
que la página se vea organizada y los lectores puedan ver la relación
entre los elementos a un golpe de vista.
Los elementos agrupados visualmente se comprenden más rápida-
mente.
Al igual que la proximidad, el alineamiento ayu-
da a organizar la página. Genera orden. Creamos
alineamiento poniendo “en línea” los bordes
de los elementos de una página.
Es conveniente alinear los elementos entre sí siempre que sea posible.
El alineamiento también incluye decidir cómo alinear o justificar el
texto en una página. Tenemos cuatro opciones:
 Alineado a la izquierda
 Alineado a la derecha
 Justificado
 Centrado
7

8. Elementos básicos de diseño gráfico
El texto alineado a la izquierda mantiene más la
atención.
La alineación a la derecha es útil cuando se
pone una etiqueta o explicación al lado iz-
quierdo de un gráfico o dibujo, o en el margen
izquierdo, o en el título de portadas.
El texto centrado se utiliza poco en materiales didácticos. El
texto alineado a la izquierda o a la derecha tiene más fuer-
za y resulta más interesante.
 Los listados con viñetas o números deben ir siem-
pre alineados a la izquierda.
Columnas:
neados a la izquierda y sin
Cuando se trabaja en co-
sangría en la primera línea
lumnas, tanto los títulos
de párrafo.
como el texto, deben ir ali-
8

9. Elementos básicos de diseño gráfico
En resumen…
 Crear páginas con alto contraste.
 Dejar abundante espacio en blanco.
 Repetir deliberadamente un elemento gráfico
a lo largo de todo el material.
 No repartir los elementos por toda la página
indiscriminadamente. Agruparlos y dejar es-
pacio entre los grupos.
 Poner los encabezados más cerca del texto
siguiente que del precedente.
 Alinear los bordes de las cosas. Alinear cada
cosa con alguna otra en la página.
 Evitar el alineamiento centrado.
9

10. Elementos básicos de diseño gráfico
LA TIPOGRAFÍA
La tipografía, el tipo, es el elemento más básico del
diseño gráfico.
El tipo de letra que elijamos, su tamaño y el espacia-
do entre letras y palabras, puede ayudar o entorpecer
el aprendizaje.
Incluso si no se utilizan otros elementos de diseño, el material puede
tener la apariencia de bien diseñado, sólo con una letra bien elegida.
Veremos a continuación guías para la utilización de los tipos, con el
objeto de convertir nuestros materiales en algo atractivo y legible.
DIFERENCIA ENTRE TIPOS Y FUENTES
FUENTES son los “miembros individuales” o el repertorio que hay
dentro de un tipo.
TIPOS son las familias de fuentes.
Ejemplo:
Un TIPO es la letra Times
FUENTES son:
Times bold,
times italic,
times bold italic ...
10

11. Elementos básicos de diseño gráfico
CATEGORÍAS DE TIPOS
Serif
SERIF son los tipos que tienen una especie de pequeños
“pies. Se utilizan:
 Para líneas largas y grandes bloques de
texto.
 Si los participantes tienen dificultades de lectura o de visión.
 Para títulos y encabezados.
 Leyendas” y etiquetas.
 Tablas y listas.
Sans Serif
Sans serif son los tipos que no tienen“serif, es decir, los que no tie-
nen esos“pequeños pies. Se usan:
 En líneas cortas o bloques breves de texto.
 Para títulos y encabezados.


Leyendas y etiquetas,
Tablas y listas.
R
Script
Script son los tipos que parecen escritos a mano.
 Usar en pequeñas dosis, en bloques muy bre-
ves de texto; así es más fácil leerlos.

 Quedan mejor en tamaños grandes.
No usar todas mayúsculas.
R
11

12. Elementos básicos de diseño gráfico
ELECCIÓN DE LOS TIPOS
Es más una cuestión de preferencia personal que de seguir unas re-
glas. Cada tipo tiene sus propias características y cada uno responde a
ellas de modo diferente.
Se pueden seguir algunas guías básicas:
 Asegurarse de que el tipo elegido es legible en la calidad de
impresión que vamos a utilizar.
 Usar un tipo adecuado al propósito del material y a los des-
tinatarios.
 Evitar letras de diseño muy antiguo (tipos como Chicago,
Geneva, Mónaco, New York...).
 Evitar letras “huecas” y letras con sombra, ya que se leen
mal y parecen de aficionado.
CÓMO COMBINAR LOS TIPOS
No combinar dos tipos de la misma categoría en una sola página (ni
dos serif ni dos sans serif). El propósito de combinar tipos es crear
contraste, y dos tipos de la misma categoría se parecen mucho.
La única combinación efectiva es una serif y una sans serif. La serif
para el texto principal y la sans serif para títulos y epígrafes (y posi-
blemente para encabezados, pies, llamadas...). O viceversa.
 No combinar script con otros tipos dentro del mismo párrafo.
12

13. Elementos básicos de diseño gráfico
 Si se utiliza sólo un tipo:
o Hacer los títulos y epígrafes lo suficientemente anchos y
en negrita, para crear contraste.
o Crear variedad utilizando negrita, itálica y diferentes ta-
maños del mismo tipo.
TAMAÑO
Los tipos se miden en puntos, desde el más alto al
R más bajo de las letras que constituyen ese tipo.
El criterio más importante para determinar el ta-
maño de un tipo es su legibilidad.
 Utilizar tipos de entre 10 y 14 puntos para el texto principal -
14 puntos para los tipos más pequeños-, en los manuales y
handouts.
 En tablas y llamadas, encabezados y pies, se pueden usar de
8 puntos.
 En las partes donde el contenido no es crítico -copyright, o
algunas partes de encabezados y pies-, los tipos pueden ser
de menos de 8 puntos, siempre que sean legibles.
 Cuando no se esté seguro de si un tipo será legible, es mejor
utilizarlo más grande.
13

14. Elementos básicos de diseño gráfico
Hay que recordar que no todos los tipos son exactamente iguales en
el mismo tamaño, y pueden ocupar diferente espacio. Por ejemplo,
los siguientes tipos están escritos todos con tamaño 12:
Times No todos los tipos tienen el mismo tamaño.
Arial No todos los tipos tienen el mismo tamaño.
.
INTERLINEADO
Es el espaciado que hay entre líneas y se mide también en puntos.
Un interlineado excesivamente estrecho hace difícil la lectura. Cada
tipo de material didáctico tiene criterios diferentes para el interlinea-
do, pero se pueden seguir unas normas generales:
 Cuando aumenta la longitud de las líneas, aumenta la necesidad
de mayor interlineado.
 En líneas largas, las sans serif necesitan más interlineado que las
serif.
 Cuando haya dudas, aumentar el interlineado.
14

15. Elementos básicos de diseño gráfico
TÍTULOS Y EPÍGRAFES
Los títulos y los epígrafes guían al lector a lo largo del documento y le
indican la jerarquía de la información.
Normalmente, los niveles de los epígrafes se diferencian por el tam a-
ño, el estilo del tipo, la posición, el espacio que los rodea, un símbolo,
o la combinación de varios de estos elementos. Veamos algunas re-
glas de utilización:
 EVITAR EL USO DE TODO MAYÚSCULAS EN LOS EPÍGRAFES
LARGOS: La lectura es más ardua.
 CONSIDERAR la posibilidad de escribir en mayúsculas sólo la
primera palabra del epígrafe.
 No partir los títulos con guión.
 Partir los títulos en una pausa verbal, a ser posible.
 No poner un título aislado al final de la página.
 No utilizar más de tres niveles de epígrafes; más, hacen difícil
seguir la secuencia.
CREACIÓN DE ÉNFASIS
Hay cuatro formas tradicionales de enfatizar las palabras importantes:
Itálica
Negrita
Itálica-negrita
Subrayada
15

16. Elementos básicos de diseño gráfico
 Una gran cantidad de texto en cualquiera de estas formas es
difícil de leer. Utilizarlos únicamente para resaltar lo esen-
cial.
 No utilizar letra más grande para enfatizar unas palabras
dentro de un párrafo, ya que eso altera el interlineado.
 Usar un tipo que contraste, por ejemplo, sans serif, dentro
de un párrafo de serif.
 Se puede enfatizar cambiando los márgenes del párrafo. Es-
to crea espacio en blanco alrededor del texto que se quiere
enfatizar. También se puede poner una línea vertical en el
margen izquierdo.
VARIEDAD
También se puede enfatizar creando variedad con los tipos:
 E x p a n d i r o condensar los títulos.
 Utilizar iconos o viñetas.
 PONER la primera línea de un capítulo o sección en letras
mayúsculas.
 U TILIZAR V ERSALES, pero sólo en títulos y epígrafes.
 Utilizar una gran letra mayúscula en la primera palabra, que
no sobrepase el tamaño del tipo del epígrafe.
16

17. Elementos básicos de diseño gráfico
LAS LÍNEAS
Las líneas son uno de los elementos de diseño gráfico más útiles y
sencillos de utilizar. Pueden utilizarse tanto para separar bloques de
texto, como para enfatizar o definir, o también para separar el enc a-
bezado y/o el pie de página del resto de la página.
Para utilizar las líneas hay que decidir cuestiones en torno a:
 Grosor
 Con qué alinearlas
 Cuánto espacio dejar alrededor
 Dónde colocarlas
Veamos a continuación algunas guías para su utilización:
Se pueden utilizar líneas de
muy diversos grosores, que se
miden en puntos…
… o pueden ser dobles,
asimismo, de diversos
grosores.
También podemos usar líneas dis-
continuas para bordear algunas
imágenes o bloques de texto.
17

18. Elementos básicos de diseño gráfico
 Las líneas horizontales invitan a leer; demasiadas verticales,
producen una página excesivamente llena.
 Las líneas finas quedan mejor que las gruesas, especialmente
entre el texto y si hay muchas líneas en la página.
 Dejar más espacio en blanco alrededor de las líneas gruesas.
 No utilizar demasiados grosores de línea en la misma página.
 No poner texto demasiado cerca de la línea.
 Las líneas gruesas enfatizan el título o los encabezados, mien-
tras que las finas se usan más para los pies de página.
 Al escribir en columnas, las líneas algo gruesas se usan para se-
parar bloques de información. Pero, en este caso, conviene po-
ner la línea sobre el título de la nueva sección y no bajo el últi-
mo renglón de la que termina.
 Las líneas horizontales se pueden usar para separar el párrafo
introductorio del resto de la página.
 Las líneas verticales son muy útiles para colocar los epígrafes en
el margen izquierdo de la página, separados del texto y en pa-
ralelo a él.
 Las verticales también se usan para separar varias columnas en
una página.
 Las líneas gruesas enfatizan una idea separándola del resto del
texto.
 No poner texto demasiado cerca de las líneas, ya que se lee mal,
y ello entorpece nuestros objetivos didácticos.
18

19. Elementos básicos de diseño gráfico
LAS CAJAS
Las cajas se utilizan mucho en los materiales
didácticos, bordeando, tanto texto, como ilus-
traciones o tablas.
Tienen varias funciones útiles. Pueden utilizarse para:
 Enfatizar información importante.
 Separar la información subordinada a la principal.
 Contener una ilustración, esquema o gráfico.
 Definir el espacio para escribir.
 Crear un borde alrededor de una página.
No siempre es necesario utilizar cajas. Hay que preguntarse si la i n-
formación no se puede resaltar o tratar de alguna otra manera. De-
masiadas cajas pueden dar materiales recargados.
Veamos algunas guías de utilización:
 No utilizar demasiadas cajas en una página: una grande o
tres pequeñas es más que suficiente.
 Dejar espacio, tanto dentro, como fuera de la caja.
 Dejar más espacio alrededor de una caja que tenga el bor-
de grueso.
 No utilizar bordes discontinuos: saturan demasiado.
 Las cajas pueden enfatizar los títulos y añadir interés visual.
19

20. Elementos básicos de diseño gráfico
 Se utilizan mucho para recuadrar la información clave en
los márgenes, en paralelo al cuerpo de texto.
 Las cajas decoradas, bien utilizadas, ayudan a recordar el
mensaje que contienen.
 Se pueden utilizar cajas para bordear el espacio reservado
para responder a preguntas.
 Los bordes excesivamente redondeados no son muy intere-
santes; es mejor en ángulo o ligeramente suavizados, ya
que tienen más fuerza.
 No poner texto demasiado cerca de los bordes de la caja.
LAS SOMBRAS
El sombreado o relleno de algunas superficies, puede ser muy intere-
sante para los materiales didácticos, pero siempre estará limitado por
el programa informático que utilicemos y sus posibilidades, así como
del medio de reproducción que se vaya a utilizar, ya que, gen eralmen-
te, la fotocopia no reproduce bien las sombras, a no ser que el pro-
grama tenga opciones de variedad de tramas.
Para entornos virtuales también conviene hacer pruebas antes, si bien
suelen admitir mejor las sombras y se pueden crear efectos muy
atractivos.
www.unrinconparacrear.com
Blog en http://unrinconparacrear.blogspot.com
Esta obra está bajo licencia de Creative Commons
Reconocimiento-No comercial-Compartir bajo la
20 misma licencia 3.0 España License