Imagen: Dryicons, Edición: oJúLearning
El diseño gráfico en eLearning un aspecto muy importante que debemos cuidar a la hora de presentar nuestros contenidos, por ejemplo…
- Elegir una gama de colores atractiva y amable
- Seleccionar una tipografía adecuada
- Decidir entre usar fotografías o imágenes de cliparts
- Mostrar elementos de navegación utilizando iconos y texto
…son aspectos que pueden hacer sentir al alumnado “a gusto” interactuando con el curso. Por supuesto, esto no te asegura el éxito de una acción formativa…, un buen diseño debe ir de la mano de un buen contenido que enganche.
Cuando comencé a trabajar en esto del eLearning me preocupaba por la apariencia de los cursos que desarrollábamos, la apariencia de los Portales Web, Plataformas, los bancos de imágenes (eran horrorosos!) donde buscábamos…, sin saberlo estaba descubriendo un mundo nuevo que desconocía!
El siguiente paso fue familiarizarme con las hojas de estilos… Mi compi Juan Antonio, @caturani, quizá no se acuerde de esto, compartió la página css Zen Garden…, alucinante como cambiando un solo archivo la apariencia de un sitio puede modificar completamente, no creéis?
Después llegaron Rafa Ferrero y Zambrano, con pinceles, tipografías, texturas, Photoshop, Illustrator y todas esas herramientas y recursos con las que poder hacer magia…
Para crear un producto visualmente atractivo:
- Pregúntate… ¿Cómo quiero vestir a mis contenidos? Debes causar sensación, debe existir un flechazo… Preocúpate por el diseño!
- Estructura los elementos de forma usable. Usa css…
- Bebe de todos los recursos que la red pone a tu alcance. Banco de imágenes, plantillas html y .psd, iconos,…
Por favor…, cuida el diseño y el aspecto con el presentas contenido, no tendrás una segunda oportunidad para causar una primera impresión! 😀
Aquí os dejo una recopilación de enlaces con los que espero, podáis hacer muchos trucos. En todos puedes encontrar referencias relacionadas con los tres puntos destacados en el post: inspiración, css y recursos.
¿Os atrevéis? “El hombre nunca sabe de lo que es capaz hasta que lo intenta” Charles Dickens
Recursos, inspiración
- Blue Vertigo. Puedes encontrar enlaces a todo tipo de recursos: banco de imágenes, texturas, clip arts, fuentes, iconos, pinceles…, es impresionante!
- Web Intenta. Recursos y tutoriales de gran calidad
- SmashingMagazine. Completísima web con artículos y recursos sobre css, html, photoshop, illustrator…
- 1stWebDesigner. Coding, freebies, tutorials…
- Diego Mattei. Incansable su labor compartiendo recursos: texturas, calendarios, plantillas, archivos PSD, vectores…
- Freepick. Fotos y vectores gratis
Css
- CSS Blog. Puedes encontrar consejos sobre CSS y mucho más
- CSS 3.0 Maker. Generador de código CSS3
- Introducción a CSS
Editor de imágenes online
Tipografías
Cuidáis el diseño de vuestro contenido? Y…, conocéis más webs con las que completar la lista? 🙂
Excelente post Edu…y claro que me acuerdo de cuando compartí contigo la web CSS Zen Garden 🙂 A partir de ahí aprendimos mucho de las hojas de estilo, que recuerdos!
Gracias Juan Antonio! La primera vez que vi como funcionaba la página no me enteré de nada!! 😀 Buena etapa pasamos…
Un abrazo!
Genial Edu, me encanta!!!
Gracias Sacra por pasarte! 😉
Gran post Edu y muy neceseario para que todos los que nos dedicamos al eLearning tomemos conciencia de lo importante que es que los contenidos que desarrollamos sean «presentables» en cuanto al diseño. Una hoja de estilo acorde a la identidad a la que va destinada, homgeneidad en los estilos, imagenes, iconos o cliparts…
Cuando el destinatario abre por primera vez el contendio debe tener la misma buena sensación que tenemos cuando vamos a una casa limpia, ordenada y con una buena decoración.
Las competencias técnicas deben abarcar un amplio abanico entre las que se encuentran las relativas al diseño, cruciales en que esa primera sensación sea, como dices, «un flechazo».;-)
Saludos!