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

Anji

Pantallas de app y una landing page para Anji, un compañero de IA posicionado en torno a la espiritualidad y el bienestar. El diseño reúne la elección de guías de conversación, un registro diario del estado de ánimo y una lectura del día.

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

01

Mi contribución

Anji se presenta como un compañero de IA con dos vertientes, la conversación basada en la fe y el bienestar mental, y su landing page lo llama “a sanctuary for mind and soul”.

Este caso trata de la interfaz que diseñé: cómo una persona elige una conversación, marca su estado de ánimo y lee lo que le devuelve la app.

Un desplazamiento por el diseño: la landing page, de la primera promesa a la llamada final.

02

Elegir con quién hablar

La pestaña de chat abre con cuatro tarjetas, no con un campo vacío. Cada tarjeta lleva un avatar ilustrado, un nombre, un rol y una línea sobre el tipo de conversación que se puede esperar, así que la elección se hace antes de escribir nada. Amos, Iris, Eli y Lucy cubren la vertiente de la fe, y la landing page suma un segundo grupo de guías para el bienestar.

Pantalla que pregunta con quién conversar, sobre un degradado lila, con cuatro tarjetas blancas para Amos, Iris, Eli y Lucy, cada una con un avatar ilustrado, un rol y una descripción de una línea.
Pantalla de lectura con una fila de recuadros de fechas de colores, la fecha 26 de julio, un título en portugués y un texto largo sobre la fe, encima de una barra con Back y Send to a friend.
Registro del estado de ánimo con cinco círculos ilustrados para Loved, Happy, Calm, Anxious y Sad, una franja semanal arriba y una tarjeta que explica qué desbloquea elegir un estado de ánimo.
Inicio del chat: cuatro guías, cada una con un rol y una línea sobre la conversación. Lectura: el texto del día, con fechas en los colores de los estados de ánimo y una forma de compartirlo. Today: elegir un estado de ánimo desbloquea el mantra, la oración y el horóscopo del día.

03

Una pequeña rutina diaria

La pantalla Today pregunta cómo te sientes y ofrece cinco estados de ánimo ilustrados: loved, happy, calm, sad y anxious. Una franja semanal arriba mantiene a la vista los días anteriores, y la tarjeta de abajo dice qué desbloquea la elección: un mantra, una oración y un horóscopo del día.

La pantalla de lectura lleva esos colores de los estados de ánimo a su fila de fechas. El texto largo está en una serif con espacio para leer, y Back y Send to a friend flotan en una barra abajo.

Landing page completa en morado profundo, con un título de hero y un celular inclinado, dos grupos de tarjetas de guías, cuatro tarjetas de funciones, banners de fe y terapia y una llamada a la acción final.
Landing page, del hero a la llamada a la acción final.

04

Las mismas dos vertientes en la landing page

La landing page va de un hero morado a dos grupos de tarjetas de guías, cuatro funciones principales y banners separados de Faith Focus y Therapy Focus. Ilustraciones de línea fina sobre tarjetas oscuras dan a cada guía su propia forma, y los dos banners mantienen separados los dos posicionamientos, cada uno con su color.

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

Anji

Pantallas de app y una landing page para Anji, un compañero de IA posicionado en torno a la espiritualidad y el bienestar. El diseño reúne la elección de guías de conversación, un registro diario del estado de ánimo y una lectura del día.

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

Una app de acompañamiento espiritual y de bienestar, con su landing page

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

Mi contribución

Anji se presenta como un compañero de IA con dos vertientes, la conversación basada en la fe y el bienestar mental, y su landing page lo llama “a sanctuary for mind and soul”.

Este caso trata de la interfaz que diseñé: cómo una persona elige una conversación, marca su estado de ánimo y lee lo que le devuelve la app.

Pantalla que pregunta con quién conversar, sobre un degradado lila, con cuatro tarjetas blancas para Amos, Iris, Eli y Lucy, cada una con un avatar ilustrado, un rol y una descripción de una línea.
Inicio del chat: cuatro guías, cada una con un rol y una línea sobre la conversación.
Un desplazamiento por el diseño: la landing page, de la primera promesa a la llamada final.

Elegir con quién hablar

La pestaña de chat abre con cuatro tarjetas, no con un campo vacío. Cada tarjeta lleva un avatar ilustrado, un nombre, un rol y una línea sobre el tipo de conversación que se puede esperar, así que la elección se hace antes de escribir nada. Amos, Iris, Eli y Lucy cubren la vertiente de la fe, y la landing page suma un segundo grupo de guías para el bienestar.

Pantalla de lectura con una fila de recuadros de fechas de colores, la fecha 26 de julio, un título en portugués y un texto largo sobre la fe, encima de una barra con Back y Send to a friend.
Lectura: el texto del día, con fechas en los colores de los estados de ánimo y una forma de compartirlo.

Una pequeña rutina diaria

La pantalla Today pregunta cómo te sientes y ofrece cinco estados de ánimo ilustrados: loved, happy, calm, sad y anxious. Una franja semanal arriba mantiene a la vista los días anteriores, y la tarjeta de abajo dice qué desbloquea la elección: un mantra, una oración y un horóscopo del día.

La pantalla de lectura lleva esos colores de los estados de ánimo a su fila de fechas. El texto largo está en una serif con espacio para leer, y Back y Send to a friend flotan en una barra abajo.

Registro del estado de ánimo con cinco círculos ilustrados para Loved, Happy, Calm, Anxious y Sad, una franja semanal arriba y una tarjeta que explica qué desbloquea elegir un estado de ánimo.
Today: elegir un estado de ánimo desbloquea el mantra, la oración y el horóscopo del día.

Las mismas dos vertientes en la landing page

La landing page va de un hero morado a dos grupos de tarjetas de guías, cuatro funciones principales y banners separados de Faith Focus y Therapy Focus. Ilustraciones de línea fina sobre tarjetas oscuras dan a cada guía su propia forma, y los dos banners mantienen separados los dos posicionamientos, cada uno con su color.

Landing page completa en morado profundo, con un título de hero y un celular inclinado, dos grupos de tarjetas de guías, cuatro tarjetas de funciones, banners de fe y terapia y una llamada a la acción final.
Landing page, del hero a la llamada a la acción final.