El encargo

Jan y Edu sabían entrenar. Lo que no tenían era dónde contarlo.

Nexo no es una cadena: es un centro de entrenamiento funcional con grupos de máximo 12 personas, dos entrenadores titulados y un método que pone la calidad por delante del volumen. Tenían rótulo, logo, equipación y una sala con identidad propia — todo menos un sitio en internet donde existir.

La marca, leída a fondo

Antes de diseñar nada, desmonté su identidad. Nexo trabaja sobre un sistema de tres colores tan disciplinado que parece de manual — y eso, en un sector dominado por naranjas agresivos y amarillos eléctricos, ya es una declaración de intenciones. La web tenía que respetarlo al milímetro.

Por qué la web está ordenada así

Elegí una arquitectura one-page: una sola página, scroll vertical, navegación por anclas. Quien busca gimnasio no quiere explorar un menú de diez páginas — quiere una respuesta lineal a una pregunta: “¿esto es para mí?”. El orden de las secciones no es decorativo: es una escalera de conversión. Cada bloque derriba una objeción antes de pedir nada.

1. 01
   Hero — “Entrena en grupos reducidos. Resultados reales.”Propuesta de valor en 3 segundos. La tríada 12 máx · 100% personalizado · 0€ responde de golpe las tres dudas que frenan a cualquiera.
2. 02
   El equipo — “Quién va a entrenarte”La confianza se construye con personas. Jan y Edu aparecen con nombre, cara y especialidad antes que cualquier precio.
3. 03
   Historia — “Le pusimos NEXO por una razón”El relato de marca: por qué existen, no solo qué venden. Da significado al nombre y humaniza el proyecto.
4. 04
   Reseñas — “Gente como tú”Prueba social en el momento exacto: justo después de generar confianza. Otros ya decidieron que sí.
5. 05
   Servicios — “Elige cómo entrenar”Grupo, personalizado o bono regalo. Las opciones llegan cuando el visitante ya quiere entrar y solo busca su formato.
6. 06
   Horarios — “Encuentra tu hora”La logística antes que el precio: comprobar que encaja en tu vida es la última barrera práctica.
7. 07
   Tarifas — “Sin matrícula. Sin permanencia.”El precio aparece tarde, a propósito: cuando ya hay deseo. Y se enmarca quitando riesgo y desglosando el coste por sesión.
8. 08
   Aventuras — “La tribu también sale al monte”Pertenencia. No vendes un gimnasio, vendes una comunidad — con CTA directo a su Instagram.
9. 09
   FAQ — “Antes de empezar”Demolición de las últimas objeciones, justo antes del cierre. Nadie llega al contacto con una duda viva.
10. 10
    Más de nosotros — “Síguenos y encuéntranos” El ecosistema de marca más allá de la web: prueba de que esto es un negocio vivo, no un folleto.

    Instagram · +850 Spotify App iPhone App Android
11. 11
    Contacto — “¿Hablamos?”El cierre: mapa de ubicación + formulario corto que desemboca en WhatsApp. La acción, cuando ya está convencido.

Por qué esta tipografía

Toda la web usa una sola familia: Montserrat. Una bien jerarquizada lee como un sistema; dos mal combinadas, como una plantilla. Es una sans geométrica, moderna y deportiva sin caer en el cliché del fitness — y perfectamente legible en móvil, que es de donde llega el 80% del tráfico.

La clave es el contraste de peso: titulares en 900 con interletraje negativo para compactarlos y darles fuerza física, cuerpo en 400 para no cansar. Un solo recurso, usado con disciplina, hace toda la jerarquía.

Cómo está diseñada para convertir

Toda la web empuja a una sola acción: escribir por WhatsApp. Para un negocio local es donde vive el cliente. Un formulario que manda un email es una barrera; un botón que abre una conversación, no.

Lo que no se ve pero decide

Una web local que carga lenta o que Google no entiende, no existe. Buena parte del trabajo es invisible — y determinante. Construida mobile-first porque su tráfico llega casi entero desde el móvil: la bio de Instagram y Google Maps.

Todo incluido. Sin letra pequeña.

Nexo recibió un paquete cerrado: encendieron la web y no tuvieron que gestionar absolutamente nada más.

• Diseño web mobile-first
• Copywriting de conversión
• Arquitectura de la información
• SEO local (Vecindario · Gran Canaria)
• SEO técnico + Schema markup
• Dominio .es
• Hosting
• Certificado SSL
• Panel de métricas
• PWA + rendimiento (LCP)

El encargo

Una casa que ya lo hacía todo bien — solo le faltaba un sitio propio donde demostrarlo.

