Necesidad
La información pública reúne pintura comercial, restauración de hormigón, impermeabilización, estuco, sectores, áreas de servicio y numerosos proyectos. El reto era conservar esa profundidad sin producir una web genérica ni saturada.
Lugo Painting& Restoration
Una web comercial para hacer comprensible una oferta técnica compleja y conducir desde el primer vistazo hasta una consulta informada.
portfolio.local/demos/lugo-painting
- Arquitectura de oferta
- UX/UI responsive
- Interacciones accesibles
- Front-end sin dependencias
- Sector
- Pintura y restauración comercial
- Contribución
- Investigación · UX/UI · Front-end
01
El reto comercial
Una oferta compleja no debería sentirse complicada.
Objetivo
Diseñar una narrativa que permita entender primero la propuesta, profundizar después en capacidades técnicas y llegar al contacto con suficiente contexto.
Respuesta diseñada
Audité el contenido disponible, definí la arquitectura y el recorrido de compra, diseñé el sistema visual y desarrollé el responsive, sus interacciones, navegación, formularios y pruebas locales.
Construido con
HTML5CSS3JavaScriptResponsive UILocal assets
Validado con
Playwright QA1440 / 390 px
02
Evidencia de interfaz
La solución en pantalla
01
Cinco rutas para una oferta extensa
La primera capa agrupa servicios relacionados en recorridos reconocibles.
- Nombre y alcance en la misma fila
- Etiquetas técnicas como apoyo
- Jerarquía para escaneo rápido
02
Profundidad solo cuando aporta
El mapa de capacidades revela especificaciones bajo demanda y conserva controles grandes en móvil.
- Control nativo mediante botón
- Estado comunicado con ARIA
- Movimiento reducido respetado
03
La evidencia ocupa el centro
La galería varía densidad y escala para comunicar propiedad y dimensión del trabajo.
- Composición editorial
- Proporciones estables
- Catálogo ampliado
03
Recorrido comercial
Del servicio técnico a una decisión clara.
- 01
Orientar
La propuesta y cinco ámbitos aparecen antes del detalle.
- 02
Comparar
Servicios y capacidades permiten reconocer el alcance.
- 03
Verificar
Proyectos, sectores y proceso aportan contexto.
- 04
Actuar
Los CTA conducen a llamada, correo o solicitud.
Capacidades demostradas
Esta solución demuestra cuatro capacidades aplicables a un proyecto real.
Arquitectura de información, diseño responsive, desarrollo front-end y una ruta de contacto honesta.
Comentar un proyecto04
Construcción verificable
La ingeniería queda disponible, sin frenar el relato.
Solución
Jerarquía en dos niveles: bandas para escaneo y acordeón para detalle.
Solución
Galería editorial para proyectos principales y marquesina para ampliar cobertura.
Solución
Selector manual, progreso visible y pausa en hover, foco o cambio de pestaña.
Funciones construidas
Interacciones con una función concreta.
- Cabecera sticky
- Menú móvil accesible
- Sistema de servicios
- Acordeón con ARIA
- Galería de proyectos
- Cobertura por sectores
- Carrusel con pausa
- Formulario local por mailto
05
Calidad de implementación
Un prototipo que se puede recorrer, probar y evaluar.
Responsive
Composición verificada en 1440 px y 390 px, con navegación, jerarquía y CTA específicos para móvil.
Accesibilidad
HTML semántico, etiquetas, estados ARIA y controles de teclado; el movimiento reducido desactiva animación no esencial.
Rendimiento
Sin framework ni dependencias de ejecución; recursos locales y JavaScript acotado a interacciones concretas.
Entregado
- Prototipo navegable en una URL limpia
- Layout responsive de portada a contacto
- Recursos principales servidos en local
- Interacciones funcionales y verificables
¿Tu oferta también necesita claridad?
Diseñemos una web que ayude a entender, confiar y actuar.
Cuéntame qué vende el negocio, qué contenido existe y dónde se atasca hoy la decisión. Definiremos el alcance antes de presupuestar.
Solicitar presupuesto