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 todos, Aquí dejo mi propuesta. Yo ya he trabajado con Figma anteriormente y esta práctica no me ha resultado demasiado…
Hola a todos, Aquí dejo mi propuesta. Yo ya he trabajado con Figma anteriormente y esta práctica no me…

Hola a todos,

Aquí dejo mi propuesta.

Yo ya he trabajado con Figma anteriormente y esta práctica no me ha resultado demasiado difícil, aunque sí me he liado algo con la nomenclatura y la catalogación de los diferentes componentes.

Lo más difícil para mí siempre ha sido entender cómo estructurar el archivo de forma clara. Figma me recuerda mucho al antiguo Flash, que en paz descanse (actual Animate), por medio de capas de cebolla. Si no desarroVisualización del prototipo de la web de BIKI en tabletllas bien la primera capa el sistema se romperá fácilmente. Supongo que eso es intrínseco al diseño del sistema.

En esta ocasión, me he atrevido incluso a añadir las interactividades desde las variantes de los componentes, lo cual ha simplificado bastante el trabajo.

A nivel diseño, maquetación, y otras cuestiones técnicas como obtención del kit de iconos, colores, breakpoints no he tenido problemas. La funcionalidad del autolayout, si se sabe usar bien (lo cual me ha llevado mucho tiempo), simplifica muchísimo el trabajo.

Aquí dejo los siguientes enlaces:

Prototipo en Figma

Video del prototipo

 

 

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

No hay comentarios.

Publicado por

Deconstrucción de Wallapop

Publicado por

Deconstrucción de Wallapop

Hola a todos! Os dejo mi deconstrucción de la plataforma Wallapop para que le echéis una ojeada Prototipo Un saludo! 01 Deconstrucción de una interfaz gráfica …
Hola a todos! Os dejo mi deconstrucción de la plataforma Wallapop para que le echéis una ojeada Prototipo Un…

Hola a todos!

Os dejo mi deconstrucción de la plataforma Wallapop para que le echéis una ojeada

Prototipo

Un saludo!

Debate0en Deconstrucción de Wallapop

No hay comentarios.

Las intervenciones están cerradas.

Publicado por

Deconstrucción de una Interfaz Gráfica

Publicado por

Deconstrucción de una Interfaz Gráfica

Hola compis! Os dejo en el siguiente enlace el acceso a mi UI Kit y a los tres breakpoints que he realizado a partir de la guía de estilo planteada. Acceso Figma Héctor Barberán A partir del soporte web he podido determinar todos los elementos que luego he empleado para construir las tres propuestas (Web, tablet y móvil). Tras un análisis previo de las tres interfaces que tiene Wallapop para los tres soportes mencionados, comencé por extraer la gama de…
Hola compis! Os dejo en el siguiente enlace el acceso a mi UI Kit y a los tres breakpoints…

Hola compis!

Os dejo en el siguiente enlace el acceso a mi UI Kit y a los tres breakpoints que he realizado a partir de la guía de estilo planteada.

Acceso Figma Héctor Barberán

A partir del soporte web he podido determinar todos los elementos que luego he empleado para construir las tres propuestas (Web, tablet y móvil).

Tras un análisis previo de las tres interfaces que tiene Wallapop para los tres soportes mencionados, comencé por extraer la gama de colores primarios y secundarios de los que hace uso a lo largo de toda la interfaz y así poder componer una paleta de colores que ayudarán al posterior diseño.

En segundo lugar, se han estructurado las tipografías que se utilizan y los diferentes pesos que estas presentan tanto para los headers, botones, cuerpos de texto, etc.

A continuación, se han extraído los elementos más destacados que se pueden recoger en la página de home de la página y de las secciones que se proponían en el briefing del proyecto.

Una vez analizados todos los botones, buscadores, checkbox, iconos, diferentes estados de botones o sliders entre otros elementos, se ha pasado a analizar la estructura de retículas que las tres interfaces tienen para poder comenzar a determinar la distribución de todos los elementos en los diferentes breakpoints que se han diseñado.

