What we all love about design is that its constantly adapting and evolving. It so often mixes the familiar with the new, and nowhere is this better expressed than in web/mobile user interface (UX) design. As I step into year 20 of web design at Propeller I've seen quite an evolution. In the past few years, web design has evolved at a higher pace. Certainly mobile gets that credit. But now, there's new force that is about to shift us all in a new direction. [queue the Star Wars sound track and some deep Darth breathing]

I'll get to that.

First, to understand where we're headed, we must look back. The shift from Analog to Digital technology has brought a rapid shift in design over the past few years - and especially with mobile.

Design tends to swing like a pendulum. A pendulum, which itself is on rails rolling ahead, has recently swung from the nostalgic and familiar realism of Skeuomorphism, all the way out to the minimalism of Flat Design... familiar realism to metaphorical icons.  Google's introduction of Material Design in 2014, seems to have reversed the swing by adding back "dimension" and basic rules of the physical world to provide logic and a visual language to current design.

 

Skeuomorphism

Over the centuries, as technology has shifted, so has design along with it. During such shifts, designers often borrow from the familiar to ease these transitions. Here are two examples of skeuomorphism:

wood panalled wagon
iphone with traditional dial phone interface
iBooks screenshot

These tap visual metaphors from the past to make the products more accessible. However it's fake and doesn't add to the functionality of the product. In fact, it can add cost or unnecessary visuals that may work against the efficiency of the product. 

 

Flat Design

Transition from Apple iOS 6 Skeuomorphic Design to iOS 7 Flat Design in 2013

Transition from Apple iOS 6 Skeuomorphic Design to iOS 7 Flat Design in 2013

illustration of desktop, tablet, mobile - responsive design

Flat design evolved out of the necessity that mobile and responsive design called for, and perhaps a reaction to the styles that proceeded. Small mobile screens required minimal design that was clear. Realism does't work on that scale, and realism requires more data - and as such is less efficient. So as designers often do, they look back. Flat Design is largely credited to Bauhaus and expressed by Swiss designers in particular for readability, cleanliness, and minimalism. 

The heavy use of illustration and strong color is iconic for this style... and of course, its FLAT. Life isn't flat though. Life is dimensional.

 

Material Design

material design sample - stacked layers

In 2014, Google introduced Material Design. Ironically, this design logic/frameworks/language started with.... paper. It answers the questions about how digital paper, or "material", should behave in the digital world. Material Design was created as a toolkit to provide designers with consistent rules and a logic that is rooted in the physical world. There are many posts that compare Flat and Material design, but like most things, one evolves from the other and takes with it the best and adds to it. What we end up with here is a this framework with only two basic limitations:

  1. Materials are solid, such that objects can't physically go through one another (however, opacity is a variable)
  2. Materials can't bend or fold

The adoption of the z axis provides depth and shadow, and how dimension intersects with movement is another important consideration to provide visitors with "visual continuity" and "consistent choreography" throughout an application or website. While good designers would intrinsically strive for such, Material Design provides the framework for creating and maintaining consistency.

Google's 2015 Material Design Showcase


Web Design Trends for 2017

Getting back to the question at hand, I have two primary trends to suggest.

1. Material Design Evolution

As more and more designers adopt similar styles and conventions, the challenge for UX designers to differentiate increases. Zig when others zag, right? Flat and Material Design are not intrinsically linked, so we can take Material Design and apply it to other design styles besides Flat.  I hope designers do so sooner than later because I think Flat is just boring - maybe its because I'm from Vermont. Ok, I get that its efficient and saves bandwidth, but.... its... FLAT! So I expect this Flat Design era to end quickly. I hope so at least. 

  • Enough with flat... give me dimension!
  • More texture and other earthy & tactile styles
  • Interactions that work within the material logic established for the UX, but which are unique
  • More video storytelling with appropriate depths - from micro to full length format embedded throughout websites. In particular I expect to see more homepage hero videos that grab your attention as you step into the website, and tell that top-level story.
  • Less boxes and diversity of geometric shapes - CSS opens more and more new doors every day

 

2. Universal Web Design & Website Accessibility

graphic combining icons of people with disabilities with web design

This is the biggie. Universal Web Design strives to provide all visitors, regardless of disability, with equal and functional access to content and features on all websites. Not only should we, but now we must. Unfortunately for many website owners, this will come at gun-point. The backstory is long, but the short version is that the American Disabilities Act (ADA) applies to all places of "public accommodation". In addition to physical spaces such as banks, public institutions, restaurants, and retailers, it has now become established that Websites must also conform to the ADA. And a growing number of plaintiff firms will ensure this, as they have done for physical barrier cases across the country. I have an entire blog dedicated to this topic, so visit accessibility.works to learn much more.

From an actual design standpoint, the established foundation of Material Design supports Universal Design, because consistency is very important. What designers will need to add is how people with vision, hearing and physical disabilities use websites. The guideline they will follow for ADA conformity is provided by the W3C's Web Content Accessibility Guideline (WCAG 2.0). Considerations include

  • Color blindness and the use of color to indicate meaning or function
  • Contrast between foreground and backgrounds, and text in particular

Front side developers, and content contributors will shoulder the bulk of the heavy lifting here, but the design itself needs to now follow these guidelines. 

Over the past 20 years we've constantly been been reacting to new technologies, browsers, devices, and user demands. This is just the next one. But no worries, this will not dramatically affect or restrict your ability to create engaging and exciting user interfaces. What we gain is for all visitors to enjoy your creations. 

Enjoy.

Comment