How to Launch an Architect’s Portfolio Website in 20 Minutes or Less

Your website is your online calling card for presenting your firm, showcasing your work and building up an audience interested in your design brand. Today, the easiest way to build a great website is by using a WordPress template. Read this step-by-step guide to launch a highly aesthetic website for your design business without spending thousands of dollars on web design.

In 2013, I started a new job for an architecture firm. A friend of mine had approached me for it and I thought it would be an interesting opportunity to learn more and develop my career. I remember that firm’s website very well – a single page with low-resolution images – it looked so 90s… and the logo looked like something from the 80s!

I was shocked! Did I really want to work for a firm that put so little attention into its online presence?

After a few talks with my friend and the other members of staff, I finally did work for them, as it appeared that behind that disappointing front-of-house showcase, the job would be both interesting and challenging.

I started as one of the firm’s youngest employees. Highly motivated, I wanted to inject something new to the place. So I suggested a new web design – we had to drag the firm’s online presence back into the 21st century somehow …and also avoid any more negative reactions from potential employees in my age group!

Alongside my daily tasks at the firm, I started to create a draft design in Photoshop. My friend was a great help to me, gathering all the firm’s projects together to produce web-compatible images. Once I was finished with Photoshop, we had to find a coder who would take my design and turn it into HTML.

Long story short, the whole process took about half a year until we were finally able to go online. The coder wanted around $2,500, which was a special rate because we knew him – it could easily have been twice or three times that price considering the work he did. We got a lean website with a news page, projects section, contact page and an “about the firm” subpage.

Back then I was pretty proud and, thinking about it, I guess the design was okay. But now, 2 years later, I can tell you one thing: spending all that time and money was a mistake! I would go about it very differently today…

You don’t need to spend thousands of hours and dollars designing your website

In retrospect, I would not have spent hundreds of hours and dollars for a coder to create a website for me. Before I teach you the 5 steps to easily create a good-looking and professional website for your design business, let me summarize the main learning points for you real quick…

First of all, I was hardly a pro in web design – the whole thing took me a very long time to create. It was definitely fun, but my time could have been more valuably spent focusing on other things. From what I know today, I would simply search for a nice WordPress theme and customize that to my needs.

Now knowing the ins and outs of WordPress from my blog, I realize we made the whole thing too complicated. WordPress is so easy in the backend and gives you thousands of possibilities for customization, like adding a blog to your site, easily uploading projects, and editing content.

One thing that we tried to do with the firm’s site was to make it mobile responsive, meaning that the site would change to the size of the device being used to view it. It didn’t turn out too badly, but it had nothing on the WordPress themes you can get your hands on today. Nowadays, you can find really great, mobile responsive premium themes for under $60!

Mobile responsiveness is actually the one thing I am still missing on my own blog at archipreneur.com, so I still have work to do. But starting a blog at all has taught me a lot of rewarding things. Namely, that you do not have to be a web designer or coder to start a professional site for your architecture projects, portfolio, blog and profile. You just have to work out WordPress, which is much easier!

Now, go make yourself a cup of coffee and then we’ll start with our step-by-step process on how to start building your own website…

How to Start a Website for Your Architecture Firm… or any Type of Design Business

Launching archipreneur.com has taught me a lot about websites, WordPress and blogging. I thought that I would write up everything I have learned about launching my website and break it down into a simple, 5-step process, so that you can easily build a page for your design business.

Before we start, I will quickly go over what a blog is and how it functions. Otherwise, you might wonder why you should be starting your website on WordPress over any other site platform out there.

A blog is in essence a website that is regularly updated with post entries. WordPress is the web software on which your blog runs, as well as the backend Content Management System.

It really can look like any other website: it can have a homepage, an about page, a project page and so on. In fact, many websites you read are likely blogs, or are set up in blog format.

Here is a brief overview of what we are going to be covering in these 5 steps to build an architect’s website. Below that, you’ll be able to read how to complete each step in more detail.

1. Register your domain – A domain is your unique URL – mine is archipreneur.com. Yours could be abc-architects.com.
2. Set up a hosting account – A host is a server that stores your files, so that when someone types abc-architects.com into a browser (like Google Chrome or Safari), your blog will show up on their computer screen or mobile device. To start with, I recommend Bluehost, which I used in this tutorial because it is super easy to handle.
3. Install WordPress – WordPress is an open source platform for building blogs and websites, as well as archiving all your content.
4. Choose a design theme – A theme is the design front of your website. It provides all the front-end styling of your website, like colors, page layouts and fonts.
5. Upload your content – Once you have finished steps 1–4, you will be ready to upload your projects, firm profile and so on, to your new website… you might even want to start blogging on your own company’s blog!

Okay, now we are ready to begin the section where I walk you through the steps of building your own website. I will explain everything through screenshots, which you should be able to easily replicate.

