Introducción

Una guía de estilo es un manual que permite definir la identidad que va a tener la aplicación. En ella se declaran, entre otros, los colores, la tipografía, el icono o la estructura de los que va a disponer dicha aplicación.

Elementos

A continuación, se muestran todos los elementos que conforman la guía de estilo.

Logo de la aplicación

El logo escogido para la aplicación es el siguiente:

Tipografía

La tipografía a su vez se dividirá en dos secciones.

• Títulos: Para estos elementos se implementa "Roboto, sans-serif", con un tamaño de 2rem.

  

• Párrafos, menú y enlaces: Para el resto de elementos de la aplicación, se implementa "Roboto Condensed, sans-serif", con un tamaño de 12pt.

  

Colores

A continuación, se muestra la paleta de colores empleada a lo largo de toda la página web.

• El color blanco (#ffffff) se encuentra en la parte central de la aplicación, englobando el contenido de esta.

  

• El color light (#e5ebf2), empleado en la parte de los títulos, consigue darle énfasis a la ubicación de la página en la que se encuentra el usuario.

  

• El color dark (#09192b), se encuentra en la parte superior de la página, es decir, en la cabecera junto con el panel de notificaciones y los ajustes del usuario, en el pie de la página, y también en la parte lateral de la página, haciendo referencia al menú con las diferentes utilidades de la aplicación.

  

• El color primary(#225082), se encuentra en las cabeceras de las tablas y en determinados botones distribuidos por toda la página web.

  

• El color secondary (#ECB365), es utilizado, por ejemplo, en la gestión de FCT, englobando a los alumnos.

  

Iconos

Para la aplicación, se han implementado dos diferentes tipos de iconos.

• Iconos Fluency System Regular: Estos pertenecen a la web icons8. Tienen la posibilidad de descargarse en formato SVG. Algunos iconos utilizados con este paquete son los siguientes:

  

  En el caso del primer icono, se utiliza para funcionalidades relacionadas con la edición de datos. El segundo icono hace referencia a funcionalidades relacionadas con eliminar y/o borrar.

• Iconos Bootstrap: Estos pertenecen a la web Bootstrap Icons. Estos tienen la posibilidad de implementarse de varias maneras diferentes:

  • Descargando el formato SVG.
  • Implementando la clase del icono con Icon Font.
  • Copiando el SVG directamente en el código de la aplicación.

  Algunos iconos utilizados con este paquete se muestran a continuación:

  

  En cuanto a los 3 primeros iconos, se encargan de la gestión de la hoja de seguimiento por parte del alumno y los tutores tanto del centro de estudios como de la empresa. En el caso del último icono, nos permite utilizar la funcionalidad de registrar nuevas empresas en nuestra aplicación.

Estructura general

La estructura definida para nuestra aplicación se basa en:

• En la parte superior disponemos de un header, donde encontramos el icono de la aplicación a la izquierda, y las notificaciones y el perfil del usuario a la derecha.
• Un menú lateral donde el usuario encontrará todas las opciones disponibles acorde a su perfil.
• En la parte superior central se encuentra el título, que ubicará al usuario por cada página en la que navegue.
• En la parte central se ubica el contenido principal de la página, es decir, las acciones y funciones que se llevan a cabo dentro de cada sección de la página web.
• Un pie de página que dispone del logo del centro educativo a la izquierda, y las Redes Sociales disponibles de este a la derecha.

A continuación, se muestra el diseño de la estructura mencionada anteriormente.