la marca.
Manos de Pino es un emprendimiento artesanal dedicado a la creación de cerramientos, protecciones y juegos para gatos, elaborados a medida con madera de alta calidad. Su enfoque combina funcionalidad, seguridad y diseño para ofrecer soluciones personalizadas que se integren con el hogar y cuiden del bienestar felino.
Cada producto es único, hecho a mano, y pensado para estimular la actividad y libertad del gato sin comprometer la estética del espacio. Manos de Pino transmite calidez, amor por los animales y compromiso con la calidad, con una identidad que respira naturaleza, confianza y diseño consciente.
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.
Diseñar una web que comunique de forma clara y atractiva el espíritu artesanal y funcional del emprendimiento. El sitio debía equilibrar la calidez de lo hecho a mano con una navegación intuitiva, mostrando los productos de forma visual sin perder el foco informativo.
Lograr que el usuario comprendiera rápidamente qué es un cerramiento para gatos, y por qué es una solución segura y estética para quienes tienen mascotas en casa.
el objetivo.
Crear un sitio web funcional, responsive y visualmente alineado con la marca, que:
- Refuerce la identidad artesanal y natural de Manos de Pino.
- Explique con claridad los productos y servicios.
- Muestre variedad de ejemplos reales y soluciones personalizadas.
- Invite a contactar o solicitar presupuestos fácilmente.
cómo.
identidad visual.
Se definió una estética que reflejara lo natural, artesanal y funcional del proyecto.
diseño ui.
El diseño se centró en crear un espacio visual, cálido y accesible.
prototipado.
Creación de prototipo navegable para validar estructura, interacción y flujo del usuario antes de pasar a desarrollo.
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.
identidad visual.
tipografía.
El logotipo utiliza Tenor Sans, una tipografía con carácter elegante y moderno que mantiene una excelente legibilidad. Su estructura clásica con trazos limpios y proporciones equilibradas transmite confianza, calidad y sobriedad artesanal.
paleta de colores.
La paleta de Manos de Pino está compuesta por tonos tierra y verde suave.
La marca tiene una estética que refleja lo natural y artesanal. Con una paleta basada en tonos madera, verdes suaves y neutros claros, transmitiendo calidez, calma y conexión con lo natural.
diseño ui.
tipografía.
Tenor Sans como tipografía principal, tanto en títulos como en textos, reforzando la coherencia visual con el logotipo de la marca.
- En títulos se aplicó en mayúsculas, aportando estructura, claridad y un carácter sobrio que refleja solidez y profesionalismo artesanal.
- En textos corridos, se usó en minúsculas, manteniendo la legibilidad y una estética limpia que acompaña la navegación sin restar protagonismo a las imágenes.
Esta elección tipográfica permite mantener una identidad consistente en toda la web, transmitiendo calma, claridad y confianza.
A B C D E F G H 1 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.
A la paleta original, se le agregan colores neutros claros. Esta selección busca transmitir:
- Conexión con la naturaleza
- Calidez y cercanía
- Equilibrio entre lo artesanal y lo funcional
sistema visual.
El sistema visual de Manos de Pino fue concebido para transmitir calidez, naturaleza y cuidado artesanal, en línea con los valores de la marca. El diseño equilibra lo visualmente sobrio con detalles orgánicos que evocan lo natural y lo hecho a mano.
Los elementos gráficos abstractos —como hojas y ramas estilizadas— fueron extraídos del isotipo del logo, lo que permite mantener coherencia visual en todo el sistema.
Estos detalles se integran en las secciones como acentos decorativos, aportando movimiento orgánico y calidez, sin distraer del contenido principal. Además, refuerzan la identidad artesanal y natural de la marca, evocando su conexión con lo hecho a mano y lo ecológico.
secciones.
Disposición tipo grilla editorial, que combina bloques de texto con imágenes a gran escala para alternar ritmo visual.
Jerarquías claras mediante el uso de la misma tipografía (Tenor Sans) en distintos pesos y tamaños.
Elementos decorativos sutiles en forma de hojas curvas, que refuerzan la identidad natural y artesanal.
cards.
Las cards se utilizaron para organizar y presentar la información de manera clara, jerárquica y visualmente coherente con la estética general del sitio.
Se diseñaron como bloques de contenido, con enfoque en la tipografía, composición y detalles decorativos. Están pensadas para facilitar la lectura y la navegación dentro del sitio.
Este sistema permite dividir la información por categorías de producto de forma accesible y visualmente armoniosa.
botones.
El sistema visual de Manos de Pino fue concebido para transmitir calidez, naturaleza y cuidado artesanal, en línea con los valores de la marca. El diseño equilibra lo visualmente sobrio con detalles orgánicos que evocan lo natural y lo hecho a mano.
Los elementos gráficos abstractos —como hojas y ramas estilizadas— fueron extraídos del isotipo del logo, lo que permite mantener coherencia visual en todo el sistema.
Estos detalles se integran en las secciones como acentos decorativos, aportando movimiento orgánico y calidez, sin distraer del contenido principal. Además, refuerzan la identidad artesanal y natural de la marca, evocando su conexión con lo hecho a mano y lo ecológico.
El diseño se centró en crear un espacio visual, cálido y accesible. Se organizaron los contenidos en secciones claras, con jerarquía cuidada y mucho uso de imágenes reales de los productos. Se incluyeron detalles gráficos suaves para acompañar la navegación sin sobrecargarla.
ptototipo.
secciones.
- Productos ofrecidos.
Accesibles desde botón o scroll.
Visuales de los productos, información clara. - Nosotros
Accesible desde scroll.
Contenido sobre el origen, sus creadores, valores de la marca, enfoque artesanal y vegano. - Faqs.
Accesible desde scroll.
Ayuda al usuario a resolver dudas frecuentes sobre los ingredientes, intolerancias, puntos de venta, etc. - Contacto.
Accesible desde scroll y botón en home.
Link a whatsapp. - Footer/Redes sociales.
Enlace a redes sociales, datos legales, contacto extra.
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.
menú.
Se detectó que el sistema de navegación original obligaba al usuario a ingresar en cada sección para descubrir los productos disponibles, lo cual dificultaba la exploración y aumentaba la fricción.
En respuesta a esta observación, se rediseñó el menú principal incorporando desplegables directos en cada categoría. Ahora, el usuario puede visualizar todos los productos disponibles de un vistazo, sin necesidad de ingresar a cada página individual.
Este ajuste mejoró notablemente la usabilidad, facilitó el acceso a la información y favoreció una navegación más fluida e intuitiva, alineada con una experiencia centrada en el usuario.
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 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.
