Patrones
Llamamos patrón a un grupo de elementos de la interfaz de usuario que resuelven situaciones comunes a la hora de pedir o mostrar información a la persona usuaria. Aquí se encuentra una recopilación de patrones más típicos en aplicaciones y sitios web.
Esta sección muestra los patrones más típicos. Algunos son páginas construidas a partir de una plantilla determinada. Otros son sólo trozos reutilizables de código o includes que se pueden usar para componer partes de una página. Su código te permitirá ahorrar mucho trabajo de maquetación ya que tiene los elementos más comunes a todas las aplicaciones y sitios web realizados con DESY.
Páginas
Páginas de acceso
Esto son ejemplos de páginas previas a mostrar la pantalla principal. Muchas de ellas son ejemplos de cómo MFE (Módulo de firma electrónica e identificación) muestra las páginas de identificación a la aplicación.
- Acceso como MFE
- Acceso como MFE sólo Cl@ve
- Acceso como MFE con más opciones y registro
- Acceso cargando
- Acceso selección de organismo
Páginas de inicio
Esto son ejemplos de páginas de inicio de la aplicación, tras haberse identificado.
- Inicio con cards que enlazan a secciones
- Inicio con items filtrables
- Inicio con tabla avanzada con acciones en lote
- Inicio de portal
- Sección principal de portal (Próximamente)
Páginas de solicitar más información por pasos
Estas páginas muestran una secuencia de formularios para solicitar información adicional tras el acceso. Componen una secuencia de pasos, que es otro patrón típico en las aplicaciones.
Páginas varias
Esto son ejemplos de varios tipos de páginas de una aplicación.
- Página no encontrada. Error 404 (Próximamente)
- Mapa web
- Accesibilidad
- Manual con preguntas frecuentes
- Tabla de contenidos
- Tabla de contenidos y barra lateral
- Perfil de usuario
Patrones
Encabezados de página
Suelen usarse en los inicios de páginas y por ello contienen el título de la página y acciones, buscadro u otros elementos de uso principales.
- Titulo con acciones de página
- Título con acciones y buscador de página
- Título con pasos y botón de volver atrás
Formularios
Patrones de uso común en formularios donde se solicita información a la persona usaria.
- Datos de identidad: nombre y NIF
- Datos de contacto: correo y teléfono
- Dirección postal
- Acepto política
Acciones de página
Patrones de acciones típicas en encabezados o pies de páginas, o al inicio o al final de formularios.
- Botón volver
- Primaria, secundaria y terciarias
- Siguiente paso y restaurar
- Buscar en el sitio
- Mostrar filtros y ordenación
- Acciones de tabla
Listados
Formas de mostrar varios elementos como cards que enlazan a secciones de la aplicación o del sitio web.
Información
Bloques de información recurrente que puede usarse en las aplicaciones o sitios web.