DISEÑO DE SISTEMAS

UNIDAD 2: PASO 3 - DISEÑO ORIENTADO A OBJETOS Y COMPONENTES

ENTREGADO POR:

JOSÉ ALBERTO GUTIÉRREZ CATAÑO

CÓDIGO: 1065807575
FRANKLIN DAVID MARTINEZ MENDOZA
CÓDIGO: 1065824953
LUIS GABRIEL OROZCO
CÓDIGO: 1007362316
MAIRA ALEJANDRA CASTRO OCHOA
CÓDIGO: 1007316924

GRUPO 301309-35

PRESENTADO A:
MOISES DE JESUS RODRIGUEZ BOLAÑO

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD

ESCUELA DE CIENCIAS BÁSICAS, TECNOLOGÍA E INGENIERÍA
19 DE MAYO 2019
 Introducción

En este trabajo final se mantuvo presente el tema elegido en las primeras actividades, se

trabajó con diferentes menús contextuales, dichos menús facilitan de una u otra manera al

empleado de cualquier empresa y área seleccionada. Es importante resaltar las ventanas de

dialogo, estas se presentan en el sistema de información o interfaz seleccionada; se muestra

la importancia y función del uso de los colores al diseñar algún sistema web, toda esta

información se puede observar en pantallazos paso a paso para un mejor entendimiento.

 Objetivos

 Comprender los conceptos bases del diseño y sus componentes.

 Desarrollar el diseño arquitectónico para un sistema de información.

 Desarrollar el diseño a nivel de componentes a un sistema de información.

ESTUDIANTE: JOSE ALBERTO GUTIERREZ CATAÑO
1. Realizar el diseño abstracto de interfaces donde se describa la estructura y
organización de la interfaz de usuario e incluya una representación de la
distribución de la pantalla, una definición de los modos de interacción y una
descripción de los mecanismos de navegación.

En el área de contabilidad como primera interfaz nos encontramos con una presentación
sencilla en la cual es necesario digitar el usuario y seleccionar un cargo para poder ingresar
a cada una de las opciones descritas, así mismo encontramos un botón de regresar al menú
inicial del aplicativo en donde se podrán analizar las demás áreas de la empresa y por
último el botón salir para finalizar la ejecución del aplicativo.
En la imagen anterior ya nos encontramos en la interfaz Contador, en esta encontramos un
menú contextual en la parte superior de la interfaz, además en la opción Inicio encontramos
un submenú el cual contiene cuatro opciones más que le serán útiles al empleado, al
presionar cada botón de los presentados en la interfaz este lo llevara a una nueva interfaz
que sería en esa la cual realizaría cada una de las respectivas funciones que este tiene en la
empresa, claro está que es necesario llenar los campos anteriores porque de lo contrario
aparecería una ventana emergente recordando que debe haber ingresado un usuario y un
cargo, por último en la parte inferior de la interfaz encontramos el botón Regresar al menú,
el cual nos permite volver nuevamente a donde están todas las subáreas que conforman el
área de contabilidad.

En la interfaz Financiera encontramos el mismo orden del menú y submenú de la interfaz

Contador, así como también una casilla para el usuario y el cargo los cuales son
obligatorios para poder acceder registrar y generar la respectiva información que poseen,
por último, se encuentra el botón regresar a la interfaz del área de contabilidad.
En la interfaz de Tesorería encontramos el menú contextual el cual se encuentra
conformado por 4 opciones las cuales se distribuyen así, primero la opción de Inicio que
además posee un submenú que contiene 4 opciones las cuales son nuevo, abrir, agregar y
cerrar, la segunda opción es Modificar, la tercera opción Generar Reportes y por último la
opción Salir la cual permite detener el aplicativo en cualquier momento, claro está que al
hacer uso de esta opción nos arrojara un ventana de dialogo la cual consiste en confirmar si
deseamos salir del aplicativo o no, luego se pasa a las opciones con las que cuenta el área
de tesorería para cargar información y por último el botón regresar al menú que nos llevaría
a la interfaz del área de contabilidad.
Por último, nos encontramos con la interfaz de Auxiliar Contable, en la cual encontramos el
menú y submenú de las interfaces anteriores, además esta cuenta con las restricciones que
anteriormente se aclararon como lo son digitar un usuario para poder acceder a trabajar en
dicha interfaz, si desea salir del aplicativo se le solicitara una confirmación de dicha
decisión y por último el botón regresar que nos llevaría a la interfaz inicial del área de
contabilidad.

