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
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!
7 Comments
Very clean, very well organized, creative and a big upgrade from the previous version. As always, excellent work and a nice write-up to boot.
One tiny hitch. In Safari, there’s these weird characters in various spots on the page. Below is a link to a screenshot so you can see what I mean
Wordpress ‘nixed the link. How about this? http://subvert.ca/terasen.png
This seems to be a strange, inconsistent Safari issue. Even with the exact same version of Safari it will display perfectly in some situations and have the strange text on others. The team is working on it though as we want everyone to have a good experience!
Thanks for letting us know :)
Not only the same version of Safari, but even on the same computer. In my account on my Mac at home, the site looks fine, but when I log in as my husband on the same computer, I get the same funny characters as Geof.
Most intriguing! And frustrating…
While it’s good to hear that it’s not just my computer, sorry about exposing this. I know it’s not much fun hunting down odd, inconsistent bugs that may or may not be your fault…
Not a problem — that is what this blog is all about! Mark has a fix for the issue, and it is just going through QA. I’ll post an update when everything is fixed.
All fixed!
Post a Comment