---
title: "Recursos de presentación | abuenoben"
description: "Ejemplos de comparación antes y después, lupa y patrones de interacción."
canonical: "https://showroom.abuenoben.com/demos/recursos/"
language: "es"
---

# Recursos de presentación

Comparar, ampliar y explicar un detalle. Ejemplos de apoyo a una pieza.

## Antes y después, juntos

Ejemplo: una reforma, una restauración o un resultado visual.

![Sala de exposición sin terminar, con estructuras metálicas, paneles grises y guías de montaje en el suelo.](<https://showroom.abuenoben.com/assets/images/comparison-before-v02.svg>)

PRE · estructura POST · experiencia

   

Arrastra para comparar

50%

  

La barra se moverá un poco para señalar que puedes arrastrarla.

### PRE

El espacio antes de aplicar acabados, luz y contenido.

### POST

El mismo espacio terminado y listo para usar.

## Toca para ampliar

Pasa el cursor por una imagen. En móvil, toca el detalle que quieres ampliar.

![Plano ficticio con cotas de salón y paso libre.](<https://showroom.abuenoben.com/assets/images/material-plan-v01.svg>)

### Plano y circulación

Amplía para consultar cotas y pasos del plano DEMO.

100%

 

![Detalle ilustrativo de pieza, junta y soporte; no es una especificación de obra.](<https://showroom.abuenoben.com/assets/images/material-joint-v01.svg>)

### Sección de una junta

Consulta el encuentro entre dos piezas y su leyenda.

100%

 

![Muestrario DEMO de Roble, Caliza y Arcilla con referencias legibles al ampliar.](<https://showroom.abuenoben.com/assets/images/material-samples-v01.svg>)

### Muestras y referencia

Compara veta, grano y referencia de tres muestras ficticias.

100%

 

## Otras formas de interactuar

Seis patrones conocidos y para qué sirve cada uno.

01 / 06

 

01

### Puntos que abren detalles

Tocas una parte de la imagen y aparece su explicación.

Encaja en

Producto, arquitectura, obra, formación.

[Probar este patrón](<https://showroom.abuenoben.com/demos/recursos/#book>)

02

### Opciones de producto

Cambias color, tamaño o piezas y solo ves combinaciones válidas.

Encaja en

Catálogo, preventa, personalización, simulación.

[Probar este patrón](<https://showroom.abuenoben.com/demos/recursos/#recommender>)

03

### Antes y después

Una barra enseña el cambio en la misma imagen.

Encaja en

Reforma, restauración, datos, resultados visuales.

[Probar este patrón](<https://showroom.abuenoben.com/demos/recursos/#transformation>)

04

### Visita guiada

Cuenta una historia por pasos y permite volver o saltar.

Encaja en

Lanzamiento, museo, onboarding, caso complejo.

[Probar este patrón](<https://showroom.abuenoben.com/demos/recursos/#spatial>)

05

### Sonido opcional

Añade ambiente, pero la experiencia se entiende también en silencio.

Encaja en

Exposición, relato, campaña audiovisual.

[Probar este patrón](<https://showroom.abuenoben.com/demos/recursos/#book>)

06

### Guardar lo elegido

Permite recuperar o compartir una configuración.

Encaja en

Configurador, presupuesto, aprendizaje, venta de productos.

[Probar este patrón](<https://showroom.abuenoben.com/demos/recursos/#object-lab>)

## Aplicación en un proyecto

Comparación y ampliación como apoyo a una explicación de producto. Las imágenes de muestra conservan su identificación y procedencia.

[Comentar esta aplicación](<https://abuenoben.com/contacto?utm_source=showroom&utm_medium=demo&utm_campaign=experiencias&showroom=transformation&utm_content=transformation#contact-form-shell>) [Elegir otra demo](<https://showroom.abuenoben.com/demos/>)

[Comentar un proyecto](<https://abuenoben.com/contacto?utm_source=showroom&utm_medium=demo&utm_campaign=experiencias#contact-form-shell>)

[Todas las demos](<https://showroom.abuenoben.com/demos/>)[Web principal](<https://abuenoben.com/>)[Sobre Armando](<https://showroom.abuenoben.com/about/>)[Privacidad](<https://showroom.abuenoben.com/privacy/>)

abuenoben · Armando Bueno Ben