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 019Diseño de app móvil

Boater

Una app en portugués de alquiler de barcos y paseos, que conecta a quienes quieren alquilar con anunciantes. Las reservas, las personas y los precios en pantalla son contenido de ejemplo.

Mi papel
Flujos de producto y diseño de interfaz
Estado del proyecto
Diseño de interfaz · archivo de Figma
Portada de presentación de Boater, del archivo de diseño original.
Portada de presentación del archivo original.

01

Mi contribución

Boater es una plataforma en portugués que, en su propio texto de bienvenida, conecta a personas interesadas en alquilar barcos con anunciantes. El archivo de Figma tiene 52 frames para celular, además de variantes, repartidos entre el flujo de quien alquila, desde la búsqueda y la reserva hasta el check-in y el chat, y un área de anunciante con su propio perfil y sus reservas. Aquí sigo a quien alquila.

Un recorrido por las pantallas del diseño, no una grabación: de la home a una reserva confirmada.

02

El próximo viaje ocupa la parte superior de la pantalla

Cuando una reserva está cerca, una tarjeta oscura queda arriba en la home con lo que se reservó, la fecha, el tiempo restante y un botón, Fazer check-in. Debajo empieza el descubrimiento, con las pestañas Para você y Explorar y tarjetas grandes con fotos de los lugares más buscados. La misma pantalla sirve a quien está a punto de embarcar y a quien aún está eligiendo.

Logo blanco de Boater sobre un fondo oscuro, junto a dos celulares: una pantalla de onboarding con un barco en un lago de montaña y el título Passeios de A a Z, y una home con lugares y paseos populares.
El onboarding y una versión de la home con lugares y paseos populares.

03

Quién estará al timón

La pantalla de información le da al capitán una pestaña propia, separada de las comodidades del barco. Reúne un nombre y una biografía breve, tres cifras de experiencia, paseos y calificación, la fecha en que se verificó una credencial y una lista de certificaciones. La persona y los números son contenido de ejemplo. La estructura muestra la intención: la gente puede comprobar quién conduce el barco, además de lo que ofrece.

Pantalla de inicio con una tarjeta oscura para la próxima reserva, una cuenta regresiva de 30 minutos y un botón Fazer check-in, encima de tarjetas con fotos de los lugares más buscados en Angra dos Reis.
Fotografía a pantalla completa del mar y una isla con el logo blanco de Boater, el mensaje Sua reserva foi criada! y un botón Ver Reservas.
Pantalla de información en la pestaña Capitão da Embarcação, con tarjetas oscuras para la biografía y las estadísticas del capitán de ejemplo, seguidas de una lista de certificaciones.
La próxima reserva y su check-in van encima del descubrimiento. Una reserva creada lleva a la pestaña Reservas. El capitán tiene un perfil con experiencia y certificaciones.

04

Al final, la interfaz le deja paso al mar

La mayor parte de la app es blanca, con tarjetas oscuras. Cuando se crea una reserva, la pantalla cambia a una fotografía del mar a pantalla completa, con el logo, una confirmación breve y un botón, Ver Reservas, que lleva a donde está el estado de la reserva. Otra pantalla reutiliza la fotografía con una tarjeta de consejos para el viaje y un único botón Fechar.

Fotografía del mar oscurecida con el logo de Boater, el título Aproveite seu passeio!, una tarjeta blanca de consejos y recomendaciones y un botón Fechar.
Consejos y recomendaciones para el viaje.
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 19 Diseño de app móvil

Boater

Una app en portugués de alquiler de barcos y paseos, que conecta a quienes quieren alquilar con anunciantes. Las reservas, las personas y los precios en pantalla son contenido de ejemplo.

Mi papel
Flujos de producto y diseño de interfaz
Estado del proyecto
Diseño de interfaz · archivo de Figma
Portada de presentación de Boater, del archivo de diseño original.
Portada de presentación del archivo original.

De elegir el barco a subir a bordo

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

Mi contribución

Boater es una plataforma en portugués que, en su propio texto de bienvenida, conecta a personas interesadas en alquilar barcos con anunciantes. El archivo de Figma tiene 52 frames para celular, además de variantes, repartidos entre el flujo de quien alquila, desde la búsqueda y la reserva hasta el check-in y el chat, y un área de anunciante con su propio perfil y sus reservas. Aquí sigo a quien alquila.

Un recorrido por las pantallas del diseño, no una grabación: de la home a una reserva confirmada.
Logo blanco de Boater sobre un fondo oscuro, junto a dos celulares: una pantalla de onboarding con un barco en un lago de montaña y el título Passeios de A a Z, y una home con lugares y paseos populares.
El onboarding y una versión de la home con lugares y paseos populares.

El próximo viaje ocupa la parte superior de la pantalla

Cuando una reserva está cerca, una tarjeta oscura queda arriba en la home con lo que se reservó, la fecha, el tiempo restante y un botón, Fazer check-in. Debajo empieza el descubrimiento, con las pestañas Para você y Explorar y tarjetas grandes con fotos de los lugares más buscados. La misma pantalla sirve a quien está a punto de embarcar y a quien aún está eligiendo.

Pantalla de inicio con una tarjeta oscura para la próxima reserva, una cuenta regresiva de 30 minutos y un botón Fazer check-in, encima de tarjetas con fotos de los lugares más buscados en Angra dos Reis.
La próxima reserva y su check-in van encima del descubrimiento.

Quién estará al timón

La pantalla de información le da al capitán una pestaña propia, separada de las comodidades del barco. Reúne un nombre y una biografía breve, tres cifras de experiencia, paseos y calificación, la fecha en que se verificó una credencial y una lista de certificaciones. La persona y los números son contenido de ejemplo. La estructura muestra la intención: la gente puede comprobar quién conduce el barco, además de lo que ofrece.

Fotografía a pantalla completa del mar y una isla con el logo blanco de Boater, el mensaje Sua reserva foi criada! y un botón Ver Reservas.
Una reserva creada lleva a la pestaña Reservas.
Pantalla de información en la pestaña Capitão da Embarcação, con tarjetas oscuras para la biografía y las estadísticas del capitán de ejemplo, seguidas de una lista de certificaciones.
El capitán tiene un perfil con experiencia y certificaciones.

Al final, la interfaz le deja paso al mar

La mayor parte de la app es blanca, con tarjetas oscuras. Cuando se crea una reserva, la pantalla cambia a una fotografía del mar a pantalla completa, con el logo, una confirmación breve y un botón, Ver Reservas, que lleva a donde está el estado de la reserva. Otra pantalla reutiliza la fotografía con una tarjeta de consejos para el viaje y un único botón Fechar.

Fotografía del mar oscurecida con el logo de Boater, el título Aproveite seu passeio!, una tarjeta blanca de consejos y recomendaciones y un botón Fechar.
Consejos y recomendaciones para el viaje.