Punto de partida
El reto
Catalina Llompart firma como Petita Lechatrose. Es artista e ilustradora en Mallorca, y su mundo está lleno de rostros, nubes, pájaros y coronas que pinta con tinta china, grafito, pastel y acrílico.
Su web tenía que hacer muchas cosas a la vez sin dejar de parecer suya: vender piezas únicas y prints en varios tamaños, enseñar sus exposiciones y sus murales, contar su historia y llevar el Mail Club, su suscripción de cartas ilustradas.
Y tenía que poder llevarla ella. Por eso la rehíce con un tema a medida, que sustituye a Elementor, a JetEngine y a un montón de fragmentos de código sueltos. Todo lo que ves está pensado para ella, y lo cambia desde un panel con su nombre.
Qué se ha hecho
De la idea a la web, paso a paso
- Conceptualización Entender la marca y lo que necesitaba: quién es Petita Lechatrose y qué tenía que conseguir su web.
- Arquitectura y diseño Pasar de la idea a la realidad: cómo se ordena todo y qué aspecto tiene cada parte.
- Desarrollo Un tema a medida con la tienda, las exposiciones, el Mail Club y el panel de Catalina.
- Pruebas y lanzamiento Comprobar que todo funciona, también en el móvil, y abrir la web al público.
- Mantenimiento y mejoras No se acaba al publicarla: la cuido y le sigo haciendo mejoras constantes.
La solución
Cómo lo resolví
Blanco, negro y su amarillo. El color lo pone su obra, y por dentro cada parte está hecha a medida.
01 · La portada
Una entrada con personalidad
Al llegar a la portada, su logo aparece en el centro, da un pequeño bote y vuela hasta su sitio en la cabecera. Dura un momento y ya sabes dónde estás.
Después llega el carrusel a todo el ancho, con sus obras. Cada diapositiva tiene su frase y su botón, y Catalina las cambia cuando quiere.
02 · Sus símbolos
Un corazón, una corona, un pájaro y una nube
Son los dibujos que se repiten en su obra, y aquí se puede jugar con ellos: tocas uno y cambia de color.
No son colores al azar. Salen de sus cuadros, de sus pasteles al óleo y sus ceras. Es un detalle pequeño, pero te quedas un rato tocándolos, y ese rato es justo lo que hace su arte.
03 · Obra original
Una pared de galería, no un catálogo
Las obras originales se ven como colgadas: con su marco, su sombra y su espacio, en un muro en el que cada pieza respira.
Se filtran por precio con una barra, se puede dejar solo lo disponible y se ordenan sin recargar la página. Las vendidas siguen ahí con su etiqueta, porque también son parte de su historia. Y en medio del muro, una invitación a pedir un encargo a medida.
04 · La ficha
Una obra, una sola copia
La tienda entiende lo que es una pieza única: avisa de que solo existe una copia, no deja comprar dos y, cuando se vende, pasa a «Vendido» y se va al final de los listados.
Cada obra lleva su ficha técnica, con año, técnica y dimensiones, y debajo todo lo que da tranquilidad al comprar arte por internet: el certificado de autenticidad, la propiedad intelectual, los envíos y las aduanas.
05 · Los prints
Más de cien prints, y encontrar el tuyo es fácil
Se filtran por formato, tamaño y colección, y hay buscador. Cada botón te dice cuántas piezas tiene antes de pulsarlo, así que sabes lo que vas a encontrar.
Los filtros funcionan sin recargar y cambian la dirección de la página, de modo que Catalina puede mandarle a alguien directamente «Mallorca en A4».
06 · Los Maneki-Neko
Cada gato, sobre su color
En esta tienda cada tipo de producto tiene su propio diseño, y el de los gatos de la suerte es el más alegre: cada figura va sobre un fondo pastel de su color.
Y ese color sale del nombre de la figura: si pone «Azul», la tarjeta va sobre azul, y si pone «Morado», sobre lila. Se filtran por tamaño y por colección, y al final hay una invitación a pedir uno personalizado.
07 · Las pegatinas
Las pegatinas parecen pegatinas
Aquí el fondo es un papel amarillo con puntitos, y hasta el título está recortado como una pegatina. Cada pieza va un poco torcida, con su esquina doblada y su precio en un círculo.
Son compras pequeñas, así que se añaden al carrito desde el propio listado, sin entrar en la ficha. Y si tienen varios colores, el botón te lleva a elegir el tuyo.
08 · Las colecciones
Cada colección, con su propia portada
Mallorca, Emociones, Caras, Oh My Cat… Cada colección abre con su cabecera, tres de sus piezas colocadas como fotos sueltas, cuántas tiene y desde qué precio.
Las colecciones cruzan toda la tienda: en Mallorca conviven prints y pegatinas, se pueden ver por tipo o todo junto, y cada tipo conserva su diseño. Al final, las otras colecciones para seguir mirando.
09 · El carrito
Comprar sin perder de vista la obra
El carrito es un cajón lateral hecho a medida: se abre al añadir, sin cambiar de página, y una barra te cuenta lo que falta para el envío gratis.
El carrito y el pago llevan los colores de la web. Se paga con tarjeta, Apple Pay o Google Pay a través de Stripe, y si el envío sale de la Unión Europea, el pago avisa de las aduanas antes de que haya sorpresas.
10 · Exposiciones
Toda su trayectoria, año a año
Catalina lleva años exponiendo en Mallorca y en Barcelona. Esta página lo ordena como una línea de tiempo, con filtros por tipo y por año, y la exposición que está en cartel destacada arriba.
Cada una es una ficha del panel, con su tipo, sus fechas, su lugar y sus fotos. Catalina rellena los datos y la web se coloca sola.
11 · Cada exposición
Una página a la altura de cada muestra
Cada exposición tiene su propia página: una foto a todo el ancho, una franja amarilla con lugar, dirección, fechas y número de piezas en la tienda, el texto de la muestra y una galería de fotos que se amplían al pulsarlas.
Al final, un botón «Cómo llegar» abre el mapa con la dirección, para que ir a verla sea lo más fácil del mundo.
12 · De la pared a la tienda
Si te enamoras de un cuadro, lo puedes comprar
Las exposiciones y la tienda están conectadas. Cada obra se asigna a su exposición desde el producto, y la página de la exposición la enseña con su precio y su enlace.
Así, quien ve una obra en Cosentino City Mallorca puede encontrarla después y comprarla en un par de toques. Y Catalina no tiene que duplicar nada.
13 · Proyectos
Cuando el arte sale del papel
Los murales, las intervenciones, la ilustración y las publicaciones tienen su propio espacio, con filtros por tipo y una ficha por proyecto con su año y su lugar.
Y cuando un proyecto pide más, la página se estira: Sa Co^a, su instalación inmersiva dentro de una cueva natural, se cuenta acto por acto.
14 · Mail Club Petita
Arte que llega al buzón
El Mail Club es su suscripción: cada dos meses llega a casa un sobre con una ilustración exclusiva, una carta escrita por ella, una postal, pegatinas y una pequeña sorpresa.
La página explica los planes, resuelve las dudas y lleva al pago seguro de Stripe. Catalina puede cambiar planes, textos y preguntas sin pedírmelo.
15 · Con su voz
Hasta las cookies hablan como ella
El aviso de cookies empieza con un «¡Hola, soy Catalina! ¿Te cuento algo?». Es suyo y cumple la norma: no hay nada marcado por defecto y la analítica solo se carga si aceptas.
Porque una web de artista no debería sonar a plantilla ni en la letra pequeña. También está en inglés, como el resto de la web.
16 · Su día a día
Su Instagram, dentro de la web
La sección «Sigue el día a día» dibuja un móvil con su perfil, sus historias destacadas y sus fotos, sobre un fondo rosa con su nube y su pájaro volando.
No es un widget de Instagram: lo lleva el tema y se actualiza desde el panel, así que la web no depende de nadie para enseñarlo.
17 · Desde el móvil
La misma galería, en la palma de la mano
En el teléfono las obras van de una en una, grandes, para mirarlas con calma, y los filtros se apilan arriba.
La línea de tiempo de las exposiciones se lee de arriba abajo, como si pasaras las páginas de un catálogo.
18 · Comprar desde el móvil
De la portada al pago, con el pulgar
La portada se adapta para que la obra siga siendo la protagonista, y el cajón del carrito ocupa toda la pantalla, con la barra de envío gratis y el botón de pagar siempre a la vista.
Y con Apple Pay o Google Pay, pagar es cuestión de un par de toques.
Funcionalidades
Qué tiene la web por dentro
El panel «Petita»
Portada, tienda, Instagram, Mail Club y biografía, todo editable en un solo sitio y sin tocar código.
Un dato, un solo sitio
El importe del envío gratis o el WhatsApp se cambian una vez y se actualizan en toda la web.
Piezas únicas
Sin control de unidades, con «Vendido» automático y al final de los listados.
Colecciones y exposiciones
Fichas propias con sus campos, unidas a los productos de la tienda.
Encargos a medida
Una invitación dentro de la tienda para pedirle una obra con tu historia.
Recogida en el taller
Gratis y a la vista, junto al envío gratis a Baleares y Península.
Reseñas de Google
Las opiniones de sus clientes, en la portada y en la tienda.
En español y en inglés
Selector de idioma siempre a la vista, y el aviso de cookies también en inglés.
Mi cuenta a su estilo
El acceso y el panel de cada cliente llevan el diseño de la web.
Contacto directo
WhatsApp, mensaje directo de Instagram y un formulario propio con trampa para robots.
Espacio Petita
Su blog, con artículos y proyectos, y el tiempo de lectura de cada uno.
Fotos ligeras
En la ficha solo carga al momento la primera foto. El resto, cuando hace falta.
Tecnología
Con qué está hecha
Está hecha en WordPress y WooCommerce con un tema a medida: sin Elementor, sin JetEngine y sin plantillas. Los filtros, el carrito, los campos del panel, las cookies y el formulario son código propio.
El pago va con Stripe, con tarjeta, Apple Pay y Google Pay. Rank Math lleva el SEO y GTranslate, la versión en inglés.
Las obras, las ilustraciones, las fotos y la marca son de Catalina: yo hice la web para que luzcan. Las capturas son de la web tal como está hoy, con los precios difuminados. Entra, que en directo es mucho mejor.
Servicios
Servicios de este proyecto
Petita Lechatrose está en petitalechatrose.com. Esto es lo que hay detrás, por si te sirve para lo tuyo.
«Quiero vender por internet»
Tiendas online
Tiendas que se entienden, venden y puedes llevar sin depender de nadie.
Presupuesto a tu medida
«Lo que necesito no viene hecho»
Desarrollo web a medida
Lo que tu proyecto necesita y ningún plugin resuelve del todo, hecho para ti.
Presupuesto a tu medida
«Busco a alguien cerca, en Mallorca»
Diseño web en Palma de Mallorca
Webs para negocios de la isla, con reunión en persona si hace falta.
Presupuesto a tu medida
¿Eres artista o tienes un proyecto con mucha personalidad? Cuéntamelo y te digo cómo lo haría.
