Diseñar miniaturas pensando primero en el móvil

La diferencia de tamaño es mayor de lo que se supone

En la portada de un móvil, una miniatura ocupa casi todo el ancho de la pantalla, lo que suena generoso hasta que recuerdas que la pantalla mide unos centímetros. En la lista de sugeridos bajo un vídeo en reproducción, las miniaturas se reducen a una fracción de eso.

Mientras tanto tú estás diseñando a 1280 píxeles o más en una pantalla donde eso llena una ventana grande. Estás tomando decisiones a quizá ocho veces la escala a la que se van a juzgar.

Diseña en pequeño, entrega en grande

El arreglo es invertir el flujo de trabajo. Monta el lienzo a la resolución final de exportación porque es lo que entregas, pero mira una vista previa pequeña y toma todas las decisiones desde ahí.

Se siente raro durante unos diez minutos y luego resulta evidente, porque dejas de hacer cambios invisibles a tamaño real —el degradado sutil, la segunda línea de texto, el contorno fino— y empiezas a hacer los que importan.

Qué cambia el móvil en la composición

Los elementos necesitan más separación de la que sugiere un monitor. Un solape que parece superposición a tamaño completo parece una sola forma confusa en pequeño. Dale a la cara y al texto su propio territorio, con espacio claro entre medias.

El detalle fino es esfuerzo desperdiciado. La textura, los objetos pequeños, el interés del fondo: nada de eso sobrevive, y todo compite con lo que sí lo hace. Una composición más simple no es una concesión en el móvil; es la respuesta correcta.

Qué le pasa a las caras, los logotipos y las capturas

En estas conversaciones el texto se lleva toda la atención, pero todo lo demás del encuadre se está reduciendo con el mismo factor, y cada tipo de elemento falla a su manera.

Las caras aguantan mejor que ninguna otra cosa, y por eso se usan tanto, pero aguantan como expresión, no como identidad. A unos 210 píxeles de ancho una cara se lee como encantada, alarmada o poco impresionada, y eso es todo lo que transmite. Recorta lo bastante cerca para que la expresión ocupe superficie real, deja los ojos hacia el tercio superior y no cuentes con que nadie reconozca de quién es la cara salvo que la cabeza sea grande.

Los logotipos suelen fallar. Una marca pensada para funcionar en una tarjeta se está mostrando más o menos al tamaño de un signo de puntuación, y lo que llega es un borrón de color ocupando un sitio que podría haber llevado algo legible. Si el logotipo tiene que estar, usa una sola parte fuerte de él —el símbolo sin el nombre— a un tamaño que a resolución completa parecería exagerado.

Las fotos de producto necesitan un solo objeto sobre un campo limpio. Tres productos en fila se convierten en una hilera de manchas ambiguas, mientras que un único producto grande, en ángulo e iluminado sobre color plano se sigue leyendo como una cosa concreta. Si el producto es pequeño u oscuro, ponlo sobre un fondo contrastado y no sobre otra fotografía.

Las capturas son el caso más difícil, porque lo que las hace interesantes —la cifra, la interfaz, el mensaje— es exactamente lo que desaparece. No pegues la captura entera. Coge la única zona que importa, recórtala, amplíala hasta que ocupe una parte sustancial del encuadre y deja marchar el resto de la interfaz. Una gráfica sirve si conservas la línea y quitas los ejes.

El brillo y las condiciones reales de visionado

Los móviles se usan en la calle, con el brillo bajo para ahorrar batería, y con un brillo automático que a menudo se equivoca. Una miniatura con detalle sutil en las sombras puede ser literalmente invisible en esas condiciones.

El contraste alto no es, por tanto, solo una táctica de atención: es una táctica de robustez. Diseña para que la composición sobreviva a verse apagada y algo lavada, porque una buena parte de tus impresiones lo estarán.

Pruébalo en el dispositivo, no solo al tamaño

Encoger una ventana en el monitor aproxima el tamaño pero no las condiciones. Mándate la imagen al móvil y míralo ahí, sujetándolo a la distancia normal e idealmente al aire libre.

Lleva un minuto y pilla cosas que ninguna vista previa en pantalla va a pillar: virajes de color, contraste que se hunde con poco brillo, texto que estaba bien en un monitor calibrado y no lo está a la luz del día.

Una prueba de banco de dos minutos

Todo lo anterior se resume en una costumbre: mira el diseño a tamaño real, en un móvil real, antes de subirlo. Casi todo el mundo se la salta porque parece un trámite, y pilla algo aproximadamente una de cada tres veces.

La versión más rápida de la prueba es esta. Exporta el archivo, mándatelo por cualquier aplicación de mensajería y míralo en el móvil sin ponerlo a pantalla completa. La vista previa de la lista de mensajes se parece bastante al tamaño del listado, que es justo la comparación que quieres. No amplíes: ampliar no es lo que hace el espectador.

Luego júzgalo con tres preguntas, en este orden y con el brazo estirado. ¿De qué es esta imagen? ¿Qué dice el texto? ¿De quién es el canal? Si alguna de las tres tarda más de un segundo en responderse, el diseño tiene un problema que no va a arreglar admirarlo a tamaño completo.

Hazlo en las condiciones en las que ocurren de verdad tus impresiones. Baja el brillo a un cuarto y, si puedes, sal a la calle. Una composición que aguanta apagada, a la luz del día y con el brazo estirado es una composición que aguanta en todo lo demás.

Por último, míralo acompañado. Tu vídeo va en una columna con los de otras personas, así que baja por tu propia lista de suscripciones y pregúntate si tu diseño te pararía a ti si no fuera tuyo. El listón no es ser bueno aislado, es ser distinguible en una columna llena.

Editar en el móvil es un flujo de trabajo legítimo

Mucha gente graba, edita y sube desde el móvil, y montar la miniatura en otro sitio rompe eso. Un editor en el navegador que funcione al tacto significa que la miniatura se hace en el mismo dispositivo que la juzga, que es exactamente el sitio correcto.

Este editor admite arrastrar, girar y pellizcar con el dedo por esa razón, y la vista previa enseña los tamaños reales del listado en la misma pantalla que usará el espectador.