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 007App móvil y landing page

Hidratasport

Una app de seguimiento de entrenamiento y nutrición, que en pantalla aparece como Hidrata, con macros, entrenamientos, suplementación y análisis con IA, además de la landing page que la presenta. Todas las cifras son datos 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 Hidrata, del archivo de diseño original.
Portada de presentación del archivo original.

01

Mi contribución

Hidratasport aparece en pantalla como Hidrata, una app en portugués creada para apoyar el entrenamiento y la nutrición. El archivo de la app está organizado por flujos, desde el primer uso y el paywall hasta la home, los entrenamientos, los registros, el ranking y el perfil, y un segundo archivo guarda la landing page. Aquí muestro las pantallas de uso diario de la app y la página que las presenta.

Un desplazamiento por el diseño: la landing page, de la app en la mano al plan PRO.
El hero de la landing page en un panel redondeado sobre un degradado azul y negro, con el titular, dos botones y un celular acostado, encima del logo de Hidrata.
El hero de la landing page y la marca Hidrata.

02

Dos versiones de la misma mañana

El archivo guarda una home anterior junto a una más reciente, y la diferencia es un cambio de prioridad. La versión anterior abría con un gráfico de hidratación y los totales del día. La nueva pone primero la sincronización de datos, luego anillos de macros para proteínas, grasas, carbohidratos y calorías frente a sus metas diarias, y convierte el resto de la página en una línea de tiempo del día con etiquetas como Pós-treino.

Pantalla de detalle de la carrera con bloques de distancia y tiempo, el recorrido en un mapa, ritmo, frecuencia cardíaca y calorías, y un gráfico que compara el entrenamiento actual con el anterior.
Pantalla de inicio con un encabezado azul, el logo de Hidrata, una franja de la semana, una tarjeta de sincronización que saluda a Carlos, anillos de macros y el inicio de una línea de tiempo.
Pantalla de actividad con un banner de análisis con IA, una tarjeta de sincronización, un resumen de actividad y un gráfico de barras con las horas por día de la semana.
La página de un entrenamiento con recorrido, ritmo, frecuencia cardíaca y un gráfico comparativo. La home abre con la sincronización de datos, los anillos de macros y la línea de tiempo del día. Resumen de actividad por día o semana, con un banner para el análisis con IA.

03

Una carrera, leída por capas

La página de un entrenamiento empieza con la distancia y el tiempo en dos bloques grandes, y luego el recorrido en un mapa, con el ritmo, la frecuencia cardíaca y las calorías al lado. Más abajo, un gráfico superpone el entrenamiento actual al anterior, con marcadores a lo largo de las líneas. El análisis con IA tiene su propia pestaña, para que los números simples se mantengan despejados.

La pantalla de actividad trabaja a una escala más amplia: un resumen diario o semanal de entrenamientos, distancia y tiempo sobre un gráfico de barras, con un banner cuando un análisis nuevo con IA está listo.

Dos celulares lado a lado, con las etiquetas Versão anterior y Nova versão, que comparan una home anterior con un gráfico y una más reciente con anillos de macros.
Una home anterior junto a la versión más reciente en el archivo de Figma.

04

Una landing page que explica mostrando

La landing page abre con “Treine com inteligência. Performe com precisão.” sobre el azul de la app, con la home en un celular debajo del titular. Desde ahí recorre las funciones principales, cómo encaja la app en una rutina, pantallas reales bajo “Mais do que dados: contexto” y tres pasos para desbloquear el modo PRO invitando a amigos.

Landing page completa: hero azul con la app en un celular, tarjetas de funciones, un bloque sobre cómo funciona, pantallas de la app y una sección PRO de tres pasos.
La landing page completa, del hero a los pasos de PRO.
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 07 App móvil y landing page

Hidratasport

Una app de seguimiento de entrenamiento y nutrición, que en pantalla aparece como Hidrata, con macros, entrenamientos, suplementación y análisis con IA, además de la landing page que la presenta. Todas las cifras son datos 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 Hidrata, del archivo de diseño original.
Portada de presentación del archivo original.

Entrenamiento y nutrición en la misma línea de tiempo

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

Mi contribución

Hidratasport aparece en pantalla como Hidrata, una app en portugués creada para apoyar el entrenamiento y la nutrición. El archivo de la app está organizado por flujos, desde el primer uso y el paywall hasta la home, los entrenamientos, los registros, el ranking y el perfil, y un segundo archivo guarda la landing page. Aquí muestro las pantallas de uso diario de la app y la página que las presenta.

Un desplazamiento por el diseño: la landing page, de la app en la mano al plan PRO.
El hero de la landing page en un panel redondeado sobre un degradado azul y negro, con el titular, dos botones y un celular acostado, encima del logo de Hidrata.
El hero de la landing page y la marca Hidrata.

Dos versiones de la misma mañana

El archivo guarda una home anterior junto a una más reciente, y la diferencia es un cambio de prioridad. La versión anterior abría con un gráfico de hidratación y los totales del día. La nueva pone primero la sincronización de datos, luego anillos de macros para proteínas, grasas, carbohidratos y calorías frente a sus metas diarias, y convierte el resto de la página en una línea de tiempo del día con etiquetas como Pós-treino.

Pantalla de detalle de la carrera con bloques de distancia y tiempo, el recorrido en un mapa, ritmo, frecuencia cardíaca y calorías, y un gráfico que compara el entrenamiento actual con el anterior.
La página de un entrenamiento con recorrido, ritmo, frecuencia cardíaca y un gráfico comparativo.
Pantalla de inicio con un encabezado azul, el logo de Hidrata, una franja de la semana, una tarjeta de sincronización que saluda a Carlos, anillos de macros y el inicio de una línea de tiempo.
La home abre con la sincronización de datos, los anillos de macros y la línea de tiempo del día.

Una carrera, leída por capas

La página de un entrenamiento empieza con la distancia y el tiempo en dos bloques grandes, y luego el recorrido en un mapa, con el ritmo, la frecuencia cardíaca y las calorías al lado. Más abajo, un gráfico superpone el entrenamiento actual al anterior, con marcadores a lo largo de las líneas. El análisis con IA tiene su propia pestaña, para que los números simples se mantengan despejados.

La pantalla de actividad trabaja a una escala más amplia: un resumen diario o semanal de entrenamientos, distancia y tiempo sobre un gráfico de barras, con un banner cuando un análisis nuevo con IA está listo.

Pantalla de actividad con un banner de análisis con IA, una tarjeta de sincronización, un resumen de actividad y un gráfico de barras con las horas por día de la semana.
Resumen de actividad por día o semana, con un banner para el análisis con IA.
Dos celulares lado a lado, con las etiquetas Versão anterior y Nova versão, que comparan una home anterior con un gráfico y una más reciente con anillos de macros.
Una home anterior junto a la versión más reciente en el archivo de Figma.

Una landing page que explica mostrando

La landing page abre con “Treine com inteligência. Performe com precisão.” sobre el azul de la app, con la home en un celular debajo del titular. Desde ahí recorre las funciones principales, cómo encaja la app en una rutina, pantallas reales bajo “Mais do que dados: contexto” y tres pasos para desbloquear el modo PRO invitando a amigos.

Landing page completa: hero azul con la app en un celular, tarjetas de funciones, un bloque sobre cómo funciona, pantallas de la app y una sección PRO de tres pasos.
La landing page completa, del hero a los pasos de PRO.