12 Key Web Design Trends For Brands | OLIVER

Responsive well and truly took over web user interfaces last year, drastically changing the way that websites work and respond across devices and screen sizes. Responsive has been a major factor in the latest user experience (UX) and user interface (UI) trends that have been showing up during the last 6 months. We have taken a look at some of our favourite web design trends below.

Device agnosticism

The movement that seems to be informing almost all other trends is device agnosticism. Recent research from Forrester Research found that 90% of users owning multiple devices are prone to starting a task on one device and finishing this task on another. Over 50% of multiple device owners use more than one device at the same time. As expectations grow for seamless experiences across devices, considering how to keep users engaged as they shift from one device to another is key.

As seen below, Evernote pays a great deal of attention to designing its application with smooth transitions across devices.

a131fff535f40678ba7e21c41071397f_f100

Trends that affect design decisions

If you are thinking of doing a complete revamp of your website, the following are major factors in where to start with wireframes.

Mobile first, but not only

‘Mobile first’ was a phrase that took over in 2014. ComScore reports that smartphones and tablets now account for 60% of total time spent on digital media. While designing for the mobile web experience is more relevant than ever, there are plenty of examples where the ‘mobile first’ principle hasn’t been carried through to create beautiful design on other devices. Users expect that they will be able to access content in easily readable formats, regardless of which device they choose to use. While responsive design combats this through flexibility, make sure that you incorporate modular elements that are set to scale by percentage, not specified screen size. This way, you will deliver uniform experiences to all users, regardless of device.

Upwardly responsive

You may be surprised at how many people now use bigger screens. Research from W3 reveals that in 2014, 99% of visitors have a screen resolution of 1024×768 pixels or higher. Of those visitors, 31% had a resolution of 1366×768. This means that it is important to design websites to be upwardly responsive as well, to ensure that our growing screen sizes handle the UI well.

Scrolling, not clicking

Many web pages have moved towards the scrolling trend. It’s quicker than clicking and helps convey more information but with a faster experience for the user. Scrolling is both mobile and touch friendly – perfect for conveying a narrative.

Nike’s US and UK sites use scrolling to great advantage.

1de697426bb52eba39550d7782ef375a_f109

Parallax scrolling

The ‘scrolling’ trends must also be why, following on from last year, parallax scrolling remains a strong presence in web design. It’s perfect for beautiful narrative effects and able to mesmerise users. Now that relatively low cost templates are readily available on platforms like WordPress, the parallax effect doesn’t look like it will be dipping in popularity any time soon.

Navigation trends

The below trends affect the navigation of your website.

Card design

With the advent of smaller screens and the need for responsive, flexible design, modular design has become more popular than ever. This has led to great attention on ‘cards’ as a design pattern for displaying information. Due to the flexible nature of cards and ability to be reorganised according to how many columns will fit on your screen, they are perfect for mobile devices and responsive design.

Below, an example of why cards works so well as responsive units. The same web page, reorganised according to columns, but displaying the same information.

a40e64bdbccede3cf7a440a30f1c552d_f103

Cards convey information easily and visually. Commonly, cards will include a picture, various icons, a title and perhaps a brief amount of text. They can be likened to a miniature web page.

8631b22321da5c71bbd5933cbcd980b1_f97

Ghost buttons

Rather than big clunky attention-seeking buttons, these attract attention with subtle call-to-actions. They usually feature as transparent with a recognisable shape, a thin bordered line and light fonts. A great solution for when you need navigation but don’t want to clutter up your site.

623638323988d4daf7e3d0ed4e383a16_f101

April 7, 2015

12 key web design trends for brands

Responsive well and truly took over web user interfaces last year, drastically changing the way that websites work and respond across devices and screen sizes. Responsive has been a major factor in the latest user experience (UX) and user interface (UI) trends that have been showing up during the last 6 months. We have taken a look at some of our favourite web design trends below.

Device agnosticism

The movement that seems to be informing almost all other trends is device agnosticism. Recent research from Forrester Research found that 90% of users owning multiple devices are prone to starting a task on one device and finishing this task on another. Over 50% of multiple device owners use more than one device at the same time. As expectations grow for seamless experiences across devices, considering how to keep users engaged as they shift from one device to another is key.

As seen below, Evernote pays a great deal of attention to designing its application with smooth transitions across devices.

evernote device agnosticism.jpg

Trends that affect design decisions

If you are thinking of doing a complete revamp of your website, the following are major factors in where to start with wireframes.

Mobile first, but not only

