Recursos
Esta sección reúne recursos útiles para el diseño y desarrollo de servicios digitales del Estado. Aquí encontrarás referencias, herramientas y materiales gráficos que complementan los lineamientos del Sistema de Diseño Digital de Gobierno.
Antes de empezar: licencias y derechos
Toda pieza gráfica, tipográfica o de código que incorpores a un servicio digital del Estado debe tener una licencia que permita su uso público. Ten presente lo siguiente:
- Licencia del recurso. Verifica si es de dominio público, Creative Commons, licencia propia del sitio o si requiere pago. Guarda evidencia de la licencia vigente al momento de la descarga.
- Atribución. Algunas licencias exigen mencionar al autor. Si el recurso lo requiere, incluye la atribución en el sitio o en su documentación.
- Derecho de imagen de personas. Una licencia de descarga no equivale a autorización de la persona fotografiada. Para imágenes de personas identificables usadas en campañas o comunicación oficial, exige el respaldo del consentimiento.
- Datos personales. Cualquier imagen, testimonio o material que contenga datos de personas debe tratarse conforme a la Ley Nº21.719 sobre protección de datos personales.
- Marcas y símbolos patrios. El uso del escudo, la bandera y las marcas institucionales se rige por normativa específica y por los manuales de marca de cada institución.
- Contenido generado con inteligencia artificial. Si tu institución permite su uso, defínelo de forma explícita y evalúa etiquetar las piezas generadas de esta forma.
Imágenes, vectores e ilustraciones
Sitios donde puedes descargar fotografías, ilustraciones y recursos gráficos para usar en productos y servicios digitales.
Fotografía
| Nombre | Descripción | Tipo | Uso recomendado | Origen | Licencia | Acceso | Observaciones |
|---|---|---|---|---|---|---|---|
| Pexels | Banco de fotografías y videos de uso gratuito. | Biblioteca | Imágenes de apoyo en páginas informativas y campañas. | Externo | Licencia Pexels | pexels.com | No permite sugerir respaldo o vinculación de las personas retratadas con el servicio. |
| Unsplash | Colección de fotografía de alta resolución. | Biblioteca | Piezas editoriales y encabezados de secciones. | Externo | Licencia Unsplash | unsplash.com | Predomina estética internacional; revisa la pertinencia cultural. |
| Pixabay | Fotografías, ilustraciones y videos gratuitos. | Biblioteca | Recursos de apoyo cuando se requiere variedad de formatos. | Externo | Licencia Pixabay | pixabay.com | Calidad heterogénea; verifica resolución antes de usar. |
| Openverse | Buscador de contenido con licencia abierta que permite filtrar por tipo de licencia. | Herramienta | Búsqueda cuando se necesita una licencia específica. | Externo | Según cada recurso | openverse.org | Indexa fuentes de terceros: valida la licencia en el sitio de origen. |
| Wikimedia Commons | Repositorio de medios con licencia libre. | Repositorio | Patrimonio, cartografía, imágenes históricas y símbolos institucionales. | Externo | Commons:Licensing | commons.wikimedia.org | La mayoría de archivos exige atribución explicita del autor. |
Fotografía con contexto local
Los bancos internacionales rara vez representan la diversidad del país, los territorios rurales, los pueblos originarios o la atención presencial de servicios públicos. Cuando la imagen deba representar a la ciudadanía chilena, prioriza fuentes locales o producción propia.
| Nombre | Descripción | Tipo | Uso recomendado | Origen | Licencia | Acceso | Observaciones |
|---|---|---|---|---|---|---|---|
| Imágenes de Chile | Banco de imágenes sobre territorio, cultura y producción nacional. | Biblioteca | Piezas que deban representar paisajes, regiones o identidad del país. | Externo | Consultar condiciones en el sitio | imagenesdechile.cl | Requiere registro y solicitud previa para ciertos usos. |
| Memoria Chilena | Archivo digital de documentos, fotografías y material histórico. | Repositorio | Contenidos históricos, patrimoniales y culturales. | Externo | Consultar condiciones en el sitio | memoriachilena.gob.cl | Material histórico: verifica vigencia de derechos por obra. |
| Biblioteca Nacional Digital | Colecciones digitalizadas de la Biblioteca Nacional. | Repositorio | Documentos, mapas y publicaciones de valor patrimonial. | Externo | Consultar condiciones en el sitio | bibliotecanacionaldigital.gob.cl | Cada colección puede tener condiciones de uso distintas. |
| Bancos institucionales | Material fotográfico producido por ministerios y servicios públicos. | Repositorio | Representación de atención presencial, funcionarios y territorio. | Interno | Definida por cada institución | Canales oficiales de cada institución | Primera opción cuando exista: asegura pertinencia y derechos resueltos. |
Ilustración
Ilustraciones vectoriales con licencias abiertas o gratuitas para uso comercial. Útiles para complementar contenidos, explicar procesos o humanizar interfaces sin recurrir a fotografía.
| Nombre | Descripción | Tipo | Uso recomendado | Origen | Licencia | Acceso | Observaciones |
|---|---|---|---|---|---|---|---|
| unDraw | Ilustraciones SVG personalizables en color, de estilo minimalista. | Biblioteca | Estados vacíos, páginas de error y explicación de procesos. | Externo | Licencia unDraw | undraw.co | Permite ajustar el color base al de la marca institucional. |
| Storyset | Ilustraciones animables con estilos variados. | Biblioteca | Piezas de onboarding y comunicación de campañas. | Externo | Licencia Freepik | storyset.com | La versión gratuita exige atribución visible. |
| DrawKit | Colecciones temáticas en diferentes estilos gráficos. | Biblioteca | Ilustración de secciones cuando se requiere un estilo definido. | Externo | Licencia DrawKit | drawkit.com | Conviven colecciones gratuitas y de pago. |
| Humaaans | Figuras humanas modulares para crear escenas personalizadas. | Biblioteca | Representación de personas sin recurrir a fotografía. | Externo | CC BY 4.0 | humaaans.com | Requiere atribución al autor. |
| Open Peeps | Biblioteca de personajes dibujados a mano. | Biblioteca | Ilustración de personas con un registro cercano e informal. | Externo | CC0 | openpeeps.com | Dominio público: no exige atribución. |
| Blush | Generador de ilustraciones combinables desde distintas colecciones. | Herramienta | Composición rápida de escenas a medida. | Externo | Licencia Blush | blush.design | Cada colección tiene su propio autor y condiciones. |
Iconografía
El sistema de diseño provee su propio set de íconos. Úsalo como primera opción para mantener consistencia entre servicios. Si necesitas un ícono que no está disponible, recurre a sets abiertos con estilo compatible.
| Nombre | Descripción | Tipo | Uso recomendado | Origen | Licencia | Acceso | Observaciones |
|---|---|---|---|---|---|---|---|
| Íconos del sistema | Set oficial de iconografía del Framework Kit de Gobierno. | Biblioteca | Primera opción en cualquier servicio del Estado. | Interno | Definida por el sistema | Iconografía | Garantiza consistencia entre servicios y soporte del equipo del sistema. |
| Bootstrap Icons | Set de íconos SVG del ecosistema Bootstrap. | Biblioteca | Complemento natural en productos construidos sobre Bootstrap. | Externo | MIT | icons.getbootstrap.com | Estilo compatible con el framework base del sistema. |
| Material Symbols | Iconografía variable de Google con múltiples pesos y estilos. | Biblioteca | Interfaces que requieren gran cobertura de conceptos. | Externo | Apache 2.0 | fonts.google.com/icons | Aloja los archivos localmente para evitar dependencias de terceros. |
| Lucide | Set de íconos de trazo derivado de Feather Icons. | Biblioteca | Interfaces con estética liviana y uniforme. | Externo | ISC | lucide.dev | Grosor de trazo consistente en todo el set. |
| Phosphor Icons | Familia de íconos con seis pesos disponibles. | Biblioteca | Casos que necesitan variar densidad visual del ícono. | Externo | MIT | phosphoricons.com | Mantén un solo peso por producto para no romper la coherencia. |
| Tabler Icons | Colección amplia de íconos de trazo. | Biblioteca | Paneles de administración e interfaces con muchas acciones. | Externo | MIT | tabler.io/icons | Cobertura extensa de conceptos de datos y sistema. |
| Heroicons | Set de íconos en versiones outline y solid. | Biblioteca | Acciones y navegación en interfaces web. | Externo | MIT | heroicons.com | Set acotado: puede no cubrir conceptos específicos de trámites. |
| The Noun Project | Repositorio colaborativo de iconografía conceptual. | Repositorio | Búsqueda de conceptos que no existen en otros sets. | Externo | Licencias Noun Project | thenounproject.com | La licencia gratuita exige atribución; estilos heterogéneos entre autores. |
Un ícono nunca debe ser el único portador de significado. Acompáñalo siempre de texto visible o de una etiqueta accesible.
Tipografías
La tipografía del sistema está definida en los lineamientos de estilo. Estas fuentes solo aplican para casos donde se autorice una alternativa.
| Nombre | Descripción | Tipo | Uso recomendado | Origen | Licencia | Acceso | Observaciones |
|---|---|---|---|---|---|---|---|
| Google Fonts | Catálogo de tipografías de uso libre, incluidas Roboto y Roboto Slab. | Biblioteca | Obtener las familias oficiales del framework para alojarlas localmente. | Externo | Licencias por familia | fonts.google.com | Descarga los archivos en vez de enlazar el CDN de Google. |
| Fontshare | Catálogo de tipografías gratuitas para uso comercial. | Biblioteca | Alternativa autorizada cuando se requiera una familia distinta. | Externo | ITF Free Font License | fontshare.com | Verifica cobertura de caracteres del español antes de adoptarla. |
| Open Foundry | Selección curada de tipografías de código abierto. | Biblioteca | Exploración tipográfica en piezas de comunicación. | Externo | Open source según cada familia | open-foundry.com | Revisa la licencia individual de cada familia antes de usarla. |
Aloja las fuentes en el propio servidor del servicio en lugar de cargarlas desde terceros. Esto mejora el rendimiento, reduce dependencias externas y evita transferencias de datos de usuarios a servicios de terceros.
Contenido y lenguaje claro
El texto es parte de la interfaz. Estos recursos apoyan la redacción de contenidos comprensibles para toda la ciudadanía.
| Nombre | Descripción | Tipo | Uso recomendado | Origen | Licencia | Acceso | Observaciones |
|---|---|---|---|---|---|---|---|
| Diccionario de la lengua española | Diccionario oficial de la Real Academia Española. | Referencia | Resolver dudas de significado y ortografía. | Externo | Consulta libre en línea | dle.rae.es | Autoridad normativa para la redacción de contenidos oficiales. |
| FundéuRAE | Recomendaciones de uso del español en medios y comunicación. | Referencia | Dudas de redacción, extranjerismos y neologismos. | Externo | Consulta libre en línea | fundeu.es | Publica recomendaciones actualizadas sobre lenguaje inclusivo. |
| GOV.UK Content Design | Guía de diseño de contenidos para servicios públicos digitales. | Estándar | Estructurar contenido de trámites y páginas de servicio. | Externo | Open Government Licence v3.0 | gov.uk/guidance/content-design | Referencia internacional; adapta los ejemplos al contexto chileno. |
| GOV.UK Style Guide | Manual de estilo editorial del gobierno británico. | Estándar | Decisiones de estilo, mayúsculas, números y formatos. | Externo | Open Government Licence v3.0 | gov.uk/guidance/style-guide | Sus convenciones aplican al inglés: no las traslades literalmente. |
| 18F Content Guide | Guía de contenido del equipo digital del gobierno estadounidense. | Estándar | Criterios de tono y claridad en comunicación institucional. | Externo | Dominio público (CC0) | content-guide.18f.gov | Enfoque práctico con ejemplos de antes y después. |
| Plain Language Guidelines | Lineamientos federales de lenguaje claro. | Estándar | Simplificar instrucciones, formularios y mensajes de error. | Externo | Dominio público | plainlanguage.gov/guidelines | Complementa con Lenguaje claro y accesible. |
Complementa estos recursos con los lineamientos de escritura del propio sistema de diseño, que definen tono, tratamiento y terminología para los servicios del Estado.
Diseño y prototipado
Herramientas para crear prototipos, construir interfaces y validar flujos antes de pasar a desarrollo.
| Nombre | Descripción | Tipo | Uso recomendado | Origen | Licencia | Acceso | Observaciones |
|---|---|---|---|---|---|---|---|
| Figma | Herramienta colaborativa de diseño de interfaces, prototipado y sistemas de diseño basada en navegador. | Herramienta | Diseño de pantallas, prototipos y consumo del UI Kit del sistema. | Externo | Planes y condiciones | figma.com | Requiere licencia de pago para funciones de equipo. El UI Kit del sistema se distribuye en este formato. |
| Penpot | Alternativa de código abierto para diseño de interfaces y prototipado. | Herramienta | Instituciones con restricciones de licenciamiento o políticas de software libre. | Externo | MPL 2.0 | penpot.app | Permite instalación en infraestructura propia. |
| Stark | Complemento de accesibilidad que permite verificar contraste, simular daltonismo y validar criterios WCAG. | Herramienta | Validación de accesibilidad durante la etapa de diseño. | Externo | Planes y condiciones | getstark.co | La versión gratuita limita el número de validaciones. |
Los archivos de diseño del sistema, con componentes, estilos y variables, están disponibles en la sección de recursos descargables de este sitio.
Desarrollo
Herramientas y documentación técnica para implementar componentes, gestionar tokens y resolver dudas de desarrollo front-end.
| Nombre | Descripción | Tipo | Uso recomendado | Origen | Licencia | Acceso | Observaciones |
|---|---|---|---|---|---|---|---|
| Storybook | Entorno para documentar y probar componentes de forma aislada. | Herramienta | Documentación técnica y pruebas visuales de componentes propios. | Externo | MIT | storybook.js.org | Requiere mantención continua para no quedar desalineado del código. |
| Style Dictionary | Transforma tokens de diseño a distintos formatos y plataformas. | Herramienta | Distribuir tokens a web, iOS y Android desde una fuente única. | Externo | Apache 2.0 | styledictionary.com | Relevante solo si el producto se distribuye en varias plataformas. |
| Documentación de Bootstrap | Referencia oficial del framework CSS base del sistema. | Referencia | Consultar utilidades de grilla, espaciado y componentes base. | Externo | MIT | getbootstrap.com/docs | El framework se basa en Bootstrap 4: verifica la versión de la documentación. |
| Documentación de Vue | Guía oficial del framework Vue. | Referencia | Implementaciones construidas con Vue o Nuxt. | Externo | MIT | vuejs.org/guide | Base tecnológica de este sitio de documentación. |
| Documentación de React | Guía oficial de la biblioteca React. | Referencia | Implementaciones construidas con React o Next.js. | Externo | MIT | react.dev | El framework no provee componentes React oficiales. |
| MDN Web Docs | Documentación de referencia de estándares web. | Referencia | Consultar HTML, CSS, JavaScript y APIs de accesibilidad. | Externo | CC BY-SA 2.5 | developer.mozilla.org | Fuente recomendada para atributos ARIA y semántica HTML. |
| Can I use | Tablas de compatibilidad de características web por navegador. | Herramienta | Decidir el soporte de una técnica antes de implementarla. | Externo | CC BY 4.0 | caniuse.com | Considera los navegadores efectivamente usados por la ciudadanía. |
Consulta siempre la documentación de componentes de este sistema antes de recurrir a implementaciones propias. Un componente ya resuelto ahorra trabajo y garantiza accesibilidad y consistencia.
Investigación con usuarios
Metodologías, guías y herramientas para comprender las necesidades de las personas usuarias y validar decisiones de diseño.
| Nombre | Descripción | Tipo | Uso recomendado | Origen | Licencia | Acceso | Observaciones |
|---|---|---|---|---|---|---|---|
| GOV.UK Service Manual | Manual de servicio con la sección de investigación usuaria. | Estándar | Planificar investigación a lo largo del ciclo de vida de un servicio. | Externo | Open Government Licence v3.0 | gov.uk/service-manual/user-research | Incluye pautas para investigar con personas con discapacidad. |
| 18F Methods | Catálogo de métodos de diseño e investigación. | Referencia | Elegir una técnica según la etapa y los recursos disponibles. | Externo | Dominio público (CC0) | guides.18f.gov/methods | Métodos descritos de forma breve y aplicable. |
| Nielsen Norman Group | Artículos e investigación aplicada en usabilidad. | Referencia | Fundamentar decisiones con evidencia de usabilidad. | Externo | Contenido propietario | nngroup.com/articles | Consulta permitida; la reproducción de contenidos está restringida. |
| Optimal Workshop | Plataforma para card sorting y tree testing. | Herramienta | Validar arquitectura de información y rótulos de navegación. | Externo | Planes y condiciones | optimalworkshop.com | Aloja datos en servidores externos: evalúalo antes de recolectar información. |
Toda investigación con personas usuarias requiere consentimiento informado, resguardo de los datos recolectados y una finalidad declarada. Aplica los mismos criterios de protección de datos que a cualquier otro tratamiento institucional.
Otros sistemas de diseño de gobierno
Referencias internacionales útiles para fundamentar decisiones, comparar patrones y observar el estado del arte en diseño de servicios públicos digitales.
| Nombre | Descripción | Tipo | Uso recomendado | Origen | Licencia | Acceso | Observaciones |
|---|---|---|---|---|---|---|---|
| GOV.UK Design System | Sistema de diseño del gobierno del Reino Unido. | Referencia | Comparar patrones de trámites, formularios y navegación. | Externo | Open Government Licence v3.0 | design-system.service.gov.uk | Referencia más madura del sector; documenta evidencia de cada patrón. |
| U.S. Web Design System | Sistema de diseño del gobierno federal de Estados Unidos. | Referencia | Criterios de accesibilidad y estructura de componentes. | Externo | Dominio público (CC0) | designsystem.digital.gov | Documenta requisitos legales de accesibilidad aplicables en EE. UU. |
| Canada.ca Design System | Sistema de diseño del gobierno de Canadá. | Referencia | Patrones de contenido y navegación en contextos bilingües. | Externo | Consultar condiciones en el sitio | design.canada.ca | Útil para servicios que deban ofrecer más de un idioma. |
| Designers Italia | Sistema de diseño de la administración pública italiana. | Referencia | Modelos de sitios institucionales y municipales. | Externo | CC BY 4.0 | designers.italia.it | Contexto administrativo comparable al de servicios locales. |
| Design System gov.br | Sistema de diseño del gobierno federal de Brasil. | Referencia | Referencia regional con contexto latinoamericano. | Externo | Consultar condiciones en el sitio | gov.br/ds | Realidad de conectividad y dispositivos cercana a la chilena. |
| Singapore Government Design System | Sistema de diseño del gobierno de Singapur. | Referencia | Patrones de servicios digitales de alta adopción. | Externo | Consultar condiciones en el sitio | designsystem.tech.gov.sg | Enfoque marcadamente orientado a móvil. |
¿Deseas contribuir?
Si conoces una herramienta o referencia que debería estar en esta sección, o detectas un enlace roto, escríbenos.