Author Archive

The Art Of The Film Title Design Throughout Cinema History

Smashing-magazine-advertisement in The Art Of The Film Title Design Throughout Cinema HistorySpacer in The Art Of The Film Title Design Throughout Cinema History
 in The Art Of The Film Title Design Throughout Cinema History  in The Art Of The Film Title Design Throughout Cinema History  in The Art Of The Film Title Design Throughout Cinema History

Have you ever thought of what makes you remember a certain movie or TV show? Of course, it’s the story being told, you’ll say. But what about movies such as Goldfinger, Seven and Snatch? What’s the first thing that comes to mind? We are pretty sure their opening title sequences stick out for many of you.

Today we’ll take a closer look at that short space of time between the moment the lights go down and the first scene of a film, the part that so often sets our expectations of a movie, that sequence that speaks to our creative side: the art of the film title. We’ll look at the evolution of title design and some particularly interesting titles from various periods in the history of cinema and animation.

Film titles can be great fun. In them we see the bond between the art of filmmaking and graphic design — and perhaps visual culture as a whole. They have always served a greater purpose than themselves: to move the overarching story forward. Whether you are a motion graphic designer, a digital artist or a connoisseur of design, we hope you are inspired by these film titles and the ideas they suggest to your own creative endeavors. At the end of this post, you’ll find a listing of relevant typefaces and Web resources.

For this post, we reached out to David Peters, a San Francisco-based designer and media historian who, more than a decade ago, began a project called Design Films to research the subject. David generously contributed to this article.

[By the way, did you know we have a free Email Newsletter? Subscribe now and get fresh short tips and tricks in your inbox!]

Titles In Silent Film

Words and lettering played an enormous role in films of the silent era. Film titles made their appearance in the earliest silent films, along with letter cards (or inter-titles), which provided context. These cards were the responsibility of the lettering artist, who collaborated with the scriptwriter and director to create narrative continuity so that audiences could follow what they were seeing. Distinct from these inter-titles was the film’s main title, a vehicle of particular concern to film producers because of the legal, copyright and marketing information this footage had to bear.

Here is the main title from D.W. Griffith’s “Intolerance” (1916), which many reviewers and historians consider the greatest film of the silent era. Note that variations of the director’s name are featured in five ways:

Intolerance in The Art Of The Film Title Design Throughout Cinema History

Film titles and letter cards had to provide essential information to the viewer. For reasons such as ease of production and clarity, artists favored mono-stroke letterforms or characters with small serifs. White lettering on a black background is another characteristic of this era, because titles simply looked better this way when projected with live-action B&W film.

The following inter-titles are typical of silent movies. A shot from the comedy The New Janitor (1914) featuring Charlie Chaplin is on the right, and the silent western West of Hot Dog (1924) is on the left:

Intertitles-example in The Art Of The Film Title Design Throughout Cinema History

In addition to hiring lettering artists, the biggest film studios began to employ typesetters in the production of title cards. Among the fonts often adopted for titles and inter-title cards were Pastel (BB&S, 1892), National Old Style (ATF, 1916) and Photoplay (Samuel Welo’s Studio, 1927).

Regardless of the method followed, we see the emergence of typography that seeks to match letterforms with the subject matter and even the zeitgeist — including typefaces inspired by art movements such as art nouveau, art deco and expressionism — as well as the commercial vocabulary of packaging design and advertising.

The main title from the American release of “The Cabinet of Dr. Calligari� (1920) is much less expressive than the title from the influential original German film (restored original version):

Caligari in The Art Of The Film Title Design Throughout Cinema History

The sans-serif title (for a later restored version) of the classic horror film “Nosferatu” contrasts with the art-nouveau treatment of the film’s promotional poster of the time. The font, Berthold Herold Reklameschrift BQ (digitized version) was created by German typesetter Heinz Hoffman in 1904. You can see the original German version of the title still from Nosferatu here.

Nosferatu-package in The Art Of The Film Title Design Throughout Cinema History

Animation effects like the ones you see in rotoscopes actually pre-date film. But the power of filmmaking was enormous, and it tempted thousands, including many artists, to try their hand at this new medium. One of the earliest known title animations is seen in the work of J. Stuart Blackton.

“Humorous Phases of Funny Faces” (1906) — video on YouTube — was directed by J. Stuart Blackton, who many consider to be the father of American animation. Not only is it one of the first animated films, it is among the first to feature an animated opening title, making it a precursor of the modern title sequence:

Humorous-phases-of-funny-faces in The Art Of The Film Title Design Throughout Cinema History

Other important early filmmakers such as Emil Cohl and Winsor McCay were accomplished draftsmen who dedicated years of their lives to discovering the dramatic potential and practical techniques of animation. Their focus was more on character development and story visualization than on title animation per se. So, while we see innumerable novelties in main titles and inter-titles during this period, the big innovations of title animation and motion typography don’t really emerge until well after the Second World War.

The Silence Is Broken

As movies grew more popular, their titles evolved. Movie producers invested considerable sums in film production and sometimes resorted to fixing a dog of a film by rewriting the inter-titles. For a time, “film doctor” Ralph Spence (1890–1949) was the highest-paid title writer in the industry, earning $10,000 a picture for his one-liners.

During the 1920s and ’30s, European cinema was deeply influenced by modernism, and aspects of this visual sensibility were brought to the US by filmmakers who were fleeing the Nazis. Meanwhile, the studio systems operating in Europe and Hollywood also delighted in creating titles that featured vernacular graphic novelties. As much as possible, they liked to convey the tone of a movie through the “dressage” of its main title. Thus, blackletter fonts in the opening credits were used to evoke horror, ribbons and flowery lettering suggested love, and typography that would have been used on “Wanted” posters connoted a western flick.

Here is a title still from the oldest surviving feature-length animated film “The Adventures of Prince Achmed” (Die Abenteuer des Prinzen Achmed) by German animator Lotte Reiniger:

Prince-achmed in The Art Of The Film Title Design Throughout Cinema History

And here is the opening title in the talkie “B” Western Outlaws of Boulder Pass:

Western in The Art Of The Film Title Design Throughout Cinema History

Hollywood animation studios, including Warner Brothers and MGM, did give some license to their artists to indulge in title antics. But one can also see that life for the titling crew at Disney was strained by the weight of its foreign-language versions and that film exports rarely encouraged innovation in titling.

The first Mickey Mouse cartoon, circa 1929, features both Mickey and Minnie, but its main title, “Plane Crazy,” is lackluster:

Plane-crazy in The Art Of The Film Title Design Throughout Cinema History

Over time, the very appearance of white-on-black title lettering became a visual trope, recurring as it does in practically every Woody Allen film. Allen relies on the device primarily to build a visual identity, although its economy is a practical advantage, too.

Allen uses the Windsor font for most of his films, as illustrated below in “Annie Hall” (1977). Read more about typography in Allen’s films and also an interesting story about how the renowned director chose this typeface:

Annie-hall in The Art Of The Film Title Design Throughout Cinema History

The incorporation of audio into movies — making them “talkies” — didn’t revolutionize how film titles were handled, at least not immediately. However, we do see one avant-garde animator and painter of German origin, Oskar Fischinger, give serious thought to the relationship between visual effects and music. Fischinger’s practice of subordinating the visual rhythm to the audio was repeated often in motion graphics and title design.

The concept of score visualization first conceived by Oskar Fischinger in his film “Studies” anticipates the effects created by Saul Bass in “The Man With the Golden Armâ€� (1955) and later by Susan Bradley in “Monsters, Inc” (2001):

The (True) Birth Of The Title Sequence

Breakthrough ideas in titling, such as timing the typography to interact with metaphorical imagery or to create its own world, were largely innovations that came from outsiders to the Hollywood studio system. Figures such as Saul Bass, Pablo Ferro, Maurice Binder and Richard Williams arrived on the scene in the 1950s, at a time when the studios were starting to flounder in their fight with TV. At that time, independent filmmakers made commercial headway by doing things differently, spreading utterly fresh ideas about the possibilities of title sequences. This is the era in which the discipline of film title sequence design was actually born.

Maurice Binder worked on the title designs of 14 films about Agent 007, including the first episode, “Dr. No” (1962). Binder created the famous gun-barrel sequence, which became a signature for the Bond series:

If there were a hall of fame for film title design, Stephen Frankfurt’s sequence for the 1962 film “To Kill A Mocking Bird” (below, upper row) would have a seat of honor. Cameron Crowe referenced it in “Almost Famous” (lower row):

Mocking-bird-and-untitled in The Art Of The Film Title Design Throughout Cinema History

Experimentation on the fringes, where title sequences really thrive, have led to all kinds of innovation in what a title can be and how it can serve the story and the director’s intent. Perceptive directors like Otto Preminger, Alfred Hitchcock, Blake Edwards and Stanley Donen embraced these innovators and gave them the reign to surprise audiences from the opening shots. The Bond films, the Pink Panther series, Barbarella: the sequences for such films became enticing and often sexy popular amusements. By the mid-1960s the top title designers were celebrities in their own right, people who could be relied on to deal with the messy business of credits with playful panache.

Here is a still from the Saul Bass’ title sequence for “North by Northwest,” his first project with director Alfred Hitchcock:

North-by-northwest in The Art Of The Film Title Design Throughout Cinema History

A great draftsman and visual storyteller, Saul Bass ran the gamut of techniques for his title sequences: montage, live action, cut-out paper animation, typography in motion, to name a few. Whatever technique he used, Bass summarized the film as a metaphor that often shone with creativity. (In January 2010, David Peters, Kai Christmann and Dav Rauch, all of Design Films, gave two presentations on the work of Saul Bass at the 12th Future Film Festival in Bologna, Italy.)

In an interview, Kyle Cooper listed three opening sequences that made a big impression on him. Saul Bass’ title sequence for the 1962 film “Walk on the Wild Side” (watch on MySpace) was among them:

WotwsHQ in The Art Of The Film Title Design Throughout Cinema History

