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

NeverSoft

Una app de inversiones en portugués que empieza por cómo está dividido un portafolio y baja hasta cada activo. Todos los nombres y las cifras en pantalla son datos de ejemplo.

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

01

Mi contribución

NeverSoft es una app de gestión de inversiones en portugués. Sus dos pestañas responden a preguntas distintas: Resumo muestra cómo está dividido todo el portafolio y cómo le va, y Ativos mira un activo a la vez.

El mismo archivo de Figma tiene una landing page para empresas, inversionistas, asesores y contadores. Todavía lleva una marca provisional, así que aquí me quedo con la app.

Pantalla de resumen del portafolio con un anillo de composición alrededor del total y las rentabilidades diaria, mensual y anual.
Un desplazamiento por el diseño: la lista de activos y el desempeño de cada uno. Un desplazamiento por el diseño: el resumen del portafolio, del anillo de distribución a los informes. El resumen del portafolio, con cifras de ejemplo.
Pantalla de activos con el activo de mejor desempeño, su variación y un gráfico de crecimiento.
Detalle de un activo, con nombres de empresas y cifras de ejemplo.

02

El anillo y los bloques son la misma imagen

Resumo abre con un gráfico de dona que reparte el portafolio entre Ações, ETFs, Criptoativos, Renda Fixa y Fundos, con el total en el centro y tres cifras simples debajo para la rentabilidad diaria, mensual y anual. Al desplazarse hacia abajo, cada clase de activo se convierte en un bloque del color de su porción, así que el anillo y los bloques se leen como un solo sistema.

El resto de la página trata de la tendencia a lo largo del tiempo: tarjetas de metas con barras de progreso, un gráfico del historial de aportes y dividendos, y una lista de informes en PDF listos para descargar.

Cuatro pantallas de la app inclinadas sobre un fondo negro: el gráfico de dona del portafolio, bloques de categoría con metas, un activo destacado con una línea de crecimiento y una lista de otros activos.
Las pestañas Resumo y Ativos, de todo el portafolio hasta cada activo.

03

Los mismos tres números en cada activo

En Ativos, cada tarjeta repite la misma franja de variación diaria, mensual y anual, así que comparar activos significa leer la misma fila en el mismo lugar. El activo marcado como el de mejor desempeño tiene una tarjeta más completa, con una línea de crecimiento; los demás siguen en una lista, cada uno con una pequeña flecha verde o roja que indica la dirección.

Un celular que muestra el gráfico de dona con su leyenda y las cifras de rentabilidad, apoyado sobre una superficie blanca entre placas de acrílico de color naranja, verde y rojo.
Cinco clases de activo, cada una con su propio color en el anillo y en la leyenda.
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 20 Diseño de app móvil

NeverSoft

Una app de inversiones en portugués que empieza por cómo está dividido un portafolio y baja hasta cada activo. Todos los nombres y las cifras en pantalla son datos de ejemplo.

Mi papel
Diseño de interfaz
Estado del proyecto
Diseño de interfaz · archivo de Figma

Verlo en Dribbble

Portada de presentación de NeverSoft, del archivo de diseño original.
Portada de presentación del archivo original.

Un portafolio leído del todo hasta cada activo

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

Mi contribución

NeverSoft es una app de gestión de inversiones en portugués. Sus dos pestañas responden a preguntas distintas: Resumo muestra cómo está dividido todo el portafolio y cómo le va, y Ativos mira un activo a la vez.

El mismo archivo de Figma tiene una landing page para empresas, inversionistas, asesores y contadores. Todavía lleva una marca provisional, así que aquí me quedo con la app.

Un desplazamiento por el diseño: la lista de activos y el desempeño de cada uno.
Un desplazamiento por el diseño: el resumen del portafolio, del anillo de distribución a los informes.

El anillo y los bloques son la misma imagen

Resumo abre con un gráfico de dona que reparte el portafolio entre Ações, ETFs, Criptoativos, Renda Fixa y Fundos, con el total en el centro y tres cifras simples debajo para la rentabilidad diaria, mensual y anual. Al desplazarse hacia abajo, cada clase de activo se convierte en un bloque del color de su porción, así que el anillo y los bloques se leen como un solo sistema.

El resto de la página trata de la tendencia a lo largo del tiempo: tarjetas de metas con barras de progreso, un gráfico del historial de aportes y dividendos, y una lista de informes en PDF listos para descargar.

Pantalla de resumen del portafolio con un anillo de composición alrededor del total y las rentabilidades diaria, mensual y anual.
El resumen del portafolio, con cifras de ejemplo.
Pantalla de activos con el activo de mejor desempeño, su variación y un gráfico de crecimiento.
Detalle de un activo, con nombres de empresas y cifras de ejemplo.

Los mismos tres números en cada activo

En Ativos, cada tarjeta repite la misma franja de variación diaria, mensual y anual, así que comparar activos significa leer la misma fila en el mismo lugar. El activo marcado como el de mejor desempeño tiene una tarjeta más completa, con una línea de crecimiento; los demás siguen en una lista, cada uno con una pequeña flecha verde o roja que indica la dirección.

Cuatro pantallas de la app inclinadas sobre un fondo negro: el gráfico de dona del portafolio, bloques de categoría con metas, un activo destacado con una línea de crecimiento y una lista de otros activos.
Las pestañas Resumo y Ativos, de todo el portafolio hasta cada activo.
Un celular que muestra el gráfico de dona con su leyenda y las cifras de rentabilidad, apoyado sobre una superficie blanca entre placas de acrílico de color naranja, verde y rojo.
Cinco clases de activo, cada una con su propio color en el anillo y en la leyenda.