Need
Public information spans commercial painting, concrete restoration, waterproofing, stucco, sectors, service areas and a broad project list. The challenge was to preserve that depth without producing a generic or overloaded site.
Lugo Painting& Restoration
A commercial website that makes a complex technical offer easier to understand and leads from first impression to an informed enquiry.
portfolio.local/demos/lugo-painting
- Offer architecture
- Responsive UX/UI
- Accessible interactions
- Dependency-free front end
- Sector
- Commercial painting and restoration
- Contribution
- Research · UX/UI · Front end
01
The commercial challenge
A complex offer should not feel complicated.
Objective
Explain the offer first, reveal technical depth next and reach contact with enough context.
Designed response
I audited available content, defined information architecture and buying journey, designed the visual system and developed the responsive prototype, interactions, navigation, forms and local QA.
Built with
HTML5CSS3JavaScriptResponsive UILocal assets
Validated with
Playwright QA1440 / 390 px
02
Interface evidence
The solution on screen
01
Five routes through a broad offer
The first layer groups related services into recognisable paths.
- Name and scope together
- Technical tags support
- Fast-scanning hierarchy
02
Depth only when it helps
The capability map reveals specifications on demand and retains generous mobile controls.
- Button-based control
- ARIA expanded state
- Reduced motion respected
03
Evidence takes centre stage
The gallery varies density and scale to communicate property type and work scale.
- Editorial composition
- Stable proportions
- Extended catalogue
03
Commercial journey
From technical service to a clear decision.
- 01
Orient
The proposition and five scopes appear before detail.
- 02
Compare
Services and capabilities reveal relevant scope.
- 03
Verify
Projects, sectors and process add context.
- 04
Act
CTAs lead to phone, email or enquiry.
Demonstrated capabilities
This solution demonstrates four capabilities that transfer to a real project.
Information architecture, responsive design, front-end development and an honest contact journey.
Discuss a project04
Verifiable build
The engineering stays available without slowing the story.
Solution
Two-level hierarchy: service bands for scanning and accordion for depth.
Solution
Editorial gallery for primary projects and marquee for wider coverage.
Solution
Manual selection, visible progress and pause on hover, focus or tab change.
Built features
Interactions with a specific purpose.
- Sticky header
- Accessible mobile menu
- Service system
- ARIA accordion
- Project gallery
- Sector coverage
- Review carousel with pause
- Local mailto form
05
Implementation quality
A prototype that can be explored, tested and evaluated.
Responsive
Verified at 1440 px and 390 px with mobile-specific navigation, hierarchy and CTAs.
Accessibility
Semantic HTML, labels, ARIA states and keyboard controls; reduced motion disables non-essential animation.
Performance
No framework or runtime dependencies; local resources and focused JavaScript.
Delivered
- Navigable prototype at a clean URL
- Responsive layout from hero to contact
- Primary assets served locally
- Functional, testable interactions
Does your offer need this kind of clarity?
Let’s design a website that helps people understand, trust and act.
Tell me what the business sells, what content exists and where the decision stalls today. We will define scope before quoting.
Request a quote