Table of contents

1. Troy Cheung
2. Elena Salun
3. Júlia Nagy
4. Dami Lee
What makes a good architecture website design?
1. Navigation
2. Page speed
3. Clear visual narrative
4. Context
Meet our experts
Cover image of post Ex-Architect UX Designers’ POV on Architecture Website Design

Ex-Architect UX Designers’ POV on Architecture Website Design

Author's profile picture
Fanni Szalkai

Creating an architecture website design is wildly different from sketching a building. While a keen eye for design is needed for both, they require a completely different set of skills. So, to help you build your own site, we interviewed people who’ve done it all.

We talked to Farhad Soheili and Paola Zardo (a former architect and a civil engineer), who have transitioned into User Experience (UX) Design. They are experts in how to build understandable, yet jaw-dropping website designs that users love.

Let’s hear what they say about the portfolio examples below:

1. Troy Cheung

Troy Cheung created this site with Archifolio’s Agora template

Strengths:

  • Simple, clear design with enough white space
  • Good page speed
  • Important contextual information on every project page
  • The low-key hover state animation makes the site lively
  • Social media icons in the footer
Troy Cheung's project page with way too much written content

One of Troy Cheung’s projects called Barangaroo Institute

Weaknesses:

  • Image aspect ratios are inconsistent
  • Too much written content
  • Text boxes aren’t well-aligned with the images

I like how it’s clear and simple, and right from the start I know what I’m looking at. The employer will appreciate it too. Nothing super fancy, but just what you want to showcase on a student site.

Farhad

Recreate this design:

Troy used Archifolio’s Agora template to create this portfolio.

Like this website? Build yours with the same Archifolio template and customize it to fit your style.

2. Elena Salun

Elena Salun created this site with Archifolio’s Museum template

Paola’s first impression: “I immediately understand which type of job Elena does. She’s focused on complex construction shapes designed with parametric modeling and she works with Rhino, Revit, and Dynamo. It’s great, she already made a great first impression with her home page.”

Strengths:

  • Image-heavy layout
  • Linking out to the client’s website makes her site authoritative
  • Mixing renders with technical drawings shows a great project narrative
  • Nice flow, you always know what to see next (i.e. use of buttons)

It’s not text-heavy, which is great. However, I do miss some vital information about the project, for example, the square footage. It helps employers to see how much impact you had on the project.

Paola

Weaknesses:

  • The technical images could be of better quality
  • Scale and measurements aren’t readable

Recreate this design:

Recreate Elena Salun's website design. Colors, font types and sizes are included in this picture.

Elena used Archifolio’s Museum template to create this portfolio.

Like this website? Build yours with the same Archifolio template and customize it to fit your style.

3. Júlia Nagy

Júlia Nagy’s architecture website design

Strengths:

  • Simple, timeless design
  • Engaging project thumbnails
  • Site analysis is presented well
  • Snappy project summaries that give enough context

Weaknesses:

  • Lack of context on the landing page image
  • An introductory paragraph would be nice
Júlia Nagy's project page.

Júlia’s Her Dryer House project with technical drawings

I’m not sure where this architect is based right off the bat. As most jobs are still in person, your location can be really important for your employer. Also, a short introductory paragraph would be welcome to make it more personal.

Paola

Recreate this design

Recreate Júlia Nagy's architecture website design. Colors, font types and sizes are included in this picture.

Julia used Archifolio's Agora template to create this portfolio.

Like this website? Build yours with the same Archifolio template and customize it to fit your style.

4. Dami Lee

Dami Lee's architecture website design

Dami Lee's website landing page

Farhad’s first impression: “As you arrive, you are greeted with a photograph without any captions. It’s a nice image, I just don’t get the message immediately without digging deeper."

Remember, you have 5-6 seconds to convince the audience that it’s worth checking out this website, so convey your message clearly.

Farhad

Strengths:

  • Good navigation,
  • Decent page speed
  • Great about page
  • Separated conceptual works from real, built projects
  • Professional domain name (www.damilee.com)
Dami Lee's 3 project pages on mobile

Dami Lee’s architectural projects

Not everything you design will be built, but this architecture website solves this issue elegantly. Dami Lee separated her real-life experience from her conceptual projects. The result is a well-organized, relevant portfolio.

Weaknesses:

  • Her name is not visible
  • The landing page doesn’t invite us to see more
  • The exact tasks for her projects are missing
  • She hasn’t included an architecture resume

Recreate this design

Recreate Dami Lee's architecture website design. Colors, font types and sizes are included in this picture.

Demi Lee used a black&white color palette and a modern sans serif font family.

What makes a good architecture website design?

1. Navigation

“If you visit a big firm, you expect to see something unusual, something that breaks the rules. And if they have a unique user interface or some fancy interaction design, you say: ‘Wow, that’s cool!’ However, it’s almost the opposite for juniors. For them, the main goal is to provide good user experience to make sure the employer finds every relevant information.” – Farhad

Employers don’t have the time to figure out a completely new website logic. They feel much better about a website with a clear navigational system that allows them to find relevant information easily. Less is more in this case.

2. Page speed

“Projects in architecture are usually really big: big models, big renders, big image sizes. I remember how hard and slow it was to work with these files. And if it’s all online, it affects the loading time. People get bored if they have to wait around to see your work.” – Paola

The sheer volume of architectural projects is considerable, let alone when it’s all online. Thus, optimizing your page for fast loading is crucial.

Pro Tip:

If you want to check out your site’s speed performance, visit PageSpeed Insights and type in your site’s URL.

Look at the results of with Elena Saadati’s Archifolio site: She didn’t have to do anything specific, but her site performs almost perfectly on a page speed test.

The page speed of Elena Saadati’s website, created with Archifolio

3. Clear visual narrative

“Most architecture websites are the same. They put the different steps one after the other in the ‘perfect order’ like it was meant to be. However, no two design processes are ever exactly the same. Every project I worked on was different somehow. And the project page should represent that. Because that is what will make it real and give it a personal touch.” – Farhad

Your employer will know that you have hands-on experience if you present your design process as it was.

“Architecture briefs are the starting points of the story of any architecture project. Usually, the brief includes all the limitations and requirements and therefore is extremely long. So instead of including the whole client brief, mention the limitations or challenges that you tackled the most or learned the most from. It has a huge effect.” – Paola

Tell the story in a relevant way that shows your expertise and your real experience.

4. Context

“Architects generally do a wide range of different projects. You may, for example, want to specialize in exteriors and facades, but your experience is interior design-heavy. It’s not the end of the world, you just need to be clear and give context right away on your website.” – Paola

Start with a quick and snappy intro paragraph where you write about your experience and your specialization.

Final thoughts

How can you tell that your website’s design does your work justice? If you get that job interview.

So, the tricky thing is that you can only tell once you’ve started sharing your site. Which means time is of the essence. Archifolio helps you build your architecture portfolio website without pulling an all-nighter. In fact, you could wake up tomorrow refreshed knowing that you already have what it takes to get a job you really want. The only thing you need to do is to start today.

Start building your website today! It's free!
Create your site now

Meet our experts

Paola Zardo's introduction: "Paola Zardo finished her MSc studies in 2018 in Architecture and Urbanism after which she worked in research and education."
Farhad's introduction: "Farhad Soheili got his Master of Architecture in 2018. He worked as an Architect for 2 years before switching to UX design."

Both Paola and Farhad work at UX studio, a top UX UI agency.

Author's profile picture

Fanni Szalkai

Online Marketing Manager