Noupe

Noupe

Link to Noupe

From Head to Foot: Showcase of Beautiful Header and Footer Designs

Posted: 03 Jul 2012 12:56 AM PDT


  

Studies show that the website header is one of the first things a visitor sees on your website. That is mainly due to the way we are used to browser information on the computer presented from top to bottom, and due to the way HTML is built with the header being the first thing it’s loading on the page. Thus the importance of the header.

A beautifully designed one can help make a difference when attracting visitors to your website and getting them to stay awhile. Of course, content is still the most important website element, demonstrated by the latest Google algorithm updates, Panda and Penguin. But no matter how good your content is, if the visitor decides not to stick around long enough to see it, then your website suffers.

A visually appealing header design can assist in this department. To further add to its importance, a header often contains the website’s navigation and logo. Having solid, user-friendly navigation facilitates the browsing of your content and keeps users on your site for longer.

A website footer is like a book’s foot note. When you need more information, usually you find it there. In the case of a website, a footer usually features copyright information, a second navigation and in some cases contact details. But the footer has a more important role than that. If a visitor has made it to the bottom of the page, that tends to mean they are hooked. They have gone through your offerings, and are now looking for more. So it is important to keep that in mind as you build yours.

Below are a few examples of beautiful header and footer designs that stand as effective testaments to the roles these web design elements play.

Header Designs

Cult-Foo has probably one of the most well known header designs around the design community. The use of colors and pixelation effects is stunning.

Cultfoo

Corvus Art uses a beautiful canvas effect with awesome illustrations and a functional menu to achieve the desired visual impact.

Corvus Art

Merchand de Trucs is like a story of its own. The overall feeling of the header is simply “Welcome! What would you be interested in?”

Merchand de Trucs

Viget Inspire has a simple yet powerful header. The menu is basic and very functional.

Viget Inspire

Glamping‘s vivid illustrations give an overall feel of delight. It bids you to stay longer and see what it’s about.

Glamping

Ten 24 Media‘s header invites you to “Enter the Show”, and join the game if you will. Hurry if you don’t want to be left out.

Ten 24 Media

Komodo Media‘s header is a preview for the wild and beautiful design resources available there. Brilliant use of illustrations.

Komodo Media

Octwelve is another great example of the use of an illustrated header. The author uses the header to introduce himself and his skills.

Octwelve

That Indie Dude features one of the best uses of Twitter integration in the header around the web.

That Indie Dude

Ozon 3, the header makes you think of ecology and the concept of “eco-design”, as one of the categories of the blog also suggests.

Ozon 3

Pixel Resort has a beautiful animated header. The overall feeling is, as the title suggests, one of relaxation and joy.

Pixel Resort

Helmy Bern features one of the most innovative headers and menus on the web. The stitched cardboard design does the job well, and raises the eyebrow of the visitor; making them want to see more.

Helmy Bern

PSD Layout‘s header suggests many things coming together in harmony and creating the web layout. The message is clear and the design is great.

PSD Layout

Koko Digital has another header that makes excellent use of illustration and really stands out on the web.

Koko Digital

Larissa Meek uses a very simple, personal, and efficient header. Need we say more?

Larissa Meek

Dana’s Garden…as the subtitle says: “A storybook setting for memorable events”.

Dana's Garden

Blog Solid makes excellent use of Photoshop brushes and effects.

Blog Solid

Sprintime Tennessee, “Tennessee is calling”…the beautiful landscaped header almost single-handedly makes you want to be there.

Sprintime Tennessee

Bits and Pixels has a simple, yet effective design. This header features a beautiful logo and diagonal menu.

Bits and Pixels

Toucoleur‘s header is an amazing blend photo-manipulation and illustration.

Toucoleur

Veerle’s Blog is probably known by nearly every designer. Not just the website, but also the talented designer behind it. Nothing more to say than an amazing website overall with a beautiful illustrated header.

Veerle's Blog

20CM Records‘ header is for a Romanian hip-hop band, and the functionality is quite stunning. On the push of the button the light is turned on or off and the disk is rotating and playing one of their beats. Truly beautiful.

20CM records

Ernest Hemingway Collection has an amazing storybook-like header featuring the journey through the life of one of this highly regarded American author.

Ernest Hemingway Collection

Footer Designs

Black Sheep Brewery‘s beautiful use of footer space features the mascot of the brewery reading a sign saying “To the Baa..r”. Excellent integration of Twitter here also.

Black Sheep BreweryReady made Designs features another great integration of Twitter in the footer, this time with Facebook also. The middle of the footer is used for the most recent blog posts.

Ready made Designs

