Arrastra para explorar. Desplázate o pellizca para acercar. Abre la Ayuda para ver los atajos de teclado.

Yan
ABIERTO A
PROYECTOS
Hablemos
Yan Fontão Boring view
All work

Case 021Diseño de app móvil

Ageu

Una app móvil oscura para pedir cotizaciones de materiales de construcción: anota lo que necesitas, envía un solo pedido y compara lo que llegue. El diseño se centra en una lista de cotizaciones que reúne en un mismo lugar el precio, la cobertura y el plazo de entrega.

Mi papel
Flujos de producto y diseño de interfaz
Estado del proyecto
Diseño de interfaz · Archivo de Figma y de Dribbble
Mockup de Ageu armado para este mural a partir de pantallas reales del proyecto.
Mockup armado para este mural a partir de pantallas reales del proyecto.

01

Mi contribución

Ageu es una app en portugués para pedir cotizaciones de materiales de construcción. Armas un solo pedido, con artículos como cemento, arena y cable eléctrico, y las tiendas de materiales lo responden con cotizaciones.

El alcance en el que trabajé es pequeño: un flujo de pedido, una lista de pedidos y una comparación de cotizaciones, en un tema oscuro de estilo Material con un acento lila.

Pedido número uno con la pestaña Respostas abierta y tres tarjetas de cotización, cada una con un precio en cuotas en verde, un precio al contado, artículos cubiertos, flete, días de entrega y un enlace Comprar.
Pantalla de pedidos que saluda a Thomas, con pestañas de filtro, tres tarjetas de pedido que muestran cuántas cotizaciones recibió cada uno y un estado, y un botón Novo pedido.
Un recorrido por las pantallas del diseño, no una grabación: de una lista de pedidos vacía a un pedido y sus cotizaciones. Cotizaciones: precio, artículos cubiertos, flete y plazo de entrega en una sola tarjeta. Pedidos: cantidad de cotizaciones y estado de un vistazo, filtrados por etapa.

02

Comparar lo que llegó

La lista de cotizaciones es adonde lleva el resto del flujo. Todas las tarjetas siguen el mismo orden: el precio en cuotas en verde, el precio al contado debajo, luego dos chips, uno para los artículos cubiertos y otro para el flete y el plazo de entrega, con Comprar a la derecha.

Esa repetición deja ver, sin abrir nada, qué se gana y qué se cede en cada opción. En los datos de ejemplo, el precio más bajo cubre 20 de los 23 artículos, mientras que otra cotización cubre los 23 con flete gratis y 28 días de espera.

Pantalla de pedidos sin ningún pedido, con una pequeña ilustración oscura de una lista, un mensaje corto en portugués y un botón Novo pedido.
Estado vacío: dónde aparecerán los pedidos y la única acción disponible.

03

Pedidos que puedes seguir

La lista de pedidos muestra cuántas cotizaciones tiene cada pedido y en qué punto va, con pestañas para cada etapa: Todos, Aguardando respostas, Respondidos y Concluídos. Sin pedidos todavía, el estado vacío dice dónde van a aparecer y deja Novo pedido como única acción.

Un pedido nuevo es un flujo de tres pasos, con Voltar, los puntos de progreso y Próximo en una sola barra. En el paso de artículos, cada línea mantiene a la vista su cantidad y su unidad, con editar y eliminar al lado.

Dos pantallas oscuras sobre un fondo negro: el paso de artículos de un pedido nuevo, con una lista de materiales y cantidades, y la lista de cotizaciones del pedido número uno.
Presentación de Dribbble: el paso de artículos junto a la lista de cotizaciones.
000

Instrucciones

Yan Fontão
Toque
Abre una pantalla
Clic
Abre una pantalla
Arrastrar
Recorre el mural
Rueda
El mouse acerca, el trackpad mueve, el pellizco acerca
− +
Aleja hasta ver todo el mural, o acerca
Flechas
En un caso: ↑↓ cambian de caso, ←→ cambian de medio. En el mural: mueven
Espacio
Abre o vuelve
Enter
Abre
Esc Backspace
Vuelve
Home
Vuelve al centro y luego a la apertura
PgUp PgDn
Canal anterior o siguiente
Tab
Recorre proyectos y enlaces
R
Proyecto al azar
0–9
Escribe un canal, 1–61
?
Esta página
Atajos

Música del mural

Archivos comprimidos y nivelados para la web.

ABIERTO A
PROYECTOS
Hablemos

Nuevo mensaje para Yan

