The web is a constantly changing entity–what’s hot now may be passé in a few months. With that in mind, here are some design/functionality trends that have become more prevalent in 2013 and will carry on into 2014.

FLAT DESIGN
Flat Design is marked by a simpler, cleaner look, emphasizing content by:

  • Use of bold colors
  • Elimination of drop shadows (or use of very subtle ones)
  • Elimination of textures
  • Clean typography
  • Two dimensional flat illustrations/icons

Flat design can be particularly beneficial on mobile devices where a clean, legible interface is essential.

Windows8

Flat design is featured prominently in Windows 8.

Examples of flat design.

RESPONSIVE WEB DESIGN
Responsive web design allows sites to automatically adapt to the screen size of the device on which
they’re viewed.

responsive

Some of the benefits of a responsive site include:

  • Elimination of the need for a separate mobile site
  • Smoother user experience since the responsive site is optimized for the device on which it’s being viewed
  • Google endorsed for mobile SEO as it makes it easier for their algorithms to work with a single url
  • Faster content update since only a single site is involved

Examples of responsive web design

INFINITE SCROLLING
As a user scrolls down a page, more content loads automatically. This precludes having to wait for pages to
preload–making for a more efficient browsing experience–especially for heavy content sites.

infinite scroll

In particular, sites with user-generated content can benefit from infinite scrolling. Also where content is
represented by images and the user isn’t looking for specific information.

Twitter, Pinterest and Google Images use this type of scrolling.

The drawbacks of infinite scrolling:

  • After clicking on a link, the user can’t return to where they were on a list before clicking
  • Site visitors may feel they can’t get anywhere and get frustrated
  • It uses lots of browser memory

Examples of infinite scrolling:
http://www.reunitetheriver.com/#
http://journey.lifeofpimovie.com/#!/

PARALLAX DESIGN
A scrolling technique where various images move at different speeds or change size, giving a 3d illusion.

parallax

Here some examples.

EXPRESSIVE TYPOGRAPHY
It used to be that a website had to draw from a relatively limited pool of “web-safe” fonts–those that were common across PC and Mac platforms.

typography

The advent of Google and Adobe Edge fonts among others, have opened up a world of possibilities for web typography. There’s no longer any reason for Arial, Georgia, Verdana and the other “usual suspects” to be so ubiquitous on websites.

Site typography can now better reflect the personality of its respective organization, company or institution.

Click for examples.

Will these web trends be short-lived or with us for awhile? Who knows, but either way it’ll be interesting to see where web design goes in the next year or two.