Sand and Starfish has a beautifully illustrated postcard blog footer, inviting users to subscribe to the posts RSS and comments RSS.

Sand and Starfish

Golden Boy Media‘s organized footer with a good Twitter and newsletter subscription integration shines. The left column is used for information where you can reach the company both online and offline.

Golden Boy Media

Inchoo has a beautiful multiple row, multi-column footer featuring a contact form, Twitter integration, social media reach and services offered.

Inchoo

Pound and Grain uses the footer to summarize the services they offer to effectively drive the point home.

Pound and Grain

Visionssuche is an example of a simple, yet beautiful, use of the footer to display the copyright information and website sections.

Visionssuche

V Dezign Studio‘s footer features a beautiful and creative “Back to top” section.

V Dezign Studio

Chriswi has an amazing illustrated footer which includes a contact form and social media information.

http://www.chriswi.be/

Keith Cakes uses the footer in a very efficient way, displaying the running schedule, address, map and telephone information for the business.

Keith Cakes

InfinVision uses a creative footer featuring social media info and contact information.

InfinVision

Gauvain Bricoult‘s footer doesn’t do much in terms of functionality, but it sure says something in terms of beauty. Amazing design with a “Back to top” button for user’s convenience.

Gauvain Bricoult

Matthew D. Jordan has a clever and impressive footer. First of all the message “It’s You, It Was Always You” brilliantly fits the site, and the contact box…well, we’ll let you discover that on your own.

Matthew D. Jordan

Munch 5-A-Day employs a beautiful, organized footer featuring a newsletter subscription module, social media links and copyright information.

Munch 5-a-day

Mike Dascola has an amazingly creative footer displaying the different awards won by the website as well as social media info.

Mike Dascola

Simply Artifice‘s extensive footer features a beautifully designed contact form.

Simply Artifice

Jay Hafling is another extensive footer example with 2 sections. A section presenting the services the website offers and another with the most recent blog posts organized in columns.

Jay Hafling

What Do You Think?

We would really love to hear your opinions on the importance of header and footer designs. Do you know of other websites with amazing header and/or footer designs that were not featured here? What were some of your favorites from the showcase?

(rb)

Saul Bass: The Evolution of an Artist

Posted: 02 Jul 2012 01:05 AM PDT


  

The film titles, the American graphic designer, Saul Bass designed between 1954 and 1995 not only helped bring graphic design to the attention of Hollywood, and to the forefront of the sixties art movements, but revolutionized the way we watch films. From being regarded as an annoying legality – the only way to give credit to the hundreds of people that worked on the set – his minimalistic, conceptual sequences helped film titles become an integral part of the story and ultimately the whole cinematic experience.

Yet this was only one part of his legacy. As this essay shows, it was his ability to evolve as an artist, adapting his unique vision to a huge range of material, that made him arguably the most influential American graphic designer of his generation.

A Cinematic Revolution

With a smile the projectionist slowly read the handwritten note sellotaped to the canister: "PROJECTIONIST: PULL CURTAIN BEFORE TITLES"

What a strange request! It was the opening night of the latest Frank Sinatra vehicle- the Man with the Golden Arm. The opening night of a film so graphic in its depiction of heroin addiction the MPAA had refused it a certificate. What, he thought, could a two minute title sequence have to do with all that?

Shrugging his shoulders the projectionist discarded the note, wound the film, turned down the lights and pulled the curtains.

The audience’s stunned silence on that opening night may have shocked the projectionist, but for Saul Bass their reaction was very close to what he was aiming for. Very close. What he didn't quite reach was that level of perfection, that extra yard, only an artist of his caliber could comprehend. From his foundation in the European school of graphic design to his collaboration with some of Hollywood's most legendary directors, that would take him a whole life time.

Learning His Trade

From the prominent baseball player striking a ball so hard it explodes into the words "The Breakfast of Champions" to the bright-faced housewife thrusting her Coca Cola bottle through the words the "Hit That Saves the Day.” The brash images and taglines on the streets and magazines of 20s and 30s America dazzled Saul Bass as a child, but it was the roots of this culture – the old world sensibilities of the Europeans – that lured him into graphic design.

Brought up in New York, he saw the country's first exhibits of the European modernists at the Metropolitan Art Museum– not only the paintings of pioneers such as Vincent Van Gogh and Paul Gauguin, but the compositions of contemporary designers such as Josef Albers and Herbert Bayer. Their success gave Bass the hope that the art he admired from American counter culture – pulp fiction, the lost generation, bohemianism, jazz – could, one day, become part of the mainstream.

