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!

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: