Loader
+VG Architects - Bannan Communications
15860
portfolio_page-template,portfolio_page-template-elementor_header_footer,single,single-portfolio_page,postid-15860,bridge-core-2.0.5,ajax_fade,page_not_loaded,,qode-child-theme-ver-1.0,qode-theme-ver-19.2.1,qode-theme-bridge,qode_header_in_grid,wpb-js-composer js-comp-ver-6.0.5,vc_responsive,elementor-default,elementor-template-full-width,elementor-kit-16083,elementor-page elementor-page-15860

Portfolio highlight • plusvg.com • website overhaul

Readapting the digital magazine

The award winning architects at +VG have been transforming southern Ontario for decades. They are known for their re-adaptive approach: rather than demolish an older building and build anew, the original construction is made a part of a dazzling refresh.

 

Sometimes the bulk of the work happens behind the scenes, such as the case with Toronto’s Old City Hall—an iconic Canadian structure with which +VG has worked on since 1991. They’ve recently retrofitted the heating and cooling systems and are now upgrading elements of the building’s security.

Website parallels: form and function

Stunning aesthetics and sound engineering are core to +VG’s business, so when they came to Bannan Communications with a need for a new website, these elements were top of mind.

 

The vision for the site’s visuals was to replicate the experience of picking up a gorgeous magazine. Glossy, professional, captivating. The problem was, in 2019, high resolution pictures and big bright visuals were pretty par for the course. Any properly curated Instagram page could deliver an eyeful of beautiful photos—+VG risked not being able to stand out.

The former +VG site was minimalistic

Furthermore, the folks at +VG wanted to be able to update their visual homepage showcase without needing to call their developer every time.

 

Our solution was, in a way, readaptive.

The form: Tasteful animation

When you pick up a magazine, there’s a viscerality in holding the pages. A feel to it—the light may play off the sheen, the heft of the paper may impart some figurative weight to the scene, et cetera.

 

To imbue +VG’s homepage with more presence, a medley of code (Javascript, CSS, PHP) was deployed to give every scene a touch of what we called “tasteful animation.” There’s a light Ken Burns effect, and the text fades a slides into view as a box—inspired by +VG’s logo—draws itself around the headline.

The speed, softness and timing of these elements were fine tuned to be obvious enough to capture the eye but subtle enough not to distract from the key messages.

The function: Customized back-end control

We’ve been noticing that there’s a strong need to match the technical users’ skills to what you produce — Rick McLaughlin

Equally as important: we built the ability for our client to edit, add or delete content from this animated slider. A ton of up front work means that this gorgeous effect can be transferred onto any photo and headline within reasonable limits. Further, we ensured that the animation was coded so that the text and image metadata could still be picked up by search engine optimization (SEO) bots.

 

This behind the scenes engineering, much like +VG’s less visible work at Toronto’s Old City Hall, is a critical counterpart to the public-facing aspects of the design.

 

“We’ve been noticing that there’s a strong need to match the technical users’ skills to what you produce,” says Rick McLaughlin, Bannan’s Creative Director. “It can be a simple user interface or not, depending on who’s using it!”

The results

We have received many compliments on our new site, and more importantly, have gained several new clients who contacted us through the forms on our Contact page — Nicole Konrad, +VG’s Director of Marketing and Associate Partner

Of course, business impact is always the end goal. A dazzling website can risk being labelled as wasteful aesthetic if there’s no meaningful path to a strong business objective, such as awareness, leads or revenue. 

 

+VG’s site navigation makes it easy to find their lead generation form, allowing the strong first impression from the homepage to play a role in guiding prospects into the sales cycle.

 

“Our website was not representative of the growth of our firm or the caliber of projects we were now undertaking,” says Nicole Konrad, +VG’s Director of Marketing and Associate Partner. “Vanja and Rick came in and helped educate the management team on the importance of a well-designed website. We have received many compliments on our new site, and more importantly, have gained several new clients who contacted us through the forms on our Contact page.”