Samantha Warren, ON THE TOPIC OF General and Opinions/Reviews and Tips and Tricks and Trends

When I asked Doug, the Viget Designer behind the typography on the Inspire Blog ,why he used Avenir he replied “because it is the greatest font ever”. Doug is not the only one to have such an opinion of the geometric sans-serif typeface, in 2004 Avenir was named one of Typographica’s favorite fonts. When Andy Budd asked Cameron Moll what fonts would he choose if he could only have 6 his first reaction was “ Avenir, Avenir, Avenir. I’ve abused this typeface in both web and print work, and it’s held up to the abuse with flying colors.”.

In French “avenir” means “future”.  This hidden definition makes it a perfect choice for the Viget Inspire Blog because web designers are innovators who are always looking to push the boundaries and limitations of their medium.

Adrien Frutiger designed Avenir in 1988 and is best known for his typefaces Univers and Frutiger. Frutiger explained his reasoning for designing the San-Serif in an interview with Linotype:

“Looking back on more than 40 years of concern with sans serif typefaces, I felt an obligation to design a linear style of sans serif, in the tradition of Erbar™, Futura®, and to a lesser extent Gill Sans®. These have purely constructed characters from which the element of a handwriting movement has been removed. Obviously this could not be an outstanding new creation, but I have tried to make use of the experience and stylistic developments of the 20th century in order to work out an independent alphabet meeting modern typographical needs.”

Avenir has become very popular in web, print, identity, and environmental graphic design. As part of their national identity the Netherlands uses Avenir on their site amsterdam.nl as well as in signage and brochures about their country. You can find Avenir playing a key part in the branding systems of the Reuters and Dulles Fort Worth Airport. On the web a customized version of the font is used in the logo for Shutterfly and the book and medium weights on purevolume.com.

Frutiger describes his typeface as “modern and at the same time humane” but I find Avenir to be an inspiration.

Leave a comment ( 5 )

M. Jackson Wilkinson, ON THE TOPIC OF Opinions/Reviews

The editor of Bon Appétit magazine announced this week that the new issue of the magazine features a refresh of its logo, which has gone untouched for seventeen years. As a publication with a substantial history, not to mention a growing circulation of over 1.3 million and a successful website on Epicurious.com, this is a daring and frequently detrimental step for the brand. However, in this case, they’ve done a nice job at creating a sophisticated yet approachable image by combining a nicely-done custom type project with a well-executed style strategy.

They don’t let me write much about design around here, being a strategist and everything, but since I’m a fool for typography, Thanny was gracious enough to let me gush over one of the well-done rebrandings among the many, many, many, many missteps — be careful, that last one may haunt you for a while. I’ve also been paying attention to food and wine magazines lately, so this definitely caught my eye.

Before, then after:

Bon Appétit employed the well-known type designer Matthew Carter to design a custom typeface for the new logo, a smart choice for a brand currently sporting a logotype. Many custom typefaces for brands end up trying for distinction and uniqueness, with a spin to a certain character here or there. Carter, instead, appears to have made some well-reasoned modifications to a classic.

To my eye, the new typeface is based on/inspired by John Baskerville’s namesake type (which is in turn based on the work of John Caslon) and its very popular variation Mrs Eaves. These typefaces are known for their sophistication, while still being approachable and widely usable. Both of these reflect Bon Appétit, but it appears that Carter went for a slightly more youthful slant with the modification, with a heavy stroke and a significant reduction in the stroke’s modulation — that is, the variance between the thickest parts of the stroke and the thinnest. He also seems to have increased the x-height, which is essentially the “tall-ness” of lowercase letters compared with capital letters.

Both of these adjustments a call-out to the modern, geometric, modulation-less typefaces we see almost everywhere in pop culture. Helvetica, perhaps the most ubiquitous typeface on the planet, as a very consistent stroke width and a relatively tall x-height. Helvetica is considered a lot of things, but most would agree that it can be youthful and sporty.

