Web Design for Babies 2.0

HTML, CSS e JavaScript per piccoli geniali. Lo trovate qui.

Web Design for Babies 2.0

“Cure for the Common Font” — A Web Designer’s Introduction to Typeface Selection

Last week, I joined Frank Chimero, Tiffany Wardle, and Jason Santa Maria for a panel at the SXSW conference.

Now that web designers suddenly face the challenge (and delight) of choosing fonts from an ever-growing selection, we thought it’s a good time to recommend some basic principles for making wise type choices.

The slides from each of our four quick presentations are below, as well as audio generously provided by SXSW. If you’re short on time and feel like you know the fundamentals, skip ahead to the second half of the session — I think the Q&A is as useful as our prepared stuff.

Of course, an hour is hardly enough time to deliver what one can get from the first day in a good Type 1 course, and as I listen to the audio I cringe at all the crap I missed or said poorly, but I think we did a decent job of introducing some concepts that will launch young designers more confidently into the new typographic web.

If you attended the panel and have any questions that you didn’t get answered or simply need help finding the right font, feel free to contact me here or on Twitter: @typographica or @font_id.

Slides

Audio

Or view the slides at full screen to autoplay the audio.

Resources

Related Links

Recommended Books

Webfont Providers

Typefaces Used and Mentioned

Our Favorite Typefaces of the Moment


I-Reel Showreel

Très beau showreel pour l’agence de communication française I-Reel située à Paris. Spécialisée dans la création et le développement de films, d’images de synthèse, de sites internet et d’outils multimédia. Un travail à découvrir en vidéo dans la suite.



Previously on Fubiz

Breaking: thepopshoppe.com goes live

This image has no alt text

Turn your volume up and check it out.

We have been working for months on this site and it’s finally here. We’re proud to say that not only did we do all the artwork including character development and interface design, we also wrote and performed all the vocal acting (including fart noises), that you’ll find on the site.

Big thanks to our partners: web developers One Method, sound gurus TA2 and animator Julian Brown who helped immensely in bringing the site to life. Cheers!

Honda Insight

This image has no alt text

I saw this on QBN and had to share it, some next-level programing. I’ve seen blacked-out screens before (usually done with a fill colour on a higher than zero z-index), but never something as controlled as this. Check it here, nicely done.

Resn

This image has no alt text

This is a New Zealand based web company that I came across a couple weeks ago, and their work just keeps popping up all over the place. Definitely have a look at their site (different, to say the least), and make sure you play around with the 26000 Vodka one (mind blowing).

Even more kudos!

It’s been a while since my last entry but the theme will be similar. More kudos for our incredibly talented team! The Mercury Awards were recently announced for the USA Corporate and Food Products websites categories:

Hormel Brand: Silver Award winner.

Hormel Brand web site

Jennie-O Turkey Store: Silver Award winner.

Jennie-O web site

Hormel Foods Recipes site: Bronze Award winner.

Hormel Foods Recipes web site

BEP Money Factory site: Bronze Award winner.

Hormel Foods Recipes web site

Hormel Foods site: Honors winner.

Hormel Foods web site

Web Design Training for Art Directors

Its not always easy for traditional art directors to pick a web designer

It's not always easy for traditional art directors to pick a web designer

I had a two-fer today. Not only did I find an interesting new blog, the blog from web design firm DSGN + DVLP called the chronicle of a designerd, I also read one of the entries and learned of a course that the blog author — Daniel Schutzsmith — had been teaching at School of Visual Arts called Web Design for Art Directors. Now I don’t know if the course is still being offered — the link provided in the entry only leads to an error page, not to a page offering a description of the class — nor do I think that I personally would be interested in taking the class. I do, however, think the course is a great idea.

With interaction design now such an integral part of almost every marketing, advertising, branding and communications strategy, many art directors and creative directors are grappling with the challenge of of needing to step out of their comfort zones and at times lead projects that involve significant digital components. Years ago, these creatives would have been secure in the reality that such tasks would fall on the web team down the hall and that they would be relied on to lead projects for which they had been trained and had years — if not decades — of experience but today that is not the case.

So where to begin? For someone who doesn’t do this every day, how can they evaluate the skills of web designers? How do they evaluate interactive design strategy to decide which is best for their client? An even better question is, where does one easily find the information they need to bring them up to speed in digital design 101, not from an entry-level designer’s perspective but from the perspective of a senior creative?

