Back in the winter I worked with Vancouver Drupal developer Affinity Bridge Consulting Ltd. to redesign their identity and home page.

Affinity Bridge’s original logo employed the symbol of a bridge and while the company’s philosophy is very much in keeping with the idea of bridges and bridging, they weren’t sure if they felt tied to the literal iconography and were interested in explorations of more abstract iconography for their new logo mark. For the first couple of rounds I focused on aspects of the company’s personality: environmentally and social conscious and playful, with a friendly and social company culture. I worked with ideas of connection and affinity and steered away from the original blue/green colour palette into more juicy and less typical “green” colour options.  For the first rounds of design, bridging and connection was implied without the use of an actual bridge icon.

icon exploration  | focus: connection, affinity, social interaction

.

After the company assessed the logo options and discussed their identity internally, the team members decided that the bridge motif was of great importance to their identity and so we moved back to the bridge icon as a major element of the new logo mark. In the words of Ariane Khachatourians, Affinity Bridge’s Agile Project Manager:

Affinity Bridge has always tied itself to the imagery of bridges. We had to ask ourselves if that was something that still spoke to us, and that we felt still spoke to the people and organizations we work with.

We tried some other ideas on for size, experimenting with totally bridge-free logo designs, visuals that were less literal, more abstract, and some nature-inspired ideas. When it came down to it, none of them felt quite right. What is it that we do, overall, as a company? We bridge. No escaping it.

bridge icon exploration | focus: bridge/bridging

.

final icon development

.

The chosen design loosely references Vancouver’s iconic Lions Gate Bridge. In the final round, I broke the icon out of the rectangle for a more contemporary feel, and to take advantage of interesting negative space, bleeds and crops in the business card and website applications. As well, I increased the solidity of the bridge and its readability at reduced sizes. The moon element was removed and reserved for a more illustrative use in the website design. The colour palette shifted from earlier juicy colours to more subtle hues of grey and blue, retaining orange as a secondary colour.

business card application

.

The homepage design process involved a complete restructuring of content, development of new section titling and the addition of header and footer illustrations. Priority was given to the Affinity Bridge manifesto and blog excerpts, emphasising the company’s focus of community building and information sharing. Further down the page, a horizontal scrolling field showcases feature projects. Using the homepage as a template, Affinity Bridge applied the look and feel to the rest of their site.

.

The location of Vancouver is important to Affinity Bridge and the header and footer illustrations emphasise that. The header illustration is the view of the city and the north shore mountains as seen from Kits Beach. The appearance of The Lions was a special request, and I found a nice view of them, framed by the mountains of North and West Vancouver, from a slope in North Burnaby. When I took a closer look at the reference photo I shot, I noticed the new Grouse Mountain wind turbine was visible so I included that in the illustration as well.

Grouse Mountain wind turbine

The illustrations were built to allow the Affinity Bridge crew to employ some jParallax magic – if you visit the Affinity Bridge site and mouse over the header and footer illustration the perspective will shift. Additionally, if you are curious as to what phase the moon is in tonight, it’s represented in the illustration:

I found an algorithm that would calculate the phase of the moon based on the current date, translated it into PHP, and added it as a function in template.php, moon_phase(), which returns an integer from 0 to 29. The integer represents the “age” of the moon in days, with 0 meaning “new moon”, 15 “full moon”, 23 “waning half moon”, and 29 “almost new moon again with just a tiny sliver of moon still illuminated”. So on a day when there is a waxing gibbous moon leering through the clouds above us, this function will return approximately 11. You get the idea.

~Zoë, Agile Developer

Finally, they gave a little spin to the Grouse Mountain turbine in the footer illustration.

More project images in my portfolio here: Affinity Bridge illustration and Affinity Bridge logo, website and business card design.