De un documento de estrategia a una marca y un sitio que ya trabajan

Partimos de un documento de estrategia de cinco páginas, un logotipo y una lámina de color. El documento apuntaba alto: posicionamiento “B2B de élite”, diseño suizo, una tipografía de exhibición con licencia y un backend empresarial con Docker, Azure y SQL Server.

Antes de diseñar, revisamos cada punto con una sola pregunta: ¿qué le devuelve a un estudio de dos personas que todavía está construyendo su cartera de clientes?

• Se mantuvo: el diseño suizo con mucho espacio, la tipografía fluida y el flujo de contacto (confirmación, correo y agenda), que es la parte que trae trabajo.
• Se ajustó: el posicionamiento pasó a pequeñas y medianas empresas de Estados Unidos y Canadá; el movimiento se resolvió solo con CSS y fuera del hilo principal; dos paletas en conflicto quedaron en una.
• Se reemplazó: las tipografías con licencia, que no se podían alojar en el sitio, y el backend empresarial, que un formulario de contacto no necesita. El stack de Azure pasó a ser un proyecto de portafolio aparte.

Conservamos el logotipo de serif de alto contraste, lo redibujamos en vector y lo acompañamos de una sola paleta: Carbon Black, Bone, Steel Gray y Precision Red. El rojo se reserva para estados de foco, hover y detalles pequeños, nunca para superficies grandes. Todos los colores de texto cumplen WCAG AA sobre el fondo.

En tipografía elegimos familias de licencia libre que se cargan desde nuestro propio dominio: Geist para titulares y texto, Geist Mono para etiquetas y datos, e Instrument Serif en cursiva como acento ocasional que hace eco del logotipo.

El sitio está escrito para un dueño ocupado que decide en pocos minutos: qué hacemos, cuánto cuesta, cómo trabajamos y cómo empezar. Los paquetes muestran precios iniciales en dólares, porque los clientes del extranjero quieren una cifra antes de agendar una llamada.

• Inglés primero, español igual de completo: cada página existe en los dos idiomas con su propia URL y etiquetas hreflang.
• Un flujo de contacto que termina en llamada: el formulario se valida en ambos lados, está protegido con Cloudflare Turnstile, envía la solicitud y una respuesta automática con Resend, y ofrece un espacio de 20 minutos en Calendly.
• Estático y ligero: las páginas se generan por adelantado; solo el menú y el formulario envían JavaScript. Las animaciones de entrada usan animaciones de CSS ligadas al scroll y respetan “reducir movimiento”.
• Analítica sin cookies: Cloudflare Web Analytics, así que no hace falta aviso de cookies.

Una marca que dice qué hacemos en cuatro palabras y un sitio que mantenemos nosotros mismos con un costo de operación casi nulo. Carga rápido, funciona en dos idiomas y convierte un formulario de contacto en una conversación agendada. Todo el proceso, del primer análisis al lanzamiento, quedó documentado para repetirlo con clientes.