Publicado por

04. Evaluación de la usabilidad y caso de estudio (proyecto 2/2)

04. Evaluación de la usabilidad y caso de estudio (proyecto 2/2)
Publicado por

04. Evaluación de la usabilidad y caso de estudio (proyecto 2/2)

Hola equipo! Para concluir con este proyecto y también con la asignatura, os dejo en el siguiente enlace el acceso al archivo…
Hola equipo! Para concluir con este proyecto y también con la asignatura, os dejo en el siguiente enlace el…

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.

Debate0en 04. Evaluación de la usabilidad y caso de estudio (proyecto 2/2)

No hay comentarios.

Publicado por

PEC 2. Diseño y Sistematización de una interfaz gráfica

PEC 2. Diseño y Sistematización de una interfaz gráfica
Publicado por

PEC 2. Diseño y Sistematización de una interfaz gráfica

Hola equipo! Por aquí os dejo el diseño que he realizado para poder crear el prototipo que se nos pedía en esta…
Hola equipo! Por aquí os dejo el diseño que he realizado para poder crear el prototipo que se nos…

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!!

 

Debate0en PEC 2. Diseño y Sistematización de una interfaz gráfica

No hay comentarios.

Publicado por

PEC 4 – EVALUACIÓN DE LA USABILIDAD Y CASO DE ESTUDIO

PEC 4 – EVALUACIÓN DE LA USABILIDAD Y CASO DE ESTUDIO
Publicado por

PEC 4 – EVALUACIÓN DE LA USABILIDAD Y CASO DE ESTUDIO

¡Hola a todxs! A continuación, os comparto la última publicación acerca de la segunda parte de nuestro proyecto de Compresflow. En este…
¡Hola a todxs! A continuación, os comparto la última publicación acerca de la segunda parte de nuestro proyecto de…

¡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 

Debate0en PEC 4 – EVALUACIÓN DE LA USABILIDAD Y CASO DE ESTUDIO

No hay comentarios.

Publicado por

PEC 3 – Diseño Centrado en los Usuarios y los objetos cotidianos

PEC 3 – Diseño Centrado en los Usuarios y los objetos cotidianos
Publicado por

PEC 3 – Diseño Centrado en los Usuarios y los objetos cotidianos

¡Hola a todxs! En el siguiente post os comparto el dossier de esta PEC sobre el Diseño Centrado en los Usuarios y…
¡Hola a todxs! En el siguiente post os comparto el dossier de esta PEC sobre el Diseño Centrado en…

¡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 

Debate0en PEC 3 – Diseño Centrado en los Usuarios y los objetos cotidianos

No hay comentarios.

Publicado por

PEC número 2 – Diseño y sistematización de una interfaz gráfica (Proyecto 1/2)

PEC número 2 – Diseño y sistematización de una interfaz gráfica (Proyecto 1/2)
Publicado por

PEC número 2 – Diseño y sistematización de una interfaz gráfica (Proyecto 1/2)

¡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…
¡Hola a todxs! En el siguiente post os compartiré mi participación en esta PEC número 2 – Diseño y…

¡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

Debate0en PEC número 2 – Diseño y sistematización de una interfaz gráfica (Proyecto 1/2)

No hay comentarios.

Publicado por

02 Diseño y sistematización de una interfaz gráfica (projecto 1/2)

02 Diseño y sistematización de una interfaz gráfica (projecto 1/2)
Publicado por

02 Diseño y sistematización de una interfaz gráfica (projecto 1/2)

Hola a todos :) En esta pec, como todos sabéis, se trataba de realizar una página web para comprimir imágenes. Dicha web…
Hola a todos :) En esta pec, como todos sabéis, se trataba de realizar una página web para comprimir…

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:

Debate0en 02 Diseño y sistematización de una interfaz gráfica (projecto 1/2)

No hay comentarios.

Publicado por

PEC2 – Diseño y sistematización de una interfaz gráfica

Publicado por

PEC2 – Diseño y sistematización de una interfaz gráfica

En la siguiente entrada os muestro brevemente el trabajo realizado para la PEC2 (Diseño y sistematización de una interfaz gráfica) de la…
En la siguiente entrada os muestro brevemente el trabajo realizado para la PEC2 (Diseño y sistematización de una interfaz…

En la siguiente entrada os muestro brevemente el trabajo realizado para la PEC2 (Diseño y sistematización de una interfaz gráfica) de la asignatura prototipado con motivo del requisito de su publicación en Folio Agora.

El primer paso fue estudiar la marca visual de webflow y partiendo de la pequeña guía que se puede encontrar en su web trasladar dichos parámetros a un UI kit / Design System. Gracias a este despiece de elementos, podemos detallar y diferenciar cada diferente ingrediente, elemento y cada uno de sus estados para dar una visión global y organizada de todo el ecosistema de átomos que conformarán todas las aplicaciones digitales de Webflow, en este caso aplicado a la hipotética herramienta webflow.

Se han diseñado varias pantallas de la herramienta para web en escritorio y móvil. El objetivo del diseño de estas pantallas es reflejar el flujo que un usuario realizaría para comprimir 4 imágenes JPG y aplicar un recorte y lo mismo con 4 imágenes en formato PNG.

El diseño de la interfaz del prototipo trata de reflejar la identidad visual de web flow de una manera directa y minimalista, destacando al usuario las opciones principales a realizar en cada momento y ofreciendo de manera intuitiva, fácil y rápida una posible solución rápida para la consecuención de sus objetivos, en este caso, comprimir unas imágenes.

 

Los prototipos de os flujos y design system están configurados para cambiar automaticamente de slide cada 2 segundos, si quereis pararlos podéis cambiar al modo inspección en la barra lateral derecha.

Design System / UI kit

https://xd.adobe.com/view/cd466fbc-e2fe-4ccf-95f8-c4285957155e-9815/

Flow 1 – Comprimir JPG en desktop

https://xd.adobe.com/view/a980e9fc-af79-4e52-86a3-8f281a07c5f9-fcd3/

Flow 2 – Comprimir PNG en desktop

https://xd.adobe.com/view/69510919-10ff-42ec-819c-dc1f587d8ba5-3c02/

Flow 3 – Comprimir JPG en móvil

https://xd.adobe.com/view/2404fd0b-9103-45dc-9629-2a4d8d05aae0-7157/

Flow 4 – Comprimir PNG en móvil

https://xd.adobe.com/view/207724de-0909-4404-97ca-e4642cb6f237-7524/

Debate0en PEC2 – Diseño y sistematización de una interfaz gráfica

No hay comentarios.

Publicado por

PEC 1 – Deconstrucción de una interfaz gráfica

PEC 1 – Deconstrucción de una interfaz gráfica
Publicado por

PEC 1 – Deconstrucción de una interfaz gráfica

¡Hola a todxs! En la siguiente entrada podréis consultar el trabajo realizado para esta PEC mediante la herramienta Figma del cual os…
¡Hola a todxs! En la siguiente entrada podréis consultar el trabajo realizado para esta PEC mediante la herramienta Figma…

¡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!

Debate0en PEC 1 – Deconstrucción de una interfaz gráfica

No hay comentarios.

Publicado por

PEC 1. Deconstrucción de una interfaz gráfica

PEC 1. Deconstrucción de una interfaz gráfica
Publicado por

PEC 1. Deconstrucción de una interfaz gráfica

¡Hola a todxs! En esta entrada os presento mi trabajo para esta primera PEC. He escogido la interfaz de The Guardian porque…
¡Hola a todxs! En esta entrada os presento mi trabajo para esta primera PEC. He escogido la interfaz de…

¡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 :)

 

 

 

 

Debate1en PEC 1. Deconstrucción de una interfaz gráfica

Publicado por

PEC 1 – Deconstrucción de una interfaz gráfica

PEC 1 – Deconstrucción de una interfaz gráfica
Publicado por

PEC 1 – Deconstrucción de una interfaz gráfica

¡Hola a todxs! En la siguiente entrada podréis consultar el trabajo realizado para esta PEC mediante la herramienta Figma del cual os…
¡Hola a todxs! En la siguiente entrada podréis consultar el trabajo realizado para esta PEC mediante la herramienta Figma…

¡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!

Debate0en PEC 1 – Deconstrucción de una interfaz gráfica

No hay comentarios.