I’m basically a print designer, and even though I have done web design I worried that they would be “talking in code” and I’d be lost. I was pleasantly surprised—the presenters who showed some code did it in a way that I could understand. Even Eric Meyer’s chat on “CSS for evil” was presented in a way that made sense to the print designers like me!

Monday morning started with AEA founder Jeffrey Zeldman giving a history of Emoticons. From the simple smiley face to winking emoticons with hats and mustaches to the difference between eastern and western styles, we were impressed with Zelman’s vast knowledge.

Just joking :)

Seriously, you know that the next two days are going to be great when you hear things like “Beautiful no longer means flash-based.” Zeldman’s passionate opening on the history of the web—Web 2.0—set the tone of the conference. He kicked off AEA by showing inventions from history that led to the web, and showing why we stand at the dawn of a newer and more mature web powered by standards.

Following Zeldman, we heard from Sarah Parmenter on Crafting the User Experience. She discussed principles from human psychology, such as speed, simplicity, surprise, social behavior and stirring emotions, and she gave practical advice for using psychology when thinking about web design and user experience.

Rounding out the morning was Jason Santa Maria’s session On Web Typography. He began by talking about what makes a good web typeface and major typography considerations, such as dimensions, special features, prolonged reading and internationalization. “Good typography is invisible. Don’t make me think about reading, just let me read!” Then he talked about the advances and choices we now have with web fonts. Even though those advances are exciting, he cautioned, we still have to use good design and web standards.

The afternoon started with Scott Berkun talking about Why Designers Fail and What to Do About It. He gave us his thoughts on how we’d never learn and move forward without failure. He said all designers fail 95% of the time, but design suffers from a lack of failure analysis—how to look at the reasons we fail and what to do about it.

One of my favourite sessions was A Content Strategy Roadmap with Kristina Halvorson. She provided valuable insights into how we spend a lot of time on strategy, wireframes and design before obtaining content for our websites. Content often comes last, when it should come first. The bottomline: “Start designing from the content out, rather that the canvas in,” she said.

Finishing off the day was Luke Wroblewski, whose presentation Mobile Web Design Moves left me eager for his full-day mobile web design course. It was exciting to hear about the huge growth in mobile usage, the immense possibilities of mobile web design and how we need to think differently when designing for mobile devices.

Day two started off with Eric Meyer and his talk The CSS3 Anarchists’ Cookbook. Basically, he gave us tips and tricks on how to use CSS for “evil”—how to mess with your co-workers by changing up code in their browser’s user stylesheets. I was a little scared of this talk, but whenever Eric showed the code he showed examples of what it did so it made sense. It was a cheeky way to show the new tools in HTML5 and CSS3.

Jeremy Keith followed with a discussion of Design Principles. He talked about how your principles and design should match, and how this will help you reach your goals—“The more you can boil down your design principles, the better.” Aarron Walter then did a presentation titled Idea to Interface. It was great to learn how those iPhone apps you have in your mind would translate from just an idea into actuality. He said you need to give yourself permission to be the person with the idea, and he outlined how you would carry it through.

The afternoon continued with Andy Clarke and his presentation Smoke Gets in Your Eyes about CSS3 web animation. We learned about the latest CSS animation techniques, and he showed some entertaining videos, such as the Flash vs. Web rap battle.

Alexa Andrzejewski, the founder of Foodspotting, followed with an intriguing presention The Dimensions of a Good Experience. She talked about evaluating experiences using 10 principles from urban planning, and how these same qualities could be applied to digital experiences—“Design influences our experience of the world.” It was the process that led her to create the Foodspotting app.

Finishing off day two was the humourous and incredibly passionate Tom Coates talking about Everything the Network Touches. He reminded us all about how exciting and powerful the web is and how the network is not only extending to people but to objects and places. His final thought: “I am going to say something controversial: I don’t think we should have web standards. It’s only with the ability to explore and not be bound by rules and regulations that we going to create and discover new realms.”

With our minds on overload from these two days we headed into day three, Mobile Web Design with Luke Wroblewski. Again, I had no reason to worry that we’d be doing something super techincal. It was all digestible information. Talking to a crowd of 300, Luke did a great job of getting us to interact with him and each other. He started by asking the audience what we’d like to learn. We also did a few interactive projects by sharing in small groups. Throughout the day, Luke took us through the major considerations when designing for mobile: what the constraints are, stats on usage, what behaviours drive the use of mobile devices and how they are used.

