Because I founded AIGA Portland’s sustainability initiative two years ago and have worked to advance that program, I was asked to contribute a chapter to the book. My story is about wanting to do something to make a difference, and my personal journey of working within the design community to advance the cause of sustainable design by bringing this discussion to as many people as possible.

WebVisions

JQUERY WORKSHOP

To get started, I attended the half-day workshop: “jQuery for Designers” taught by David McFarland, author of CSS: The Missing Manual, JavaScript: The Missing Manual and Dreamweaver: The Missing Manual.

jQuery is a JavaScript library that makes it easy for tech-minded designers like me to add interactivity to a website without the need to code JavaScript programming. jQuery can be used for everything from simple web components to complex, full-featured interactive user interfaces.

I’ve been using jQuery to create photo galleries and slide shows, but I wanted to learn more about how it works so I could do more with it. Since taking this workshop, I’ve been able to understand the basic workings of jQuery and expand my capabilities considerably. The latest project I worked on incorporated the Fancybox plugin to add functionality for the user to click on an graphic elements to view embedded videos in a “thickbox”, or separate viewer on top of the web page without leaving the page.

KEYNOTE ADDRESS

Thinking the Unthinkable: How To Spark Disruptive Innovation: Luke Williams of Frog Design talked about how creative insight today needs disruptive thinking. Through disruptive thinking, which is the opposite of following the crowd and doing what is expected, you can come up with creative solutions that get people’s attention… and win.

SESSIONS

Go with the Flow: Erin Malone, Principal with Tangible UX, offered advice for social sites on ways to engage users and create loyalty:

• Make the sign-up process as easy as possible, which may mean no sign-up at all. Consider using Open ID, such as Facebook Connect, so users can sign in by giving permission via Facebook.
• Encourage people to revisit your site often by featuring regular users and their contributions; offer badges, rewards or points.
• Re-engage users that have left your site by showing them new features and show how others are using your site.
• Create connectedness: the more people are connected, the more active they are. “Recommendations” and “Suggested people you may know” are tools to add connectedness.
• Encourage people to share activities offline and then re-connect online. (examples: Facebook Events, Upcoming.org, Meetups)
• Allow users to contribute content to have more ownership and thus loyalty to your site.
• Security matters: give people control over their info that is shared.

Effective Personal Branding: Shashi Bellamkonda, Social Media Swami at Network Soutions, highlighted how to use the power of the internet to get connected and control your online profile:

• Set up Google Alerts to get info on when your name, your company, or an interest of yours is published online. The speaker uses this technique to make sure personal info about his children — like their home address — aren’t inadvertently shared online.
• To show your expertise in a particular area, join online communities and participate by commenting on blogs, in forums and by answering questions (LinkedIn).
• Become a publisher and create content about your expertise on your own website or blog, then share that content via social sharing tools.
• Setup a Facebook page for your business, as well as a LinkedIn profile and a Twitter account. Link to these on your website or blog and invite people to join and follow.
• Use Slideshare to upload presentations you’ve given.
• Upload press releases to  PR World and Pitch Engine.
• Most importantly: be a useful conversationalist.

The Human Interface: Christopher Fahey, founding partner and user experience director at Behavior, talked about how technology is becoming a mask with people now spending a majority of their time in front of screens. That might make marketers want to create interfaces that mimic humans, but instead of trying to replicate humans like super-realistic robots, is just creepy. Create interfaces that make people feel comfortable. Think about the personality users can engage with. At the Jet Blue kiosks, instead of a screen with “Enter PIN and press button”, they say “Howdy”, “What’s Up” and “Hi There!”. This approach is not only more fun, it usually makes people more comfortable with using technology to access your services. Two of my favorite examples of great human (or chimp) interfaces are MailChimp and Wufoo for forms.

Mobile is the Future: Jason Grigsby, CloudFour.com blogger, indicated that mobile strategies should include:

• Device detection so mobile users are automatically routed to a mobile version of your website. Unless the mobile device is an iPad, in which case the expanded version is more appropriate.
• Create consistent experiences on your website and mobile site or apps. People expect to be able to perform the same functions regardless of which version of your site they visit.
• Mobile sites should be created, not ported. Think about the user experience on a mobile device and adjust your content structure to accommodate it.
• Don’t rely on Flash since it is not supported on the iPhone or iPad.