It could be argued that typography lost importance in this era of title design. The imagery behind the credits received a lot more attention. Still, the interplay of typography and images was by no means ignored. Popular trends of the 1950s were using three-dimensional lettering and embedding type in physical artifacts such as embroidery and signage. In contrast, Saul Bass often approached the lettering of a main title as he would a logo, making it function as the core element in a full marketing campaign. While the variety of solutions increased considerably, their anchor was always the relationship of on-screen typography to the movie itself.

The power of minimalism is shown in the opening sequence for Ridley Scott’s “Alien” (1979). Credit for this design goes to Richard Greenberg, with creative direction from Stephen Frankfurt:

Alien in The Art Of The Film Title Design Throughout Cinema History

The main title for the French film classic “Le Dernier Metro” (1980), directed by Francois Truffaut, is austere and modern but has a generic quality not so different from a Woody Allen title:

Le-dernier-metro in The Art Of The Film Title Design Throughout Cinema History

The Digital Era, And Modern Trends In Film Title Design

Every sphere of contemporary life — and especially the film business — has been affected by computers. For designers, creating film titles meant participating in the apprenticeship tradition — learning by doing, on the job; that continued unabated into the mid-1990s. At that time, dynamic openers by Kyle Cooper and others showed what the next generation of design-educated, film-literate, tech-savvy creatives could do. That apprenticeship tradition has largely been overshadowed by the rise of popular technology, the Internet-enabled archiving of everything and the plethora of schools that propagate countless design disciplines. Most significantly, we see designers working like filmmakers and filmmakers working like designers.

The revolutionary title sequence for “Se7en” (1995) by Kyle Cooper was named by New York Times Magazine as “one of the most important design innovations of the 1990sâ€�:

A consequence of this digital era seems to be that modern title design will forever rely on progressive technologies. Yet, in one of his interviews, Kyle Cooper states that while the power of computer graphics is obvious, he still likes experimenting with live action, because there is something special about the imperfection of making things by hand.

While Cooper was working on the sequence for “Darkness Falls” (2003), some glass he was using suddenly split, and the crack cut across the eyes of a girl in an old picture. The incident added suspense to the effect:

Darkness-falls in The Art Of The Film Title Design Throughout Cinema History

In his title sequence for the 2005 crime-comedy “Kiss Kiss Bang Bang” (watch on YouTube), designer Danny Yount made use of Saul Bass-style graphics to recreate the atmosphere of 1960s detective stories:

Kiss-kiss-bang-bang in The Art Of The Film Title Design Throughout Cinema History

The potential of digital graphics and typography has attracted some of the most creative minds to motion design. Pixar and Disney have reserved crucial parts in the branding of their films for the title sequences. Using animated characters to introduce viewers to the story became a popular trend. Such talented graphic designers as Susan Bradley (Toy Story, Monsters, Inc., WALL-E, Ratatouille), Jaimi Caliri (Lemony Snicket’s A Series of Unfortunate Events), Dave Nalle (Corpse Bride), Michael Riley (The Back-Up Plan, Kung Fu Panda) and Michael Curtis (Brother Bear) use all manner of tools to test different approaches to designing titles. One thing these individuals have in common is a drive to find a strong metaphor and tell an exciting story with their sequences.

For the end sequence of “Ratatouille”, Susan Bradley (read an interview with her) drew the typography, inspired by the slab-serif typeface Rockwell. For the opening titles, she used a hand-drawn cursive intended to evoke Paris.

The title sequence for “Thank You for Smoking” (2005) is a modern manifesto on typographic style in title design. The idea for using cigarette packaging for the opening sequence was suggested by the film’s director, Jason Reitman, and implemented by Shadowplay Studios. Typographica goes through the trouble of pointing out the fonts in the sequence:

In the title sequence for “Up in the Air” (2009), the designers at Shadowplay Studios rely on aerial photography:

Up-in-the-air in The Art Of The Film Title Design Throughout Cinema History

The title sequence for the 2009 adaptation of the comic book “Watchmen” drew a loud response from the public. It creates an alternate history, depicting the involvement of superheroes in all major events of post-World War II America. The sequence was shot by the film’s director Zach Snyder, while credit for the title’s integration goes to yU+Co:

Watchmen in The Art Of The Film Title Design Throughout Cinema History

Conclusion

Throughout the history of cinema, film titles has evolved with the film industry, as well as with social trends and fashion movements. But the measure of a title design’s quality is the same now as it was in the silent era. Whatever function they perform, titles remain an essential part of film.

Granted, in recent years the business of film titling has been terribly strained by the control of producers over commissions and their persistence in demanding speculative work as the price of admission. Creatively speaking, though, as filmmaking consolidates into the most powerful international cultural phenomenon of the 21st century, ingenuity in titling is a certainty. As designers have always known, the opening moments can make a deeply satisfying contribution to any film.

Typography Resources

Below you’ll find links to some downloadable typefaces that were used in or inspired by film titles from cinema history. Please read the legacy notes before downloading.

HPHLS Vintage Prop Fonts

An amazing collection of revived vintage fonts, many of which were used in early cinema. Among them are faces based on the National Old Style, Colwell Handletter and Post Monotone no. 2. Only some fonts can be downloaded for free, although the entire collection is available on CD at an affordable price.

Hplhs in The Art Of The Film Title Design Throughout Cinema History

Silentina

The Silentina font family is a great modern take on typography from silent film inter-titles. Designed by Ray Larabie in 2004.

Hitchcock

Hitchcock was created by designer Matt Terich as an homage to the lettering style of the iconic Saul Bass. The font is available as a free download, and you’ll find a selection of other typefaces in the same vein.

Movie/TV Related Fonts

Here is a collection of free fonts styled after the main titles of famous films and TV shows.

Waltograph

Waltograph was created by Justin Callaghan in an attempt to capture the spirit of the familiar Walt Disney signage.

Waltograph in The Art Of The Film Title Design Throughout Cinema History

The Disney Font List

On MickeyAvenue.com, Justin Callaghan shares a definitive list of typefaces seen in Walt Disney movies and places.

Meyer 2

Meyer 2, originally drawn in 1926 as one of the five fonts cut by linotype to Louis B. Meyer’s personal specifications, was revived in 1994 by type designer David Berlow.

Meyer-2 in The Art Of The Film Title Design Throughout Cinema History

ITC Korinna

The Korinna font family has an art nouveau heritage and looks similar to the Pastel font, which was often used for title cards in silent films.

Korinna in The Art Of The Film Title Design Throughout Cinema History

Futura Extra Bold

Stanley Kubrick’s favorite typeface.

Futura in The Art Of The Film Title Design Throughout Cinema History

Gisele

This font looks similar to the one used by Winsor McCay for his 1914 animation Gertie the Dinosaur.

Gisel in The Art Of The Film Title Design Throughout Cinema History

Gertie1 in The Art Of The Film Title Design Throughout Cinema History

CCMR Mamoulian Blather

A font that recalls the typography in the title of the 1924 animated movie Felix Dopes It Out.

Mr-mamoulian in The Art Of The Film Title Design Throughout Cinema History

Felix-dopes-it-out in The Art Of The Film Title Design Throughout Cinema History

That’s All Folks

Here’s a cheerful Looney Tunes-inspired font family called That’s All Folks

Thts-all-folks in The Art Of The Film Title Design Throughout Cinema History

Looney-tunes-first in The Art Of The Film Title Design Throughout Cinema History

Coolvetica

Coolvetica looks like the sans-serif typeface in the title sequence for Catch Me If You Can (2002).

Coolvetica in The Art Of The Film Title Design Throughout Cinema History

Catch-me-if-you-can in The Art Of The Film Title Design Throughout Cinema History

Resources And Reference Material

The Art of the Title Sequence

A comprehensive and authoritative resource on film and television title design from around the world. Plenty of excellent designs and material available.

Forget the Film, Watch the Titles

One of the first online resources dedicated to film title design. You’ll find a lot of amazing examples, reviews and interviews with the experts.

Title Design Project

In this showcase gallery are title sequences from both classic and recent movies.

Movie Title Stills Collection

A large and diverse collection of film title stills from between 1920 to the present.

Taking Credit: Film Title Sequences, 1955–1965

An essay by a London-based writer and curator with an interest in graphic design, Emily King.

Letters of Introduction: Film Credits and City Scapes

This essay covers the textuality of film credit sequences and their relationship to the expressiveness of urban life.

Credits

I’d like to thank David Peters, who kindly agreed to contribute content as well as references to this article. David is the founder and director of DESIGN FILMS, a team of creatives committed to researching, collecting and presenting film programs about design, typography and film history. David is also a principal and design strategist at the communication design firm EXBROOK.

(al)


© Julia May for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: , , ,


Fashion Websites: Trends, Showcase, Interviews

Smashing-magazine-advertisement in Fashion Websites: Trends, Showcase, InterviewsSpacer in Fashion Websites: Trends, Showcase, Interviews
 in Fashion Websites: Trends, Showcase, Interviews  in Fashion Websites: Trends, Showcase, Interviews  in Fashion Websites: Trends, Showcase, Interviews

Fashion is a cultural phenomenon. It’s so often transient, but at the same time one of the most polished mirrors of our time. Unlike other art forms and creative media, fashion is a mode of self-expression for all players involved: the designer makes clothes to express their personality, and the consumer wears them for the same purpose. Fashion also accommodates a number of other creative professions, such as photography, make-up and hair-dressing and Web design.

In this post, we’ll look at websites from the fashion industry. We spoke with two developers whose websites differed in style and implementation to find out the considerations involved in designing a website for a fashion brand. Further below, you’ll find a collection of smart websites done by clothing designers, photographers, make-up artists and other players.

With its look at trends and features in this niche, this post may come in handy for those of you working on a related project or who are simply curious to know how Web design is approached in this industry. Although we won’t discuss the clothing itself, fashionistas may find some use in it, too.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

Some Trends On Modern Fashion Websites

Looking through the websites discussed in this post, we caught a few commonalities.

