Proyecto Küsten Elite

Schortens es un municipio pequeño de la costa frisia, en el noroeste de Alemania, a orillas del Mar del Norte. Ahí nació Küsten Elite, una empresa de limpieza y jardinería recién constituida que, cuando empezamos este proyecto, era exactamente una persona: su dueña. No tenía web, ni cartera de clientes, ni reseñas, ni fotos de trabajos terminados. Lo que sí tenía era una marca, un lema, dos bocetos de logo, un teléfono, un Instagram y la decisión de arrancar por su ciudad para después crecer hacia otras. "Küste" significa costa, y "Elite" habla de la calidad a la que aspira.

Había tres limitaciones que respetar. Todavía no había historia que contar, en un sector donde los competidores presumen de décadas de experiencia o de miles de clientes. El dinero era limitado, así que no cabían una tienda en línea, un sistema de reservas, una pasarela de pagos ni una sesión de fotos profesional, y todo lo que construyéramos tenía que ser barato de producir y todavía más barato de mantener. Y el público era mixto, porque el mercado es Alemania, pero en la costa también hay residentes y visitantes que hablan inglés, y la conversación del proyecto ocurría en español.

La dueña tenía clara la idea de marca. Quería algo humano y realista, sin renunciar a una imagen innovadora, tecnológica y automatizada, y ese doble deseo, la calidez de una persona con un acabado de tecnología, guió todo el proyecto. La oferta también venía definida: limpieza de oficinas, escuelas, consultorios, hoteles y casas vacacionales, más jardinería y cuidado de exteriores. Su lema, "Natürlich sauber", tiene doble sentido en alemán, "por supuesto, limpio" y "limpio de forma natural".

Cuando empezamos, Küsten Elite era una sola persona con un teléfono, un Instagram y dos bocetos de logo.

Fuente: Dossier Küsten Elite (6 de septiembre de 2026), §1 Resumen ejecutivo · Dossier Küsten Elite, §2 El cliente y su situación real · Dossier Küsten Elite, §3 Datos duros de la marca

El encargo traía instrucciones muy precisas. La primera cambió la forma de pensar todo lo demás: la web debía ser informativa, llamar la atención lo más rápido posible y cerrar la venta. No iba a tener carrito, ni reservas, ni pagos, así que su trabajo era generar el contacto, y el éxito se mediría en llamadas, mensajes de WhatsApp y solicitudes de presupuesto. A cada botón, sección y detalle le hicimos la misma pregunta: ¿esto acerca o aleja a la persona de contactar?

La segunda instrucción tenía que ver con quién llega. La idea era que los clientes vinieran ya interesados, desde Instagram, una búsqueda local o una recomendación, y a alguien que ya viene interesado basta con darle el último empujón. Traer ese tráfico es un trabajo aparte. Para ese empujón armamos un sistema de contacto que nunca desaparece: en el celular, una barra fija abajo con tres botones (llamar, WhatsApp y presupuesto), y en el computador, un botón flotante de WhatsApp.

Las demás pistas eran de estilo. El color principal debía ser verde, pero sin que la empresa pareciera una tienda ecológica, y la clienta dio un ejemplo que resolvió el acertijo: Basura Cero, de Colombia, con logo y uniformes verdes. Un verde intenso con mucho blanco, tipografía moderna y fotos reales se lee como empresa de limpieza, lejos de los productos naturales. También pidió imágenes que no se repitieran, prioridad total al celular y una estructura parecida a la de sus webs de referencia. Su favorita mostraba precios, y ella todavía no los tenía, así que ahí apareció la primera tensión de diseño.

A cada botón le hicimos la misma pregunta: ¿esto acerca o aleja a la persona de contactar?

Fuente: Dossier Küsten Elite, §3 El encargo, palabra por palabra, y lo que significaba · Dossier Küsten Elite, §8 Arquitectura de información y mapa de conversión

En Alemania hay una palabra de marketing muy valorada: inhabergeführt, que significa "dirigido por su propietario". Quien contrata habla con la persona responsable y no con un centro de llamadas, y detrás de cada trabajo hay una cara y un nombre. Esa palabra le sirvió a Küsten Elite para darle la vuelta, sin mentir, a su mayor debilidad. Era una empresa nueva, de una sola persona y sin trayectoria, en un sector donde los grandes se venden por volumen y antigüedad, con cifras de décadas, empleados y clientes. En ese terreno no podía competir, pero en el trato personal y directo sí.

