la marca.
Mr Obregón es un emprendimiento con base en Nueva Zelanda que se dedica a la creación y alquiler de juegos de madera hechos a mano para personas de todas las edades. Con una propuesta única, combina la calidez de lo artesanal con el espíritu lúdico de los grandes momentos compartidos.
La marca nace con la intención de ofrecer mucho más que entretenimiento: busca crear experiencias memorables en bodas, cumpleaños, eventos o reuniones. Cada pieza está construida con dedicación y materiales de alta calidad, transmitiendo el valor de lo hecho a mano y el placer de jugar sin pantallas.
período de tiempo.
6 semanas.
mi papel.
Diseño UI, Diseño visual, Prototipado, Desarrollo Web.
herramientas.
Figma, Illustrator, WordPress, Elementor Pro.
el desafío.
El principal desafío del proyecto fue traducir la esencia cálida y festiva de Mr Obregón en una identidad digital sólida. Se trataba de capturar el carácter artesanal de los juegos de madera y, al mismo tiempo, transmitir la energía y emoción que estos generan en eventos y celebraciones.
Además, al estar dirigida a un público diverso —desde parejas que organizan su boda hasta familias o empresas que planifican reuniones—, la web debía equilibrar lo funcional con lo emocional, lo visual con lo informativo.
el objetivo.
El objetivo fue crear una web que funcione como vidriera digital y canal de contacto directo, destacando la propuesta de valor de Mr Obregón: juegos de madera hechos a mano para crear recuerdos inolvidables.
Desde el diseño visual, se buscó reforzar el carácter artesanal y festivo de la marca, con una interfaz cercana, moderna y dinámica. A nivel funcional, la web debía permitir:
- Mostrar los juegos disponibles con claridad y atractivo visual.
- Comunicar la identidad y valores de la marca.
- Facilitar el contacto para reservas o consultas.
- Brindar una experiencia accesible y memorable desde cualquier dispositivo.
cómo.
exploración.
Se analizaron referencias visuales de juegos, eventos y marcas artesanales para encontrar un tono que reflejara la calidez de Mr Obregón sin perder frescura ni funcionalidad.
diseño ui.
Se construyó una identidad visual amigable y vibrante, combinando formas geométricas simples con una paleta luminosa y detalles artesanales.
prototipado.
Se crearon wireframes y maquetas de alta fidelidad para testear la disposición de los contenidos, jerarquía visual y recorrido del usuario.
testing y ajustes.
Revisión funcional y visual en distintos navegadores y pantallas. Ajustes finales para asegurar accesibilidad, legibilidad y coherencia visual.
desarrollo.
El sitio fue desarrollado con WordPress y Elementor Pro, lo que permitió una construcción flexible, visual y fácilmente editable por el cliente.
exploración.
moodboard.
Como punto de partida, realicé un moodboard para definir la estética general de la web. Mr Obregón contaba únicamente con su color principal y un logo tipográfico, recién comenzaban con el emprendimiento, por lo que fue necesario construir una identidad visual más completa y coherente.
El objetivo fue recopilar referencias que transmitieran la esencia artesanal, lúdica y cercana de la marca: madera, texturas naturales, juegos clásicos, escenas de eventos al aire libre, tipografías cálidas y composiciones visuales limpias. A partir de esta exploración se definió una paleta extendida de colores, un estilo fotográfico y una línea gráfica que guiaron todo el diseño UI.
diseño ui.
tipografía.
Para el diseño de la web se utilizó la fuente DM Sans en todos los niveles de texto: títulos, párrafos y botones. Su trazo geométrico, limpio y moderno aporta claridad y legibilidad, manteniendo una estética cercana y profesional.
La jerarquía visual se construyó variando el peso tipográfico (regular o bold), el tamaño y el espaciado, en lugar de utilizar múltiples fuentes. Esta decisión permitió lograr coherencia visual y simplicidad, alineándose con el carácter accesible y directo de la marca.
DM Sans refuerza la sensación de confianza, equilibrio y diseño cuidado que se buscó transmitir en todo el sitio.
DM Sans.
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0
paleta de colores.
La paleta de colores fue definida a partir del color principal ya existente en la marca, al que se sumaron nuevos tonos a través de un proceso de exploración visual.
Se seleccionaron colores vibrantes y alegres, como el naranja y rosa, para reflejar el espíritu lúdico, cálido y familiar de Mr Obregón. Estos se complementan con tonos neutros como el gris oscuro, blanco y un rosa pálido, que aportan equilibrio, legibilidad y un marco limpio para destacar los elementos visuales.
sistema visual.
El diseño visual se construyó en torno a un enfoque lúdico, colorido y accesible, fiel al espíritu artesanal y familiar de la marca.
Se organizaron las secciones dentro de rectángulos con bordes redondeados, utilizando colores planos y vibrantes de la paleta.
Además, se incorporaron ilustraciones originales de los juegos de madera, realizadas a partir de bocetos artesanales. Estas ilustraciones aportan calidez, autenticidad y una conexión directa con el proceso de fabricación manual que define a la marca.
secciones.
En la home, se organizaron las secciones dentro de rectángulos con bordes redondeados, utilizando colores planos y vibrantes de la paleta. Esto permite diferenciar claramente cada bloque de contenido, generar ritmo visual y aportar una sensación de juego y dinamismo, coherente con el universo de Mr Obregón.
Cada sección tiene asignado un color principal, lo que facilita la navegación y refuerza la identidad visual de forma intuitiva y memorable.
botones.
Para los botones se utilizó un enfoque lúdico y versátil, en línea con la estética general del sitio. Se diseñaron versiones en diferentes colores, jugando con los tonos de la paleta, para integrarlos armónicamente en cada sección según su color dominante.
Cada botón tiene su propio estilo para los estados de hover y activo, generando una experiencia interactiva más rica y visualmente atractiva. Estos cambios de color no solo aportan dinamismo, sino que también mejoran la usabilidad, brindando una clara retroalimentación visual al usuario.
Este sistema de botones colorido y adaptable refuerza el carácter alegre y artesanal de la marca, manteniendo la coherencia con el resto del diseño visual.
El diseño de la interfaz para Mr Obregón buscó reflejar la naturaleza artesanal, colorida y divertida de la marca. A través del uso de una paleta vibrante, formas simples como rectángulos con bordes.
prototipo.
secciones.
El prototipo se diseñó en alta fidelidad, buscando plasmar con precisión la estética, estructura y funcionalidad del sitio antes del desarrollo. Se priorizó una navegación clara y fluida, ideal para usuarios que buscan alquilar juegos de forma rápida y visual.
La home funciona como una introducción a la marca, con secciones destacadas separadas por bloques e imágenes, generando un recorrido lúdico y dinámico. Cada sección tiene su propio color y estilo, anticipando la experiencia que ofrece cada tipo de evento.
Se testearon variantes de botones, jerarquía tipográfica y la disposición de los elementos hasta llegar a una versión coherente con los valores de la marca: accesible, alegre y memorable. Este prototipo permitió validar decisiones visuales y de usabilidad antes de pasar al desarrollo.
flujo de usuario.
Tarea: Buscar información sobre los juegos.
El prototipo permitió visualizar de manera concreta la estructura, navegación y estética del sitio antes de entrar en desarrollo. Fue clave para validar decisiones de diseño relacionadas con la jerarquía de la información, el sistema visual y la experiencia del usuario.
testing y ajustes.
secciones.
En un principio se habían representado mediante un collage de imágenes tipo «juego», pero esta solución resultó confusa y poco clara. A partir del feedback, se rediseñaron como bloques de color bien diferenciados, cada uno representando una categoría (bodas, cumpleaños, eventos, etc.). Esto mejoró significativamente la claridad del mensaje y la comprensión del contenido.
contacto.
Uno de los principales ajustes fue en la sección de contacto: originalmente planteada como una sección más dentro del sitio, fue reemplazada por un llamado a la acción (CTA) fijo al final del menú, visible en todo momento durante la navegación. Esta decisión permitió facilitar el acceso y mejorar la conversión sin interrumpir el recorrido visual del usuario.
El prototipo permitió visualizar de manera concreta la estructura, navegación y estética del sitio antes de entrar en desarrollo. Fue clave para validar decisiones de diseño relacionadas con la jerarquía de la información, el sistema visual y la experiencia del usuario.
desarrollo.
responsive.
El desarrollo del sitio se realizó utilizando WordPress junto con Elementor Pro, lo que permitió construir una web totalmente personalizada sin recurrir a plantillas prediseñadas.
Se trabajó con una estructura visual clara y editable, cuidando tanto el rendimiento del sitio como la facilidad de mantenimiento por parte del cliente.
El diseño fue completamente responsive, con ajustes manuales dentro de Elementor para garantizar una correcta visualización en móviles, tablets y escritorio.
Se prestó especial atención a la jerarquía visual, el espaciado entre elementos y la legibilidad en todos los dispositivos.
desktop/tablet.
mobile.