Step #1: Register Your Domain

Your domain is the URL of your website, like archipreneur.com.

The first step is to register your own domain. If you are planning to sign up with a hosting company like Bluehost, which I will cover in Step #2 below, you can often get a free domain name with the cost of the webhosting. So, if you plan to sign up for hosting you can skip to Step #2.

If you have already registered your domain, no problem, you can simply transfer your current domain name while setting up your hosting account…

So let’s go over to Bluehost. If you click here, you should see the page shown in the below screenshot.

Step #2: Set up a Hosting Account

Your website or blog consists of many files. These files are all stored on a server that can be accessed from your web browser, like Google Chrome or Firefox. You will, in effect, “rent” a space on the host’s server in order to install the WordPress software and manage your website. So the host plays a very important role in setting up your site.

There are a thousand of possibilities for getting a hosting account. However, if you are starting a page that doesn’t have a lot of content or blog entries, it is best to take an easy-to-handle and inexpensive offer. From my research, I recommend Bluehost. I believe it’s a great option for a design business or an architectural practice because:

• Bluehost has proved to be a very reliable hosting provider, which hosts over 850,000 WordPress blogs to date.
• Bluehost has great 24–7 customer support via phone, email or chat.
• Bluehost is inexpensive. Hosting packages start at $3.95 – $5.95 a month, depending on which plan you select. The longer you commit, the cheaper it gets.

So, super handy and easy for beginners to set up! If you are still in, go to the Bluehost homepage and click on the green “Get Started Now” button.

Next, you need to decide which of the Bluehost plans is right for you. I recommend the Starter Package. If you think you’ll have a lot of projects and content, which will extend the 100 GB server space in the Starter Package, then the Plus Plan would be a better option because it comes with unlimited website space. The same goes for email storage, which is limited in the Starter Package.

Now you need to decide whether you need a domain name. If you have not previously registered a domain, you can enter your desired name in the left-hand box and click the “Next” button.

I chose to register the domain name wp4arch.com (standing for WordPress for Architects) for this tutorial. This is the domain where I will install WordPress and an example theme to take a look at later.

If you have a domain name registered with another domain registration service, e.g. GoDaddy.com, then you can also enter your domain name in the right-hand box and sign up with your existing name.

Please note: You have to change the name servers at the company you bought your domain to the Bluehost name servers. This process is a bit different depending on the registrar that you have chosen. Bluehost takes you through the entire process here.

Now you can enter your account information and scroll down to select your desired plan. You can choose the price range – from $3.95–$5.95 a month, depending on your commitment of 12, 24 or 36 months. I would recommend the 36-month length because it works out to be the cheapest over time and you will probably have your site longer than one year, right?

Enter your billing information, confirm that you have read and agreed with the Terms of Service and then click the “Next” button.

After clicking through some of the upgrade offers which (in my opinion) you do not need, you should reach the “Welcome to Bluehost” screen. Create your password by clicking on the blue button and… congratulations, you have made it to the next step!

Step #3: Install WordPress

Now you are ready to install WordPress on your host server. This is where Bluehost has made the process so simple.

WordPress is a free, online, open source website creation tool. In non-geek speak, it’s probably the easiest and most powerful blogging and website content management system (CMS) that exists today.

On the Bluehost site, click on the menu button “Hosting” and you will bring up your Bluehost main control page (if you are not already on it by default after you signed up).

Click on the “Install WordPress” logo in the fourth row and wait for a moment until the page loads. It might take a while.

A new WordPress screen will then appear. Click the green “Install” button. That will bring you to a new screen, saying “Select which domain you would like to install to”. It should default to the one you need. Click on the green button “Check Domain”.

The next screen will say, “Last step, you are almost there.” Click on “Advanced Options”, then type in the title you want your site to have. Don’t worry about getting it perfect; you can always change it later. Accept the “Admin Username” and “Admin Password” that Bluehost suggests.

Now click on the item that says, “I have read the terms and conditions of the GPLv2.” Click on the “Install Now” button and the installation process will begin. It will take a minute or two to install entirely.

Here, you might get an “upsell” pop-up, which you can easily click away with the “X” in the upper right-hand corner. After that, you should see a screen saying, “Your install is complete!” on the top of the page.

Now, click on the black “View Credentials” button. This will take you to the Notification Center. Click on the “View” button.

Once that is done, you’ll get a screen with your blog URL, login URL, username, and password. Bluehost will also email this information to you, but I would suggest having a backup. You can write it down or just take a screenshot.

Log into WordPress

Great, you have just installed WordPress!

Now you are ready to login to the WordPress admin area. Either click on the “Admin URL” link or type the following link into the address bar of your browser:

www.yourdomainname.com/wp-login.php

