evolution-of-modern-web-design.jpg

Evolution of Modern Web Design

Insight into how the web has evolved since 2012 through 2016

4 minute read

Seismic shift

The last 10 years have been somewhat remarkable in the volume of change that is experienced in the digital domain. Not only have there been great leaps forward in terms of technology advances, but the landscape has completely changed in regards to creative design and user experience.

With the introduction of the smart phone (a little before 10 years ago) there have been drastic and seismic shifts in how people consume digital media. This is obviously too broad a topic to encapsulate in a single short blog post, so let’s focus a little on how web design has changed, and what we now expect as a user.

The Web in 2012

The landscape in 2012 was entirely different to today. This was just on the cusp of the mobile responsive era, with some sites of 2012 missing this by a margin. The mobile generation, and tablet/mobile as a primary data consumption source, had not evolved adequately in order to influence mainstream design.

Layouts and information hierarchy of web interfaces still appeared governed by “the fold,” with primary content mandatory to be above; content placement was guided by the principle “present as much as possible to the user;” multi-column layouts; we have mega-navs for a surely intuitive navigation experience…; the app era and iPhone had been in existence for some time, so aesthetics in mainstream web design had been saturated by influences – specifically, skeuomorphism.

The result – interfaces were cluttered and busy, but this worked at the time.

The Web of 2016

We’ve come a long way, and on reflection it is almost like everything we knew before we have reversed!

  • The fold is long gone, we have long scrolling pages
  • Clean is king, present bitesize amounts to the user
  • Skeuominimalism, not skeuomorphism
  • Mega-navs are out, mobile navs are in
  • Primarily single columns layouts

The Evolution of Modern Web Design

There are some other differences, we’re consuming content in different ways…

Types of content

Content can be presented in many different forms, and in recent years there has been greater focus on more rich media as a primary method of getting information. Originally, the web was a big encyclopaedia, with heavy text content. Over time, images became more and more significant and prominent. In the modern world; images, audio and crucially video are a primary delivery methods and common experiences for users.

With bandwidth less of a concern, and mobile browsing over 3G or 4G commonplace, there are fewer technological barriers existing to consider when designing an experience.

Why have we evolved this way?

As users become more familiar with “watching,” rather than “reading,” as well as the requirement for adequate real estate in which to complete such an action, there are implications on the layout. Users don’t want to watch a video in a tiny box, when they have a large screen available, even on a mobile. Scrolling used to be considered a downfall of a website design, if everything couldn’t be squeezed above the fold, but with our tablets and phones, our options are somewhat limited. Scrolling is in, even on desktop.

So now with no restrictions on scrolling, the need for larger “placeholders” for content, let’s spread out. We can use the whole screen (no wrapper), because we have:

  1. no reason not to
  2. no choice on mobile

Now, simple layouts – as everything has to be fluid to accommodate a wide range of screen sizes, let’s make our lives easier and design this into the layout.

Navigation – firstly the mega nav doesn’t really work on mobile, so what else can we do? If we look at modern app design we have some universally accepted design paradigms. LinkedIn, BBC News, Facebook, Twitter are some of the best examples of cutting edge user experience and user interface design, true market leaders.

It’s remarkable how much influence the app generation has had on the web design industry. Some clients will have a responsive web app built instead of a mobile app (usually due to cost), provided that it looks and behaves like an app.

In Conclusion

This overhaul in the way we think about consuming content, as well as the medium in which we do is the primary culprit for the evolution. It’s interesting that the design requirements for a mobile device (vertical, scrolling, video, negative space) are translating back to the desktop design on many sites, with a “mobile first” methodology being taken in UX and UI for an increasing number of projects.

A downside of mobile app design being such an influence on web design is that there are technology restrictions on web that do not apply on mobile; so it’s important to get a designer who is aware of these problems and does not set false expectations during design.

 


  • Creative Design
  • Consultancy
  • User Experience
  • Advanced

Leave a comment

Submit