Diseño de apps de editor de video: rediseño de la pantalla del editor, antes y después

Un editor de video tiene un solo trabajo: dejar que alguien dé forma a un video mientras lo mira. El primer borrador de abajo tiene todas las herramientas que un creador podría pedir, pero la toma queda pequeña entre barras negras, catorce herramientas minúsculas se pelean por el pulgar, las pistas no llevan nombre y una barra de pestañas ocupa espacio en una pantalla de la que nadie quiere salir.

La corrección conserva todas las funciones y le devuelve el espacio al video. Sigue el editor de la app Edits de Instagram, y cada cambio de abajo es uno que puedes copiar.

La pantalla completa, antes y después

Borrador junior

Corregido

A la izquierda, el video es lo más pequeño de la pantalla. La toma es una tira de 164 px de ancho entre barras negras, y casi todo lo demás es un control: cuatro menús desplegables, catorce herramientas, cinco botones, cinco controles deslizantes, una fila de medios y un banner de mejora de plan.

A la derecha, la pantalla se lee de arriba abajo en el orden en que trabaja un creador: salir o exportar, mirar la toma, mover el cabezal, elegir un clip, actuar sobre él. La vista previa mide 390 por 404, el texto va de 11 a 17 px frente a los 7 a 11 px del borrador, y no hay barra de pestañas.

Qué cambió, medido

Corrección 1: reduce la barra superior a lo necesario

Antes

Después

Una flecha de volver, el logotipo Cutline, el nombre Untitled Project 1 (edited), luego iconos de deshacer, rehacer, ayuda y ajustes y un pequeño botón naranja EXPORTAR 1080P. Frente a un simple icono de cerrar, el nombre Road trip con una flecha, 1080p y un botón coral Exportar más grande.

La barra del borrador contiene ocho cosas en 26 px de alto, y el nombre del proyecto queda apretado por un logotipo que nadie necesita dentro de su propio editor. Exportar es el botón más importante de la pantalla, y también uno de los más pequeños, una pastilla diminuta en la esquina lejana.

La barra corregida conserva cuatro cosas: cerrar, el nombre, la calidad y Exportar. Exportar mide 33 px de alto con un solo relleno coral, así que es el único objeto llamativo arriba. La flecha junto al nombre abre el menú del proyecto, donde ahora viven ayuda, ajustes, bucle y mejora de plan. Deshacer y rehacer bajaron para quedar junto al cabezal, donde ya está la mano.

Regla para reutilizar: la barra superior responde a "dónde estoy y cómo termino". Todo lo demás va detrás del nombre.

Corrección 2: dale al video todo el ancho

Antes

Después

Un cuadro corto con barras negras a ambos lados y una toma vertical de una furgoneta naranja en el centro, de 164 px de ancho. Frente a la misma toma ocupando todo el ancho, 390 px de ancho y 404 de alto, con esquinas rectas y sin controles encima.

Un editor de video que muestra el video pequeño ha entendido mal su propio trabajo. En el borrador el cuadro es 16:9 y la toma es vertical, así que las barras negras se comen más de la mitad del ancho. El cuadro además tiene borde, esquinas redondeadas y una marca de agua y una pastilla de código de tiempo dibujadas encima de la imagen.

La corrección deja que la vista previa llene el ancho de la pantalla sin esquinas, sin borde y sin nada encima. Ves el fotograma que estás cortando, a un tamaño en el que puedes juzgar el foco y el encuadre. El código de tiempo bajó debajo de la vista previa, y la marca de agua desapareció del editor.

Regla para reutilizar: lo que el usuario vino a cambiar debe ser lo más grande de la pantalla, sin nada pintado encima.

Corrección 3: muestra las herramientas del clip elegido

Antes

Después

Cuatro menús desplegables de Formato 16:9, Calidad 1080p, FPS 30 y Color Rec.709, luego catorce herramientas pequeñas en dos filas de siete con etiquetas de 8 px: Recortar, Dividir, Velocidad, Volumen, Filtros, Ajustar, Encuadrar, Texto, Stickers, Efectos, Música, Voz, Máscara y Rotar, y una etiqueta Clip 2 con Eliminar, Duplicar, Copiar, Reemplazar e Invertir. Frente a una fila plana de cinco herramientas grandes, Dividir, Volumen, Velocidad, Efectos y Eliminar, con una flecha de volver a la izquierda, que se sale por el borde derecho.

El borrador pone todas las herramientas en pantalla a la vez, se apliquen o no a lo que elegiste. Catorce iconos de 16 px con etiquetas de 8 px son mucho que leer y un objetivo más pequeño que tocar, y los botones del clip van en una línea aparte debajo.

La corrección tiene dos estados. Con un clip elegido, una fila plana muestra lo que puedes hacerle a ese clip: Dividir, Volumen, Velocidad, Efectos, Eliminar y Ajustar, con la fila saliéndose por el borde para que sepas que se desliza. La flecha de la izquierda vuelve a la fila principal con Texto, Stickers, Música, Voz, Filtros, Encuadrar, Rotar y Máscara. Los iconos crecen a 22 px en trazo grueso y las etiquetas a 12 px.

No se recortó nada. Recortar ahora es el tirador amarillo en el propio clip, las propiedades del clip están detrás de Ajustar, y el formato, los fotogramas por segundo y el color están detrás del botón de calidad de la barra superior.

Regla para reutilizar: muestra herramientas para lo que está seleccionado. Una herramienta que no puede actuar sobre la selección es ruido.

Corrección 4: haz legible la línea de tiempo

Antes

Después