En conclusión, me ha parecido muy interesante poder realizar este trabajo, prácticamente no conocía nada de Figma y me ha servido para adquirir una base que me ayude a continuar experimentando.

 

Un saludo!

 

Debate0en Deconstrucción de una Interfaz Gráfica

No hay comentarios.

Publicado por

Wallapop. Deconstrucción de una interfaz gráfica

Publicado por

Wallapop. Deconstrucción de una interfaz gráfica

      Hola a todos, he creado varios archivos de prototipos para varios tipos de dispositivos.   Wallapop on Chrome for…
      Hola a todos, he creado varios archivos de prototipos para varios tipos de dispositivos.   Wallapop…

 

 

 

Hola a todos, he creado varios archivos de prototipos para varios tipos de dispositivos.

 

Wallapop on Chrome for MackBook Pro 16″:

https://www.figma.com/proto/S2GyUsuSsSdxZNwY364yEy/MihaelaClaudiaDiosan?node-id=135%3A1930&scaling=scale-down&page-id=113%3A3498&starting-point-node-id=135%3A1930

Wallapop on Tablet:

https://www.figma.com/proto/S2GyUsuSsSdxZNwY364yEy/MihaelaClaudiaDiosan?node-id=211%3A3376&scaling=scale-down&page-id=211%3A3269&starting-point-node-id=211%3A3614

 

Wallapop on Phone:

 

https://www.figma.com/proto/S2GyUsuSsSdxZNwY364yEy/MihaelaClaudiaDiosan?node-id=211%3A4984&scaling=scale-down&page-id=211%3A3270&starting-point-node-id=211%3A4984

 

Debate0en Wallapop. Deconstrucción de una interfaz gráfica

No hay comentarios.

Publicado por

Deconstrucción de la interfaz gráfica de Wallapop. Prototipado

Deconstrucción de la interfaz gráfica de Wallapop. Prototipado
Publicado por

Deconstrucción de la interfaz gráfica de Wallapop. Prototipado

  El siguiente UI Kit muestra los distintos elementos que se han detectado en el análisis del sitio Wallapop. Se describen en…
  El siguiente UI Kit muestra los distintos elementos que se han detectado en el análisis del sitio Wallapop.…

 


El siguiente UI Kit muestra los distintos elementos que se han detectado en el análisis del sitio Wallapop.
Se describen en este documento todos ellos, sus características gráficas y comportamiento en 3 breakpoints diferentes.
En las siguientes páginas se encuentra la elaboración de una muestra de pantallas de la página en sus diferentes formatos.

UI Kit:

https://www.figma.com/proto/lvSdeDTdvOt5BC8UXewQYq/Prototipo-Wallapop?page-id=0%3A1&node-id=9%3A319&viewport=241%2C48%2C0.1&scaling=scale-down&starting-point-node-id=9%3A466

 

Wallapop on Chrome for MackBook Pro 16″:

https://www.figma.com/proto/lvSdeDTdvOt5BC8UXewQYq/Prototipo-Wallapop?page-id=56%3A1055&node-id=66%3A1989&viewport=241%2C48%2C0.1&scaling=scale-down&starting-point-node-id=66%3A1989

 

APP for IPhone:

https://www.figma.com/proto/lvSdeDTdvOt5BC8UXewQYq/Prototipo-Wallapop?page-id=56%3A1053&node-id=56%3A1204&viewport=241%2C48%2C0.49&scaling=scale-down&starting-point-node-id=56%3A1056

 

Wallapop on Chrome for IPad:

https://www.figma.com/proto/lvSdeDTdvOt5BC8UXewQYq/Prototipo-Wallapop?page-id=56%3A1054&node-id=66%3A3251&viewport=241%2C48%2C0.17&scaling=scale-down&starting-point-node-id=66%3A3067

Debate0en Deconstrucción de la interfaz gráfica de Wallapop. Prototipado

No hay comentarios.