Gresham St. Paul’s

Spring 2019

  • CSS3
  • HTML5
  • JavaScript
  • Jekyll

For my first project with dn&co I was tasked with building a responsive microsite to showcase Gresham St Paul’s, a commercial real estate development in the heart of the City of London. Packed with vibrant photography, renders and illustrations, the site presents the particulars of the development and its surroundings via various neat interactive elements.

The client didn’t require a CMS for this project, so I used Jekyll to generate static output from a set of templates and data files containing the site’s content. This simplicity allows the site to be hosted from an Amazon S3 bucket behind CloudFront.

The site homepage makes use of Airbnb’s Lottie library to provide controllable playback of an AfterEffects animation as the user’s cursor moves across the viewport.

Browser bar illustration
Laptop illustration
Desktop view of the Building template, which shows the various features and specifications of the development

Hey!
This preview is scrollable!

Desktop view of the Building template, which shows the various features and specifications of the development

The nature of the content and info being presented called for a thoughtful approach to display on mobile devices – most components adjust their spacing and layout to fit narrower screens, but some have distinct mobile-only alternatives.

The site was required to be responsive with the proportions and layout of type being preserved across different devices and browser dimensions, so I used a combination of vw and rem units to provide fluid, proportional type at all display sizes.

I also made extensive use of CSS Grid to provide sensible layout control both for the macro-level site layout and arrangement within individual components.

Mobile device illustration
Mobile view of the Location template, which shows the context of the development and local places of interest

Hey!
This preview is scrollable!

Mobile view of the Location template, which shows the context of the development and local places of interest

To display schematics for each floor along with vital statistics and contextual imagery, the design called for an interactive floorplan explorer which would reveal these various layers of content through an intuitive interface.

Browser bar illustration

Interactive floorplan explorer component with POI images on each floor

The client also wanted to present 360º architectural renders of various spaces within the building, so I wrote a component wrapping the excellent Pannellum library which allows mouse, keyboard and touch navigation of panoramas built from a cube of six images.

Browser bar illustration

The panorama viewer component shows 360º views of various locations within the development

The project began an ongoing relationship with dn&co which continues to produce awesome collaborations, and was an excellent development challenge and a great fit for the Jekyll workflow. I learned several useful new techniques during the course of my work and I think the end result really helps bring the building to life.