En 2024, cuando trabajaba en Kuady, el reto era claro, la web tenía que estar al mismo nivel que el producto que ofrecíamos. No vendíamos algo convencional, sino una tarjeta con una pasarela de pago, y la experiencia digital debía transmitir exactamente eso desde el primer segundo.
El diseño y la implementación de la web se plantearon con una premisa muy concreta: modernidad, solidez y diferenciación. En versión escritorio, el menú principal se convirtió en una pieza clave de la experiencia. A partir de un SVG interactivo, se desplegaba un menú a pantalla completa que ocupaba el 100% del viewport, apareciendo de izquierda a derecha con un fade-in suave, limpio y elegante.
Dentro del menú se integraban distintos elementos dinámicos: secciones generadas automáticamente, accesos rápidos y recursos visuales como códigos QR, todo pensado para guiar al usuario sin saturar la interfaz.
El cierre del menú seguía exactamente la misma lógica visual, pero en sentido inverso, con un fade-out fluido, manteniendo coherencia y sensación de producto bien construido.
El verdadero desafío llegó en mobile (responsive). Replicar una solución tan visual y amplia en pantallas pequeñas no solo penalizaba la usabilidad, sino también el rendimiento. En lugar de forzar una adaptación poco natural, opté por desarrollar un plugin personalizado de WordPress, diseñado exclusivamente para gestionar el menú en dispositivos móviles.
Este plugin resolvía varios problemas a la vez: simplificaba la navegación, mantenía una experiencia visual potente y, sobre todo, evitaba comprometer el rendimiento o la claridad en mobile. El resultado fue un menú distinto al de escritorio, pero igual de cuidado y coherente con la identidad del producto.
Este vídeo muestra un ejemplo del plugin funcionando en una web demo, donde se puede apreciar el comportamiento, las transiciones y la filosofía detrás de la solución.
Un buen ejemplo de cómo, en proyectos reales, no siempre se trata de reutilizar lo mismo en todos los dispositivos, sino de tomar decisiones técnicas y de UX adaptadas al contexto, al producto y al usuario final.
Tecnología utilizada:
WordPress
Desarrollo a medida (frontend y plugin personalizado)
Este video muestra un plugin personalizado para mobile que desarrollé en WordPress. Gestiona el menú de manera totalmente responsive, ofreciendo una navegación ágil, visualmente atractiva y optimizada para pantallas pequeñas. Es un ejemplo en una web demo para mostrar su funcionamiento y diseño.
Por qué crear un plugin personalizado para el menú mobile
En muchos proyectos WordPress, el menú responsive se resuelve simplemente ocultando el menú de escritorio y mostrando una versión reducida en mobile. Esta solución puede funcionar en webs sencillas, pero no siempre es la mejor opción cuando el diseño, la interacción y la identidad visual forman parte importante del producto.
En este caso, el menú de escritorio tenía una lógica muy visual, con transiciones amplias, comportamiento a pantalla completa y elementos dinámicos integrados. Llevar exactamente la misma experiencia a mobile habría generado una navegación pesada, poco natural y difícil de mantener. Por eso, la mejor decisión técnica no era copiar el menú de escritorio, sino crear una solución específica para pantallas pequeñas.
El plugin personalizado permitió separar la lógica del menú mobile del resto del tema, controlar mejor su comportamiento y adaptar la experiencia a las necesidades reales del usuario. Esto hizo posible trabajar con una navegación más ligera, más clara y mejor optimizada, sin renunciar a una estética cuidada.
Además, desarrollar el menú como plugin ofrecía una ventaja importante: mantener la funcionalidad encapsulada. En lugar de mezclar demasiada lógica dentro del tema de WordPress, el menú mobile quedaba organizado como una pieza independiente, más fácil de probar, ajustar y evolucionar.
Responsive no siempre significa mostrar lo mismo más pequeño
Una de las decisiones más importantes en desarrollo frontend es entender que responsive no significa reducir todo lo que existe en escritorio hasta que quepa en una pantalla móvil. Una buena experiencia responsive implica priorizar, simplificar y adaptar la interfaz al contexto de uso.
En escritorio, el usuario tiene más espacio, mayor precisión con el cursor y más capacidad para explorar elementos visuales complejos. En móvil, en cambio, la navegación debe ser más directa, táctil, rápida y comprensible. El usuario no interactúa igual con una pantalla grande que con un dispositivo pequeño.
Por eso, en este desarrollo se plantearon dos experiencias distintas pero coherentes entre sí. El menú de escritorio mantenía una presencia visual más amplia y envolvente, mientras que el menú mobile se centraba en la agilidad, la claridad y el rendimiento.
Esta separación permitió cuidar mejor cada entorno. En desktop, la navegación podía formar parte de la identidad visual de la marca. En mobile, el objetivo principal era que el usuario pudiera moverse por la web sin fricción, sin tiempos de carga innecesarios y sin una interfaz sobrecargada.
La clave estaba en mantener una misma dirección visual, pero con soluciones técnicas diferentes según el dispositivo.
WordPressDesarrollos personalizadosAdaptado a móviles
Una solución pensada para rendimiento, mantenimiento y experiencia de usuario
Crear un plugin personalizado para WordPress no tiene sentido si solo replica algo que ya se puede resolver con una opción estándar. Tiene sentido cuando existe una necesidad concreta que requiere más control, mejor integración o una experiencia más cuidada.
En este caso, el plugin permitía gestionar el menú mobile de forma específica, controlar sus transiciones, mantener una estructura limpia y evitar que la versión móvil dependiera de una adaptación forzada del menú de escritorio.
Esto también ayudaba a mejorar el mantenimiento del proyecto. Al estar la funcionalidad separada, cualquier ajuste futuro en el menú mobile podía realizarse sin afectar directamente a otras partes del tema. Esta forma de trabajar reduce riesgos, facilita iteraciones y permite que el proyecto evolucione con más seguridad.
El resultado fue una navegación responsive más sólida, más ligera y más alineada con el producto. No se trataba solo de que el menú “funcionara” en móvil, sino de que transmitiera la misma sensación de calidad que el resto de la web.