2. Realizar el diseño de menús contextuales y sus correspondientes submenús si

aplican.
En las diferentes interfaces del aplicativo encontraremos el menú contextual que se
encuentra conformado por inicio, modificar, generar reportes y por último salir; pero
además se cuenta con un submenú en la opción de inicio en la que encontramos las
siguientes opciones: nuevo, abrir, agregar y por último cerrar.

3. Realiza el diseño de las ventanas de dialogo que se puedan presentar en un

sistema de información.

La casilla ubicada para cargar el usuario solo permite digitar letras en caso tal que se digite
un numero inmediatamente le aparecerá la siguiente ventada de dialogo.
Al presionar el botón salir inmediatamente le aparecerá la siguiente ventada de dialogo la
cual confirma si en realidad desea salir o seguir en la aplicación.

Así mismo al estar en cada de las interfaces si se presiona el botón salir inmediatamente le
aparecerá la siguiente ventada de dialogo la cual confirma si en realidad desea salir o seguir
en la aplicación.
4. Investigue sobre el manejo de los colores el diseño de un sistema web

Teoría del color

“En el arte de la pintura, el diseño gráfico, el diseño visual, la fotografía,

la imprenta y en la televisión, la teoría del color es un grupo de reglas básicas en la

mezcla de colores para conseguir el efecto deseado combinando colores

de luz o pigmento. La luz blanca se puede producir combinando el rojo, el verde y

el azul, mientras que combinando pigmentos cían, magenta y amarillo se produce el

color negro.”

Teoría del color, Wikipedia, Recuperado de:

https://es.wikipedia.org/wiki/Teor%C3%ADa_del_color#Modelos_de_color

Entre la clasificación de la teoría de los colores se encuentra:

 Colores primarios: No son producto de la mezcla de otros: amarillo, azul y

rojo, Sin embargo, si estamos hablando de colores de pantalla, tanto en
 dispositivos móviles como en monitores de sobremesa, los colores primarios
son el rojo, verde y azul (RGB).
 Colores secundarios: Se obtienen al mezclar dos primarios: verde, violeta y
naranja, la combinación de estos colores en diseño web generan una gran
variedad de contrastes.
 Colores terciarios: Se consiguen al mezclar partes iguales de un primario y
un secundario. En realidad, no son más que matices de un color. Amarillo
verdoso, azul verdoso, azul violáceo, rojo violáceo, rojo anaranjado,
amarillo anaranjado.
 Colores cuaternarios: Se obtienen mediante la mezcla de los terciarios
entre sí: rojo terciario + amarillo terciario da un naranja neutralizado,
amarillo terciario + azul terciario da un verde muy neutro (verde oliva) y
rojo y azul terciario da un violeta neutro parecido al de la ciruela.

El tener en cuenta la teoría del color al momento de realizar un diseño de sistema

web, nos permite hacer el buen uso de combinaciones de colores los cuales no
afecten al usuario al permanecer suficiente tiempo haciendo uso de este, ya que al
utilizar colores muy fuertes se afectaría la vista del usuario, provocando que no
desee hacer uso de dicho sistema.
Descripción por color:

 Rojo

El rojo es dominante y se puede combinar con colores como el negro. Es

utilizado en botones y enlaces, el color rojo puede ayudarte a generar un
mensaje de seriedad en el diseño de un sitio web. Aunque su uso excesivo puede
resultar agresivo.

 Naranja

El naranja puede retratar un ambiente divertido porque es enérgico y crea una

sensación de calor sin connotaciones de peligro y de sangre.

 Amarillo