Sobre ese eje armamos la prueba de confianza, solo con hechos verdaderos: trato directo con la dueña, seguro de responsabilidad civil de empresa (el estándar de tranquilidad allá), servicio local para Schortens y su comarca, presupuesto gratis y sin compromiso, y garantía de satisfacción. Al visitante alemán la exageración le genera desconfianza y lo que valora es una sobriedad creíble, así que nunca escribimos años de experiencia inventados ni un número de clientes que no existía. Los testimonios que aparecen en la página van marcados como ejemplos, para cambiarlos por reseñas reales en cuanto lleguen.

La otra mitad del ángulo respondía al deseo de la clienta de verse humana y tecnológica a la vez. El relato es cálido, con una persona real al frente, y el acabado técnico está muy cuidado: tres idiomas, animaciones suaves y un WhatsApp que se abre con el mensaje ya escrito.

Quien contrata a Küsten Elite habla directamente con la dueña, y en Alemania eso tiene nombre: inhabergeführt.

Fuente: Dossier Küsten Elite, §4 La gran decisión estratégica: el ángulo · Dossier Küsten Elite, §27 Aprendizajes: la honestidad convierte

La clienta pidió no hablar nunca de riesgo, y la psicología le da la razón: nombrar un riesgo, aunque sea para negarlo, lo instala en la cabeza de quien lee. Así que "No corres ningún riesgo" se convirtió en "preguntar por un presupuesto es gratis y sin compromiso". Fue uno de varios principios que usamos, y cada uno terminó en una decisión que se puede señalar en la pantalla.

El primer marco fue el de Robert Cialdini y sus principios de influencia. La reciprocidad está en el presupuesto gratis, porque ofrecer algo primero predispone a devolver el gesto. La prueba social está en las valoraciones, que por ahora son de ejemplo. La autoridad llega con el seguro, los estándares de higiene y un alemán profesional, y la simpatía, con el tono cálido y la foto de una persona sonriendo. La escasez se usó con cuidado: la barra superior avisa que hay cupos nuevos, algo verdadero en una empresa que recién abre su agenda, sin trucos de urgencia falsa.

Después vino el modelo de comportamiento de Fogg, según el cual una acción ocurre cuando coinciden motivación, facilidad y un disparador. La motivación no se puede subir sin límite, así que trabajamos la facilidad, con contacto a un toque, llamada directa y WhatsApp con el mensaje escrito, y repetimos los disparadores a lo largo de todo el recorrido para que el impulso de contactar nunca quede lejos del pulgar. La ley de Hick explica por qué hay un solo objetivo y un botón principal dominante ("Pedir presupuesto gratis"), con llamar y WhatsApp como opciones secundarias. La de Fitts, por qué los botones miden al menos 48 píxeles de alto y están donde descansa el pulgar.

Por la ley de Jakob imitamos la estructura de las webs del sector, con tarjetas de servicios, un bloque de por qué elegirnos, preguntas frecuentes y zona de cobertura, para que el visitante se sienta en terreno conocido y no gaste energía en orientarse. El botón principal es siempre lo más contrastado de cada pantalla, porque lo que destaca se recuerda y se pulsa más. Y la propuesta de valor, con su botón, está arriba, en lo primero que se ve sin bajar.

La página también es muy específica con el lugar. En vez de decir que presta servicio "en Alemania", nombra Schortens, Wilhelmshaven, Jever, Sande, Wittmund, Varel, Wangerland, Zetel y la región de Friesland, junto a un mapa real. Leer los nombres de los pueblos vecinos da la sensación de "son de aquí, son de fiar", y de paso ayuda al posicionamiento local en Google, lo que se llama SEO local.

"No corres ningún riesgo" pasó a ser "preguntar por un presupuesto es gratis y sin compromiso".

Fuente: Dossier Küsten Elite, §5 Marco teórico: Cialdini, Fogg, Hick, Fitts, Jakob, Von Restorff, encuadre positivo y especificidad local · Dossier Küsten Elite, §17 Regla de copy: siempre en positivo

Lo primero fue abrir la carpeta de marca y leer lo que ya existía. Había dos conceptos de logo muy distintos. Uno era plano: una botella de spray en verde lima cuyo interior dibuja una hoja, con "Küsten Elite" en una letra gruesa gris oscuro y el lema debajo, más una versión en blanco para fondos oscuros. El otro, en 3D y con aire de lujo, mostraba un pulverizador dorado y azul marino que rocía una hoja verde luminosa, con el nombre en una tipografía serif elegante y dos versiones, una clara y una oscura.

