Construyendo un sitio web de mantenimiento que no se ve como todos los demás

Kevin necesitaba un sitio web para su negocio de mantenimiento en Sacramento. Una solicitud bastante simple. Pero aquí está la cosa—busca “handyman Sacramento” y verás el mismo diseño repetido cincuenta veces con diferentes nombres. Azules suaves, fotos genéricas de stock. Nada memorable.

Así que no construí eso. Construí algo diferente.

Jerarquía visual fuerte. Colores audaces. Búsqueda interactiva de servicios que realmente ayuda a las personas a encontrar lo que necesitan. Y una influencia de juegos retro que de alguna manera funciona para un sitio de mantenimiento.

Esto es lo que se invirtió en ello.

El Punto de Partida: Todo Se Ve Igual

Revisé los sitios de la competencia antes de comenzar. Todos son idénticos. Mismo diseño, misma paleta de colores, mismo mensaje de “somos confiables” que todos ignoran.

Si vas a destacar en un mercado saturado, necesitas verte diferente. No diferente de forma llamativa—intencionalmente diferente. Cada decisión de diseño necesita una razón.

Así que me hice algunas reglas:

• Jerarquía visual clara que guía la vista
• Paleta de colores de alto contraste
• Elementos interactivos que responden a la entrada del usuario
• Hacer que la búsqueda de servicios sea realmente útil

Hablemos de cómo funcionó eso realmente.

La Filosofía del Diseño Visual

Patrones geométricos fuertes en todo el sitio. Líneas limpias que reflejan la precisión del trabajo de mantenimiento.

Las tarjetas obtienen bordes definidos usando polígonos clip-path. Los contenedores de íconos usan formas octogonales. Los fondos presentan rayas diagonales y patrones de trama cruzada. Todo tiene propósito y estructura.

¿Por qué? Porque el trabajo de mantenimiento se trata de precisión—medidas exactas, cortes limpios. El lenguaje visual debe reflejar ese oficio.

El objetivo era crear un lenguaje de diseño que se sienta profesional sin ser genérico, distintivo sin ser distractivo.

Navegación y Flujo de Usuario

El sistema de navegación necesitaba ser limpio y funcional. Implementamos un navbar responsivo que funciona perfectamente tanto en escritorio como en móvil.

En escritorio, el menú desplegable de servicios proporciona acceso rápido a todas las categorías. En móvil, usamos un menú hamburguesa limpio que se expande para mostrar todas las opciones sin abrumar al usuario.

La Búsqueda Interactiva de Servicios (Esta Fue la Parte Interesante)

Aquí es donde se puso interesante. La mayoría de los sitios de mantenimiento simplemente listan servicios. Si necesitas algo específico, tienes que leer todo para encontrarlo.

Construí un componente React con búsqueda y filtrado en tiempo real:

• Escribe cualquier cosa—“drywall,” “fuga,” “ventilador de techo”—y busca en todos los servicios
• Filtrado basado en etiquetas por categoría (eléctrico, plomería, reparaciones, etc.)
• Tarjetas expandibles que muestran desgloses completos de servicios
• Contador de resultados que se actualiza mientras escribes

La búsqueda indexa todo:

• Títulos de categorías de servicios
• Descripciones cortas y completas
• Nombres y descripciones de servicios individuales

Así que si alguien escribe “fuga,” obtienen servicios de plomería. “Pintura,” obtienen reparaciones del hogar. Simplemente funciona.

¿Por qué molestarse? Porque hacer que las personas busquen en una lista gigante para encontrar lo que necesitan es mala UX. Si alguien sabe que necesita reparación de drywall, debería poder escribirlo y verlo inmediatamente.

La implementación es React directo—useState para consulta de búsqueda y filtros, useMemo para los resultados filtrados. Nada elegante, pero hace que el sitio sea realmente útil.

El Proceso de Iteración

La primera versión era funcional pero no excelente. Pasé un par de días refinando:

Tipografía de botones: Cambié de bold (700) a semibold (600). Diferencia sutil que hace que los botones se sientan menos agresivos.

Flujo de la sección About: Eliminé el botón “Learn More” que solo se desplazaba a la siguiente sección. Lo reemplacé con dos chevrones hacia abajo. Menos redundante.

Alineación de búsqueda: La barra de búsqueda era más estrecha que las tarjetas de servicio debajo. Eliminé la restricción de ancho para que todo se alinee. El ritmo visual mejoró.

