Web Trends for 2013 – Part 1

Posted on: Mon, 28/01/2013

A bright and exciting future

From desktops and laptops to tablets and smart phones, surfing the web and sending and receiving information on the move is now part of everyday life for all ages, lifestyles and at all times of the day globally. These are exciting and fast changing times.

Fashions chop and change in all industrial, manufacturing and entertainment areas. Sometimes they move on in leaps, sometimes they pull from effective past influences and there are steady evolutions rather than revolutions. The internet is no different and is now an integral part of our fashion ether.

Visual Evolution One – Skeuomorphism

“An element of design or structure that serves little or no purpose in the artifact fashioned from the new material but was essential to the object made from the original material”.

Skeuomorph

Showing a comforting nostalgic phone interface on a new smart phone

Skeuomorphism (Skew-a-morf). This will be a moving away from the very clean shiny Web 2.0 appearance towards a texture based style creating a tangible and real life rugged and gritty appearance. Whether this will translate from showcase portfolio and design trend websites into blue chip businesses and cool corporates still remains to be seen.

The word Skeuomorphism is a complicated word for a simple idea – making things look like other things. The idea has been around for a long time and has been used in textural design in cutting edge art and design colleges since at least the late 1980s. I believe some of it’s influences and idea roots come in part from Swiss typography (or New Wave Typography) in the 1950s onwards. There are two main types of Skeuomorphs, physical and digital

Wikipedia shows a good example ; fake wood grain paneling on a car is a skeuomorph, as examples such as a US station wagon . It is not a functional addition but is representative of familiar items that we can relate to from modern history and/or nature – appealing to nostalgia, familiarity and reducing anxiety making an experience more comfortable. It’s what we have inherently learned and experienced as children as we have grown up absorbing information from our parents and grandparents, it shows history and longevity, and projects confidence, and trust.

U.S. Station Wagon with wood panelling showing Skeuomorphism with an image from wikipedia

Reading Reference: http://en.wikipedia.org/wiki/Skeuomorph

Skeuomorphs have been used on computers since the beginning of the WYSIWYG interfaces – the folders on your pc, tablet and phone are made to look like physical cabinet folders Even though we now have reduced our overall paper communication usage in the office the representation still works. It is comforting and gives us a visual prompt and pointer in the right direction without having to explain in long textual instructions.

“Skeuomorphism” means making elements look like real world objects and this approach is now firmly making its way to the Web. In 2013 you can expect to see the generation, development and various stylisation of real life objects: post-its, tabs, wooden textures, sheets of paper and even body sectors that will make online experience more realistic.

Visual Evolution Two – Metro Interface

Microsoft's Metro Interface

Microsoft Windows 8 and Windows Phone interface – named Metro

Authentically Digital elements that exist on a computer interface. Block of flat bright colour following a grid shape, showing a format consistency, using clean flat representative and simplistic icons and text that follow a consistent size and location format within each metro element – You will have seen these most recently on the new Windows 8 operating system and on the Windows Phone platform.

This look is bold, bright fluid and emotive, and is used with image and motion / video elements to keep it interesting and fresh.

The actual basic elements are very plain, but they move fluidly when clicked to provide the user with feedback and guidance as to what is happening – simplicity in shape and colour also keep memory usage down.

Example:  http://www.anderssonwise.com/ – sample website design that has been designed in part using the block window effect.

Responsive and Adaptive:

Define responsive – simply adapts to the screen size, simple to apply and basically effective across the interface technologies.

Mamboats as viewed in responsive on a smart mobile phone - http://www.mamboats.com

Define adaptive – utilizes sophisticated auto-detection scripts to accurately identify each device and to make full use of features available, such as a built-in GPS or ‘touch & tap’ capabilities.

Responsive web design has been changing to ultimately come to a threshold where layouts are designed to match all forms of digital media. The idea is to support all devices from laptops, desktops, smart-phones, tablets. The responsive and adaptive ethos is hopefully future-proofing any new and innovative devices that appear or are invented.

Example of responsive website:

http://www.mamboats.com/

Not convinced? Have a view in various devices using: http://www.responsinator.com/

Paralax and Vertical Scrolling

Parallax websites will become much more common in 2013 – whether people will take to them and embrace them remains to be seen, but they will create talking points. Parallax is a technique achieved with multiple layers of a website that are scrolling at different speeds, creating an illusion of a 3D effect and depth. This looks great on mobile devices and works very well for micro sites, product presentations and gaming applications.

Examples:

whois.wildlife.la

http://www.bagigia.com/

bartaz.github.com/impress.js/#/bored

http://www.intacto10years.com/index_start.php

part 2 – coming soon…..

Web Trends for 2013 – Part 1
enlarge image

Subscribe to our Newsletter

* indicates required

Where to start?

If you're not sure where to start, Realnet's completely free website and digital marketing review will point you in the right direction. Our experts conduct a comprehensive analysis of a number of aspects of your website and marketing strategies and will provide you with a free report highlighting areas which are causing you to lose business and make suggestions for improvements that will have a measurable positive impact.

Address

Realnet Ltd

  • The Studio
  • High Green
  • Great Shelford
  • Cambridge
  • Cambridgeshire
  • CB22 5EG
  • United Kingdom

Working Hours

Monday 09:00 - 17:00
Tuesday 09:00 - 17:00
Wednesday 09:00 - 17:00
Thursday 09:00 - 17:00
Friday 09:00 - 17:00
Saturday Closed - except emergency support
Sunday Closed - except emergency support