CONTRACTOR WEBSITE DESIGN · PROJECT PORTFOLIOS
Contractor Website Design: How to Turn Jobsite Photos Into a Portfolio That Helps Homeowners Request an Estimate
By Colo Web Studio · November 2, 2026
A photo of new oak cabinets shows the finish. It doesn’t show why the family remodeled: opening the dishwasher used to block the only path to the back door.
Good contractor website design helps homeowners see what your crew solved. Pick one job, show the problem and the fix, then give readers a way to request a similar estimate.
Choose one job you’d like to do again
Start with the kind of estimate you want next. If you want more kitchen remodels where the family stays in the house, a modest kitchen with a difficult layout may be a better first project than a spectacular new build.
Pick a job where you can explain what the homeowner needed, what your crew did, and what changed. If you installed the cabinets but didn’t design or build the whole kitchen, say so. That distinction tells the next customer exactly what they can hire you for.
Follow one remodel from problem to result
Consider this illustrative kitchen remodel. The owners like the size of the room. They just want someone unloading the dishwasher to stop blocking everyone else. Here’s how three photos could tell that story. The cover illustration is a design concept, not a photograph of a client’s job.
Before: show the inconvenience. Stand in the doorway and photograph the open dishwasher and the path behind it. A useful caption might read: “With the old dishwasher open, the family had to walk through the dining room to reach the back door.” A close-up of worn cabinets would miss the reason for the remodel.
During: explain a choice the finished room conceals. Photograph the revised cabinet layout while the floor markings are still visible. “Before ordering cabinets, we marked the new island footprint and checked the walkway with the appliance door open.” That sentence gives the reader a reason to care about two strips of tape on a floor.
After: return to the same doorway. Show the appliance open again. “The dishwasher now opens beside the sink, outside the route to the back door.” You can include a polished wide shot too, but the matching angle is the one that lets a homeowner judge the improvement.
Make the next job easy to document
At the first walkthrough, choose a camera position you can find again: a doorway, a stair landing, or the corner opposite the work. Take a wide shot from there and a detail shot of the problem.
Before a wall closes or the cabinets arrive, record one decision in a voice note: “We changed ___ because ___.” That note will be more useful when writing the page than another dozen nearly identical progress shots.
Get permission to publish the images. Check the frame for house numbers, family photographs, paperwork, and people who haven’t agreed to appear. Use a city or general service area when it helps the reader; a street address rarely does. Keep the original files, even if you upload smaller copies.
What to include on a contractor portfolio page
A gallery labeled “Our Work” asks visitors to guess what they’re looking at. Give the project a plain name such as “Kitchen remodel with a wider walkway.” Lead with the finished photo, then put the before, during, and after sequence underneath.
Describe the scope in one sentence. If the footprint stayed the same or the homeowner supplied the cabinets, that detail helps another owner compare their project with yours.
Keep captions visible on phones. Text baked into a photo shrinks with the image, and a side-by-side comparison can become too small to read. Stacked photos with short captions work well. Use descriptive alternative text for meaningful details, such as “Open dishwasher beside the sink, clear of the back-door walkway.” Avoid repeating your company name and city on every image.
Link the project from the service it illustrates. Someone reading about kitchen remodeling has a reason to look at this job; someone viewing the job has a reason to explore that service. For help organizing the rest of the site, see the contractor website planning checklist.
Make it easy to request a similar project
Place a link labeled “Request an estimate for a similar kitchen” after the result. Ideally, the form carries the project name forward so the visitor doesn’t have to explain which photos they saw.
Ask for a way to reply, the project location, and a short description. A useful prompt is “What isn’t working in your current kitchen?” It gives your estimator more to work with than “Tell us more.”
Try the whole route on a phone before you launch. Open the project from the services page, read the captions, and send a test inquiry. Check the inbox that actually handles estimates. Does the message identify the project and include a usable reply address? A button that looks right is only half the test.
What to ask your website designer to demonstrate
Before you sign off, add a second project yourself. Can you reuse the WordPress layout, swap in your photos, and edit the captions without calling the designer?
Open the portfolio on your phone. Can you find the new job from the main listing? Do the photos load at a useful size, and can you read each caption without zooming?
Start with one project that answers a real homeowner’s question. Once that page works, you have a pattern your crew can repeat. If you’d like help turning your jobsite photos into an editable WordPress portfolio, discuss your project with Colo Web Studio.