PONTIFICIA UNIVERSIDAD

CATÓLICA DEL PERÚ

ABRIL 2022-1

ESTÁNDARES DE LA

INTERFAZ GRÁFICA
Sistema de apoyo a la gestión del proceso de Supervisión

de Prácticas Supervisadas Profesionales

DOXEADORES
ING. SOFTWARE 2022-1 PÁGINA 02

INTRODUCCIÓN
Las interfaces gráficas efectivas son visualmente comprensibles y evita
que existan errores por parte del usuario, dándole una sensación de
control. Los usuarios ven rápidamente el alcance de las opciones y
comprenden como obtener sus metas y realizar su trabajo.

Según lo anteriormente mencionado, el objetivo del presente

documento es el de establecer normas y estándares para el diseño de
la interfaz gráfica del sistema a desarrollar, además de tener como
propósito fundamental el de determinar un patrón de diseño en las
interfaces de cada módulo para mejorar la interacción del usuario con
el sistema propuesto.

ALCANCE
El proyecto a realizar está enfocado en proveer un sistema de apoyo a
la gestión del proceso de Supervisión de Prácticas Supervisadas
Profesionales, teniendo como alcance a las especialidades de Ingeniería
Informática, Ingeniería Industrial e Ingeniería de las
Telecomunicaciones. Teniendo así como principales usuarios a los
alumnos, profesores y supervisores de las especialidades previamente
mencionadas
DOXEADORES
ING. SOFTWARE 2022-1 PÁGINA 03

PALETA DE

COLORES
Al ser un sistema dirigido a la PUCP, hemos
optado por utilizar los colores más
representativos de la universidad. Estos
colores transmiten inteligencia, confianza y
transparencia, con lo cual, el usuario puede
sentirse que está en un espacio seguro y de
gran utilidad

DARK PRIMARIO LIGHT

#042354 #003C7A #0072BC

DARK SECUNDARIO LIGHT

#EEEEEE #F5F5F5 #FAFAFA

DOXEADORES
ING. SOFTWARE 2022-1 PÁGINA 04

TIPOGRAFÍA
abcdefgh
Para el presente proyecto decidimos optar por la tipografía
Roboto, debido a que utilizaremos componentes que guardan
mucha similitud con la línea gráfica de Google, empresa la cual
describe a Roboto como “moderna, pero a la vez accesible” y
“emocional”.

ijklmnopq

Tipografía principal

R
Roboto presenta una naturaleza
Roboto dual, mediante su esqueleto
mecánico y las formas son en
Roboto Mono Light gran parte geométricas. Al
mismo tiempo, la fuente
Roboto Mono Regular presenta curvas amigables y
abiertas.

Aa Bb Cc Dd Ee
0123456789

Ingeniería de Software
DOXEADORES
ING. SOFTWARE 2022-1 PÁGINA 05

ICONOGRAFÍA
Para la iconografía del sistema se
utilizará la librería Material Design,
sosteniendo así una misma línea
gráfica. Con respecto al logotipo
PUCP se seguirán las indicaciones
propuestas en el Manual de
Identidad PUCP.
DOXEADORES
ING. SOFTWARE 2022-1 PÁGINA 06

COMPONENTES
Para el presente proyecto se hará uso
de los componentes pertenecientes a
la API de Material Design 3 y Bootstrap,
con modificaciones en base al estilo
gráfico y colores previamente tratados
en esta propuesta de estándares.
 DOXEADORES
ING. SOFTWARE 2022-1 PÁGINA 07

COMPONENTES
Los elementos seleccionados de Material Desing y Bootstrap tales como
botones, checkboxes, listas desplegables, switches, cuadros de diálogo,
radio buttons, textbox, timeline y sliders se muestran a continuación:

Botones: Cuadros de diálogo:

Checkboxes:

Radio buttons:

Lista desplegable:
Sliders:
 DOXEADORES
ING. SOFTWARE 2022-1 PÁGINA 08

Switches: Timeline:

Textbox:
DOXEADORES
ING. SOFTWARE 2022-1 PÁGINA 09

COMPONENTES
Para representar los datos de una manera ordenada, decidimos utilizar
Tablas de Datos.

Tabla de datos:
DOXEADORES
ING. SOFTWARE 2022-1 PÁGINA 10

MENSAJES
DE ALERTA
Se usarán pequeñas cartillas con
información de interés para el
usuario. Están ideadas para
aparecer mayormente tras la acción
de un usuario o del Sistema mismo.
DOXEADORES
ING. SOFTWARE 2022-1 PÁGINA 11

REFERENCIAS
Para el presente documento, hemos
recolectado información de las
siguientes fuentes:

1.GOOGLE FONTS
Roboto - Google Fonts. Consulta: 5 de Abril de 2022.
https://fonts.google.com/specimen/Roboto?
preview.text=Lorem%20ipsum%20dolor%20sit%20amet%20consect
etur&preview.text_type=custom

2. MUI
React Alert component - MUI. Consulta: 5 de Abril de 2022.
https://mui.com/components/alert/

3. MATERIAL DESIGN
Components - Material Design. Consulta: 5 de Abril de 2022.
https://material.io/components

4. MATERIAL COMPONENTS
Material Web Components Catalog. Consulta: 5 de Abril de 2022.
https://material-components.github.io/material-web/demos/

5. BOOTSTRAP
Introduction. Consulta: 5 de abril de 2022.
https://getbootstrap.com/docs/5.1/getting-started/introduction/