For this there are no easy answers. A course is a good idea because over the length of a semester concepts, terminology and case studies can be presented without overloading the course participants. I even think a digital course wouldn’t be a bad idea either. Not everyone is in NYC where they would have the ability to take courses at School of Visual Arts. Also, digital courses would indirectly provide an extra case study for the course, which could illustrate the potential of digital and interactive techniques.

During the early to mid-90′s, I essentially gobbled up every book, magazine article, web tutorial and internet discussion I could in order to make the transition from traditional design to print. How great would it have been if there was some sort of resource that could have helped me along? If anyone out there is currently putting something like this together, I’ll gladly help spread the word!

.chris{}

Cherry-picking Obama’s Successful Digital Tactics

The Barack Obama campaign web site

The Barack Obama campaign web site

Shortly after President-elect Barack Obama won on November 4th, I met with a few of our clients and advised them that it wouldn’t be long before companies began to analyze and emulate many of the digital strategies employed by the Obama campaign during the 2008 elections. I fully expected companies to thoughtfully study the various aspects of Obama’s digital strategy, evaluate them and integrate the aspects that best suit their businesses in order to bring their digital efforts into the 21st century.

Silly me!

What I had not anticipated was that clients would begin to cherry pick Obama’s strategies, acknowledging those with which they already have a predisposition while downplaying others altogether. The Obama campaign successfully wove together an outreach and engagement strategy that utilized external social networks (Twitter, Facebook, Meetup, etc.), internal social networks (My Barack Obama), messaging via YouTube, email and SMS (text messaging) in order to excite and mobilize it’s massive base of eager volunteers.

Recently, however, I’ve had the experience of meeting with clients and having them reduce Obama’s digital strategy into one single tactic or killer app: “Obama won because of Twitter!” “Obama won because of all those YouTube videos!” “Obama won because of his SMS campaign!”

Of course, as each of us knows, there is no killer app. There are no short cuts. No outreach/engagement campaign could be as simple as simply putting up “a Facebook group”. To be sure, the Obama campaign worked very hard to hone and perfect its digital strategy over time — improving on certain aspects of it that worked while minimizing or eliminating aspects that did not — and the same will be true for any organization that wishes to leverage the social web in building its brand.

Last year, when the Obama campaign first launched its My.BarackObama.com social network — which allows anyone to create their own blog on the Barack Obama web site — the decision was met with raised eyebrows in many a corporate boardroom. Many of those organizations are still debating whether it should even have a blog, let alone whether or not they should allow their users unfettered access to their site and the ability to maintain unmoderated blog content which the company does not, and cannot, control.

Earlier this year, when artists like Wil.i.am and Obama Girl began to pepper YouTube with content that was not sanctioned by the campaign and, in Wil.i.am’s case, did so by using and reproducing content from an Obama speech for which they did not request or receive prior written consent, they engaged in activities that would have gotten them sued by many corporations.

Every company/brand says it wants to deepen the level of engagement between itself and its consumer base. Too many, however, wish to do so in the traditional, one-way method of communication rather than in the establish true levels of engagement by letting go of control of their brands and letting their consumers take control.

As long as companies and brands continue to cherry pick tactics used by Obama rather than embrace the overall strategy of engagement, they will continue to talk at their consumers rather than to establish a meaningful dialogue.

.chris{}

Case Study: Interacting with Hormel

Hormel Brand Interactive Kitchen

Hormel Brand Interactive Kitchen

Recently our team, in conjunction with our partners at Hormel Foods, launched the new Hormel Brand web site. We were challenged with the task of both creating an engaging and memorable interactive experience while also giving information about the wide variety of products housed within the Hormel Brand.

The resulting site features prominently on the home page, an interactive kitchen where users can zoom around and explore areas of the kitchen where they can learn more about Hormel products. We even included an MP3 player where users can preview and download musical mixes to play in the background while they entertain friends and loved ones and serve meals made with delicious Hormel products.

I’m grateful to be lucky enough to have a ton of great clients and client projects to work on every day but this was one of the most satisfying for me for a number of reasons, not the least of which is the fact that we really tapped into the deep reservoir of creative resources at our disposal at Burson-Marsteller. From visual designers, to copywriters, to Flash animators/developers, to developers, to project managers, etc. This project represents a phenomenal effort by everyone involved and I was proud not only to be a part of it but also to have such wonderful clients who truly partnered with us to create something really special.

.chris{}