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

Boomerang Video Editor

Un editor para iPhone que convierte clips cortos en loops, diseñado desde la cuadrícula de proyectos hasta la hoja de exportación. Una interfaz oscura con un solo acento rosa intenso mantiene la atención en el video.

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 Boomerang, del archivo de diseño original.
Portada de presentación del archivo original.

01

Mi contribución

Boomerang Video Editor es una app oscura para iPhone que sirve para hacer loops a partir de clips cortos. En su pantalla Home aparece como Boomerang Maker, y el splash resume la idea en una línea: “Create loops that Wow!”

Diseñé el flujo desde el onboarding hasta la exportación, pasando por Home, la selección de multimedia, un paywall, el recorte, la edición y los filtros. Este caso se centra en las pantallas donde las decisiones de edición se ven con más claridad.

Pantalla de edición con una mano iluminada con luz de neón que ocupa la parte superior, pistas de video y audio en una línea de tiempo y una fila de herramientas rotuladas Trim, Direction, Speed, Loops, Text, Voice y Music.
Pantalla Trim con el mismo clip, un segmento resaltado de la línea de tiempo entre dos manijas, y los botones Cancel y Save abajo.
Grabado del prototipo en Figma. Del splash al onboarding y a un proyecto abierto en el editor. Edición: el clip arriba, las pistas debajo y una fila de herramientas en la parte inferior. Trim: dos manijas definen el tramo que se conserva, y las herramientas dejan su lugar a Cancel y Save.

02

El clip se queda con la pantalla

En la pantalla de edición, el clip llena todo lo que hay sobre la línea de tiempo, y los controles van sobre un degradado oscuro que nace del propio video. Reproducir, deshacer y rehacer, el contador 00:00 / 00:50 y la pantalla completa comparten una línea, justo encima de las pistas sobre las que actúan.

Debajo, el video y el audio comparten una misma regla. Las herramientas van en una sola fila en la parte inferior, que continúa más allá del borde de la pantalla: Trim, Direction, Speed, Loops, Text, Voice, Music y FXs. Cada una combina un ícono con una palabra, así que nada depende solo del símbolo.

Pantalla My projects con una cuadrícula de dos columnas de miniaturas de video que muestran sus duraciones, un botón rosa New Project y un botón Become a PRO arriba.
Tarjeta Export video con una vista previa del clip, una opción entre HD, Full HD o 4K, cuatro íconos de redes sociales y los botones Cancel y Export.
Home: proyectos en una cuadrícula de dos columnas, con New Project siempre al alcance. Exportación: elegir una resolución y dónde publicar.

03

Una tarea a la vez

Trim cambia solo la mitad inferior de la pantalla. La fila de herramientas deja su lugar a Cancel y Save, y el tramo seleccionado queda entre dos manijas en la línea de tiempo. La única decisión abierta es dónde empieza y dónde termina el clip.

Imagen de presentación con la marca de la app con forma de bucle, en rosa y azul, junto a dos celulares inclinados que muestran las pantallas Home y de edición.
Frame de presentación con la marca de la app en bucle, Home y el editor.

04

Antes y después de la edición

Home muestra los proyectos en una cuadrícula de dos columnas con sus duraciones, bajo un botón New Project que se mantiene fijo sobre el contenido. En el otro extremo, la hoja de exportación pregunta dos cosas: una resolución, con 4K marcado por una pequeña corona, y las apps donde publicar.

El rosa acompaña el siguiente paso en todo el flujo: New Project, Save, Export. También marca Become a PRO, la única acción de Home que queda fuera del flujo de edició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 08 Diseño de app móvil

Boomerang Video Editor

Un editor para iPhone que convierte clips cortos en loops, diseñado desde la cuadrícula de proyectos hasta la hoja de exportación. Una interfaz oscura con un solo acento rosa intenso mantiene la atención en el video.

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 Boomerang, del archivo de diseño original.
Portada de presentación del archivo original.

De clips cortos a loops, con el video siempre a la vista

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

Mi contribución

Boomerang Video Editor es una app oscura para iPhone que sirve para hacer loops a partir de clips cortos. En su pantalla Home aparece como Boomerang Maker, y el splash resume la idea en una línea: “Create loops that Wow!”

Diseñé el flujo desde el onboarding hasta la exportación, pasando por Home, la selección de multimedia, un paywall, el recorte, la edición y los filtros. Este caso se centra en las pantallas donde las decisiones de edición se ven con más claridad.

Grabado del prototipo en Figma. Del splash al onboarding y a un proyecto abierto en el editor.
Pantalla de edición con una mano iluminada con luz de neón que ocupa la parte superior, pistas de video y audio en una línea de tiempo y una fila de herramientas rotuladas Trim, Direction, Speed, Loops, Text, Voice y Music.
Edición: el clip arriba, las pistas debajo y una fila de herramientas en la parte inferior.

El clip se queda con la pantalla

En la pantalla de edición, el clip llena todo lo que hay sobre la línea de tiempo, y los controles van sobre un degradado oscuro que nace del propio video. Reproducir, deshacer y rehacer, el contador 00:00 / 00:50 y la pantalla completa comparten una línea, justo encima de las pistas sobre las que actúan.

Debajo, el video y el audio comparten una misma regla. Las herramientas van en una sola fila en la parte inferior, que continúa más allá del borde de la pantalla: Trim, Direction, Speed, Loops, Text, Voice, Music y FXs. Cada una combina un ícono con una palabra, así que nada depende solo del símbolo.

Pantalla Trim con el mismo clip, un segmento resaltado de la línea de tiempo entre dos manijas, y los botones Cancel y Save abajo.
Trim: dos manijas definen el tramo que se conserva, y las herramientas dejan su lugar a Cancel y Save.

Una tarea a la vez

Trim cambia solo la mitad inferior de la pantalla. La fila de herramientas deja su lugar a Cancel y Save, y el tramo seleccionado queda entre dos manijas en la línea de tiempo. La única decisión abierta es dónde empieza y dónde termina el clip.

Pantalla My projects con una cuadrícula de dos columnas de miniaturas de video que muestran sus duraciones, un botón rosa New Project y un botón Become a PRO arriba.
Home: proyectos en una cuadrícula de dos columnas, con New Project siempre al alcance.
Tarjeta Export video con una vista previa del clip, una opción entre HD, Full HD o 4K, cuatro íconos de redes sociales y los botones Cancel y Export.
Exportación: elegir una resolución y dónde publicar.

Antes y después de la edición

Home muestra los proyectos en una cuadrícula de dos columnas con sus duraciones, bajo un botón New Project que se mantiene fijo sobre el contenido. En el otro extremo, la hoja de exportación pregunta dos cosas: una resolución, con 4K marcado por una pequeña corona, y las apps donde publicar.

El rosa acompaña el siguiente paso en todo el flujo: New Project, Save, Export. También marca Become a PRO, la única acción de Home que queda fuera del flujo de edición.

Imagen de presentación con la marca de la app con forma de bucle, en rosa y azul, junto a dos celulares inclinados que muestran las pantallas Home y de edición.
Frame de presentación con la marca de la app en bucle, Home y el editor.