There are plenty of beautiful architectural websites out there, and though they may look good, many offer user experiences that aren’t up to modern-day web standards. We’re going to take a closer look at 10 of the best architecture websites we found out there. We put them through PageSpeed Insights and made sure they all had a passing grade as criteria for being on this list. We’ve also added our own recommendations on how these websites could be even better.
We narrowed down what we were looking for by only looking at architectural firms that had more than 30 projects and were within North America.
This web design screams elegance. We love the sophisticated motion of both the typography and the images. The photography also adds so much to the overall design. These professional quality photos do so much in telling the stories of these buildings through their stunning imagery.
97 mobile & 99 desktop
The project pages seemed a bit sparse and could use more photos. Integrating additional photos will help make it more polished and complete.
The website uses a theme of dark & neutral colors to capture the user’s attention. The large oversized typography adds a modern touch without being overwhelming. User’s stay engaged with onscreen elements that slide into place.
89 mobile & 96 desktop
Speed up the transitions by one-half. As the user scrolls down the screen the elements aren’t being positioned fast enough. The user has to wait for the elements to load in the correct location. Avoid making the user wait to read content on the screen.
The user lands on a modern homepage. On the work page they offer users the ability to filter by projects with icons that match the modernistic aesthetic of the website. The development team also integrated a loading animation that incorporates the brand’s logo. This is thoughtful work that doesn't go unnoticed by design professionals. Along with a slick design each project page provides the user with great information about the work that went into each project.
79 mobile & 88 desktop
The first call to action on the homepage needs to be stronger. This will help improve the Google Page Speed test score.
The homepage is clean with no text occupying the hero section. They do a great job of selling the work on the homepage slider. We loved the videos on the project pages. These do a great job of showcasing the architecture work. The website comes to life with all the video movement.
61 mobile & 58 desktop
Consider using a plugin or service that will automatically convert uploaded images to the optimal formats. This will help load the website faster for users and improve PageSpeed Insights. Also the Google Map on the contacts page isn’t loading correctly and needs to be fixed.
The website does a great job of making the projects discoverable through a filter that sorts according to whether it’s commercial, the status, location, and date. The user also has the ability to change the layout view from the list or grid and adds more filtering options.
72 mobile & 92 desktop
The homepage isn’t set up for great conversions. By increasing the legibility of the text on the hero section this will have an increased user experience.
This web design is organized with a well-structured grid layout. That makes it easy to scan through the elements on the screen. The homepage uses a video that was shot on a drone that allows you to experience the architecture like your hovering through it. After the mobile experience loads, it offers a smooth user experience with a layout that’s well tailored for its users.
60 mobile & 83 desktop
Fix the mobile experience, the website isn’t loading fast enough for mobile users. Most likely they are leaving even before the website loads. Increase the contrast on the hyperlink as it’s difficult to read on gray backgrounds.
The development team did a great job on making it look great across a variety of digital devices. This design flexibility is something that gets overlooked very often. The placement of the typography on the headers was thoughtful against the background images on the project pages. They did a great job of showcasing the project through video summaries.
71 mobile & 95 desktop
We would love to see a call to action on the project page to drive new customer leads. The thumbnail on the blog images isn’t consistent with the website brand.
The website has a modern yet retro feel. Oversized cursors allow one to hover over an image and trigger an animated effect on the building images. The designer and developers also put thought into the Google Maps styling. The subtle touch give the brand a customized feel.
87 mobile & 99 desktop
Consider adding more body content on the website. This content can help the search engine algorithms find the website based on search results. The goal is to rank high for certain keywords and better for SEO.
We land on the homepage with the easy to read text of the hero section. As we scroll down on the page we are greeted with a masonry styled layout that showcases the firm's great design work. The navigation was thoughtful with tabs that inform the user and allow for easy navigation.
74 mobile & 94 desktop
Avoid using a slider on the homepage. Studies tell us that we should avoid sliders. Towards the bottom of the homepage they should consider some type of call to action for the user to keep moving through the website. As of right now it feels like a deadend.
Here is a website that gives you the impression that you’re watching a sci-fi movie trailer on their homepage. This effect had us sitting on our chairs admiring this craftsmanship. The typography on the project pages is refined with headers and body copy that is well-spaced.
79 mobile & 97 desktop
On mobile avoid using hover effects for users. They won’t have the ability to see the hover effect on mobile devices. On the work page, just show the project. Users are currently having to work more to reveal content.
Most of these websites use great images and videos to capture their beautiful architecture. Some websites need to be mindful of the resolution of the images they use. Images that haven’t been reduced for the web will cause the website to load slowly and create a bad user experience.
The majority of the sites aren’t optimizing the mobile experience enough. We’d love to see more information about the start to finish on projects. It’s important to provide the user with great case studies with stats that show how the project was a success.
If you are looking for a top rated SEO agency in Phoenix, Arizona. Then look no further. Our team of experienced and skilled professionals will get your business on page one of Google today!
Learn MoreDo you want to learn how to drive more organic traffic to your website? Take a look at our post below.
