Desarrollo conceptual de Página Web

PROCESOS PARA DISEÑO DE PÁGINAS WEB Diseño Gráfico en Salud

Análisis de caso

Índice

1

Evaluación de la situación actual

2

Alcance del proyecto

3

Recomendaciones para rediseño

4

Propuesta de diseño Mapa conceptual Constitución de logotipo Esquema Wireframe Prototipo de alta fidelidad- retícula Mockups Bibliografía

Análisis de caso Centros para el Control y la Prevención de Enfermedades CDC Acerca del VIH/SIDA | Información básica | VIH/SIDA | CDC A partir de la evaluación actual, estamos trabajando en recopilar datos para la creación de una página web dedicada a ofrecer información sobre la enseñanza del VIH. El objetivo principal es presentar una propuesta integral sobre la estructura y contenido ideal para esta plataforma educativa. Además, su fin es plantear una propuesta de cómo debería estar elaborada la página web, para dar libre acceso a la carrera de Promoción de la Salud.

A partir de la evaluación actual, estamos trabajando en recopilar datos para la creación de una página web dedicada a ofrecer información sobre la enseñanza del VIH. El objetivo principal es presentar una propuesta integral sobre la estructura y contenido ideal para esta plataforma educativa. Además, su fin es plantear una propuesta de cómo debería estar elaborada la página web, para dar libre acceso a la carrera de Promoción de la Salud.

1 Evaluación de la situación actual a Al empezar a analizar los detalles de la página se puede notar que no cuenta con una barra de menú de fácil acceso y comprensión debido a que todo está desplegado hacia abajo y no tiene jerarquización lo que provoca confusión acerca de la información concreta que brinda la página.

Es una página completa de información por lo tanto debería estar de libre acceso para los estudiantes de la carrera. Presenta acceso espontáneo para poder escoger y seleccionar el casillero que se busque; esto quiere decir, que los menús incluidos se presentan de un tamaño notorio, pero que no se distingue entre ellos mismo, sino que presenta un solo diseño y estilo que puede ser un poco agotador porque tiene un solo color .

Por otra parte el nombre de la página es de un tamaño muy exuberante; el título de la página debe ser de mejor visualización porque la mezcla de colores es abrumadora, al igual que la calidad y la resolución ya que se presenta como imagen.

b Además, estando en la página principal los accesos que se dan, son mediante imágenes más no de títulos, ocupando toda la vista, debido a que las imágenes son muy grandes asimismo la tonalidad cambia en cada una de ellas y a la larga eso podría cansar al lector.

Se debe considerar también que las imágenes no están relacionadas al tema de interés.

c Al navegar más por la página nos encontramos con un menú que pretende brindar ayuda inmediata; sin embargo no cuenta con una lógica válida ya que el usuario puede seleccionar todas las opciones a la vez y la información que brinda se refleja sin secuencia y genera confusión.

Del mismo modo, los íconos no concuerdan con la información con la información que pretenden ofrecer.

Cabe recalcar que la página si cuenta con numerosas áreas de descanso visual.

d Por otra parte, llegamos al final de la página y encontramos un menú de acceso a información de contacto, donde el color no concuerda con los colores del menú principal, dándole un aspecto poco agradable a la página, asimismo la información colocada está mezclada y genera confusión.

e Organización

Cromática

Existen dos bloques con el contenido general, y en la parte inferior de la página queda un gran espacio en blanco que hace que pierda estética.

El color azul, hace alusión al tema; sin embargo para hablar de prevención se debería seleccionar colores de representen empoderamiento y percepción de riesgo.

Y se puede evidenciar que al final de la página agregan otra tonalidad que no guarda relación con el tema.

Tipografía En cuanto a los tipos de letra, el tamaño es adecuado y de fácil legibilidad, y se ha utilizado una sola fuente para el desarrollo de toda la página, sin embargo utilizar al menos dos fuentes diferentes brindaría fluidez y estética.

