Menu

sjia

Crafting a new brand & responsive portfolio for unique New Zealand architect
sjia – Crafting a new brand & responsive portfolio for unique New Zealand architect // Benek
Date
2017
Client
Studio John Irving Architects
Responsibilities
  • Interactive Art Direction
  • Branding & Identity
  • Print Design
  • UX Design
  • Responsive Web / UI Design
  • Interaction Design
  • Front-end Development
  • jQuery Interaction
  • CMS Development
Website
studiojohnirving.com

John is an unique architect. Young at heart, possessing an unbridled creative passion, and a genuinely cool dude. He runs a small, focused studio on a beautiful rooftop in central Auckland, and his vision for its new identity and website was a timeless, traditional feel balanced with contemporary flair. It was a challenge I was excited to explore right from our first meeting.

sjia – Crafting a new brand & responsive portfolio for unique New Zealand architect // Benek

A strict minimal identity

Our new brand identity for Studio John Irving Architecture was simple – defined by a monochrome colour pallet, a pair of logos (wordmark and initials), a single font pairing, and two unique design patterns that would permeate across web and print: a consistent white frame, and split half pages with blue colour-blocking. This combined to create a flexible system that would adjust well to all extreme variations in media size and orientation.

John Irving

It was a cooperative and genuinely enjoyable process and I am delighted with the identity and website. A big thumbs up from me.

John Irving

sjia – Crafting a new brand & responsive portfolio for unique New Zealand architect // Benek

Responsive patterns

By allowing the blue half page to become transparent or opaque, and its position to be either side-by-side or up-and-down, a very natural and effortless responsive pattern emerges. This allows the hero image to remain close to its native aspect ratio regardless of screen size, shape, or orientation. Images remain optimised as the highlight of each project while interplaying with a unique brand pattern.

Branding and navigation were given multiple states depending on screen width and scroll status, allowing for clever use of sticky logo and links for effortless brand recognition and quick universal access to navigation.

sjia – Crafting a new brand & responsive portfolio for unique New Zealand architect // Benek
John Irving

I enjoy working with Benek. He was available and responsive, he listens well, he is good at running with an idea, and also adept at telling you when something won't work! I appreciated that expertise and honesty.

John Irving

sjia – Crafting a new brand & responsive portfolio for unique New Zealand architect // Benek

Mobile speed & clarity

Mobile was, of course, a high priority. John was adamant that navigation and content hierarchy left no room for confusion on small devices. We pivoted the mobile version of the home page towards greater navigational functionality and finessed the longer content pages into rhythms that read well even when the horizontal variation from larger screens is omitted. Always while maintaining the minimal brand elements of border and colour that make each screen uniquely theirs.

sjia – Crafting a new brand & responsive portfolio for unique New Zealand architect // Benek
sjia – Crafting a new brand & responsive portfolio for unique New Zealand architect // Benek

Rhythm in variation

No architectural project is alike, and so no portfolio page is the same. We built in a number of size, position, and alignment variations which allow John's team to craft each project's unique visual and descriptive story. This variation and alternation creates delightful reading patterns that engage the viewer to explore more. Our highly configured Craft CMS back-end makes adding and editing new projects or news items a breeze.

sjia – Crafting a new brand & responsive portfolio for unique New Zealand architect // Benek

Give that content some love

The simplest content pages were an exercise in minimalism and gave us an opportunity to double-down on some of the SJIA brand's distinguishing features of layout, type, imagery, and bold colour. Even the smallest pages were given the love and attention they deserve to make sure the whole digital experience nourishes the brand. Subtle touches of logo animation and screen transition add to a smooth, polished interactive experience that we hope remains memorable for SJIA's current a future clients and colleagues.

sjia – Crafting a new brand & responsive portfolio for unique New Zealand architect // Benek

It was a pleasure working with John, Olivia, and the rest of their team to develop the strategy and execution of this web portfolio and accompanying brand collateral. We can't wait to see what new and exciting architectural projects they showcase in the years to come.

More Work