Inma alquila su villa en primera línea de Costa Calma desde hace cuatro años. Tiene el estatus Superhost, un 4,98★ sobre más de 80 reseñas y una tasa de respuesta del 100% — pero todo eso vivía encerrado dentro de Airbnb, pagando comisión por cada reserva y sin ninguna identidad fuera de la plataforma. El reto no era "hacer una web bonita": era construir un destino propio que capturase la reputación ya ganada y la convirtiera en reservas directas, sin perder ni un gramo del nivel de detalle que se espera de una villa de este precio.

La identidad, leída a fondo

No hay marca previa que respetar aquí — hay una casa real que fotografiar con la verdad por delante. La paleta la construí a partir de la propia arquitectura: blanco de cal, agua turquesa y la piedra oscura del atardecer. Nada de azules de piscina genéricos ni naranjas de folleto turístico: los mismos tres colores que verías de pie en la terraza.

Dos familias tipográficas, un solo trabajo cada una. Cormorant Garamond en peso 300 — fina, editorial, casi susurrada — para todo lo que es sensación: titulares, citas de la anfitriona, los números romanos de la galería. Instrument Sans para todo lo que es información: navegación, precios, formularios. La primera vende la casa; la segunda gestiona la reserva. Ninguna hace el trabajo de la otra.

Y como la marca no venía cerrada de fábrica, la construí configurable: el color de acento es una sola variable con tres presets listos — turquesa, terracota, azul noche. Cambiar el ánimo entero de la web es una decisión, no un rediseño.

Por qué la web está ordenada así

Once tramos, una sola página, scroll vertical. Nadie decide alquilar una villa mirando un menú: decide dejándose llevar. El orden no es cronológico, es una escalera de deseo — cada bloque construye sobre el anterior hasta que reservar es la conclusión obvia, no una petición de fe.

1. 01
   Hero — "a hand-sculpted white house above a turquoise sea"Titular en máscara ascendente, imagen que hace zoom-out al cargar y una cinta de méritos en bucle (4,98★ · piscina todo el año · playa a 5 min) antes de que el visitante decida quedarse.
2. 02
   La Colección — seis salas numeradas en romanoLa galería se cuelga como un salón de museo, no como un carrusel de anuncio: cada foto tiene su propio marco y su propio peso visual.
3. 03
   About — la casa entera, casa por casaMarcos circulares deformados (radios asimétricos, nunca un círculo perfecto) y placas de cifras — casa completa, 3 huéspedes, 2 habitaciones, 2 baños — a modo de sello, no de tabla.
4. 04
   Amenities — 45 detalles, ninguno gritandoIconos de línea uniformes en una rejilla que se pliega sola en móvil, con un botón "ver todas" para no enterrar la piscina privada bajo el secador de pelo.
5. 05
   Sleeping — dos habitaciones, sin adornosJusto después de las comodidades, cuando la duda ya es "¿dónde duermo?" y no "¿esto es serio?".
6. 06
   Nearby — "days that plan themselves"El tramo más largo de la web (seis veces la altura de pantalla) y el único con scroll-hijack: aquí es donde el scroll deja de ser vertical y empieza a contar una historia.
7. 07
   Host — Inma, no "el anfitrión"Fondo verde pino, foto redonda con el sello Superhost cosido en la esquina. Cuatro años de experiencia contados en primera persona, a un minuto a pie de la villa.
8. 08
   Reviews — 4,98★ importadas, no inventadasDesglose por categoría (limpieza, precisión, ubicación...) y tres reseñas reales de Airbnb, cada una en su idioma original — la prueba social ya existía, aquí solo se le da un escaparate.
9. 09
   FAQ + Contacto — las siete preguntas que sí importanPiscina sin vallar, dónde aparcar, si aceptan perros — dichas con la misma franqueza que un anfitrión real, seguidas de un formulario directo para lo que no está cubierto.
10. 10
    Reserva — calendario de tres meses en vivoEl corazón funcional de la web: precios y disponibilidad reales día a día, con un total estimado antes de pedir un solo dato — sin pago, sin plataforma de por medio.
11. 11
    Cierre + Footer — la misma marea, otra vezLa foto de la playa vuelve para el CTA final con su propio parallax, y el pie deja el número de registro turístico de Canarias a la vista — nada que esconder.

Cuatro trucos de scroll, ninguno gratuito

Una web de villa vive o muere en cómo se siente al desplazarse por ella. Nada de esto es decoración: cada efecto está resolviendo un problema concreto de percepción o de rendimiento.

Detalle de fontanero: el requestAnimationFrame que mueve todo esto se pausa solo cuando el navegador oculta la pestaña — así que al volver, la web fuerza una resincronización inmediata de cabecera y parallax antes de dejar que el bucle normal retome. Sin ese parche, quien vuelve de cambiar de app se encontraría la cabecera congelada con el color de la sección equivocada.

El motor: nada de plantillas