AEA, you know how to throw a conference: 12 exceptionally fantastic speakers, a live Twitter feed, three parties and a soundtrack! If you’re looking to attend a fun web design conference that runs seamlessly with loads of exciting and passionate people, check out An Event Apart. Having attended many design conferences I found AEA to be among one of the best experiences I’ve had. I went from not knowing anything about this conference to coming back with practical experience and tools ready to be put to use in our office.

Further reading:
A List Apart
World Wide Web Consortium
Luke Wroblewski’s Notes on AEA Presentations

WHERE

BC’s Education Quality Assurance (BCEQA) Designation is Canada’s first and only provincial brand of quality for post-secondary education, and the British Columbia Council for International Education (BCCIE) is the nationally and globally recognized professional organization that promotes and supports all aspects of international education within BC and abroad. Together these two sites are meant to position BC as a world leader in education.

IDEAS

International education is a vital component of the BC fabric, both culturally and economically. BCCIE is the champion and ‘home base’ for international educators and practitioners. The goal was to capture the energy, creative talent, diversity and forward-thinking qualities of the professionals and industry in BC, and create a cohesive and better organized, designed and equipped online presence. This drove a complete, ground-up re-conception and rebuilding of the existing BCCIE website, and a site for BCEQA which had never been represented online.

Meant to work in tandem, these Drupal-based CMS sites needed to present information to a diverse group of constituents from post-secondary administrators and government through to potential foreign students and their parents.

WORK

Using vibrant colours and presenting content on the homepages in a simple and graphic context has made these content-deep sites more accessible to all. The added functionality and ease of administration and content management by the client has breathed new life into the sites, of critical importance since this is the first and main touchpoint for most targets, especially international ones considering BC for their own or children’s education.

Launch websites: www.bceqa.ca or www.bccie.bc.ca

Drupal development by Bayleaf Software

WHERE

It’s a fact that there are not enough young workers to replace retiring baby boomers. As a result a labour shortage in Canada is looming. Without skilled immigrant labour, our economy can’t grow. So, how do businesses find, hire and train immigrant staff? This is where the new IEC-BC website 
comes in.

IDEAS

Aimed primarily at British Columbia companies and the people responsible for hiring, as well as employment service providers, IEC-BC wanted to address the question, “Where am I going to find my next employee?”. The website presents the answers to this question by way of the reasons for, and benefits of, hiring immigrant labour talent. It’s as much a single-stop, high quality resource for businesses as it is an online tool to help find and qualify potential hires.

To distinguish themselves from other offerings, content is created and curated into a comprehensive and simple to access site organized by the key things users want to know and do, and features case studies and current news. Unlike other dry, complex and dense sites that appear, to put it diplomatically, bureaucratic, the IEC-BC user experience is about complete, credible and extremely high quality content.

WORK

The site recently launched in November 2010 with over 60 employers signed up pre-launch. Initial comments confirm this is the best and easiest site of this type ever produced, a good indication that once critical mass of employers and employees is achieved, tapintotalent.ca will become the defacto resource it is intended to be. The site was also recently featured as a case study in Surrey Board of Trade and cited as an example of Best Practice by the World Economic Forum.

Launch website: tapintotalent.ca

WHERE

RJC Consulting Engineers (Read Jones Christoffersen) is one of Canada’s leading engineering firms specializing in Structural Engineering, Glass & Facades, Restoration, Building Science & Parking Planning. RJC’s previous website was outdated, difficult to navigate, producing ineffective search results and traffic, and was not working well to express their brand message online or attract new clients or applicants.

They came to us to help turn their website from something geared more to documenting their past to one that portrays their future. This meant a website that would make them stand out from their competitors while emphasizing their national scope and many years of experience, while simultaneously presenting a friendly, inviting user experience. Challenges of this site included the various target audiences and numerous contributors to the site across the country.

IDEAS

We employed an up-front discovery and information architecture process that included interviews with various members of their target audiences and a thorough competitive analysis. The new site design brings life to the existing brand, and together with new content and compelling questions to introduce featured projects, delivers on the promise of the firm’s tag line, “Innovative thinking. Practical Results.”. With multiple layers of information and five specific paths of navigational entry, users are able to easily explore and quickly access the dynamic content. The site is hosted on a Drupal content management system so numerous administrators can easily update the site.

WORK

Immediately after launch and initial industry promotion, site traffic began to climb well past previous levels and initial feedback from their clients is extraordinarily positive. Many have commented that it is perhaps the best engineering website in Canada, and internally, this has energized the entire firm.

