New work
Just added some new web work completed through a firm I’m working for in Vancouver. On these projects I’ve had a chance to put some of my usability and design thinking forward. Check out the new work here >
Photography services
We believe great photography is a necessary component of any great marketing campaign. There’s no better method of putting a face to your event than documenting real live social interaction with captivating images. We apply our studio’s functional approach to design to our photography practice, which means capturing focused, journalistic pictures of real people and live events. Check out our live events portfolio for selected work.
We’ve been busy
Between real estate marketing efforts and new brands in the communications and non-profit sector, Offbeat’s had a busy spring season so far. Check out the latest projects:
Websites
 |
Revelstoke Premium Properties website revamp » Leveraging the flexibility of the Ubertor Content Management System, Offbeat consulted this real estate agency to get the most out of their website with a top to bottom revamp. |
 |
Vineyard Collection website revamp » The Okanagan Group’s Vineyard Collection offers premium properties in sought-after BC wine country. In anticipation of a hot summer season, Offbeat provided a site refresh focused on the lifestyle aspect of the properties, and a corresponding newsletter design. |
Brands
 |
Starbott Commmunications » Starbott Communications is a Vancouver-based company specializing in technical writing for the professional industry. Offbeat worked directly with the principles to come up with a brand that balanced playfulness with business. |
 |