Full-Screen Photography

Photography is a powerful tool and is integral to fashion websites. Grasping how photography can impress the viewer and set the mood, many fashion brands use big high-quality pictures to dominate their websites.

Mexx
Like many other fashion websites, Mexx relies heavily on Flash and full-screen images. The design has no special features or gimmick; its uniqueness is in the content itself.

Mexx in Fashion Websites: Trends, Showcase, Interviews

Story-Telling

The fashion industry works hard to create mental associations and set expectations on the part of its audience. The market is saturated, and companies look for new ways to grab the attention of customers. One way a brand does this is by going beyond merely presenting its clothes and instead bringing its merchandise together into a storyline and associating its product line with a certain lifestyle.

Louis Vitton Journeys
Louis Vuitton Journeys is a unique Web campaign sponsored by the famous fashion brand. It features exclusive stories about influential modern personalities. The latest journey, Encounter With Greatness, features quite a smashing get-together of three football legends: Pele, Diego Maradona and Zinedine Zidane. Unique content and interactivity through Facebook integration make the website an exciting destination.

Louis-vuitton in Fashion Websites: Trends, Showcase, Interviews

E-Commerce Integration

Modern Web technology enables us to showcase and sell products at once, and equally well. Today, most fashion brands no longer divide their online presence between their product line and e-commerce, preferring to combine the two under one domain or using their online store as their official website.

Tiffany
Tiffany’s official website has a distinctly e-commerce design.

Tiffany in Fashion Websites: Trends, Showcase, Interviews

Big Names Are Inconspicuous

That the icons of fashion are so old-fashioned with their website designs is rather ironic. A quick look across fashion websites reveals that the more famous a brand, the more poorly designed its website. It seems these traditionally big names prefer conventional marketing channels and minimize their Web presence because of it.

Pierre Cardin
This website is definitely worth a visit, at least to see what a good design is not. Or perhaps that’s what they call avant-garde?

Pierre-cardin in Fashion Websites: Trends, Showcase, Interviews

Interactivity and Social Media

Another trend is the increasing use of interactive features and social-network integration. Designers are taking advantage of the latest tools and techniques to allow visitors to “touch� their products and deliver exciting experiences. Live-action previews of apparel, webcam functionality, connecting and sharing via Facebook, even 3-D viewing mode: with all of these entertaining baits, becoming an online shopaholic is easier than ever.

Zoogami Eyewear
Zoogami presents its latest eyewear collection in a fun, amusing way. You need a Facebook account and webcam to experience it.

Zoogmi in Fashion Websites: Trends, Showcase, Interviews

Different Web-Building Technologies

Although Flash still leads as the tool of choice for fashion websites, more websites based on HTML and JavaScript are appearing in this niche.

Airwalk
The website for footwear brand Airwalk shows JavaScript at its best. It delivers a dynamic and interactive experience with its variety of transitions and hover effects. The branding website is seamlessly integrated with the online store, and the company style is perfectly supported by the images and typography. Legwork Studio is behind the work.

Airwalk in Fashion Websites: Trends, Showcase, Interviews

Showcase Of Beautiful Fashion Websites

Below are some more examples of fashion websites. The websites were selected not because the brands are famous, but rather because they were attractive, their approach was creative and their interface uncluttered (though not every website necessarily exhibited all three characteristics).

Adidas Y-3
The website for this Y-3 spring and summer 2010 collection is hosted on Adidas’ corporate domain. The website features an innovative and sophisticated presentation of the products, implemented with the “live photosâ€� effect. Designed by Sid Lee.

Adidas-Y-3 in Fashion Websites: Trends, Showcase, Interviews

Burberry
Every item in Burberry’s apparel and accessories collections is presented in a unique way on the company’s website. Here, you can see the “live photoâ€� effect, similar to the one implemented on Adidas’ website; Burberry does a twist on it, though, by adding 3-D rendering. The design agency, KOKOKAKA, aimed for interactivity and hit the target, wouldn’t you agree? The website also includes an HTML-based e-commerce platform, so it’s a good example of how HTML and Flash can be effectively combined.

Burberry in Fashion Websites: Trends, Showcase, Interviews

Amanda Wakeley
A simple yet elegant website that serves as both an online store and a branding home for Amanda Wakeley. Design by Pod1.

Amanda-wakeley in Fashion Websites: Trends, Showcase, Interviews

Anja Gockel
The website of German fashion designer Anja Gockel has a clean and contemporary look. This is achieved mostly through high-quality photography, an uncluttered layout and clean typography. A special treat for fans: three desktop wallpapers available for free downloading, something rarely seen on fashion websites. Website design made by Macologne.

Anja-gockel in Fashion Websites: Trends, Showcase, Interviews

Jay Jays Dance/Off
Dance/Off is an online catalogue for the new line by youth fashion brand Jay Jays. Its highlight is the interactive video available for viewing in 3-D. Visitors can enjoy a dynamic dance show and then just click to freeze the action and explore the outfits. Creative agency Visual Jazz did a great job of creating the fun and engaging product presentation.

Dance-off in Fashion Websites: Trends, Showcase, Interviews

Diesel
This website looks quite normal for a company that has developed a habit lately of inviting everyone to “be stupid.” Perhaps taking up a good half of the main with a large cloud of images and adding some Italian content here and there might seem strange, but given its habit, Diesel can probably get away with being a bit… well, cuckoo in its design.

Diesel in Fashion Websites: Trends, Showcase, Interviews

24 Teeth by Lacoste
This minimal and light design splendidly matches the style of the 24 Teeth footwear line by Lacoste.

Lacoste-24-teeth in Fashion Websites: Trends, Showcase, Interviews

Reserved
The website of Polish clothing brand Reserved has an atmospheric Flash-based design. The full-screen slideshow on the main page works great at inviting visitors to check out the latest collection. “Live photos� are used here, too, officially making this a trend. Some content is available only in Polish, even after you switch the language selector to English, similar to the Diesel website. Another trend? Hopefully not.

Reserved in Fashion Websites: Trends, Showcase, Interviews

Walter Van Beirendonck
Now here’s a Belgian approach to fashion websites. The design relies heavily on boxed tables and red. The timeline section has some bugs; still, the website is worth checking out, if only for the illustrations. Designed by Emmy Mees.

Walter-van-beirendonck in Fashion Websites: Trends, Showcase, Interviews

Werkstette
Werkestette’s website is based on content. The simple and intuitive navigation enhances the impact of the large photos. The website was created by Pelle Martin and Felix Nielsen.

Werkstette in Fashion Websites: Trends, Showcase, Interviews

You
Simplicity and an intelligent use of colors make the website of Italian creative studio You a beauty.

You in Fashion Websites: Trends, Showcase, Interviews

Anti Sweden
Anti Sweden is the tribute of Norwegian design collective Anti to black metal, jeans and Norwegian identity. Remarkable graphic design and typography earned the Anti Sweden website a spot in this showcase.

Antisweden in Fashion Websites: Trends, Showcase, Interviews

Faith
The Faith clothing line is the brainchild of the Italian fashion designer Federica Sasella. Large photographs and cloth textures give the Faith website a pleasant look and feel. Designed by Effective Studio.

Faith in Fashion Websites: Trends, Showcase, Interviews

Daffy’s
Daffy operates a network of low-price clothing stores geared to varied consumers. Bright colors, big eye-catching pictures, transitions and easy navigation make for a comfortable experience of browsing for bargains.

Daffys in Fashion Websites: Trends, Showcase, Interviews

Prada
This website focuses on imagery; the latest Prada collection is presented as an original mix of photos and illustrations. One nice feature is that most pages open in their own pop-up windows that can be moved around the screen, allowing visitors to compare products.

Prada in Fashion Websites: Trends, Showcase, Interviews

Josh Goot
On the website of Australian fashion designer Josh Goot, visitors can play with the fuzzy surreal background, which creates a nice visual effect as the mouse moves around the screen. The interactive full-screen mode for images lets you examine the outfits in details. Tick off the checkboxes for aesthetics and functionality.

Josh-goot in Fashion Websites: Trends, Showcase, Interviews

Lasse Pedersen
This website is for hair and make-up artist Lasse Pedersen. The big pictures and typography are best viewed at full screen. Developed by Pelle Martin and Felix Nielsen.

Lasse-pedersen in Fashion Websites: Trends, Showcase, Interviews

Lisa Shahno
Moscow-based designer Lisa Shahno puts herself on the fashion map with these geometry-inspired designs. Her website accords with the style, too: the sparseness of the design complements the photographs and geometric logo well. Website designed by Kostya Sasquatch.

Lisa-shahno in Fashion Websites: Trends, Showcase, Interviews

Moschino
On the splash page of Moschino’s website, you can choose between the main website, the official online store or the page for the current campaign. At first sight, the three sub-sites aren’t very visually consistent. But it doesn’t feel like a serious problem, maybe because the funny goose mascot creates a link between the sections. Made by Netway Italia.

Moschino in Fashion Websites: Trends, Showcase, Interviews

Miss Sixty
The design for Miss Sixty’s website is bold and provocative, in no small part because of the abundance of red on the black background. The online store is slightly calmer.

Miss-sixty in Fashion Websites: Trends, Showcase, Interviews

Keds
“The Original Sneaker” celebrates its over 90-year history. The website is a treat for the typophile.

Keds-original in Fashion Websites: Trends, Showcase, Interviews

Cheap Monday
This well-known producer of street-style jeans, Cheap Monday, has an interesting history. You can learn all about it on the company’s website, which has a simple “bloggy� design that matches the underground values of the brand.

Cheap-monday in Fashion Websites: Trends, Showcase, Interviews

Under The Hood: Interviews With Two Developers

To get a better idea of what characterizes the process of designing a fashion website, I spoke with people at two design agencies that have relevant portfolios. One of them is the Swedish digital agency Nute, which developed a website for the fashion and art project Uniforms for the Dedicated. The other team is the Indian agency BC Web Wise, which designed a website for apparel creator Allen Solly.

