Diseño web · México

Diseño web
inmersivo
en México

Las mejores ideas no se leen. Se recorren.

Qué es una web inmersiva, explicado por escrito: páginas diseñadas y programadas completamente a la medida, donde la interacción, la narrativa y el movimiento ayudan a entender una idea antes de tomar una decisión.

La definición

Qué es una web inmersiva

Una página web tradicional se lee. Una página web inmersiva se recorre: al bajar, la escena cambia contigo, y el sitio deja de sentirse como un catálogo para empezar a sentirse como un lugar.

Por eso también se les llama páginas web interactivas o experiencias web 3D: el movimiento, la animación y, cuando el proyecto lo pide, el 3D en tiempo real son la forma de contar la idea, no un adorno encima de ella.

La diferencia no es decorativa. En una página normal el visitante decide qué mira y en qué orden, lo cual es perfecto cuando viene por un dato concreto. En una inmersiva, quien diseña decide el orden y el ritmo con que aparece cada pieza de información — y eso es exactamente lo que se necesita cuando hay que convencer antes de informar.

La otra diferencia está debajo: estas páginas no se arman rellenando una plantilla. Cada escena se dibuja y se programa desde cero, que es la única forma de que el movimiento tenga sentido y de que la página siga cargando rápido a pesar de él.

Los trabajos

Cómo se ve

Proyectos desarrollados. Se recorren completos, en teléfono o en computadora, y cada uno dice en qué estado está:

Cuando un proyecto se publica en el dominio del cliente, su etiqueta cambia a «Publicado» y el enlace lleva al sitio oficial. Cómo se construyó cada uno: Cedros · Pacífico Azul.

Y el recorrido de este estudio —un descenso desde el espacio hasta el fondo del mar— se puede recorrer aquí. Es la carta de presentación y, al mismo tiempo, la demostración.

Si lo que buscas es específicamente 3D —cámara, volumen, luz—, los tipos que existen y lo que cuesta están en páginas web 3D.

La comparación

En qué se distingue de una página tradicional

AspectoPágina tradicionalPágina inmersiva
Cómo se construye Plantilla o gestor de contenido, con complementos Diseño y programación desde cero, sin plantillas
Qué hace el visitante Busca y salta a lo que le interesa Avanza por un recorrido con un orden pensado
Para qué sirve Informar, consultar, publicar seguido Convencer, explicar algo nuevo, dejar huella
Quién la edita Tú mismo, desde un panel Quien la programó, por acompañamiento
Cuánto cuesta Menos, y llega antes Más, y toma semanas

Ninguna de las dos columnas es mejor. Son herramientas distintas: la pregunta correcta no es cuál es más moderna, sino cuál resuelve lo que tu proyecto necesita este año.

El encaje

Cuándo vale la pena

Cuando la primera impresión decide la venta y el producto todavía necesita explicarse:

  • Lanzamiento de producto o campaña de temporada
  • Preventa inmobiliaria, donde hay que vender algo que aún no existe
  • Catálogo de una colección, un hotel o un restaurante
  • Presentación a inversionistas o a un consejo
  • Congresos, festivales y eventos con fecha
  • La historia de una marca que quiere contarse completa

Cuándo no

Si necesitas publicar tres artículos por semana, si tu negocio es sobre todo un catálogo con cientos de productos que cambian solos, o si estás validando una idea y todavía no sabes qué vas a vender. En esos casos te conviene otra herramienta —un gestor de contenido, una tienda armada, incluso una plantilla bien elegida— y te lo voy a decir desde la primera conversación, aunque me cueste el proyecto.

El oficio

Cómo se hace

Sin misterio, para que sepas qué estás comprando:

Narrativa primero

Antes de dibujar nada, se decide qué tiene que entender el visitante y en qué orden. El recorrido se escribe como se escribe una historia: qué se ve primero, qué se guarda para el final, dónde conviene que se detenga.

Diseño de la experiencia

Cada escena se diseña a la medida de la marca —color, tipografía, ilustración, fotografía— cuidando que la experiencia de usuario no se pierda dentro del efecto: siempre hay que saber dónde se está, cuánto falta y cómo llegar al contacto.

Programación a la medida

La página se escribe a mano: animación ligada al scroll, secuencias cuadro por cuadro, 3D en el navegador cuando el proyecto lo pide, y desarrollo frontend cuidado para que el movimiento corra parejo. Nada de complementos apilados.

Rendimiento y teléfono

Es la parte que más trabajo cuesta y la que nadie ve. Se sirven imágenes distintas para teléfono y escritorio, se comprime cada archivo, se prueba en pantalla chica —vertical y acostada— y se respeta a quien tiene desactivadas las animaciones por accesibilidad.

Buscadores desde el primer día

El texto vive en el HTML, no dentro de la animación: títulos, descripciones, datos estructurados y sitemap se entregan resueltos. Es la razón por la que esta página existe — el recorrido convence, pero quien llega buscando información necesita algo escrito para leerse.

El estudio

Quién lo hace

Johonatan Cordero, diseñador web. Cauce es un estudio de diseño web de una sola persona: hablas directo con quien diseña y escribe el código, sin ejecutivo de cuenta ni cadena de correos. Eso tiene una ventaja y un límite, y los dos son honestos — nadie va a entenderte a medias, y tomo un número corto de proyectos a la vez.

