A responsive portfolio for a studio that does architecture, interiors, landscape, planning, and 3D. Clients can see all five without reading five service pages.
Whiterock does architecture, interior design, landscape design, urban planning, and 3D visualization in one studio. It works on homes and on commercial buildings. The website had to show all of this without giving each discipline its own separate section.
I designed and built a responsive portfolio. The work comes first on every page. Each project shows which disciplines were involved. Clients can move from looking at projects to sending an enquiry.
Show everything the studio does, without turning the website into a list of services. Also show how each project was made, not only how it looks.
The studio already had branding, project photos, and other material. My job was to turn that material into a content structure, a responsive interface, and a working front end.
Outputs Content order, sitemap, navigation plan, and simple wireframes
Outputs Responsive UI, component system, working front end, and build testing
Two groups of people use the site, and they make different decisions. Private clients want to know if the studio suits their taste and if they can trust it with their home. Development partners want to know if the studio has worked at their size, covers enough disciplines, and can explain a complex project well.
Can this team turn my brief into a house that works?
Homes are grouped by project, not by discipline. Each one has a short text about the scope and the ideas behind the finished rooms.
Can this studio cover a large, complex development and deliver it?
Project pages show the type, size, disciplines, and deliverables in a form that is quick to scan. The architecture still fills most of the page.
The wireframes set one pattern that every project page repeats. First name the project. Then show the main facts. Then explain the design idea. Then show the drawings and the location. Desktop and mobile use the same order, and neither turns the work into a plain photo gallery.
The first screen shows what the project is. It also shows the location, the disciplines, the status, and the client type before the longer story starts.
The drawings and the location stay inside the project page. They are not in a download or on a separate service page. A client can see the technical work next to the finished look.
Architecture portfolios have to balance three things. Images against information. Style against being easy to understand. Inspiring the visitor against asking them to act.
Many studio sites stay at the mood stage too long. Visitors get a feeling, but nothing they can use to judge whether the studio fits them.
The hero image shows Whiterock’s Mediterranean style. After that come the design principles and the projects.
Big images look strong but make the page slower. So the images are cropped for each screen size and load in a controlled order.
Vague labels and drop-down service menus force visitors to learn the studio’s own words before they can see any work.
Use five visible links with no sub-menus: Design, Projects, About, Blog, and Contact. On mobile they sit in one menu.
A simple top menu means the detailed sorting has to happen on the project pages. That is a better place for it than a second site-wide menu.
A visible contact button helps. But repeating sales messages before people understand the work makes a studio look like it only wants the sale.
Contact stays in the menu the whole time. The full enquiry prompt only appears once the visitor has seen the projects and how the studio works.
The site has fewer buttons. So each one has to be easy to find, plainly named, and easy to use at every screen size.
A project page has three parts: the project facts, the technical work, and what the studio thinks. Desktop and mobile show these parts in the same order. Only the layout changes to fit the screen.
The project starts with the location, the disciplines, the status, and the client type. The large images come after that. Visitors can see if the project is relevant to them without opening a separate index or service list.
The drawings and the location stay inside the project page. Visitors can see the studio’s technical work without going to a separate capabilities page.
Short texts on heritage, detail, and long life show what the studio believes. They sit next to the work and stay short, so there is no long manifesto to read.
The system uses size and spacing instead of decoration. One geometric type family. Wide letter spacing on large headings. A small set of neutral colors. One muted-gold accent.
Regular is used for large headings and body text. Medium and semibold mark the smaller interface levels, so a second type family is not needed.
No external usability study was run. The numbers in the result come from the client or from Lighthouse. None of them come from analytics. I checked the finished build myself. I walked through three scenarios and ran an accessibility check on the interface.
A visitor should reach a relevant project without opening sub-menus or learning the studio’s own words.
The design principles and the project facts should show what the studio cares about before the visitor reaches the enquiry form.
Contact stays in the menu on every page. The full enquiry prompt comes later, after the visitor has seen enough to know what they are asking about.
WCAG AA contrast targets
Logical keyboard order and visible focus
44 × 44 px minimum mobile actions
Semantic headings and labelled fields
Reduced-motion support for animations that are not needed
The new site puts the finished buildings first and makes it easy to ask about them. In its post-launch feedback, the studio reported more qualified enquiries, including several that mentioned the new site by name. The studio also said the site looks more professional and is easier to use than the old one. These are client-reported outcomes, not analytics.
Mobile is the weak point. On a slow connection the same build takes 10.1s to draw its largest element. That is because every page starts with a large photo. It is the first thing I would fix next.
“The new website finally reflects who we are as a studio. Clients are spending more time exploring our projects, and we’ve already received several enquiries that specifically mentioned finding us through the new site.”
Gabriel E., Founder · Whiterock