I thank both teams for taking the time to do interviews for this article.

Uniforms for the Dedicated

Uniforms-for-the-dedicated in Fashion Websites: Trends, Showcase, Interviews

Uniforms for the Dedicated (UftD) shows an innovative approach to fashion branding by combining men’s fashion, music, art and film. All of these and an online store are skillfully presented on UftD’s website, which was designed and developed by Nute Digital Agency. Like the fashion brand itself, the website is diverse and successfully combines HTML, Flash, JavaScript and an e-commerce platform into an enjoyable browsing experience.

Daniel Ruuth, creative Web developer at Nute, was kind enough to share details of the creation process for UftD’s website.

Question: What is involved in designing a website for a fashion brand?

Daniel: I think designing a website for a fashion brand is like designing a website for any other lifestyle product. The main thing is to display the products—the clothes in this case—well and in a context in which the viewer gets an overall feel for the product. A piece of clothing is so much more than a textile and a color: it’s a mood, a statement and an expression of the person wearing it.

We have a great connection with our client, and because of this we know how important the context, the feeling and the underlying story of each garment are. This is what we need to communicate to visitors. They need to be able to see themselves in the clothes. Besides this, of course, users want to be able to “get” the material, so close-ups and/or photographs that help you understand the motion of the garment are important.

Question: What goals did the client set for you?

Daniel: The website was combined with an art installation. The goal was to launch the website to keep the rings on the water moving. Along with that, we had the goal to increase website traffic by 40%, which we did.

Question: Could you give us a brief overview of the stages of creating the website?

Daniel: We had a start-up meeting with the clients to discuss this year’s campaign. At the meeting, we gathered key concepts and any ideas they had. After that, we start working on a presentation of our suggested approach; this is where we showed them the initial hand-drawn sketches (which were poorly detailed on purpose to keep the client from locking in on the details).

Sketches in Fashion Websites: Trends, Showcase, Interviews
Some sketches from the original hand-drawn story board.

Daniel: That idea and those sketches got tossed around for a while before we got to the next point: the mock-up. Here, we did a simple mock-up (watch this concept test movie for the UftD website). Once that was completed, we did the final sketches, got them approved and then went about starting the actual production.

Question: What tools did you use? Particularly, what were your reasons for not using pure Flash, which seems to be the most popular platform for fashion websites?

Daniel: We put the idea first. The technique is not what’s important. If the idea must be realized with Flash, we’ll use Flash. If it can be solved with plain HTML, we’ll use HTML. If we need to work with Web cameras and streaming services, well, then we’ll use that. We try not to think of “how” right from the start, but rather of “what.” We have a great team here at Nute, so whatever idea we come up with, we usually have someone who can make it happen.

The tools we used in this production were AfterEffects, Photoshop, Flash and Coda. The online store implementation was built on the Magento e-commerce software.

UFTD-shop in Fashion Websites: Trends, Showcase, Interviews
The UftD online store is clean and elegant, creating a comfortable shopping experience.

The biggest part of the production was creating the movie/environment (see a screen dump of our AfterEffects project; quite a few layers).

UFTD-frames in Fashion Websites: Trends, Showcase, Interviews
Some of the frames from the movie for UftD’s latest campaign, 1020 Trickery Lane.

Question: What do you think makes this website a win?

Daniel: We strive to tell the user a story. Whether it’s a huge CMS-based company website or a campaign website like the one for UftD, there’s always a story to tell. In this case, it’s easier to see what I mean by “story,” because the website could actually be interpreted as a film, going from point A to point B. Our first concept was like a script for a movie.

What makes this website a win? Well, perhaps it’s a win because we are able to entertain users while they view all of these awesome garments by UftD in an exciting environment. But more importantly, I think this website is a win because it’s right where the audience is. This would not be a good website for a Donna Karen collection, but it’s a great website for a brand like UftD.

Question: What feedback have you gotten from the client and users about the website?

Daniel: The client is more than happy, and the online buzz for the website speaks for itself.

Allen Solly

Allen-solly in Fashion Websites: Trends, Showcase, Interviews

Allen Solly is an apparel brand from India that offers mostly semi-formal and casual wear for men and women. The brand’s official website is based on Flash; eye-catching illustrations and an interactive 3-D environment convey well the spirit of the 2010 collection and engage the target audience. Unlike most fashion brand websites, Allen Solly’s has a contemporary and uncluttered design.

To learn more about the process of creating a website for Allen Solly, I got in touch with the agency responsible for the design, BC Web Wise. The founder, Chhaya Balachandran Aiyer, and the studio’s leading designer, Naim Shaikh, kindly agreed to answer my questions.

Question: What is involved in designing a website for a fashion brand?

Chhaya: Imagery is critical. The design has to showcase the fashion statement. It has been commonly implemented in print and on TV before. The idea is to extend this fashion statement to the Web, taking advantage of its interactive capabilities. I think we did it with the use of Papervision3D and bringing alive a 3-D rendition of the print campaign.

Question: What goals did the client set for you?

Chhaya: The message of Allen Solly’s latest release was as follows: “We’re bringing modern art to modern fashion, doing summer style like nobody else. Our new range of youthful work and casual wear lets you live life 3-D in a 2-D world.” Our goal was to create a Web presence that reflected this idea in the best way.

Naim: In short, the client’s brief sounded like this: “This is our new collection. Do your best with this.â€� We then got full freedom to do our creative work.

Question: What tools did you use? Particularly, why did you choose Flash, which seems to be the most popular platform for fashion websites?

Naim: Flash and Photoshop were used to make this website. Usability is very important to us. I feel that many fashion websites are too cluttered, with weak usability, and we tried to avoid this. For Allen Solly, along with the main Flash version, an alternative HTML website is available, which helps with search engine optimization and gives choice to visitors who don’t have Flash enabled.

The creative artwork done by Ogilvy for Allen Solly’s print campaign was very cool, with a 3-D effect and illustration style. We adapted it for online.

Allen-solly-prints in Fashion Websites: Trends, Showcase, Interviews
The illustrations on the Allen Solly website were initially designed for the print campaign of the same name, designed by Ogilvy & Mather Bangalore.

Question: What, in your opinion, makes this website a win? What feedback have you gotten from clients and the audience?

Chhaya: An intuitive front end and sleek execution. Honestly, everyone has simply loved it.

Naim: It was a very big project for us. It is very big for me on a personal level, too. The website has received the most positive response and has been featured in various design communities.

(al)


© Julia May for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:


Business Card Design Starter Kit: Showcase, Tutorials, Templates

Smashing-magazine-advertisement in Business Card Design Starter Kit: Showcase, Tutorials, TemplatesSpacer in Business Card Design Starter Kit: Showcase, Tutorials, Templates
 in Business Card Design Starter Kit: Showcase, Tutorials, Templates  in Business Card Design Starter Kit: Showcase, Tutorials, Templates  in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Professionals in any field should always keep business cards on them because you never know when you’ll meet a potential client, partner or like-minded person. Despite their small size, business cards are one of the most powerful and handiest marketing tools. Not only do they create a link between you and your new contact, they’re also a quick way to give a great first impression. Business cards promote your skills and achievements and serve as a little container for big ideas.

Don’t underestimate the process of designing business cards; a well-made card does not just share your contact details: it generates further sharing and buzz. Like any self-promotion tool, designing a business card requires solid brainstorming and careful implementation to get the best effect.

This post targets a diverse audience. It features a collection of remarkable business card designs that could help you in your search for creative ideas. The round-up of fresh tutorials and business card templates further down might come in handy for those who don’t have the skills or experience to design their own.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #2 is Successful Freelancing for Web Designers, 260 pages for just $9,90.]

Showcase Of Original And Memorable Business Cards

Letterpress Cards

Letterpress printing has actually been the only form of printing text and images since it was invented by Johannes Gutenberg in the 15th century. Because of its distinctive qualities, such as crisp and tangible impression onto paper, letterpress work is now widely used for branding and identity development. Letterpress gives stronger visual definition to type and artwork and has a special touch, which is why it’s a popular technique for business card printing. Below you can see some beautiful examples of letterpress business cards.

John Henry Donovan
On this business card, the fine design created by Irish designer and developer John Henry Donovan is complemented by the printer’s excellent choice of paper and inking.

John Henry Donovan in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Greg Anderson
This card works because of the stylish dirty texture, good use of color and, of course, letterpress. Designed by Thomas Guy.

Greg-anderson in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Chris Piascik
The funky typography of freelance graphic designer Chris Piascik is set off well by the letterpress work on his business card.

Chris Piascik in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Space 150
This stylish letterpress business card was designed for the creative agency Space150 by designer Evan Nagan. The card is part of the agency’s periodic general redesign, which it conducts every 150 days. The elegant constellation theme and high-quality letterpress printing make for an excellent card.

Space1501 in Business Card Design Starter Kit: Showcase, Tutorials, Templates

White Rabbit
This card promotes the portfolio of the German photographer Florian Muller (aka the White Rabbit). The use of the negatives pattern incorporates the card owner’s occupation well, and the surface is enhanced by an embossed rabbit.

White-rabbit1 in Business Card Design Starter Kit: Showcase, Tutorials, Templates

One in Zero
The business card of Hong Kong-based idea firm OneinZero is minimalist: the focus is on the letterpress type and paper texture.

One-in-zero in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Christian Garibaldi
The effective combination of blind and ink debossing, along with the subtle coloring along the edge, makes for a clean and exquisite business card that perfectly conveys the aesthetic of the photographer’s online portfolio.

Garibaldi in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Montage
Dallas Graham of Montage Creative has a simple and strong business card.

Montage in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Paper Monkey Press
Some filigree letterpressing is evident on the card of Paper Monkey Press.

Paper-monkey-press1 in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Second World Design
The guys over at Second World took their branding very seriously, resulting in the clean beautiful letterpress card you see below.

Second World in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Kinetic Lens
This card was designed by photographer Riley Maclean for his company Kinetic Lens. Combining various letterpress techniques and a great set of red tones, this business card has a multi-dimensional feel. It’s printed on thick 220-pound-bond cotton paper.

