Mundo Casas
Un sitio web para una constructora de casas prefabricadas en panel SIP: catálogo de modelos, el sistema constructivo explicado y un camino claro para hablar con ventas.
- Cliente
- Mundo Casas
- Año
- 2024–2025
- Rol
- Diseñador web, Diseñador UI, Desarrollador frontend y WordPress
- Disciplinas
- Desarrollo backend, Desarrollo frontend, Diseño UI, Diseño web
- Sitio en línea
- mundocasas.cl (se abre en una pestaña nueva)
Introducción
Mundo Casas construye casas prefabricadas con paneles SIP (paneles estructurales aislados). Diseñé y desarrollé el sitio web de la empresa: un catálogo de modelos de casas, una explicación del sistema constructivo y una ruta directa desde la exploración hasta el contacto con un ejecutivo de ventas.
Contexto y desafío
Comprar una casa es una decisión meditada, y la construcción con paneles SIP es poco conocida para muchos visitantes. Cada modelo debe mostrar su superficie, habitaciones, planta, imágenes y el precio de tres niveles de kit, mientras el sistema constructivo y el proceso de compra necesitan explicarse sin ocultar el catálogo.
Mi aporte
- Diseño visual
- Diseñador principal
- Front-end
- Desarrollador principal
- Back-end y sistemas
- Desarrollador principal
Diseño y desarrollo del sitio, y las ilustraciones técnicas del sistema constructivo, a mi cargo. El logo y los renders 3D de las casas fueron entregados por el cliente.
Diseño visual y de interfaz, desarrollo front-end y un tema de WordPress a medida. El logo de la marca y los renders de las casas los entregó el cliente; construí el sistema visual en torno a ellos.
También creé las ilustraciones técnicas que explican el sistema constructivo: la vista arquitectónica explotada y el diagrama por capas del panel SIP.
Decisiones de diseño visual
- Un header oscuro y el rojo de la marca, reservado para las acciones: contacto, consultas y precios.
- Renders grandes en las cabeceras, para que cada modelo se lea primero como un hogar y después como un producto.
- Inter como sistema tipográfico neutro y legible para especificaciones y precios.
- El proceso de compra contado en pasos ilustrados en lugar de un bloque de texto.
Experiencia responsive
En el teléfono, cada página se reduce a una sola columna de lectura: el formulario de contacto sigue al hero, las especificaciones se apilan y los accesos a email y teléfono quedan siempre disponibles en el borde de la pantalla.
Implementación técnica
Un tema de WordPress a medida, armado con partes de plantilla modulares: hero, niveles de kit, explicación del panel SIP, financiamiento, preguntas frecuentes, showroom y proceso de compra. Los modelos de casas son un tipo de contenido personalizado con campos ACF (superficie, dormitorios, baños, planta, galería y el precio de cada nivel de kit), así el cliente administra el catálogo sin tocar código. Las consultas funcionan con Contact Form 7 y un acceso directo a WhatsApp.
- ACF
-
Figma -
JavaScript -
PHP -
WordPress
Ilustración técnica
Hacer visible el sistema constructivo.
Creé las ilustraciones técnicas que explican cómo se construye una casa Mundo Casas: una vista arquitectónica explotada que separa la techumbre, el revestimiento, los muros SIP y los vanos, y un diagrama por capas del propio panel SIP.
Estas piezas traducen conceptos constructivos complejos en información visual y accesible.
Vista explotada y panel SIP
-
Vista arquitectónica explotada del sistema constructivo. -
Diagrama por capas del panel SIP: placas OSB alrededor de un núcleo de EPS. -
La vista explotada se construye con capas separadas: techumbre, revestimiento y muros SIP.
Galería
-
Catálogo de modelos — maqueta de diseño. -
Página de modelo — cabecera, galería, especificaciones y planta (maqueta de diseño). -
Proceso de compra en pasos ilustrados — maqueta de diseño. -
Tres niveles de terminación comparados en una tabla — maqueta de diseño. -
Página de paneles SIP — el sistema constructivo explicado (maqueta de diseño). -
Página de modelo — móvil.