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/