Kinetic Lens in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Laura Moretz
A good use of letterpress on the front and back of this card and the labels make this card memorable. It’s printed on French Speckletone #140 stock.

Laura Moretz in Business Card Design Starter Kit: Showcase, Tutorials, Templates

23rd And 5th
Here is a beautiful business card showing fine typography and two-color letterpress. It was designed for the staff of the 23rd & 5th branding agency. This business card for the Director of Development features a QR code that drives contacts to a dedicated mobile website optimized for the iPhone, Blackberry and Android.

23d5th1 in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Die-Cut Business Cards

Something else that determines a business card’s memorability and appeal is shape. Today many individuals, businesses and organizations die-cut their cards, going beyond traditional dimensions. Die-cutting is an effective way to make a business card eye-catching, unique and even interactive. But remember that a die-cut card should still be compact enough to fit in a standard wallet or card holder. Alternatively, you could suggest some other way to carry or hold your card. Some noteworthy die-cut business cards are showcased below.

Derrick Mitchell
Derrick Mitchell, a designer from Kalispell, Montana, creates his business cards by hand with chip board, screen printing, labels and stamps.

Derrick-mitchell-design in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Popupology
This cute die-cut business card is done entirely in-house by designer Elod Beregszaszi.

Popupology in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Dyalect
The chic design of this business card is accentuated by the custom shape and 16-point silk matte finish card stock.

Dyalect in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Kaman
This concept-based business card was designed by Mehdi Tuchak for the Iranian multimedia company Kaman.

Kaman in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Sean Gerety
This lovely business card mimics a Moleskine notebook. While the front is glossy, the back is matted and can be used as a note card.

Sean-gerety in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Amundson Films
Cheap card stock and moderate-quality print wonderfully fit the aesthetic of this vintage movie ticket business card. Great job, Alice Cho!

Amundsonfilms in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Alteroy
This die-cut masterpiece belongs to the Israel-based designer Alteroy. The cardboard icons can be separated. Much effort was put into this business card, and the result is absolutely worth it.

Alteroy in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Carlos Vazquez
This super-cute business card might be the shortest route to any Mac fan’s heart.

Carlosvazquez in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Herbert Martin
Besides containing the contact info of German dentist Herbert Martin, this business card has another cool function: it helps you check your bite by way of a die-cut stencil. Designed by Petra Penz.

Herbert Martin in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Truf
The business card is square and “combines a hand-crafted feel with the style of Russian propaganda posters.�

Truf in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Classic, With a Twist

Most of the business cards below have a classic rectangular shape and standard dimensions… but that is where their classic-ness ends. Creative ideas and skillful implementation make these cards look anything but ordinary.

Coco
The amazing identity concept for COCO was created by Polish designer “Wallstreet Different Creature.” This business card, as part of the overall branding, is pure style and beauty.

Coco in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Erich Hartmann
Erich Hartmann designed his business card to spell out a bunch of his skills, along with his main occupation. This clever idea is nicely visualized by way of a two-sided card, with an offset logo on the front and letterpress on the back.

Erich Hartmann in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Fran Rosa
Motion and graphics designer Fran Rosa takes different angles on both his website and business cards… literally.

Fran Rosa in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Grill Me
To see the info on this business card, grill it against a fire, because the card is stamped with lemon juice for ink. Quite an original idea, but using this effect for non-essential information or for an image, rather than contact info, might be more reasonable.

Grillme in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Luciano Ferreira
A lovely typographic business card made by Brazilian graphic designer Luciano Ferreira for promotional purposes.

Luciano Ferreira in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Sandra Boils
This elegant business card was made for Spanish jazz vocalist Sandra Boils by graphic design studio Estudio Menta.

Sandra Boils in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Stepan Prokop
A beautiful artistic business card by graphic designer Stepan Prokop.

Stepanprokop in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Synchromatik
The rich grass texture makes the card of designer Marko Manojlovic look fresh and beautiful.

Synchromatik in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Van Der Buzz
This transparent business card, mimicking an X-ray, belongs to Ukrainian advertising agency Van Der Buzz.

Van Der Buzz in Business Card Design Starter Kit: Showcase, Tutorials, Templates

What What
These cool playful business cards were created by twin brothers, designers John and Edward Harrison, also known as What What.

Whatwhat in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Combining Techniques

When it comes to developing promotional material for a brand today, the variety of choice is impressive. With all the different printing techniques, the loads of diverse paper and material available and relatively cheap digital technology, the process of designing a business card is limited only by the designer’s imagination. The following business cards rely on both paper quality and printing methods to create a memorable experience.

TAM Cargo
Traditional at first glance, this business card can be transformed into a little cargo transport box. The card was design by Brazilian advertising agency Y&R for TAM Airlines.

Cargo in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Cinch Creative
Design company Cinch Creative printed its business cards on 60-point Blotter paper with a fine natural texture. Thanks to this and the debossed logo and text, the card is a pleasure for both the eyes and hands.

Cinch Creative in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Feelme Crew
This creative business card in the shape of a clapper board was designed by Ralev.com for Bulgarian multimedia agency Feelme Crew.

Feelmecrew-business-card in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Fiverr
Here’s a green approach to business card design. The cards for Fiverr CEO Micha Kaufman are made from recycled paper and cardboard. Moreover, the cards are completely hand-made. See details on Kaufman’s Facebook page.

Fiverr in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Groundflights
This card, inspired by a boarding pass stub, was created by creative agency R3M1X3D for transportation company Groundflights. It is a successful mix of letterpress printing and die-cutting.

Groundflights in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Herofilm
A beautiful business card stylized as a film frame. It was designed by Jimmituanart for Herofilm Productions.

Herofilm in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Philosophy Communications
With a squeezable circle built in, the business card of PR company Philosophy Communications is a two-in-one solution. Brilliant work, wouldn’t you agree?

Philosophy Communications in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Rhino Studio
Premium paper, imitation rhino skin and a stylized typographic logo make this card chic indeed. Designed by Contreforme.

Rhinostudio in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Paper Fortress
This vintage-looking business card, which features die-cutting, embossing and high-quality paper, was designed by the studio Second World for the film production company Paper Fortress.

Paperfortress in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Hear
This fancy silk-laminated card, featuring a spot UV coating, was designed by social media and design company Hear.

Hear Agency in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Gita Ayu
The cool illusion on this business card was achieved with a thin transparent plate that makes it look as though this faux-3D brick is broken. The amazing card was created by Saatchi & Saatchi, Indonesia, for a karate club.

Broken-karate-business-card1 in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Something Completely Different

The cards showcased below considerably expand the parameters of the business card format. It seems that business cards can be grown, played with and even eaten! Look at the craziest business card concepts around.

MODhair
Not only can you comb your hair with this business card, you can also play a classic rock song on it with your fingernail. The card was designed by Fabio Milito for a Rome-based hair salon.

Mod-hair in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Gitam BBDO Spicy
The Gitam BBDO agency uses spice sachets as business cards, associating each of its departments with a particular condiment.

Gitam-bbdo in Business Card Design Starter Kit: Showcase, Tutorials, Templates

BC Adventure Survival Training
The cards of BC Adventure remain extremely useful even in situations where a business card is useless. They are made of organic beef jerky and are good to eat for up to a year.

Beefjerkeybusinesscard-preview in Business Card Design Starter Kit: Showcase, Tutorials, Templates

RDA
To promote one of his projects (an interactive chopping board), designer Sam Gough created 20 wooden business cards, carving his project’s title and contact info neatly into each.

Rda-business-card1 in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Dept of Energy
With its business “cords,� Dept of Energy shows a skillful play on its identity and style.

Doe1 in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Lush
This business card is a thin envelope stuffed with grass seed. The clean design, clever copy and sneaky seed surprise make for an adorable card. Designed by Brandon Knowlden.

Lush in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Taberu Me
For the most desperate self-promoters, peanut business cards are not a bad idea. Taberu Me uses innovative CO2 laser engraving technology to print on the peanuts. But before you hands yours out, make sure no squirrels or chipmunks are around.

Taberu Me in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Wes Thomas
This business card design is an ongoing project of Philadelphia-based industrial designer Wes Thomas. The laser-cut card can be quickly transformed in a cute desktop toy. This is no ordinary concept and is pretty labor-intensive, but who would refuse such a business toy for their desk?

Wes-thomas in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Business Card Galleries

Only the truly unique are remembered. When designing anything for yourself, it’s always useful to look around for fresh ideas. Here are permanent showcase galleries where you can find trends and best practices for business card design.

Tutorials

To get you started on your own business card, we’ve selected some fresh and useful tutorials and guides that cover various issues you might deal with in this area.

Create a Print-Ready Business Card in Illustrator
In this tutorial, well-known designer and blogger Chris Spooner walks you through the process of creating a fun business card with a sketched illustration.

Illustrator-bc in Business Card Design Starter Kit: Showcase, Tutorials, Templates

How to Create a Stylish Business Card Template in Adobe Photoshop
In this tutorial, you learn how to create an elegant minimalist business card design in Photoshop. The source files are available for free downloading.

Flashmint in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Create a Grunge Print-Ready Business Card
Use this tutorial to create a business card with nifty faded brush strokes in Photoshop.

Forcg in Business Card Design Starter Kit: Showcase, Tutorials, Templates

How to Create a Nebula Background in Photoshop
Learn how to design a business card with an astral background.

Nebula2 in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Print-Ready Business Card Tutorial
This tutorial explains how to create a print-ready business card with a clean dark design in Photoshop.

Designers-paradise in Business Card Design Starter Kit: Showcase, Tutorials, Templates

How to Make a Print-Ready Business Card in Photoshop
In this tutorial, you will learn how to create a two-sided business card with crop marks and bleed.

Theprodesigner in Business Card Design Starter Kit: Showcase, Tutorials, Templates

How to Design Your Business Card
This article discusses the basics of business card design and covers some best practices.

