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.