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 ( 7 )

Peyton Crump, ON THE TOPIC OF General and Tips and Tricks

A few of Andy Rutledge’s words from The Design View Show, Episode 2, although aimed at answering the question of formal vs. self-taught web design education, reminded me of an important topic web designers need to remember: that constraint – not creativity – should be the overriding drive behind our designs.

As Andy shares, when designers think creativity – not problem-solving – is the prime measure of success, they enter a competition of artistry and decoration. I would add that true originality is often a high expectation of the creative-crazed designer, too. If it’s creative, looks nice, and feels super unique, then it’s assumed to be a successful design.

Such an assumption lays a comfortable foundation for designers to “trust their intuition” (advice often given from one designer to another) and fall in love with something they created – even though it doesn’t work. Too often, we designers create a logo, marketing idea, tag line, web design, or UX technique that we believe is innovative, when, quite frankly, it’s just not.

I call it creative over-thinking; when our desire to be inventive usurps our rational instincts. The end product is forced, and we might even feel some catharsis because of it. Sharpening our internal radars to recognize when we’re headed down this frustrating path is among the best ways to balance the art with the design purposes.

Techniques to stay oriented

Instead of “trusting your intuition,” I say “trust the intuition of others.” Be proactive about seeking feedback from outside sources knowing they usually don’t get it (often for good reason) but they’ll be honest in their reactions.  The truth can hurt, yes, but most of the time we’re designing for them – not other web designers.

If you find yourself explaining your design decision in paragraphs rather than a simple sentence, then it’s time to re-evaluate. Portfolio pieces can look great but don’t communicate clearly or connect effectively. The more you explain concepts, the deeper you’ll dig. Effective design decisions will explain themselves.

Regularly along the way, re-orient yourself to the intended users and audience, and don’t waiver from this focus. Generally, “creative flare” isn’t at the top of their list of design needs. It doesn’t hurt, of course, but the best designs are credible, usable, easily digestable, correctly targeted, and clear.  Often, it’s the simplest designs that achieve all these characteristics fluidly.

Quick takes to prevent over-thinking

• Know your core: are you an artist or a designer? Identify your leanings.


• Know that naturally creative people aren’t necessarily naturally design-oriented people and vice versa.


• Remember that art and design often clash. Save examples of the two working well together.


• Balance your desire for creativity with a desire for constraint and simplicity.


• Stop forcing ideas. It’s a great waste of time and energy and results in frustration.


• Seek out and accept feedback frequently from non-designers.


• Make achieving the client’s goals a priority over achieving your own personal aesthetic.


• Remember your users and audience and prioritize your design to meet their needs.


• If you’re compromising originality at work, seek fulfillment with intensely unique and creative side projects.

Bigger picture

Yes, this post in some ways falls into the age-old categories of art vs. design, creativity vs. constraint, form vs. function, original vs. ordinary. However, I’m more and more convinced that the best designers are those that understand the balance of all of these things. Here are a few links if you’re interested in any further reading:

• The Design View Show


• Universal Principles of Design


• Be a Beautiful Designer


• Collecting for Design


• Form vs Function (all the way from 2001)

Leave a comment

Rob Soule, ON THE TOPIC OF CSS and Tips and Tricks

We’ve received great traffic and encouraging feedback since launching our Team Viget site just over three months ago. We’ve also been asked quite a few questions regarding the functionality used, so here’s some explanation on how Team Viget works.

The core is a JavaScript (JS) library called jQuery. It’s powerful and simple—even for the programatically challenged designer. Its ability to select HTML elements using CSS selectors and/or XPath is one of its greatest strengths.  You should check it out.

The site acts as a dynamic-side scrolling box - except on a larger, site-wide scale. To begin, I created a container that spanned the entire width and height of the browser window (Fig. 1, blue box). If the user has JS enabled I assign a class to it, which sets the overflow property to “hidden” so it will behave like a mask.

The next child container of that mask holds all the content and is given an extra long width to accommodate users with JS disabled (Fig. 1, green box). Sub pages, which are really just classed elements, are then wrapped within another container then stacked and positioned (Fig. 1, pink box).

From that point, we move into animation. All of the movement is handled by the jQuery animate() function. It enables you to create amazingly smooth custom animations using anything from position and opacity to font size and borders. For Team Viget, we use it to animate the position. When a user clicks on one of our navigation elements, the entire content wrapper slides from right to left (Fig. 2, green box). It’s then repeated—moving the opposite direction—to return the user back to the home page.

So there’s a taste for you. Check out our stylesheet and JS file for more insight.

Oh, I almost forgot! We created the beautiful easing effects with George Smith’s jQuery easing plugin.

Leave a comment ( 3 )

Rob Soule, ON THE TOPIC OF Tips and Tricks

If you’re a mac user like me, then you can appreciate all the subtle nuances Apple adds to its products. One of these is the ability to add a custom search field in Safari. With a simple attribute change, you can transform a regular text field into a Mac-a-fied search box.

Basic text field:

<input type="text" />

Safari-specific search box:

<input type="search" />

Include past search data:

<input type="search" results="5" />

This method degrades gracefully in most modern browsers, but it isn’t valid markup.  I’ve remedied this minor problem by using JavaScript to dynamically add these attributes.  The following example uses the jQuery library but could also be written to use traditional DOM Scripting.

if($.browser.safari) {

  $("#search-box").attr({ type: "search", results: "5" });

}

Even though Safari users are in the minority, they’ll appreciate this improvement to their browsing experience.

Leave a comment ( 2 )