FACULTAD DE INGENIERÍA Y CIENCIAS

BÁSICAS

PROYECTO GRUPAL Institución Universitaria Politécnico Gran

colombiano

TRABAJO COLABORATIVO
ENTREGA PREVIA 1

TUTOR:

ALEXANDARA MARIA MONSALVE SILVA

INTEGRANTES:

DAYANA MARCELA COGARIA BOADA

DIEGO FERNANDO SANCHEZ BAYONA

HOOLIBER FERNANDO RODRIGUEZ SANCHEZ

JEAN MAHECHA RAMIREZ

EDISSON FERNANDO SANABRIA VILLAIZAN

INSTITUCIÓN UNIVERSITARIA POLITÉCNICO GRAN COLOMBIANO

FACULTAD DE INGENIERIA
 FACULTAD DE INGENIERÍA Y CIENCIAS
BÁSICAS

PROYECTO GRUPAL Institución Universitaria Politécnico Gran

colombiano

2020

INTRODUCCION

Este documento tiene como propósito presentar el desarrollo de las actividades propuestas para

para la entrega uno del módulo de Frond End, donde se va a analizar y presentar una propuesta de

diseño par algunas aplicaciones determinadas e el modula de las cuales elegimos Una.

La aplicación Elegida para realizar el análisis y propuesta es la aplicación de una red social

que se encuentra en el repositorio en git https://github.com/configuroweb/redsocial la cual esta

desarrollada en PHP en donde vamos a implementar tecnologías frond end.

 FACULTAD DE INGENIERÍA Y CIENCIAS
BÁSICAS

PROYECTO GRUPAL Institución Universitaria Politécnico Gran

colombiano

OBJETIVOS

OBJETIVO GENERAL

Mejoramiento de la aplicación red social en todos los aspectos posibles para que sea una interfaz

amigable y funcional con las necesidades de los usuarios presentando diferentes análisis y mejoras

del lado del usuario.

OBJETIVOS ESPECIFICOS

 Instalar la aplicación de red social en los equipos

 Ver la funcionalidad y el diseño de la aplicación

 Crear una propuesta de diseño

 Utilizar un software para crear mockups donde se diseñó un prototipo de la propuesta

 FACULTAD DE INGENIERÍA Y CIENCIAS
BÁSICAS

PROYECTO GRUPAL Institución Universitaria Politécnico Gran

colombiano

DESARROLLO DE LA ENTREGA

Requerimiento 1: elabore una propuesta que permita mejorar la interacción del usuario con este

software.

Para realizar la propuesta se usó el software Belsamiq Wireframes para la creación de Mockups.

Sección Login

Al ingresar a la aplicación de red social encontramos un login con un título muy grande a

comparación del recuadro donde está el usuario y la contraseña.

La propuesta es dejar el fondo de un solo color colocar el logo de la red social y colocar el nombre

de un tamaño más pequeño, en el input va el nombre de lo que se debe digitar (placeholder) y

unos botones muy sencillos, el botón iniciar sesión y registrarse.

 FACULTAD DE INGENIERÍA Y CIENCIAS
BÁSICAS

PROYECTO GRUPAL Institución Universitaria Politécnico Gran

colombiano

Sección Registro

En la pantalla de registro se encuentra igual que en el login, solo cambian los campos para el

ingreso de la información además de que el selector de "Genero” está más pequeño que los

demás.

Para este también se mantiene la misma idea del login dejar el fondo de un solo color, los botones

del mismo diseño, la diferencia sera que se ubicaran las etiquetas de los requerimientos que se

deben insertar, al lado de todos los campos, que también tendrán el mismo tamaño.
 FACULTAD DE INGENIERÍA Y CIENCIAS
BÁSICAS

PROYECTO GRUPAL Institución Universitaria Politécnico Gran

colombiano

Pagina Inicio

Al ingresar tenemos una página de inicio donde los datos del perfil se muestran de una manera

desorganizada, el campo de digitar comentarios es muy pequeño y los botones no se ajustan.

 FACULTAD DE INGENIERÍA Y CIENCIAS
BÁSICAS

PROYECTO GRUPAL Institución Universitaria Politécnico Gran

colombiano

Hemos dividido en dos columnas la pantalla de Inicio, en un lado está la información de perfil para

poder cambiar la foto y en la otra columna estará el espacio para digitar un comentario y el

historial de otros comentarios de los amigos, la barra principal se ha dejado igual y adicionalmente

se agregará el logo de la red social.

Pagina Perfil

En la venta de editar perfil los campos se ven muy desorganizados, el tamaño de los campos de

tipo input no es igual, el cambiar imagen está muy pegado a l formulario y el botón guardar se

pierde en la pantalla.
 FACULTAD DE INGENIERÍA Y CIENCIAS
BÁSICAS

PROYECTO GRUPAL Institución Universitaria Politécnico Gran

colombiano

También se ha manejado la opción de las dos columnas como en el inicio, en un lado la foto y el

botón de cambiarla y en la otra columna el formulario para editar la información, de una forma

muy parecida a los que sale en la sección de registro.

Pagina Mensajes

Al ingresar en la opción de mensaje se ve el diseño del perfil desorganizado y la barra de

comentarios que en este caso no debería estar ubicado en esa sección, porque ya se encuentra en
 FACULTAD DE INGENIERÍA Y CIENCIAS
BÁSICAS

PROYECTO GRUPAL Institución Universitaria Politécnico Gran

colombiano

el inicio, para colocar los mensajes hay que seleccionar el usuario para escribir y solo muestra los

mensajes que se envían.

Mantenemos el diseño de dos columnas, en un lado los amigos y en el otro lado los mensajes en

una forma de chat.

Pagina Amigos
 FACULTAD DE INGENIERÍA Y CIENCIAS
BÁSICAS

PROYECTO GRUPAL Institución Universitaria Politécnico Gran

colombiano

En esta sección de amigos, en la parte superior aparece información del perfil y en la parte inferior

aparecen los amigos en filas con la foto el nombre y el botón de eliminar.

En esta paginas se propone el diseño de dos columnas, en la columna de la izquierda la

información de perfil del usuario y en la columna de la derecha el listado de amigos en forma de

grilla.
 FACULTAD DE INGENIERÍA Y CIENCIAS
BÁSICAS

PROYECTO GRUPAL Institución Universitaria Politécnico Gran

colombiano

CONLUSIONES

El diseño de las interfaces es muy importante para que los usuarios se sientan cómodos con la

página, también ayuda a la interacción de una manera más fácil, podemos crear diseños amigables

que no sean tan cargados de colores y funciones.

Las funciones de la página se deben resaltar a través del diseño así las personas podrán tener una

funcionalidad más intuitiva