Trabajo desde la Ciudad de México, a distancia, en español y en inglés. Además de páginas web hago identidad, ilustración y gráfica aplicada, así que si tu proyecto necesita las dos cosas no tienes que coordinar a dos proveedores.

La inversión

Cuánto cuesta

Se cotiza por escena. Una escena es una idea que se recorre de principio a fin: la primera paga construir el mundo —dirección de arte, código, ritmo— y las que vienen después se derivan de ella, así que cuestan menos.

Escena principal

Desde $25,000 MXN + IVAdesde $29,000 con IVA incluido

Una idea. Un recorrido. Un objetivo.

Diseño a la medida, desarrollo completo, optimización para móviles, dominio y hospedaje, y la publicación.

Tiempo estimado: 2 a 3 semanas.

Escenas adicionales

Costo menor por escena

El mundo ya está construido.

Se derivan de la principal reutilizando su lenguaje visual y su rendimiento. No se vuelve a construir el mundo: se amplía.

El precio de cada una se ajusta a su complejidad.

Si el proyecto necesita tienda, reservaciones o 3D avanzado, eso se cotiza aparte. El desglose completo —qué incluye, qué no, qué mueve el precio y cómo se compara con el resto del mercado mexicano— está en precios de diseño web, por escrito →

Dudas

Preguntas frecuentes

¿Una web inmersiva carga lento?

No tiene por qué. El peso no viene del movimiento sino de las imágenes y de las bibliotecas que se cargan de más. Al programar a la medida se sirven imágenes distintas por dispositivo y no se arrastran complementos que nadie usa: suele pesar menos que una plantilla comercial con media docena de extensiones activas.

¿Es lo mismo que scrollytelling o parallax?

Esas son técnicas; lo inmersivo es el propósito que las ordena. Un efecto de parallax suelto sobre una plantilla no vuelve inmersiva a una página. Lo que la vuelve inmersiva es que escena, texto y ritmo estén construidos como una sola pieza.

¿Puedo editar el contenido yo después?

Estos sitios se escriben a mano para que carguen rápido, así que no traen un panel de administración. Los cambios entran por el plan de acompañamiento. Si lo que necesitas es editar todos los días, te conviene otra herramienta y te lo digo desde la primera llamada.

¿Sirve para una landing page?

Sí, y es donde más rinde: una sola escena, un solo mensaje, un solo botón. Es exactamente el formato de la escena principal, y la mayoría de los lanzamientos y preventas empiezan justo ahí.

¿Trabajas fuera de la Ciudad de México?

Sí. El proceso es a distancia de principio a fin, con avances por videollamada y WhatsApp. Tengo clientes que no he visto en persona nunca.

¿Qué es el diseño web inmersivo?

Es una forma de diseñar páginas web en la que el contenido no se presenta como un documento que se lee, sino como un recorrido que avanza con el visitante. Al bajar por la página la escena cambia: el movimiento, el sonido visual y la narrativa se usan para explicar una idea en el orden en que conviene entenderla. Técnicamente se apoya en scroll narrativo, animación y 3D en el navegador, y exige programar la página desde cero en lugar de rellenar una plantilla.

¿En qué se diferencia de una página web tradicional?

Una página tradicional organiza la información en bloques que el visitante recorre a su criterio; funciona muy bien cuando busca un dato concreto. Una página inmersiva controla el orden y el ritmo con que aparece la información, así que sirve cuando hay que convencer antes de informar. La diferencia de fondo es cómo se construye: la tradicional suele armarse sobre una plantilla o un gestor de contenido, y la inmersiva se diseña y se programa a la medida.

¿Para qué tipo de negocio conviene una web inmersiva?

Conviene cuando la primera impresión decide la venta y el producto necesita explicarse: lanzamiento de producto, preventa inmobiliaria, catálogo de una colección, recorrido de un hotel o un restaurante, presentación a inversionistas, congresos y eventos, o la historia de una marca que quiere contarse completa. No conviene para un blog con publicaciones frecuentes, una tienda con cientos de productos que cambian solos, o un proyecto que todavía está validando qué vende.

¿Funciona en teléfono?

Sí, y es donde está la mayor parte del trabajo. Cada escena se prueba en pantalla chica, vertical y acostada, con imágenes más ligeras y animaciones más cortas cuando hace falta. Una web inmersiva que solo se ve bien en computadora está a medio hacer.

¿Una página inmersiva puede posicionarse en Google?

Sí, siempre que el texto exista de verdad en el HTML y no esté dibujado dentro de una animación. Se entrega con títulos y descripciones, datos estructurados, sitemap y texto legible para los buscadores. Aun así, para las búsquedas informativas conviene tener también páginas escritas para leerse, que enlacen al recorrido: es exactamente lo que hace esta página.

¿Cuánto cuesta una web inmersiva en México?

En Cauce se cotiza por escena. La escena principal parte de $25,000 MXN + IVA, con dominio y hospedaje incluidos el primer año, y las escenas adicionales cuestan menos, porque se derivan de la principal y reutilizan el mundo que ya se construyó: el precio de cada una se ajusta a su complejidad. El desglose completo, con lo que sí y lo que no incluye, está en la página de precios.

Contacto

Dime qué tienes en mente.

Si ya sabes qué necesitas, escríbeme y lo aterrizamos. Si todavía no, también: la primera conversación sirve justo para eso, y no cuesta.

o por correo johonatan@encauzar.com

Conoce aquí
una web inmersiva