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/
Este es un espacio de trabajo personal de un/a estudiante de la Universitat Oberta de Catalunya. Cualquier contenido publicado en este espacio es responsabilidad de su autor/a.
Debatecontribution 0en PEC2 – Diseño y sistematización de una interfaz gráfica
No hay comentarios.
Lo siento, debes estar conectado para publicar un comentario.