Designer-depot in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Business Card Design Walkthrough
Along with other step-by-step tutorials, a detailed case study like this one might be useful to you.

Design-walkthrough in Business Card Design Starter Kit: Showcase, Tutorials, Templates

PSD Tutorial: Design a Dirty Business Card
Learn how to create a simple business card, complete with grungy texture.

Dirty-card in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Business Card Tutorial in Inkscape
Here is a detailed guide on how to design a business card in Inkscape. While the result shown does not look that great, the principles of working in Inkscape are described quite well, so you can get a better result using this open-source graphics editor.

Business Card
If you like the business card shown below, learn how to create it in Photoshop in this tutorial.

Tutorial-freakz in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Making Creative Business Card
This tutorial shows how to make a nice business card in a matter of minutes.

Photoshopstar in Business Card Design Starter Kit: Showcase, Tutorials, Templates

How to Design a Print-Ready Business Card Design in Photoshop
This business card tutorial includes a couple of bonus templates, which you can download in PSD format and use for free.

Tuttoaster in Business Card Design Starter Kit: Showcase, Tutorials, Templates

How to Design Business Card
Learn how to create the unconventional and attractive business card below.

Eyeson in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Grungy Business Card
Another variation of the grunge design is explained in this guide. The image preview and PSD file are free to download.

Thetalentshowcase in Business Card Design Starter Kit: Showcase, Tutorials, Templates

How to Make your Own Photographic Negative Business Cards
Now, here’s a completely different take on business card design. Photographer Steph Goralnik shares his technique for crafting a unique photographic negative business card.

Photographic in Business Card Design Starter Kit: Showcase, Tutorials, Templates

How to Choose Business Card Paper
Paper is an important consideration when printing business cards. The right paper can make your card shine, while poor-quality stock can spoil even a top-notch design. Read this article to learn the key points and differences between various types of paper.

How to Choose the Right Paper
Although quite old, this article contains some useful tips on choosing the right paper for your business card. A solidly written article.

Templates

A template is definitely a great option for those who don’t have the skill to create a business card on their own. But even if you’re a professional designer, you may need the job done very fast or simply want to save time making customizations. This is when a template comes in handy. Below you’ll find a selection of well-designed free and commercial business card templates that you can take advantage of in your own projects.

Free Templates

Most of the templates in this category are free for personal and commercial use, but please be sure to read all accompanying legal usage notes before downloading the files.

I love dA Business Card

This nifty business card design was created by graphic designer depart on the occasion of deviantArt’s birthday. The template is available for free download in both PSD and Ai formats.

DAsocial-by-MonteR in Business Card Design Starter Kit: Showcase, Tutorials, Templates

FreelanceSwitch Business Card Template
This Adobe Illustrator template can be customized for any freelance profession. The pack comes with templates for writers, coders and designers.

Freelanceswith in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Bokeh Business Card | More
The PSD template for this business card is available in high resolution and is ready to print.

Bokeh-business-card in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Free Business Card Template for Photoshop (PSD) | More
This minimalist grayscale business card template is available as a free download at DeviantArt.

Cursive-q in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Free Business Card Design Pumpkin
This “Pumpkin� business card template features 300 DPI resolution and CMYK color mode for professional printing, front and back sides and four color schemes: pumpkin, cream, Indian pink and brown.

Pumpkin in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Construction Hazard Stripes Theme | More
This print-ready business card template is in Photoshop format.

Hazard-business-card in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Free Abstract Blue Business Card Template
This double-sided PSD card template includes well-organized layers and is in CMYK color mode for easy editing.

Ibranstudio1 in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Die Gallery
In this gallery, you’ll find some unusual card shapes, all for free. All files are in EPS format.

Business Card Template
Here is a blank template for a standard US business card. Both JPEG and PSD versions of the template are available for free downloading.

Business Card Template By C in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Noise Modern Card | More
This download pack includes two full-layered PSD files for the front and back. The dimensions are 3.5 x 2 inches, and the resolution is 300 DPI.

Noise-modern-business-card in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Minimax Positivo Business Card Template
The template has six color variations and features a letterpress effect. The template package includes a PSD file, PDF help file and preview image.

Minimaxpositivopreview in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Business Card Template (Vector) | More
A free Adobe Illustrator business card template in 3.5 x 2 inch format.

Buscardtemp12 in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Vertical Business Card Vectors | More
An EPS file containing 18 vertical business card templates with JPG preview.

Vertical-business-cards-vectors in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Free business card templates
10 free business card designs in PSD and TIFF formats.

Visiting-card-pack in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Seextwood Business Card | More
A minimalist template in CMYK mode and 300 DPI resolution. The dimensions are 3.5 x 2.5 inches.

Seextwood Business Card By in Business Card Design Starter Kit: Showcase, Tutorials, Templates

4 Blue Personal Business Card Templates | More
A set of four PSD business card templates in blue. The dimensions are 3 x 2 inches, and the resolution 300 DPI.

Blue-business-cards in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Premium Templates

Pure Style Business Card Template | More
A minimalist two-sided business card design (3.5 x 2 inches) that can fit practically any profession or brand. The template comes in high resolution and requires Adobe Photoshop 8 or higher for editing. Price: $7

Flashmint1 in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Blue Monster Business Card Template | More
This funny template is ready to print and can be easily customized in a vector graphics editor. Price: $4

Blue-monster-business-card in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Business card (set 17) | More business card templates
These cheerful business cards might appeal to people in creative fields. Three license types are available; the basic one gives you this set for $5.

Business-card-set-17 in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Typography Mini Business Card | More
These bright typographic mini-cards come in two styles, grungy and clean, and include a black and white version for low-cost printing. The templates are print-ready and can be edited in Photoshop. Price: $6

Typographic in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Tender Flowers Business Card | More
An original floral design that would work well for wedding photographers. It is print-ready and can be customized in Photoshop. Price: $7

Flashmint2 in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Blue Bubble business card | More
This clean and airy design will appeal to fans of minimalism. It is in print-ready CMYK, 300 DPI, and includes two PSD files and two high-quality JPG images. Price: $5

Blue-bubble in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Black Business Card Template | More
This business card has a rather universal design and would serve a personal brand, company or other project equally well. It is print ready; all you need to do is change the default text. Price: $7

Flashmint3 in Business Card Design Starter Kit: Showcase, Tutorials, Templates

The Black Family business Card Pack | More
These super-original and cute business cards might be good for showing off members of a creative team. They are two-sided, in CMYK and 300 DPI, easy to edit and print-ready. Price: $6

Black-family in Business Card Design Starter Kit: Showcase, Tutorials, Templates

Related Posts

You may be interested in the following related posts:

(al)


© Julia May for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: , ,


Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Smashing-magazine-advertisement in Designing A Facebook Fan Page: Showcases, Tutorials, ResourcesSpacer in Designing A Facebook Fan Page: Showcases, Tutorials, Resources
 in Designing A Facebook Fan Page: Showcases, Tutorials, Resources  in Designing A Facebook Fan Page: Showcases, Tutorials, Resources  in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Despite its privacy issues, Facebook clearly has a key role in global Internet activity. It has become a kind of universal social network, being used for both personal and business needs. For many individuals, companies and organizations, Facebook has become an integral part of their branding strategy and promotional campaigns.

Facebook provides many tools for maximizing the effect of your presence on the social network, most of all by means of business pages, also known as fan pages. Using a variety of applications and Facebook API tools, one can get creative not only with the page content, but with the design, too.

In this post, we’ll give you an idea of how to use Facebook for your business and self-promotional efforts. Below, you will find best practices for custom Facebook fan page designs, with various approaches to creating an attractive, descriptive and engaging Facebook business page. In addition, the selection of tutorials and resources for Facebook fan page development might help you get started with your own effective Facebook presence.

By the way, it’s been two years since Smashing Magazine’s Facebook fan page launched (now with 18,500 fans). We have worked hard to integrate discussions, useful tips and give-aways to make the fan page more appealing and engaging.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #2 is Successful Freelancing for Web Designers, 260 pages for just $9,90.]

Showcase Of Well-Designed Facebook Fan Pages

Giants of the Industry

Big brands demonstrate the best use of Facebook by far. Getting millions of fans may not seem like a big deal for Coca-Cola or Victoria’s Secret, but these companies managed to create fan pages that engage users on a much deeper level than by just asking them to click the “Like” button. An interesting trend seen across this category is of large companies taking Facebook to a new level, putting it at the center not only of their social media campaign, but of their entire online presence.

Starbucks
Currently with the number one fan page for a brand on Facebook (with almost 8 million fans), Starbucks takes a distinctive approach, focusing less on loud entertaining apps and more on high-quality content and beneficial offers for its fans. Starbucks has learned how to effectively use status updates and how to share a lot of interesting, useful and engaging material aside from its product updates. The company also offers a couple of interactive apps that not only are fun (e.g. the Instant Story tab) but that offer tangible benefits (e.g. discount coupons, and functionality that allows fans to manage their Starbucks accounts right in Facebook). The fan page also has an interactive map that links to the company’s regional Facebook pages (just as BlackBerry does, as we’ll see). With no unusual visual indicators on its fan page, Starbucks demonstrates that functionality is at least as important as aesthetics.

Starbucks in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Red Bull
The fan page for Red Bull is by far one of the best on Facebook. By implementing a number of innovative ideas and engaging apps, Red Bull makes the best of its Facebook presence and thus stands out from business pages for other brands. A good example of this is its Twitter stream, which, instead of featuring just Red Bull’s corporate feed, assembles tweets from sponsored sports athletes and allows fans to connect with them beyond Red Bull’s domain. Live Web TV that anyone can view right on Facebook and a variety of fun games also encourage users to interact with the brand. While the welcome page is not in the default menu bar, it’s quite informative and serves as a compact graphic map of the entire Facebook page. Red Bull is also a pioneer of using Facebook as a recruiting tool; adding a careers board to a profile with so many fans makes sense indeed. Bravo Red Bull!

