Diseñadores

Si eres diseñador o diseñadora digital y vas a trabajar en el diseño de una plataforma digital de un servicio público, esta página reúne todo lo que necesitas para partir. El objetivo es que no diseñes desde cero: el sistema ya define los fundamentos visuales, los componentes y los patrones que dan coherencia a los servicios del Estado, para que puedas concentrarte en resolver el problema específico de las personas usuarias.

Usar el sistema no limita tu trabajo. Te entrega una base común, validada en accesibilidad y usabilidad, sobre la cual tomar decisiones de diseño con criterio y justificarlas ante tu equipo.

1. Entiende el sistema antes de diseñar

Antes de abrir una herramienta de diseño, conoce el propósito del sistema, cómo se toman las decisiones y cómo evoluciona.

• Acerca del sistema: qué es, para qué sirve y cómo se aplica en proyectos de gobierno.
• Gobernanza: quién decide, cómo se proponen cambios y cómo se incorporan nuevos componentes.
• Roadmap: versiones publicadas y próximos lanzamientos.
• Glosario: lenguaje común para conversar con desarrollo, contenido y contraparte institucional.

2. Parte por los fundamentos

Los fundamentos son la base visual del sistema. Definirlos correctamente evita inconsistencias que luego son costosas de corregir.

• Color: paletas de marca, colores semánticos, neutros y opacidades.
• Tipografía: escala tipográfica, pesos y jerarquía de texto.
• Espaciado: ritmo vertical y horizontal para layouts consistentes.

Qué revisar como diseñador: usa los tokens definidos en vez de valores arbitrarios. Si necesitas un valor que no existe, es una señal de que hay que discutirlo con el equipo del sistema, no de inventarlo.

3. Usa los componentes existentes

El catálogo de componentes reúne las piezas de interfaz ya diseñadas, documentadas y validadas en accesibilidad.

Componentes de uso frecuente:

• Formularios: text field, text area, select, checkbox, radio button, switch, file input.
• Acción y navegación: button, breadcrumb, tabs, pagination, stepper.
• Retroalimentación: alerts, snackbar, progress, modal dialog.
• Estructura: header, footer, cards, table.

Regla práctica: si existe un componente equivalente, úsalo. Diseñar uno propio duplica el esfuerzo del equipo de desarrollo y rompe la consistencia entre servicios.

4. Aplica los patrones de flujo

Los patrones resuelven flujos completos que se repiten en los servicios públicos, combinando varios componentes.

• Clave Única: autenticación de personas para acceder a trámites y servicios del Estado.

5. Diseña el contenido, no solo la interfaz

En los servicios públicos, el texto es parte del diseño. Un formulario bien diagramado con instrucciones confusas sigue siendo un mal servicio.

• Contenidos digitales: lineamientos editoriales del sistema.
• Lenguaje claro y accesible: cómo escribir para que todas las personas comprendan.
• Voz y tono: cómo se comunica el Estado en canales digitales.

6. Verifica la accesibilidad

La accesibilidad es un requisito, no una mejora opcional. Gran parte de las barreras se originan en decisiones de diseño.

• Accesibilidad y asistencia digital: criterios generales.
• Mejores prácticas WCAG: guías oficiales y las pautas WCAG 2.2.
• Herramientas de validación: herramientas para verificar contraste, estructura y navegación.

Checklist mínimo de diseño:

• Contraste de texto y elementos interactivos conforme a WCAG 2.2 nivel AA.
• Tamaños de área táctil suficientes para uso en móvil.
• Estados de foco visibles en todos los elementos interactivos.
• Información nunca comunicada solo por color.
• Jerarquía de encabezados coherente con la estructura visual.
• Etiquetas de formulario visibles y asociadas a cada campo.

7. Trabaja con metodología

• Metodología: investigación usuaria, prototipado, testeo y gestión del cambio.
• Diseño de servicios digitales: recursos oficiales chilenos.
• Investigación usuaria: cómo comprender a las personas antes de diseñar.
• Prototipado y testeo: validar antes de construir.

8. Mide y mejora

El diseño no termina en la entrega. Los datos de uso permiten priorizar mejoras con evidencia.

• Analítica web: qué medir y con qué herramientas.
• Instrumentos de evaluación: criterios y checklists para revisar servicios.
• Recursos: imágenes, vectores e ilustraciones de uso permitido.

Cuando necesitas algo que no existe

Si el sistema no cubre una necesidad de tu proyecto:

1. Verifica que realmente no exista un componente o patrón equivalente.
2. Documenta el caso de uso y por qué las alternativas actuales no funcionan.
3. Propón la mejora a través de los canales de Soporte.
4. Mientras se evalúa, construye la solución respetando los fundamentos y criterios de accesibilidad del sistema.

Las propuestas de la comunidad son parte del proceso de evolución descrito en Gobernanza.

Conecta con otros diseñadores

Comparte tus experiencias, aprendizajes y dudas con equipos de otras instituciones en la sección de Comunidad.