DISEÑO DE SISTEMAS

CÓDIGO: 301309A_761

Unidad 2 Paso 4 - Diseño orientado a objetos y componentes

Presentado al tutor (a):

MOISÉS DE JESÚS RODRÍGUEZ BOLAÑO

Entregado por el (la) estudiante:

BRAYAN ANDRES BELTRAN QUIMBAY

Código: 1074417948

YESLY ROSNAIRA ANGARITA

Código:

ANDRÉS DAVID LÓPEZ RODRÍGUEZ

Código: 1007589487

KAREN SHIRLEY CASTAÑEDA VEGA

CÓDIGO: 1007384344

Grupo: 301309_1

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD

ESCUELA DE CIENCIAS BÁSICAS TECNOLOGÍA E INGENIERÍA

 INTRODUCCIÓN

El desarrollo de sistemas se refiere a todas las actividades que deben realizarse para crear

sistemas de información en una organización; asimismo alude a procesos relacionados para

lograrlo. Puesto que los ambientes organizacionales específicos y las tecnologías generales

cambian con el tiempo, las organizaciones necesitan nuevos sistemas, o bien requieren revisar

ampliamente los sistemas existentes, para continuar cumpliendo con sus objetivos. De tal modo,

el desarrollo de sistemas es un proceso continuo en todas las organizaciones que hacen uso de

ellos.

El siguiente trabajo presenta los ejercicios realizados para el curso de Diseño de Sistemas de la

Universidad Nacional Abierta y a Distancia.

Los ejercicios corresponden a la Unit 2: Step 4 - Design oriented to objects and components:

Diseño de interfaz de usuario, Diseño basado en patrones y Diseño de webapps.

 OBJETIVOS

 Poner en práctica los conocimientos sobre el diseño de interfaz de usuario, diseño basado

en patrones y diseño de Webapps.

 Modelar un problema de una empresa por medio de la creación de la arquitectura y de los

componentes de un sistema de información.

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

 Diseñar las interfaces de acuerdo con los componentes de los anteriores pasos,

estableciendo una distribución preliminar, y realizar sus respectivos diseños de patrones

arquitectónicos.

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

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

 Desarrollar un diseño abstracto para la interfaz de un sistema de información.

 Desarrollar el diseño y un artículo sobre la interfaz a un sistema de información.

 DESARROLLO

La empresa cuyo organigrama corresponde a la gráfica adjunta,

es una empresa que se dedica a la asesorías, ventas y mantenimientos de productos tecnológicos,

adicionalmente desarrolla aplicativos de oficina y aplicaciones web para sus clientes.

La empresa consta de las áreas de Contabilidad, Tecnología y creatividad, Talento humano,

Producción y Mercadotecnia y ventas. En cada una de las áreas existen subáreas de apoyo para el

desarrollo de cada uno de sus procesos.

Actualmente la empresa trabaja un aplicativo bastante sencillo donde no hay respaldo de la

información almacenada en los discos duros. La junta directiva al reunirse mensualmente solicita

información al director general y este a su vez solicita información a las personas encargadas de

cada una de las áreas.

La junta directiva ha decido aplicar reingeniería a su sistema de información y por ello SE

Apoyará en su pequeño grupo como ingenieros para que le brinde el apoyo necesario en dicho

proceso. Para ello, debe realizar:

 b. Tecnología y creatividad: Yesly Rosnaira Angarita

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
2. Realizar el diseño de menús contextuales y sus correspondientes submenús relacionado al
sistema de información de la dependencia que está desarrollando aplican

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

información.
 4. Realizar un ensayo sobre el manejo de los colores el diseño de un sistema web

LA TEORÍA DEL COLOR

