Todo el trabajo

Caso de estudio 02

Bordados Yussi

Dotación y bordado industrial · Manizales

Un taller textil con planta propia desde 1999. El sitio ordena cinco líneas de producto, explica cómo se aprueba una muestra y lleva cada visita a una cotización.

Visitar sitio
Portada del sitio de Bordados Yussi en escritorio
Servicios
Dirección · Diseño · Desarrollo · SEO
Construido con
Vite · TypeScript · Canvas · Vercel
Estado
En producción · ES / EN

Contexto

Un oficio que se compra viéndolo.

Bordados Yussi confecciona y borda en Manizales desde 1999, con planta propia: digitalización del logo, telas, confección y bordado bajo el mismo techo. Sus clientes son empresas, clínicas, colegios, marcas y talleres.

Ese tipo de compra no se decide leyendo una lista de servicios. Se decide viendo el material, entendiendo qué se puede pedir y sabiendo qué pasa antes de que la máquina arranque. El sitio tenía que enseñar el taller, no describirlo.

Arquitectura

Cómo se ordena el sitio.

Una sola página con anclas nombradas, en el orden en que un comprador se hace las preguntas: qué fabrican, cómo se ve, cómo se trabaja, hasta dónde llegan, quiénes son, qué falta por resolver y cómo pedirlo.

Productos

Cinco líneas: dotación empresarial, uniformes médicos, ropa industrial, uniformes escolares y servicio de bordado. Cada una con su público, su descripción y su propio botón de cotizar.

Nuestro trabajo

La planta por dentro: bordado en proceso, digitalización, materiales y confección. Es la prueba de que la producción es propia.

Cómo trabajamos

Cuatro pasos —definir, cotizar, aprobar muestra, producir y revisar— que responden la duda real: qué se aprueba y cuándo.

Cobertura

Caldas, Colombia e internacional en tres pestañas sobre un mapa. Resuelve “¿me llega a mi ciudad?” sin escribir a nadie.

Nosotros y respaldo

El origen en 1999, el argumento de no tercerizar y la tecnología e insumos que sostienen el trabajo.

Preguntas y cotización

Cinco preguntas que quitan fricción —mínimo, tiempos, envíos, prendas propias, logo— y el formulario que abre la conversación.

La planta

La prueba es el material.

El argumento comercial de Yussi es que nada se terceriza. En el sitio eso no se escribe: se enseña. Cuatro planos del taller —máquina, digitalización, hilos, confección— sostienen una sola frase.

El bloque de planta con los cuatro planos del taller
Nuestro trabajo — bordado, digitalización, materiales y confección
  1. Dotación empresarial Empresas y atención al público
  2. Uniformes médicos Clínicas, consultorios y estética
  3. Ropa industrial Operación, logística y mantenimiento
  4. Uniformes escolares Colegios, jardines y academias
  5. Servicio de bordado Marcas, talleres y prendas listas

Dirección visual

Materia, no catálogo.

Fotografía de planta, no de banco de imágenes

El bloque de trabajo muestra la puntada, el hilo y la tela reales, etiquetados por lo que son: bordado en proceso, digitalización, materiales, confección. Es lo que sustituye a un argumento de calidad escrito.

Azul industrial sobre papel frío

Un azul profundo de marca sobre superficies claras. El contraste alto deja que el color de las prendas y los hilos sea lo único saturado en pantalla.

Titulares cortos, etiquetas en versalitas

Archivo para los titulares, Manrope para el texto y etiquetas en mayúsculas con tracking abierto sobre cada bloque. La retícula numerada —01 a 05 en las líneas de producto— da orden de lectura sin necesidad de decorar.

Cada bloque termina en una acción

No hay sección sin salida: cada línea de producto, el proceso, la cobertura y el bloque de equipo llevan a cotizar. La conversación es el objetivo, no la permanencia.

La experiencia

El taller, en pantalla.

Las cinco líneas se leen de un vistazo con su público al lado; el bloque de planta pone la producción propia delante del argumento; el mapa de cobertura contesta el alcance en tres pestañas.

Las cinco líneas de producto numeradas, cada una con su público y su botón de cotizar
Los cuatro pasos del proceso: definir, cotizar, aprobar muestra, producir y revisar
El mapa de cobertura con las pestañas Caldas, Colombia e Internacional

Móvil

Lo que cambia en 390 px.

La navegación pasa a un panel completo en vez de comprimirse; las líneas de producto se apilan conservando la numeración; el mapa de cobertura cambia de arrastre a pestañas con lista. Nada se esconde: se reordena.

El hero en móvil con las etiquetas de producción
Hero — el CTA de cotizar entra antes del primer scroll
Las líneas de producto apiladas en móvil
Productos — una línea por pantalla, numeración intacta
El proceso de cuatro pasos en móvil
Proceso — los cuatro pasos en vertical, sin perder el orden

Construcción

Cómo está hecho.

Una sola página compilada con Vite y servida desde Vercel: un bundle, sin CMS y sin framework de UI arrastrando peso. Lo que sí pesa —el video del hero y el mapa— se difiere o tiene alternativa estática.

  • Vite + TypeScript

    Un único bundle para toda la página.

  • Canvas + fallback

    El mapa de cobertura se dibuja en canvas y cae a imagen si no puede.

  • ES / EN

    Un conmutador de idioma sobre el mismo marcado.

  • WhatsApp

    El formulario de cotización termina en la conversación real.

Resultado

Un taller de 1999 con una presencia digital que enseña el material, explica el proceso y termina en cotización.

No publicamos cifras: no las hemos medido. Lo entregado es verificable en el sitio — cinco líneas de producto ordenadas, el proceso de aprobación explicado, la cobertura resuelta, las preguntas frecuentes contestadas y una vía de cotización en dos idiomas.

Visitar sitio
Siguiente proyecto NextMail Producto propio del estudio. Una landing de conversión, de arriba abajo. Ver el caso

¿Empezamos uno?

Cuéntanos qué quieres construir y qué debería conseguir.

Cuéntanos tu proyecto