5 Web Design Trends Emerging, Fall 2014

The web just exploded.

so trendy blog cover imageOK, I exaggerate. But it hasn’t even been a year since I wrote “8 Sizzling Hot Web Design Trends for 2014” and here I am again, just seven months later with five new web design trends that are shaking up how we interact on the web.

Images keep getting bigger, webpages keep getting longer, animation is everywhere and menus—well, do we really want to get into that? Surely, there must be some method behind the madness.

 

1. Big, bigger, ginormous! The case of the full-screen image

There was a time not long ago that we crammed every piece of content possible above the fold of a webpage, but this practice has fizzled into the annals of history. Now, we crave beauty. We crave elegance. We crave images that fill our whole screen. Sure, there might be a little text and a logo, but there is often little else other than one big beautiful image.

Why are web designers doing this? Is there a purpose aside from looks? The answer is yes.

Aside from looking awesome, this technique is effective for getting users to scroll down the page. Once a user begins to scroll, chances are good they will continue down the page to soak up more of your wonderful content.

screenshot of a website: jumo

Jumo

More than just a big image, this website adds something extra by including an on-scroll animation that helps show the elegance of the product.

More: Brooklyn Soap, Pannizza

 

2. Would you like fries with your hamburger menu?

What was once seen only on mobile websites is now on desktops everywhere. The hamburger menu may be here to stay.

An icon or button used to indicate that there is a full menu hidden away, the hamburger menu consists of three horizontal lines—two buns and a patty. Click or tap on it, and the full menu is revealed.

There are two main advantages to this technique, real estate and consistency. Menus and navigation can take up a considerable amount of space on a screen. Hide the navigation and you have more space for content. Secondly, it’s best practice for a website to be consistent across devices. So, if you use a hamburger menu for your mobile site, you may want to use the icon across devices.

A word of caution about this trend: Although it can present multiple design advantages there are still many users who have not quite embraced this icon.

screenshot of a website: berlin connect

Berlin Connect

By combining the hamburger icon with the word ‘menu’ the navigation become significantly clearer.

More: Cupick, The New York Times, Blue Lagoon Iceland

 

3. A spoonful of animation makes the medicine go down

Animation on the web has been around for a while but only recently have we embraced it as a tool for a better user experience. Animation on the web has traditionally been reserved for big sweeping production numbers, but sometimes it is the subtle effects that make the biggest difference.

The animation trend of today is all about the little details: the spaces in-between, such as navigation, scrolling, buttons, page transitions and more.

This web design trend is so awesome that earlier this month we wrote an entire post just about it: “5 Areas in Web Design Where Using Subtle Animations Makes a Big Difference.”

website screenshot: square

Square

Subtle glow effects on buttons and zooms on images create a more complete user experience.

More: Stopka, Volkswagen, Nike, Jamba Juice

 

4. What do a mime and a button have in common? They’re both stuck in a box…

OK, I get it lame joke. I will try not to do it again.

Often dubbed as “hollow” or “ghosted,” these buttons are characterized by transparent backgrounds and solid borders around them. Purely stylistic, this trend is seen with increasing frequency.

Although hollow buttons make no significate change to the usability of your website, this button style has the unique ability to blend with the landscape of your webpage without being as disruptive as a standard button, or as subtle as a simple text link.

screenshot of website: Papaya

Papaya

Simple and direct, the “Buy Tickets” button embodies the quintessential look of this visual trend.

More: Trippeo, DSTLD, QuickChat

 

5. Divide, scroll and conquer

Webpages are getting longer—much longer. What used to be five or six webpages is often now one large page of content goodness. Great. But it does come with a challenge: how do you divide the content and maintain hierarchy of information?

To this, many solutions have arisen, but lately there is one that has become increasingly prevalent. This style can be characterized by breaking chunks of content into separate full-width horizontal bands. Typically these bands alternate between a photograph and a content-heavy section, but they may also be divided by color backgrounds.

screenshot of a website: Z systems

Z Living Systems

This website exemplifies how to overcome the design challenge of having large amounts of unique content on a single page. In it, each section of content is separated by an image that helps tell the story of their brand.

More: Pasadena Conservatory Of Music, DSTLD Our Story, Oneupweb Web Design & Development

 

See you in the bitstream

Every day, designers, developers and savvy business people are discovering new ways to make the web a better, more exciting place.

Sure, in a few short years we may find ourselves laughing over the folly of full-screen images and the lunacy of subtle animation. But for today we continue breaking boundaries and exploring the capabilities of tomorrow.