IDEA+OLOGY: The Designer’s Journey; Turning Ideas into Inspired Designs: Stanley Hainsworth, tether, showed examples from his new book of designers successfully bringing their personal interests into their work. “Do that which is close to your heart” Stephan Bucher

Design-Thinking for Social Change: Ryan Russell, founder of the non-profit For the Next, gave inspiring examples of what can happen when designers do work based on what they care about. Pressing issues can seem insurmountable, but design-thinking is making a difference. The key is know where your heart is. A deep personal connection is needed and it needs to be what is important to you, not what you think others find important. To find out what matters to you, ask yourself these questions:

• What is your personal design philosophy?
• What do you believe is the purpose of design?
• How could design serve something bigger?
• What do I believe is the most pressing issue of the day?

Take your time to think about what you want to do. It takes time. Going through these exercises will give you a genuine voice. Once you have found your “cause”, share your ideas publicly. If you’re not ready to do this, then you’re not ready to make it happen. People that share your thoughts will gravitate towards you and create a new opportunity for you to work with others. Create a team of  like-minded people to accomplish more working together.

In addition to getting a chance to get to know other chapter board members, the retreat is a great place to learn about AIGA’s direction and new initiatives. Here’s what AIGA is working on:

• Design for Social Change: designers are increasingly being brought into problem-solving sessions for their design thinking and facilitation skills. Example: Aspen Design Summit
• Design ProBono: AIGA is encouraging designers to give back to their communities by donating 5% of their time to pro bono projects. AIGA provides listings of pro bono projects seeking designers on its website.
• Living Principles: the inward-focused Center for Sustainable Design has been replaced with the outward-facing Living Principles and a new Living Principles website has launched. The new approach is to invite dialogue across businesses and industries instead of a focus strictly on designers.
• Documentary about AIGA: Lynda.com created a documentary video about the history of AIGA and the benefits of membership.
• AIGA Make/Think design conference videos are now online.

We worked with the Kansas City Area Development Council to design a new advanced energy marketing initiative website — kcadvancedenergy.com. Like most of KCADC’s marketing micro-sites, this one is designed to present the benefits the KC metro can offer businesses. And KCADC’s efforts must be successful, since they were just named one of the top economic development groups in the U.S. by Site Selection magazine.

Another site we just completed was the complete redesign of Kansas City SmartPort’s website. Lisa designed several unique features when building this site, including the use of a translucent window placed above a panoramic photo on the site’s homepage. She also expanded the site’s interactive capabilities with the development of an interactive real estate presentation. In addition to its corporate site, we worked with KC SmartPort to design a new site for one of its industry initiatives: TradeDataExchange.com. This site promotes the development of a data-sharing approach to cargo shipping.

Not all of our work was web-related. We worked with the Kansas City Area Life Sciences Institute to package and promote its annual dinner and research symposium events. This project included the design of branding, mailers, promotional ads, programs and meeting collateral, event signage, and the publishing of all event information on the web.

In addition to our Kansas City work, we designed a new website for the CDA Academy. This site presents information on the Academy’s classes and curriculum supporting HL7 Clinical Document Architecture (CDA) and Continuity of Care Document (CCD) training. CDA Academy is a new organization that has been created to serve the needs of the evolving medical records industry.

One additional fun effort was the incorporation of a custom video player into the NextAmericanDream.com website that pulls a customized video playlist from a YouTube channel.

We’ve still got additional work lined up, but it feels good to have completed this much already this year.

Why does this happen? And what is perhaps more important, what can we do about it?

Defining the Target

The competitive demands firms face today often create a sense of panic. The foundation that stablizes your marketing programs gets shaken. Sometimes the most basic elements of successful communication lose sway to goals that appear more timely, strategic, efficient or even more important than good writing.

I’m here to tell you otherwise.<

One trait common among all successful A/E/C firms is high quality writing. But quality goes beyond sound grammar and proper syntax. It finds that elusive attribute often referred to as "voice."

