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 el panel.
Crear un Desktop Mockup¿Qué es un Desktop Mockup?
Un proyecto Desktop Mockup muestra tus capturas en una laptop 3D cuya tapa se abre cuando carga la página. 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 una por 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 el panel para pasar de una pantalla a otra
- Arrastra el fondo para girar la laptop, y activa los botones de zoom del panel para leer el texto pequeño
- Hotspots en cualquier parte de una captura, que se desplazan junto con la página
- Una pantalla en vivo: pega un enlace y la página real carga dentro del display
- Un contador de pantallas que también muestra el título de cada una, además de un panel de enlaces
Ideal para
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
Archivos y límites
- Imágenes o PDFs. Una imagen es una pantalla, y cada página de un PDF se convierte en una pantalla.
- Un PDF puede tener hasta 200 páginas y pesar hasta 50 MB. Los enlaces que tenga se convierten en hotspots en las pantallas donde estaban: un enlace web abre la página, y un enlace interno del documento lleva a esa pantalla.
- Las capturas se ajustan al ancho del display. Una captura de más de 2048 px de ancho, o una muy larga, se reduce en proporción y nunca se recorta, así que una captura de página completa conserva todo su largo.
- Sube varios archivos a la vez, o usa Importar desde URL para traer una imagen desde una dirección web.
- Agrega una pantalla en vivo para cargar una página web real en el display en lugar de una imagen de ella. La página tiene que permitir que la inserten; el editor lo comprueba cuando la agregas.
- Lo que subes cuenta para el almacenamiento de tu espacio de trabajo: 50 MB en Free, 10 GB en Pro y 25 GB en Business.
Crea un Desktop Mockup
1. Sube tus capturas
Abre la pestaña Contenido y agrega una captura de página completa por pantalla, o un PDF.
- Captura a un ancho de escritorio, cerca de 1440 px, y deja que la imagen sea tan alta como la página
- O agrega una pantalla en vivo con el enlace a una página
2. Ordena y nombra las pantallas
Arrastra una pantalla para moverla. Ponle un título a cada una: los títulos aparecen en el contador de pantallas, así que deja el contador activado si quieres que se vean.
3. Agrega hotspots
En la pestaña Hotspots, coloca puntos clicables sobre una captura para abrir un enlace, saltar a otra pantalla, mostrar información emergente o abrir una ventana modal. Un hotspot se fija a la imagen completa, así que se desplaza junto con la parte de la página a la que pertenece.
4. Configura el dispositivo y la pantalla
En Configuración, dentro de General, elige el color de la laptop y el ángulo de la tapa, ajusta la pantalla y regula el desplazamiento.
5. Compártelo
Guarda y luego copia el enlace o el código para insertar desde la pestaña Compartir.
Configuración
Todo lo que sigue está en la pestaña Configuración del editor, ordenado según la subpestaña donde lo encuentras: General, Escena o Cámara.
General
Arriba de todo, en cualquier tipo, está Información básica (el título y la descripción del proyecto). Debajo vienen los ajustes del objeto en sí.
Dispositivo
Color del dispositivo: el blanco conserva el acabado de aluminio original de la laptop, y cualquier otro color tiñe el cuerpo, nunca la pantalla. Ángulo de la pantalla, de 0 a 120 (90 por defecto), define cuánto se abre la tapa: 0 la cierra, 90 la deja vertical y más de 90 la inclina hacia atrás, como una laptop sobre un escritorio.
Pantalla
Fondo de pantalla llena el display detrás de tu captura, y también las franjas de arriba y de abajo de una captura corta. Brillo (0.2 a 1.6), contraste (0.5 a 2) y saturación (0 a 2) arrancan en 1, que es la imagen exactamente como la subiste; con saturación en 0 se ve en escala de grises. Mostrar contador de pantallas, activado por defecto, muestra el título y la posición, por ejemplo Precios · 2 / 5.
Desplazamiento
Velocidad de desplazamiento (0.25 a 3, 1 por defecto) es cuánto avanza la captura con cada giro de la rueda. Suavizado del desplazamiento (0.02 a 0.5, 0.12 por defecto) es qué tan rápido la alcanza: con valores altos sigue de cerca a la rueda, con valores bajos se desliza hasta frenar.
Escena
Lo que rodea al objeto y el acabado de Realismo sobre todo el cuadro.
Fondo
Un color sólido, un degradado o una imagen propia (con desenfoque opcional), más un patrón opcional encima.
Realismo
Grano de película sobre el cuadro (de 0 a 100, 15 por defecto) y cuánto de ese grano cae sobre la pantalla, grano fijo o animado, una viñeta, la sombra que la laptop deja sobre la superficie (con su oscuridad y su suavidad) y Reflejo de la pantalla, cuánto refleja el vidrio (0 es mate, 40 por defecto).
Cámara
Desde dónde arranca la vista y cuánto pueden moverla los visitantes.
Cámara
Zoom inicial, de 0.5 a 2, aunque la vista nunca se abre tan cerca que el dispositivo salga del encuadre. Zoom mínimo (0.3 a 1) y Zoom máximo (1 a 3) limitan los botones de zoom del panel, así que solo aparecen mientras esos botones están activados. Rotación horizontal (hasta 75 grados hacia cada lado) e Inclinación vertical (hasta 40) apuntan la cámara. Arrastrar para rotar, activado por defecto, permite a los visitantes girar la laptop arrastrando el fondo. Restablecer valores devuelve el zoom, sus límites y los dos ángulos a su estado original, y deja Arrastrar para rotar como está.
Hotspots, menú y sonido
Junto a Archivos, la pestaña Contenido tiene tres subpestañas más: Hotspots, Menú y Sounds.
Hotspots
Los hotspots van en cualquier parte de una captura. Se fijan a la imagen completa, así que se desplazan con la página, y se pueden tocar también desde un teléfono.
Un hotspot puede llevar a otra página, abrir un enlace, mostrar información emergente o abrir una ventana modal. Cómo funcionan los hotspots
Sonido
Cualquier tipo de proyecto puede tener música de fondo. Agrega pistas en MP3, M4A, WAV, OGG o FLAC, de hasta 20 minutos cada una. Se comprimen a cerca de 1 MB por minuto y cuentan para el almacenamiento de tu espacio de trabajo. Puedes repetir la lista, ajustar el volumen y mostrar un pequeño reproductor junto al panel. La reproducción automática empieza con el primer toque o la primera tecla del visitante, porque los navegadores bloquean el sonido hasta ese momento.
Fílmalo en Studio
Cualquier tipo de proyecto se puede filmar en Studio. Abre la pestaña Studio del proyecto, elige movimientos de cámara pensados para este tipo y convierte el proyecto en un video, un GIF, una imagen fija o una página propia para compartir. Studio lee los archivos y la configuración de este proyecto, así que lo que ajustes aquí se mantiene. Lee la documentación de Studio · Mira los movimientos de cámara de cada tipo
Límites actuales
- La laptop es el único dispositivo de esta página. Para un teléfono, crea un Mobile Mockup. No hay tablet.
- 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.
- En una pantalla en vivo, los visitantes desplazan la página real dentro del display, y los hotspots se quedan donde los pusiste en lugar de desplazarse con la página.
- En Studio, una pantalla en vivo se ve como un fondo de pantalla liso, porque la página real no se puede grabar.
Consejos
- 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.
- Baja la velocidad de desplazamiento cuando una página es muy larga.
- Revísalo en un teléfono: la laptop se ve más chica y el texto pequeño puede dejar de leerse.