Which web trends are worth talking about?
As a Web Developer in an ever-changing industry, it’s so important (and interesting) for me to keep on top of trends. Here, I take a look through the latest developments in web design, and share some examples of who’s using them to great affect.
Firstly a quick mention of what needs to be left in 2014.
The Fold -The concept of the fold originated from newspapers, where the most important story and image appeared above the physical fold line of the paper. Websites however are not physical things, we have no control over what size screen they are being viewed on – therefore we cannot guarantee where the digital ‘fold’, (the bottom of the browser window), will actually be.
With the ever-increasing popularity of mobile browsing, users are familiar with scrolling for content. If something is not immediately clear when the page loads, users are more likely to scroll down and take a look around before they decide whether to click the back button or not. Take a look at LifeBelow600 for a great explanation on this.
Carousels – Lots of people like carousels, traditionally they have been a great way of getting lots of information onto a page, and more importantly above the ‘fold’. In reality, statistics show that only 1% of users click a feature in a carousel – and of those clicks 89% were on the first carousel item.
A 1% click return on what is usually the largest object on your page… Is this really a good use of the space?
Now on to what we’ll see more of in 2015 and beyond…
Scrolling – longer webpages are becoming more commonplace, helped by the diversity in screen sizes. Users are well versed in scrolling for content.
- large amounts of content can be shown without slowing the user down through clicking and page loads
- familiar UX for users of social media platforms such as Facebook, Twitter and Instagram
- mobile and touch friendly
Check out the Porsche Evolution site for a great example of no clicking and more scrolling.
Animation and Motion – with increased browser support, animation is now easier to include on a website with the use of CSS.
A combination of small enhancements to a page can make a huge difference, like creative hover states, element load in effects, transitions between states for mobile menus, dropdowns and page headers/navigation etc.
The Phoenix theme for WordPress demonstrates many of these effects.
Parallaxing – scrolling and animation combined give us the great effect of parallaxing, this has been around for some time but is still high on the agenda for 2015.
The Jeep Renegade site is a good example of how including parallaxing on a small number of elements can bring a page to life more than using a static image.
Fixing and Pinning – if something is important then make sure the user can always see it. This may sound obvious, but this applies mostly to navigation and calls to action, especially with longer sites. The user doesn’t want to scroll all the way back to the top of the page to go somewhere else on your site – pin the navigation so it’s always on screen.
Card Design – any user of social media platforms will be familiar with the concept of card design. Facebook, Instagram and Twitter all use this concept.
A card is like a condensed web page, it can contain information, pictures and icons, this concept allows users to get a small chunk of information which then enables them to decided if they’re interested enough to click through to the real, longer content.
Card design is great for responsive and mobile design as it is modular, again, users are familiar with the concept from social media platforms and it works well with clean minimalist designs.
Full Screen Images and Videos – an image speaks a thousand words, so using full screen images and videos is a great way to get across content to a user in a more colourful and visual way.
See this great example by Ideas By Music.
Interaction and Storytelling – sites where input from the user directly alters what is on screen, or are taken through a story, are great for capturing the users attention and increasing the sense of involvement in a site.
The best new sites use a combination of the above features to maximise impact – however, don’t just use something because you can, there should always be a good reason behind it!