This page is password protected

Incorrect password. Try again.
Service Page — Wireframe v2

Service page template

Navbar
Hero — H1 · value prop · trust badges · enquiry form BACKGROUND IMAGE OPTIONAL
Background image (optional): use a full-bleed photo of the service in action when the client has a strong, high-quality image available (e.g. tradesperson at work, impressive finished result). Minimum 1440×700px. If no suitable image exists, leave the hero background as a flat colour — a poor or generic stock photo does more damage than no image at all. When an image IS used, the dark overlay (see below) is mandatory to keep H1 text legible. Form card stays white and is unaffected by the overlay either way.
Background image — OPTIONAL · 1440 × 700 px min · real job photo only, not stock · if no strong image exists, use flat colour background instead · when image IS used: dark overlay (~22% opacity) is mandatory for H1 legibility
H1 — [Service Name] in [Location]
Get a free quote
Quick enquiry form Name
Phone / Email
Message
Send →
No image fallback → Remove .hero-bg and .hero-overlay divs. Set .hero-outer background to the brand colour or var(--bg-secondary). H1 text colour switches back to dark — remove the white/light text overrides on .hero-h1-label and .hero-ph.
Problem statement — address the pain point before selling the solution · 80–120 words
How it works — max 4 steps · builds trust · reduces friction
1
2
3
4
Why choose us — image at top of each card · specific claims · no generic fluff
Card image: show the outcome or the differentiator visually (e.g. finished work, team, equipment). 16:9 crop. Alt text must describe the benefit, not just "photo".
Benefit photoe.g. finished job
Benefit photoe.g. team at work
Benefit photoe.g. certifications
Optional section — only include if the client has high-quality before/after or portfolio photos
Gallery — before / after proof · builds trust at the point of highest engagement · 3–6 images max
Only add this section if the client can supply real job photos. A gallery of stock or low-quality images does more harm than good. Recommend WebP format, lazy-loaded, with descriptive alt text for each image.
H2 — e.g. "Our recent work in [Suburb]"
Filter:
All
Before/after
Portfolio
Beforeoriginal condition
Before
Aftercompleted result
After
Additional portfolio shots — optional, up to 4 thumbnails
Job type / suburb
Job type / suburb
Job type / suburb
View all →
View full gallery
Pricing / packages — transparent pricing improves SEO and pre-qualifies leads (*Optional)
Get started
Most popular
Get started
Get started
Social proof — client logos or certifications · grayscale · link to case studies
FAQ — answer real objections · FAQPage schema markup
−
+
+
Internal links — related services or locations (boosts crawlability)
Closing CTA — sticky on mobile, repeat above the fold offer
Book now
Call us
Website Photography Shot List

Website Photography Shot List

Landing page · Service page · Location page

● Essential — page will not launch without this ● Recommended — significant drop in quality without it ● Optional — add if time and budget allow
Service Page 9 shots
  • Hero background image — wide, dramatic shot of the service in action. Must work under a dark overlay (~52% opacity): keep subject in the middle third, avoid dark foregrounds. Min 1440 × 700 px. Only needed if the hero background image variant is used. Hero — background image (optional variant)
    Recommended
  • Why choose us card 1 — visual of the first differentiator (e.g. licence/certificate, specialist tool, or award). Clearly relevant to the stated benefit. 800 × 450 px. Why choose us — card 1 image
    Recommended
  • Why choose us card 2 — team working together or on a job site. Communicates reliability and professionalism. 800 × 450 px. Why choose us — card 2 image
    Recommended
  • Why choose us card 3 — finished result or satisfied customer. Communicates quality and outcome. 800 × 450 px. Why choose us — card 3 image
    Recommended
  • Gallery before — shows the problem state clearly. Neutral framing, good lighting. Must be taken from the exact same angle as the matching after shot. Min 1200 × 800 px. Only needed if the gallery section is included. Gallery — before/after pair
    Optional
  • Gallery after — same angle as the before shot. Shows the completed, clean result. This is the most important shot in the gallery. Min 1200 × 800 px. Gallery — before/after pair
    Optional
  • Gallery thumbnail 1 — additional portfolio job, different type or location. 600 × 400 px. Gallery — thumbnail row
    Optional
  • Gallery thumbnail 2. 600 × 400 px. Gallery — thumbnail row
    Optional
  • Gallery thumbnail 3. 600 × 400 px. Gallery — thumbnail row
    Optional
General Notes
  • No stock photos. All images must be original, taken for this project or from a real job with the client's permission.
  • Deliver at 2× the dimensions listed above for retina screens. The developer will compress and serve appropriately.
  • File format: Shoot RAW, deliver as JPG (quality 90+) and WebP. PNG for logos/graphics only.
  • Colour space: sRGB for all web images. Not Adobe RGB or ProPhoto.
  • Lighting: Natural light preferred. Avoid harsh midday sun. Overcast or golden hour gives the most usable results.
  • People in frame: Get a signed model release for anyone whose face is clearly visible, including team members.
  • File naming: [page]-[section]-[number].jpg — e.g. landing-hero-01.jpg, service-gallery-before-01.jpg, location-perth-card-01.jpg