El amarillo es considerado un tono alegre y cálido, agrega brillo y luz, brinda

energía. Es el primer color percibido por la retina, lo cual hace que propicie el
cansancio de la vista, Cuando se combina con el negro, se puede generar gran
cantidad de atención.

 Verde

El verde se utiliza para mostrar que los productos son naturales y saludables.
También puede tener una connotación de pérdidas y ganancias. Combinado con
azules, el verde perpetúa la salud, la limpieza, la vida y la naturaleza.

 Azul

Dependiendo de la tonalidad en que se utilice el color azul puede representar

diferentes sentimientos, pensamientos y emociones, propicia la calma, la
productividad y la serenidad. Es sinónimo de confianza y seguridad. Ayuda a
generar efectos de concentración y relajación.

 Morado

Los morados con más rojo pueden estar asociados con romances, intimidad,
suavidad y confort. El morado puede generar sensación de misterio y de lujo.
 Blanco

El blanco es el color universal utilizado en artes gráficas. Está dentro de la gama

de los grises y representa la paz, la pureza, la felicidad, Produce sensación de
sofisticación

 Negro

El negro se encuentra en el extremo opuesto de la tonalidad de grises. Simboliza

el silencio, y el misterio.  Es un color que sirve para otorgar elegancia y
distinción. 
ESTUDIANTE: FRANKLIN DAVID MARTINEZ MENDOZA

1. Realice el diseño abstracto de las interfaces que describen la estructura y

organización de la interfaz del usuario e incluya una representación del diseño de la
pantalla, una definición de los modos de interacción y una descripción de los
mecanismos de navegación.

En la siguiente interfaz se observa la interfaz del área de marketing y ventas, al suministrar

los datos correspondientes se ingresa a la primera interfaz del investigador comercial, se
logran ver un menú contextual o menú y submenú, donde el usuario inscrito en este cargo
contara con las opciones necesarios y suministradas para desempeñarse en su área laboral.
Se observa la interfaz del investigador comercial, donde encontramos en la parte superior
unos menús contextuales y opciones necesarias para el usuario a cargo de esta área. Se
muestran unas opciones necesarias como editar diseños y generarlos, información y datos
obtenidos en informes.

En la interfaz de comunicación al llenar correctamente los datos pedidos Usuario y Cargo,

esta consta de unas opciones necesarias en el menú para esta área de trabajo, suministrando
datos e inversores, crear, guardar y editar distintos planes estratégicos; también cuenta con
un botón de regresar, el cual es muy útil al momento ingresar por error a una interfaz
equivocada.
En la interfaz de diseño e innovación varían las opciones, para esta área que se utilizan la
mayoría de las opciones suministradas en el menú; brinda ayuda en crear, editar, agregar,
guardar y cargar mejoras a los diseños y creaciones de diferentes diseños generando
diseños e innovaciones.

La interfaz de imagen tiene sus opciones breves y concisas, se muestran las opciones en el
menú como editar y cargar soportes de imagen y generar diseños, tiene opciones como
eliminar y nuevo como ayuda en caso de algún error o crear nuevos diseños. El encargado
de esta área tendrá en su menú las opciones necesarias para su utilización en su ámbito
laboral.
Al finalizar en la interfaz de ventas se observa todo lo necesario en opciones para esta
área, con ayudas para un mejor trabajo, como generar presupuestos de ventas, guardar,
generar estrategias de ventas; cuenta con un botón de regresar la cual lo lleva nuevamente
al menú.

2. Realice el diseño de las ventanas de diálogo que se pueden presentar en un

sistema de información.

Se pide que se realiza un diseño de las ventanas de diálogos que se pueden presentar en un
sistema de información.
En el Área de Marketing y Ventas para ingresar se debe ingresar el usuario (NOMBRE),
para un ingreso exitoso no se deben digitar números, al momento querer ingresar y se
digiten números no se permitirá el ingreso, aparecerá una ventana de dialogo como alerta,
mostrando lo siguiente:

Al ingresar correctamente los datos anteriores se elige entrar a la interfaz

