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

At the conference, I attended 17 sessions and will recap what I learned along these six tracks:

• part 1: web design and web typography
• part 2: content management systems
• part 3: visual note taking
• part 4: technology: css3 and html 5, mobile apps
• part 5: greater good, sustainability and unconsumption
• part 6: interactive infographics

Each session at SXSW had a specific Twitter hashtag assigned to it. Do a Twitter search on the hashtag to follow the conversations that took place during the conference.

Part 1: web design and web typography

WEB DESIGN

Sessions attended: “Beauty in Web Design”, “Simple Steps to Great Web Design”
Twitter hashtags: #beautyinwebdesign #simplestepsgreatdesign

PRESENTATIONS ON SLIDESHARE

The overriding message from the sessions on web design is to look for design to evolve beyond the current medium, getting influence from traditional print:

• look at other mediums for inspiration: art, packaging, magazines, advertising (could be ironic since most early websites were accused of being brochure-ware, but what this really means is that web tools and technologies are now at a place where there can be greater creativity with fewer design constraints)
• know the content inside-out: research and listen thoroughly (a common theme in branding and traditional graphic design)
• add subtle interactions to create “moments of pleasure” for the user (light and subtle animation effects for buttons and other elements on a website that the user won’t expect but that add to the experience without taking away from the main focus)
• be more creative and use custom photography to stand out from all of the stock used everywhere (support local photographers!)
• have a clear vision for a project and design without ego — don’t design for other designers and awards (I’ve heard this message many times, but not specifically for web design)
• think beyond the client and intended audience: think of the greater good and how to help a wider audience (sustainability is a hot topic that is just now starting to reach the interactive community… more on this in part 5 of my recap series)

WEB TYPOGRAPHY

Sessions attended: “Get Stoked on Web Typography”, “Fluid Web Typography”
Twitter hashtags: #getyourglyphon #cssandfonts

PRESENTATIONS ON SLIDESHARE

At SXSW Interactive, I frequently heard that “2010 is going to be the year of web typography”. Why has it taken so long for us to be able to use more than the core five to ten fonts in web design? Licensing of fonts is one of the key reasons. Most people don’t know that fonts are intellectual property, much like music and photography. End user licensing agreements (EULA) for each font must specify that a font can be embedded in a web page in order to be used legally. Font formats are another issue… platforms and browsers don’t support the same formats across the board.

Several new services allow designers to use fonts that are licensed for use on websites for free or a small fee:

• Font Squirrel // Handpicked free fonts for graphic designers with commercial-use licenses
• Typekit // a subscription-based service for linking to high-quality Open Type fonts from some of the worlds best type foundries
• FontFont // offers stand-alone professional fonts without relying on system fonts or webfont services

More info on web typography:

• Typekit and the future of web fonts // from Pixel Acres blog
• Fluid Web Typography // book by Jason Cranford Teague
• On Web Typography // Article on A List Apart

In his book, Brian tells us how we can find and use better materials for print projects, reducing the impact of printing by specifying recycled paper with high post-consumer content, nontoxic inks, and learning how to eliminate waste on a press sheet. Beyond materials, there is the potential to actively help influence the strategies and ideas on projects, as well as change the behaviors of your audience, clients and peers.

“This book is a must read for designers who want to stay relevant in one of the most significant design opportunities of the 21st century” Clement Mok, designer, entrepreneur, AIGA Medalist

Highlights of the conference included hearing design legend Clement Mok talk about the evolution of his career. Clement is a pioneer in New Media and got his start at Apple back in the early 80s, the same time that I was introduced to Macs in college. From there, his career paralleled what I was learning at the time, so his presentation was a great reminder of how much things have changed in the time that I’ve been a graphic designer. Additional highlights included a panel discussion on sustainability and a presentation on the “Secrets of Typographic Success”. I’m proud to be a member of a professional organization like AIGA and look forward to attending the next design conference in 2011.

Developing and designing marketing and communications materials for A/E/C firms is fascinating. And since both Lisa and I spent a number of years working in the A/E/C industry before we began our own firm, we bring both an insider’s and an outsider’s view to the work.

One thing we have found to be true, regardless of whether we are working for architects, engineers or builders, is that the most effective communications keep the message clear and accessible. The key to achieving this objective is understanding exactly what you want to say and to whom you wish to say it. You already know what you do really well. We’ll help you find the best way to tell people about it. That’s what we’ve done for our current A/E/C clients.

Bridging Past and Present || The firm Yulan Studio has been working with the longest – and the largest A/E firm we work with currently – is WSP SELLS (formerly Chas. H. Sells, Inc.), an East Coast firm with offices that stretch from New Hampshire to South Carolina. We have been working with WSP SELLS – which is well known as one of the Northeast’s premier bridge design firms – since the days when we were still managing HNTB’s New Media Group. And after forming Yulan Studio, WSP SELLS became our first client.

Over the years, we have helped WSP SELLS with services that range from identity and branding to interview support to public participation. And of course, websites and interactives. The firm’s most recent version of its website began life as a multimedia CD. We had developed the business card-sized CD for WSP SELLS to use for tradeshows and marketing. Then, they decided they would like to have it adapted to become their website.

Providing the Needed Solutions || Other A/E/C firms we’ve provided marketing communications solutions to include Missouri’s Larkin Group, an environmental and aquatics engineering firm and Kansas’ Affinis Corp., a transportation engineering firm. In addition to designing websites for both Larkin and Affinis, we have worked with them to develop tools such as direct marketing materials, proposal templates, brochure systems, award submittals and several public information websites.

One of our most recently completed A/E projects was our work with Stroud Engineers, a civil and mechanical/electrical firm located in North Carolina. Stroud needed a website that told their story – reputable firm, good projects, and a chance to live on the beautiful North Carolina coast if you choose to work for them. Actually, Stroud made it clear that one of the main reasons they were doing a website was to attract employees, and they wanted it very clear that they were located in coastal communities. That’s why the beaches are so prominently featured in the homepage design. The client liked the end product, but, sadly, no trips to said coast were in the project budget.

Lisa worked for Corbin Design of Traverse City, Mich., to design the map portions of a pedestrian wayfinding system for the city of Kansas City. These maps were tough to produce. She had to combine input from GIS data, Google Earth, street maps and photographs to make sure the wayfinding maps were accurate.

Maps Show Up Everywhere || Lisa’s map design proficiency has proven itself a blessing since so many of our clients have used maps in their communications projects. Interactive maps have been employed on websites for the Kansas City Area Development Council, KC SmartPort, the KC Animal Health Corridor and the Kansas City Area Life Sciences Institute.

Plus, firms like New York-based SELLS, which has offices in states up and down the Atlantic Coast, use maps and directions to help clients locate all of their offices. In fact, most businesses like to provide their customers with a map to their location. And while this may seem a bit “pedestrian” to many of you, making a map that makes sense is different from simply making a map.

A History of Map Making || Lisa has been designing excellent maps for much of her career. I suppose spending a number of years working for a transportation engineering firm led to a lot of them. Transportation needs maps.

Anyway, over the years she has designed a lot of maps. When I asked her what unique techniques she had developed that help her make her maps which are easy to read and understand, she said this… “having the ability to draw the map elements (like all of the highways and streets) with a mouse, keeping the details simple, using color effectively… that’s about it.”