DIW

Appearance

Frameworks y componentes ​

Al diseñar una interfaz web no siempre partimos completamente desde cero.

Existen frameworks de frontend y sistemas de diseño que proporcionan estructuras, estilos y componentes preparados para construir interfaces de forma consistente.

Conocerlos antes de realizar el diseño puede ayudarnos a crear una interfaz que posteriormente sea más sencilla de implementar.

Frameworks de frontend ​

Un framework puede proporcionar elementos habituales de una interfaz como:

  • sistemas de layout;
  • navegación;
  • botones;
  • formularios;
  • tablas;
  • tarjetas;
  • alertas;
  • ventanas modales.

Algunos ejemplos son:

También existen sistemas de diseño como Material Design, que definen principios, estilos y componentes para mantener la consistencia de una interfaz.

Layouts ​

Los frameworks suelen proporcionar mecanismos para organizar los elementos de una página.

Entre ellos encontramos:

  • contenedores;
  • filas y columnas;
  • sistemas de grid;
  • espaciados;
  • puntos de ruptura (breakpoints).

Estos sistemas facilitan la creación de interfaces responsive, capaces de adaptar su distribución a diferentes tamaños de pantalla.

Por ejemplo, una vista puede mostrar varias columnas en un ordenador y reorganizarlas verticalmente en un dispositivo móvil.

Componentes ​

Los componentes representan elementos de interfaz que podemos reutilizar en diferentes vistas de la aplicación.

Algunos componentes habituales son:

  • botones;
  • barras de navegación;
  • menús;
  • formularios;
  • tarjetas (cards);
  • tablas;
  • alertas;
  • diálogos o modales;
  • pestañas;
  • paginación.

Un mismo componente puede disponer de diferentes variantes.

Por ejemplo, un framework podría proporcionar:

text
Primary button
Secondary button
Success button
Warning button
Danger button

La utilización de los mismos componentes en diferentes vistas ayuda a conseguir una interfaz coherente y predecible.

Diseñar utilizando un framework ​

Si sabemos qué framework utilizaremos para implementar una aplicación, resulta conveniente consultar su documentación antes de diseñar la interfaz.

Podemos seguir este proceso:

  1. Identificar las necesidades de la interfaz.
  2. Consultar los layouts disponibles en el framework.
  3. Identificar los componentes que necesitaremos.
  4. Analizar las posibilidades y limitaciones de esos componentes.
  5. Utilizarlos como referencia durante el diseño.
  6. Mantener los mismos criterios en todas las vistas.

Por ejemplo, si necesitamos mostrar una colección de productos y el framework proporciona un componente Card, podemos utilizarlo como referencia para diseñar nuestro listado.

TIP

Adaptar el diseño a los componentes que posteriormente utilizaremos puede reducir considerablemente el trabajo de implementación.

Analizar la documentación de un framework ​

Las páginas de documentación de los frameworks son también una buena fuente de inspiración para diseñar interfaces.

Podemos revisar, por ejemplo:

INFO

En esta unidad no vamos a estudiar cómo implementar estos frameworks. Los utilizaremos como referencia para analizar layouts y componentes que podemos incorporar a nuestros diseños.