10 Tips for Creating an Architecture Portfolio Website (with Examples)
There are some things architects just can’t live without: Checking a building you’ve always wanted to see off your bucket list. Splurging on architecture books. Drawing on napkins to sketch out an idea the moment inspiration hits.
These charming moments are what make being a part of the world of architecture so unique. But at the top of any architect’s list should be this - creating an architecture portfolio website. If you ask us, it's one thing a contemporary in the field should have.
So, you can build a house - but can you build an online portfolio? That’s where the experts come in. This article includes 10 of the most valuable tips for building an architecture portfolio website on your own. Plus, we’ve got a curated list of examples to fuel your inspiration.
What is an architecture portfolio website?
An architecture portfolio website is designed to reflect your professional style, personality and above all else - experience. It should showcase your greatest architectural accomplishments to date, including pertinent information to describe yourself and samples of your work. Compared to a physical professional portfolio, it will need to include visual elements that can translate your oeuvre into a succinct virtual format.
Whether you’re an independent architect, or representing an architectural firm - an architecture portfolio is an essential element at any stage of your career. Acting as a meeting point between you and potential clients, your portfolio will show interested parties all that you're capable of, opening the doors to new projects for years to come.
Tips for creating an architecture portfolio website
Rome wasn’t built in one day, and your website won’t be either. Do some prep by gathering up knowledge of what an online portfolio is or checking out the latest web design trends.
In the meantime, here are some tips on how to make a portfolio on the web. These are 10 practical things to keep in mind before you dive into your architecture portfolio’s design:
01. Treat your template like a foundation
Every architect knows that a building is only as good as its foundation. In many ways, a portfolio template is the foundation of your website. Start by looking for a template with the layout you need to bring your concept to life. This might mean finding a minimalist website template, or using one with more modern features like parallax scrolling.
Once the foundation is set, you’ll be able to customize every detail yourself while developing your own visual language. From the font you use, to the images you include or what background you feature - each element will play an active role in representing your professional career and goals.
02. Carefully curate your portfolio
In the words of Frank Lloyd Wright, “less is more where more is no good.” When it comes to the works you present in your portfolio, be selective. Contrary to what you might think, you don’t have to present every project you’ve ever worked on.
Of course, the number of options will depend on what stage you’re at in your career. But in any case, this is an opportunity to show yourself at your best. Curate your portfolio in a way that emphasizes your most distinguished work, most relevant projects, and embodies the full range of your skill, without being too repetitive.
Feel free to include group projects and collaborations - these prove that you work well with others, something every future employer will be pleased to see.
03. Invest in your images
First impressions are made in seconds. As with any type of design portfolio, a seamless way to make a good first impression is to invest in your images. High quality photos of your completed projects will ensure that you give potential clients an adequate taste of the real thing. With each project, choose quality over quantity and limit yourself to the best photos of your work.
Consider adding images from each stage in the building process, so visitors can fully immerse themselves in your work. As an architect, you’ll also want to include 3D model drawings or plans in order to represent the full scope of each project. Original sketches are also key, since it's a critical part of the job (ahem - not the ones you drew on napkins).
04. Give your work a narrative
A picture’s worth a thousand words - but it doesn’t tell it all. Adding descriptive text to accompany the images in your portfolio is a great way to contextualize your work.
If you prefer minimal text, at the very least provide information like the date, location and name of each project. Endeavor to expand your narrative by including extra material that might interest your future employers. Perhaps you can add background details of the project’s location, reveal your philosophy, or describe key aspects of your process.
While architecture and other art portfolios tend to focus on visuals, remember that good copy is also key. In the same way architecture can communicate ideas, so do your written words. You want your language to maintain a professional style that won’t throw off clients, so be sure to keep your words concise, clear and intriguing - and free of grammatical mistakes.
05. Tell future clients about yourself
Chances are, your proud parents won’t be the only ones visiting your site. Ideally, your audience will reach potential clients, future employers and others within your network. That means you’ll need to introduce yourself.
Provide your professional bio on a dedicated About page, including a headshot, short description of yourself and a summary of your professional background. You might also want to upload your CV, which can exist as a page on its own, or be accessed with a PDF link or downloadable file. Either or both of these options will amplify your skills to prospective clients and provide them with a sense of trust.
06. Show off your achievements
When you get rewarded for your work, there’s only one thing to do - flaunt it. Don’t hesitate to list your achievements on your architecture portfolio website. This can include notable awards, contests you’ve participated in, or any written media about your projects.
The awards and publicity you receive are proof of your dedication and talent as an architect. Boasting them will only help you earn points with future employers, setting you apart from the crowd of competitors.
07. Make getting in touch easy
Your ideal situation ends with potential clients feeling so impressed that they need to get in touch with you. Make that easy by providing your contact information in a clear and accessible location of your site.
The best ways to incorporate these details are by adding them to your About page or CV, or alternatively creating a dedicated contact page. List the basics, like your business email address, phone number and links to your social networking profiles.
Two practices you might also consider are creating a contact form so visitors can reach out directly from your site, or reiterating your details on the website footer.
08. Choose a winning domain name
The right domain name will strengthen your site’s professional appearance. Not to mention, boost your branding efforts. Oh, and it will also help your site become easier to find on search engines.
Short as it is, picking out a domain name that’s on point cannot be emphasized enough. Some rules of thumb for crafting a winning one include: keeping it short, on-brand (in this case, stick with your name or the name of your architecture firm), and using keywords like “architect.”
09. Enhance your mobile website
With all the excitement surrounding your online portfolio, it’s easy to forget about what it looks like from a smartphone. But these days, we like to have all the information we need at our fingertips. Since nearly half of global internet traffic arrives via mobile device, considering how to adjust your elements for a smaller screen is an absolute must.
With a Wix template, you’ll be set with a built-in mobile version. Still, you can improve it further by minimizing the number of items, adding useful call-to-action buttons and adjusting your menu size so that users can easily browse your site from their phones. Take advantage of the mobile features Wix offers to further polish your design.
10. Plan for regular updates
Yes, your online portfolio is here to stay. But as your career evolves, your website will have to evolve with it. Since you don’t want to start from scratch every time, plan ahead for easy website maintenance.
In order to reflect your most current professional developments, update your work periodically - every six months to one year. This will ensure that you don’t lag behind with outdated information.
5 architecture portfolio website examples
There’s nothing like having a look at the best portfolio websites as inspiration for your own. Check out this notable selection from both independent architects and architecture firms - all made using Wix:
Richard Bell is a member of the Royal Institute of British Architects. Immediately we see that he’s won the Deezen Award in 2018, since he proudly stamps the information on his homepage. Way to go, Richard.
This website makes really great use of white space: a frame surrounding the featured slideshow of work gives each image its chance in the spotlight, and the unique vertical strip running down the page highlights the menu of items. Its unique placement ensures visitors will be able to navigate to different pages of his portfolio website, which include an About page, blog, and contact page, along with publications and awards.
As a firm, Golany Architects has been active in Tel Aviv since 1991. With more than a decade of experience under their belt, their priority is making sure that their portfolio is neatly organized while exhibiting the full span of their work.
When you find yourself with more than a handful of quality projects to display, take the lead from Golany Architects. The firm succeeds to present a plethora of their best projects by separating them into categories: residential, commercial, institutional and landscape. It not only looks nice, but ensures that individual projects are easy for visitors to identify.
03. Mathias Holmberg
Swedish architect Mathias Holmberg approaches his online portfolio with an attractive minimalist layout. An extensive gallery takes up the majority of his homepage real estate, providing viewers with an engaging visual overview of Mathias’s work. Sticking with the less-is-more theme, Mathias one and only menu item is a contact page.
It’s safe to say that this level of minimalism makes for a clean website that’s easy to navigate. While Mathias’s straightforward approach perfectly matches the style of his work, others might want to include more details about each project. If you’re drawn to this portfolio structure, there are ways to further contextualize your images without disrupting the design. Consider linking each image to a dedicated project page, or adding concise details using an elegant hover effect.
In a city like New York, it’s hard to be recognized. This Manhattan based architecture firm stands up to the challenge by strengthening their branding.
Andrew Bartle Architects, or Aba Studio, includes their own unique logo design on each page of this online portfolio. The attractive bright red lettermark is sure to stand out, and the modern typeface is used consistently throughout the text of their site. These moves create and amplify a cohesive brand identity that visitors can connect with as they browse.
Even when you're on your own, branded moves like these will amplify your status as a professional architect. As new and returning visitors come to view your work, they’ll be struck by your cohesive visual language and will recognize it for years to come.
05. Brandon Dean
Brooklyn based Brandon Dean is an architect who values sustainability. Notice how his philosophy is elaborated on in his About page, which includes more than just a name and CV. Providing details like his approach and professional background helps us understand more of who he is, and what his goals are.
Visitors to his site will also be greeted with a full-screen image of a project that’s not quite finished yet. Rather than appearing sloppy, this behind-the-scenes picture adds value by giving us a glimpse of Brandon’s process.
By Jenna Romano
Writer & Web Design Expert