Terasen Gas Homepage

It has been an exciting couple of days here, as we just launched the new Terasen Gas website. As with most design projects, there were a lot of challenges: a complex information architecture (IA), detailed corporate graphic standards, and a large collaborative team (read: a large team to approve the design!)

Links, links everywhere

Terasen Gas Homepage Wireframe

Check out the homepage wireframe! It has an enormous number of links, a lot of content, and many highlighted items. One of Terasen's goals was to provide a more intuitive architecture, and Barbara did an amazing job of sifting popular tasks to the surface, so visitors can quickly find what they need. The result was a really full page that created an enormous design challenge. How does a designer find clarity in this while heeding to standards and many, many voices? Thankfully, being flexible isn't something I only practice in yoga, and being strong (willed) also comes in handy from time to time. ;)

Drawing it all together

Terasen's graphic standards include a well-developed palette, smooth fonts, and warm themes. The challenge was taking these carefully designed print elements and developing closely related web elements. The web is an electric, illuminated medium, capable of depth and movement, more like a distant cousin to print than a sibling. I took advantage of shadows and gradients, to add highlight and depth, without cluttering the white space. I used jewel-like tones to emphasize areas of change and action. I strove for readable, elegant typography — which was difficult! In a content management system, you can't really see the site until most of the pages are built. It was only two days ago that I could conduct the final tweaks on spacing and sizing. It's a similar process to illustration — I always put in the finest, darkest details right at the end.

Icing on the cake

If you haven't seen it, the tool tip we built for the region selector on the home page is very sweet. Clear your cookies, or you'll only get to see it once. It was an important creative and strategic element that required a deft solution, both in design and development. After a few short months of work, it's all over 'cept the party!