Prototipado aula 1

Pública

EVALUACIÓN DE LA USABILIDAD Y CASO DE ESTUDIO

Para terminar con la asignatura, se han realizados las mejoras pertinentes tras la primera evaluación y, a continuación, se ha testeado el producto con usuarios reales para otra evaluación.

En el documento que podemos ver a continuación (case study) está redactado todo el proceso de diseño, así como las mejoras implantadas y conclusiones:

En los siguientes enlaces podréis acceder tanto al la versión móvil como web del último prototipo mejorado.

Prototipado aula 1

Pública

DISEÑO CENTRADO EN EL USUARIO EN LOS OBJETOS COTIDIANOS

Para llevar a cabo esta actividad se ha puesto a prueba el sistema de funcionamiento e interacción de unos ascensores existentes. Posteriormente se han analizado mediante encuestas y criterios de diseño y se han propuesto mejoras siguiendo la evaluación de los heurísticos de Nielsen.

A continuación podéis encontrar la memoria explicativa y el enlace al video del nuevo prototipo.

Enlace al video

Prototipado aula 1

Pública

DISEÑO Y SISTEMATIZACIÓN DE UNA INTERFAZ GRÁFICA (1/2)

Para el desarrollo de esta práctica se he debido diseñar una interfaz de página para acortar enlaces largos en otros más cortos. Ha sido muy gratificante poder desempeñar todo el trabajo desde cero. Se ha investigado acerca del estado del arte actual, los colores propios de la marca y finalmente se ha diseñado el prototipo que podemos ver a continuación.

El prototipo está diseñado fundamentalmente para dos breakpoints específicos (Escritorio y Móvil), por lo que todos los elementos y páginas son responsive. A continuación, podemos visualizar algunos de los componentes del prototipo en Figma, así como su diseño tanto para escritorio como para móvil:

A continuación, podemos ver el video del funcionamiento y acceder al enlace del prototipo escritorio y móvil.

También dejo por aquí el enlace al video tanto en WeTransfer como en Youtube.

Prototipado aula 1

Pública

DECONSTRUCCIÓN DE UNA INTERFAZ GRÁFICA

Con esta práctica he conseguido aprender un montón de cosas sobre cómo funcionan las interfaces gráficas, dificultades, trucos…. La verdad es que me lo he pasado realmente bien deconstruyendo, fijándome en los detalles, aprendiéndome la página de memoria, para después ser capaz de construir una identidad gráfica en forma de UI Kit y, al final, directamente un prototipo de la página web.

En primer lugar, estudié los diferentes breakpoints, su funcionamiento, los elementos que entraban en juego a la hora de construir la web y también los elementos que se repetían.

Así fui capaz de construir un sistema de diseño que contiene desde los estilos tipográficos hasta componentes, pasando por paleta de colores y retículas principales. A continuación, algunas imágenes descriptivas:

Con todos estos elementos y estilos, creamos los prototipos de los tres breakpoints: escritorio, tablet y móvil.

Por último, se han construido los diferentes flujos para el funcionamiento adecuado de la aplicación, añadiendo utilidades a los componentes y incluyendo los scrolls necesarios.

A continuación, podemos ver el video del funcionamiento y acceder al enlace del prototipo móvil, tablet y escritorio.

También dejo por aquí el enlace al video tanto en WeTransfer como en Youtube.