El plano dice "empresa de limpieza profesional" a primera vista, que era justo lo que pedía la clienta. El 3D pone el acento en "Elite" y se acerca a una marca de cosmética de lujo. Elegimos el plano como identidad principal de la web, porque comunica el sector sin dudas, y dejamos el 3D como posible acento de lujo para más adelante. Del verde del logo salió el color rector, un lima muy vivo, y con él un problema de accesibilidad: con texto blanco encima no alcanza el contraste necesario. Los botones principales van en un verde profundo que sí lo cumple, y el lima quedó para iconos, brillos y detalles.

La paleta se completó con un verde casi negro para las secciones oscuras, la cabecera y el pie, un blanco con un toque verde para los fondos suaves y un dorado discreto, solo en las estrellas de las valoraciones, como guiño a la palabra "Elite". Los titulares van en Poppins, geométrica y amable, y el cuerpo en Inter, muy legible; esa pareja aleja la página del aire artesanal que la habría llevado al terreno ecológico. Más adelante llegaron los logos definitivos en SVG. El ícono solo va en la cabecera y en el favicon, y el logo con texto, pintado de blanco por CSS sin tocar el archivo, va en el pie.

Con texto blanco encima, el verde lima no alcanza el contraste necesario, así que los botones van en verde profundo.

Fuente: Dossier Küsten Elite, §6 Lectura de la marca: dos logos, dos almas · Dossier Küsten Elite, §9 Sistema visual: color, tipografía, iconografía y tono · Dossier Küsten Elite, §18 Logos definitivos en SVG

La clienta pidió fotos libres, gratuitas y, sobre todo, que no se repitieran. En una web de servicios la calidad de la fotografía es uno de los factores que más pesan en la confianza, y una misma foto de banco usada dos veces delata un trabajo apurado. Así que armamos un proceso casi de laboratorio. La fuente fue Unsplash, por su licencia libre para uso comercial, y en vez de navegar a mano consultamos su buscador de forma sistemática y descartamos todas las fotos de su catálogo de pago, para quedarnos solo con las gratuitas.

Cada foto de Unsplash trae una descripción escrita, y leerlas sirvió para elegir por lo que muestra cada imagen y no por la miniatura. Así apareció, por ejemplo, una foto descrita como un aula de primaria en Alemania, que fue a la tarjeta de escuelas. Varias imágenes de limpiadoras eran de la misma serie de estudio y se descartaron, para que las diez fotos vinieran de sesiones y autores distintos y el conjunto no pareciera un catálogo clonado. Antes de bajar nada verificamos que cada enlace cargara. Las fotos quedaron guardadas dentro del proyecto, en lugar de enlazarlas desde Unsplash, para que la maqueta no se rompiera si fallaba la red o si Unsplash limitaba ese uso.

El set final tiene una limpiadora con equipo de protección limpiando un vidrio para la portada, oficinas, un aula alemana, un consultorio dental, una habitación de hotel, la sala de una casa vacacional, un jardín, el retrato de una limpiadora para la sección "Sobre nosotros", un producto de limpieza ecológico y un detalle de spray. Son diez sesiones distintas y ninguna foto se repite.

Aun así siguen siendo fotos de banco, y la clienta lo sabe. Cambiarlas por fotos reales de sus propios trabajos es el mayor salto de confianza que le queda por dar. La regla de no repetir imágenes es la misma que hoy aplicamos en nuestro propio sitio↗.

Las diez fotos vienen de diez sesiones distintas, y la clienta sabe que todavía son fotos de banco.

Fuente: Dossier Küsten Elite, §10 El sistema de imágenes: la ciencia detrás de elegir 10 fotos

En 2026 es tentador resolver cualquier web con un framework, pero para esta habría sido como llevar una grúa para colgar un cuadro. Es una sola página estática, así que la hicimos con HTML, CSS y JavaScript, sin framework, sin compilación y sin dependencias. El navegador baja tres archivos pequeños y pinta, y en una web que busca contactos la velocidad de carga pesa. Un sitio así tampoco caduca, porque no hay librerías que actualizar ni vulnerabilidades heredadas, y el mantenimiento es casi nulo, algo valioso para una empresa con presupuesto ajustado. Quedaron un archivo de estructura, uno de estilos, uno de lógica y la carpeta de imágenes.

