01 / LA INTENCIÓN
Entender la tabla antes de pedirla.
PicandoTabla es nuestra marca de quesitos y charcutería. En PiLoKo estamos desarrollando una experiencia para acercar su catálogo a una pregunta cotidiana: ¿cómo se verá lo que estoy eligiendo? Una foto presenta una combinación. Un objeto que responde permite recorrer otras posibilidades y entender qué cambia entre ellas.
El objetivo es que el producto ocupe el centro de la pantalla, especialmente en el teléfono. Queremos que una persona reconozca los ingredientes, descubra su sabor, vea los acompañamientos y encuentre el paquete adecuado sin perder de vista la tabla.
Trabajar para una marca propia nos permite revisar juntos el diseño y la operación. Cada iteración pone a prueba tanto la forma de un queso como la claridad de un precio, una capacidad o un botón.
02 / LA EVOLUCIÓN
El camino cambió al tocarlo.
La exploración comenzó con un lenguaje anime e ilustrado y con Fer —pelo largo y lentes— como posible guía. Ese primer mundo visual nos ayudó a encontrar el tono. Al probarlo, la atención pasó del personaje a los alimentos: la tabla necesitaba contar su propia historia.
- 01
Imaginar el universo
Probamos personajes, ilustraciones y el color vino de PicandoTabla. Buscábamos una experiencia cercana, con rasgos de dibujo.
- 02
Llevar el catálogo a la mesa
Incorporamos tamaños, productos, adicionales y presentaciones individuales. La escena empezó a expresar diferencias que una imagen fija no podía mostrar.
- 03
Dar identidad a cada ingrediente
Cuñas, cilindros, vetas, pliegues y cortes hacen reconocible cada variedad. Añadimos información breve de sabor, textura y posibles combinaciones.
- 04
Ordenar lo que se ve
Probamos vistas cenitales y frontales antes de fijar un encuadre cercano al producto. La tabla ocupa el primer plano; los acompañantes, una botella de vino y dos copas construyen el fondo de la mesa.
- 05
Dejar respirar la experiencia
Simplificamos los menús. La escena permanece al centro, las opciones aparecen en contexto y “Tu paquete” reúne la selección con el acceso a la tienda oficial.
Etapas de una misma exploración. Este registro reúne las decisiones trabajadas hasta el 2 de noviembre de 2026; el proyecto continúa evolucionando.
03 / EL PRODUCTO MANDA
Dos quesos y dos carnes tienen que poder contarse.
Una de las correcciones más útiles fue hacer explícita la diferencia entre variedades y porciones. En Para Dos, “2 + 2” describe dos variedades de queso y dos de charcutería. La visualización usa piezas representativas para que esa composición se lea de inmediato; no representa pesos ni porciones medidos.
Dos variedades de queso.
Dos variedades de charcutería.
Una composición que se entiende al verla.
La fruta y los crujientes incluidos se distinguen de los adicionales. La cajita es una propuesta visual para ordenar esos acompañantes; la presentación final se confirma con la marca. El pan extra, la mermelada o dip con pan y las fresas con chocolate se muestran según lo elegido y las reglas del paquete.
La lista de ingredientes parte de lo que PicandoTabla publica: nueve quesos y ocho carnes. Los perfiles de sabor y las combinaciones son orientaciones editoriales; la disponibilidad, la marca y la maduración pueden cambiar. También distinguimos el catálogo de ejemplos de la cantidad incluida: Quesos Premium contempla diez variedades, aunque la lista pública nombre nueve.
Elegir un ingrediente tampoco debe cambiar el paquete a escondidas. Cada presentación conserva su capacidad. Premium sigue las reglas del catálogo y las opciones de compra llevan a la tienda oficial, donde se revisa el pedido: la propuesta visual no transfiere automáticamente todos sus ingredientes y adicionales.
04 / CÓMO LO CONSTRUIMOS
Una escena hecha para cambiar.
Construimos la experiencia con HTML, CSS y JavaScript, y usamos Three.js sobre WebGL para dibujar la escena en el navegador. El modelado es procedural: las piezas se forman con geometría, curvas, extrusiones y materiales definidos en código. Así podemos corregir un corte, una escala o la distribución sin sustituir toda la imagen.
- GEOMETRÍA
- Formas distintas para quesos, charcutería, fruta y recipientes. Cada ingrediente conserva una identidad visual.
- LUZ Y MATERIAL
- Materiales tipo toon, color y contornos para mantener el carácter ilustrado dentro del 3D.
- INTERFAZ
- HTML y CSS adaptan los controles al teléfono y al escritorio. El espacio que ocupa la escena guía la composición de los menús.
- ESTADO
- JavaScript relaciona paquete, ingredientes y extras. El almacenamiento local recuerda las preferencias en el mismo navegador.
- CATÁLOGO
- Una capa de datos mantiene capacidades y precios separados de la representación visual. La tienda oficial conserva el proceso de compra.
Esta separación ayuda a revisar cada decisión por su función: si cambia un modelo, revisamos cómo se reconoce; si cambia un paquete, revisamos su composición; si cambia la interfaz, comprobamos que la tabla siga siendo visible y fácil de explorar.
05 / LO QUE APRENDEMOS
La claridad también se modela.
El detalle necesita escala.
Una veta o un pliegue sólo ayudan si se alcanzan a ver. El tamaño del producto en pantalla importa tanto como la malla.
Cada control pide espacio.
Un panel demasiado grande puede ocultar lo que intenta explicar. Las opciones deben acompañar la escena y aparecer cuando hacen falta.
Ver y pedir deben conectar.
La exploración necesita un siguiente paso claro, con reglas de paquete legibles y revisión de opciones al continuar a la tienda.
Seguimos afinando la lectura de las piezas, el encuadre y la información contextual. Esta bitácora documenta decisiones de producto y desarrollo; la experiencia de uso continúa siendo el lugar donde las ponemos a prueba.