25 Inspirational Header Designs

The aspiring designer should consider the header the emblematic head of the Web design dragon: without it, the rest of a site and all of its otherwise hefty content is left relatively useless. Headers function all-at-once as an aggregate source of information for any user who stumbles upon a site, in addition to being the visual banner for a brand and its stylistic direction. The header is your make-or-break chance at attracting the attention of your core audience, making design choices that much more important.

Bloggers of all Kinds

Bloggers of all kinds

The strategic placement of two archetypical bloggers typing away at their desks immediately and effectively conveys just what the blog is shooting for. The design entices readers with inquisitive, emboldened headlines and a simple layout of buttons that get right to the point.

Sprocket House

Sprocket House

With an eye-catching old-world feel, the design immediately demands attention, from the rustic appearance of the site to the subdued red text that, though appearing slightly faded in the background, stands out thanks to a nice use of contrast.

Matt Hamm Portfolio

Matt Hamm Portfolio

This designer wisely throws an avatar into the upper-right-corner of the space – the area a Web reader’s eyes instantly go to – to imply a “meet the expert” type of tone and level of professionalism.

Diamond HTML

Diamond HTML

With a cut-off design that symbolically slices like a diamond, DiamondHTML is simple and clean, with a clear demonstration of what the site is aiming for and what content to be looked at.

Urban Landscape Lab

Urban Landscape Lab

The use of black and white is a chic way of employing what the modern city is all about, as well as visually telling just what the business’ organizational goals are.

Rareview

rareview

The “light on the horizon” vibe demonstrates not just a nice use of color variation, but a pleasant representation of what the business’ designers represent creatively.

tutCandy

tutcandy

The header does a great job of pushing a lot of colors and placement of text without being over-the-top or intimidating, serving as an effective banner and an even better characterization of candy.

Made in Space

made in space

Made in Space succeeds by having a clear style that escapes any traces of boredom, taking on a more creative, “throwback” feel to their branding. The design also succeeds in putting its name and button right to the forefront.

NARFSTUFF

Narfstuff

Straightforward yet creative, Narfstuff puts emphasis on the “interface” aspect of their design, making a unique use of positioning and mild color contrast.

Tennessee Visitor’s Guide

Tennessee Visitors Guide

Not wasting any time, the design literally zooms in on Tennessee by incorporating a map and a background selection of the state’s finest attractions. The site has a basic but effective tactic for winning over audiences.

XHTML CSS Expert

XHTML CSS Expert

Using an all-too-real visual of how cut-and-paste coding can be, the site tactically takes on the intimidating subject with a lighthearted design that boasts a seamless and easy to read “left to right” design flow.

BeanDullo

BeanDullo

Sarcastic and in-your-face, the design is relatively simple, doing all of the hard work for the person stumbling upon the site by circling in red what the organization deems most important.

Kevin John Gomez Portfolio

Kevin John Gomez Portfolio

Centering in on the subject of the site, the design makes nice usage of white space and creativity with fonts.

Cultfoo

cultfoo

Though a little overstated with imagery, Cultfoo does a great job of garnering attention and making a mesmerizing use of color, highlighting in different colors atop the graphic words that embody the purpose of the site.

PartTimePost

PartTimePost

Part Time Post takes the exact imagery of what the job search looks like and makes a playful cartoon out of it, while simultaneously pointing to all the necessary resources of the site with easy-to-read text.

That indie Dude

That indie Dude

Nothing characterizes an indie dude more than the faded orange tones put into place and the goatee-bearing character perfectly positioned next to a personalized set of text boxes.

Matt Portfolio

Matt Portfolio

Though somewhat daunting at first glance, the abstract imagery and coursing flow of color from image to image is attention-provoking enough to captivate readers.

Web Designer Depot

Web Designer Depot

Like any self-described depot, this header is an appropriate hodge-podge of images and dark colors with the logo making for a nice contrast in the center-right, adding some order to the chaos.

Michael Dascola Portfolio

Michael Dascola Portfolio

The portfolio design thinks outside the box by being thematic and making a careful, if not masterful use of positioning.

Living Design

Living Design

The header design lives up to its title, representing all things contemporarily considered as “living” and taking a risky design choice into a bold and thought-provoking territory.

Le 28 Thiers

Le 28 Thiers

Impressively understated, the design’s transition of red color, combined with the contrast of brown, make for a sleek header design.

Hotel Rottnest

Hotel Rottnest

Feeling like a visual journey from top to bottom, the site’s design itself feels like an experience, from the vantage point to the trek down the walkway to the “welcome” sign.

Chedonline

Chedonline

With a basic brown and a very minor but tasteful contrast of color, this design proves how less is more.

John Joubert Portfolio

John Joubert Portfolio

Taking advantage of symbolism and using placement to create a sense of order, this design is yet another example of how a message can be fine-tuned with the most simple of elements

Beta Blog

Beta Blog

Employing a new-age storybook theme, this blog header design is both unique and alluring with its use of cool colors.

Advertisements

One thought on “25 Inspirational Header Designs

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s