insight

World Cup (Interactive) Fever 2010

by Gerren Lamson June 25, 2010

Capitalizing off of the frenzy of the World Cup is currently on the minds of most major brands, because millions of viewers will tune in to watch soccer matches. This year in particular, there are many creative interactive World Cup experiences. Here are a few favorites to whet your appetite for the beautiful game:


I expect we'll see innovative interactivity continue to be tested and used for other major world events each year. The World Cup offers great opportunities to explore new ways to engage fans and consumers on the web. Gooooooaaaaaaaallllllllll!

 

Digital Experiences in Public Spaces

by Gerren Lamson June 7, 2010

Over the last month or so, I've worked on a kiosk project, watched Apple release the iPad and ate a couple of breakfast tacos. And I can't help but wonder: What's it going to be like when our physical environments become even more digital? Will we eventually live in the Minority Report?

The digital invasion of public spaces has been in motion for years. We've got CoinStar to help us make change on the fly, RedBox to spit out DVDs and bank ATMs to grab some cash without a teller. Don’t forget the growing world of digital signage, too. As the technology becomes more cost-effective, I think we can expect to see big brands create custom, brand-centric interactive environments—ones that harvest useful data from the public and enchant all five senses. (Sample perfume fragrances via kiosk or get a whiff of an "unidentifiable asian food dish" at the mall).

So, here's a peek at a few ways the digital world is currently permeating the physical world:

Innovative Touch Surfaces
Apple's iPad: With its release in April 2010, the public can fill their growing appetite for touch technology — everywhere they go.
Jeff Han on TED: A must-see demo from the pioneer of multi-touch technology. Check out his Perceptive Pixel, too.
Microsoft Surface: One of the major players of touch technology in recent years.
CNN's Magic Wall: Provides nightly interactive infographics and content during news coverage.
Reactable: Brought interactive tabletop gaming and live electronic music to the public's attention.
Inamo: View the live chef cam, place an order or check out nearby movie theaters on your dining table.
iBar: Playful light surface to complement your beverage of choice.

Interactive Walls, Floors and Projections
Apple's Hyper Wall at WWDC 2009: A 20-screen display showed the 20,000 most popular iPhone apps and highlighted real-time downloads, at 3,000 per minute.
Multi-Toe Touch Floor: Tap, step and stomp to control the floor. It's probably fitting to also mention the Wii Balance Board here, too.
IBM's Smarter Planet Interactive Billboard: Color-sensitive cameras change the screen color based on each consumer's shirt as they stand in front of it.
CNN Hologram Interview: See Anderson Cooper interview musician Will.I.Am via a Star Wars-style hologram.
Diesel's Interactive Storefront: Cue the rock band when you pass by this fashion store façade.
3D Live Video Mapping: Playful video on buildings has been happening for a while now, and it's still pretty neat. Check out this AC/DC exhibition, too.
Dell Children's Interactive Donor Wall: A cool way to engage the kids and display donors to the public.
Interactive Rear Windows: Watch ads in the traffic in front of you, or on digital billboards.

Next-Level Self Service
Jack in the Box Ordering Kiosk: Get your burger without speaking to anybody. Or your taco combo, if you prefer Taco Bell.
Best Buy Mini-Store: Get your electronic fix wherever you can find one (usually an airport).
Hospital Check-In: Get in line for the doctor by using a kiosk.
Coke's Touch Vending: Uses a touch interface to make purchasing a soft drink more interesting.
Wonder Pizza: Prepares and cooks a pizza in 3 minutes using infrared, for better or worse.
Zugara's Webcam Social Shopper: Try on new outfits from the comfort of your home.

Going Forward
While we might not live in Minority Report just yet, out-of-home digital experiences are here to stay. Here are three trends to keep an eye on going forward: 

  1. Designers and developers need to keep their thinking fresh and innovative in how to approach user interfaces and digital experiences that will be placed in public spaces.
  2. The public’s appetite for sleek interfaces and interactive experiences is growing, and they’re becoming more savvy and educated with a variety of technologies and products.
  3. Brands have the opportunity to be creative with their experiences and win over our hearts and minds with innovative engagements.

 

Beautiful HTML Typefaces (Seriously)

by Gerren Lamson December 15, 2009

Arial. Georgia. Verdana. Courier New. The list of safe, compatible fonts for the web has been very short, for many years. See them in action at Typetester. Much to the delight of designers, developers have been coming out with ways to remove the barrier between all typefaces and HTML. Although this might not be a good idea, let's take a look at:

@font-face CSS
The Solution: This CSS code allows visitors to download fonts from the site's server and display them on a webpage. When it's not supported, users see alternate html text (Arial, etc.) instead. Pretty neat stuff. Check out Font-Face.com, Mozilla's article, ALA's CSS-at-ten article, Tangerine's post, and this W3 page.
The Challenges: Licensing and compatibility are the biggest roadblocks. Many foundries don't license their fonts for the web, so you're stuck with free fonts (good luck!), this short list, and maybe these, too. Some browsers support @font-face and others don’t, and some take fancy footwork (Internet Explorer 4.0+ —  I'm talking about you and your EOT file format. Check out this post about how to achieve cross-browser support.

Typekit
The Solution: Using @font-face, Typekit offers a library of licensed fonts that consumers pay to use on their websites.
The Challenges: Browser-compatibility issues. Moderate pricing. Fonts may render poorly at 72-100 dpi screen resolution because they were designed for 300 dpi. And, while they have about 400 fonts available right now, they're missing good ones — the entire Hoefler & Frere-Jones library, for instance.

Foundry Example: Typotheque
The Solution: Typotheque is a font foundry that offers web licensing directly to their customers, who can use @font-face to implement them.
The Challenges: Browser compatibility issues. High prices  — a web license for one font runs around $26, so you better really love the way that font looks!  Also, all your favorite foundries will need to have a web license option if you want to use your favorite fonts.

sIFR (Scalable Inman Flash Replacement)
The Solution: sIFR is a flash-based solution that uses a .SWF, CSS, and JavaScript to render typefaces in HTML. Learn more: Davidson's overview, see an example, browse the official forum, and generate sIFR online.
The Challenges: Although it's compatible with 90% of browsers, it won't display your custom fonts if users have Flash or JavaScript disabled. They'll see standard HTML text instead. Plus there's no support for mobile, yet.

Typeface.js
The Solution: Typeface.js is a simple JavaScript-based solution that embeds custom fonts into a webpage.
The Challenges: You have to use fonts in TrueType/OpenType, so the JavaScript can read it. Licensing is still an issue. Very poor cross-browser compatibility: Anything before Firefox 1.5, Safari 2.0, or IE 6.0 doesn't work. Also, body copy will bog down page loading, and there's no link-hover support.

So, what should designers do? Since @font-face and sIFR both support standard HTML text replacement in the event your custom fonts don't display, I recommend trying it on the headers of your next web project. See if it's worth the extra effort for you and your client.

Brand Guidelines for the Future: Go Digital

by Gerren Lamson October 20, 2009

Traditional brand guidelines are the visual "law" for a company's visual image. They dictate logo usage, color palettes, typefaces, layout and more. As it stands right now, the idea of digital branding guidelines isn't really addressed in most traditional brand guidelines. Online companies such as Netflix, Facebook, eBay and Yelp offer something to digest because they have to, but most non-digital companies are pretty quiet on the digital front. And it's difficult to determine how their brand will translate online when the only documents they have in place for governing brand standards are print and overall identity guidelines.

Most companies are being required to increase their online presence and ramp up their marketing efforts through social media and other digital channels. It's probably a good idea to invest in crafting solid digital brand guidelines, too.

Here are some best practices to consider when creating your digital brand guidelines:

1. Essentials. At the minimum, they should be at least two pages of specific rules that dictate hex color palettes, logo usage, compatible typefaces and general layout practices. They need to correlate styles to the ones established in the traditional guidelines as much as possible. The essentials could also scale up to larger subsets, as done by the BBC.

2. Inspiration. Digital brand guidelines should inspire the spirit of the brand for the online world, as seen on Keebler's site. The essentials are great for the corporate website and e-newsletter, but some amount of flexibility should be expressed as the brand may move into interactive kiosks, iPhone apps, online ad campaigns, Flash micro-sites, social media and beyond.

3. Pitfalls. Guidelines should show examples of what not to do. For example, for social media, logos may need to scale to a size smaller than what the traditional guidelines planned for, so digital rules should anticipate how to handle such situations. And digital guidelines shouldn't generalize web design, like what's shown on pages 28-29 of this university's guidelines.

The aim of digital branding guidelines should be to ensure consistency online and to instill best practices for the digital world. When you've got various people designing email newsletters, making website updates and creating online ads, it might be safer to provide them with more instead of fewer guidelines. Your brand might suffer from a bad Christmas penguin e-card sent out to vendors and clients because it's off-brand and unfocused, or reap great word-of-mouth from a smart campaign like Elf Yourself from Office Max.

So what's it going to take to ensure your brand's consistency in the digital space?

1. Actual Guidelines. A stand-alone digital brand guideline PDF, or at the very least, a section about digital branding that is integrated into the existing guidelines. It should be flexible enough to begin conversation about all kinds of digital projects (social media, kiosks, iPhone apps, online ads, etc), but concrete enough to provide the basics (typefaces, colors, layout suggestions, logo usage, etc).

2. Continued Partnership. Brands should partner with a design agency that understands guidelines and implements them with integrity, responsibility and excellence. Also, having a good brand manager who understands diverse digital platforms can help to facilitate the online implementation and share in the responsibility. Both parties should be asking questions throughout the process to get the best results.

3. Flexibility for the Future. Brands change. The way consumers enjoy products and services is changing, too. And the platform where they are talking about your brand has shifted. All you can do is be flexible enough to change with the needs of your business and the market position of your brand.

By meeting the digital brand challenge now, you'll be making a statement that says, "I'm for the future of our business and want our brand to engage people with lasting and powerful messages.”

 

The way we see it, people who share insight with each other innovate, grow and succeed together.

Subscribe

Log in

The opinions contained in these pages do not necessarily reflect those of Springbox or its parent company, DG FastChannel.