Saltar al contenido
Benjamín GutiérrezDesarrollo web · Santiago de ChileEscríbeme

Desarrollo web · Santiago de Chile

Bonita no basta. Tiene que cargar, verse en el celular y traerte gente.

Soy Benjamín. Hago páginas para negocios de Santiago. Trabajo solo, no soy agencia: hablas conmigo y construyo yo. Acá abajo están los seis sitios que llevo, con los números medidos de cada uno.

Casos6 sitios

Seis sitios, y la regla para mirarlos.

Los dos primeros son de clientes reales, con su nombre y sus datos. Los otros cuatro son negocios inventados que hice para mostrar cómo trabajo, y lo dicen en su propia página: no existe ninguno en Chile con ese nombre. Todos están publicados y funcionando; ábrelos y revísalos.

En producción

Becara SpA

Constructora · La Florida

Abrir el sitio

Quien va a encargar una obra no compara catálogos. Busca la suya ya construida.

Arrastra la regla para ver el sitio en otros anchos

Celular
Escritorio

1280 px · vista de escritorio

Captura del sitio de Becara SpA en pantalla de escritorio.Captura del sitio de Becara SpA en pantalla de celular.

Las dos capturas son reales, tomadas sobre el sitio publicado a 1280 px y a 390 px con un teléfono emulado. Bajo los 760 px el visor muestra la de celular.

El problema

Becara lleva cuarenta años construyendo y toda su presentación vivía en dos PDF: uno de carta y otro de 69 MB con el registro de obra. Eso no se manda por WhatsApp, y quien alcanzaba a abrirlo tenía que buscar solo si entre las obras había algo parecido a lo suyo.

Lo que hice

La portada es el rótulo que lleva todo plano: especialidad, etapa, quién encarga y comuna. Con esas cuatro respuestas la página devuelve una obra ya ejecutada equivalente a lo que le están pidiendo —con su foto, su nombre y dónde quedó— y qué conviene tener a mano en la visita a terreno. Ese mismo contenido sale redactado por WhatsApp.

El sistema visual

Marino y ocre medidos del archivo del logo. Oswald angosta en versalita para los rótulos e Inter para el texto, igual que su carta de presentación. Cada sección cierra con un filete de lámina técnica. Las 24 fotos son de sus propias obras: ninguna de banco de imágenes.

Lighthouse · móvil

Compruébalo en PageSpeed
  • 99Rendimiento
  • 100Accesibilidad
  • 100Prácticas
  • 100SEO

458 kB es lo que baja el visitante entero, tipografías incluidas, medido sobre el sitio publicado. En un celular con conexión mediana la pantalla queda pintada en 2.0 s. Las notas son de una corrida del 2026-09-19; el enlace de arriba la repite en los servidores de Google y puede dar un par de puntos distintos.

Cliente real

Reedifica

Constructora · Santiago

Abrir el sitio

Que la conversación parta con datos, no con «cuánto sale».

Arrastra la regla para ver el sitio en otros anchos

Celular
Escritorio

1280 px · vista de escritorio

Captura del sitio de Reedifica en pantalla de escritorio.Captura del sitio de Reedifica en pantalla de celular.

Las dos capturas son reales, tomadas sobre el sitio publicado a 1280 px y a 390 px con un teléfono emulado. Bajo los 760 px el visor muestra la de celular.

El problema

Una constructora recibe consultas que no puede cotizar: llegan sin metros cuadrados, sin comuna y sin saber si es obra nueva o ampliación. Cada una cuesta tres correos antes de poder decir nada.

Lo que hice

El hero es una ficha de obra. El visitante la arma en cuatro toques —qué necesita, cuántos metros, en qué comuna, cuándo partiría— y la página le devuelve un plazo referencial al tiro. La constructora recibe el pedido ya cubicado.

El sistema visual

Hormigón, acero y ladrillo sacados del logo del cliente. Archivo variable en su ancho máximo, cero radios, secciones claras y oscuras alternadas como hiladas trabadas.

Lighthouse · móvil

Compruébalo en PageSpeed
  • 100Rendimiento
  • 100Accesibilidad
  • 100Prácticas
  • 100SEO

96 kB es lo que baja el visitante entero, tipografías incluidas, medido sobre el sitio publicado. En un celular con conexión mediana la pantalla queda pintada en 1.3 s. Las notas son de una corrida del 2026-09-19; el enlace de arriba la repite en los servidores de Google y puede dar un par de puntos distintos.

Conceptual

Las Doce

Productora de eventos · Pedro Aguirre Cerda

Abrir el sitio

A esta fiesta nadie va solo. Lo que hay que destrabar no es la compra: es que el grupo se decida.

Arrastra la regla para ver el sitio en otros anchos

Celular
Escritorio

1280 px · vista de escritorio

