la marca.
Tula y Canela es una marca que nace con el compromiso de acompañar los procesos de crianza y aprendizaje a través de productos artesanales hechos con madera natural y amor por los detalles. Su propuesta combina diseño, funcionalidad y respeto por los ritmos de la infancia.
El catálogo abarca desde mobiliario educativo hasta materiales y recursos pedagógicos, todos realizados a pedido y de forma artesanal, permitiendo también adaptaciones personalizadas según las necesidades de cada familia o espacio.
período de tiempo.
5 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 trasladar la esencia artesanal y pedagógica de Tula y Canela a una experiencia digital, sin perder la calidez, la cercanía ni el valor del trabajo hecho a mano.
Al tratarse de una marca con propuestas variadas y en constante crecimiento, también era necesario diseñar una estructura flexible que permitiera ampliar fácilmente el catálogo y las secciones sin comprometer la estética ni la usabilidad.
Otro punto importante fue comunicar la posibilidad de personalización en los productos, algo esencial en la propuesta de valor, y generar confianza en un público familiar y educativo.
el objetivo.
El objetivo principal fue crear una web clara, funcional y emotiva, que reflejara el universo de Tula y Canela: natural, educativo y artesanal.
La interfaz debía ser simple de navegar, adaptable a todos los dispositivos, y permitir que los usuarios descubrieran los productos, comprendieran su uso y beneficios, y se sintieran cómodos al contactar para hacer pedidos o consultas personalizadas.
Desde el diseño visual hasta la organización del contenido, todo fue pensado para conectar con madres, padres, educadores y espacios pedagógicos que buscan objetos pensados con amor, propósito y cuidado.
cómo.
exploración.
El proceso comenzó con la creación de un moodboard para definir el tono visual de la marca. Como Tula y Canela contaba sólo con su logo y una breve descripción, fue clave inspirarse.
diseño ui.
Se diseñó una interfaz amable y accesible, con una navegación sencilla y jerarquizada, pensada para que cualquier persona pueda recorrer el sitio con fluidez.
prototipado.
El prototipo sirvió como guía para definir los microdetalles visuales: espaciado, ritmo, interacciones y composición general.
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.
Dado que la marca contaba únicamente con su logo y una descripción general, el objetivo fue construir una base visual coherente que reflejara sus valores: artesanal, natural, educativo y cercano.
Se recopilaron referencias vinculadas al mundo de la crianza respetuosa, el aprendizaje Montessori y los materiales sensoriales, priorizando elementos que transmitieran calidez, simplicidad y ternura.
Las texturas de madera natural, los tonos pastel, las formas redondeadas y las composiciones limpias guiaron la elección del sistema visual posterior.
diseño ui.
tipografía.
Para toda la web se utilizó Iowan Old Style, una tipografía con carácter clásico y elegante, que a su vez transmite cercanía y calidez gracias a sus terminaciones suaves y proporciones armónicas. Esta elección tipográfica refuerza el carácter artesanal y cuidado de la marca, aportando lectura fluida, tanto en títulos como en textos largos.
Iowan Old Style.
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 l 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 cromática está compuesta por tonos suaves y cálidos que evocan el universo infantil, natural y artesanal de Tula y Canela.
Estos colores se combinaron de forma armoniosa para destacar contenidos clave, jerarquizar secciones y acompañar la navegación sin sobrecargar visualmente.
sistema visual.
El diseño UI se construyó a partir de un universo visual cálido, artesanal y cercano, inspirado en el imaginario infantil y natural que propone la marca.
Los elementos gráficos que acompañan la interfaz fueron extraídos del propio logo, que representa una casita rodeada de un árbol, un sol y otras formas orgánicas. Estas figuras se reutilizaron en la web como detalles decorativos sutiles, que ayudan a unificar la estética general y aportan personalidad sin saturar.
secciones.
Se usaron formas redondeadas y suaves en contenedores, botones y banners para reforzar la sensación de amabilidad.
Los fondos y bloques de contenido están organizados en secciones claras, con divisiones suaves y uso de color para jerarquía visual.
Las ilustraciones vectoriales y detalles gráficos refuerzan el aspecto lúdico y artesanal, alineándose con la propuesta Montessori de la marca.
botones.
Los botones se diseñaron siguiendo la identidad cromática de la marca, utilizando distintos colores de la paleta según el estado del botón (normal, hover, activo). Esta estrategia permite mantener una experiencia visual coherente, a la vez que guía al usuario con claridad a través de la interfaz.
El diseño de la interfaz de Tula y Canela busca reflejar el espíritu artesanal, educativo y cercano de la marca. La combinación de una paleta de colores cálidos y naturales, una tipografía clásica con un aire lúdico y el uso de formas inspiradas en el logo (como árboles, soles y casitas) da como resultado una web visualmente armónica, familiar y cuidada.
prototipo.
flujo de usuario.
Tarea: Buscar información sobre sabores de rascadores.
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.
contacto.
Durante la etapa de pruebas, uno de los principales cambios fue la reconfiguración del acceso al contacto. En la primera versión, el botón del menú llevaba a una sección dentro de la misma home. Sin embargo, tras testear la navegación y recibir feedback, se optó por crear una página exclusiva para el contacto, con su propio diseño, estructura y formulario.
Esta decisión mejoró significativamente la claridad y el acceso a la información, reforzando la idea de una atención cercana y personalizada. Además, permitió organizar mejor los campos del formulario, facilitar la lectura en distintos dispositivos y generar un espacio más enfocado para la comunicación con las personas interesadas.
Gracias a este testeo anticipado, fue posible perfeccionar la experiencia del usuario y validar decisiones de diseño antes de la etapa de desarrollo.
desarrollo.
responsive.
El desarrollo de la web se realizó con WordPress utilizando Elementor, lo que permitió construir un sitio flexible, funcional y visualmente atractivo, sin necesidad de escribir código desde cero.
Se cuidaron especialmente la coherencia visual con la identidad de la marca, la jerarquía de los contenidos y la navegabilidad en todos los dispositivos. Gracias al diseño modular de Elementor, cada sección fue trabajada de manera artesanal, reflejando el espíritu y la calidez de Tula y Canela.
El sitio es completamente responsive, garantizando una buena experiencia tanto en móviles como en tablets y escritorio. También se optimizaron aspectos clave como los tiempos de carga, el SEO básico y la accesibilidad general.
desktop/tablet.
mobile.
