Website design and build for Mr. Brightside, a roofing, siding and gutter contractor: one home page in 3 hero directions, 3 service cards and 4 quote buttons.
Mr. Brightside is a roofing, siding and gutter contractor serving homeowners in New York towns from Newburgh to Port Jervis. Plainbuilt designed and built its website, full stack: one home page in three hero directions, with the three services named in an icon strip, a marquee and three cards, a photo collage, the walking-house mascot in two sections, and the Get A Fast Quote button four times, from the nav to the footer.
Homeowners who need a roof, siding or gutters done, in the towns the footer lists: Newburgh, Middletown, Monroe, New Windsor, Warwick, Port Jervis and Goshen. The copy speaks to them as a local, hands-on crew: every home deserves expert care, lasting protection and a touch of craftsmanship, from the first consultation to the final walkthrough.
The site, full stack. The screens here are the home page, which runs: the nav with Home, About, Services, Areas Served, Financing and Resources, two of them dropdowns, and the quote button; the hero over the roofline photo; the three-icon service strip; the about section with the photo collage; the taupe marquee; the three service cards on the pale-yellow band; a row of blog cards; the mascot section; a FAQ beside a house photo; the blue closing band; and the footer with the useful links, the area-served list, a fourth quote button and an Instagram grid of six house photos. The home page comes in three versions, with a dark, a sepia and a blue overlay on the hero photo.
One button, Get A Fast Quote, in the brand yellow in the nav and under the headline, in blue beside the mascot, then in yellow again in the footer. There is no form on the home page and no price: the page names the three services, shows the work in photos, and sends the homeowner to ask for the quote.
The three versions differ only in the hero: the same brick roofline under a dark, a sepia-brown and a blue overlay, and everything below it is the same. Drawing the mood three ways on one page gives three first screens to choose from without a second layout. The dark one is on this page.
The headline, Brighten your home with expert roofing, siding, and gutter services, in white capitals over a darkened photo of a brick house's roofline. One yellow Get A Fast Quote button sits in the nav and a second under the headline. Below the photo, a strip of three line icons names the services: Roofing, Siding, Gutters. The hero was drawn with three overlays on this photo, dark, sepia and blue; the dark one is here.
Three photos in a collage, a metal-roofed farmhouse, a gutter run and a white-sided gable, beside the At Mr. Brightside copy about local, hands-on roofing, siding and gutter work, and a yellow Learn More About Us button. Under it a taupe band cycles Roofing, Siding, Gutters with a house icon between each word, so the three services are named a second time before the cards.
Three white cards on the pale-yellow band, one each for Roofing, Siding and Gutters: a photo, a three-line blurb and an Explore more link. A blue Learn More button sits at the section header beside the Expertise badge, which carries the mascot. Three cards for three services; the count matches the icon strip and the marquee above.
The walking-house character, hammer in hand, stands at full height beside the blue headline about building lasting relationships with homeowners, two paragraphs that run from the first consultation to the final walkthrough, and a blue Get A Fast Quote button, the third on the page, with the phone and email line under it. The mascot is the brand: it is in the logo, on the section badges and here at full size.
A rounded blue band with the mascot holding a paintbrush over Let's start working together, then Get in touch with us, with Get in touch underlined in the brand yellow. The footer below it carries the fourth Get A Fast Quote button, the area-served list and the contact block.
Get A Fast Quote is the one ask the page repeats. It sits in the nav, under the headline, beside the mascot and in the footer, in the brand yellow or the blue each time, so the ask is at the top, in the middle and at the end.
Roofing, Siding, Gutters as a line-icon strip under the hero, as the marquee under the about section, and as the three service cards. The page repeats the three words before it explains them, and the cards do not add a fourth.
A walking house with a hammer or a paintbrush is the logo, the badge on the section headers, the full-height figure beside the relationship copy and the mark on the closing band. The photos are of houses; the character is the only face on the page.
The page comes in three versions that differ only in the hero photo's overlay: dark, sepia-brown or blue, with everything below the hero the same. That gives three moods of the first screen to choose from on one layout.
Designed and built
One outcome per item, dated, or not disclosed: never an estimate.
Yes. Plainbuilt designed and built the site. The page on this item is the home page as designed; the roofing, siding and gutter work is the client's.
Yes. One page that names the services in the first screen, shows the work in photos, and repeats the one ask, a fast quote, from the nav to the footer. Book a working session and bring your photos.