Captura del sitio de Las Doce en pantalla de escritorio.Captura del sitio de Las Doce en pantalla de celular.

Las dos capturas son reales, tomadas sobre el sitio publicado a 1280 px y a 390 px con un teléfono emulado. Bajo los 760 px el visor muestra la de celular.

El problema

Una fiesta de fin de año se define en un chat de amigos, no en la página. El que la encontró tiene que convencer a otros cinco, y termina reenviando un enlace pelado y contestando de memoria cuánto sale, dónde es y cómo se vuelve a las seis de la mañana.

Lo que hice

El hero es la entrada. Se arma en cuatro toques —sector, cuántos van, comuna y si toman el bus de las cinco— y tiene dos salidas distintas: una manda al chat del grupo el resumen ya redactado, con sector y total; la otra va a la productora. El día que contraten ticketera, un tercer botón sale con el sector ya puesto en el enlace: ese camino está construido, no pendiente.

El sistema visual

La página es el afiche. Un solo fucsia de borde a borde, Syne en peso 800 estirada hasta el ancho exacto de la caja, y la entrada encima como el único objeto blanco y callado. A media página el fondo se da vuelta a papel hueso con el corte rasgado, porque un color plano cansa a los tres scrolls. Las tres fotos son de uso libre, verificadas una a una, y van en duotono para que entren al sistema en vez de sentarse encima.

Lighthouse · móvil

Compruébalo en PageSpeed
  • 100Rendimiento
  • 100Accesibilidad
  • 100Prácticas
  • 100SEO

497 kB es lo que baja el visitante entero, tipografías incluidas, medido sobre el sitio publicado. En un celular con conexión mediana la pantalla queda pintada en 1.3 s. Las notas son de una corrida del 2026-09-19; el enlace de arriba la repite en los servidores de Google y puede dar un par de puntos distintos.

Conceptual

Vulcanizadora Aránguiz

Vulcanizadora · Maipú

Abrir el sitio

El que pinchó no quiere leer. Quiere saber si lo atienden ahora.

Arrastra la regla para ver el sitio en otros anchos

Celular
Escritorio

1280 px · vista de escritorio

Captura del sitio de Vulcanizadora Aránguiz en pantalla de escritorio.Captura del sitio de Vulcanizadora Aránguiz en pantalla de celular.

Las dos capturas son reales, tomadas sobre el sitio publicado a 1280 px y a 390 px con un teléfono emulado. Bajo los 760 px el visor muestra la de celular.

El problema

Alguien con una rueda en baja busca en el celular, en la calle, apurado. Necesita tres cosas: si están abiertos, cuánto demora y si tienen su medida. Todo lo demás sobra.

Lo que hice

La medida del neumático es el hero: se arma con tres selectores y devuelve tiempo de trabajo, si está en rack y a qué hora puede llegar. El estado abierto/cerrado se calcula en vivo contra el horario real.

El sistema visual

Un solo campo azul oscuro continuo con amarillo crayón, geometría circular en todo, y la medida estampada en relieve sobre una banda de caucho hecha en CSS.

Lighthouse · móvil

Compruébalo en PageSpeed
  • 100Rendimiento
  • 100Accesibilidad
  • 100Prácticas
  • 100SEO

69 kB es lo que baja el visitante entero, tipografías incluidas, medido sobre el sitio publicado. En un celular con conexión mediana la pantalla queda pintada en 1.1 s. Las notas son de una corrida del 2026-09-19; el enlace de arriba la repite en los servidores de Google y puede dar un par de puntos distintos.

Conceptual

Veterinaria Los Guindos

Clínica veterinaria · Ñuñoa

Abrir el sitio

Decirle a alguien que no necesita venir es lo que hace que vuelva.

Arrastra la regla para ver el sitio en otros anchos

Celular
Escritorio

1280 px · vista de escritorio

Captura del sitio de Veterinaria Los Guindos en pantalla de escritorio.Captura del sitio de Veterinaria Los Guindos en pantalla de celular.

Las dos capturas son reales, tomadas sobre el sitio publicado a 1280 px y a 390 px con un teléfono emulado. Bajo los 760 px el visor muestra la de celular.

El problema

La gente posterga el control porque no sabe qué le toca a su mascota ni cuánto se va a demorar, y porque teme que le vendan cosas. La duda gana y no pide hora.

Lo que hice

Un carnet de control que se arma con especie, edad y última vacuna, y responde qué le toca ahora, cuánto dura la hora y qué puede esperar. Cuando no hace falta venir, la página lo dice.

El sistema visual

Verde tiza y botella con yema, radios grandes y pastillas, aire de documento impreso. Una manuscrita en un solo rol: lo que iría escrito a mano en un carnet de verdad.

Lighthouse · móvil

