Hola equipo!

Para concluir con este proyecto y también con la asignatura, os dejo en el siguiente enlace el acceso al archivo de Figma que contiene tanto el UI Kit como los prototipos para web y para versión móvil siguiendo las correcciones que he podido realizar después de haber llevado a cabo unos test de usabilidad con 3 usuarios.

Acceso a Figma

También os dejo adjunto todo el informe que recoge el case study del proyecto.

Hola equipo!

Por aquí os dejo el diseño que he realizado para poder crear el prototipo que se nos pedía en esta segunda PEC para que le podías echar un ojo y probar los flujos que se han hecho.

Añado el Moodboard de fotos que he compuesto y que me han servido como inspiración para realizar el diseño.

Aquí va el UI Kit que he generado a partir de este Moodboard y de los Wireframes que nos habían presentado para poder llevar a cabo este trabajo.

En los siguientes enlaces encontraréis los flujos:

Breakpoint Móvil

Breakpoint Pantalla PC

Un saludo y a por la próxima!!

¡Hola a todxs!

A continuación, os comparto la última publicación acerca de la segunda parte de nuestro proyecto de Compresflow. En este caso, nos centraremos en la evaluación de la usabilidad y en la redacción de nuestro caso de estudio.

Si hubiera algún problema con el archivo, os facilito el enlace al documento subido en Google Drive: https://drive.google.com/file/d/1904XUsZGSBvqlTYCVIP_fFDqEc0sJgcn/view?usp=sharing 

También os ofrezco a vuestra disposición el enlace al archivo Figma: https://www.figma.com/file/np7EWe8QmG6tG8yj9K89L7/PEC-4_RUBIO_ILLESCAS_PATRICA?node-id=0%3A1 

Gracias por leer esta nueva entrega.

Hasta la próxima,

Patricia 

¡Hola a todxs!

En el siguiente post os comparto el dossier de esta PEC sobre el Diseño Centrado en los Usuarios y los objetos cotidianos. En este caso, hemos tratado de diseñar y prototipar una cocina de inducción y hemos podido observar, no sólo las funciones de la UI, sino también cómo debemos aplicar las diversas metodologías del UX para comprender que no solo estamos frente un diseño, sino, que el objetivo es ayudar a los usuarios a utilizar e interaccionar con un producto cotidiano, como es un electrodoméstico de cocina. 

He decidido dividir en tres partes el dossier:

1. Discover. Encontraremos todo aquello relacionado con el proceso de research: todo el recorrido para crear y obtener los datos necesarios en las entrevistas; el análisis de los patrones de interacción y la propuesta de la ficha-proto persona con sus correspondientes acciones.
2. Solution Space. Como indica el nombre, ofrecemos una primera propuesta de placa de inducción añadiendo varias de las características que inquietan y necesitan los usuarios estudiados.
3. Usabilidad. Mediante los 10 principios heurísticos de Jakob Nielsen ponemos a prueba la funcionalidad y usabilidad de esta primera propuesta. Después, incluimos aquellos elementos que se han visto perjudicados por el análisis y tratamos de adaptarlo a estos principios de diseño y usabilidad. 

A continuación, os ofrezco el acceso a este dossier a través del siguiente enlace: https://drive.google.com/file/d/1BVJJei76DQv2dnH7-WQmnor40uyWvWBy/view?usp=sharing  

Finalmente, comparto una pequeña presentación de mi prototipo mediante un vídeo en el que os explicaré el proceso y resultado del diseño de la placa de inducción.

También tenéis a vuestra disposición el espacio de trabajo creado en Figma con el proceso del prototipo: https://www.figma.com/file/EZSDmtH2mAPb7uYXDHsmwb/PEC3_DCU_OBJETOS-COTIDIANOS_RUBIO-ILLESCAS_PATRICIA?node-id=1%3A2 

Gracias por leer esta nueva entrega.

Hasta la próxima,

Patricia 

¡Hola a todxs!

En el siguiente post os compartiré mi participación en esta PEC número 2 – Diseño y sistematización de una interfaz gráfica (Proyecto 1/2).

Primero de todo, os comparto el archivo máster en Figma con visión pública:  https://www.figma.com/file/XiiKDgBBCcsl04biKvhHMt/PEC-2_RUBIO_ILLESCAS_PATRICA?node-id=0%3A1

El objetivo de esta PEC era completar los conocimientos adquiridos en la anterior y extenderlos a nivel más avanzado y próximo al entorno profesional. Para ello, se ha diseñado una nueva herramienta que formaría parte de la actual web, Webflow, bajo el nombre de Compresflow con la intención de poder editar, modificar, y principalmente, comprimir imágenes. Por lo que, el tipo de diseño aplicado es Universal con el objetivo de ofrecer una guía básica al abasto y utilidad de cualquier persona que pueda llegar a disfrutar de este servicio. 

Para estructurar esta guía de diseño, me he basado en los tres bloques:

1. El primer proceso ha sido crear una Guía de Estilo manteniendo el estilo de Webflow:

2. A continuación, procedemos a crear el UI Kit con los principales componentes con aquellos que ya existen en la Home de Webflow; y después los que serían para la herramienta Compresflow. En mi caso, me he basado en las webs de Optimizilla y ILoveIMG para tener una base de diseño. 

3. Y Finalmente, mediante un vídeo argumentaré este último bloque, el del prototipo con el diseño responsive de Desktop a móvil para la herramienta Compresflow:

Gracias por leerme.

Nos vemos por el aula,

Patricia Rubio

Hola a todos :)

En esta pec, como todos sabéis, se trataba de realizar una página web para comprimir imágenes. Dicha web tenía que poder visualizarse en un navegador ya sea de escritorio como de smartphone. En mi caso, decidí realizarla como parte de Webflow, pero siendo una marca que nace en webflow no que crece siendo igual que ella. Por este motivo, aún utilizando una identidad corporativa similar, se crea un logotipo para ella y una versión beta de página web.

Buscaba crear una página minimalista, con un estilo diferente a todas las demás que permiten comprimir imágenes y que fuera muy simple para que así, cualquier usuario pueda utilizarla sin ningún problema.

A continuación os dejo el link a mi proyecto de figma en el cual podéis ver tanto la guía como los prototipos: Compresflow en Figma

Por último os dejo un vídeo explicando el flujo:

¡Hola a todxs!

En la siguiente entrada podréis consultar el trabajo realizado para esta PEC mediante la herramienta Figma del cual os dejo disponible el enlace: click aquí 

La tarea trata de analizar y observar los diferentes componentes y características que conforman el ‘’UI Kit’’, en este caso, de elPeriódico.

Primero de todo se ha establecido una guía de estilos: paleta cromática, tipografía, disposición de retículas (grid) para cada uno de los soportes digitales (desktop, tablet y móvil). 

Una vez realizado esto, se han confeccionado los diferentes componentes que conforman la dinámica de el Periódico, en el que se han omitido aquellos bloques que se repiten y que por tanto, pueden resultar poco coherentes en el kit. 

Finalmente, realizamos la puesta en escena de estos componentes mediante el prototipado de cada soporte para analizar la interacción que llevaríamos a cabo con la consulta del menú en la Home y la consulta de la notícia principal o de portada. 

Ha sido todo un reto dado que es la primera vez que creo un ‘’UI Kit’’ y que trabajo con todas las opciones de Figma. Espero poder mejorar este tipo de trabajos en un futuro y aprender más acerca de todas las herramientas y facilidades que dispone Figma.

¡Gracias por leer este post!

¡Hola a todxs!

En esta entrada os presento mi trabajo para esta primera PEC. He escogido la interfaz de The Guardian porque visualmente me pareción más interesante que el caso de El Periódico y me pareció que podría sacarle más partido de cara al ejercicio.

Para esta primera práctica he utilizado la herramienta de Figma. Yo estoy muy familiarizada y trabajo en mi día a día con Adobe XD, pero me quise forzar a utilizar Figma para aprender un nuevo software y porque en el mundo laboral está mucho más implantado Figma que XD. Por ello, me pareció una buena oportunidad para tener un primer acercamiento con Figma. Creo que es una herramienta muy versátil y con muchísimo potencial, pero hay bastantes utilidades como son los componentes o las interacciones que funcionan muy diferente con respecto a XD y creo que ha supuesto un handicap para mí.

Espero que durante las próximas prácticas me pueda familiarizar más y mejor con la herramienta.

He hecho un documento con cinco páginas: portada, UI Kit, versión dektop, versión mobile y versión tablet. Os dejo el link al documento para que podáis hecharle un ojo: https://www.figma.com/file/LKVDClz3N8trif4LMFVlwe/PEC-01.-Deconstrucción-de-una-interfaz-gráfica?node-id=278%3A2084

Además, os dejo algunas imágenes de ejemplo de la práctica:

UI Kit

Prototipos desktop, mobile y tablet

¡Ánimo para ultimar la PEC!

Que tengáis un buen final de semana :)

¡Hola a todxs!

En la siguiente entrada podréis consultar el trabajo realizado para esta PEC mediante la herramienta Figma del cual os dejo disponible el enlace: click aquí 

La tarea trata de analizar y observar los diferentes componentes y características que conforman el ‘’UI Kit’’, en este caso, de elPeriódico.

Primero de todo se ha establecido una guía de estilos: paleta cromática, tipografía, disposición de retículas (grid) para cada uno de los soportes digitales (desktop, tablet y móvil). 

Una vez realizado esto, se han confeccionado los diferentes componentes que conforman la dinámica de el Periódico, en el que se han omitido aquellos bloques que se repiten y que por tanto, pueden resultar poco coherentes en el kit. 

Finalmente, realizamos la puesta en escena de estos componentes mediante el prototipado de cada soporte para analizar la interacción que llevaríamos a cabo con la consulta del menú en la Home y la consulta de la notícia principal o de portada. 

Ha sido todo un reto dado que es la primera vez que creo un ‘’UI Kit’’ y que trabajo con todas las opciones de Figma. Espero poder mejorar este tipo de trabajos en un futuro y aprender más acerca de todas las herramientas y facilidades que dispone Figma.

¡Gracias por leer este post!