A experiência interativa não abriu. Recarregue a página ou veja os projetos abaixo. Recarregar ↻

Case 008Design de app mobile

Boomerang Video Editor

Um editor para iPhone que transforma clipes curtos em loops, desenhado da grade de projetos à tela de exportação. A interface escura, com um único destaque em rosa-choque, mantém a atenção no vídeo.

Meu papel: Fluxos de produto e design de interface
Status do projeto: Design de interface · Acervo do Figma

Capa de apresentação do Boomerang, do arquivo de design original. — Capa de apresentação do arquivo original.

Minha contribuição

Boomerang Video Editor é um app escuro para iPhone que cria loops a partir de clipes curtos. A home chama o app de Boomerang Maker, e o splash resume a ideia em uma linha: “Create loops that Wow!”

Desenhei o fluxo do onboarding à exportação, passando por home, seleção de mídia, paywall, corte, edição e filtros. Este case fica nas telas em que as decisões de edição aparecem com mais clareza.

Gravado do protótipo no Figma. Do splash ao onboarding, até um projeto aberto no editor. Edição: o clipe em cima, as faixas abaixo e uma fileira de ferramentas na base. Trim: duas alças definem o trecho que fica, e as ferramentas dão lugar a Cancel e Save.

Tela de edição com uma mão sob luz neon ocupando a parte de cima, faixas de vídeo e áudio na timeline e uma fileira de ferramentas: Trim, Direction, Speed, Loops, Text, Voice e Music. — Gravado do protótipo no Figma. Do splash ao onboarding, até um projeto aberto no editor. Edição: o clipe em cima, as faixas abaixo e uma fileira de ferramentas na base. Trim: duas alças definem o trecho que fica, e as ferramentas dão lugar a Cancel e Save.

A tela é do clipe

Na tela de edição, o clipe ocupa tudo acima da timeline, e os controles ficam sobre um degradê escuro que nasce da própria imagem. Play, desfazer e refazer, o contador 00:00 / 00:50 e a tela cheia dividem uma só linha, logo acima das faixas que eles controlam.

Abaixo, vídeo e áudio dividem a mesma régua. As ferramentas ficam em uma única fileira na base, que continua além da borda da tela: Trim, Direction, Speed, Loops, Text, Voice, Music e FXs. Cada uma junta ícone e palavra, então nada depende só do símbolo.

Tela My projects com uma grade de duas colunas de miniaturas de vídeo com a duração, um botão rosa New Project e um botão Become a PRO no topo. — Home: projetos em uma grade de duas colunas, com New Project sempre ao alcance. Exportação: escolher a resolução e onde publicar.

Home: projetos em uma grade de duas colunas, com New Project sempre ao alcance. Exportação: escolher a resolução e onde publicar.

Uma tarefa por vez

Trim muda só a metade de baixo da tela. A fileira de ferramentas dá lugar a Cancel e Save, e o trecho selecionado fica entre duas alças na timeline. A única decisão em aberto é onde o clipe começa e termina.

Imagem de apresentação com a marca do app, um laço rosa e azul, ao lado de dois celulares inclinados com as telas de home e edição. — Frame de apresentação com a marca em laço, a home e o editor.

Antes e depois da edição

A home mostra os projetos em uma grade de duas colunas, com a duração de cada um, sob um botão New Project que fica fixo sobre o conteúdo. Na outra ponta, a tela de exportação pede duas coisas: a resolução, com o 4K marcado por uma pequena coroa, e os apps onde publicar.

O rosa acompanha o próximo passo do começo ao fim: New Project, Save, Export. Ele também marca Become a PRO, a única ação da home que fica fora do fluxo de edição.