Today's mantra is: "The more you share, the more you get." This is partly why websites emerge daily in unimaginable numbers, with diverse designs and topics. The architecture field is no exception. You might wonder — what’s so special about the design of architecture websites? Surprisingly, quite a lot. At the very least, these websites draw attention to the company’s or individual’s work.
Nevertheless, there are several misconceptions about architectural web design. Many webmasters — and even the architects themselves — believe that such a “creative” field must be represented online in an original, unique, and artistic way. However, if you look at many thematic websites, you'll notice that their designs are quite close to conventional ones. And rightly so.
But here's the catch… What do these websites usually contain? Information about the company’s activities, photo galleries of projects, contact pages, news sections, and media coverage. In general, there’s not that much content — which is why designers tend to focus heavily on the visual appearance of the site.
Esoteric Navigation
The first major mistake designers make is applying overly “creative” approaches to navigation. Sometimes even prominent architects have websites with navigation so obscure it’s frustrating. One might think: if that’s how they design buildings too — poor structures! For example, the project by the Illinois Institute of Technology College of Architecture . A serious and reputable institution, but reading and navigating their site quickly is quite difficult.
Meanwhile, this collection from htmlinspiration offers various architectural websites that look unusual but are built using modern web technologies.
Returning to the topic of navigation — for some reason, there’s a belief among architects that using so-called “mystery meat” navigation is cool. This means that clickable elements like links only appear when you hover your mouse over images or text. The problem is that users don’t always do this — and they don’t expect it either. Maybe it works once, but after that, users leave. The audience of architectural websites comes for business — to learn, order, or partner — not to enjoy beautiful hover effects. For example, the site snohetta looks stunning, but unless you hover over a photo, you won’t know what it’s about.
Flash Sites
To create esoterically beautiful sites with many effects and animations, some designers resort to using Flash. A decade ago, Flash sites were very popular. But today, more modern engines and technologies have replaced it. Besides, Google doesn't index Flash well, meaning your site won't reach its target audience.
Unified URL
This is a common issue for websites built on various engines. Pay attention: what happens when you go from the homepage to the portfolio or click on a photo? The URL doesn’t change. That’s because the site is designed like an interactive film rather than a multi-page document. Users can’t share a direct link to a specific project or news post, as the URL always points to the homepage.
The Importance of Specifics
Architecture is a very specific and even niche field. So, chasing after every design “innovation” is not always necessary — and sometimes it’s harmful. Even if a client wants to showcase hundreds of photos of buildings, it’s the designer’s job to curate them and find the right balance — so the site doesn’t turn into a chaotic gallery.
It’s also important to keep the site content updated at least once every two weeks. Successful sites provide ongoing value — like a media stream. Otherwise, users won’t come back. Updates can be simple: new photos, revised project descriptions, or short news items about a building’s completion.
You might ask, why does the designer need to know this? Isn’t it enough to just design the site once? Partially, yes — but a good designer must plan ahead and design all the blocks, sections, icons, and pages that will later be reused as the site grows.
Here are some great examples of architecture websites that feature separate blogs, news feeds, galleries, dedicated pages, and stylish effects. They look modern without being overloaded. Many were built years ago and still remain relevant online without redesigns—because the design works: AGi Architects, Bjorken Architects, Case 3D, James Merrell Architects, Snohetta, Hariri & Hariri, Awwwards - Architecture.
Photoshop and Architecture
These projects often use subtle effects, transitions, and photo filters. Sometimes, architectural firms even showcase their work in the form of blueprints or line drawings. This can be easily done in Photoshop, and today we'll look at how to create such images for design purposes.
Blueprints are often drawn from the front, side, or top of a building. Unlike real photos, they contain no background objects like trees or cars. If you have clean 3D vector renders, that’s great. If not—use photos with fewer details and good lighting on the structure.
Open the image, create a copy, and go to Image → Adjustments → Desaturate.
Then go to Filter → Stylize → Find Edges. You’ll now see an image that already resembles a blueprint.
Now invert the colors. Blueprints are typically white lines on blue paper. If you're using a white background instead, keep the lines dark and adapt the process accordingly.
Most photos include unwanted objects — trees, cars, people, etc. Use the Pen Tool to trace the building outline. Add plenty of anchor points, right-click, and choose Make Selection.
With the selection active, click the Add Layer Mask button. Your building will now be isolated. Delete any extra areas inside the mask using the Delete key.
Create a new layer and fill it with a blue color. Move it below the masked image. Set the image’s blend mode to Screen so the black background disappears, leaving only the white lines on the blue layer.
To add a white stroke around the object, double-click the image layer, choose Stroke → Inside → White, and set the pixel size (1–5px depending on your needs).
Save your file. Now let’s create the grid.
Decide the size of your grid — e.g., 50x50px. Create a new document with these dimensions and a transparent layer. Use the selection tool to draw 2px-wide lines along the top and left edges. Fill them with white.
Go to Edit → Define Pattern and save your grid. You can now close the document.
Back to your blueprint: create a new transparent layer, choose the Paint Bucket Tool, select “Pattern” mode, and fill it with your grid.
Draw a rectangular selection around your drawing (leave some padding). Right-click and choose Stroke → White → 5px.
Without deselecting, right-click and choose “Inverse Selection” and press Delete.
Blueprints aren’t always clean — real paper has grain and texture. You can reduce grid brightness or add realism. Add a layer mask to the grid, press Alt, and click on it. Paste a scratched texture into the mask.
Deselect the layer, open Levels (Ctrl+L), and adjust toward black to give the grid a rough, faded look.
Get a paper texture (for example, from here), paste it onto a new layer, desaturate, invert, and set blend mode to Screen.
And that’s it — your blueprint is ready! These visuals are commonly used in apps, games, websites, and social posts. And as you see, creating them isn’t too difficult.
The same effect can be done on light backgrounds using Multiply or Darken blend modes. Just avoid very light backgrounds, or you’ll lose contrast. For blueprint feel, go a bit darker.
Conclusion
Architecture websites don't differ much in layout from typical company sites, blogs, or tourism projects. But their main goal is to catch the viewer’s eye. Since their audience is more niche, effects should be applied to images and transitions — not the interface or links.
Ultimately, architecture is about blueprints — on all kinds of paper. Using blueprint-style visuals together with real photos adds interest. Often, designers don’t get access to real plans, but creating similar visuals is better than nothing.
Web design is a creative field — so exploring new tools and ideas is one of its most exciting parts.