¿Qué es DINTEL?

DINTEL es el Sistema de Diseño creado para la Oficina de Diseño de la Secretaría General de Administración Digital (SGAD) basado en un sistema modular, flexible, escalable, accesible e inclusivo.

DINTEL significa Diseño Normalizado para Tramitación Electrónica. Creamos un interfaz con una línea gráfica común para los servicios electrónicos y portales informativos de la AGE.

Un sistema con unos fundamentos, elementos de interfaz, componentes y patrones de diseño que guiará a los diseñadores y desarrolladores en la construcción y/o adaptación de productos y servicios digitales de forma fácil y rápida.

Un nuevo modelo que facilita y refuerza la habilidades digitales de la cuidadanía.

En la Oficina de Diseño desarrolladores y diseñadores apoyan y dan soporte a las necesidades de los servicios electrónicos que integran DINTEL.

Infografía del flujo de trabajo en la oficina de diseño DINTEL

Principios

La ciudadanía es el centro de cualquier trámite con las Administración. Trabajamos con unos principios que compartimos diseñadores y desarrolladores.

Diseñamos para y con todos

Las interfaces creadas con el Sistema de Diseño · DINTEL deben ser comprensibles, accesibles e inclusivas.

Qué aportamos

Una biblioteca de elementos reutilizables guiados por una documentación clara.

Diseñamos a largo plazo

El sistema de diseño tiene que ser flexible y mantenerse vivo a largo plazo. Un sistema de diseño no es estático, sino dinámico. Evoluciona con el producto y su diseño.

Trabajamos unidos

Para los equipos de trabajo de productos digitales es imperativo pensar en un ecosistema digital global, coordinarse y apoyarse unos en otros.

Inspiremos confianza

Los ciudadanos deben navegar con seguridad por los sitios y productos que ofrecemos.

Recopilamos y utilizamos datos

Nuestros proyectos deben aprovechar los datos para aprender de nuestros usuarios y mejorar su experiencia.

Componentes

Aquí encontrarás nuestra colección de elementos reutilizables a todos los niveles para acelerar tu trabajo y dar a tus diseños la mayor coherencia posible.

Los componentes cubren una variedad de necesidades de interfaz, que incluyen:

Visualización: para la colocación y organización de contenidos, utilizando componentes como tarjetas, listas y páginas.

Navegación: permite a los usuarios desplazarse por el producto utilizando componentes como migas de pan, pasos y pestañas de navegación.

Acciones: para permitir a los usuarios realizar tareas mediante componentes como el botón de acción.

Entradas: Permitir a los usuarios introducir información y mensajes clave a través de componentes como notificaciones, cuadros modales o de diálogo.

Comunicación: avisar a los usuarios sobre información y mensajes clave mediante componentes como notificaciones, modales o cuadros de diálogo.

Cada uno de nuestros componentes están acompañados de unas directrices de uso que ayudan a entender su significado, su implementación y sus buenos usos.

Galería Componentes

Miniatura de componentes DINTEL en Figma

Tematización

DINTEL facilita la personalización de sus fundamentos y tokens de diseño para generar nuevos temas visuales en aquellos casos dónde una Marca necesite dar a su web entidad propia en el color. Para controlar la tematización y la coherencia del sistema, solo se podrá tematizar toda la paleta de colores primarios o con la etiqueta "interactive" en el nombre del token o en el estilo de Figma.

Origen

La primera versión de DINTEL nace en abril de 2023, y se expone regularmente a revisiones y actualizaciones para una mejora constante del sistema.

Actualizaciones