Consejos y trucos
Pitch deck que los inversores abren de verdad
El inversor abre el PDF adjunto, baja tres diapositivas y cierra la pestaña sin que sepas cuál fue la que lo perdió esta vez.
3 min de lectura
Muestra tu diseño como mockup 3D: capturas de página completa que se desplazan en una laptop y pantallas de app con hotspots que se tocan en un teléfono.
Por Franco Cirulli
Mandas el link del archivo de diseño y el cliente abre un lienzo con cuarenta frames. No distingue cuál es la home. Toca algo, se le cruza el cursor de otra persona y cierra la pestaña. Llega a la reunión sin haber visto nada, y los primeros diez minutos se van explicando la herramienta en vez del diseño.
El archivo de diseño es donde vive el trabajo, no donde se mira. Quien no lo abre todos los días necesita una página que se comporte como una página. Eso es un mockup de sitio web en i3Dify: tus capturas puestas en la pantalla de una laptop 3D, en un solo link, sin instalar nada.
Los renders planos recortan. Una landing de 6000 píxeles pegada en un marco de dispositivo termina cortada donde acaba la pantalla o encogida hasta que el texto deja de leerse. En el visor la imagen se ajusta al ancho de la pantalla y se desplaza en vertical, igual que la página en un navegador, así que el diseño se lee de arriba a abajo a ancho completo.
Los controles están separados a propósito. Arrastras la pantalla o giras la rueda y la página baja. Arrastras el fondo y la laptop gira. Las flechas del teclado y el dock cambian de pantalla, y el contador arriba del dock lleva el título que le pusiste a cada una, así que Home, Precios y Checkout aparecen donde el cliente los espera cuando vas guiando el recorrido en vivo en una llamada.
Un mockup de pantallas de app es la misma idea en un teléfono 3D, y ahí los hotspots son los que trabajan. Marcas un punto, el botón de checkout por ejemplo, y le asignas un link: la pantalla siguiente, la versión en vivo, la especificación, un flujo grabado. El hotspot queda anclado a la imagen, así que acompaña al píxel al que pertenece mientras el visitante se desplaza, en lugar de quedarse en una capa fija encima.
Abierto en un teléfono de verdad, que es donde se suele leer un link reenviado, esos hotspots se tocan. Una carpeta de exports sueltos se convierte en un recorrido que alguien hace con su propio dedo. Conviene dejar claros dos límites. No hay campos de formulario ni estados, así que esto es un recorrido guiado y no un prototipo. Y el scroll se detiene al final de la pantalla actual: pasar a la siguiente es el dock o las flechas, nunca un accidente a mitad del scroll.
Subes una imagen por pantalla, las ordenas como quieres contar el recorrido, le pones título a cada una y publicas. Eso es todo el armado. Lo que sale mal es la exportación, porque el visor necesita la altura completa de la página y no lo que entraba en la ventana cuando apretaste la tecla.
En Chrome está en el menú de comandos de DevTools, en Capture full size screenshot. En Figma, exportas el frame a su altura real. Un PDF también sirve y cada página entra como una pantalla, aunque en el teléfono una página ajustada al ancho de la pantalla ya no llena su altura, y queda centrada con bandas arriba y abajo en lugar de desplazarse.
Captura en 1x, no en 2x. El visor achica la imagen antes de convertirla en textura, así que los píxeles retina no aportan nada y solo hacen esperar a quien abrió el link. Además se comen los 50 MB que da el plan gratuito, y una tanda de pantallas largas de dashboard llega antes de lo que crees.
Cambias las pantallas en el editor después de una revisión y el link no cambia. El que está en la bandeja del cliente y el que pegaron en un documento hace tres semanas siguen funcionando y muestran la versión actual, así que nadie vuelve con comentarios sobre un diseño que ya tiraste. Mientras el trabajo está en revisión, el proyecto puede quedar fuera del listado o detrás de una contraseña, en cualquier plan, incluido el gratuito.
Tu archivo de diseño es donde trabajas. El link es para la reunión, para el reenvío, y para la decisión que se toma tres días después sin ti en la sala.
Pon tu próxima ronda de pantallas en una laptop y un teléfono.
El mockup de escritorio muestra una laptop 3D y trabaja con capturas de ancho de escritorio. El de teléfono muestra un teléfono 3D y trabaja con capturas de ancho de teléfono. El orden de las pantallas, los títulos, el scroll y los hotspots funcionan igual en los dos, así que eliges por la captura que ya tienes. No hay tablet.
Bastan las capturas: una imagen alta por pantalla, en PNG o JPG, exportada a la altura completa de la página y no recortada a lo que se veía. Un PDF también entra, una página por pantalla. No hay importación desde Figma.
No. El link abre en cualquier navegador, de escritorio o del teléfono, sin cuenta y sin instalar nada. El mismo proyecto también se inserta como iframe en un portafolio o en una página de caso.
En parte. Un hotspot puede saltar a otra pantalla, abrir un link o mostrar una nota, y se sigue tocando cuando el link se lee en un teléfono. No hay campos de formulario ni estados, así que trátalo como un recorrido guiado.
Sí. Un proyecto puede quedar fuera del listado, que lo deja solo por link y fuera de los buscadores, o detrás de una contraseña. Las dos cosas funcionan en cualquier plan, incluido el gratuito.
El plan gratuito cubre 3 proyectos y 50 MB, y siempre muestra una pequeña marca de agua de i3Dify en la esquina del visor. Pro cuesta 3 dólares al mes, o 24 al año, quita esa marca y suma dominio propio y analíticas.
Sube un PDF o unas imágenes, elige un tipo de proyecto y comparte el enlace. Para probarlo alcanza con el plan gratuito.
Crear mockup de escritorio