Ending Violence Association of BC » Coming from a recent name change, EVA BC needed a new brand identity to cement their newly established identity. With a highly collaborative effort, involving communications staff and directors, Offbeat guided the logo development process and designed the resulting mark. To impart a humanistic element, a subtle face profile was worked into the graphic |
Real Estate Website + CMS
Ubertor offers a good package for realtors and designers alike when it comes to developing a customizable website. I’ve had the chance to work on a few here and there, including refreshing one recently for Carl Rankin of Sotheby’s International Realty Canada. It was mentioned on Ubertor’s own blog, check it out here: Beautiful Realtor Website Design
Sketchbook entry :: Leigh type process
This is some type process for a face called Leigh. The original intent was for a Jewish Holocaust center poster. I was attempting to communicate a calligraphic type rendering, referencing a carefully done hand-drawn aspect, with subtle reference to Hebrew letterforms. Latin type serifs were added to create a bristly tenacity. My process involves a fair bit of hand sketching, following up with individual letter refinement, then testing out groups of letters using random words. The serif face became the starting point for a sans-serif version.
A case for kerning
What exactly did the Canadian border guards find strange about the cocaine-filled tombstone for Albert Thomas, deceased Scottish pensioner, attempting to pass through customs? Something they just couldn’t put their finger on, just a ‘funny feeling’ that this gravestone marker wasn’t legit. Was it the curious use of palm trees in the motif? Or was it the choice of Arial bold, the most pedestrian, default font available, designed for on screen use, therefore highly inappropriate for an epitaph? Or was it the completely random letterspacing underneath the name? Just look how jammed the “NDF” of grandfather looks. This whole passage of text looks to be generated by a shopping mall trophy kiosk. If you’re going to smuggle something inside a fake object with type on it, get it done properly. While the average joe can’t tell you why something is wrong with a piece of typography, he’ll definitely have a funny feeling that something is very, very wrong. And you’ll get caught, like our smuggler, or this guy, or even this guy. RIP, Albert.
New site
For those of you who’ve been here before, you probably noticed it’s a complete redesign. If it’s your first time here, we’ve made our site more accessible and added a lot more relevant content, including a blog section which helps illustrate different facets of our approach. Enjoy.
MG Chemicals | The Science of Branding
This is the first in series of brand development case studies I’ll be posting.
MG Chemicals is a distributor of chemicals and accessories for the electronics market and a long time client of offbeat studios. Their best selling products include cleaners for electronics and circuit-board prototyping kits. MG is boutique-sized in industry of large and competitive distributors.
Considering its market base ranges from hobbyists to massive chains, MG has a refreshingly personal approach to contacting its customers through a tightly-nit social network. And ultimately, that is what keeps the company growing steadily every year.
Offbeat relished the opportunity. This is an ideal situation to leverage the power of communication design. The ultimate goal was to bring consistency and professionalism to a company that was well respected in Canada and abroad. Seven years, three catalogs, a massive website, and umpteen collateral pieces later, MG can soundly say they look as big and powerful as companies ten times their size.
One of the first orders of business – encapsulate the brand. MG products clean circuit boards. Exploring this core fact led to a single image which represents the company’s function and approach.
Liquid on a circuitboard is an incongruency – water and electricity don’t mix. But when it comes to cleaning electronics, this image sums it up. The close cropped macro image is a way of showing MG’s attention to detail when it comes to customer relations. They are willing to speak to a small mom-and-pop distributor as much as a corporate giant.
The next step was establishing external communications. Shying away from big-box style splash, we concentrated on the functional qualities of the product line. The challenge of working on chemical packaging as a designer is that much of your visual space is taken up by mandatory safety and standards info. Additionally, within Canada, the use of two languages further limits your ability to express the brand. Rather than fight these realities, we worked with them. We used columns and compact type on cylindrical products to reduce turning and improve readability. Scientific standards symbols became refreshing texture among paragraphs of safety instructions. Instead of relying on geometric / photographic design elements, colour and type became the brand. This did create a bit of genericness, but for the audience, this was perfect. No frills or gimmicks, just quality products clearly labeled.
Typeface
When it came to typeface selection, MG needed something that was highly legible in multiple sizes. Enter journeyman Trade Gothic. Scientific clarity, albeit with subtle tweaks that add personality, in addition to fantastic bolds and compacts ultimately led to its selection. It was deployed on print and web media and rose to the challenges of both headlines and micro-sized body text.
Working with the existing logo
MG’s logo was probably the most established existing piece of branding. At first, the horizontal lines of the internally-designed logo seemed arbitrary. Ultimately, offbeat helped infuse meaning into these parallel bands by equating them with lines on an electrical circuit board.
Colour
The colours were gradually brought into a two-tier colouring system – one colour to indicate product category, and a second to differentiate individual products. This was almost a necessity as most of MG’s products are essentially clear liquids. The over-arching colour code is delineated clearly on the inside page of MG’s product catalogs.
Website
MG realized that to gain leverage on massive competitors, the web would be a playing field that they would need to dominate. With continually updated and relevant information, and a clear organization of content, Google loves MG’s site. Product keywords are consistently above competitors in search results, and the pageviews grew at an astoundingly steady rate.
Offbeat implemented a reverse hierarchy for navigating the large product offering. This kept the contextual information more readily at hand and helped better sell products in conjunction with each other.
In addition to a building a website with highly refined SEO, offbeat dug deep into the analytics to determine the source of referring links. The exploration of this content led to forum entries and blogs which revealed startling new applications of products that MG had not previously considered. These revelations became starting points for a few initiatives, one of them being the MG Insider e-newsletter.
Email communications
To compliment a phone-based social network, offbeat developed a newsletter for close customers that kept them up to date on new products, events, white papers, and application guides. Rather than trying to directly sell products, the MG Insider provides helpful information on things like selecting a cleaner, or correctly using a prototyping kit. The hobbyist applications found in forums spawned a collection of how-to guides for specific tasks. To add personality to the brand, a “Did you know?” section showcased interesting uses of products. Here’s one: using the Super Cold spray to remove chewing gum from the bottom of student desks.
Opportunities developed from the long term relationship between MG and offbeat studios. MG tapped into new methods of social networking, a clearer sense identity, and perhaps the addition of content-based personality to its brand. Offbeat gained a wealth of experience in the sector, in addition to establishing some great friends in the process.
Finishing websites – How to complete that last 10%
This trend has become all to common. A small company hires a freelancer to create their website, only to stall at 90% complete because the designer is unwilling to do some small changes that would complete the project. This may happen 3 or 4 times consecutively as the client works with different designers, leaving jaded clients and disgruntled web designers in its wake.
The issue may be that designers prefer to work on graphical elements and consider these small text changes negligible. Even if some design guidelines have been developed by a previous iteration of a website, they prefer to start from scratch as a proof of their own design process. This only delays the completion of the site even further. Additionally, the last 10% of a website is often minor changes such as pixel-adjustments and copy changes.
Designers often consider copy editing outside of their scope of work and therefore don’t give it due attention. They feel their pride may be hurt that they are stooping below their expertise level. What I believe is happening here is that they may forget the form- part of the form-function equation. If the website is not done, it’s not functioning, for the client and their market.
This also brings some thoughts on how to improve the process.
Firstly, manage expectations. As a designer (and project manager) you need to be diligent about getting the client to be clear about what they want. Have them sign off on a fairly detailed scope definition early in the process. A lot of things are possible on the web now design-wise, and smart clients know that nearly any crazy idea can be brought to life. It’s important that they know how many hours it can take to develop the fancier elements.
Secondly, work with a Content Management System. These have been around for a while, but until recently they have been too feature rich to be accessible to the typical graphic/web designer. Check out off the shelf solutions such as Smallbox, or as another option, repurpose a blog engine such as Wordpress which has a nice back end and lots of plugins available. Benefits are basically two fold – Not only are the administrative and editing duties transferred to the client, the web designer can concentrate on what they do best. Most CMSs allow fairly fine tuned control of content posting, so if as a designer, you cringe at bold-italics, you can omit this functionality from client-driven content. The key in choosing a CMS is scaling it correctly to the job. You wouldn’t use Joomla for a mom and pop bakery site, and you wouldn’t necessarily use Wordpress to run an online store. If the CMS is scaled correctly, the client is happy, and the designer is happy.
A website is an ever-changing entity and it can be argued that a website is never done. This lies in the fact that a website is a shell until quality content has been added. If budget allows, work with a writer, or encourage your client to do so. If you are getting quality text content, and it’s organized well, Google, and your readers, will love you.
Logo design and branding thoughts
A logo is a chance to encapsulate your core ideals and communicate them with the public. As the keystone of brand identity, it helps strengthen and differentiate your organization in the outside world. The power of a brand internally is significant as well. If developed with the right mindset, a brand can help galvanize and motivate the members of an organization, make ideals more concrete, and instill pride and professionalism.
Designers often see logos as a way of promoting their own style or to capture the essence of the times. I prefer to steer away from these approaches and look at the existing qualities of the organization and its place in the world. As such, I foster a cooperative effort in developing the logo, from concept to completion. This may include collective brainstorming sessions to explore where the brand can be taken.
Once the design process is complete, it’s important to provide a set of logos designed for various mediums and applications, such as collateral and external communications in print and digital formats. Additionally a brand standards booklet should be provided to encourage the consistency, aesthetic quality, and longevity of the brand.