This is all not to mention that the “o” and accent-aigu in the logotype will be changed with each issue, so color is a key component, but no specific color is a key component. It’s like a Hypercolor shirt except actually attractive.

In the end, many could have combined the properties of Baskerville and Helvetica and yielded an ugly Frankenfont, but Matthew Carter instead yielded a very nice logotype that is youthful and hip, while still having a classic sophistication. And Bon Appétit was smart enough to run with it.

Leave a comment

M. Jackson Wilkinson, ON THE TOPIC OF Events and Opinions/Reviews

There’s a lot going on here at the four labs, and so the four of us attending Carsonified’s Future of Web Design conference this year had to make a long day trip up to New York. Fortunately, when it comes to Ryan Carson’s conferences, even the sub-par conferences are well worth every resultant hour of sleep deprivation.

I say sub-par mainly because this conference didn’t have the polish that we tend to take for granted when it comes to Carson conferences. The venue was large, echoey, and didn’t allow for much audience feedback—if a speaker told a decent joke, audience laughter was swallowed up by the space, and it sounded like awkward silence. The venue was also essentially a glass cube, and the sunlight coming through shone directly on the presentation screen, making speakers’ slides nearly impossible to see for much of the day. Ryan Carson did the right thing and is offering attendees video of the conference free of charge.

On the other hand, the content of the conference was definitely the high-quality fare you expect. It was action-packed, with no fewer than eighteen speaking spots in just over nine hours. While many of the speakers were familiar faces from the web design / web standards speaking circuit, there were a few who were new (to me, at least), and a couple who really stood out:

• Elliot Jay Stocks, Carsonified’s new Senior Designer, was given ten minutes to make his case for abandoning some of the trendy design motifs we’ve seen in the Web 2.0 space. He made the most of each of those minutes, and left the entire audience wishing he’d been given a full slot, with an engaging, witty, and eloquent monologue. I’m sure we’ll see more of him in the future.


• Jeffrey Kalmikoff, Chief Creative Officer at SkinnyCorp, did a really great job on his talk, answering questions submitted by users. It was a creative and engaging way for him to deliver a talk on community.

Of course, there were other speakers more familiar to us who made the conference worthwhile. Brian Fling delivered a reworked twist on his mobile talk that always gives a good primer on the basics of mobile development. Our friend Cindy Li gave a good (albeit brief) talk on how illustration can bring a two-way communication with your users to the web in a way few other media can. Jon Snook gave a good overview of some design considerations related to AJAX. And Matthew Patterson from Campaign Monitor talked about the challenges in HTML email, and why we should care—and we should care.

The highlight of my conference, as far as the presentations were concerned, was Keith Robinson and Ryan Sims presenting “Inside the Designers’ Studio: IMDb,” in which they reworked the popular movie site. The crux of the talk involved the process the two talented designers undertook in the redesign, and I always find it very interesting to see how people actually attack a project. Keith had some technical issues with the remote he was given to advance slides, but the presentation was solid and informative, and was a great anchor leg for the conference.

Afterward, Brian and I headed out to engage in the best part of any conference: socializing. We talked with a ton of people in the few hours before our 10pm train back to DC, including one of my long-lost friends from elementary school. These conversations are always great, but the MediaTemple closing party had other ideas for what to do at the end of the day: something involving deafeningly-loud music and crazy lights. I think the MT parties are best either quite late the night of a one-day conference or, better yet, on the last day as a larger conference.

We had a great time, met a lot of great folks, and we’re looking forward to seeing everyone again at SXSW, if not before!

Leave a comment

Peyton Crump, ON THE TOPIC OF Opinions/Reviews and Trends

Cameron Moll’s Authentic Boredom and CSS Mastery are standard reads here at the Lab. If you’re not yet aware, Cameron has a new book coming out in one week entitled Mobile Web Design, which we’re sure will be worth picking up.

Cameron says about it ...

This is the book that ... contains more than 40 full-color screens from several mobile devices (including iPhone).

This is the book that includes what I feel is only the most important and relevant information — roughly one-third the length of most tech books — but, I believe every bit as thorough and helpful as lengthier volumes.

