1

Notas de Autores
Belkis Vásquez (2018-6504)
Gerlen Elivet Aquino Zorrilla (2018-6497)
Grismerlyn Lisbeth Corporan Mercedes (2018-6159)
Edwin Imanol Collado Castillo (20186050)
Abril 2020
Instituto Tecnológico de las Américas.
Desarrollo de Software.
 3

El mejor médico es el que mejor inspira la esperanza.

 I

Introducción

Un mockup es un prototipo hecho antes del desarrollo del trabajo. Sirve para
transformar ideas en funcionalidades y ayuda al cliente a exteriorizar y comprender lo
que necesita.
Normalmente tenemos una idea general de lo que queremos, pero no tenemos tanta
seguridad respecto a los detalles de desarrollo, como por ejemplo la ubicación de los
botones y del contenido, o cómo las páginas y funcionalidades van a interactuar entre sí.
Continuación se muestran los mockup que servirán como base para el desarrollo e
implementación del portal web PLENA SERENIDAD.
 1

Esta será la pantalla de inicio aquí el usuario podrá ver los casos de coronavirus en el
mundo y en nuestro país. Además cuenta con una breve descripción del coronavirus.
Esta página posee un menú en la parte superior que le permitirá al usuario navegar e
interactuar con el contenido de la aplicación.
 2

En esta pantalla el usuario podrá visualizar cuales son los síntomas reales de
coronavirus y una breve descripción de cada.
 3

En esta pantalla se le presenta al usuario una serie de medidas que se deben tomar para
la prevención del coronavirus.
 4

En esta pantalla se listan una medidas que pueden ayudar a prevenir el coronavirus en
toda la familia, debido a que una persona puede estar cumpliendo las medidas propuesta
en la página anterior y un familiar no está pantalla lo ayudara a lidiar con este problema.
 5

Esta es la segunda opción en el menú en esta pantalla contara con un menú que le
permitirá al usuario obtener información sobre el coronavirus.
 6

En esta pantalla se le muestra al usuario a como lavarse las manos paso a paso.
Muchas personas creen que mojarse las manos es suficiente cuando la realidad es que
para lavarse las manos se deben seguir una serie de pasos.
 7

En esta pantalla se les explica a los usuarios que no existe vacuna para el virus pero que
si tienen tres o más síntomas de lo que encuentra expuesto en la página web debería
visitar un hospital.
 8

Protégete

En esta pantalla se le muestra al usuario que debe hacer y qué no hacer con relación a la
actual pandemia del coronavirus.
 9

En esta pantalla aparece más información sobre coronavirus.

 10

Esta pantalla nos brinda la información de cómo se transmite el virus de una persona a
otra.
 11

Página se muestra la mejor medida para prevenir el coronavirus que es QUEDATE EN

CASA.
 12

Conclusión

El uso de tipografía, símbolos, color y otros gráficos son comúnmente usados para
expresar hechos, conceptos y emociones. Esto compone un diseño gráfico orientado a la
información que ayuda al usuario a comprender información compleja. La
comunicación visual efectiva para este sistema se basa en algunos principios básicos de
diseño gráfico.

 Organizar: proveer al usuario de una estructura conceptual clara y consistente.

 Economizar: hacer lo máximo con la menor cantidad de elementos.
 Comunicar: ajustar la presentación a las capacidades del usuario.

Todo esto para hacer un portal web con una interfaz agradable al usuario.