Este documento proporciona consejos sobre el diseño de recursos educativos digitales. Explica la diferencia entre materiales creados por empresas y profesores, y ofrece pautas básicas como usar textos cortos y concisos, estructurar la información lógicamente, evitar distracciones visuales y centrarse en el contenido educativo. También recomienda consideraciones de diseño como el uso de colores, tipografía, imágenes y multimedia accesibles que faciliten la comprensión del material.

1. DISEÑO DE RECURSOS
EDUCATIVOS DIGITALES
BIBIANA CHÁVARRO QUIMBAYA
GRADO: 1103
ÁREA: TECNOLOGÍA E INFORMÁTICA
ESCUELA NORMAL SUPERIOR DE NEIVA

2. DIFERENCIE ENTRE
MATERIALES EDUCATIVOS
• La diferencia entre los materiales
educativos creados por empresas 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).

3. CAUSA DEL MAL DISEÑO
GRAFICO
• Si no se tiene educación visual y
información sobre accesibilidad y
usabilidad de contenidos interactivos,
podemos encontrar buenos materiales
con mal diseño grafico que produce mala
sensación y dificulta su comprensión y
uso.

4. EJEMPLO:
• TEXTOS CON LA MISMA INFORMACIÓN:
Representa el lado oscuro, todo lo que Sigue unas premisas básicas para un
no se debe hacer, el camino del mal, diseño funcional y accesible. Un
pues distrae al lector con su mal diseño que centre la atención en el
grafico, además de que da pereza, contenido, que no distraiga al lector,
dificultando su uso. en este caso, al alumno.

5. PAUTAS
BASICAS
• Conocer bien el tema y los puntos esenciales
• Hacer textos cortos, concisos, correctos y directos
• Reforzar el mensaje con herramientas a tu alcance,
ejemplo: Fotos.
• Utilizar estructura lógica que facilite la lectura.
• Ser innovador para captar la atención.
• Recuerda escribir para el lector y no para ti.
• Piensa como y para el lector.

6. • Deben ser motivadores, entretenidos y educativos
• Pueden ser abiertos, gratuitos, adaptables y reutilizables.
• Lo formatos abiertos y estándares mejoran su accesibilidad.
• Siempre están bajo algún tipo de licencia, es recomendable decir y
explicitar.
• Escucha al lector para ello permite que dejen comentarios sobre tu
herramienta.

7. LA ESRUCTURA
El visitante tiene que leer y entender el mensaje en
cuestión de segundos con textos cortos y concisos, ya que
el texto largo puede ser des estimado de inmediato.
No utilizar lenguaje rebuscado, debe ser un lenguaje mas
coloquial, cuida la ortografía. 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.
Repite la idea principal para reforzar el mensaje.

8. EL FONDO
Utiliza colores planos no imágenes para el
fondo, al hacer una actividad didáctica lo
importante es el contenido. Las imágenes
de fondo repetidas o grandes dificultan la
visualización del texto, añadiendo un peso
considerable.

9. LOS COLORES
No pongas en una pantalla una combinación de colores que no llevarías
puesta, como si estuvieras frente a tu armario elige los colores que desees
según tu estilo.
Imita los diseñadores que trabajan con una paleta de colores que han elegido.
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).
De esa paleta de colores procura que unos sean claros y otros oscuros.
utilizando los claros para los fondos y los oscuros para el texto, creando
varios contrastes que obviamente centren su atencion en el texto que es el
que lleva la idea.

10. LA TIPOGRAFIA
1. La tipografía es un elemento muy importante del diseño. Usa fuentes determinadas
si tu actividad se va a ver por un navegador. 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.
2. No hay fuentes más bonitas que otras, depende al contexto en el que se le coloque.
En nuestro caso las fuentes deben ser sencillas y muy legibles. 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.
3. NO USAR COMIC SANS: Sólo hay una cosa que un diseñador odie más que Internet
Explorer 6 y es la fuente Comic Sans.
4. No utilizar un tamaño de fuente menor de 12.

11. LAS IMAGENES
• Gifs animados. Totalmente prohibidos los gifs animados, pues no tienen
finalidad académica.
• 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. Para que no sea lenta la carga, pon las pequeñas no necesitas una
gran resolución para que se vean bien. Tampoco agrandes las fotos pues
quedan pixeladas dificultando la visión y dando un mal aspecto a tu
material.

12. 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.

13. GRAC
IAS P GR
OR S
U AT A CIA
ENCI SP
ÓN
NCIÓN OR
U AT E SU
IAS PO R S A
GRAC TE
NC
IÓN
GRACIAS POR SU ATENCIÓN
GRACIAS POR SU
ATENCIÓN
GRA
CIAS
P OR S
♫♪
U AT
ENC
IÓN IÓ N
NC
A TE
R SU
S PO
A C IA
GR
GRACIAS POR SU ATENCIÓN

14. WEBGRAFIA
• http://www.slideshare.net/AlbaLuzMartinez/pre-contenidos-digitales-2055342
• http://www.edufrikis.com/consejos-graficos-para-el-diseno-de-actividades-didacticas/
• http://www.slideshare.net/lamaga/crear-reutilizar-y-compartir-contenidos-educativos
• http://www.icti.es/blog/detalle/articulo/como-crear-contenidos-web-de-calidad/
• http://www.google.com.co/imgres?num=10&hl=es&biw=1024&bih=677&tbm=isch&tbnid=0OI0G8YTFwk04M:&imgrefurl=ht
,r:13,s:0,i:110
• http://www.google.com.co/imgres?start=136&num=10&hl=es&biw=1024&bih=677&tbm=isch&tbnid=ui71jMCn9sN4xM:&img
1t:429,r:2,s:136,i:142 MODIFICADO POR BIBIANA CHAVARRO
• http://www.google.com.co/imgres?num=10&hl=es&biw=1024&bih=677&tbm=isch&tbnid=-
NhVcIWDhsyv5M:&imgrefurl=http://es.wikipedia.org/wiki/Derecho_de_autor&docid=LgMOvagboRgovM&imgurl=h
ttp://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Copyright.svg/220px-
Copyright.svg.png&w=220&h=220&ei=M1UQUMCpDeba6wH6uoGwAQ&zoom=1&iact=rc&dur=394&sig=105865
844912306760946&sqi=2&page=1&tbnh=150&tbnw=150&start=0&ndsp=13&ved=1t:429,r:0,s:0,i:119&tx=55&ty=
39