The New Swiss Style his teachers taught him on his graphic design course at Brooklyn College both embraced and tempered his ideals. Under Gyorgy Kepes, one of the many Central and Eastern European teachers that immigrated to American in the 30s and 40s, Bass learned an effective design did not have to conform to societal values. While the social realist designs of the American posters, for example, sold a product through a collective view point- such as society’s idea of female beauty – the more measured, constructionist approach of the New Swiss Style tried to sell it through the company’s or an individual’s.

The following two Coca Cola posters, the first from an American graphic designer in 1947 and the second from a Swiss graphic designer in 1953, highlight the difference in styles.

As you can see the differences are marked. The American designer has created a realistic, yet idealistic scene of a couple on a ski slope waving to a friend who is offering them a bottle of Coke. By drawing from the perspective of the friend, the designer can place the bottle of Coke in the center of the picture so it looks like it is the Coke and not the friend that is the focus of the couple’s attention. The tagline only reinforces the message: Coke is a welcome and sociable addition to any wholesome activity.

The European poster is no less idealistic, but the careful placement of its images gives the impression that it is offering rather than spelling out the message. What is not in the poster is as important as what is. While one can see a trumpet, a music stand and a chair, for example, there is no musician. But where is the musician? Juxtaposed against the hand drawn outlines of musician’s tools, the realistically drawn Coke and sign signifies that a sip of Coke has jolted him or her back into reality. The designers leave it up to the consumer to imagine how that time away from work should be spent.

The European teachers weren’t rejecting the American approach, but promoting their theories in a society looking to oppose the political propaganda of Soviet realism. It was up to Saul Bass and his contempories, to mold them into something more American.

In the following poster for the Champion (1949), Bass attempted to combine the New Swiss style with the realist art of American pulp fiction.

Putting It Into Practice

Despite that Hollywood was struggling, Saul Bass's migration to Los Angeles in 1947 was a clever career move. It was true that television was stealing a huge portion of Hollywood’s audience. It was true that the government was suing the Hollywood majors for violation of the anti-trust laws – their victory in the 1948 Paramount Case would all but end the studio system that had dominated since the 1920s. Yet it was equally true that these same factors were forcing the majors to turn to people who could create something different.

For the first time since the introduction of the Hays Code in 1930, the creatives and not the executives were calling the shots. When the filmmaker Otto Preminger first hired him to design the film titles for the 1954 film Carmen Jones, Bass not only knew that he hired him out of respect for his talent, but that he would give him the freedom to express it.

While in retrospect his flaming rose didn’t quite do justice to the film’s core themes of racism and miscegenation, the idea of expressing a film's concept through one simple image, was for those times, highly innovative. Up to that point Hollywood had mostly listed the main players over a pretty but basic background. And even then audiences rarely saw them – most projectionists didn’t open the curtains until after they had finished.

By introducing ideas from the New Swiss Style, Bass made the film title an integral part of the cinema experience. As he stated in the documentary Bass on Titles (2006) he approached each film title with the same three point approach he would use with any other design project.

  1. He saturated himself with knowledge of the company.
  2. He made sure he understood the vision of the company.
  3. He didn’t try to symbolize a point of view.

His approach was far more successful in his next film for Otto Preminger, the Man With the Golden Arm. Preminger's vision was to represent the reality of drug addiction without judging the morals of the main character. Used to Hollywood representing addicts as drug fiends, it was a vision that Bass knew would challenge the sensibilities of the audience so he sandwiched the credits between a series of straight and off-kilter lines. By the time they came together to form the foreboding jagged arm, the audience knew they were about to witness a film that would step over the lines of traditional values.

The Experimental Phase

It is a shame that many people regard the Man with the Golden Arm as the peak of Bass's career when it was only the first of a series of film titles in the 50s and 60s that would increasingly stretch the boundaries of both technology and his art.

A year later he contributed a 7 minute end credit for Around the World in Eighty Days(1956). Its extravagance reflected a film that with its three hour running time and huge cast of A-list stars was one of the most expensive of its day.

For Vertigo (1958), the first of three titles he designed for Alfred Hitchcock, he took the audience through a woman’s eye and into the hypnotic swirl of colors that represented her mind. Though based on a simple image, the sequence had a story like structure – a beginning (entering through the eye), a middle (traveling through the swirl of colors) and an end (coming back out of the eye)

The Big Country (1958), a live action piece, further developed the idea of the film title as a mini story. Depicting a family's journey to the Wild West, the sequence acted as a prologue to the rest of the action.

For his next two films for Hitchcock -North By Northwest(1959) and Psycho (1960) – Bass combined the techniques of kinetic typography with the constructionist approach of the New Swiss Style. In North by Northwest he used a building as a grid for his typography.