This will lead you to the WordPress login page. I recommend that you bookmark this link because you always will come back there when editing your website.

Now enter your username and password (the one you created in the Notification Center). Put a check in the “Remember Me” box if you’re using a private computer and then hit the “Log In” button.

You should now be looking at the WordPress dashboard. This is the back-end of your site, from which you will steer and edit your website. You might see a welcome offer from some plug-ins like the JetPack. Do not worry about those right now.

Okay, now you have set up WordPress and are more or less ready to write your first blog post! If you take your cursor to the upper left-hand side of the dashboard where the name of your site is, a little menu should come up, to say “Visit Site”. Just for fun, click on it. It will bring you to a preview of your website; you will see a pretty basic blog layout.

Now we need to change that to a nice design that will suit your company’s brand. And that is where the fun begins…we’ll get there!

Step #4: Choose a Design Theme

Now that you have a domain, you have set up your hosting, and you have installed WordPress… it’s time to find a nice design theme.

What is a WordPress theme? It is the skin of your website; the visual component, like the body of a car.

When you install WordPress, you are automatically given the default theme (the one you likely just saw if you clicked on “Visit Site” earlier). If you are an architect or designer like me this will probably not satisfy your tastes, right?

From here, you basically have two options: either find a free theme, or buy a premium theme. You can find thousands of free themes on the wordpress.com website or by googling for free WordPress themes. However, my experience has been that I am never 100% satisfied with the free themes on offer. Premium themes are much better in terms of design, optimization and service. A premium design theme will cost anywhere between $30 to $100 but it is totally worth it.

I have written a post on my 10+ favorite themes for design businesses here on my blog. You could take a look there before searching for one yourself, as you may just find one that you like.

I would suggest that, for architects and designers, the following list of requirements should be matched by whichever theme you choose:

• Aesthetic, minimal and clean design
• Compatibility with all devices, meaning it has to be mobile responsive
• A portfolio section that’s able to contain all your projects
• An “about” page
• Social media features and plugins
• The option to have a blog

I really like the “Angle” theme from WPZoom (see the image below) because I like the clean and minimal design and it ticks everything on the list above. For the purpose of this post, I will take this as an example theme to install.

If you want to search for a premium theme all by yourself, there is a lot of choice available out there. If you want to google design themes, it would make sense to use the following searches:

Portfolio WordPress theme

Design theme

Premium WordPress theme

Mobile responsive portfolio theme

Here are some links to pages that also offer a range of good themes:

• ThemeForest
• StudioPress
• WPZoom
• ThemeZilla
• ThemeTrust

Find a theme that matches your aesthetic and functional needs for your business before we take the next step.

How to Install your WordPress Theme

Once you’ve decided on a theme, you can then download it to your computer; it should be a zip file, like theme.zip. In my case, it is angle.zip.

Next, go to your blog dashboard – again, you can get there by going to yourblog.com/wp-login.php (the link you should have bookmarked before) and typing in your username and password.

To install your new theme, go to the menu panel on the left-hand side and then choose:

Appearance > Themes > Add New > Upload Theme > Upload theme > Install Now > Activate.

Once you hit “Refresh”, your new theme should be live on your site. I installed the “Angle” theme for the domain wp4arch.com for you to have a look at. Don’t be afraid to see how it looks at this stage. The theme is not filled with content, but rather as you see in the screenshot below.

Now you have installed the raw theme, which is burning to be filled with your projects, profile, contact information and anything else you might find useful. You can also add your logo, change the colors, background, etc.

Step #5: Upload Your Projects and Profile

Congratulations, you have set up your firm’s new website! Now the real work begins ;-)

If you sped through steps 1–4, it might have taken you somewhere between 15–30 minutes to set up your website (providing you already knew your theme and had all your resources gathered).

In this final step, filling your new site with content will probably take some more time because you have to have all your project images, texts and all that goes with them at hand. But do not worry, I will show you how to upload your first project and how to change the “about” page of your website.

If you also chose and installed the “Angle” theme for your new site, then your dashboard section will look like the following:

You can customize everything you want from your WordPress dashboard. WPZoom has a great tutorial site for each of its themes, as well as the steps you should take for customization:

http://www.wpzoom.com/documentation/angle

But let’s do the first steps together. We will upload an image for the slideshow, set up an “about” page and create the project section.

Set up the Slideshow

To upload an image to the slideshow, go to the left-hand menu and select:

Slideshow > Add New

Now enter a new title. I will go for “wp4arch – WordPress For Architects”

Now, go to the “Featured image” section on the lower right-hand side and press the “Set features image” link. Upload an image and the first step is complete. Now it’s starting to look like a real website! Check it out below:

Create an About Page

Now we will create an “about” page.

Go to the left menu bar and select:

Pages > Add New

The title should be “about” and in the below post section, I entered the following text:

WP4ARCH is a WordPress tutorial site for people within the architecture and design community. Our goal is to help you launch high quality websites for your design business by providing knowledge about web design, hosting, themes and WordPress.

You now have to create a menu button for the “about” page so that we can see it in the upper left-hand side of the site. Go to:

Appearance > Menu

The “about” page you created should already appear in the menu section. Just type “about” into the blank “Title Attribute” field and check the little box next to “Main Menu” directly below it, to make sure that the button for the page will be shown in the main menu. I did the same for the homepage, so now you should have two menu buttons already once you refresh the page.

Create the Project Page

The last step to take, before you continue finalizing your page, is to set up the project page, or portfolio section, if you chose to name it differently. The “Angle” theme includes 2 different page templates for the portfolio page:

1. Portfolio (isotope) – this template is based on the isotope effect, and will display all your portfolio posts on one page. You will be able to sort them using the categories at the top.
2. Portfolio (paginated) – this is the default template, with paginated navigation, which will display as many portfolio posts per page as you set under: Theme Options > Portfolio Options.

1. To create a portfolio in which you will showcase all your projects, navigate to: WordPress Dashboard > Pages > Add New
2. Look for the “Page Attributes” box on the right-hand side, and select any of the 2 available portfolio templates from the template drop-down menu.
3. Once you have created your portfolio page, navigate to: WPZOOM > Theme Options.
4. In “Portfolio Options”, select your newly-created page from the dropdown menu.

So you’ve made it through the tutorial! Now you should enter your content on the page and work on making it as professional as possible. In the next section, I will give you some ideas about how to do this…

What’s next? Start Blogging, Add Social Media, Collect Emails…

Wow, great! How does it feel to have a new look for your business?

I want to give you some ideas on what else you can do with your website once you have set it up. Of course, it all depends on your individual goals and motivations, but I have a feeling that many architectural practices could get much more out of their online presence if they had the right tools at their disposal.

Start a blog

Blogging is a powerful tool to connect with your clients and become a recognized authority in your field.

For many years, architects and designers have shown their projects as a reference for what they do, on their websites. Friends and followers might like your projects, but what people really love are the stories told about them.

Telling the story of your business, writing about things of which you have special expertise, or simply using your blog as a news section, will build a relationship with your readers. Those readers could be existing or potential clients, even future employees. You may even be invited to lectures because someone recognizes you as an authority in your field from reading your blog and news articles.

Blogging can be very rewarding if you can integrate it consistently to your business structure. I like blogging both as a hobby and as a method of learning, sharing and connecting with like-minded people.

Integrate social media

Social media is another great avenue to share your work and connect with your readers. You could set up a Facebook page, a Linkedin group and a Twitter profile for your business.

Most themes come with integrated social media features. Often they are those little icons that can be found in the sidebar or footer. You could add links to your social media profiles so that people can easily find and follow you on their favorite platform.

If you integrate “Share” buttons to the post section of your blog, you give your readers the opportunity to spread the word and share your projects and posts, multiplying traffic to your website. Search for “Share” buttons in the plugin section of your WordPress dashboard. There are many free ones available. I use the plugin Shareaholic.

Collect email addresses

Building up an email list is another great way to stay in contact with your audience. You could inform them of news of your projects, as well as upcoming events or lectures. Imagine you are organizing an exhibition of your work, or you are publishing a book. If you have an email list, you can easily inform all of your clients and friends about these events and ensure that you will have a pool of visitors and/or buyers.

Good email list services are AWeber and MailChimp. You could integrate an opt-in form on your site and connect this to one of the client lists. There are also email list plugins available; SumoMe is great for email opt-ins.

Finally…

WordPress websites are a great way to build your online homepage, and easily maintain and develop it. I hope I was able to help you a little in getting started and helped you understand that you do not need to spend thousands of dollars for professional looking websites.

You have now learned how to get a domain and setup hosting, install WordPress, select a design theme, and, finally, how to fill the theme with your own content. I hope that I also inspired you to use all the powerful “extras” at your disposal, like blogging, social media and email lists.

You can always come back to this step-by-step guide to use as a reference and review the example page I set up under wp4arch.com.

Blogging has been very inspiring for me so far and I believe this is just the start. I hope you will stay to follow the architecture and entrepreneurship community; perhaps you’ll become an Archipreneur yourself.

Please let me know if you have any questions about how to start a website by leaving a comment. I would love to hear from you and will do my best to answer your questions.

Note: Some of the links in this tutorial are affiliate links, and if you choose to purchase I will get a small commission, but this is at NO extra charge to you. This commission will only help me to continue to develop and maintain archipreneur.com. Every tool and piece of software I mention in this article is what I personally use and recommend.