correspondiente, saldrá una venta de dialogo en forma de pregunta; si desea
ENTRAR a la interfaz seleccionada.
 Al querer salir de la interfaz esta misma le muestra una ventana de dialogo,
preguntando si está seguro de SALIR.

3. Investigar el diseño de un sistema web sobre el uso de colores.

En la teoría del color existen diversas combinaciones de colores que se agrupan
por categorías y que van muy bien para lograr un objetivo concreto en el diseño
web.

Colores primarios

Los colores primarios son aquellos que no se pueden obtener de la mezcla de

ningún otro. Son los colores básicos que mezclados darán lugar al resto de colores
de la gama cromática. Estos son el rojo, amarillo y azul. Sin embargo, si estamos
hablando de colores de pantalla, tanto en dispositivos móviles como en monitores
de sobremesa, los colores primarios son el rojo, verde y azul (RGB).

Colores secundarios

Si mezclamos a partes iguales los colores primarios, es decir, el rojo con el amarillo,
el amarillo con el azul, y el azul con el rojo, se crean los colores secundarios, que
son el naranja, verde y magenta. La combinación de estos colores en diseño web
genera una gran variedad de contrastes.
Colores terciarios
Los colores terciarios se consiguen si mezclamos a partes iguales un color primario
junto con uno secundario, es decir, rojo con magenta, azul con verde, amarillo con
verde, rojo con naranja y amarillo con naranja.

Colores complementarios

Los colores complementarios son colores que están situados uno frente al otro en

la rueda de color. Ejemplos de ello serían el rojo y el verde, azul y el naranja, el
amarillo y el púrpura, etc. Las combinaciones de colores complementarios crean un
gran contraste entre sí al usarlos a la vez.
 Colores análogos

Los colores análogos son colores que están uno justo al lado del otro en la rueda de
color. Es buena idea elegir un conjunto de colores análogos para crear una sensación
de variedad en el diseño de páginas web. 

Todos estos colores son aplicables al diseño web de nuestro sitio. La impresión que genera
en los usuarios dependerá de muchos factores, y uno de los más importantes es el color.

El color genera sensaciones y emociones, incluso recuerdos. Por tanto es importante

conocer los fundamentos de la teoría del color y que si la conoces te ayudará a transmitir el
mensaje que deseas en tu sitio web o bien generar nuevas ideas.

Colores utilizados en diseños web

Rojo

El rojo es el color del amor y la pasión. Las cajas de bombones son de color rojo en el día
de San Valentín. Algunas son de color rosa, que es un aclarado del color rojo.

Naranja
El naranja representa el calor, pero no es tan agresivo como el rojo. El naranja puede
retratar un ambiente divertido porque es enérgico y crea una sensación de calor sin
connotaciones de peligro y de sangre, como ocurre con el color rojo.

Amarillo

El amarillo se asocia con el sol y el calor. Cuando se utiliza junto con el naranja, se crea
una sensación de diversión relacionada con el verano. El amarillo puede estar asociado con
la sed, y se puede encontrar en las paredes de muchas tiendas de refrescos.

Verde

El verde es el color del dinero, por lo que en nuestra cultura se asocia con la riqueza. Como
la mayoría de las plantas son de color verde, también se asocia con el crecimiento y la
salud.

Azul

Dependiendo del aclarado y oscurecimiento del azul, puede representar diferentes

sentimientos, pensamientos y emociones. 

Morado

Asociado por el color de las vestimentas reales, el morado se relaciona con la

realeza. Los morados con más rojo pueden estar asociados con romances, intimidad,
suavidad y confort. El morado puede generar sensación de misterio y de lujo.

Blanco

Es el color universal utilizado en artes gráficas. Está dentro de la gama de los grises y

representa la paz, la pureza, la felicidad, etc. Su principal fortaleza es que potencia los
colores que lo acompañan. 

Negro

El negro se encuentra en el extremo opuesto de la tonalidad de grises. Simboliza el

