Desktop Mockup
Pon las capturas de tu sitio web o de tu prototipo en la pantalla de una laptop 3D. Los visitantes desplazan la página dentro de la pantalla y pasan de una captura a otra con las flechas del teclado o con la barra de navegación.
Crear un Desktop Mockup¿Qué es un Desktop Mockup?
Un proyecto de Desktop Mockup muestra tus capturas en una laptop 3D que ya viene con la tapa abierta. Una imagen es una pantalla. Las imágenes altas no se reducen para que entren: el visitante las desplaza dentro del display, igual que desplazaría la página real. Si subes cinco capturas, obtienes cinco pantallas que el visitante recorre de a una.
- Una captura alta por pantalla, desplazable dentro del display de la laptop
- Rueda del mouse, trackpad o arrastre sobre el dispositivo para desplazar la pantalla actual
- Flechas del teclado y barra de navegación para pasar de una pantalla a otra
- Arrastra el fondo para girar la laptop, y activa los botones de zoom de la barra para leer el texto pequeño
- Los hotspots se pueden colocar en cualquier parte de la captura, y los dos mockups los dibujan en el display
- Un contador de pantallas que también muestra el título de cada una, además de la barra de enlaces
- Funciona en teléfonos y tablets, donde el arrastre reemplaza a la rueda
Mejores casos de uso
Landing pages
Muestra una landing completa desplazándose como se desplaza de verdad, sin mandar a nadie a una URL en vivo
Recorridos de producto
Una función por pantalla, en el orden en que quieres que las vean
Revisión de prototipos
Comparte exportaciones de diseño con un cliente y deja que recorra todo el flujo
Presentaciones a clientes
Presenta un sitio que construiste dentro de una propuesta o un caso de estudio
Portafolios de diseño web
Reúne los sitios que diseñaste, uno por pantalla
Capturas de aplicaciones
Muestra cómo se ve una app web sin pedirle a nadie que se registre
Creando un Desktop Mockup
Paso 1: Sube tus capturas
En el editor del proyecto, abre la pestaña Contenido y agrega una imagen por pantalla:
- Cualquier formato de imagen que abra tu navegador, JPG, PNG y WebP incluidos. Un PDF también sirve, y cada página se convierte en una pantalla
- Una imagen es una pantalla, así que una captura de página completa entra tal cual, sin recortar
- Sube varios archivos a la vez, o importa uno desde una URL
- Un PDF admite hasta 200 páginas y 50 MB por archivo, y los links que tenga adentro se convierten en hotspots sobre la pantalla en la que estaban
- Las capturas se optimizan automáticamente para cargar rápido
Captura a un ancho de escritorio, cerca de 1440px, y deja que la imagen sea tan alta como la página. El ancho se ajusta al display y el alto es lo que desplaza el visitante.
Paso 2: Ordena y nombra las pantallas
El orden en la pestaña Contenido es el orden en que los visitantes las recorren:
- Arrastra una pantalla para moverla
- Ponle un título a cada pantalla: se muestra en el contador, así que el contador tiene que quedar encendido para que se vea
- Elimina la pantalla que ya no quieras, o borra todas de una vez desde el menú de Contenido
- Agrega más pantallas en cualquier momento
Paso 3: Ajusta la pantalla y el desplazamiento
Define cómo se ve el display y cómo se mueve desde la pestaña Configuración:
- Color del dispositivo: tiñe el cuerpo de la laptop, y el blanco es el modelo tal como se construyó
- Fondo de pantalla: el color detrás de tu captura
- Brillo, contraste y saturación de pantalla: los tres arrancan en 1, que es la imagen exactamente como la subiste
- Contador de pantallas: muestra u oculta la posición y el título
- Velocidad y amortiguación del desplazamiento: cuánto avanza cada golpe de rueda y qué tan rápido se detiene
Paso 4: Agrega hotspots
Coloca hotspots sobre una captura para abrir un enlace, saltar a otra pantalla o mostrar una nota. El hotspot se ancla a la imagen completa y no a la parte visible, así que se queda en la sección de la página a la que pertenece mientras el visitante se desplaza. Los dos mockups los dibujan en el display, y se pueden tocar también desde un teléfono.
Configuración del Desktop Mockup
El display y el desplazamiento tienen sus propias secciones en la pestaña Configuración. Los fondos, la barra de enlaces, el zoom y la rotación usan los mismos paneles que los otros tipos de proyecto.
Color del dispositivo
Tiñe el cuerpo de la laptop. Arranca en blanco puro, que es el modelo exactamente como se construyó, y cualquier otro color tiñe ese acabado en vez de repintarlo.
Fondo de pantalla
El color que se pinta detrás de tu captura. También rellena el espacio de arriba y de abajo cuando la imagen es más corta que el display, así que elige algo cercano al fondo de tu página.
Brillo de pantalla
Qué tan encendido se ve el display, de 0.2 a 1.6. Arranca en 1, que son exactamente los píxeles que subiste: por debajo el display se apaga y por encima se satura, como un teléfono al máximo de brillo.
Contraste de pantalla
Se aplica a la captura al dibujarla, de 0.5 a 2, y arranca en 1 con la imagen sin tocar. Súbelo un poco cuando un diseño plano pierde sus bordes en un display chico.
Saturación de pantalla
La misma idea para el color, de 0 a 2 y arrancando en 1. En 0 la captura se ve en escala de grises, que es una forma rápida de mostrar un wireframe sin exportar uno.
Contador de pantallas
Una insignia pequeña con el título de la pantalla adelante y la posición después, por ejemplo Precios · 2 / 5, o sólo 2 / 5 cuando la pantalla no tiene título. Es donde aparecen los títulos, así que apagarlo también los oculta, que es lo que quieres con una sola captura.
Velocidad de desplazamiento
Cuánto avanza el contenido con cada golpe de rueda. Bájala en páginas muy largas para que el visitante pueda detenerse donde quiere.
Amortiguación del desplazamiento
Qué tan rápido el contenido alcanza a la rueda. Los valores bajos frenan suave, los altos se sienten inmediatos.
Fondo de la escena
El telón detrás de la laptop: un color sólido, un degradado, un patrón o una imagen tuya.
Cómo navegan los visitantes
Hay dos movimientos separados. El contenido se mueve dentro de la pantalla, y las pantallas cambian de a una. Ninguno dispara al otro.
Desplazarse dentro de la pantalla
La rueda, el trackpad o un arrastre que empieza sobre la laptop mueven la captura actual hacia arriba y hacia abajo. Las flechas Arriba y Abajo y las teclas Página arriba y Página abajo hacen lo mismo.
Cambiar de pantalla
Izquierda y Derecha pasan de una pantalla a otra, Inicio y Fin saltan a la primera y a la última, y la barra de navegación tiene los mismos botones. Llegar al final de una pantalla no avanza a la siguiente, y cada pantalla abre desde arriba.
Girar la laptop
Un arrastre que empieza en el fondo gira el dispositivo hasta 75 grados a izquierda y derecha y 40 grados hacia arriba y hacia abajo, y al soltarlo vuelve a quedar de frente. Un arrastre que empieza sobre la laptop se desplaza en lugar de girar.
Zoom
Los botones de zoom acercan la cámara, que es la forma en que un visitante lee el texto pequeño de una captura. Vienen apagados hasta que los activas en la pestaña Menú. La rueda siempre desplaza la captura, nunca hace zoom.
Lo que no hace
Parte de esto es a propósito y parte todavía no está construida. En cualquier caso conviene saberlo antes de grabar una demo:
- La laptop es el único dispositivo de esta página. Para un teléfono, crea un Mobile Mockup. Todavía no hay tablet.
- La tapa ya está abierta. No hay animación de apertura.
- Llegar al final de una pantalla no pasa a la siguiente. Cambiar de pantalla siempre es una acción deliberada.
- Hay una sola pantalla en el display a la vez. Las demás no se ven alrededor.
- La sección Pantalla tiñe la carcasa de la laptop, pero el acabado en sí viene integrado en el modelo.
Consejos para buenos Desktop Mockups
- Exporta una captura de página completa por pantalla en lugar de unir secciones
- Mantén todas las capturas con el mismo ancho para que el contenido no cambie de tamaño entre pantallas
- Iguala el fondo de pantalla al fondo de tu página para que una captura corta no quede sobre una franja blanca
- Nombra las pantallas por lo que muestran, no Pantalla 1 y Pantalla 2
- Pon los hotspots donde el visitante haría clic en el sitio real
- Baja la velocidad de desplazamiento cuando la página es muy larga
- Pruébalo en un teléfono: la laptop se ve más chica y el texto pequeño puede dejar de leerse