“This project was a complete success and Industrial Brand was THE best fit for us. Our site is now an interactive journey that promotes RJC as industry leaders and celebrates our people, our partnerships, our projects and our six decades of engineering innovations. Not only has design, taxonomy and functionality improved, but restructured site features such as the intuitive, time-saving web form application are simply brilliant.” - Patricia Glass, Marketing Specialist, RJC Consulting Engineers

Launch website: www.rjc.ca

Big news in the web world as Typekit was launched last week. For those of you who missed news of the launch, it serves to bridge the copyright issues associated with the CSS3 Property @font-face (hotly debated issue among foundries and developers recently). Solutions like sIRF and Cufon have greatly pushed the industry in this direction and, while we have used them on projects, they have limitations, particularly when it comes to body copy. The hole with @font-face is that it makes it possible for the end user to download the font in question, which in virtually every instance violates the license.

The concept behind Typekit harnesses @font-face but protects the font files on a separate server. The designer/developer/client would purchase a license (per site? per month?) to use the font. With an expected to launch sometime this summer, the major draw back seems to be the issues surrounding the storage of the font information on a different server from the website. (required to satisfy DRM licenses) The anticipated problem with this surrounds the issues associated with the uptime (and downtime) of this font server. No server is up 100% of the time, it just doesn’t happen. But what happens when this server goes down? Potentially all websites linking to this central database will lose their font definitions.

Sharing code snippits on a central server hasn’t presented a prohibitive problem in the past as the jQuery library, CSS Resets and other snippits are all available hosted on a central server and used on major sites world wide and downtime hasn’t presented itself as a problem. Although we might be comparing apples and oranges between Google’s servers and Typekits. Time will tell. Certain some exciting developments for sure!

One great thing about what we do as brand and interactive designers is the variety of clients and projects we get to work on, each very different needs, goals, and audiences. One day it’s a brand and collateral aimed at investors or a website for a Japanese bistro, the next it’s a complicated website for a large engineering firm. Enter Chatwin Engineering.

With over 25 years as a leading engineering and planning firm in BC, Chatwin hired Industrial Brand to completely revamp its online presence to more accurately reflect who they are as a company. Their old website had become dated, cluttered, and ineffective. The outdated technology was cumbersome and the content wan’t easily updatable. It was time for a fresh start.

After engaging our discovery process, which looks past assumptions and digs deeper into the real situation and goals, we determined that they required a site they could easily manage themselves for use not only as a marketing tool, but for recruitment and communications too. So we developed a project plan that included the creation of a CMS-driven site (in this case Drupal) with an aesthetic emphasis on simplicity, intuitive information access, and messaging that better told the story of the Chatwin brand to their unique audience.

Considering their audiences’ needs and what it is that a multi-disciplinary engineering and planning firm does, it was also important to use the site to emphasize their work. We created a modern, clean portfolio system separated by their three main areas of expertise—civil, building, and environmental—with a gallery of rotating images and case studies of their highlighted projects.

Engineers do love to produce lots of words and data, so by our launch date, the site was populated with copious amounts of information and contiues to grow. Thankfully our well-considered information architecture and site structure, which included a powerful serach tool, multi-functional footer and intuitive navigation system, a user can access any of the content with two mouse clicks.

Our entire team deserves congratulations, Steve Mynett in particular, who worked very hard with our developers on this project to see it through to a successful launch. Now that it’s complete, the Chatwin Engineering website appears simple to me, betraying all the work that went into it’s design. I think most websites that use smart interaction design thinking to organize and present complicated concepts and content fall into this category. Engineers can be a picky bunch, but in this case were terrific to collaborate with and work for, and they are thrilled with the new online presence and interactive tools we created for them.

Check out the new Chatwin Engineering website and tell us what you think!

WHERE

Chatwin Engineering is one of BC’s most respected and successful engineering and planning companies, with offices across Vancouver Island and in Vancouver. A multi-disciplined organization, Chatwin provides expert surveying, assessment, planning, design, construction and project management for various clients in both the public and private sectors. Although the company had grown and matured over its 25 year history, Chatwin’s website had become dated, cluttered, and ineffective, and their online presence was no longer an accurate reflection of who they were.

IDEAS

Chatwin Engineering required an intuitive, easy-to-use website that better reflected the company’s brand, mission and services that it could use as an effective marketing, recruitment, and communications tool. We began by engaging our discovery process to define the true nature of the client’s needs as well as the needs and priorities of their primary audiences.