silencio, y el misterio. Es un color que sirve para otorgar elegancia y distinción.
ESTUDIANTE: MAIRA ALEJANDRA CASTRO OCHOA
ESTUDIANTE: LUIS GABRIEL OROZCO

1. Realice el diseño abstracto de las interfaces que describen la estructura y

organización de la interfaz del usuario e incluya una representación del diseño de la
pantalla, una definición de los modos de interacción y una descripción de los
mecanismos de navegación.

En la siguiente interfaz se observa la interfaz del área de tecnología y creatividad, al

suministrar los datos correspondientes se ingresa a la primera. En esta interfaz se maneja
Tecnología y creatividad, donde a primera vista se suministra el nombre del usuario y el
cargo otorgado, se observan diferentes interfaces las cuales permiten el ingreso de estas
mismas para más información referente la tecnología y creatividad.
Se observa el Análisis, donde se solicita, recopilar datos específicos del proyecto, y
también desarrolla una serie de recomendaciones y presenta un plan de correcciones, y se
relaciona con los involucrados para darle continuidad a las mejoras.

En la diseño de proyecto se solicita beneficio y autores de claves

Establecer diagnóstico de la resolución del problema
Definir una estrategia para enfrentarla
En el Proceso y creatividad se solicita conocer teorías básicas sobre creatividad,
estrategias y técnicas creativas y también adquirir capacidad de planificación y gestión para
el desarrollo de procesos creativos.
En el Suceso se solicita formulación de objetivos organizacionales y también análisis de las
fortalezas y limitaciones de la empresa.   

2. Realice el diseño de las ventanas de diálogo que se pueden presentar en un sistema

de información.

Se pide que se realiza un diseño de las ventanas de diálogos que se pueden presentar en un
sistema de información.

En el Área de Marketing y Ventas para ingresar se debe ingresar el usuario (NOMBRE),

para un ingreso exitoso no se deben digitar números, al momento querer ingresar y se
digiten números no se permitirá el ingreso, aparecerá una ventana de dialogo como alerta,
mostrando lo siguiente:

Al ingresar correctamente los datos anteriores se elige entrar a la interfaz correspondiente,

saldrá una venta de dialogo en forma de pregunta; si desea ENTRAR a la interfaz
seleccionada.
Al querer salir de la interfaz esta misma le muestra una ventana de dialogo, preguntando si
está seguro de SALIR.

3. Investigar el diseño de un sistema web sobre el uso de colores.

Teoría

 Colores primarios
No son producto de la mezcla de otros: amarillo, azul y rojo
 Colores secundarios
Se obtienen al mezclar dos primarios: verde, violeta y naranja.
 Colores terciarios
Se consiguen al mezclar partes iguales de un primario y un secundario. En realidad
no son más que matices de un color. Amarillo verdoso, azul verdoso, azul violáceo,
rojo violáceo, rojo anaranjado, amarillo anaranjado.
 Colores cuaternarios
Se obtienen mediante la mezcla de los terciarios entre sí: rojo terciario + amarillo
terciario da un naranja neutralizado, amarillo terciario + azul terciario da un verde
 muy neutro (verde oliva) y rojo y azul terciario da un violeta neutro parecido al de
la ciruela.

Combinación complementaria

Los colores que están uno frente al otro en la rueda de color se consideran colores
complementarios (Ejemplo: Rojo-Verde). El alto contraste de los colores complementarios
crea un aspecto vibrante especialmente cuando se utiliza en la saturación completa. Este
esquema de color debe gestionarse bien por lo que no es discordante. Las combinaciones de
colores complementarios son difíciles de utilizar en grandes dosis, pero funcionan bien
cuando se quiere algo para destacar.

Combinación colores triádicos

Un esquema de color triádico utiliza colores equidistantes alrededor de la rueda de color.

Las combinaciones triádicas tienden a ser bastante vibrantes, incluso si utilizan versiones
pálidas o insaturadas de sus matices. Para utilizar una armonía triádica con éxito, los
colores deben ser cuidadosamente equilibrados - un color dominante y otros dos para el
acento.

Combinación colores tétradas