It is your firm's voice that defines its personality. Voice allows the genuine identity of your firm to come forward -- be it in a speech, a press release, a website, a brochure or a proposal. And your firm's personality is one of the distinguishing characteristics that differentiates it in a crowded marketplace.

If you're starting to get the feeling that voice sounds remarkably similar to brand, that's understandable. Marketers often refer to "brand voice," "social voice," "public voice" and so on. Obviously, they're all related, but as you work to improve your writing quality, try to stay focused on finding and conveying your firm's personality.

Finding Your Voice

Companies are like people. Some are relaxed while others are uptight. Some have fun, but smiles are rare in others. Some are passionate about their work, while their counterparts may allow growth and revenue generation to direct their efforts. Some are honest. Some aren’t.

Let’s assume your firm is one of the good ones.

What makes it good? What makes it fun? What is it passionate about… really? Why would a client want to trust you, work with you or build a relationship with you?

Your first job is to figure that out. Then, to write it down. And here’s where good quality writing really begins.

Build a Solid Foundation

Good writing is not the same as using words that are trendy, clever or polysyllabic… it is using words that matter to you. And using them well.

It all starts with proper grammar, syntax and spelling. If you’re an English or journalism major, you know the rules. If not, keep a stylebook handy. Actually, stylebooks are handy for everyone. Bookmark helpful websites. Dictionary.com is an invaluable resource.

Read blogs that offer writing tips and inspiration. Search Google for the “Top 100 Blogs to Improve Your Writing” for a collection of excellent blogrolls. The object is to get inspired, rediscover your muse, or if you’re just getting started… learn those rules.

Breaking Out

Once you know the rules — break them. Sparingly. The way you do when you talk. But not without first listening very carefully.

Listen to the way your principals talk about what your company stands for. Listen to your architects, engineers and project managers talk about the work they do. Listen for what your colleagues get excited about, and what your clients say about you.

Once you understand your company’s personality, try to capture it in everything your write. And write until you find it.

Above all, keep writing. Keep revising and refining. For it is the act of writing that truly teaches us to write.

Interactive infographics, which are graphical depictions of data, allow you to process what would have taken hours to understand into seconds. In this session, four panelists showed examples of infographics and then talked about the current state of technologies related to creating them.

NOTES FROM THE SESSION:

• Effective visualization is not about trying to tell a story around the data. It’s about allowing the data to tell it’s story.
• Don’t start with the data or you’ll end up with something that looks like data, start with the question or the problem.
• As mobile devices become predominant devices for viewing online content, technologies will need to change. For example, Flash is the most-used tool for creating interactive infographics, yet is not supported on the iPhone or iPad. HTML 5 and Canvas open the possibility of not requiring a plug-in to view, but as I discussed in an earlier post, full cross browser support is not yet available for these newer technologies.

SAMPLE INFOGRAPHICS:

Good, which produces a website, magazine, videos and events and is “for people who give a damn”, is a rich resource for excellent infographics. Casey Caplowe, Good’s founder and creative director, showed several examples of infographics, many of which are static graphics and not interactive, and are frequently about educating people to make change for good.

Ben Fry’s example of Darwin’s Origin of Species shows all of the revisions that were made to the original document in an animated and interactive format.

Shan Carter, from the New York Times, produces highly interactive infographics that utilize user-controls to show the data based on different variables.

Eric Rodenbeck from Stamen showed an example of visualizing real time Twitter activity related to the Olympics using photos as graphic elements that scale in size based on the frequency of the words associated with the photos.

More samples of infographics:

• 40 useful and creative infographics
• Cool Infographics blog
• Reviews of infographics blog
• Infographics Magazine
• Information Aesthetics

Sustainability is a hot topic that is just now starting to reach the interactive community, hence the focus on sustainability at the 2010 SXSW conference in one of the keynote addresses and in the “Greater Good” session track.

KEYNOTE ADDRESS: VALERIE CASEY

Valerie Casey is the founder and Executive Director of the Designers Accord, a global coalition of designers, educators, and business leaders working together to create positive environmental and social impact.

In her keynote address, she stated “despite the fact the interactive community has been absent in conversation about sustainability… the interactive community will take the greatest leadership role moving forward”.

