The State of Design in 2012: Six Header Design Trends

• 6 minutes READ

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.

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.


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.

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.

Online Email Template Builder

With Postcards you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.

Try FreeOther Products


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


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.


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.

Create Websites with Our Online Builders

With Startup App and Slides App you can build unlimited websites using the online website editor which includes ready-made designed and coded elements, templates and themes.

Try Startup App Try Slides AppOther Products

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.


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.


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:


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.


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.


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


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.



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.

Keith Bryant

This article was written by Keith Bryant, a member of the DWUser education team.

Posts by Keith Bryant
Never miss an article or news again.

Sign up to get fresh stuff in your email monthly. For those who want to keep in touch with web design and development trends and tools.

Learn More About Newsletter
Cookie Icon

We use cookies to ensure that we give you the best experience on our website. Privacy Statement.

  • I disagree
  • I agree