1. ELEMENTOS BSICOS DE DISEO GRFICO EN LA CREACIN DE MATERIALES DIDCTICOS 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 Espaa License

2. Elementos bsicos de diseo grfico El objetivo de para realizar este mdulo es diseos senci- conocer cules llos en nues- son los princi- tros propios pales elemen- materiales tos que pode- didcticos. mos utilizar 2

3. Elementos bsicos de diseo grfico El contenido que desarrollaremos a continuacin gira en torno a los si- guientes puntos fundamentales: Diseos bsicos para no-diseadores La tipografa Las lneas Las cajas Las sombras Los grficos 3

4. Elementos bsicos de diseo grfico CUATRO PRINCIPIOS BSICOS PARA NO-DISEADORES En el diseo de materiales didcticos no es necesario utilizar todos los elementos del diseo grfico 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 cmo mejoran con r a- pidez nuestros materiales didcticos. 4

5. Elementos bsicos de diseo grfico El contraste se crea mediante la yuxtaposi- cin de elementos muy diferentes: grande y pequeo, blanco y negro, ancho y estrecho, etc. En una pgina/pantalla con poco contraste, los elementos parecen iguales, nada destaca y los co- lores parecen oscurecerse. Una pgina/pantalla con alto contraste parece tener ms fuerza, es ms llamativa, ms dinmica y ms interesante. Los elementos importantes, como los ttulos y los smbolos, destacan claramente y son ms fciles de encontrar. Si bien en algunos casos es ms apropiado el contraste bajo, como, por ejemplo, en un informe financiero, los materiales didcticos son ms fciles de utilizar y ms atractivos para el participante, si tienen un alto contraste. Veamos algunas formas sencillas de crear contraste: Utilizar conjuntamente tipografa grande y pequea. Utilizar una ilustracin grande en una pgina, o una grande y una pequea juntas. Utilizar blanco y negro o negro y sombreado claro, juntos. Lneas gruesas y finas en la misma pgina. Dejar grandes espacios blancos y los ttulos grandes y gruesos. 5

6. Elementos bsicos de diseo grfico La repeticin genera consistencia. Esta consistencia se logra a travs de aspectos como, por ejemplo: Colocar el ttulo de la seccin o captulo siem- pre en el mismo lugar de la pgina. Dar a cada nivel del encabezado su propio estilo. Incluir la misma informacin en los pies de la pgina. Poner una lnea gruesa debajo del encabezado. Meter el nmero de pgina dentro de un grfico. Repetir un elemento de la portada dentro del documento. Repetir una ilustracin en diferentes tamaos, o repetir peque- as piezas de l. La repeticin aade inters y ayuda a unificar el material. Repetir algo de manera consistente, del mismo modo, hace que las pginas parez- can pertenecer al mismo documento. Asimismo, la repeticin en una serie de materiales, hace que cada pieza parezca pertenecer a la mis- ma familia. Cuando se combinan adecuadamente contraste y repeticin, los parti- cipantes pueden comprender con rapidez cmo estn organizados los materiales, porque se les ha dado consistencia y estmulos visuales . 6

7. Elementos bsicos de diseo grfico Desglosar la informacin en piezas peque- as, tales como prrafos cortos y listados con vietas o nmeros, y luego agruparla en piezas relacionadas en torno a una uni- dad, ayuda a los participantes a comprender y aprender la informacin. La proximidad visual de un grupo de piezas relacionadas, hace que la pgina se vea organizada y los lectores puedan ver la relacin entre los elementos a un golpe de vista. Los elementos agrupados visualmente se comprenden ms rpida- mente. Al igual que la proximidad, el alineamiento ayu- da a organizar la pgina. Genera orden. Creamos alineamiento poniendo en lnea los bordes de los elementos de una pgina. Es conveniente alinear los elementos entre s siempre que sea posible. El alineamiento tambin incluye decidir cmo alinear o justificar el texto en una pgina. Tenemos cuatro opciones: Alineado a la izquierda Alineado a la derecha Justificado Centrado 7

8. Elementos bsicos de diseo grfico El texto alineado a la izquierda mantiene ms la atencin. La alineacin a la derecha es til cuando se pone una etiqueta o explicacin al lado iz- quierdo de un grfico o dibujo, o en el margen izquierdo, o en el ttulo de portadas. El texto centrado se utiliza poco en materiales didcticos. El texto alineado a la izquierda o a la derecha tiene ms fuer- za y resulta ms interesante. Los listados con vietas o nmeros deben ir siem- pre alineados a la izquierda. Columnas: neados a la izquierda y sin Cuando se trabaja en co- sangra en la primera lnea lumnas, tanto los ttulos de prrafo. como el texto, deben ir ali- 8

9. Elementos bsicos de diseo grfico En resumen Crear pginas con alto contraste. Dejar abundante espacio en blanco. Repetir deliberadamente un elemento grfico a lo largo de todo el material. No repartir los elementos por toda la pgina indiscriminadamente. Agruparlos y dejar es- pacio entre los grupos. Poner los encabezados ms cerca del texto siguiente que del precedente. Alinear los bordes de las cosas. Alinear cada cosa con alguna otra en la pgina. Evitar el alineamiento centrado. 9

10. Elementos bsicos de diseo grfico LA TIPOGRAFA La tipografa, el tipo, es el elemento ms bsico del diseo grfico. El tipo de letra que elijamos, su tamao y el espacia- do entre letras y palabras, puede ayudar o entorpecer el aprendizaje. Incluso si no se utilizan otros elementos de diseo, el material puede tener la apariencia de bien diseado, slo con una letra bien elegida. Veremos a continuacin guas para la utilizacin 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 bsicos de diseo grfico CATEGORAS DE TIPOS Serif SERIF son los tipos que tienen una especie de pequeos pies. Se utilizan: Para lneas largas y grandes bloques de texto. Si los participantes tienen dificultades de lectura o de visin. Para ttulos y encabezados. Leyendas y etiquetas. Tablas y listas. Sans Serif Sans serif son los tipos que no tienenserif, es decir, los que no tie- nen esospequeos pies. Se usan: En lneas cortas o bloques breves de texto. Para ttulos y encabezados. Leyendas y etiquetas, Tablas y listas. R Script Script son los tipos que parecen escritos a mano. Usar en pequeas dosis, en bloques muy bre- ves de texto; as es ms fcil leerlos. Quedan mejor en tamaos grandes. No usar todas maysculas. R 11

12. Elementos bsicos de diseo grfico ELECCIN DE LOS TIPOS Es ms una cuestin de preferencia personal que de seguir unas re- glas. Cada tipo tiene sus propias caractersticas y cada uno responde a ellas de modo diferente. Se pueden seguir algunas guas bsicas: Asegurarse de que el tipo elegido es legible en la calidad de impresin que vamos a utilizar. Usar un tipo adecuado al propsito del material y a los des- tinatarios. Evitar letras de diseo muy antiguo (tipos como Chicago, Geneva, Mnaco, New York...). Evitar letras huecas y letras con sombra, ya que se leen mal y parecen de aficionado. CMO COMBINAR LOS TIPOS No combinar dos tipos de la misma categora en una sola pgina (ni dos serif ni dos sans serif). El propsito de combinar tipos es crear contraste, y dos tipos de la misma categora se parecen mucho. La nica combinacin efectiva es una serif y una sans serif. La serif para el texto principal y la sans serif para ttulos y epgrafes (y posi- blemente para encabezados, pies, llamadas...). O viceversa. No combinar script con otros tipos dentro del mismo prrafo. 12

13. Elementos bsicos de diseo grfico Si se utiliza slo un tipo: o Hacer los ttulos y epgrafes lo suficientemente anchos y en negrita, para crear contraste. o Crear variedad utilizando negrita, itlica y diferentes ta- maos del mismo tipo. TAMAO Los tipos se miden en puntos, desde el ms alto al R ms bajo de las letras que constituyen ese tipo. El criterio ms importante para determinar el ta- mao de un tipo es su legibilidad. Utilizar tipos de entre 10 y 14 puntos para el texto principal - 14 puntos para los tipos ms pequeos-, 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 crtico -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 ms grande. 13

14. Elementos bsicos de diseo grfico Hay que recordar que no todos los tipos son exactamente iguales en el mismo tamao, y pueden ocupar diferente espacio. Por ejemplo, los siguientes tipos estn escritos todos con tamao 12: Times No todos los tipos tienen el mismo tamao. Arial No todos los tipos tienen el mismo tamao. . INTERLINEADO Es el espaciado que hay entre lneas y se mide tambin en puntos. Un interlineado excesivamente estrecho hace difcil la lectura. Cada tipo de material didctico tiene criterios diferentes para el interlinea- do, pero se pueden seguir unas normas generales: Cuando aumenta la longitud de las lneas, aumenta la necesidad de mayor interlineado. En lneas largas, las sans serif necesitan ms interlineado que las serif. Cuando haya dudas, aumentar el interlineado. 14

15. Elementos bsicos de diseo grfico TTULOS Y EPGRAFES Los ttulos y los epgrafes guan al lector a lo largo del documento y le indican la jerarqua de la informacin. Normalmente, los niveles de los epgrafes se diferencian por el tam a- o, el estilo del tipo, la posicin, el espacio que los rodea, un smbolo, o la combinacin de varios de estos elementos. Veamos algunas re- glas de utilizacin: EVITAR EL USO DE TODO MAYSCULAS EN LOS EPGRAFES LARGOS: La lectura es ms ardua. CONSIDERAR la posibilidad de escribir en maysculas slo la primera palabra del epgrafe. No partir los ttulos con guin. Partir los ttulos en una pausa verbal, a ser posible. No poner un ttulo aislado al final de la pgina. No utilizar ms de tres niveles de epgrafes; ms, hacen difcil seguir la secuencia. CREACIN DE NFASIS Hay cuatro formas tradicionales de enfatizar las palabras importantes: Itlica Negrita Itlica-negrita Subrayada 15