It’s available for immediate download in PDF format on the 28th, and there are some fun giveaways for getting it early.

Cameron’s post
The official site with sneak peek

Leave a comment

Thanny Young, ON THE TOPIC OF Events and Opinions/Reviews

Earlier this week, I was lucky enough to spend the day engaged in thought-provoking discussions with our industry leaders at Adaptive Path’s annual UX Week 2007. Although I was only able to attend for a single day, there was more informative and thought provoking discussions to keep my brain churning for the rest of the week.

While the topics varied from usability and prototyping techniques to agile process and accessibility, the theme was clear: we can join in finding solutions to the challenges we confront in the evolving web industry. Last weekend at BarCampDC, I spoke about some of the obstacles visual designers face. At UX Week, that sentiment was reinforced as we talked about the rise of technologies like JavaScript, AJAX, and RIA —and their impacts on usability, interfaces and documentation. I quickly realized that these challenges are felt across all disciplines (information architects, experience designers, visual designers, and developers) of our field. Throughout the day, we discussed how to adapt to these trends so we can be better user experience designers and, in the end, simply create better products.

Jared Spool’s “Making Smart Clients Usable” was among the most engaging and entertaining presentations. He talked about how the “cool features” of client-side technology can be abused and reminded us that audience research is essential to avoid this cluttered user experience. Always ask, “Is this useful for the user?” Good usability isn’t only about taking away frustrations and structuring the way your internal team thinks best; it’s about adding “delight” and intuitively leveraging what the end-user needs. He used Netflix as a prime example of a company that has successfully integrated user research and feedback in their processes.

Stephen P. Anderson’s presentation on Creating the Adaptive Interface was personally thought provoking. Stephen believes that established products can flourish if they evolve intuitively to provide a personalized experience to their users. Currently, most user interfaces are designed to fit a script that is “in a zone of safe mediocrity.” As designers, we are forced to make design decisions knowing that one approach is more desirable for one user group then another. Stephen argues that using an adaptive approach will allow designers to leverage various data and determine which approach the individual user needs. So, for example, under the adaptive solution, a beginning user might see more descriptive information about a product than a power user, who has already visited the site 100 times. Check out Stephen’s IA Summit presentation on Adaptive Interfaces for this and more examples.

Another fantastic discussion, “Using Prototypes to Visualize Interactions” came from David Verba of Adaptive Path. He mentioned that traditional wireframes can no longer adequately communicate issues and solutions in an age of rich AJAX features because any particular page can have some 27+ states. Instead, he prefers making prototypes (be it low-fidelity or high fidelity), which can deliver more impact and allow designers to explore divergent ideas with more detail than paper wireframes. He suggests that prototypes would be more cost effective when developed with an agile approach, especially in the case of a high fidelity prototype where the end product is production-ready, front-end code.

Leisa’s Reichelt’s session on the Agile Process & User-Centered Design was particularly interesting. (Pat and I just pitched a proposal for a SXSW talk on a similar topic. Fingers crossed!) Leisa argued that the traditional waterfall method is obsolete,—especially with large and technically challenging projects – because it makes unrealistic assumptions too early and doesn’t consider how designers naturally solve problems. Her solution is called the washing machine method, which is a combination of agile and user-centered design that incorporates user testing and feedback throughout the process. That testing and feedback harkened back to Jared’s Netflix example and further emphasized its importance in today’s evolving web industry.

Two other noteworthy highlights of the day included an exciting keynote demonstration of the Design and UI Behind the One Laptop per Child project and the release of Adaptive Path’s Charmr – The Design Concept for Diabetes Management.

The day ended with a panel discussion led by DC’s own Dan Brown . Panelists shared their experiences, discussed challenges (aside from RIA) and ways the industry has changed, and even shared what they look for when evaluating resumes/portfolios. I never imagined a single day would leave me so inspired, motivated, and, quite frankly, excited about our industry and the challenges we work to overcome each day.

Leave a comment