sjia
Crafting a new brand & responsive portfolio for unique New Zealand architect
- 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.
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.
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
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.
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
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.
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.
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.
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.
