Complete Design Overview
End-to-end homepage composition showing hero, core services, process timeline, trust signals, gallery, and contact conversion paths.
Design Case Study · Web Design & Development
BS Joinery Solutions
Construction, Loft Conversion & Joinery - United Kingdom
A modern, professional website designed to build trust, showcase craftsmanship, and convert visitors into clients.
Web DesignWeb DevelopmentTechnical SEOContent StrategyWordPressPHPCSS3JavaScriptSEOFigmaModern DesignFully ResponsiveBrand FocusedConversion DrivenFigmaPhotoshopAdobe Illustrator
Section Architecture
Four modular homepage sections - each pairing visual presentation with structured content for clarity and conversion.
01
OUR SERVICES
Our Core Services
Showcasing core services with clear visuals and benefits.
The services carousel puts loft conversions, extensions, and custom joinery front and centre. Each card pairs photography with a concise value statement and a yellow Learn More action - guiding homeowners toward the service that matches their project.
- Interactive carousel with image-led service cards
- Centre-focus layout highlighting the active service
- Pagination dots and arrow controls for easy browsing
- Yellow CTA buttons aligned with brand accent colour
02
INTRODUCTION
Building Trust Through Story
Building trust with a personal introduction and company values.
The introduction section balances copy and imagery in a split layout. Left-aligned text introduces BS Joinery's craftsmanship ethos while a high-quality kitchen interior photograph reinforces the premium finish clients can expect.
- Split layout - narrative copy alongside project photography
- About Us eyebrow and bold Introduction headline
- Learn More pathway to the full company story
- Photography-led trust building for first-time visitors
03
GALLERY PREVIEW
Gallery Preview
A glimpse of our recent projects that highlight our craftsmanship.
A six-image grid showcases completed loft conversions, extensions, and bespoke joinery. The View All Projects CTA sits top-right - encouraging deeper exploration without breaking the visual rhythm of the homepage.
- 2×3 project grid with consistent aspect ratios
- Mix of exterior and interior completed work
- Top-aligned View All Projects conversion button
- Visual proof of range and quality before testimonials
04
CONTACT AREA
Get In Touch
Easy ways for potential clients to get in touch and start their project.
The contact section pairs workshop photography with a clean enquiry form. Name, email, phone, and message fields sit on a dark card with a full-width yellow Send Message button - minimising friction at the final conversion point.
- Split layout - workshop imagery and enquiry form
- Four-field contact form with accessible labels
- Prominent yellow Send Message call-to-action
- Positioned after social proof for maximum intent
Responsive Across Every Device
The design scales seamlessly from desktop through tablet to mobile - navigation, carousels, and forms adapt without losing the premium dark-and-yellow brand identity.
Desktop
Laptop
Tablet & Mobile
Full Overview
Deliverables
01
High-fidelity Figma designs with modular section architecture
02
Fully responsive WordPress theme aligned to BS Joinery brand colours
03
Conversion-optimised homepage with quote and contact pathways
04