Responses by KOTA.

Background: A multidisciplinary design and development property firm based in San Francisco, Martin Building Company is well known for its intriguing blend of stunning contemporary architecture and civic responsibility that can be seen across all its projects, creating exceptional and sustainable urban environments. KOTA was not only tasked with bringing its online presence up to date but also creating something beautiful and unique, complimenting its stunning property design. The design studio wanted its new platform to be forward-thinking, utilizing the latest web technologies and design trends to keep it one step ahead of its competitors.

The website’s target audiences include home buyers and renters, businesses, local community groups and the hospitality sector. We considered each of those user journeys to ensure the best possible user experience.

Design core: Finding the balance between innovative design and ease of use is something we always face when designing our websites—Martin Building Company’s was no exception. The client had both of those requirements for the new site, so a lot of time went into design ideas and animation prototyping until we struck that perfect balance.

We wanted to do something special, so we looked into new techniques and trends for the UI. These included a fullscreen grid-style menu system and cutting-edge parallax animation, all of which were incorporated within an editorial style layout. The project case studies were also a big focus for us, so we designed a bespoke, card-based component with draggable navigation. As the site is built in React, visitors can journey through the portfolio without feeling like they’re loading new pages.

Each project had various amounts of content, so we approached case-study pages with a modular content management solution. Components can be toggled on or off, making sure the layouts look great regardless of content size. This meant projects with 30 images looked just as good as projects with ten!

New lessons: We’d had experience working in the architecture and property sector, such as UK-based HollandGreen, so we had some expectations before kicking off this project. However, every website is a new creative challenge, as all our websites are completely bespoke and tailor made to ensure client expectations are met or exceeded!

Sometimes, our initial plan does not work out as intended due to technical limitations of the tools. For example, we wanted to use CSS masking techniques to create the menu open/close panel animations for Martin Building Company. However, this conflicted with full cross-browser support. In the end, we had to adapt and get creative. We achieved this effect using layered positive and negative translations.

Navigation structure: We had been wanting to design a grid-style takeover menu for some time now, and during our discovery process, we realized this project was perfect for it. So as well as the usual page links, we included a flexible layout where the client could show off awards and feature projects. We also wanted to make sure that projects would feature across the site, so we designed components to showcase them on the homepage and within the grid-style takeover menu.

We wanted to keep the new site as flat as possible, so we decided that combining pages was the best way to achieve this. For instance, instead of having dedicated pages for its team and news and press, we designed these to sit within the About page.

Technology: At KOTA, we use WordPress as the CMS for the majority of our websites, and this was the case for Martin Building Company as well. It’s utilized as a headless CMS, mainly for the purpose of creating a data layer. On the front end, we used Gatsby, a React-based framework that receives its content from WordPress over a GraphQL endpoint. Using this framework is also beneficial for SEO, which is an aspect we explore in depth for each of our projects and run multiple audits to ensure it is optimized.

Moreover, the site makes heavy use of JavaScript-based animations through the React Spring library. We worked hard to create seamless background transitions from light to dark, or from a solid color to images without having solid borders.

We decided to use this stack since it is one of the most innovative ways of building websites. This technology ensures a smooth experience as a single-page application.