Home > UX and Prototyping > 5 responsive design trends that are changing the web
The internet is in a constant state of flux, but which of these 5 responsive design trends will stand the test of time?

The internet is in a constant state of flux, but which of these 5 responsive design trends will stand the test of time?

At 28 years old, the internet has gone through some drastic changes in its time – especially when it comes to UX design.  Through the years, designers have refined their websites and mobile apps as we understand more about user experience and how people interact with websites, products and services.

Back in the day, the dilemma for designers was the 800 x 600 pixel screen. Now thanks to responsive design, a screen can mean anything from a smart watch all the way to an entire wall. The nature of how we design is constantly changing as devices and screens evolve.

But it isn’t just the screen that has gone through radical transformation; websites have too. Comparing Amazon’s website from the early 2000s with Amazon today is a chance to travel through time and see how much the internet, and in particular UX design, has changed over time as users’ needs have evolved and the devices we use have improved.

While the design of websites past may rouse a welcome nostalgia within us, it’s time we look towards the future at 5 responsive design trends that are changing the web now.


Download Justinmind and prototype the latest UI trends

Button


Illustration

More and more brands are contracting illustrators for their UX design. Illustrations have the opportunity to make the UX design more visually pleasing and add personality to a brand’s image. We’ve been drawing and communicating visually since long before modern speech came to the fore – in fact some cave paintings are over 35,000 thousand years old – so using illustration is primordial and connects with users on a human level. Illustration also makes UI elements more interactive, interesting and engaging. And isn’t everybody a little tired of stock imagery by now?

Popular brands such as Dropbox, Google and Airbnb all make generous use of quirky, whimsical and playful illustrations in their marketing, web design and brand identities.

Read our interview with Dropbox’s Design Manager

ui-design-responsive-design-trends-dropbox
Dropbox update announcement

Brutalism

For a lot of people, brutalism conjures up images of bland, Communist-era concrete buildings against gray, dull skies. But brutalism has had something of a revival – this time on the internet. The most recognizable examples of brutalist UI is the Bloomberg website which was redesigned in 2015 and makes use of bold colors, gradients and has become a trendsetter within web design. With brutalist websites popping up left, right and centre in all their rugged, non-conforming glory it looks as though this trend is here to stay yet.

Brutalism may well still be enjoying its fame but is it the kind of UI design you’d want on a mobile app? Pierre Buttin poses the same question in his project Brutalist redesign.

ui-design-responsive-design-trends-brutalism
Bloomberg homepage

Custom typography

Typography can help boost your brand identity. Typography plays an important role in the UI design especially when it comes to communicating your message in a clear and concise way. It’s not much fun if you have to squint to read your favorite content.

The BBC just rolled out a new font optimized for mobile screens, called BBC Reith, which will make reading easier. Many of the fonts that are popular online such as Helvetica and Arial were developed over half a century ago and work well for print so it makes sense that companies are investing in newer, more optimized fonts.

ui-design-responsive-design-trends-bbc-reith
BBC Reith sample

Google, understanding the prominence and importance of mobile, also commissioned new fonts which support Unicode web publishing in Asia and the Middle East. Customized typography is one responsive design trend that will keep typographers happy.

 

Colorful user interfaces

2016 was definitely the year of white space and minimalism. But 2017 has come in unabashed full of color and it’s catching on.

Brands like Spotify have taken to using bold duotones and daring colors in their UI design, leading to a more engaging experience. From Instagram’s logo to online payments with Stripe, the gradient is here and making the internet a more interesting place to be. Gradients infuse personality into the UX design. Why choose from the thousands of gradients out there for your next interactive wireframe?

ui-design-responsive-design-trends-spotify
Spotify landing page

Rounded profile pictures

This year Twitter did a drastic redesign of their service. They updated user’s profiles pictures from a square into a circle. Anything as small as moving a pixel one point can cause the internet to go up in arms and this time was no different.

ui-design-responsive-design-trends-twitter
Jusitnmind’s Twitter profile

However insignificant the UI design changes may have been – others caught on. Facebook soon followed suit and introduced circular photos too. Why? Mills Baker, Product Designer at Facebook, argues that circles are more organic, friendlier and that circles are a good way to distinguish people from content.

Prototyping the responsive design trends

Now you know the trends, put them into practice. With Justinmind, designing mobile-first is simple. Our easy to follow responsive tutorial explains everything you need to know when it comes to crafting an interactive prototype that’s responsive and mobile-first. You can test and simulate your prototype in real-time and share it to get instant feedback.

The takeaway

Some trends come and go whereas others persist. Who knows if brutalist web design is here to stay or whether we’ll see a return to square profile pictures. However, these 5 responsive design trends will gives UX designers some food for thought when it comes to approaching exciting design problems and creating pleasurable user experiences.download-justinmind-prototyping-tool-banner-1

Steven is the web editor at Justinmind

Add comment

Your email address will not be published. Required fields are marked *

Download Free