Aquí no hay WordPress ni Webflow. La web corre sobre un motor de componentes propio — HTML declarativo con variables {{ así }}, condicionales y bucles, compilado a una app reactiva real — y un backend hecho a medida para el negocio concreto de Inma, no genérico.

El panel de Inma

Detrás de la web pública hay otra capa que casi nadie ve: un panel privado (en /admin, bloqueado a buscadores) donde Inma gestiona el negocio real — mensajes, reservas y precios — sin escribir una línea de código ni depender de mí para el día a día. Tres pestañas, cada una resolviendo un problema distinto de gestionar una villa a mano.

Las tres pestañas comparten la misma cabecera de estado — ocupación de los próximos 30 días, próxima entrada y salida, y el hueco de noches libres entre una reserva y la siguiente — así que Inma nunca pierde el contexto general al saltar de una tarea a otra.

panel · Mensajes Acceso privado

Cada consulta del formulario de contacto aterriza aquí, no en una bandeja de email donde se pierde entre spam. Tres estados — Nuevos, Leídos, Respondidos — con su contador en la propia pestaña, y las acciones cambian solas según el estado: "Marcar leído" desaparece en cuanto el mensaje ya está respondido. Nombre, email, teléfono y cuánto hace que llegó ("hace 3 h", "hace 2 días") están a la vista sin abrir nada.

panel · Reservas Acceso privado

Las solicitudes se agrupan en Pendientes, Aprobadas, Rechazadas y Canceladas. Ante una pendiente, Inma solo ve dos botones — Aprobar o Rechazar — y en el instante en que aprueba, esas noches se bloquean solas en el calendario público: no hay un segundo paso manual, no hay riesgo de overbooking por despiste. Noches, huéspedes y precio total ya vienen calculados en la fila.

panel · Calendario Acceso privado

Un precio por defecto que se aplica a cualquier noche sin tarifa especial, y siete meses editables por delante con una leyenda de color — normal, tarifa alta, en proceso, reservado, bloqueado. Cada casilla es clicable y edita ese día en concreto, así que una fecha de puente o de temporada alta sube de precio con un clic, sin tocar el resto del calendario. El botón "Añadir mes +" extiende la ventana de reservas hacia delante en cuanto hace falta.

Lo que Inma cambia aquí, el huésped lo ve al instante en casasolyluna.es — en tiempo real, sin recargar la página, sin publicar nada ni esperar un despliegue.

Reserva directa, sin fricción

El calendario no pide un dato hasta que el huésped ya sabe cuánto le va a costar.

El calendario de tres meses distingue de un vistazo noche estándar, fecha especial y noche ya reservada, y calcula un total estimado en cuanto se marcan las fechas — antes de pedir nombre, email o teléfono. Al enviar la solicitud no se cobra nada: Inma confirma por email con la política de cancelación exacta, igual que haría en persona. Es la misma lógica de "quita objeciones antes de que se formulen" que ya funcionaba en Airbnb, trasladada a un formulario que no le cuesta comisión a nadie.

Todo incluido. Sin letra pequeña.

Casa Sol y Luna recibió un sistema completo, no una landing page con una foto bonita.

• Diseño web inmersivo one-page
• Motor de plantillas propio
• Backend a medida en tiempo real
• Panel de administración a medida
• Calendario de precios en tiempo real
• Formulario de contacto y reserva
• Multi-idioma: ES · EN · DE · FR
• Prerenderizado SEO por idioma
• Cumplimiento legal (registro turístico)
• Hosting y despliegue continuo

Mi segundo negocio

El 95% de los clientes contentos nunca deja reseña. No por falta de ganas: por exceso de pasos.

GoHighRated vende una placa con un chip NFC dentro: el cliente acerca el móvil y se abre directamente la ficha de Google del negocio, con las cinco estrellas a un pulso. Sin app, sin escanear un QR, sin buscar nada. La idea es quitar toda la fricción justo en el momento de máxima satisfacción — cuando el café estaba bueno o el corte quedó perfecto.

Es un proyecto distinto a los encargos de clientes: aquí decido yo. Diseño la marca, monto la web, hago las fotos de producto, escribo cada línea y atiendo las ventas. Le dedico menos horas que al diseño para terceros — es mi segundo frente — pero está montado con el mismo criterio profesional que si me lo hubiera encargado el cliente más exigente.

Robarle la paleta a Google, a propósito

La decisión de marca más fuerte fue la más obvia y la más arriesgada: usar los cuatro colores exactos de Google. El producto sirve para conseguir reseñas de Google — así que la web tenía que sentirse Google desde el primer píxel. Azul, rojo, amarillo y verde no son una decoración: son la promesa de para qué sirve esto, dicha sin una sola palabra.