El color es muy importante, y más en una página web, porque es lo que hace que nuestro
visitante se sienta en confianza ya que los colores nos trasmiten sensaciones, recuerdo entre otras
más lo más importante de una página web es el diseño que sea llamativo mezclado con sus
diversos colores, en este caso hablaremos de los colores como el rojo en su naturaleza es un color
que nos habla del amor y la pasión, el color rojo reciben toda nuestra atención pues nos dicen
que debemos tener cuidado y mirar antes de continuar. aunque en ocasiones el rojo es dominante,
y cuando se combina con colores como el negro, puede crear un look muy masculino. En los
Botones y enlaces en rojo pueden ayudarte a generar un mensaje de seriedad en el diseño de un
sitio web. Aunque su uso excesivo puede resultar agresivo. El naranja puede retratar un ambiente
divertido porque es enérgico y crea una sensación de calor sin connotaciones de peligro,
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,
pero también el amarillo también puede estar asociado con la cobardía y el miedo, Cuando se
combina con el negro, se puede generar gran cantidad de atención. El verde es el color del
dinero, por lo que en nuestra cultura se asocia con la riqueza. 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, puede representar diferentes sentimientos, pensamientos y emociones. En las imágenes,
azules con tonos oscuros pueden dar una sensación de tristeza. El azul claro es el color del cielo
y del agua, que puede ser refrescante, libre y tranquilo. Los cielos azules generan calma y
tranquilidad. La tranquilidad del azul favorece la relajación. 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. 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. El blanco puede
también estar asociado con higiene y esterilidad. 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. También se asocia con la muerte.

Hay que tener muy encuentra lo que nos transmiten los colores y poner mucha atención a la hora
de seleccionarlos. Las opciones de color que elijas pueden generar diversas sensaciones y estados
de ánimo entre tus visitantes. Una combinación adecuada puede llamar la atención del usuario y
transmitir visualmente el mensaje correcto.

C. Talento humano: Brayan Beltran

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.
 2. Realizar el diseño de menús contextuales y sus correspondientes submenús si aplican.

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

información.

4. Investigue sobre el manejo de los colores el diseño de un sistema web.

Mi interfaz no maneja colores, pero si se dé la importancia que tienen estos, para el diseño de

páginas web, conocer que colores utilizar y cuáles no, es imprescindible, estos se usan como un

recurso para llamar la atención de los usuarios, elegir mal un color puede alterar la valoración
jerárquica de una página web, los colores también son capaces de generar sensaciones muchas

veces sin ser consciente de ello, una gama de colores relajado y suave puede hacer mucho por

una página web, es importante resaltar que estas emociones y sensaciones asociadas al color,

corresponden en su mayoría a la cultura occidental (un ejemplo de esto es el color blanco,

asociado al matrimonio) ya que en culturas orientales puede ser asociado a la muerte. En el

diseño web la selección del color es uno de los puntos más importantes del proceso, como su

utilización para dar mensajes de alerta, o informativo.

No solo afecta las emociones, sino que también puede llevar al usuario a tomar diferentes

decisiones, según un estudio la apariencia visual atrae en mayor o menor medida a los

consumidores por encima de las texturas los sonidos o incluso los olores, por lo tanto, en una

pagina de venta de productos tener un buen aspecto visual puede ser crucial a la hora de tener

éxito, no solo en el diseño de la web, el color también influye en que la marca sea reconocida

con mayor facilidad esto ayuda a que la marca sea asociada con mayor facilidad y se cree una

confianza hacia ella.

Como se ha dicho anteriormente el color influye en la persecución que tiene un usuario de una

pagina web, un mal diseño o colores elegidos incorrectamente afectan la forma en que un usuario

ve una pagina web y puede llegar a darle hasta características negativas de que la pagina no es

segura o es poco visitada.

Diferentes colores pueden generar diferentes impactos en los usuarios tales como:

Colores Cálidos: Sugieren emociones como la pasión, la felicidad y la energía. Es importante no

usarlos en exceso o el resultado puede ser contradictorio.

Colores Fríos: Brindan tranquilidad y algo de misterio, son colores impersonales a los cuales se

les recomienda mezclar con otros colores.

Colores Neutros: Son colores perfectos para ser elegidos de color de fondo, ya que hacen

sobresalir a los colores más cálidos.

Como podemos observar es importante elegir una paleta de colores agradable y que nos ayude a

transmitir un mensaje a nuestros usuarios.