Con esos tres archivos había que hablar tres idiomas, así que construimos un sistema de traducción propio de pocos kilobytes. Tiene un diccionario con alemán, inglés y español, con más de cien textos por idioma, y cada texto de la página lleva una marca que indica qué frase le corresponde. El alemán va escrito directamente en la página, de modo que si el JavaScript fallara el sitio seguiría en el idioma del mercado. Hubo un caso delicado. El texto de consentimiento del formulario incluye un enlace a la política de privacidad, y reemplazarlo como texto plano lo habría borrado, así que ese texto tiene su propio canal para conservar el enlace.

Al cambiar de idioma cambian los textos, los campos del formulario y las etiquetas de accesibilidad, se actualiza el idioma declarado de la página (importante para lectores de pantalla y buscadores) y el botón de WhatsApp reescribe su mensaje, así que un visitante en alemán abre el chat con un saludo en alemán ya redactado. El idioma se elige solo. Primero se respeta lo que la persona escogió antes, luego el idioma del navegador y, si no hay coincidencia, alemán. En las pruebas el navegador estaba en español y el sitio apareció en español, lo que le vino bien a la clienta para revisarlo.

El selector cambió con la conversación. Empezó como tres botones visibles (DE, EN y ES) y, a pedido de la clienta, pasó a un desplegable que muestra solo el idioma actual y abre los otros dos; se cierra al elegir, al tocar fuera o con la tecla Escape. Lo más importante de todo esto es que un solo archivo sirve tres sitios. Cuando la clienta publique una dirección por idioma, las tres saldrán de la misma base y cualquier cambio se hará una sola vez.

Un solo archivo sirve los tres idiomas, así que cada cambio se hace una vez.

Fuente: Dossier Küsten Elite, §11 Por qué NO usamos un framework · Dossier Küsten Elite, §12 El sistema de internacionalización a fondo · Dossier Küsten Elite, §16 Hallazgo de la autodetección de idioma

La primera versión ya traía el esqueleto completo, pero verificarla costó. El navegador de pruebas no dejaba abrir el servidor local de forma directa y tampoco tomaba capturas, porque el panel no estaba dibujando la pantalla. Así que verificamos sin ver, midiendo desde el código el color exacto de los botones, si la fuente había cargado, si había desplazamiento horizontal y si el cambio de idioma funcionaba. Hubo hasta un falso positivo: siete imágenes aparecían "rotas", y eran las de carga diferida, que nunca entraban en pantalla. Pedidas una por una, todas respondieron bien.

"Dime el número" fue lo que le pedimos a la clienta cuando volvió con una lista larga y fina. Separamos lo que era decisión suya de lo que se podía implementar directo, y para que eligiera le propusimos diez titulares en los tres idiomas, cinco enfoques para la sección de cómo funciona y una página boceto con seis maneras reales de mostrar los servicios en el celular: carrusel, dos columnas, acordeón, pestañas, lista compacta tipo app y mosaico. Ella, por su parte, fijó dos reglas de estilo que volvimos obligatorias en los tres idiomas: cero guiones a mitad de frase y cero lenguaje de riesgo.

En la segunda ronda eligió un titular directo ("Servicios de limpieza y jardín en Schortens y alrededores"), eliminó la sección de cómo funciona, escogió el mosaico para los servicios en el celular y quitó cualquier mención de precio de las tarjetas. También pidió que la página se sintiera viva. Investigamos y construimos animaciones de aparición con siete tipos de movimiento, más una cascada escalonada, y les pusimos un seguro triple para que la página nunca se quede en blanco: si el navegador no soporta el sistema, si en 1,6 segundos no ha aparecido nada o si ocurre cualquier error, todo se muestra.

La tercera ronda fue de detective, con capturas reales del celular de la clienta. En una se veía un pedazo de la palabra "Contacto" colgando sobre la cabecera. El menú móvil se escondía desplazándose hacia arriba, pero empezaba 66 píxeles más abajo, y cuando era corto su borde no alcanzaba a salir de la pantalla. Lo arreglamos ocultándolo por visibilidad en vez de por posición, sin importar su altura. En otra captura el ícono del logo se perdía sobre la cabecera blanca; ella sugirió negro y le propusimos el verde oscuro de la marca, donde el lima resalta.

Le armamos seis maneras de mostrar los servicios en el celular y le pedimos una sola cosa: dime el número.

