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

MAT APP

Una app de diario en portugués con calendario, una página de diario para notas y sentimientos, y un lienzo de dibujo para arteterapia. Todas las entradas en pantalla son contenido de ejemplo.

Mi papel
Diseño de interfaz
Estado del proyecto
Diseño de interfaz · archivo de Figma
Un diario en 3D abierto sobre un calendario, con una página pasando.
Un objeto 3D hecho para este mural.

01

Mi contribución

MAT APP es una app de diario en portugués. Su onboarding la presenta como un espacio personal para registrar emociones, escribir con libertad y practicar arteterapia, así que la interfaz tiene que dar cabida a palabras, sentimientos y dibujos en un mismo lugar.

Pantalla de calendario de marzo con pequeñas ilustraciones de colores detrás de algunas fechas, un banner del plan premium y la entrada de ejemplo Um Dia Perfeito debajo.
Página del diario con la nota Um Dia Perfeito, etiquetas que combinan áreas de la vida con sentimientos, una cuadrícula de reacciones con emojis y una fila de miniaturas de la galería.
Un recorrido por las pantallas del diseño, no una grabación: onboarding, la home, el diario y el lienzo. Algunos días llevan una ilustración, y la entrada del día seleccionado está debajo. Una página del diario reúne la nota, las etiquetas de sentimientos, las reacciones y una galería.

03

Palabras, sentimientos e imágenes en una página

La página del diario apila tres tarjetas: la nota escrita, las reacciones y la galería del día. Debajo de la nota, pequeñas etiquetas combinan un área de la vida con un sentimiento, como Trabalho: Felicidade o Saúde: Neutro. En Reações, los emojis elegidos conservan el color y el resto se pone gris, así que la selección se lee de un vistazo.

El lienzo de arteterapia empieza como un único círculo, fechado como una entrada de diario, con deshacer, rehacer y capas arriba, y símbolos y formas abajo.

Cinco celulares inclinados bajo la etiqueta Completo, cada uno con un paso ilustrado del onboarding.
Completo: el onboarding de cinco pasos.

04

Onboarding corto y largo

La página Assets guarda dos versiones de onboarding. Simples es una sola pantalla de bienvenida con un botón Vamos começar. Completo recorre cinco pasos ilustrados, y cada uno presenta una idea; el botón principal y Pular están siempre en el mismo lugar. Las dos se apoyan en las mismas ilustraciones cálidas, que se encargan de buena parte de la explicación.

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

MAT APP

Una app de diario en portugués con calendario, una página de diario para notas y sentimientos, y un lienzo de dibujo para arteterapia. Todas las entradas en pantalla son contenido de ejemplo.

Mi papel
Diseño de interfaz
Estado del proyecto
Diseño de interfaz · archivo de Figma
Un diario en 3D abierto sobre un calendario, con una página pasando.
Un objeto 3D hecho para este mural.

Un diario con espacio para dibujos

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

Mi contribución

MAT APP es una app de diario en portugués. Su onboarding la presenta como un espacio personal para registrar emociones, escribir con libertad y practicar arteterapia, así que la interfaz tiene que dar cabida a palabras, sentimientos y dibujos en un mismo lugar.

Un recorrido por las pantallas del diseño, no una grabación: onboarding, la home, el diario y el lienzo.
Pantalla de calendario de marzo con pequeñas ilustraciones de colores detrás de algunas fechas, un banner del plan premium y la entrada de ejemplo Um Dia Perfeito debajo.
Algunos días llevan una ilustración, y la entrada del día seleccionado está debajo.

El mes como una pequeña galería

La pantalla del calendario hace más que marcar fechas. Algunos días llevan una pequeña ilustración detrás del número, así que el mes empieza a leerse como una galería, mientras los demás días quedan simples. La entrada del día seleccionado está justo debajo de la cuadrícula, bajo la línea Seu diário para o dia selecionado.

Página del diario con la nota Um Dia Perfeito, etiquetas que combinan áreas de la vida con sentimientos, una cuadrícula de reacciones con emojis y una fila de miniaturas de la galería.
Una página del diario reúne la nota, las etiquetas de sentimientos, las reacciones y una galería.

Palabras, sentimientos e imágenes en una página

La página del diario apila tres tarjetas: la nota escrita, las reacciones y la galería del día. Debajo de la nota, pequeñas etiquetas combinan un área de la vida con un sentimiento, como Trabalho: Felicidade o Saúde: Neutro. En Reações, los emojis elegidos conservan el color y el resto se pone gris, así que la selección se lee de un vistazo.

El lienzo de arteterapia empieza como un único círculo, fechado como una entrada de diario, con deshacer, rehacer y capas arriba, y símbolos y formas abajo.

Pantalla de onboarding con la ilustración de un diario rojo con candado y un lápiz, el título Cuide da sua mente, um dia de cada vez, y los botones Próximo y Pular.
El primero de los cinco pasos del onboarding.
Pantalla de dibujo con un lienzo circular transparente, controles de deshacer, rehacer y capas, un botón Salvar y las herramientas Símbolos y Formatos.
El lienzo de arteterapia, listo para símbolos y formas.

Onboarding corto y largo

La página Assets guarda dos versiones de onboarding. Simples es una sola pantalla de bienvenida con un botón Vamos começar. Completo recorre cinco pasos ilustrados, y cada uno presenta una idea; el botón principal y Pular están siempre en el mismo lugar. Las dos se apoyan en las mismas ilustraciones cálidas, que se encargan de buena parte de la explicación.

Cinco celulares inclinados bajo la etiqueta Completo, cada uno con un paso ilustrado del onboarding.
Completo: el onboarding de cinco pasos.