El rectángulo o combinación de colores tetrádica utiliza cuatro colores dispuestos en dos
pares complementarios. Esta combinación ofrece un montón de posibilidades de
variación. Funciona mejor si se deja un color dominante. También debe prestar atención al
equilibrio entre los colores cálidos y fríos.

Combinación colores análogos

Para este esquema se usan colores que están uno al lado del otro en la rueda de color. Por lo
general se adaptan bien y crean diseños serenos y confortables. Las combinaciones de
colores análogos a menudo se encuentran en la naturaleza y son armonioso y agradable a la
vista. Hay que asegurarse de tener suficiente contraste al elegir un esquema de color
análogo. Elegir un color dominante y un segundo de apoyo, en caso de un tercero (junto
con el negro, blanco o gris) se utilizaría como un acento.
Colores utilizados en diseños web

Rojo: invita a la acción, a hacer algo, abre el apetito, simboliza la pasión y el amor, etc.
Invita a ser impulsivo porque crea sensación de urgencia.

Amarillo: representa felicidad y aporta optimismo.

Azul: Aporta serenidad y paz al cliente/usuario, aumenta la productividad. Genera una

sensación de seguridad y confianza.

Verde: Asociado con la naturaleza, la tranquilidad y la salud. Aunque está asociado con la

riqueza y simboliza el dinero, se utiliza en marketing para serenar al cliente.

Morado: éxito y sabiduría. Utilizado generalmente para representar marcas creativas y

originales.

Naranja: Refleja emoción y entusiasmo, por eso su uso se limita a llamadas a la acción y

para generar leads y compras impulsivas. Pero siempre siendo confiable.

Morado Asociado por el color de las vestimentas reales, el morado se relaciona con la
realeza. Los morados con más rojo pueden estar asociados con romances, intimidad,
suavidad y confort. El morado puede generar sensación de misterio y de lujo.

Blanco es el color universal utilizado en artes gráficas. Está dentro de la gama de los

grises y representa la paz, la pureza, la felicidad, etc. Su principal fortaleza es que potencia
los colores que lo acompañan. 

Negro  se encuentra en el extremo opuesto de la tonalidad de grises. Simboliza el silencio,

y el misterio. Es un color que sirve para otorgar elegancia y distinción.
 Conclusión

El poder trabajar con las interfaces de usuario nos permite conocer cuales son las funciones

básicas con las que esta debe estar diseñada, así mismo que es necesario trabajar las

interfaces basadas en diseños creadas de manera abstracta ya que por medio de estas

sabremos como será la apariencia con la que el usuario deba trabajar; claro está que es

necesario tener en cuenta la teoría del color al momento de trabajar un diseño para una

webapps, ya que es necesario tener en cuenta que color nos beneficiara mas en la

implementación de la interfaz.
 Referencias Bibliográficas

 Mohapatra, PK (2010). Ingeniería de Software: Un Ciclo de Vida Aproach. En P.

Mohapatra, Ingeniería de software: un enfoque de ciclo de vida (pág. 296).

Nueva Delhi: New Age International. Obtenido

de:  http://bibliotecavirtual.unad.edu.co/login?

url=http://search.ebscohost.com/login.aspx?

direct=true&db=nlebk&AN=316074&lang=es&site=eds-

live&ebv=EB&ppid=pp_296
 Mohapatra, PK (2010). Ingeniería de Software: Un Ciclo de Vida Aproach. En P.

Mohapatra, Ingeniería de software: un enfoque de ciclo de vida (pág. 360).

Nueva Delhi: New Age International. Obtenido

de:  http://bibliotecavirtual.unad.edu.co/login?

url=http://search.ebscohost.com/login.aspx?

direct=true&db=nlebk&AN=316074&lang=es&site=eds-

live&ebv=EB&ppid=pp_360

 Teoría del color, Wikipedia, Recuperado de:

https://es.wikipedia.org/wiki/Teor%C3%ADa_del_color#Modelos_de_color

 Teoría del color y su aplicación en diseño web, Recuperado de:

https://www.lomejordewp.com/teoria-color-diseno-web/