Desarrollo de

Contenidos Digitales
Cómo realizar piezas básicas para contenidos
virtuales y no morir en el intento

ERIKA TORRES
Diseñadora Gráfica
Experiencia HTML5
DISEÑO INSTRUCCIONAL
Cómo empezar

● Conocimientos amplios respecto

al usuario y al tema.

● Utilizar recursos como guiones,

storyboards y lista de elementos
(botones, fondos, audios, videos, textos,
personajes, etc.) de lo que se va a
presentar.
DISEÑO INSTRUCCIONAL
Guión técnico

El guión técnico es la transcripción en secuencias y

planos de las escenas o momentos definidos en el
guión literario. En él se incorporan la planificación e
indicaciones técnicas precisas para el contenido que
se desea presentar.
DISEÑO INSTRUCCIONAL
Storyboard

Storyboard o guión gráfico es un conjunto de

ilustraciones mostradas en secuencia con el
objetivo de servir de guía para entender una
historia, previsualizar una animación o seguir la
estructura de un contenido antes de realizarse.
DISEÑO INSTRUCCIONAL
Storyboard para interactivos
A continuación compartimos ejemplos de estos documentos elaborados por el equipo creativo del Centro de Innovación
Educativa de la Universidad Nacional de Colombia:

Área de contenido

Instrucciones técnicas para el desarrollo

Narraciones para locutar (audios)

DISEÑO INSTRUCCIONAL
Storyboard para animaciones

Área de contenido

Instrucciones técnicas para el desarrollo

Narraciones y diálogos
para locutar (audios)
LINEAMIENTOS GRÁFICOS
Plataformas y recursos
A continuación presentamos varios ejemplos de
estos documentos elaborados por el equipo
creativo del Centro de Innovación Educativa de la
Universidad Nacional de Colombia.
LINEAMIENTOS GRÁFICOS
Principios a tener en cuenta para el diseño visual:

● Usar fondos, elementos y colores que no interfieran con la nitidez de la

información presentada.

● Mantener una línea gráfica similar que aporte uniformidad a todo el diseño.

● Utilizar elementos gráficos que sean concisos y sencillos de tal manera que
funcionen como complemento y no distracción.

● Diseñar elementos que permitan la inclusión y fácil accesibilidad a los

contenidos para todos los usuarios sin distinción alguna (textos legibles, lenguas de
señas, audios, etc).
LINEAMIENTOS GRÁFICOS
Plataformas y recursos

Proyecto:
Escuelas Innovadoras
Curso Competencias Blandas
LINEAMIENTOS GRÁFICOS
Plataformas y recursos

Proyecto:
StarTIC
Interactivo
LINEAMIENTOS GRÁFICOS
Tips para la creación de
elementos gráficos

- Escoger una paleta de color.

Tener en cuenta el contraste, la
saturación y las escalas del color,
permiten generar combinaciones
armónicas, acoplando temperaturas,
valores y/o tonos entre sí.

* Herramienta Kuler
LINEAMIENTOS GRÁFICOS
Tips para la creación de elementos
gráficos

- Graficar personajes.
Es importante que los personajes para
animación se realicen teniendo en cuenta
las sgtes. características:
desglosar los elementos a animar, crear lip
sync para sincronía de labios, dibujar
articulaciones amplias en cuerpo, trabajar
elementos en capas distintas, etc.
LINEAMIENTOS GRÁFICOS
Tips para la creación de elementos
gráficos

- Graficar elementos.
A la hora de crear los gráficos para animación
e interactividad se debe:
crear elementos en modo activo e inactivo,
diseñar resaltes y brillos que indiquen al
usuario el uso de ese elemento, utilizar íconos
para hacer más simple y representativo el
contenido, etc.
LINEAMIENTOS GRÁFICOS
Tips para la creación de elementos
gráficos

- Crear una interfaz amigable.

El objetivo principal de la interfaz es que
pueda comunicar de manera eficaz, clara y
accesible la información al usuario. Para
cumplir con esta meta se deben crear
instrucciones claras y contenidos concisos,
también es fundamental que la distribución de
los elementos cumpla con los estándares ya
impuestos y reconocidos por todos. La clave
es innovar sin re-inventar.
SOFTWARE LIBRE (online)
Software libre (Open source):

- ***Gimp (edición fotografica) https://www.gimp.org/

- ***Pencil2D (dibujo y animación 2D) http://www.pencil2d.org/

- ***Inkspace (ilustración) https://inkscape.org/es/

- ***Blender (animación 3D) https://www.blender.org/

BIBLIOGRAFÍA Y CONSULTAS
- Lineamientos para la producción pedagógicos, comunicativos de cursos mediados por TIC Educación en la y
tecnológicos a Distancia.
http://www.unitecnologica.edu.co/educacionadistancia/sites/default/files/Lineamientos%20para%20dise%C3%B1o%20y%20desarrollo%20d
e%20cursos%20virtuales%20%20-%20v2015.pdf

- Guía para crear contenidos digitales accesibles. http://www.esvial.org/wp-content/files/ESVIAL.LibroDigital_es_2015.pdf

- 10 Herramientas de paletas de color para diseñadores. http://conceptinbox.com/es/blog/herramientas-paletas-de-color-para-

disenadores/

- Kuler - Adobe Color CC (herramienta online para generar paletas de color) https://color.adobe.com/

- Consejos para crear una paleta de colores efectiva para tus diseños. http://blog.aulaformativa.com/consejos-crear-una-paleta-
de-colores-efectiva-disenos/
 El Centro de Innovación Educativa de la
Universidad Nacional de Colombia y todo

GRACIAS POR
su equipo creativo quiere agradecerle su
participación en este hangout,
esperamos que esta información sea de
gran utilidad en la creación de sus futuros
contenidos digitales.
ACOMPAÑARNOS
¡Hasta la próxima!