“By bringing the creative community together we can begin to look at sustainability,  and environmental issues, social issues and cultural issues with an entirely different perspective. One that brought creativity and optimism to bear instead of doom and gloom. The kind of doom and gloom that  paralyzes you. There’s no one of us in this room that can make a real change by ourselves. Instead we have to really depend on the collective and collective wisdom.”

“I believe that it’s the interactive community that’s gonna lead this movement next. It will require systems thinking and the interactive community are the ones that has that innate in their DNA way to look at systems problems. Sometimes we arbitrarily paint what we’re reponsible for in a narrow way to give us an excuse to not be responsible for what falls outside of that.”

“What would happen if our purpose was oriented towards cultural sustainability instead of commerce?” What if we used games to engage people in complex issues instead of dumbing things down? What if community strategy drove divergent thinking instead of group think? What if social media was actually about social impact? I think that the interactive community is the connective tissue between all of these universes. And we have this potential to be the bridge across all of these.”

After the keynote address at SXSW, Valerie posted this article on Fast Company to address the questions about what actions the interactive community can take now: Designing a Movement: Seven Principles for Sustainable Action

• Edited video recap: SXSW Valerie Casey keynote address

DIGITAL’S EMERGING ROLE IN UNCONSUMPTION

This session, led by Dr. Nita Rollins, Futurist at Resource Interactive, focused on the concept of unconsumption: actions and forces that reduce a consumer footprint.

PRESENTATION ON SLIDESHARE

Here are some of my notes from the session:

• During what is now called the “great recession”, non-traditional organizations like Goodwill, eBay and Craigslist experienced growth while traditional consumer outlets were struggling.
• There was an increase in buying used goods, swapping goods and bartering.
• For the job market, green jobs are growing at a rate of 2.5 times the rate of traditional jobs.
• Extremely conspicuous consumption is being replaced with a new frugality: the lazy environmentalist.
• The age of the super consumer is gone. Long live the unconsumer.
• One third of consumers are willing to pay more for the “green premium”.
• People are eager and curious about supporting their ideals, but they need information.
• Digital is the force that can bring people together, so why not use branding to promote unconsumption.
• The commercial imperative and the environmental imperative need to be merged.

Seven ways to reach the unconsumer:

1. offer no-holds barred sustainable marketing
2. create a rental system for one-time use items like bridesmaid dresses
3. sell vintage goods: selling old is the new new
4. prepare for consumer relations scrutiny. do your homework and don’t greenwash. back up your product information.
5. clarify sustainability for consumers: they want to know what they can do to make a difference
6. think about packaging in its deconstructed form (i.e., packaging that can be made into a useful products)
7. plan for recycling and upcycling: support swapping on-site

More info:

• Unconsumption
• The Journal of Murketing
• Rob Walker’s Unconsumption Project

Keeping up with the latest technologies is an ongoing part of a web designer’s job. Currently in the works are new features that will be available through the use of HTML5 and CSS3. While not all of the new features are currently supported by most browsers, there are some elements that can be used now. (see the Summary of Browser Support link below)

• video and audio file embedding: will simplify adding A/V content to your website with a simple embed tag. This is reported to be the most exciting change for 2010.
• animation: yes, animation without Flash or the need for a plug-in.
• rounded corners: a great alternative to creating graphics for rounded corners on boxes and tabs
• multiple background images in one element: provides greater design flexibility while eliminating the need for extra code to nest elements for using more than one background image
• multiple columns for text: while multiple columns do currently exist on websites, there is no way to wrap text from one to another seamlessly like this new feature will allow. Look for more magazine-type layouts to emerge with multi-column layouts.
• drop shadows for boxes and text: no more graphic files for text and boxes with drop shadows!

CANVAS AND FLASH

Canvas is an element in HTML5 that allows for controlling graphics through javascripts. Since it is seamlessly integrated with the browser, it does not require a plug-in and is viewable by mobile devices. Compared to Flash, Canvas renders fast and has good performance in the browser. Good applications for Canvas include simple animations, building graphs, games, and image composition. While Canvas is supported by the latest versions of Mozilla Firefox, Google Chrome, Safari, and Opera, it is not natively supported by Internet Explorer.

