The State of Design in 2012: Six Header Design Trends

So often, we look at a design trend as nothing more than that – a design trend. But it’s important to look behind these trends, to see the market influences and psychological movements that are influencing and driving them.

One of the most important market influences in web design today is the rapid proliferation of mobile devices that are used for web browsing. This growth will only continue. As of January this year, 8.5% of global website hits came from handheld mobile devices, and the number of mobile Web users are about to hit the 1.2 billion mark.

SEE ALSO: How to Start a Web Design Project [Infographic]

As more users prefer tablets to laptops and desktops, the demand for responsive web design increases. Designing for mobile devices is a completely new ball game, primarily because user psychology and goals are different, attention spans are shorter and bandwidth is more expensive.

Many of the design trends we’re currently seeing are borne out of this evolution towards mobile-friendly web content. Let’s look at some of the header design trends that we can expect to see as mobile technology grows.

Skeuomorphism

Overused according to some (yet often underrated), skeuomorphism means keeping features from old – often physical – designs where those features had a specific purpose or reason. This is often illustrated in iPad synthesizer apps, which come with “knobs” that you can turn, “sliders” that you can move, or “cables” that you can plug in.

Are you looking for responsive website templates and online website builder?

Get Startup Design Framework now!

Use coupon code START50 for 50% off!

In the website shown below, notice how the designer cleverly uses the laptop’s viewport as a container for latest headlines. Other elements in the design are made to resemble real objects. Overall, it emulates a room in a house. Skeuomorphism, in this case, is purely decorative.

skeuomorphic-header-example

On a more subtle scale, this technique is presented in many ways, such as:

  • Textured or “grainy” backgrounds
  • Letterpress
  • Stitched borders
  • Ribbons
  • 3D buttons
  • Metallic shades

skeumorphic-headers-more-examples

Despite antagonism from some elitist designers, skeuomorphic design offers many benefits in terms of usability. For one, it makes interfaces comfortable, friendly and familiar. It creates an environment where users can easily grasp how an application works without having to click the “Help” button. It encourages users to “think for themselves” by enticing them to explore. When used properly, it allows designers to communicate the purpose of an application or website effectively, and helps users find what they need faster. Speed, after all, is very important in mobile browsing.

Well-used skeuomorphism addresses the needs of the user more than it does the ego of the designer. With good reason, many designers will continue to use it — at least until another trend comes along.

Centered Headers

Mobile devices sport smaller screens and lower resolutions than most computer monitors do. Centering page elements adds visual appeal and balance to a page viewed at smaller resolutions. At higher resolutions, it adds some weight to the identity of the web site, perfect for emerging brands.

centered-headers

Large Typography

Quite a number of current websites display fonts in gargantuan proportions. This makes it easier for users to view the text on a tablet or smartphone. It also has an added benefit: more impact with fewer images. By cutting down on graphical elements, and using effective typography and carefully picked fonts, users do not have to spend a lot of bandwidth just to see the main message on a web page. Websites designed this way are appealing to mobile users. As the mobile market continues to grow, we can expect this design trend to last a long time.

Large letters grab attention. Designers use it to convey the purpose and goal of a website clearly yet effortlessly. Zurb’s headline below delivers a deep message to customers in only four words:

Kevin Thompson’s massive header will let you know upfront that this is a personal, not a commercial website. The sharp bold text is balanced out by the friendly greeting at the top left corner of the page.

Call to Action

Commonly used by app websites, a call-to-action masthead is composed of two main parts: the slogan or the pitch, and the sign-up button. Studies show that placing the call-to-action in the most prominent part of a web page — in this case, the header — improves conversion rates.

Shoplocket integrates an entire sign-up form in the masthead. Just enter your username and password, and you’re ready to start selling. Users do not have to load another page in order to fill up a form, and this is a good thing. When browsing through websites on a mobile device, the fewer pages you load, the more bandwidth you save.

cta-shoplocket

Glitch presents two call-to-action buttons on their masthead. The primary button (“Sign Up to Play”) is larger and more prominently colored. The secondary button, on the other hand, is much smaller and lightly colored. This draws the user’s attention toward the more urgent action.

cta-glitch

Call-to-action buttons come in many forms. They could let customers buy a product, or open a page where they can learn more about it. The landing page for Angry Birds: Space has four equally prominent call-to-action buttons that give customers four options to buy the game:

cta-angry-birds-space

Illustration and Vector Art

Illustrations help convey a human-centric brand and give the overall design a friendly, informal tone. Web designers use this as an opportunity to express their creativity. Additionally, many websites use illustrations to demonstrate instructions or to provide clarity.

Illustrations in web design come in various themes. The Neighbourhood uses an environment-themed illustration for its header.

the-neighborhood-illustrative-header

Made By Chipmunk’s illustrative header serves another purpose. One of the chat bubbles in the artwork shows a snapshot of Chipmunk’s latest work.

chipmunk-illustrative-header

Iutopi’s panoramic header entices you to dive below the surface (quite literally, in fact).

iutopi-illustrative-header

The surrealistic tone of these illustrations complements well the interactive (yet surreal) feel of many touchscreen mobile devices.

Left Sidebars

Many websites are taking the header from across the top and squeezing it into the sidebar, along with the rest of the navigation. This helps avoid vertical scrolling to reach content on a small mobile screen; it also takes advantage of additional real estate on widescreen desktop monitors. The new designs for Smashing Magazine and the Notepad++ website (among many others) demonstrate this.

According to Jakob Nielsen, renowned authority on web usability, “web users spend 69% of their time viewing the left half of the page and 30% viewing the right half. A conventional layout is thus more likely to make sites profitable.” This means that when searching for direction, most users look at the left side of the screen first. To help visitors understand the structure and identity of a website faster, it’s a good idea to position the menu and the branding header flush left. Amazon and other marketplace websites place their product menu on the left side of the page for this reason.

sidebar-header-examples

Conclusion

Will these design trends linger? Or will they be replaced by other “next big things” in design? As more and more people use mobile devices to scour the web for information, proper skeuomorphism, minimalism and smart typography are here to stay. The others? We’ll see. Only time will tell.

This article was written by Keith Bryant, a member of the DWUser.com education team. DWUser offers tools for web designers and developers, including EasyRotator, a free jQuery slider builder for WordPress and Dreamweaver.

Newsletter

3 Comments
  1. JoAnn Chateau May 24, 1:08 am

    Like your specific focus on header design, which is so important. A great article to help organize my thoughts. Bookmarked.

    Reply
    0
  2. Navigator Multimedia May 24, 2:18 am

    Mobile Internet users are more often task-driven, not online for the pleasure of browsing. Snappy and prominent calls-to-action will certainly accommodate this sensibility. But as mobile Internet usage grows at an astounding speed, we can expect user preferences and contexts to change as rapidly as the “trend” develops.
    However. User expectations may change, but simplicity of use seems to have stuck around since personal computers were made accessible to the masses in the 1980′s . Perhaps we can depend on that.

    Cheers,
    Sarah Bauer
    Navigator Multimedia

    Reply
    +1
  3. Saya May 24, 5:24 am

    Keith, this was one of the best article I read for the website layout with good examples and facts .
    Tkx

    Reply
    -2

Leave a Reply

*
* Minimum length: 20 characters