Image for Bespoke design and development for ET Architect
  • Client: ET Architect, Exeter
  • Industry: Architecture
  • Design: Anthony Vickery-Hartnell, Web Assembler
  • Development and Implementation: Anthony Vickery-Hartnell, Web Assembler
  • Launch Date: June 2024

Erica Thompson, a sole practitioner for Architectural firm ET Architect reached out to me to provide a custom website to replace a Wix site. The project goals were very similar to my work for PMR Architecture in that the old site wasn’t showing off the quality and value of the work.

The project needed some bespoke design work to create layouts for the new pages and decide on fonts. It was a clean slate to design from as the original site didn’t do much for the overall brand. At first, I ran a workshop session to uncover business goals and then collaborated on a design that worked best for my client. Primarily the new website goal was to showcase projects in an elegant way, making use of white space and a minimalist colour palette.

The sitemap was created next to define the main pages and basic navigation. I used sketch to draw up some wireframes and once these were signed off, I created the full, high-fidelity designs for each of the pages. This went through a few iterations before we decided on a layout that worked best for each content piece.

Creation of wireframes in Sketch App

Addition of images, colour and fonts

Challenges and Outcomes

We knew we wanted a gallery layout, masonry style for the individual project templates. Project galleries could contain 1 or 100 images and I wanted this to be as simple as possible from an editing experience while creating a repeatable pattern layout. I designed a repeating pattern in sketch that would loop after a set number of images:

Repeating image template

This resulted in me creating 3 custom image sizes, which get applied and displayed dynamically no matter what order the images are in. My client simply needs to re-order the images in a way that looks best, and the code will do all the heavy-lifting.

Images can be added/re-ordered with the ACF Gallery field.
How images appear on the website

I always try to want to make the editing experience as seamless as possible and this was a good example of that.

From a more technical point of view, the entire website uses the native Gutenberg editor to benefit from usability enhancements and performance. Through continued research in Gutenberg development, I learned how to set specific blocks when creating a new page or project. This resulted in less training for my client, as they just needed to create a new post/page and the blocks would automatically be inserted. I was able to load just the javascript, CSS and custom fields per block on the pages, resulting in a lightning fast website and optimised editing experience.

In the example image below, the project custom post type has been auto-populated with a mix of native and custom blocks; Cover, Project Details, Project Gallery, and Project Call to Action. As the blocks are built using the InnerBlocks technology, many of the settings are pre-filled with placeholder text, allowing the client to update the text and images simple and clearly.

This means that for every post, project and page, the experience is unified and easy to understand and the the client is really happy with the end result.

Ready to discuss your next project?

Please fill out my contact form if you have an idea for a project or need help with your current website.

Alternatively you can call me on 07857925860

Contact Anthony