Flash is a very rich interactive tool that has been in use since 1996 and has an installed user base at approximately 95%. Flash has a toolset advantage over Canvas since it is a graphics-based program that easier for designers and artists without programming skills to use. However, since the introduction of the iPhone, and now the iPad, a disadvantage of using Flash is no support on either device. How will Flash be implemented in the future? While it was suggested that the next Creative Suite include a “Flash wrapper” for use on non-Flash supported devices, another idea is the creation of a tool that outputs HTML5, CSS and javascript from Flash-like files.

The next year promises to be an interesting one for both Canvas and Flash as we see what develops for each, especially where smart phones and mobile devices are concerned since this is becoming a bigger part of the market everyday.

More info:

• WC3: World Wide Web Consortium
• Summary of browser support for HTML5 and CSS3
• 22 Handy HTML5 and CSS3 Tools, Resources and Guides
• HTML5 Doctor
• Yes, You Can Use HTML 5 Today

At SXSW Interactive, all of the keynote addresses were “recorded” by artists to document the discussion in real-time. The conference also offered several sessions on visual note taking to help people learn how to solve problems and communicate through simple drawings. According to wikipedia, “visual thinking is the common phenomenon of thinking through visual processing using the part of the brain that is emotional and creative to organize information in an intuitive and simultaneous way.”

In the “Pen and Paper Tools” session, I learned why visual notes are used:

• people respond more and have better memory retention with visuals
• the tools used are easy and accessible (pens, pencils, markers, paper)
• working together to create visual notes activates a different style of working
• visual notes are used as a tool for groups to help work together towards solutions

SXSW INTERACTIVE KEYNOTE ADDRESSES

Valerie Casey's keynote address by Sunni Brown (sunnibrown.com)

Valerie Casey's keynote address by Varick Rosete (varickrosete.com)

Danah Boyd's keynote by Heather Willem (imagethink.net)

Daniel Ek's keynote by Janine Underhill (idea-360.com)

PRESENTATIONS ON SLIDESHARE

More info on visual thinking and visual note taking:

• Slides from “Pen and Paper Tools” session
• Visual Note-taking 101 w/Austin Kleon, Sunni Brown & Mike Rohde
• VizThink: a website for visual thinkers
• Visual Thinking School (offers modules to help you become a better visual thinker)
• Book: “slide:ology: The Art and Science of Creating Great Presentations” by Nancy Duarte
• Book: “The Back of the Napkin” by Dan Roam

These sessions focused on technical aspects of building sites using WordPress and Drupal Content Management Systems (CMS) tools, but in this blog post I’m going to focus on the benefits each offer. Both are free and open source backend systems written in PHP code that utilize template files to build large, dynamic sites that pull content from a database. Like most CMS systems, they both use theming for the graphic interface. While there are many types of free themes and premium themes available for purchase, custom theming is a better option for businesses and individuals that want a website that is custom-made to fit their needs. Designers will need to know HTML, CSS, some javascript and core PHP in order to develop custom design for CMS-based websites. Use of theming separates the design from delivery and enables easier design iteration. Since sitewide design changes are made within template files, it is relatively easy to update the design of a site built using a CMS.

Drupal is a powerful tool with many plug-in modules for full-featured functionality. While it doesn’t require programming knowledge to administer a site built in Drupal, it is primarily a developer’s tool and is not necessarily a tool that clients will be able to use unless a custom admin system is also built as part of the project. It is, however, a very useful tool for large sites that require complex functionality.

WordPress started as a blog software platform but has grown to be used as a CMS tool to build full-featured websites. The admin interface is very easy to use, which has led to WordPress becoming the most popular blog tool available. There are two different ways to use WordPress: WordPress.com is a hosted blogging service that doesn’t allow for customization with custom theming, or the use of plug-ins; WordPress.org is the version that we use for this blog and what we use to build all WordPress CMS-based sites for our clients. It allows total customization without any limitations. Plug-ins allow functionality to be added as needed. There are currently over 8,000 plug-ins that have been developed by the open source community, so there is a plug-in for just about anything you can come up with.

PRESENTATION ON SLIDESHARE