Sobre esa base, dos decisiones de estilo hacen todo el trabajo. La primera: neumorfismo. Cada tarjeta, botón e icono está "extruido" de la superficie con sombras dobles — una oscura abajo-derecha, una clara arriba-izquierda. La web se siente táctil, casi de plástico, como el propio producto físico que vende. La segunda: Poppins, una sans geométrica y redondeada, moderna sin ser fría — la voz tipográfica de una startup de producto.

Y la firma que lo une todo: un anillo de gradiente cónico con los cuatro colores girando sin parar alrededor de la placa. Aparece en el producto, en los botones, en el menú. Es el logotipo en movimiento — Google, siempre vivo. Aquí lo tienes girando de verdad:

Por qué la web está ordenada así

Una sola página, pensada como un argumento de venta de arriba abajo. Cada sección responde la siguiente pregunta que se hace quien vende en un local: ¿esto qué es?, ¿por qué es mejor?, ¿cómo funciona?, ¿cómo es?, ¿me sirve a mí?, ¿funciona de verdad?, ¿cuánto?, ¿y si…? — y solo entonces, comprar.

1. 01
   Hero — "Más reseñas de Google en 3 segundos"Promesa en una frase, foto de producto que flota siguiendo el ratón, y una barra de cifras que cuenta sola: +1.100 reseñas, 4,9★, +50 negocios.
2. 02
   Problema → Solución — de palabra vs. QR vs. NFCTres tarjetas en progresión roja → amarilla → verde: por qué lo de siempre no convierte y por qué un toque sí.
3. 03
   Cómo funciona — 3 pasos ilustrados en CSSColoca la placa, el cliente acerca el móvil (con ondas NFC animadas y un teléfono que hace "tap"), deja su reseña. Sin fotos: animación pura.
4. 04
   El producto — la placa, de cerca10 cm, dos colores, adhesivo 3M. Y una ficha técnica seria (chip NTAG216, IP67, +10 años) escondida en un modal para quien la quiera.
5. 05
   Sectores — "¿me sirve a mí?"Restaurantes, hoteles, peluquerías, tiendas, clínicas. Cada uno con su momento exacto para pedir la reseña, para que el visitante se reconozca.
6. 06
   Testimonios — la prueba de que funciona"De 47 a 212 reseñas en cuatro meses." Justo antes del precio, cuando la objeción es "¿y esto de verdad sirve?".
7. 07
   Precios — un pago, reseñas para siempreIndividual, Pack 3 (el más vendido, con el anillo girando) y Pack Negocio a medida. Sin cuotas: el chip es tuyo de por vida.
8. 08
   FAQ + CTA final — derribar las últimas dudas¿Sin batería? ¿Cualquier móvil? ¿Es legal? Respondidas. Y un cierre a todo color que devuelve al visitante a comprar.

Todo se mueve, nada distrae

Una web de producto tiene que sentirse viva sin marear. Cada efecto tiene un motivo: reforzar la marca, guiar la mirada o dar sensación de calidad. Nada de librerías pesadas — todo es CSS y un poco de JavaScript propio.

El detalle del que más orgulloso estoy: el botón camaleón. El CTA fijo lee qué sección tiene detrás y adopta su color de Google — azul en "cómo funciona", rojo en sectores, amarillo en precios, verde en la FAQ. La web entera respira los cuatro colores según bajas. Aquí lo tienes ciclando:

Vender sin carrito, sin plataforma

No hay Shopify ni pasarela de pago: para un ticket pequeño y muy conversacional, el mejor "checkout" es WhatsApp. Cada botón de compra abre un chat con el mensaje ya escrito — qué pack, cuántas placas, de qué color — así que el cliente solo tiene que pulsar enviar. Menos fricción para él, contacto directo para mí.

Un producto de 25 € que se explica solo

La web no tiene que convencer de que la placa es buena. Tiene que hacer obvio que el momento de comprarla es ahora.

Todo el mensaje gira sobre una idea: es un pago único por algo que trabaja para ti durante más de diez años, todos los días. Sin cuotas, sin permanencia, sin apps que mantener. Las objeciones — batería, compatibilidad, legalidad — se responden antes de que el visitante las piense, y el precio se enmarca como lo que es: barato para lo que devuelve. Este es el proyecto donde llevo puesto a la vez el sombrero de diseñador y el de dueño — y se nota en que cada decisión de la web está pensada para vender, no solo para lucir.

De la idea a la venta, todo yo.

GoHighRated no es solo una web: es un negocio montado de principio a fin por una sola persona.

• Marca e identidad visual
• Diseño web one-page
• Motor de plantillas propio
• Copywriting de venta
• Fotografía y montajes de producto
• Ilustraciones y animaciones CSS
• Checkout por WhatsApp
• Configurador de pedido
• Cumplimiento legal (aviso, privacidad, cookies)
• Producto físico, stock y envíos