Web Design Trends for 2014

Responsive design for all media.

Responsive design for all media.

There does not seem to be as many different articles discussing web design trends for 2014 as there was for 2013 a year ago. From that I gather that trends have not changed all that much; they have simply been solidified and have become “more so”. In summary here is a list of the trends most discussed:

  1. Flat design – cut back on those drop shadows and gradients. Notice how app interface design is influencing site design.
  2. Simple colour schemes – cut back to one or two colours only.
  3. Large, striking, interesting typography.
  4. Focus on mobile with responsive web design.
  5. Long scrolling sites – on condition that the content is well organised.
  6. Minimise distractions (drop the side bar) and make the reading experience pleasant.
  7. Simplified content – cut words back to cope with shorter attention span of readers.
  8. Use short videos and animations in the place of text, for quick story-telling.
  9. Creative use of images and large hero areas (intro image with little text) at the top of the home page.
  10. Some quirky stuff like parallax scrolling and animations with HTML5.
  11. Navigation: on-demand menus (hamburger menus), sticky navigation and fixed headers that follow you as you scroll.

For more detail, have a look at these articles:

http://thenextweb.com/dd/2013/12/29/10-web-design-trends-can-expect-see-2014/

http://www.pinterest.com/pin/161285230379233519/

http://www.forbes.com/sites/stevecooper/2013/11/30/designing-a-website-for-2014/

http://www.designworklife.com/2013/12/31/digital-design-trends-to-look-forward-to-in-2014/

https://widgetware.com/news/a-closer-look-at-the-2014-web-design-trends/

Web Design Trends for 2013

Here are a selection of articles from knowledgeable authors predicting web design trends for 2013. Do a search and you’ll find many more, but they are all saying basically the same thing.

Keep an Eye on These Web Design Trends in 2013  http://mashable.com/2013/01/04/web-design-trends-2013/

Web design trends to look forward to in 2013  http://designhash.com/web-design-trends-to-look-forward-to-in-2013/

Six Expected Web Design Trends for 2013 http://smashinghub.com/web-design-trends-in-2013.htm

10 Web design trends you can expect to see in 2013  http://thenextweb.com/dd/2012/12/30/10-new-web-design-trends-you-can-expect-to-see-in-2013/

Web Design: 20 Hottest Trends To Watch Out For in 2013  http://www.hongkiat.com/blog/web-design-trend-2013/

Short summary:

The importance of topography was predicted for last year as well, so it is interesting to see it is still up there with responsive design for mobile to desktop sized screens, large images and more white space. Look out for softer colours and larger buttons!  And it’s all basically happening in HTML 5, CSS 3 and social integration. Adobe Flash is dead. HTML5 can create dynamic layouts without  the bugs and delays that often accompany Flash.

Parallax scrolling

ParallaxParallax is a displacement in the apparent position of an object viewed along two different lines of sight, and is measured by the angle  of inclination between those two lines of sight.  Nearby objects have a larger parallax than more distant objects when observed from different positions.

In early graphical applications a scene was constructed of independent layers that were scrolled at different speeds in a simulated parallax motion effect when the cursor moved. Parallax scrolling has also been adapted to website design generally implemented using javascript and modern web standards.  As the user scrolls down, the image essentially scrolls sideways. The technique has since appeared in many different forms and variations on virtually thousands of websites. Source: Wikipedia

On websites this gives a near 3D-look that is very cool and funky, but in my experience these websites load very slowly. For this reason the technique should only be implemented in situations where the target audience or user group reside in a region with fast internet connections.

For some good examples of websites with parallax scrolling, have a look at 30 Awesome Parallax Scrolling Effect in Web Design by Ali Qayyum posted in Smashing Hub in April 2012.

HTML5 Definition Complete

HTML5 logo.

The W3C says the logo “represents HTML5, the cornerstone for modern Web applications” but does not imply validity or conformance to a certain standard.

HTML5 Definition Complete, W3C Moves to Interoperability Testing and Performance – First Draft of HTML 5.1 Offers Glimpse at Next Round of Standardization
Written by W3C

17 December 2012 — The World Wide Web Consortium (W3C) published today the complete definition of the HTML5and Canvas 2D specifications. Though not yet W3C standards, these specifications are now feature complete, meaning businesses and developers have a stable target for implementation and planning. HTML5 is the cornerstone of the Open Web Platform, a full programming environment for cross-platform applications with access to device capabilities; video and animations; graphics; style, typography, and other tools for digital publishing; extensive network capabilities; and more.

“The broader the reach of Web technology, the more our stakeholders demand a stable standard,” said W3C CEO Jeff Jaffe. “As of today, businesses know what they can rely on for HTML5 in the coming years, and what their customers will demand. Likewise, developers will know what skills to cultivate to reach smart phones, cars, televisions, ebooks, digital signs, and devices not yet known.”

W3C also announced today the first draft of HTML 5.1 and Canvas 2D, Level 2, an early view of the next round of standardization. The W3C community continues to enhance existing HTML features and develop new ones, including extensions to complement built-in HTML5 accessibility, responsive images, and adaptive streaming.

Read more at http://www.gisuser.com/content/view/28612/2/