Compruébalo en PageSpeed
  • 99Rendimiento
  • 100Accesibilidad
  • 100Prácticas
  • 100SEO

126 kB es lo que baja el visitante entero, tipografías incluidas, medido sobre el sitio publicado. En un celular con conexión mediana la pantalla queda pintada en 1.4 s. Las notas son de una corrida del 2026-09-19; el enlace de arriba la repite en los servidores de Google y puede dar un par de puntos distintos.

Conceptual

Ánima

Shala de yoga · Barrio Italia

Abrir el sitio

Lo que frena a alguien que quiere empezar yoga es el horario.

Arrastra la regla para ver el sitio en otros anchos

Celular
Escritorio

1280 px · vista de escritorio

Captura del sitio de Ánima en pantalla de escritorio.Captura del sitio de Ánima en pantalla de celular.

Las dos capturas son reales, tomadas sobre el sitio publicado a 1280 px y a 390 px con un teléfono emulado. Bajo los 760 px el visor muestra la de celular.

El problema

No es el precio ni el estilo: es «no me va a calzar con la pega». Una grilla de horarios en tabla no responde esa duda, la traslada al visitante.

Lo que hice

«Arma tu semana» pregunta cuatro cosas y devuelve las clases que le calzan, con día, hora y quién la hace. La respuesta no sale en una caja aparte: enciende las horas en el riel lateral de la página.

El sistema visual

El eje vertical de la página es la hora del día. El fondo baja del alba a la medianoche en cinco tramos y cada sección vive en una hora real de la shala. Fraunces variable con sus ejes de suavidad.

Lighthouse · móvil

Compruébalo en PageSpeed
  • 100Rendimiento
  • 100Accesibilidad
  • 100Prácticas
  • 100SEO

120 kB es lo que baja el visitante entero, tipografías incluidas, medido sobre el sitio publicado. En un celular con conexión mediana la pantalla queda pintada en 1.4 s. Las notas son de una corrida del 2026-09-19; el enlace de arriba la repite en los servidores de Google y puede dar un par de puntos distintos.

Cómo trabajo4 pasos

Nadie revisa una página con una regla. Yo sí.

Es la diferencia entre una página que se ve bien en la pantalla donde la hicieron y una que funciona en la pantalla donde la abren.

  1. Hablamos una vez, en serio

    Media hora para entender qué vendes, a quién, y cuál es la pregunta que te hacen todos los clientes antes de comprar. La página se arma alrededor de esa pregunta. Es la parte que las plantillas no pueden hacer.

  2. Te muestro el diseño antes de construir

    Colores, tipografía y estructura sobre tu contenido de verdad, no sobre texto de relleno. Si algo no te gusta, se cambia en esta etapa, que es donde cambiar sale barato.

  3. La construyo a mano

    Sin plantillas ni constructores por arrastre. Por eso los sitios de acá arriba pesan lo que pesan: no cargan diez plugins que nadie usa. También por eso no te va a quedar igual a la del negocio de la esquina.

  4. La reviso midiendo, no mirando

    Contraste real de cada texto, navegación con teclado, celular, peso. En estos mismos sitios encontré así defectos que en pantalla se veían perfectos: texto a 1,1 de contraste —invisible—, secciones que nunca alcanzaban a aparecer, y un botón de contacto que no llevaba a ninguna parte. Mirando no salen. Midiendo, sí.

Qué incluye6 cosas

Una página completa, no una plantilla con tu logo encima.

  • Diseño propio

    Hecho para tu negocio. Los seis sitios de arriba no se parecen entre sí, y eso es a propósito.

  • El texto, escrito contigo

    Lo que dice la página importa tanto como cómo se ve. No te dejo con «Lorem ipsum» ni con relleno.

  • Se ve en el celular

    Que es donde la va a abrir casi todo el mundo. Arrastra la regla de cualquier caso y compruébalo.

  • Un camino claro al contacto

    WhatsApp, correo o formulario, el que te sirva. Probado de punta a punta: que el botón llegue a alguna parte.

  • Lista para Google

    Título, descripción, dirección propia y la vista previa que sale cuando alguien la comparte por WhatsApp.

  • Que la pueda usar cualquiera

    Contraste medido, navegación con teclado y respeto por quien tiene el sistema en movimiento reducido.

Y lo que no sé todavía si es para mí: tiendas con pago en línea, sistemas de reserva con base de datos, aplicaciones. Cuéntame qué necesitas y te digo de frente si lo puedo hacer o si te conviene otra persona. Prefiero perder el trabajo a entregarte algo a medias.

Contacto

Cuéntame qué vende tu negocio y qué te preguntan siempre.

Con eso solo ya te puedo decir si te sirve una página y qué tendría que hacer. No cobro por conversar y no te voy a mandar una propuesta de veinte carillas.

O directo a benjagutierrez.dev@gmail.com