Fuente: Dossier Küsten Elite, §16 Iteración 0: la saga de la verificación · Dossier Küsten Elite, §17 Iteración 1: diez titulares, un desplegable y seis maquetas · Dossier Küsten Elite, §18 y §14.3 Iteración 2 y el failsafe de las animaciones · Dossier Küsten Elite, §19 Iteración 3: bugs cazados con capturas

El boceto tenía que quedar en damorus.com/kusten, un dominio que ya servía otra cosa, así que antes de tocar producción revisamos cómo estaba montado. El repositorio era una aplicación Next.js, y en su configuración apareció un patrón de la casa: los bocetos de clientes viven como sitios estáticos dentro de la carpeta pública, cada uno con una línea de reescritura para que la dirección quede limpia. Ahí estaban, entre otros, Pastime Lanes↗ y The Medspa by Rayray↗. Abrimos uno de esos bocetos y seguimos la misma convención al pie de la letra.

Vivir en una subruta tiene una trampa. Si la página usa rutas relativas y alguien entra a /kusten sin barra final, el navegador busca los archivos en la raíz del dominio y todo se rompe. Por eso convertimos las 42 referencias del HTML (estilos, código, favicon, imagen para redes, fotos y logos) en rutas absolutas con el prefijo del proyecto. Ahí sirvió haber decidido no poner imágenes dentro del CSS, porque solo hubo que tocar un archivo. Sumamos la etiqueta que le pide a Google no indexar un boceto y una sola línea de configuración para la dirección limpia. El sitio quedó aislado y no comparte estilos, código ni compilación con la aplicación.

El cambio se publicó en un único envío con 19 archivos, la carpeta del sitio y la línea de configuración, sin tocar nada más. Vercel lo detectó y lo desplegó solo. Después lo comprobamos en vivo. La dirección respondía con su título correcto, cargaban los estilos, el código, las imágenes y los logos, funcionaba con y sin barra final, la etiqueta de no indexar estaba presente y la consola no mostraba errores. El alojamiento adicional costó prácticamente cero, porque el sitio vive dentro de una infraestructura que ya estaba pagada.

Convertimos 42 referencias en rutas absolutas para que el sitio funcionara con y sin barra final.

Fuente: Dossier Küsten Elite, §22 El trabajo detectivesco: Vercel, GitHub y un monorepo · Dossier Küsten Elite, §23 Rutas, rewrites y el arte de vivir en una subruta · Dossier Küsten Elite, §24 El push y la verificación en vivo

El formulario valida los datos y muestra un mensaje de gracias, pero todavía no envía la solicitud a ningún lado. El teléfono y WhatsApp sí funcionan al cien por ciento. Los testimonios son de ejemplo y deben cambiarse por reseñas reales, y las fotos son de banco. El Impressum y la política de privacidad (Datenschutz), obligatorios por ley en Alemania, están enlazados pero sin su texto definitivo. Y la etiqueta de no indexar sigue activa porque es un boceto; cuando se apruebe, se quita para que Google empiece a trabajar. La clienta conoce estos pendientes desde el principio.

Tampoco hay métricas de negocio. Es una marca nueva, sin tráfico y sin indexar, así que lo que se puede mostrar hoy es técnico y estratégico, y no vamos a inventar resultados. Conectar el formulario es un trabajo pequeño, pero mientras no se haga, esa vía no recibe ninguna solicitud. Hay además un paso mayor que Damorus Projects quiere ofrecerle, porque lo ve muy viable en el mercado alemán: que la página, además de conseguir el contacto, cobre. La base sin framework se pensó para eso, para sumar idiomas, ciudades o, el día de mañana, precios y reservas sin rehacer nada.

La propuesta suma tres piezas por un valor aproximado de $700 USD. Precios visibles, para que la persona sepa cuánto cuesta antes de preguntar, como hacía la web de referencia favorita de la clienta. Una pasarela de pagos para recibir el pago en línea. Y correos automáticos que confirmen cada solicitud y hagan el seguimiento sin que la dueña tenga que escribirlos uno por uno. Con eso, una empresa de una sola persona podría atender más clientes sin sumar horas de oficina. Si tu negocio está en ese mismo punto, puedes empezar un proyecto↗ y lo revisamos contigo.

La página está hecha para conseguir la llamada. El paso siguiente sería que también cobre.

Fuente: Dossier Küsten Elite, §25 Estado final y un ejercicio de honestidad · Dossier Küsten Elite, §13 Formulario (maqueta sin backend) · Entrevista con el equipo de Damorus Projects, 2026: propuesta de precios, pasarela y correos automáticos por ~$700 USD