Redbull in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Skittles
Although Skittles’ fan page features two brightly designed, eye-catching tabs (one a graphic presentation with links, the other promoting its “Mob The Rainbow” campaign), the company has set its Wall tab as the default. This is typical of popular brands that don’t require an introduction. It allows fans and visitors to the page to immediately follow the company’s updates and join the conversation.

Skittles in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Coca-Cola
Another giant with a million-plus Facebook fans, Coca-Cola has a fan-centric Facebook page. It encourages active user participation and interaction between the brand and its fans. The landing tab is set to the Coca-Cola introduction, which contains a dynamic box with latest updates and a “Like” button, links to other social network profiles for the brand, a fan highlights strip, and info about the product and the page’s creators (by the way, this Facebook page was created by two Coke fans and then later supported officially by the company). Another highlight of the Coke fan page is photo albums: in addition to some standard product shots and event photographs, many other albums are included, presenting Coca-Cola not only as a popular beverage but as a multi-generational icon. Here is a good example of how to make use of photos on Facebook.

Cocacola in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Twilight Saga
The default tab for the official fan page of the blockbuster series Twilight Saga is a large graphical tab promoting the latest episode, Eclipse. The custom tab incorporates elements of the movie’s website and the trailer, live Twitter updates, links to official websites and other info. Two other custom tabs are dedicated to the second film, New Moon, and the official movie soundtrack. The entire page is rich in content and delivers its information effectively.

Twilight in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

More Beautiful and Engaging Facebook Pages

Room 214
A nice approach to the Facebook welcome page is demonstrated by social media agency Room 214, based in Boulder, Colorado. The default tab, with its nice duo-tone and sketchy font, looks minimalist and attractive, and it focuses on introducing its team members. The “About” tab has a clean two-column layout, with some basic info about the company in the left column and cute roll-over links to the staff’s Twitter accounts, official website, blog, contact page and corporate Twitter page. Another graphic tab covers the agency’s clients. A simple yet well-executed fan page design.

Room214 in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Porsche
The ColorStyler tab on the fan page for Porsche is so darn great that one immediately wonders why on Earth they didn’t make it the default tab? The pure FBJS tab allows users to select a Porsche model and customize its look in a live preview mode, with a nifty color and rims picker. One then can send the Porsche image to a friend or publish it on the page’s wall. This hidden gem makes the entire page shine.

Porsche in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Digital Turf
The fan page for Digital Turf is an interesting and rather confusing case. The page design itself is wonderful: the excellent company presentation, two-level sub-navigation, diverse data and cute style is a feat of FBJS and makes this one of the most attractive business pages you’ll see on Facebook. Here’s the confusing part: Digital Turf specializes in developing Web-building and media solutions for political campaigns and organizations (maybe not exclusively, but that does figure prominently in its list of services). The question is whether this design style communicates the company’s strengths well enough to attract its target audience. If it solved this concern, Digital Turf could turn its fan page, which is awesome as it is, into a Facebook promo bomb.

Digitalturf in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Revision Eyewear
The main tab of the Revision Eyewear fan page features an impressive Flash intro, with bold photographs and transitions and a dynamic “Become a Fan” link. The eye-wear manufacturer also uses Facebook for its charity work; a custom graphic tab on the page explains its causes and displays donation links (the “Become a Fan” button turns into a donation button—very clever).

Revision-eyewear in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Thurston & Betts PLLC
The Facebook page for law firm Thurston & Betts is notable for its “Like Us!” tab. A simple informational scheme in the center, with nice roll-over buttons leading to the company’s website, is a clever solution: neat yet substantial. The tab also includes the firm’s main contact info and a map of its location. It’s difficult to imagine a better Facebook page design for a law consultancy.

Thurston-and-Betts in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Daddy Design
The fan page of Miami-based Web design studio Daddy Design includes two custom tabs: “About” and “Portfolio.” Both tabs use the page’s entire width, which, along with the striking orange color scheme, makes this page hard to pass by. The business page is tied closely to the company’s official website design, and it highlights a neat FBJS portfolio, with links to Daddy Design’s social profiles. It actually creates the feeling of a website within the Facebook page. Great work.

Daddy-design in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

1-800-Flowers
In our opinion, this is one of the best uses of a Facebook business page for e-commerce. By becoming a fan of 1-800-Flowers on Facebook, you can access up-to-date content, send virtual gifts to friends and shop for flowers right on Facebook (via the Flash-based application Alvenda). The company’s “Welcome” page has a simple and attractive grid, consisting of four sections that engage visitors with various activities. Also, the cool promo code field offers a discount to anyone who hits the “Like” button.

1800flowers in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

The Game – Team A
The Game, for the Sony PS3, has two beautiful fan pages on Facebook, dedicated to each of the two teams in the game. The two pages have a similar design, featuring beautiful graphical tabs (and especially fine typefaces) that link to the interactive Facebook applications. The “About” tab includes an interactive worldwide game stats map, which is a nice touch.

Thegame in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Oxelo
Oxelo’s fan page would be rather generic if not for the inventive Diabolo Roller tab, which promotes its new model of roller blades. Built with a Flash app, it allows a nifty 360-degree view of the product.

Diabolo in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Teesey Tees
Teesey Tees use its Facebook presence effectively: it partially implements an e-commerce element from its website that allows Facebook users to browse t-shirt designs in a sleek FBJS gallery, directing them to the regular store for purchases. The fan page also includes a blog and a charming fan-only tab containing a discount code. There is no “About” or “Welcome” tab, and the default tab is set not to the product gallery (which one would expect) but to the Wall. While this is normal for big brands, it’s not so clear why a company with a smaller audience, such as Teesey Tees, would do this. Still, this is an attractive and well-executed fan page.

Teeseytees in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Threadless
Popular t-shirt producer Threadless takes the e-commerce on its Facebook fan page to the next level. Here, the native Facebook tee design gallery is supplemented by a size-selection menu and shopping cart buttons, which direct the user to the cart on Threadless’ website. The customer review section, with its “Share” and “Like” buttons, enhance the shopping experience of this fan page. Threadless also makes good use of the video and photos tabs, which, along with the live webcast section and active discussion board, make for an engaging, community-oriented Facebook presence.

Threadless in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Cranium
Board game Cranium has a beautiful Facebook fan page, which includes several promotional FBML pages. It doesn’t have any JavaScript gimmicks, just cutely drawn illustrations and cheerful colors that make for a positive visual experience.

Cranium in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Mark Meyer Photography
Mark Meyer’s business page is a good example of how to promote one’s personal brand effectively on Facebook. Using FBML and FMJS, the Alaska-based photographer outfits his custom tab with sub-tabs for his blog and photo gallery and an exquisite image slideshow. Status updates are also cleverly done, so that the Wall (the default tab) takes on the appearance of a photoblog.

Markmeyer in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Livescribe
The “Buy Now” tab on the Livescribe Smartpen fan page has an Amazon-ish design: it’s rich in content and options, but may require the touch of someone like Jacob Nielsen to be truly usable. Livescribe effectively uses multimedia on its Facebook page, which certainly presents its product favorably and is good for fan interaction on the page. But we would suggest that the company rearrange the position of its tabs, putting some interesting sections (such as the Pencasts, which are animated Flash videos of handwritten notes and audio captured by the Smartpen) in the main bar, instead of, say, the standard “Boxes” tab.

Livescribe in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Bodum USA
The highlight of Bodum’s Facebook business page is its excellent use of an iFrame to embed the company’s online store and interactive catalogue, which is powered by iPaper, onto the Facebook profile. In other words, Facebook users can shop for Bodum products without leaving the page.

Bodum in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Soul City Church
The “Welcome” tab of the Soul City Church Facebook page is by far the smoothest pearl in our collection of fan page designs. The clean layout, the neat typography and icons and, of course, the awesome combination of black-and-white photography and energetic green elements result in a stunning intro page. It portrays the church as a progressive and contemporary community. Credit for the great job goes to Monster Eyes.

Soulcitychurch in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Diesel
Famous apparel brand Diesel has three out-of-the-mold tabs, the most noteworthy of which is the one labelled “Sex Sells.” It is built on a Flash app and provides a stylish and original showcase for the denim collection of the same name.

Diesel in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Lancome Germany
This one will appeal to those who admire good typography. The “About” section of Lancome Germany’s Facebook page takes on a website-within-a-tab format. It features elegant and polished typography, accompanied by high-quality photography.

Lancome in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Eco-Artware.com
The Facebook business page for Eco-Artware.com features a nice FBJS “Shop” tab. It’s a pseudo-shop, though; in fact, it’s just a featured product gallery, in which both product thumbnails and catalogue categories are linked to the official online store. Nevertheless, the clean grid layout and nice roll-overs for the product images make this a beautiful and useful fan page tab. Eco-Artware.com also makes good use of the “Boxes” tab by setting it as the default.

Ecoartware in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

311
The official Facebook page of music band 311, particularly the “News & Multimedia” tab, is eye candy. Designed in a cool retro poster style, it contains basic info about the band and a built-in multimedia player. A large “Fan Photos” section reflects the band’s commitment to communicating with its fans. Well done!

311 in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Rei
Outdoor gear and clothing provider REI uses its Facebook profile to foster strong interactivity, rather than merely to present a plain front. Its fan page is basically a community portal where the company engages people with its social campaigns and projects. The fan page includes two Flash tabs that feature community pictures, links and fun family games.

Rei in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Desigual
The fan page for Spanish apparel brand Desigual is bursting with color, freshness and style. It is versatile, with various types of promotional and entertaining content, yet not overwhelming. The mood is set equally by great content and classy design elements. Desigual points out that the page was started by fans and then made official by the brand; this is clearly illustrated on the Wall feed, where user-created updates are set to default along with the company’s messages.

Desigual in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Volkswagen
Currently featuring its soccer fan campaign, VW shows amazing use of FBJS on its page. Rich in content, up to date, well designed and heavily supportive of user-created content, this is the best Facebook business page that a popular automotive brand could have.