Diseño de garantía de servicio: El original tenía demasiado—puntos a la izquierda, CTA a la derecha, todo compitiendo. Rediseñado como: encabezado centrado, cuadrícula de tarjetas de garantía, CTA limpio en la parte inferior. Jerarquía visual mucho más clara.

Pequeños cambios que se acumulan en una mejor experiencia.

Lo Que Viene Después

El sitio funciona genial como está, pero siempre hay una lista:

Formularios de Contacto via Resend
Ahora mismo los botones CTA van directamente a teléfono/SMS. Agregando formularios de contacto adecuados con Resend para entrega de correo electrónico. Da opciones a las personas sobre cómo quieren contactar.

Integración de Google Bookings
Viendo la integración del sistema de reservas de Google para que las personas puedan programar estimados directamente. Necesito ver cómo se ve su API y si vale la pena la complejidad.

Testimonios de Clientes
Kevin está recibiendo buenos comentarios de los clientes. Agregando una sección de testimonios con marcado Schema.org Review adecuado para SEO.

Galería de Antes/Después
Galería de fotos de proyectos completados. Las personas quieren ver el trabajo real, no solo leer descripciones.

Páginas de Área de Servicio
Páginas individuales para vecindarios específicos de Sacramento. Mejor para SEO local, ayuda a las personas a encontrar servicios en su área.

Nada de esto es urgente, pero está en el radar.

Optimización de Rendimiento

Ejecuté Lighthouse durante el desarrollo. Inicialmente obtuvo 97/100 en rendimiento. Arreglé dos problemas:

Preconnect de Google Fonts: Agregué etiquetas <link rel="preconnect"> para establecer conexión temprano. Ahorra ~80-90ms en carga de página.

Imagen de perfil sobredimensionada: La foto de Kevin se cargaba a 512x512 pero se mostraba a 352x352. Configuré imágenes responsivas:

• Móvil (350px): 20 KiB
• Escritorio (450px): 28 KiB
• Retina (800px): 31 KiB

El navegador sirve automáticamente el tamaño correcto. Los usuarios móviles ahorran 44% en descarga de imagen.

Debería llegar a 99-100/100 en producción con compresión adecuada habilitada.

Los Detalles Técnicos (Para Desarrolladores)

Construido con Astro 5 para generación estática. React 19 para el componente de búsqueda. TypeScript en todo.

Usé Astro porque no envía JavaScript por defecto—solo agrega React donde realmente se necesita (la búsqueda). Rápido por defecto.

Agregué infraestructura SEO adecuada:

• Sitemap XML (auto-generado)
• robots.txt
• Datos estructurados Schema.org para servicios
• Etiquetas Open Graph
• Páginas de error 404/500
• HTML semántico en todas partes

Nada revolucionario, solo fundamentos sólidos.

Accesibilidad

Todo es accesible por teclado. Navega por el sitio con Tab, usa Enter para activar botones. La búsqueda funciona con navegación por teclado. Las etiquetas de filtro y tarjetas expandibles responden a la entrada del teclado.

El contraste de color cumple con los estándares WCAG AA. Todas las imágenes tienen texto alt adecuado.

Solo prácticas de accesibilidad estándar desde el principio.

Lo Que Aprendí

El diseño intencional destaca. La jerarquía visual fuerte y los patrones distintivos funcionan en un mar de uniformidad. Pero no puedes simplemente ser diferente—necesitas una razón para cada elección.

La búsqueda interactiva vale el esfuerzo. Es la diferencia entre “lee esta lista” y “encuentra exactamente lo que necesitas.” Los usuarios aprecian no tener que buscar.

Los pequeños refinamientos se acumulan. Peso de botón, alineación, flujo de diseño—individualmente menores, juntos son la diferencia entre funcional y pulido.

Documenta decisiones. Dentro de seis meses necesitaré agregar características. Tener guías de estilo y notas de implementación significa que no estaré haciendo ingeniería inversa de mi propio trabajo.

Stack

Astro 5 + React 19 + TypeScript. Tailwind para estilos. Bun para gestión de paquetes.

Construcción estática, imágenes optimizadas, marcado SEO adecuado. Alcanza 99-100 en Lighthouse en producción.

---

Sitio: lvlup.vctr.lat (dominio temporal - lvluphandyman.com próximamente)

---

Escrito mientras iteraba en la funcionalidad de búsqueda y veía mejorar las puntuaciones de Lighthouse. A veces las pequeñas optimizaciones son las más satisfactorias.