Riverstone Outdoor Services — Landscaping Website Design Concept
An editorial-style service website designed to make landscaping services, project imagery and navigation easy to explore across devices.
Project facts
- Project type
- Self-directed concept
- Platform
- Framer
- Published
- October 26, 2026
- Scope
- 14 published URLs, including 6 CMS-generated service pages
01
The Brief
A premium yet approachable look for a fictional landscaping brand.
Riverstone was created to explore how a local service company could present itself with the polish of a much larger brand, while still feeling friendly and easy to contact.
The goal was a site where services, project imagery and next steps are easy to find on any screen.
02
The Design
An evergreen and charcoal palette with warm twilight photography.
Deep greens and charcoal give the brand a grounded, outdoor character. A warm twilight estate photograph sets the tone on the homepage.
Image focal points were set per breakpoint, so the key subject stays in view on desktop, tablet and phone. Clear type hierarchy keeps headlines, service names and calls to action easy to scan.
03
The Structure
Service navigation, supporting pages and CMS-driven detail pages.
The site has 14 pages, including Home, About, Services, Portfolio, Contact, three legal pages and six service detail pages.
Service pages are driven by Framer CMS: two collections with 12 records. Each service page includes a before/after comparison slider and a “See Our Process” link that scrolls to that page’s process section.
04
Responsive Decisions
Layouts, logos and menus tuned for desktop, 768, 390 and 320 pixel widths.
The full logo lockup appears on desktop. Compact lockups are used at tablet and phone sizes, where the full descriptor would be too small to read.
Between 650 and 809 pixels, the logo was hard to read over the hero photo (about 1.5–3.6:1). Switching to the compact white logo raised measured contrast to at least 6.3:1 at every width in that range.
On phones, a dedicated open-menu state gives each link a large tap target, and the close button returns to the closed state.
The released site at real widths.
Captured from the published release. The only edit is a crop that removes the Framer site badge; the fictional-demo banner is kept.
05
Quality Review
What was checked before and after release, and what was not.
Checked
- Live Chromium checks at 12 widths: 1440, 1280, 1024, 810, 809, 800, 768, 700, 650, 390, 375 and 320 px
- 14 pages at two widths with no layout errors or broken images
- Navigation, mobile menu, keyboard focus and the “See Our Process” links
- All six before/after sliders at desktop and 390 px, including drag and arrow keys
- Demo forms confirmed display-only: no form elements and no network request on click
Not yet verified
- Real iOS and Android devices
- Safari and Firefox
- Screen-reader listening checks
- Social preview rendering
06
What We Learned
Match the logo to what sits behind it
Contrast was measured at every width, not assumed. A lighter logo variant solved low readability over the photo, with no extra overlay needed.
Give every link a real name
The logo link originally had no accessible name. Using descriptive alt text on the logo image gave it the name “Riverstone Outdoor Services home” without duplicate labels.
Test the real thing, not the assumption
An early simulation assumed the before photo sat on the left. Checking the live page caught reversed slider labels, which were then fixed and re-verified on all six pages.
Start a similar project
Want this level of care for your own business?
Every project is designed around its own business, content and goals. Tell us about yours and we’ll suggest a sensible starting point.
Planning a site for your own landscaping company? See how we approach landscaping websites.