Vw in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Living Proof
The fan page of cosmetics manufacturer Living Proof is all about interactivity and dialogue between the company and its customers. Chief among its many features is the dynamic Flash introductory tab, containing basic info about the company,a lab tour,a mini blog, links to customer support services and a corporate Twitter feed. The business page also includes an interactive app that helps customers choose the most suitable products.

Living-proof in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Inspired Magazine
Inspired Magazine is one of the few Web design blogs that have customized their Facebook fan page. No fancy applications or high-volume presentations here; a minimalist FBML tab is quite enough to grab the attention of a random Facebooker and give them reasons to “Like” the page.

Inspired-mag in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Sony Ericsson
Current Sony Ericsson promotions are presented via beautifully designed tabs, with videos, contest forms and interactive applications inside.

Sony-ericsoon in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

BlackBerry
Besides its several promotional tabs built with Facebook Javascript and Flash, the BlackBerry fan page features a nice FBJS map with links to local Facebook business pages. This does a good job of integrating the company’s Facebook presence and promoting its local pages.

Blackberry in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Resources And Tutorials

Here is a list of websites and tutorials to help you understand the basics of developing and promoting your Facebook business page.

Facebook Developers
This is the ultimate resource for anyone who wants to take advantage of the variety of opportunities offered by Facebook. Related documentation, forum discussions, wikis and a showcase of best practices for Facebook integration are all aggregated in one place for both beginners and advanced developers.

Hyperarts
A lot of excellent tutorials related to Facebook fan page development can be found in the Static FBML & FBML archive on the Hyperarts Blog. The tutorials are geared to both beginners and advanced developers. The blog also features a series of video tutorials, which we’re sure will come in handy for many of you. Some of the most interesting tutorials from Hyperarts are highlighted below.

All Facebook
On the unofficial Facebook Blog, you will find news, articles, tips and stats related to the world’s fastest-growing social network. An extensive guide titled How to Develop a Facebook Page That Attracts Millions of Fans addresses its subject well.

How to Use Facebook for Business and Marketing
This guide takes a look at the potential of Facebook for business and reviews the various options business owners have in order to be effective with Facebook business marketing. Recommended reading.

Reeses-facebook in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

How to Create a Facebook FBML Template
In this tutorial, you’ll learn how to create a Facebook fan page in Photoshop. It uses a page for a photographer as an example. This is the first in a series; the second lesson covers the coding part. The source files, including the code, are available for download.

Photographer-fan-page-tutor in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Facebook Programming step-by-step tutorial
This tutorial series consists of 22 lessons and covers all aspects of Facebook programming, including application development, displaying fan-only content and creating an interface for a Facebook page.

Static FBML: Not Every Facebook Fan Page Needs an Application
In this tutorial the well-known blogger Alison Gianotto walks you through what a Static FBML is and why it’s sometimes quite enough to create an attractive and efficient Facebook fan page.

Extending Facebook Static FBML Tabs with Dynamic Content
Continuing from the previous guide, this tutorial explains how to add some spice to your Facebook fan page using the DynamicFBML function. You can build an image or video gallery or even a micro-site inside a Static FBML tab quite easily.

Taking Your Static FBML Microsite to the Next Level

Learn how to create sub-nav tab navigation within your Static FBML microsite using only DynamicFBML.

Creating a Custom Facebook Page
This useful guide gives you a head start on building your own fan page on Facebook. The tutorial includes such basics as Facebook page creation, restrictions on Facebook, creating tabs and displaying navigation and content elements using FBML and FBJS.

Google Analytics for Facebook Fan Pages
Another great post by Webdigi.co.uk, in which they show you how to get around Facebook’s limitations. Even though Facebook supports only restricted JavaScript, which is usually not enough for Google to correctly track visitors, the guys from Webdigi.co.uk successfully managed to get all functions of Google Analytics working on their fan page. You can learn how they did it by reading this tutorial.

How To: Build a Facebook Landing Page for Your Business
This is Mashable’s brief guide on how to add and configure a Static FBML tab on your Facebook fan page.

Mashable-image in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Internet Explorer and Static FBML: Using External Style Sheets for CSS
This insightful article discusses aspects of applying CSS styles to your Static FBML application in Internet Explorer versions and other browsers. The post includes an important update that takes into account changes in Facebook’s API that affect the implementation of CSS styles in static tabs.

8 Essential Apps for Your Brand’s Facebook Page
This article suggests a number of Facebook apps you could use to attract fans to your brand’s landing page and to make them return repeatedly.

Add a Custom Tab to Your Facebook Fan Page (Starter Template Included)
Like some of the aforementioned tutorials, this one teaches you how to embed a custom tab in your Facebook fan page. But this tutorial is a bit more detailed than previous ones, explaining how to build HTML and CSS that adheres to the new 520-pixel width requirements set by Facebook, how to add a YouTube video and how to avoid using iFrames. Also, it contains a starter template code with comments.

Facebook Best Practices for Non-Profit Organizations
This Facebook fan page guide is written by Diosa Communications, a company that specializes in social-media consulting for non-profit institutions and small businesses. It’s not exactly a list of best practices in the traditional sense, but rather a number of recommendations on how to set up and promote a fan page to the best effect.

How To Create the Perfect Facebook Fan Page
Some tips you can apply to your Facebook marketing strategy that will put your Facebook Page leaps and bounds ahead of the competition.

Adding iFrames to Your Facebook Applications: 2010
Recent modifications in Facebook’s API further restricted the use of iFrames. For instance, you can’t embed one in Static FBML anymore. iFrames can still be used in the Canvas Pages application, though, which is the topic of this tutorial.

Developing a Facebook Application for Absolute Beginners
Applications have proven to be an essential component of successful Facebook fan pages. They’re an effective tool for enhancing interactivity and engaging users. Fortunately, creating a Facebook application is not that difficult. Learn how to do it by reading this thorough tutorial by Emanuele Feronato.

App-tutorial-image in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Showcase

Not many galleries of Facebook pages exist yet. Still, the ones that do give us a pretty good idea of trends in this area.

Facebook Designs
This gallery is rarely updated, but it features some really cool Facebook page designs that we haven’t seen in other showcases.

Facebook-designs in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Custom Facebook Page gallery
Custom Facebook Page is run by the social media marketing group North Social. The gallery contains over 60 Facebook page designs, sorted into several categories. The most recent showcase is dated December 2009.

Custom-facebook-page in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Facebook Showcase
Facebook Showcase is the most frequently updated gallery of the ones covered here. A lot of inspirational Facebook page designs can be found here.

Facebook-showvase in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Facebook Platform Showcase
This showcase is slightly different. Here you can explore how companies around the world integrate Facebook on their websites.

Platform-showcase in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Customize Your Facebook Fan Page: Tips, Tricks, Applications
A quick overview of basic tips and tricks for customizing and improving your Facebook fan page.

Facebook Fan Page Templates

Many freelance designers and design studios offer customization services for Facebook pages. Standalone fan page templates are less widespread, at least so far. To provide you with the best possible starter kit, we’ve collected Facebook business page themes that you can get either free or at a cost.

Free Templates

Free PSD Facebook Template | Preview | Details
This 520-pixel Photoshop layout of Facebook fan page tab is available for free downloading. If you are looking for a simple graphical presentation for your Facebook page, this template may come in handy.

Layoutspacks-free-template in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Free PSD: Facebook Fanpage Template | Preview | Details
This is a free mock-up Facebook fan page with editable text, posting times and other elements.

FYC-psd-template in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Absolutely Free Cool Facebook Template | Preview| Details
This graphic FBML template, along with the PSD file, fonts and HTML mark-up, is available for free downloading. The package also includes an installation manual.

01-free-facebook-fbml-templ in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Free FBML Template | Preview | Details
You can use this multi-tabbed Facebook page template for free only if you maintain the links to its creators and the copyright info in the footer.

Homegainbusiness-template in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Facebook Template Page | Details
This is quite a different Facebook page template. Basically, it’s a worksheet available in text and PDF formats, allowing school students to construct a Facebook page for a character from a story or some other purpose. The template has been downloaded over 10,000 times and has gotten a lot of positive feedback because it is a new and exciting way for students to comment on their readings. You have to register to download the template.

Tes-template in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Commercial Templates

Photographer Facebook Template | Preview | Details | All FB templates
A sleek graphical FBML tab, with an image gallery, text sections, social networking buttons and a reminder to “Like” the page. The template package consists of source files and the Facebook installation guide. Price: $15.

Graphic-fbml-template in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Corporation Number 1: Facebook Tab | Preview | Details | All FB Templates
A minimalist Facebook page theme, with space for one main image, the company’s logo or tagline, two paragraphs of text and links to social media resources, including an optional RSS feed. The user can also add images, contact forms, videos and other elements to the template (no coding skills are required). Price: there are two subscription plans to choose from, although only one of them (Standard) is active at the moment – $14.99 per month. Free trial option is available, too.

Fan-page-builder-template in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

My Style Facebook Flash Template | Preview | Details | All FB Templates
Among the highlights of this Flash-based FBML template are diverse transitions, multi-tab sub-navigation and a large image gallery in the tab header (760 pixels in width, of course). Instructions on how to upload the template are attached; and the developer offers additional customization services. Price: $18.

Flash-fbml-template in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Website Image Gallery Template | Preview | Details | All FB Templates
This FBML template features a FBJS image gallery, horizontal top menu navigation, social networking links and side images. The website does not mention whether installation documentation is provided; perhaps it is provided upon purchase. Price: $20.

Image-gallery-template1 in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

Facebook Flash Template | Preview | Details
This is another version of the Flash-based “Welcome” tab for Facebook fan pages. It’s actually a mini-site, 520 pixels in width, with three sub-pages, including a slideshow and image gallery. It comes with step-by-step instructions on setting it up on Facebook. Price: $13.

Flashscope-flash-template in Designing A Facebook Fan Page: Showcases, Tutorials, Resources

(al)


© Julia May for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:


  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress