Edufrikis Educación y tecnología

30jul/104

Consejos gráficos para el diseño de recursos educativos digitales.

La gran diferencia entre los materiales educativos creados por empresas de contenidos o editoriales y los materiales creados por profesores es que los primeros son puro diseño gráfico y los segundos puro diseño didáctico (con algunas excepciones).

La mayoría de docentes no ha tenido una educación visual y mucho menos una formación sobre accesibilidad y usabilidad de contenidos interactivos. Por esto, es comprensible que nos encontremos muy buenos materiales didácticos con un diseño gráfico pésimo que, además de dar una mala sensación, dificultan su comprensión y uso.

A continuación presento dos páginas con el mismo contenido (Tipo A y Tipo B). Una representa el lado oscuro, todo lo que no se debe hacer, el camino del mal (xD). La otra sigue unas premisas básicas para un diseño funcional y accesible. Un diseño que centre la atención en el contenido, que no distraiga al lector, en este caso, al alumno.

Pincha en la foto de cada tipo para ver los ejemplos. Como podrás comprobar no se trata de una actividad didáctica. Es simplemente un texto de prueba para mostrar como un material con la misma información puede cambiar radicalmente según el diseño gráfico que se le aplique.

Tipo A

Tipo B

Si no quieres caer en el lado oscuro (tipo A), ahí van unos pequeños consejos:

La estructura.

Todo lo que hagas debe seguir una maquetación coherente. La simetría, el orden y la compensación de los espacios le da coherencia al diseño y ayuda al lector a situar rápidamente las distintas partes del contenido. Si pones las cosas donde te parece, sin ninguna planificación previa, el resultado final tendrá mal aspecto y hará que el lector se pierda con facilidad en un caos de gráficos y texto. Esto se puede solucionar de una forma sencilla.

Existen muchas páginas donde se pueden descargar layout o grid sobre los que diseñar. Muchos editores de HTML llevan incorporadas plantillas que podemos utilizar. Si vas a diseñar con programas como Photoshop, Gimp, Inkscape, Illustrator o Freehand  te puedes bajar grids en todos los formatos desde aquí .

Estas plantillas para maquetación se pueden aplicar a cualquier diseño que hagas ya sea una página web, un flash, un pdf, etc.

El fondo.

No uses imágenes de fondo, sólo colores planos. Estás haciendo una actividad didáctica en la que lo importante es el contenido. Los fondos de imágenes  repetidas o grandes imágenes dificultan la visualización del texto además de que añaden un peso considerable.

Los colores.

Un consejo sencillo, no pongas en una pantalla una combinación de colores que no llevarías puesta. Cuando vayas a elegir los colores piensa que estás delante del armario eligiendo la ropa que te vas a poner. Según el tipo de ropa y el contexto elegirás unos colores u otros. (Un verde manzana quizá no quede muy bien en una americana pero si en una camiseta para ir a la playa, cada situación tiene sus colores).

Normalmente un diseñador no elige los colores sobre la marcha sino que trabaja sobre una paleta que ha elegido previamente. Crea una paleta de 3 a 5-6 colores y  construye todo el material sobre esos colores.

Para ayudarte en la elección hay herramientas como kuler.adobe.com donde puedes crear tus propias paletas de colores y buscar dentro de las que ya han creado otros usuarios.

Supongamos que nuestro material trata sobre  “la primavera”. Nos vamos a Kuler y ponemos en la caja de búsqueda “spring” (sí, hay que buscar en inglés si quieres encontrar algo). Aparecerán toda una serie de paletas de colores creadas por los usuarios para la palabra primavera.

De esa paleta de colores procura que unos sean claros y otros oscuros. Utiliza los claros para los fondos y los oscuros para el texto pero ante todo asegúrate de que dispones de suficientes colores para crear varios contrastes.

La tipografía.

La tipografía es un elemento muy importante del diseño. Aunque te pueda parecer que cualquiera vale esto no es así.

Lo primero que debes tener en cuenta es que si tu actividad se va a ver en un navegador tienes que usar una serie de fuentes determinadas. Si usas un tipo de fuente que el usuario no tiene instalada la sustituirá por la fuente por defecto del navegador y tu diseño ya no aparecerá tal como lo hiciste.

No hay fuentes más bonitas que otras, cada una de ellas puede quedar muy bien en un contexto y fatal en otro. En nuestro caso las fuentes deben ser sencillas y muy legibles y usar como mucho dos tipos de fuentes en un mismo material.

En esta web puedes ver las fuentes más usadas y que sistemas operativos las traen de serie.

Como habrás comprobado son pocas las fuentes que se pueden usar con seguridad de que cualquiera las tendrá instaladas. Pero son suficientes para hacer muy buenos diseños y además son las más legibles.

Un consejo más, nunca uses la fuente “Comic sans” (por favor :S).  Sólo hay una cosa que un diseñador odie más que Internet Explorer 6 y es la fuente Comic Sans.

Por último, recuerda  no utilizar un tamaño de fuente menor de 12.

Las imágenes.

Gifs animados. Tus alumnos juegan en la consola a juegos en 3D desde que nacieron. Han visto explosiones y efectos especiales de todo tipo en cine y televisión. No los vas a impresionar con un gif animado de un perro bailando. Además, no tiene ninguna finalidad didáctica. Totalmente prohibidos los gifs animados.

Imágenes con transparencias. Si vas a usar este tipo de imágenes utiliza imágenes PNG en lugar de GIF. Los gifs dejan un borde blanco alrededor de la imagen que queda fatal. Si tu fondo no es blanco utiliza imágenes png y esos molestos píxeles no aparecerán.

Peso de las imágenes.  Procura que tus imágenes pesen lo menos posible. Esto ralentizan la carga y muchas veces no tiene justificación alguna (las vas a poner en un tamaño pequeño y no necesitas una gran resolución para que se vean bien). Tampoco debes agrandar las fotos pues éstas quedan pixeladas al aumentar de tamaño dificultando la visión y dando un mal aspecto a tu material.

Multimedia.

La musiquilla de fondo. Esto es una carga innecesaria para una página y además de distraer  molesta. Hay que eliminar todo aquello que no sea necesario para la actividad. No hay que adornar.

Flash. De esto hablaremos más profundamente en un post pero como adelanto te aconsejo que lo evites siempre que puedas. No es accesible y requiere de mucho trabajo, no merece la pena.

Extra:

Tipo C

Tipo C, en el que me salto algunos de los consejos que te he dado. Podría ser una buena opción para situaciones determinadas pero sin duda elegiría el Tipo B como material para la escuela. El Tipo B tiene mucho menos peso (las conexiones de las escuelas no son muy buenas) y el contenido queda mucho más limpio y claro.

Espero que os sirvan mis consejos. ;)

Be Sociable, Share!
Etiquetado con: Deja un comentario
Comentarios (4) Trackbacks (0)
  1. Genial, gracias por explicar con tanta claridad en verdad no se porque han comentado alguien pero esta muy bien presentado.

  2. El material que ustedes colocan es muy completo, gracias por ayudarnos a estar actualizados.

  3. Muy buen material, gracias por ayudarnos

  4. Es genial, son fantásticas ideas, gracias.


Deja un comentario


*

Sin trackbacks por el momento.