Evento: 3er Congreso Internacional de E-learning: Chamilo Conference Perú 2017 Web evento: https://con.chamilo.org/programacion/ Fecha presentación: Jueves 07 de Diciembre 2017 Lugar: San Isidro, Lima - Perú Contacto: info@chamilo.org Expositor: Alex Aragón Tema: ¿Cómo personalizar el home del un curso virtual? Tips de diseño y estilo.

1. Como personalizar un
campus virtual Chamilo
Alex Aragón Calixto
BeezNest Latino
info@beeznest.com

2. Todo empieza con la experiencia de
usuario
Piensa en tu usuario (alumno)

3. Evita lo siguiente:
●
Diseñar sólo para ti
●
Diseñar sin un usuario en
mente
●
Diseñar buscando gustarte
a todo mundo

4. UI vs UX
UI
●
Es evidente
●
Depende sólo del
diseñador
●
Representa la
primera impresión
UX
●
No es evidente
●
Depende del usuario
●
Es el factor más
importante para el
usuario

5. ¿Como hacerlo?

6. Entendiendo los elementos

7. Los cincos planos
Estrategia
Alcance
Estructura
Esqueleto
Superficie
E-LEARNING

8. Los cincos planos
Estrategia
Alcance
Estructura
Esqueleto
Superficie
E-LEARNING
FUNCIONALIDAD INFORMACIÓN

9. La estrategia

10. Estrategia en el curso
Estrategia
E-LEARNING
FUNCIONALIDAD INFORMACIÓN
●
Necesidades del usuario
●
Objetivos del producto
●
Generación de ideas

11. Estrategia en el curso
●
Definir los objetivos principales
del producto de enseñanza.
●
Asocia no solo aspectos visuales
sino también conceptos
pedagogos y emocionales.
●
Contribuye a aumentar la
credibilidad del curso y la
confianza a los futuros
aprendices del mismo
●
¿Qué esperan de nosotros?
¿Cómo lo diferenciamos de otros
cursos similares?
Busca un equilibrio

12. El alcance

13. Alcance en el curso
Alcance
E-LEARNING
FUNCIONALIDAD INFORMACIÓN
●
Especificaciones
funcionales
●
Requerimientos de
contenido

14. El alcance del curso
●
Define el conjunto de
características del curso
●
¿Qué estamos creando?
●
Define la información
necesaria para aportar la
sus estudiantes
●
¿Imágenes, audio, video,
datos dinámicos en
tiempo real?… etc...

15. La estructura

16. Estructura en el curso
Estructura
E-LEARNING
FUNCIONALIDAD INFORMACIÓN
●
Diseño de interacción
●
Arquitectura de
información

17. Estructura en el curso
●
Diseño de interacción:
Define una experiencia
estructura por patrones y
secuencias que mostrarán las
opciones apropiadas a los
usuarios durante la
enseñanza.
●
Arquitectura de información:
Define el volumen del
contenido, junto con cómo está
ordenado y organizado a cada
pantalla del contenido.

18. El Esqueleto

19. Esqueleto en el curso
Esqueleto
E-LEARNING
FUNCIONALIDAD INFORMACIÓN
●
Diseño de interfaz
●
Diseño de navegación

20. Esqueleto del curso
●
Diseño de navegación:
Proporciona en pantalla los
elementos que permitirán al
usuario moverse a través del
contenido de manera
intuitiva.
●
Diseño de interfaz: Define
cual es la mejor ordenación y
presentación visual de los
elementos para que los
estudiantes interactúen con
ellos.

21. La superficie

22. Superficie en el curso
Superficie
E-LEARNING
FUNCIONALIDAD INFORMACIÓN
●
Usabilidad
●
Diseño visual

23. La superficie del curso
●
Apoyar y reforzar el
significado de los
contenidos presentados.
●
Facilitar al usuario la
compresión de la
información.
●
Reducir la carga
cognitiva y permitir el
reconocimiento y el
aprendizaje intuitivo.

24. El proceso

25. Opciones que te ofrece Chamilo

26. Convertir y adaptar tu diseño clásico a tu
estrategia UI/UX

30. Donde encontrar los recursos
●
Recursos para el desarrollo de plantillas
nuevas.
– app/resources/public/css/themes
– app/config/configuration.php
– main/template/
– app/cache/twig

31. Tipografía web e iconografía

32. Paleta cromática

33. Hojas de estilos y tpls

34. Páginas personalizadas (custom pages)
Login personalizado para su campus virtual de acuerdo a los colores de su marca.

35. Diseño de iconos personalizados

36. Diseño adaptativo a dispositivos
●
El diseño web responsive o
adaptativo es una técnica de
diseño web que busca la
correcta visualización de una
misma página en distintos
dispositivos.
●
Desde ordenadores de
escritorio a tablets y móviles.
●
Por eso surge la necesidad
de adaptar su campus virtual
para asegurarle el mayor
alcance.

37. Contenido educativo adaptado a dispositivos

38. Diseño basados en objetivos
●
¿Cuales son los objetivos de su plataforma?
– ¿Alcanzar un público amplio?
– ¿Generar resultados en términos de aprendizaje?
– ¿Generar expectativas?
– ¿Lanzar nuevos retos?
●
¿La presentación de su plataforma es coherente
con sus objetivos?
●
Tenemos una diseño para cada proyecto

39. Muchas Gracias
Alex Aragón Calixto
alex.aragon@beeznest.com