2 Alcance del proyecto A continuación, se presenta el análisis del nivel de cumplimiento de las Leyes Heurísticas para proceder de acuerdo con las conclusiones que se generen con el respectivo rediseño:

3 Recomendaciones para

rediseño

Se recomienda resaltar y mejorar la presentación del menú principal para facilitar su identificación y acceso de manera más sencilla.

Es imprescindible que la página adquiera una mayor versatilidad en su uso a través de los elementos informativos que la componen.

Es crucial dedicarse a fortalecer los elementos estéticos y corporativos de la página web, implementando cambios en la tonalidad y empleando de manera adecuada la paleta de colores.

Es fundamental abordar la accesibilidad, ya que es un elemento clave. Es importante considerar el contraste apropiado entre el fondo y el texto para mejorar la legibilidad y garantizar que la información sea accesible para todos.

DISEÑO DE PÁGINA WEB VIH - SIDA

4 Propuesta de diseño Mapa conceptual

Constitución de logotipo El diseño del Logotipo, está elaborado a partir de una fusión de la herramienta elipse de la cual se extrajo una forma de escudo. después se inserta en una retícula y como resultado final se obtuvo el logotipo.

Color: Los colores rojo, blanco fueron adoptados de la cromática base con respecto a la representación del VIH SIDA.

Constitución de logotipo / Color C: 0 M: 94,31 Y: 90,43 K: 0,14

R: 229 G: 35 B: 33

WEB: #E52321

C: 0 M: 0 Y: 0 K: 0

R: 255 G: 255 B: 255

WEB: #FFFFFF

Esquema

WIREFRAME Prototipo de Baja Fidelidad - Página de inicio

WIREFRAME Prototipo de Baja Fidelidad - Página de Home

WIREFRAME Prototipo de Baja Fidelidad - Página de Contenido 1

WIREFRAME Prototipo de Baja Fidelidad - Página de Contenido 2

WIREFRAME Prototipo de Baja Fidelidad - Página de Contenido 3

WIREFRAME Prototipo de Baja Fidelidad - Página de Contenido 4

WIREFRAME

Prototipo de Alta Fidelidad - Página de inicio

WIREFRAME

Prototipo de Alta Fidelidad - Página de home

WIREFRAME

Prototipo de Alta Fidelidad - Página de Registro

WIREFRAME

Prototipo de Alta Fidelidad - Página de Contáctanos

WIREFRAME

Prototipo de Alta Fidelidad - Página de Buscador

WIREFRAME

Prototipo de Alta Fidelidad - Página de Bienvenida

WIREFRAME

Prototipo de Alta Fidelidad - Página de Misión - Visión

WIREFRAME

Prototipo de Alta Fidelidad - Página de Valores

WIREFRAME

Prototipo de Alta Fidelidad - Página de Ayuda Inmediata

WIREFRAME

Prototipo de Alta Fidelidad - Página de Foro de Experiencias

WIREFRAME

Prototipo de Alta Fidelidad - Página de Retroalimentación

WIREFRAME

Prototipo de Alta Fidelidad - Página de Acompañamiento

WIREFRAME

Prototipo de Alta Fidelidad - Página de Testimonios

WIREFRAME

Prototipo de Alta Fidelidad - Página de Conceptualización

WIREFRAME

Prototipo de Alta Fidelidad - Página de Noticias

MOCKUPS

MOCKUPS

Bibliografía CDC, C. C. (2022, Septiembre 7). HIV Risk Reduction Tool. Retrieved Enero 12, 2024, from U.S. Department of Health & Human Services: https://hivrisk.cdc.gov/ CDC, C. l. (2022, Septiembre 7). Acerca del VIH. Retrieved Enero 12, 2024, from HHs.Gov - Departamento de Salud y Servicios Humanos: https://www.cdc.gov/hiv/spanish/basics/whatishiv.html#

Elaborado por: Marinely Estefanía Cueva Aranda.

Henry Christopher Barrezueta Escobar.

Adriana Fernanda Pilataxi Paltan.

¡Gracias!