16. Elementos bsicos de diseo grfico Una gran cantidad de texto en cualquiera de estas formas es difcil de leer. Utilizarlos nicamente para resaltar lo esen- cial. No utilizar letra ms grande para enfatizar unas palabras dentro de un prrafo, ya que eso altera el interlineado. Usar un tipo que contraste, por ejemplo, sans serif, dentro de un prrafo de serif. Se puede enfatizar cambiando los mrgenes del prrafo. Es- to crea espacio en blanco alrededor del texto que se quiere enfatizar. Tambin se puede poner una lnea vertical en el margen izquierdo. VARIEDAD Tambin se puede enfatizar creando variedad con los tipos: E x p a n d i r o condensar los ttulos. Utilizar iconos o vietas. PONER la primera lnea de un captulo o seccin en letras maysculas. U TILIZAR V ERSALES, pero slo en ttulos y epgrafes. Utilizar una gran letra mayscula en la primera palabra, que no sobrepase el tamao del tipo del epgrafe. 16

17. Elementos bsicos de diseo grfico LAS LNEAS Las lneas son uno de los elementos de diseo grfico ms tiles y sencillos de utilizar. Pueden utilizarse tanto para separar bloques de texto, como para enfatizar o definir, o tambin para separar el enc a- bezado y/o el pie de pgina del resto de la pgina. Para utilizar las lneas hay que decidir cuestiones en torno a: Grosor Con qu alinearlas Cunto espacio dejar alrededor Dnde colocarlas Veamos a continuacin algunas guas para su utilizacin: Se pueden utilizar lneas de muy diversos grosores, que se miden en puntos o pueden ser dobles, asimismo, de diversos grosores. Tambin podemos usar lneas dis- continuas para bordear algunas imgenes o bloques de texto. 17

18. Elementos bsicos de diseo grfico Las lneas horizontales invitan a leer; demasiadas verticales, producen una pgina excesivamente llena. Las lneas finas quedan mejor que las gruesas, especialmente entre el texto y si hay muchas lneas en la pgina. Dejar ms espacio en blanco alrededor de las lneas gruesas. No utilizar demasiados grosores de lnea en la misma pgina. No poner texto demasiado cerca de la lnea. Las lneas gruesas enfatizan el ttulo o los encabezados, mien- tras que las finas se usan ms para los pies de pgina. Al escribir en columnas, las lneas algo gruesas se usan para se- parar bloques de informacin. Pero, en este caso, conviene po- ner la lnea sobre el ttulo de la nueva seccin y no bajo el lti- mo rengln de la que termina. Las lneas horizontales se pueden usar para separar el prrafo introductorio del resto de la pgina. Las lneas verticales son muy tiles para colocar los epgrafes en el margen izquierdo de la pgina, separados del texto y en pa- ralelo a l. Las verticales tambin se usan para separar varias columnas en una pgina. Las lneas gruesas enfatizan una idea separndola del resto del texto. No poner texto demasiado cerca de las lneas, ya que se lee mal, y ello entorpece nuestros objetivos didcticos. 18

19. Elementos bsicos de diseo grfico LAS CAJAS Las cajas se utilizan mucho en los materiales didcticos, bordeando, tanto texto, como ilus- traciones o tablas. Tienen varias funciones tiles. Pueden utilizarse para: Enfatizar informacin importante. Separar la informacin subordinada a la principal. Contener una ilustracin, esquema o grfico. Definir el espacio para escribir. Crear un borde alrededor de una pgina. No siempre es necesario utilizar cajas. Hay que preguntarse si la i n- formacin no se puede resaltar o tratar de alguna otra manera. De- masiadas cajas pueden dar materiales recargados. Veamos algunas guas de utilizacin: No utilizar demasiadas cajas en una pgina: una grande o tres pequeas es ms que suficiente. Dejar espacio, tanto dentro, como fuera de la caja. Dejar ms espacio alrededor de una caja que tenga el bor- de grueso. No utilizar bordes discontinuos: saturan demasiado. Las cajas pueden enfatizar los ttulos y aadir inters visual. 19

20. Elementos bsicos de diseo grfico Se utilizan mucho para recuadrar la informacin clave en los mrgenes, 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 ms 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 didcticos, pero siempre estar limitado por el programa informtico que utilicemos y sus posibilidades, as como del medio de reproduccin 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 tambin 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 Espaa License