Client project · Web design & development · Live website
Pielaet Construction & Design.
A digital presence built around real craftsmanship.
Translating a residential builder’s work, photographic archive, and customer contact needs into a focused, responsive website.
Custom residential construction.
Editorial website preview using the client’s publicly displayed photography; visit the live site for the exact interface.
My contribution
Web design, front-end implementation, information structure, and iterative review
Deliverable
Live responsive business website and project portfolio
Technology
Next.js · React · TypeScript · Tailwind CSS · Vercel
01 / The challenge
Make exceptional physical work understandable online.
Christian’s construction business needed a site where potential customers could quickly understand the kind of work he does, see examples, and reach out with a project inquiry.
The central design task was to translate a photography-heavy, technically detailed practice into something clear and approachable without losing the architectural quality of the work.
Construction photographs also introduce an accuracy problem: an appealing image cannot establish who completed which work, the status of a job, or its engineering and inspection outcomes. That distinction influenced how the portfolio was organized and reviewed.
02 / Design decisions
Let clarity and craftsmanship shape the interface.
01
Let the work lead
Use actual construction photography and restrained typography rather than invented project claims or decorative graphics.
02
Make the business legible
Give visitors a clear sense of the builder's practice, selected work, service area, and how to start a conversation.
03
Make browsing comfortable
Use responsive layouts, individual project views, descriptive image text, and straightforward navigation.
04
Treat accuracy as a design requirement
Separate visible photographic evidence from client-confirmed scope, project attribution, and business claims.
03 / Process
From source material to a working client website.
01 / Understand
Start with the builder and the source material
I worked from Christian's construction portfolio, image archive, and preference for a minimalist, architecture-led presentation. This was a practical client collaboration, not a formal research study.
02 / Organize
Turn scattered photographs into browsable work
The site organizes project material into selected work, individual project pages, and galleries. Image groupings and statements about particular jobs need client verification rather than assumptions based on photographs alone.
03 / Design + build
Translate craft into a responsive interface
I developed a restrained visual system, clear paths from the home page to project details, and direct contact options. The implementation uses React, Next.js, TypeScript, and Tailwind CSS.
04 / Review + refine
Improve the experience without overstating validation
Iterations addressed presentation, media handling, technical QA, and accessibility details. Source-level checks and successful deployments support engineering confidence; they do not replace client approval or real-user evaluation.
04 / Implementation
A real production build, not just a design mockup.
The public site provides a homepage, selected-work directory, project detail routes, About and Contact pages, and direct inquiry paths. The implementation uses a typed project-data structure to populate reusable project views.
Responsive media, readable navigation, descriptive image alternatives, metadata, and deployment checks were part of the iterative engineering work. The source also includes checks for missing or duplicated project imagery and selected color-contrast pairings.
These checks are meaningful software-quality measures, but they are not evidence of tested customer conversion, comprehensive accessibility compliance, or verified business outcomes.
Project photographs are Christian’s construction portfolio material, not examples of construction work performed by me.
05 / Evidence + limits
What the public website demonstrates—and what remains to validate.
Demonstrated
- Translating client preferences and a photo archive into a coherent website.
- Designing a responsive customer-facing interface around real visual content.
- Implementing reusable content-driven project pages and public contact routes.
- Iterating with source-level media and contrast checks, and deploying a live site.
Not claimed
- No measured increases in leads, bookings, or business revenue are asserted.
- Client attribution and permissions for individual construction photographs and descriptions require confirmation where still unresolved.
- Automated QA and a successful deployment do not certify full accessibility or end-to-end contact delivery.
- Christian owns the construction expertise and project work; this case study describes my digital-design contribution.
06 / Reflection
The value is in making someone else’s work more accessible.
This project shows how I approach a concrete need outside the classroom: understand the person and context, organize ambiguous material, create a useful system, and revise it in response to evidence and constraints.
The next improvement is not necessarily a new feature. It is a stronger client-confirmed editorial record for each selected construction project, followed by direct usability and inquiry-path testing with representative visitors.