humnlab + architecture/

Introduction

Bryan Winters is an award-winning architect working in the beach cities of Los Angeles. The majority of his portfolio consists of stunning high-end modern residential homes. five philosophies. His old site also laid out his aesthetic philosophy. We took that document and used it as a guide to building out a design language that included features like stacked divs, animated transitions, parallax, and randomized styling as well as a literal syntax for lists and titles.

I borrowed heavily from art and photography magazines and other print media opting for Helvetica with varying font weights and more classic two-column spreads with thin separating lines underneath and ample white space above the headers to break up sections.

Research and Analysis

The first step in designing a website for a philosophy-driven architect with modern sensibilities is to conduct research and analysis to understand the target audience, the market competition, and the unique value proposition of the architect. In this case, our research indicated that the target audience for the website is primarily individuals and businesses who are looking for unique, high-quality architectural designs. The market competition is fierce, with many architects offering similar services. However, our client’s unique value proposition is their philosophy-driven approach to architecture, with a focus on sustainability, functionality, technology and core aesthetic themes.

Design Process

After compiling market research and digging into the client’s differentiation strategy, we dove into mood boards, sitemaps and batting around features that were in line with the stated philosophy. We found a real rhythm early on in the process and I started with page mockups. From the outset, we had decided on a robust custom post type for portfolios, so I started with mockups for the portfolio pages as they would be the most complex. The portfolio page, in essence, became the style guide for the rest of the site. humnlab+ architecture already used high-quality images and graphics to showcase the client’s projects, and we mined a lot of his prep material to convey the complexity and elegance of his projects.

A constant flow of communication allowed us to find opportunities to add features and increase the consistency of styling conventions across the site.

Design Solution

After the revision process and several feature extensions, Bryan and I had a site that exceeded both of our expectations. The website features a responsive design that adapts to all screen sizes and devices, it includes a menu with a project filter built, a portfolio custom post type that with over 20 different optional inputs that generate a varied experience, animated page transitions using Barba.js within WordPress, and a philosophy page using scroll listeners to implement fixed positions for a stacking effect while navigating concepts.

We used a black and white color scheme with blue as an accent color applying duotone images to parallax sections that revealed the location of the project as well as an optional duotone hover state for galleries within individual portfolio items.

We also integrated SEO best practices sitewide. Each portfolio item can have a lot of text and we seized the opportunity by highlighting key features within the SEO of each project.

Evaluation

After the website was launched, we evaluated it to measure its effectiveness and impact. We used website analytics to track user behavior and engagement. Bryan also collected feedback from his clients and colleagues. The evaluation period indicated that the website is performing well, with high user engagement and positive feedback. Overall, the website has helped the client establish their online presence and showcase their philosophy-driven approach to architecture, attracting new clients and growing their business.