Architecture Website Project: Booth Hansen

Booth Hansen Architecture Website DesignArchitecture firms have websites that are perfectly positioned to take advantage of the internet’s growth as a primarily visual medium. While many businesses are struggling to find the time and resources to record even the most successful projects, architects usually have a plethora of beautiful designs sitting on a computer waiting to be displayed. The nature of their work requires a multi-perspective representation of aesthetics, utility and innovation. These pictures are credibility. They differentiate. They lead directly to new business.

The question is, “How do you design a website that can showcase 300+ images for 90 projects in a way that can be segmented by project type and easily scanned by prospective clients?” <breathe> Now equally as important: “How do you allow the staff to easily create and edit projects in the future?” 

We just finished a design refresh for Chicago architecture firm Booth Hansen that included an upgraded navigation menu, new landing pages for each product segment and a new homepage that makes a strong – and beautiful – first impression of the company.


The Home Page:

Architecture Website Design Booth Hansen


  • 900px x 600px slider that quickly and smoothly scrolls through a select group of images chosen specifically to make a great first impression
  • With each image, its service segment in the lower menu bolds to indicate what kind of project it is and where visitors can see more projects like it
  • The image clicks directly to the project information
  • The navigation drop-downs were eliminated to avoid covering the slider image
  • All of the text below the image was eliminated to put 100% of a visitor’s attention to the image (for large ticket services such as architectural work, top of funnel users are more likely to make the effort to find information and click-through, if given a reason – the powerful images do just that)


Project Landing Pages:

Architecture Website Design Chicago Landing page


  • The menu on the left allows for easy navigation and prevents the need for pop-up info cluttering the thumbnail images (the option of replacing the left menu with translucent labels inside the images was considered, yet discarded because it hid too much of the content)
  • As the visitor scrolls down, the menu “sticks” in place at the top, allowing for an omnipresent menu even when a large number of projects creates a “tall” page:


Architecture Website Design-Chicago Landing-page-sticky


Project Pages:

Architecture-Website Chicago Booth Hansen

WordPress Page Maintenance:

Each project is placed in a category by simply checking a box. The text below has its own field and the image gallery for each project is an easy plugin that allows a web manager to place the images in any order, and add or subtract them as needed. Need a project in two categories with different text for each service? Easy! Just one-click-copy the page, change the text and select the new category.

All lists are managed by the title of the project and name of the organization, so special care was taken to rename each project to place it in the correct location on the site.


Image and Search Optimization:

With so many images, special care was given to best practice search engine optimization and user experience. All photos were compressed using a Photoshop batch “action” that reduces most image file sizes by over 80% and making page load speeds faster. In addition, our project managers ensured that all new photos on the site had keyword-rich file names, such that an image search on Google Images would more likely turn up our client on results. Compelling pictures such as those on Booth Hansen’s site are certainly strong persuasion to click through and learn more about the project.


What does this mean for you?

If you’re concerned about whether your business is effectively showcasing valuable images or important projects, we’d be glad to take a look and offer our thoughts on how you can make use of unique designs and modern web technology to improve your website. Simply give us a call at 312-667-0121 or send us an email!

No Comments Yet.

Leave a Reply

Your email address will not be published.