Interestingly, for West Side Story (1961) Bass and the director Robert Wise decided to show the title credit sequence as an epilogue. This they thought would lessen the impact of the film's tragic ending.

Its striking symbolism, its story like structure and its use as both the prologue and an epilogue of the film  - Bass's film titles for Preminger's Walk on the Wild Side (1962) almost condenses all of his trademark ideas into one sequence. The only thing that is missing is the creative use of typography.

Four years later Bass would bring all these elements together in what would prove to be one of his last film title sequences for 20 years – the audacious opening to John Frankenheimer's Grand Prix (1966).

Yet despite its technical and filmic brilliance Grand Prix was an example of film titles around that time becoming, as Bass stated, a “tap dance” of their own. “Fancy titles became fashionable rather than useful,” he told the Sight and Sound Magazine, “and that’s when I got out.”

Finding His Voice

Saul Bass moved into filmmaking, directing among others the Oscar winning short the Man Who Creates (1968) and the science fiction feature Phase IV (1974). Both excellent examples of his now trademark ability to combine striking images with literate and tight storytelling (please see below for links to his films). For the opening sequence of Phase IV, for example, he cut together real footage of an ant colony to show their evolution from harmless insects to an intelligent and dangerous force.

If such inventive works had continued we would be talking about a great filmmaker. Unfortunately Phase IV flopped. From being one of the darlings of the film industry, Saul Bass found himself having to reassess his career.

In retrospect it helped rather than hindered him. Seeing how far away his later work had gone from his original aim of understanding the vision of a company, he decided to return to his roots as a graphic designer. Between 1967 to 1991, Saul Bass designed a series of logos that, seemingly effortlessly, fulfilled each criteria of the 3 point approach without ever having to compromise his distinct style and voice.

The Finished Product

With Hollywood facing strong competition from the independents, they again turned to artists such as Saul Bass for inspiration. From 1990 to his death in 1996, Martin Scorcese – a great admirer of Saul Bass’s work – hired him to design the film titles for Goodfellas, Cape Fear, Age of Innocence - and for what proved to be his epitaph – Robert de Niro's descent into the neon lit hell of Casino.


As one can see this is no tap dance. Instead of harking back to what many would perhaps, unfairly, regard as his signature – his cutouts and hand drawn animations – he used modern technology to create a sequence that fit perfectly with the film's themes of greed and corruption.

His Legacy

The sequences Bass designed for Scorcese exposed his back catalogue to a whole new generation of movie-goers. On You Tube for example you can find a array of homemade film titles paying homage to his distinct hand drawn style. Picking up on their interest famous Hollywood filmmakers have hired designers to create titles very similar to his early animations and cutouts. The film title for Steven Spielberg’s Catch Me as You Can (2002), for example, is similiar in both tone and style to Bass’s title for Around the World in Eighty Days.

Unfortunately one feels such work is only cashing in on the popularity of his earlier work. As this essay shows Bass experimented with a range of different styles; unless it suited the material, he would never have thought about about repeating himself. In this respect the designers most profoundly influenced by him are those who have looked to find their own style and perspective.

The contemporary graphic designer Kyle Cooper is more influenced by Bass’ literate approach to film title design than by his designs. As he states “story based film titles are something that have always been more comfortable to me. And by story I mean specific backstory, but also a metaphor – a poster like pun that has to do specifically with what the film is about.”

His film titles for Seven are, even for Saul Bass, a perfect example of how to prepare an audience for what is at times a horrific film.

There are many other examples of modern film and even TV titles influenced by Saul Bass’ work. Some are listed above, but can you think of any others that share aspects of and even pay homage to his vision? Of course, as shown, Bass was continuously looking to push the boundaries of his art, using a variety of techniques.

From this perspective do you think that the graphic designers who have paid homage to him have truly captured the essence of what made him one of the greats? What aspects of his work do you think are the most important for modern graphic designers to take on board? Finally, how have modern designers evolved film title design since Bass’s heyday in the 1960s? What film titles influenced Saul Bass when he made his comeback in the 1990s? Leave us your thoughts in the comment section.

Links to Other Work by Saul Bass

Why Man Creates
Phase IV
A Short Film on Solar Energy
Quest

Title Champ
Saul Bass – Documentary

Its a Mad Mad Mad Mad World
Ocean’s Eleven
A Personal Journey
Goodfellas
Seconds
The Victors
Cowboy
Not With My Wife You Don’t
Such Good Friends
Bunny Lake is Missing
The Cardinal
Age of Innocence
Cape Fear
Facts of Life
Saint Joan
The Big Knife
Trapeze
The Human Factor
Spartacus
Anatomy of a Murder
Seven Year Itch

(rb)