As we considered aesthetic options for the project, it became clear that a modern, clean layout with large imagery to highlight their work was a priority. In terms of structure, their audience had practical but clear information needs, so navigation unfettered by visual clutter or web gimmickry was crucial. To ensure that the Chatwin brand story was part of user experience, we decided to include key message as call-outs throughout the site to provide insight for visitors curious about the Chatwin story.

WORK

As Chatwin specializes in three areas of engineering—civil, building, and environmental—we used these to guide the primary structure of the website. A portfolio that prominently showcases project case studies with descriptions complemented by a rotating gallery of photos, including an option to enlarge images for a closer look highlights Chatwin’s engineers, scientists, technologists, and staff and their use of the most up-to-date equipment and methods, and passion for meeting client needs,

The design was planned to make most content accessible within two mouse clicks, and with copious amounts of frequently changing information required, we utilized Drupal to create a powerful content management system. This CMS not only allows our client to easily update content themselves, but is fast, safe, and secure. Another usability aid was the inclusion of powerful search functionality as well as a large footer which provides quick links and contact info within the site.

By all measures, the recently launched site is a success, with a positive reception by staff and clients, and increasing web traffic, inbound clicks and requests are now easily being tracked by the built-in stats system we included.

Launch website: chatwinengineering.com

WHERE

Restaurant websites are either really good or really bad. Most rely on a representation of the menu and some photos to capture the essence of the dining experience. The bad ones usually also have some kind of thumping soundtrack better suited to a dance club than somewhere trying to promote good food.

Hapa Izakaya’s existing website was somewhere in between, and in the face in increasing izakaya style dining in Vancouver, not to mention competition for diners in general, needed to do something. In fact, the site belied how unique and incredible the entire experience of dining there is, starting from the unadorned black entrance door.

IDEAS

Hapa Izakaya is a traditional izakaya, a sort of action-packed Japanese bistro/pub serving fancy martinis along with warm home style Japanese food – not the standard sushi fare.

Hapa Izakaya, literally meaning “leaf bistro” is the kind of place that you only know about if you’ve been fortunate enough to have been told by someone “in the know.” Guests there enjoy sharing the hot tapas-style dishes, cool salads and ice cold sake served in bamboo cups.

We quickly dismissed the traditional wood block, Japanese, hand-made paper style aesthetic, plus we knew from our own experiences at both locations that we had to capture the fusion of izakaya with the urban contemporary environment of Hapa. We also had to create a site that would be easy for the client to keep up to date and would rank well with search engines so no run of the mill Flash site for this restaurant!

WORK

The result is a site that remains current and accurately mirrors the experience of walking into Hapa Izakaya, from the dark background (remember that black front door) to the greeting by the chefs and delicious treats that await inside We highly recommend the negitoro, mackeral, ebi mayo, garlic squid and tofu-cheese. Yum. Oh, and when you’re there, buy the kitchen a beer—it’s fun to watch.

Launch website: www.hapaizakaya.com

WHERE

We really enjoy working with architects. The simple fact that we speak the same language of design and work in the creative field, often immersed in a similar processes makes it all the more appealing. Last year we were fortunate to be asked by Vancouver-based Henriquez Partners Architects to recreate their online presence. Their goal was to showcase their studio, some of their recent projects, and the ideas behind them via a clean, modern web interface.

For many architects, the thoughts and stories they have to tell are often left to be expressed solely by the buildings they create. As creative professionals, there aren’t many architects who don’t fill notebooks with sketches and thoughts. This was especially true of Gregory Henriquez. We set out to provide a digital outlet for his, and his team’s, prolific analogue output in tandem with a new portfolio website for the firm.

IDEAS

The blog, called Archimemo, functions as a modern upgrade to the old fax blast newsletters Gregory used to send to the industry, and lets him and his staff speak their minds on any topic. But it goes beyond that. Through some careful analysis and planning, we created an editorial method of promoting certain posts from the text-based blog format to their Flash-based website via what we called “the tunnel” using RSS. Specific posts that directly relate to a project are ported and represented on the main Henriquez portfolio website, lending a deeper understanding to the process and the project than is usually seen on other architect sites.

WORK

The final result is two sites that are linked, yet function independently of one another when required, since the opions expressed on Archimemo are not always the ones Henriquez wants directly in front of clients. The primary corporate website is presented as simple and elegant with large images of the firm’s oevre, deep content and an underlying CMS system to allow the client complete control of their online presence.

“We are so very happy with our new website and blog. Industrial Brand delivered exactly what they promised.” - Gregory Henriquez, Managing Partner, Henriquez Partners Architects

Launch portfolio website: www.henriquezpartners.com
Launch Archimemo Blog: www.archimemo.ca