Cuéntame quién eres y te respondo.

000

Sobre Yan

Hola, soy Yan

Product Designer/ Design Engineer

La mayoría de los productos pierde algo entre el diseño y el código. Los míos no: investigo el problema, diseño el producto y lanzo la interfaz yo mismo, así que lo que apruebas es exactamente lo que reciben tus usuarios.

  • 2018inicio en software
  • UI + codediseño e implementación

Trabajé con Motorola · Ambev Tech · Rei do Pitaco · OneTool · CESAR

Brasil · Remoto, híbrido o presencial

Retrato de Yan Fontão sentado, con suéter verde y gafas, sosteniendo un micrófono.
ABIERTO A
PROYECTOS
Hablemos
ABIERTO A
PROYECTOS
Hablemos
000

canal bloqueado

Bajo NDA

Ingresa el código

Pídele el código a Yan ↗
ABIERTO A
PROYECTOS
Hablemos
YAN FONTÃO Casos completos

Canal 21 Diseño de app móvil

Ageu

Una app móvil oscura para pedir cotizaciones de materiales de construcción: anota lo que necesitas, envía un solo pedido y compara lo que llegue. El diseño se centra en una lista de cotizaciones que reúne en un mismo lugar el precio, la cobertura y el plazo de entrega.

Mi papel
Flujos de producto y diseño de interfaz
Estado del proyecto
Diseño de interfaz · Archivo de Figma y de Dribbble

Verlo en Dribbble

Mockup de Ageu armado para este mural a partir de pantallas reales del proyecto.
Mockup armado para este mural a partir de pantallas reales del proyecto.

Un pedido de materiales de construcción, todas las cotizaciones lado a lado

Pantallas del archivo de diseño original en Figma y de Dribbble, con datos de ejemplo.

Mi contribución

Ageu es una app en portugués para pedir cotizaciones de materiales de construcción. Armas un solo pedido, con artículos como cemento, arena y cable eléctrico, y las tiendas de materiales lo responden con cotizaciones.

El alcance en el que trabajé es pequeño: un flujo de pedido, una lista de pedidos y una comparación de cotizaciones, en un tema oscuro de estilo Material con un acento lila.

Un recorrido por las pantallas del diseño, no una grabación: de una lista de pedidos vacía a un pedido y sus cotizaciones.
Pedido número uno con la pestaña Respostas abierta y tres tarjetas de cotización, cada una con un precio en cuotas en verde, un precio al contado, artículos cubiertos, flete, días de entrega y un enlace Comprar.
Cotizaciones: precio, artículos cubiertos, flete y plazo de entrega en una sola tarjeta.

Comparar lo que llegó

La lista de cotizaciones es adonde lleva el resto del flujo. Todas las tarjetas siguen el mismo orden: el precio en cuotas en verde, el precio al contado debajo, luego dos chips, uno para los artículos cubiertos y otro para el flete y el plazo de entrega, con Comprar a la derecha.

Esa repetición deja ver, sin abrir nada, qué se gana y qué se cede en cada opción. En los datos de ejemplo, el precio más bajo cubre 20 de los 23 artículos, mientras que otra cotización cubre los 23 con flete gratis y 28 días de espera.

Pantalla de pedidos que saluda a Thomas, con pestañas de filtro, tres tarjetas de pedido que muestran cuántas cotizaciones recibió cada uno y un estado, y un botón Novo pedido.
Pedidos: cantidad de cotizaciones y estado de un vistazo, filtrados por etapa.
Pantalla de pedidos sin ningún pedido, con una pequeña ilustración oscura de una lista, un mensaje corto en portugués y un botón Novo pedido.
Estado vacío: dónde aparecerán los pedidos y la única acción disponible.

Pedidos que puedes seguir

La lista de pedidos muestra cuántas cotizaciones tiene cada pedido y en qué punto va, con pestañas para cada etapa: Todos, Aguardando respostas, Respondidos y Concluídos. Sin pedidos todavía, el estado vacío dice dónde van a aparecer y deja Novo pedido como única acción.

Un pedido nuevo es un flujo de tres pasos, con Voltar, los puntos de progreso y Próximo en una sola barra. En el paso de artículos, cada línea mantiene a la vista su cantidad y su unidad, con editar y eliminar al lado.

Dos pantallas oscuras sobre un fondo negro: el paso de artículos de un pedido nuevo, con una lista de materiales y cantidades, y la lista de cotizaciones del pedido número uno.
Presentación de Dribbble: el paso de artículos junto a la lista de cotizaciones.