12 Best Architecture Websites to Teach You about Website Design

If you’re running an architecture firm and need a website, take a look at some of the best websites in the industry, to tick all the boxes that make a good architect website.

If you’re about to create a website for your architecture firm or interior design studio, there are important elements that make a good website, and you should incorporate them too. From the look of your website to the functionality and the layout, all the way to your search engine optimization, learn how to achieve high-quality web design for your new website with our list of the best architect websites.

As an architect, your website is your portfolio. You need to include all the best projects you’ve worked on, in an easy-to-skim and understandable manner. When potential clients search for an architect, they’ll probably find dozens of results. Your website should catch their attention with the location you work in, good photos, important info and, well, great design. But, let’s take it step by step and dive into individual websites that might teach you what a website in the architecture industry should look like.

1. Gluck Plus: multi-layout homepage

Like a good architecture project, the website of the Gluck Plus architecture studio has more than one way to be seen and used. The homepage can be seen in a filmstrip slideshow view, list, or big thumbnail view. That makes scrolling through projects easy, no matter what kind of layout you prefer.

The website includes a Profile, Press, Contact and News page, in which you can find the brand story, press clippings and company news, as well as easily reach the New York office. The inclusion of these extra details and information helps the client learn more about the history and long practice of the company, and the architects don’t only rely on the photos (which are also amazing), but on good copywriting as well. The difference is that good copy helps with SEO, and photos don’t.

The urban design and minimalist color palette are very contemporary and utilitarian, perfectly suitable for a company working in architectural design.

2. Powerhouse Company: unique UI

The Powerhouse Company has one of the most engaging and unique UI designs on their website. From the exquisite animation to the overall solution of presenting each project, the look of this website doesn’t fit any template.

Starting with great copywriting and beautiful photography, when you click on a separate project, you are led through a detailed design process and the parameters of each building and site. You can learn about the team and brand values, but every small detail is presented in a stylish way with minimal animation. The typography, layout and photos make it a beautiful website, but the functionality doesn’t suffer at all because of the large amount of information. We highly encourage you to take a look at this website in detail, because it truly is a user experience that cannot be described well enough with words.

3. Skidmore, Owings & Merrill: video slideshow

The SOM website uses videos instead of hero images on their website, which show the process of building or showcase projects. You immediately see the scientific and technologically superior design practice that this architecture firm employs, as well as the high quality of their works. It makes for an enticing and attention-grabbing web design. However, keep in mind that high-quality videos and photos with a large resolution affect SEO in a bad way because they take a while to load.

What SOM also does well is including all their social media accounts and establishing an online presence, such as their blogging efforts from Medium, to LinkedIn.

4. 6a Architects: landing page layout

If your budget can’t handle a detailed and complicated UI for your website, all you need is a simple layout similar to a landing page that fits all the important info. 6a Architects have a simple and minimalist look to their website. It definitely isn’t a landing page in their case, but you can mimic their layout and focus on what they’ve included, and recreate it through a simple WordPress template or any other website builder. You can learn more about Wix and Instapage, if you’re considering using a drag-and-drop website editor.

5. El Equipo Mazzanti: extensive portfolio

Although tidy and easy to navigate, the website of El Equipo Mazzanti isn’t unique because of the design. However, the architects behind this company share more than just their projects with the online community, and their website boasts academic research, lectures, videos from construction projects and exhibitions. All the educational materials attract more colleagues and architecture students, as well as competition. But nonetheless, every click matters and these lead magnets surely help with SEO.

6. Office KGDVS: as simple as a sketch

Less is more, and that is a fact. The website of Office Kersten Geers David Van Severen employs that tactic, by showing already finished projects, and their architectural sketches side by side to show you the design process. And that’s the whole homepage! It is a very clean and simple layout but lures you in to see more about the innovative works and projects. However, once you click on one of the subpages: ‘About’, ‘Projects’ and ‘News’, you’ll find an extensive list of works and resources.

7. Effekt: the hero image is hero

The Effekt architectural firm decided to trust an old and proven tactic: use hero images as the main component of their homepage. It is a design very much in line with current web design trends, and the photography is very urban and on-point.

Once you click on the ‘Work’ page, however, you’ll discover a vast database of projects sorted in an easy-to-navigate way, with the help of plenty of tags and categories that help the user find what they are looking for. It is a great layout with the user experience in mind.

8. RSHP: videos and images in a portfolio style

We already mentioned the importance of images and videos on a homepage, as well as that their size and format might decrease your loading speed. Rogers Stirk Harbour + Partners solved this issue by giving their visitors the chance to play a video on their portfolio-style website, and in that way didn’t burden the loading speed.

They also included a different copy. Whereas most companies use ‘About Us’, ‘Our Story’, ‘Values’, etc, RSHP has the three Ps: ‘Projects’, ‘Practice’ and ‘Principles’.

9. MMBB: quirky and plain

The website of MMBB is as minimalistic and old-school as it can afford to be, without that costing them website clicks. The layout includes small thumbnails and digital-inspired typography. It feels almost as if it’s a website from the early 2000s, but still includes lavish photography and plenty of search filters that help the potential clients reach whatever they need to find. The website is in Portuguese, which is great for local SEO. However, if your company works internationally, make sure to translate everything sitewide.

10. FXcollaborative: playful

Whereas most websites follow a format, FXcollaborative’s one seems to be all over the place. But the ‘stepping out of form’ card seems to work right for them, cause it is engaging and surprising, and is never a boring experience for the site visitor.

They included quotes and inspiring maxims that perfectly describe what they stand for as a company, and what drives their design process and creation.

11. Biasol: modern design suited to the company

Biasol is one of the most famous interior design studios, that is often included in websites such as Archdaily, Dezeen and Architizer. Their expertise is not just creating unique looks and plans as interior designers, but also building high-quality signature furniture. A company so well-renowned needs a website that perfectly follows the theme: modern, luxurious and hip. From the value propositions to the typography and color palette, everything about this website is perfectly on-brand.

12. Pattersons: great use of templates

This fancy website in black and grey is, well, a WordPress template. Yes, sometimes even acclaimed architecture firms use an effective and budget-friendly solution. What this website boasts is a unified look all across the board: the grayscale effect, the simple typography and the lavish black background make it look a lot more different than the rest, usually using pastel colors and white and light gray. And it has an extra ace in its sleeve: when you hover over an image, it’s in full color.

Hopefully, this article helped you get an idea of what a good architect website looks like. Take a look at our articles about architecture logos and small business branding for more tips.