D. Mercadotecnia y Ventas: Andrés David López Rodríguez

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.
2. Realizar el diseño de menús contextuales y sus correspondientes submenús relacionado al
sistema de información de la dependencia que está desarrollando aplican. (Software
BALSAMIQ - https://balsamiq.com/)
3. Realiza el diseño de las ventanas de dialogo que se puedan presentar en un sistema de
información. (Software BALSAMIQ - https://balsamiq.com/)

4. Realizar un ensayo sobre el manejo de los colores el diseño de un sistema web

La importancia del uso correcto del color para los sistemas Web

Actualmente en el diseño de sistemas web es muy importante el uso de colores que resalten la
información a mostrar, aumenten el interés del usuario final y sobre todo que estos no causen
ningún efecto negativo para ellos, siendo el cansancio o fatiga visual uno de los principales
problemas, además de que un uso incorrecto de colores en un sitio web puede no generar una
correcta visualización y entendimiento de su contenido, por ello la selección de colores es uno de
los pasos más importantes, si tenemos en cuenta que hay estudios que resaltan que los colores
pueden tener efectos psicológicos en las personas, son más probables que hagan un llamado a la
acción por parte del usuario dependiendo del tono y el color usado.

Al momento de realizar la selección del color, la gama de colores o la gama cromática, nos
podemos guiar en los principios de la teoría del Color, del cual no es importante entender toda la
teoría, pues es algo extensa, pero si es importante conocer sus principios, ya que en el se nos
muestran los conceptos sobre el circulo cromático, los atributos que tiene el color (lo que es los
matices del color, la luminosidad, la saturación, transparencia, etc.), el modelo de color RGB (del
cual profundizaremos un poco más adelante en este ensayo), la percepción del color según el ojo
humano, y uno de los temas más importantes la armonía del color, pues esta ultima una de las
que más nos interesa. La selección de colores o gama de colores a usar en un sistema web no
puede estar basado únicamente en nuestra percepción y gustos, puede influir pero no ser
determinante en la selección, pues para ello se debe realizar un estudio detallado sobre el tipo de
usuario al que va dirigido nuestra Web, de que trata (Cual es su contenido), entre otros aspectos.

Teniendo en cuenta que los tres colores primarios son el rojo, el amarillo y el azul y que el resto
de colores se obtienen, mezclando o combinando los anteriores, podemos seleccionar uno y de
este derivar diferentes tonalidades, unas más oscuras y otras más claras, pero no es recomendado
en lo absoluto usar esos tres colores primarios directamente, pues resultan bastante intensos para
la visión humana por tanto puede generar problemas de fatiga visual al usuario, y este aspecto es
importante pues puede determinar el impacto que tendrá nuestra Web, por ejemplo para fondos
se suelen utilizar tonos más suaves no tan intensos y por ejemplo para elementos de menor
tamaño como botones si se suelen usar colores un poco más vivos (no intensos) y resaltantes para
generar un mayor llamado a la acción por parte del usuario, actualmente se viene hablando
bastante del modo oscuro o noche tanto en sitios web como en aplicaciones, pues se ha
determinado que este tiene un menor impacto en cuanto a fatiga visual, y sería bastante
beneficioso la implementación de tanto los colores que según hemos determinado usar como el
modo noche (que generalmente usa diferentes tonalidades de negro) pues esto haría que el
usuario tuviese la opción de elegir cual se adapta mejor a su visión.

E. Producción: Karen Shirley Castaneda

1. Realizar el diseño abstracto de interfaces que describen la estructura y organización de la

interfaz de usuario e incluir una representación del diseño de la pantalla, una definición
de los modos de interacción y una descripción de mecanismos de navegación
2. Realice el diseño de un menú contextual con sus correspondientes submenús para el

sistema de información que funciona

3. Realice el diseño de las ventanas de dialogo que se pueden presentar en una información

sistema
 4. Investigue sobre el manejo de los colores el diseño de un sistema web.

Es muy importante el manejo de los colores en un diseño de un sistema web porque no solo se

basa en la composición o formas sino también en lo indispensable que es la combinación de los

colores los cuales generan impacto en los usuarios por medio de la dependencia de varios

factores, este genera sensaciones y emociones al crear nuevas ideas o estrategias, y para poder

tener un proceso muy interesante se utiliza la rueda de color, escogiendo dos o tres colores

partiendo de la relación entre ellos, por ejemplo el color más usado por las empresas de

tecnología es el Azul porque se relacionan con la asociación del progreso de estas. Otro es el

verde usado para aquellas empresas que se quieren asociar al medio ambiente, otro puede ser el

blanco que representa pureza, simplicidad, perfección, también el amarillo un color luminoso se

asocia con la felicidad, el optimismo y crea animo hacia las visitas. Bueno esto, con el objetivo

de desarrollar un análisis del color adecuado para transmitir valor e impacto en los usuarios.

Los colores en un diseño web también estimulan el cerebro y reviven la tranquilidad, la

seguridad, la confianza, teniendo en cuenta las relaciones internacionales del negocio, el

equilibrio, la armonía al escoger los colores para este diseño recordando las tres reglas

principales que son los colores de la misma escala cromática, los colores adicionales, los colores

contrarios; por otro lado, es importante resaltar el contraste del color el cual se produce al

combinar dos colores relacionados y este permite resaltar textos o imágenes, combinando colores
claros y oscuros para lograr el efectivo visual del usuario. En la parte de la composición se habla

que los colores cálidos, los oscuros, son más determinantes que los colores fríos; es fundamental

seguir estas reglas: crear un solo impacto visual en la página, respetar la mirada del usuario al

observar la página.

También se debe tener en cuenta los colores para el tipo de usuario, en primera instancia el uso

del color debe ser enfocado para los usuarios según su edad, es decir, para los jóvenes son los

colores fuertes igual para los niños, en cambio para los adultos ya son colores más sobrios. Otro

uso del color deber ser enfocado según el género, es decir, en las mujeres siempre está la

tendencia de colores suaves y fríos, en cambio en los hombres son dados hacia colores más

cálidos.

En conclusión la combinación de los colores en las páginas web están vinculados a los fines que

se inclinan con los efectos que se pretende producir en el usuario; de la elección de los colores y

el buen uso que se les dé, reconocerá en gran parte el éxito que llevara el diseño.
 CONCLUSIONES

 Saber seleccionar un color es uno de los procesos más importantes en la creación de

una página web.

 Dar información detallada y precisa a nuestros usuarios es importante para que ellos

se acostumbran a la interfaz y sepan manejarse en ella.

 Luego del desarrollo de la presente actividad se pueden determinar las siguientes

conclusiones, primero que se puso en práctica los conocimientos sobre el desarrollo y

diseño de interfaz de usuario, diseño basado en patrones y diseño de Webapps, a

través de esta actividad se comprendido los conceptos de bases del diseño y sus

componentes, se desarrolló el diseño arquitectónico para un sistema de información,

también se desarrolló el diseño a nivel de componentes a un sistema de información,

teniendo en cuenta principalmente todo el proceso que se desarrolló durante el curso

por medio de sus diferentes pasos y debemos tener en cuenta por último que, todos

estos conocimientos comprendidos no solo en este paso si no también en los

desarrollados anteriormente, son utilizados en la cotidianidad laboral, por lo que es de

importancia su correcto aprendizaje y desarrollo y por lo tanto así nos serán de gran

ayuda.

 En el desarrollo de esta actividad se ha podido comprender los conceptos bases del

diseño y sus componentes.

 Se pudo desarrollar el diseño abstracto para la interfaz de un sistema de información.

 Se logró desarrollar un diseño de ventanas y un artículo sobre la interfaz de sistema

de información.
 REFERENCIAS BIBLIOGRÁFICAS

 Mohapatra, P. K. (2010). Software Engineering: A lifecycle Aproach. En P. Mohapatra,

Software Engineering: A lifecycle Aproach (pág. 296).

 New Delhi: New Age International. Retrieved from:

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, P. K. (2010). Software Engineering: A lifecycle Aproach. En P. Mohapatra,

Software Engineering: A lifecycle Aproach (pág. 322).

 New Delhi: New Age International. Retrieved from:

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_322

 Mohapatra, P. K. (2010). Software Engineering: A lifecycle Aproach. En P. Mohapatra,

Software Engineering: A lifecycle Aproach (pág. 360).

 New Delhi: New Age International. Retrieved from:

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