Recomendaciones para el diseño de insignias digitales dentro del sistema INSIGNIA UNED

Las insignias digitales conforman un elemento básico de la gamificación, las cuales se recomiendan incorporar dentro de entornos o plataformas educativas que comprendan ya sea: un curso virtual o presencial, la participación en un taller o webinario o una certificación. Esto cada vez que se logre completar un nivel determinado o se premie el reconocimiento de avance o desbloqueo de alguna habilidad, representándolo de forma virtual por una imagen o icono, el cual simbolice el progreso o logro obtenido.

A la hora de elaborar el diseño de una insignia o una familia de estas, se recomienda seguir al menos una guía de estilo y un estándar de diseño gráfico, bajo una estética simple y limpia, sin sobrecarga de textos o elementos gráficos que provoquen confusión en el mensaje. A continuación, se detallan algunas sugerencias técnicas y de diseño:

• Formato de imagen: Para crear y cargar una insignia en el sistema INSIGNIA UNED se debe utilizar el formato SVG (Scalable Vector Graphics), el cual además de ser más ligero en peso que un archivo similar en PNG, es un estándar que permite trabajar con gráficos vectoriales escalables y además aprovecha la propiedad de transparencia, aspecto del cual se recomienda hacer uso a la hora de diseñar para así evitar los fondos de color sólido, cuadro blanco de relleno o imágenes (mapa de bits). El sistema INSIGNIA UNED no permite utilizar los formatos PNG, JPG o GIF para la creación de insignias. El formato PNG sólo es permitido para crear y cargar el logotipo de la entidad Emisora de la insignia.
  
  La propiedad vectorial escalable del formato SVG favorece a que no exista dependencia de la resolución de la imagen, al no trabajar con pixeles, permitiendo así redimensionar a gusto el diseño de una insignia, sin perder calidad, como sí sucedería con un archivo PNG, y al ser un estándar Web abierto basado en texto, está diseñado para trabajar con otros estándares web tales como CSS (Cascading Style Sheets) o HTML (HyperText Markup Language), permitiendo incluso implementar animaciones. En el caso de utilizar vectores para el diseño de insignias, se recomienda convertir en “contornos” los textos que se utilicen, esto para evitar depender de fuentes tipográficas que quizá no estén instaladas en el dispositivo donde se visualice la insignia.
  
  
• Peso y tamaño: Este criterio está bastante ligado al punto anterior, en donde por lo general se obtendrá un peso más eficiente en términos de Kilobytes o Megabytes al utilizar el formato SVG, además de que la resolución en pixeles de la imagen no será un tema del cual estar pendiente si se implementa este formato, en cuanto a su diseño. El único requisito para cargar la insignia al sistema, en relación a este tema, es que sea una imagen cuadrada, es decir, mismo alto y ancho.
  
  Como recomendación es preferible diseñar insignias con un peso bastante ligero, las cuales no sobrepasen los 100KB aproximadamente, aunque un peso eficiente sería por debajo de los 50KB, pensando en temas de usabilidad y principalmente en la accesibilidad de sistemas WEB o aplicaciones que dependan de conexiones de internet para desplegar las insignias.
  
  
  
  
• Detalle descriptivo y uso de texto: El diseño de una insignia no tiene porqué seguir las mismas reglas o guías de estilo que un identificador gráfico o un logotipo, incluso se puede ser más flexible a la hora de pensar en posibles reducciones o variedad de colores utilizados, aun así, es preferible y recomendado no saturar el diseño final con elementos que sobrecarguen tanto el apartado gráfico, como el mensaje que se desea comunicar con la insignia, tal y como sucede con la utilización excesiva de texto.
  
  En general es recomendable que el diseño de una insignia o un conjunto de ellas cumplan una guía de estilo y un estándar gráfico, bajo una estética simple y limpia. No es necesario ni recomendable añadir textos amplios que detallen toda la temática, evento o motivo de premiación de la insignia, ya que estos factores deberían estar implícitos dentro del diseño en sí y bastaría con un texto breve, conciso y sencillo en caso de ser requerido, con una fuente tipográfica legible y acorde a la propuesta visual.
  
  Los criterios de premiación, descripción y motivos de la insignia son atributos que se añaden a nivel interno, en forma de texto dentro del archivo de la imagen como metadatos, basándose en el estándar Open Badges.
  

---

Lo ideal es preservar la línea de diseño y transmisión clara del mensaje de la insignia y así disminuir o evitar la sobrecarga excesiva de elementos gráficos y/o textos innecesarios y confusos, con descripciones extensas. A continuación, un contraejemplo y un ejemplo recomendable de diseño, aplicando los criterios y sugerencias mencionadas anteriormente. La temática para este ejemplo es: insignia que reconoce la participación y el nivel obtenido en un taller de emprendimiento sobre diseño, impresión y modelado 3D.

---

---

Recursos:

Información sobre los pasos para crear una insignia dentro del sistema INSIGNIA UNED:

Pasos para crear insignias en el sistema INSIGNIA-UNED

---

Referencias:

Badilla-Barrientos R, Herrera-Sánchez D. (2022). Recomendaciones para el diseño de insignias. Diseño de Insignias Digitales para Entornos Educativos Gamificados (pp. 17-21). Publicación independiente en Amazon.com.

Autor

Cite este texto:

(2023) Recomendaciones para el diseño de insignias digitales dentro del sistema INSIGNIA UNED. Sonar Multimedia [blog]. https://multimedia.uned.ac.cr/pem/wp/sonar-multimedia/?p=493

COPIAR CITA