Una regla de 00:00 a 00:40, una pequeña tira de cinco fotogramas, una pista morada, una pista verde y una onda de audio verde, ninguna con nombre, y un cabezal rojo de 1 px. Frente a una regla con un zoom más fino, un carril con nombre Film Grain, un carril de texto coral llamado Road trip, un carril de música magenta llamado Golden Hour con una onda, una tira de fotogramas que se sale por ambos bordes con un tirador amarillo y una etiqueta de 10.0s en el clip elegido, y un único cabezal blanco de 3 px que cruza todos los carriles.

Aquí es donde vive un editor, y el borrador lo trata como una decoración. Las cuatro pistas miden 18 px de alto y no tienen etiquetas, así que no puedes saber cuál es texto, cuál es música y cuál es un efecto sin tocar cada una. El cabezal mide 1 px de ancho, y la tira de fotogramas tiene miniaturas redondeadas con huecos que la hacen parecer una fila de stickers.

La línea de tiempo corregida tiene carriles con nombre: Film Grain, un carril de texto llamado Road trip y un carril de música llamado Golden Hour. Cada uno mide de 24 a 36 px de alto y va de borde a borde sin esquinas redondeadas y con 4 px entre ellos.

La tira de fotogramas mide 58 px de alto y se lee como una sola pieza de metraje. El clip elegido recibe un tirador amarillo con una flecha y una etiqueta de duración, y un único cabezal blanco de 3 px lo cruza todo.

El tiempo también es honesto. El zoom es de 153 pt por segundo, así que el cabezal descansa un poco después de los 12 segundos, y el tiempo en dos líneas marca 00:12 sobre 00:48.

Regla para reutilizar: un carril sin nombre es un misterio. Etiqueta cada pista y dale a la selección un color llamativo.

Las correcciones menores

• Sin barra de pestañas. Un editor es un lugar en el que te quedas, así que Inicio, Proyectos, Editor, Plantillas y Perfil cedían 72 px a una barra que nadie toca mientras corta.
• Un acento por función. El coral marca Exportar y el carril de texto, el amarillo marca el clip elegido. El borrador gasta naranja, morado, verde y rojo en pistas que no dicen qué son.
• Controles simples. Los círculos detrás de reproducir, deshacer y rehacer desaparecieron. Los iconos simples se leen más limpios sobre fondo oscuro.
• Marca de agua y pastilla de código de tiempo fuera de la vista previa. El tiempo vive debajo de la toma, y el mensaje de la marca de agua pasó al menú del proyecto junto con el enlace de mejora de plan.
• El zoom es un pellizco. El control de zoom y sus botones de más y menos ocupaban una fila entera, y un pellizco sobre la línea de tiempo hace el mismo trabajo.
• Saltar es un arrastre. Los botones de saltar desaparecieron porque arrastrar la línea de tiempo mueve el cabezal.
• Añadir medios es un más en la tira. Aparece cuando no hay ningún clip elegido.
• Escala tipográfica. El texto va de 11 a 17 px en lugar de 7 a 11 px, y la regla de la línea de tiempo está en monoespaciada a 11 px para que los números no salten.

Audita tu propio editor

Consigue el archivo de Figma

El archivo gratis incluye el borrador junior, la pantalla corregida y cada parte como componente.

Archivo gratis de Figma

Rediseño de la pantalla de un editor de video, antes y después

Ambas pantallas y cada parte como componente de Figma. Gratis, solo lectura, duplícalo en tus borradores.

Abrir en Figma

FAQ

¿Cómo se debe diseñar la pantalla de un editor de video móvil?

Dale a la vista previa todo el ancho de la pantalla, deja la barra superior en un botón de cerrar, el nombre del proyecto, la calidad y un solo botón Exportar, y pon las herramientas del clip elegido en una fila plana. Añade una línea de tiempo con carriles con nombre y un único cabezal.

¿Qué tamaño debe tener la vista previa en una app de edición de video?

Tan grande como permita la pantalla, idealmente todo el ancho sin esquinas y sin nada dibujado encima. Una toma pequeña entre barras negras dificulta juzgar el encuadre y el foco.

¿Debe un editor de video tener barra de pestañas?

Normalmente no. Quien está cortando un video no intenta irse, así que una barra de pestañas gasta unos 72 px en una navegación que no usa. Pon Inicio, Proyectos y Plantillas detrás del nombre del proyecto o del botón de cerrar.

¿Cómo se muestran las herramientas de un editor de video sin saturar?

Muestra solo las herramientas que se aplican a lo seleccionado. Con un clip elegido, una fila de Dividir, Volumen, Velocidad, Efectos, Eliminar y Ajustar basta, y una flecha vuelve a la fila principal de Texto, Stickers, Música, Voz y Filtros.

¿Cómo debe verse la interfaz de la línea de tiempo de un video?

Una regla con etiquetas de tiempo, carriles con nombre para texto, música y efectos, una tira de fotogramas que va de borde a borde, un tirador en el clip elegido y un cabezal ancho que cruza todos los carriles.

Fuentes

• Ambas pantallas son propias, diseñadas y medidas en Figma. La app, Cutline, el proyecto y las pistas son inventados. La línea de tiempo sigue dos capturas reales de iPhone del editor de la app Edits de Instagram, con su propio zoom de 153 pt por segundo.
• Los iconos son de Phosphor (MIT). La barra de estado está dibujada a partir de una captura real medida de un iPhone.
• Las fotos son de Pexels: Roman Odintsov, Hector Perez, Thang-Nhat Tran, Airam Dato-on y Sokil.
• Publicado por primera vez como carrusel en App Brainy.