DIW

Appearance

Estructura de una interfaz web ​

Las aplicaciones web suelen utilizar estructuras y patrones similares. Esto permite que los usuarios puedan reconocer fácilmente cómo utilizar aplicaciones que nunca han utilizado anteriormente.

Layout ​

El layout determina la distribución general de los elementos de la interfaz.

Entre sus zonas más habituales encontramos:

Cabecera ​

La cabecera (header) se encuentra normalmente en la parte superior.

Puede contener:

  • logotipo;
  • nombre de la aplicación;
  • buscador;
  • acceso al perfil del usuario;
  • acciones principales.

Permite desplazarse entre las diferentes partes de la aplicación.

Puede implementarse mediante:

  • menú superior;
  • menú lateral;
  • pestañas;
  • enlaces;
  • menú desplegable.

Contenido principal ​

Es la zona donde se presenta el contenido correspondiente a la vista actual.

Normalmente constituye el área principal del layout.

Pie de página ​

El pie de página (footer) suele incluir información secundaria:

  • información legal;
  • copyright;
  • contacto;
  • enlaces adicionales.

No todas las aplicaciones necesitan utilizar todas estas zonas.

Vistas habituales ​

Aunque cada aplicación tiene necesidades diferentes, existen vistas que aparecen frecuentemente.

Login y registro ​

Permiten autenticar o registrar usuarios.

Suelen contener formularios sencillos con elementos como:

  • correo electrónico;
  • contraseña;
  • confirmación;
  • botón de acceso o registro.

Dashboard ​

Es una vista resumen que permite conocer rápidamente el estado de la aplicación.

Puede contener:

  • indicadores;
  • estadísticas;
  • gráficos;
  • últimas operaciones;
  • accesos rápidos.

Listado de objetos ​

Permite visualizar una colección de elementos.

Por ejemplo:

  • productos;
  • clientes;
  • vehículos;
  • facturas;
  • películas.

Los elementos pueden mostrarse mediante tablas, listas, tarjetas u otros componentes.

Detalle de un objeto ​

Presenta la información correspondiente a un elemento concreto.

Por ejemplo, el detalle de un producto podría mostrar:

  • nombre;
  • descripción;
  • imagen;
  • precio;
  • disponibilidad;
  • acciones disponibles.

Formularios ​

Permiten crear o modificar información mediante controles como campos de texto, selectores, botones o casillas.

Página 404 ​

Se muestra cuando el usuario intenta acceder a un recurso o dirección que no existe.

Debe informar claramente del problema y facilitar que el usuario pueda continuar navegando.

Componentes ​

Las vistas se construyen utilizando componentes comunes:

  • botones;
  • enlaces;
  • menús;
  • formularios;
  • listas;
  • tablas;
  • tarjetas;
  • alertas;
  • modales.

Reutilizar los mismos componentes contribuye a mantener una interfaz coherente y predecible.

Más sobre componentes...

Descripción más detallada de los componentes en la sección de Recursos:

Antes de diseñar las vistas resulta útil determinar cómo se relacionan entre sí.

Un mapa de navegación representa las principales vistas de una aplicación y las posibilidades de navegación entre ellas.

Por ejemplo:

text
Login
  ↓
Dashboard
  ├── Productos
  │     └── Detalle producto
  ├── Clientes
  │     └── Detalle cliente
  └── Perfil