‘Mobile first’ was a phrase that took over in 2014. ComScore reports that smartphones and tablets now account for 60% of total time spent on digital media. While designing for the mobile web experience is more relevant than ever, there are plenty of examples where the ‘mobile first’ principle hasn’t been carried through to create beautiful design on other devices. Users expect that they will be able to access content in easily readable formats, regardless of which device they choose to use. While responsive design combats this through flexibility, make sure that you incorporate modular elements that are set to scale by percentage, not specified screen size. This way, you will deliver uniform experiences to all users, regardless of device.

Upwardly responsive

You may be surprised at how many people now use bigger screens. Research from W3 reveals that in 2014, 99% of visitors have a screen resolution of 1024×768 pixels or higher. Of those visitors, 31% had a resolution of 1366×768. This means that it is important to design websites to be upwardly responsive as well, to ensure that our growing screen sizes handle the UI well.

Scrolling, not clicking

Many web pages have moved towards the scrolling trend. It’s quicker than clicking and helps convey more information but with a faster experience for the user. Scrolling is both mobile and touch friendly – perfect for conveying a narrative.

Nike’s US and UK sites use scrolling to great advantage.

nike scrolling.png

Parallax scrolling

The ‘scrolling’ trends must also be why, following on from last year, parallax scrolling remains a strong presence in web design. It’s perfect for beautiful narrative effects and able to mesmerise users. Now that relatively low cost templates are readily available on platforms like WordPress, the parallax effect doesn’t look like it will be dipping in popularity any time soon.

Navigation trends

The below trends affect the navigation of your website.

Card design

With the advent of smaller screens and the need for responsive, flexible design, modular design has become more popular than ever. This has led to great attention on ‘cards’ as a design pattern for displaying information. Due to the flexible nature of cards and ability to be reorganised according to how many columns will fit on your screen, they are perfect for mobile devices and responsive design.

Below, an example of why cards works so well as responsive units. The same web page, reorganised according to columns, but displaying the same information.

layout comparison modular design.png

Cards convey information easily and visually. Commonly, cards will include a picture, various icons, a title and perhaps a brief amount of text. They can be likened to a miniature web page.

card design.png

Ghost buttons

Rather than big clunky attention-seeking buttons, these attract attention with subtle call-to-actions. They usually feature as transparent with a recognisable shape, a thin bordered line and light fonts. A great solution for when you need navigation but don’t want to clutter up your site.

ghost button.jpg

Pinned elements & super-navigation

The thin and permanent menus that you see at the top of websites. These are generally moving towards being pinned (especially on long pages) for quicker access to main navigation.

Econsultancy’s main bar is a good example of super-navigation:

784cb611883156e825d90cd2adf17fdc_f107

Twitter’s top navigation is a pinned element that follows the user as they scroll down the feed:

5c645c60bb29ead96e5c6fe0d947bc5c_f108

Hidden menus

Another great trick for creating clutter-free websites is using hidden menus. A lot of sites will have a hidden navigation element which doesn’t become obvious until you choose to interact with it. With interactions varying from a click to a hover, these menus are often situated behind text or symbols. For example, Marketing Week’s hidden menu below.

marketing_week-hidden-menu

Animation trends

When talking about animation, we don’t mean stick figures in Flash. Animation has become a key element of mobile, web and software apps and websites. Done well, it offers a way of guiding users, providing context and delighting with surprises. It has become one of the most useful tools in interface design to help communicate motion and interaction.

Material design

A term and set of principles allegedly coined by Google, material design is a mix of flat design, but includes moving objects that are meant to mimic real objects. A quote from Google lends more insight:

A design language that “uses very subtle gradients, layering and animation to retain a sense of the tangible world (physical space and objects) while still achieving all the advantages of flat design.”

alarm_material_ui

Micro UX

These are simple innovative designs that make tasks easier but also more engaging. We predict that these little touches are only going to become more popular in web interface design.

Apple’s product pages feature altering images that change as you select different variations.

215b052e8776619a2cb27faaccd9ca1b_f102

The Daily Beast shows you how far you have read (and have left to read) in their pinned right-hand bar.

63e5effaa9521b6f6b4dfba2c3d581d3_f98

Motion design

We are now seeing more infinite scroll fade-ins, dynamic/animated charts, and modular scrolling, to name a few.

Infinite scroll fade-ins make sure that your viewers are kept engaged with seemingly infinite content.

samsung-infinite-scroll

Modular scrolling has made it possible to scroll not only whole pages, but also individual columns.

modular-scrolling

Dynamic charts offer an engaging way of showing information – they’re the new infographic.

dynamic-animated-charts

~

We have a whole bunch of designers here at OLIVER, ready to show you what they can do.  To find out more get in touch or check our some of our previous work.

Next Article

View All News

Bournemouth

Holland House
St Paul's Place
Bournemouth
BH8 8GG

+44 01202 204 983

View Map