TL;DR
We created an immersive WordPress website for specialist architectural designers, StudioGötz, focusing on showcasing their outstanding projects and eye for detail.
Project Overview
StudioGötz required a new website to replace their outdated site, to focus on showcasing their striking visuals and contemporary design solutions. We created a polished, high-contrast WordPress website, heavily featuring their projects to illustrate their expertise.
Who are StudioGötz?
StudioGötz is an architecture firm based in Birmingham, established by Volker Götz in 2017. Focusing on creating unique and contemporary designs, StudioGötz works with clients in the residential, education and commercial sectors to produce memorable and forward-thinking design solutions.
StudioGötz pride themselves on putting their clients first whilst bringing out-of-the-box solutions to the table, which is apparent with their broad list of projects, and RIBA chartered status.
Project Brief
Although StudioGötz’ existing website did its job, it was outdated and was in need of a spruce to bring it in line with the studio’s key visions and values. However, this wasn’t feasible due to the site being created on Squarespace – a platform which has little advanced features and opportunity for custom work. Therefore, we opted to create the new website on WordPress, allowing us more flexibility to create a design to reinforce the firm’s talent, expertise and style, spotlighting their experience and capabilities.
Our Proposal
- Build a WordPress-based website to empower StudioGötz to easily manage and showcase their growing portfolio of architectural projects. This platform provides intuitive content management, enabling administrators to seamlessly add new projects and updates;
- Showcase a prominent project portfolio, highlighting the firm’s diverse experience and distinctive design style through high-quality imagery; and
- Use motion and effects, enhancing the visual experience to further strengthen StudioGötz’modern flair and showcase high-quality images.
Brand Guidelines
To help round out the visual identity, we worked with the client to create a formal brand guidelines document, outlining how and where to use logo assets, developing a rich colour palette, sourcing web-friendly, cost-effective font options, as well as providing insights into the decision making process and the tone the brand should always aspire to achieve.
The resulting document serves as a solid starting point for designers new to the brand as well as a reference for StudioGötz to better use their branding going forward in both digital and printed media.
Colour Palette
StudioGötz’ previous website was slightly restricted, with a limited monochrome scheme. We retained an olive green shade, refining the colour choice and forming a complementary colour palette around this, drawing inspiration from 1970s hues to reflect the client’s aesthetic.
Our new colour scheme is subtly retro and muted, yet refined and elegant. Its natural inspiration emphasises the connection between StudioGötz’s structures and their surroundings—buildings that are part of the landscape, not separate from it.
Our research and discovery exercise revealed that most competitor websites use light backgrounds. To differentiate StudioGötz, we chose a soft black as the primary brand colour, creating the foundation for a distinctive dark-themed website. This bold choice also allows the retained olive green to stand out vividly in contrast.
Beyond the core brand colours, we developed a vibrant gradient of orange, yellow, and coral. This gradient, born from our broader colour exploration, evokes warmth and the protective strength of structure. It can be used in place of solid colours to add visual interest to elements like backgrounds and large headings, creating moments of surprise and delight.
Typography
The existing logo features Gotham Light, a font within the Gotham geometric sans-serif typeface family. An insightful choice by the original designer of the logo, Gotham’s letterforms were inspired by mid-twentieth century architectural signs, intended to look a little more humanistic than the other geometric fonts. However, this font encounters relatively high licensing costs, particularly once many weights are required for a flexible design system, so we performed an exercise to identify a suitable alternative font that can be used across the website at low or no cost.
We opted for Plus Jakarta Sans, a clean, geometric sans-serif typeface that provides a similar modern flair. Available as a free Google Font, Plus Jakarta Sans promotes consistency across all media and simplifies the process of creating both in-house and external designs. In comparison tests for legibility, Plus Jakarta Sans even outperformed Gotham Light.
Additionally, as a variable font, this option requires only one file to be uploaded to the website for all available weights, enhancing page speed and supporting SEO efforts.
Look & Feel
This highly-aesthetic website aims to immerse the user in the StudioGötz world, offering inspiration and delight at every turn and encouraging the user to make contact to get the ball rolling with their own project, no matter the size.
Loading Screen
Upon first visit to the site users are greeted by a one-time “loading screen” that uses motion to unify elements of the logomark, creating a positive first impression, reinforcing the brand and setting the tone for an enhanced user experience.
The site uses a session variable to remember that the loading screen has been displayed, preventing it from loading on other screens as visitors progress through the website.
Gradient Application
To break up the black background that can be seen throughout the website, we utilised the StudioGötz gradient to create an eyecatching background for our contact form sections. Not only does this break up the dark space, but also draws user attention to this important website goal, encouraging users to take action, and further helping to increase enquiries for StudioGötz.
One of our favourite applications of the gradient is as a text colour for H2 headings. These headings typically strike an aspirational tone, inspiring viewers to envision the possibilities of their own building projects. The gradient’s vibrant hues beautifully complement and enhance these concise, evocative statements.
Masked Motion
The StudioGötz logo is a key element to reinforce throughout the website. For impact, on the homepage a scrolling mask of a specially created SVG version of the logo is the first thing users encounter; it moves across the screen, offering glimpses of a recent project image behind each letterform. This is designed to create interest and intrigue about the work StudioGötz performs, encouraging users to scroll further on the website to find out more.
Playful Cursor
A novel way to increase engagement and provide user delight is to use a cursor effect, as we have on the StudioGötz website. Without compromising accessibility by fully replacing the cursor, we have implemented a trailing dot which moves along with mouse movements and pulses on click. The dot is hidden on touch devices.
The Technical Details
Web Development
Using WordPress as our CMS, we built a custom theme with a responsive design, to ensure that it was fully accessible at all breakpoints. We developed custom WordPress blocks and post types, including project pages, to make it easier for website admins to manage content.
Information Architecture
It was essential that the new website allowed for StudioGötz to clearly showcase their project items, demonstrating their expertise and design style to clients. Therefore, the content needed to be organised to make it easy to view, ensuring all details were included. We provided StudioGötz with an actionable content plan mapping out the suggested website content and structure for them to work through and create their page content. We also provided a template document to be duplicated for each project write-up to ensure that each page contained the right information, ensuring uniformity across the StudioGötz portfolio and familiar reference points.
Content Population
Our client had a large volume of content to include, which required organising. We created a range of Google Drive folders for each section of the website, to allow our client to drop both written content and visuals to the relevant location. Our client also completed the content plan to establish where each of the projects and pages would sit. We then went ahead and added the content to the WordPress CMS, using custom post types for projects.
In addition to ensuring the website content is fully up-to-date for launch, this level of content organisation allows for website admins to easily access and update projects and other pages in the future, adding to them when required.
- #HTML5
- #CSS3
- #WordPress
- #JavaScript
Project Portfolio
As previously mentioned, it was important that StudioGötz projects were front of mind throughout the website. We focused on spotlighting these to help prospective customers visualise how StudioGötz can make their dreams and ideas become a reality, whilst providing trust factors for the work that they have already completed.
Project Structure
Each project page is housed in Projects – a custom WordPress archive page, pulling through the featured image, title and category from each project page. This creates an offset grid of images which is eyecatching for users, without text blocking the eyeline. Filters allow users to define which types of project they want to see more of and users can simply click on the project card to direct them to the individual project page to read more.
Project Pages
We created individual project pages to commence with a 50/50 section, housing an eyecatching hero image and text summary, acting as a breakdown with quick statistics – including short synopsis, sector, location, brief, and any collaborators. Tags allow users to click through to view similar projects with ease.
Our primary focus here is strong visuals of the project, featuring a full-screen gallery, as well as the ability to embed videos if available. Our written copy is at first hidden, so as not to detract from the visual elements, but can be easily revealed along with more technical renders and ‘before’ shots, where available.
Each project page includes a dedicated testimonial section, helping to build trust and show what real clients think of the work that StudioGötz have completed.
It has been a pleasure working with Ballyhoo over the last few months, creating our new website and brand guidelines. They have been professional and personable throughout, bringing energy, enthusiasm and lots of ideas to the table. They have listened and steered as appropriate, and provided a clear framework for developing the look, mechanics and content of the website. I am delighted with the end product, and how it reinforces the Studiogötz brand. Heart felt thanks to Ballyhoo!
Volker Götz
StudioGötz
Key Features
Logo Watermark
As users scroll through the website, they will notice a logo ‘watermark’ behind certain elements on the page. This reinforces the brand name, in addition to adding interest to the content and breaking up ‘white space’.
Project Galleries
StudioGötz had provided a number of high-quality images for us to make use of on the website. To showcase these, we created a custom gallery block for project pages, allowing users to scroll through the images and visualise the benefits of hiring StudioGötz.
Accreditations
StudioGötz holds a range of accreditations which are important to display on the website, to further build trust with users and prospective clients. Therefore, we created a dedicated space to showcase the accreditation logos on the homepage, choosing to display the logos in a black and white effect to be consistent with other elements on the website design.
Instagram Integration
StudioGötz has an existing presence on Instagram, with a following of over 1,000 users, showcasing visuals from their projects. We integrated their Instagram profile feed onto the website to serve as a snapshot of their latest work, for users to see at a glance. This acts as a trust factor, demonstrating to users that the company are professionals in their field and are reliable.
How Can We Help?
Interested in having a custom built website to increase awareness and conversions for your business? Contact us now on 0121 295 5352 or at [email protected], to discuss your project requirements.
Contact us
Send us a quick message and we’ll get right back to you.