Design in the age of the ubiquitous digital experience.

The initial design paradigm for the web was borrowed from the world of print. In the 500 years since Gutenberg invented the printing press, print design has developed a precise, page-centric design paradigm that assumes a fixed page size and a layout that can not be changed once it is rendered on the page by a printing press. This centuries old model, that worked superbly for magazines, brochures, catalogs and newspapers quickly ran into problems with their digital equivalents.

First there was no fixed resolution or page size. Not only did screens vary wildly in size, color rendering and resolution… users set browser windows at arbitrary sizes, different browsers would render your page differently and connections of varying bandwidth limited the quality you could deliver in an acceptable amount of time. And if the moving target of size, color, rendering and bandwidth were not enough, users began to expect the ability to interact in non-trivial ways with your UI. Clients wanted the design to rapidly change on an ongoing basis in response to user metrics and other data.

Then the smartphone arrived and quickly came to be the dominant consumer internet touchpoint expanding exponentially the variety of screens and resolutions a designer had to deal with.

Designers needed new tools and a new more dynamic design paradigm. Web designers began experimenting with “liquid” web layouts. In 2010, Ethan Marcotte, in an article in A List Apart, coined the term “responsive” web design to describe this new dynamic design method. In 2011, Twitter released Bootstrap, an open source CSS framework for responsive web sites. This gave Web developers an easy and consistent way to implement responsive designs. In response to the requirement of working with dynamic, fluid web layouts and interactive UIs, web design moved from a page-centric to a component-centric approach. Components no longer were static elements in a fixed position on a page. Components could change size, content and position depending on device capabilities and screen resolution. Users could now have a consistent browser experience on a wide range of desktop, laptop and mobile devices. Components could be connected to data or thanks to Javascript frameworks could contain sophisticated apps.

So far, so good, in the decade from 2009–2019 design tools and methods had changed to meet the new design challenges in some very effective ways. However, the digital experience continues to evolve at a rapid pace. AI driven voice based systems like Amazon Alexa, Siri and Google Assistant are becoming the interface of choice for an ever larger segment of users. Social media apps WhatsApp and WeChat, have text-centric chat interfaces and over a billion users each. Augmented Reality and Virtual Reality may still be just becoming viable in the domain of gaming and industrial applications but it is only a matter of time before they become a primary interface for an emerging ubiquitous digital experience.

So what requirements will designers have to deal with in 2021 and beyond? In the next decade one can begin to see a digital universe where we will need to move from designing dynamic digital screens/pages to architecting digital experiences that may incorporate the physical world, voice, gestures, text, graphics and spatial cues and where the entities one interacts with may be human or machine in an experience that will be updated autonomously in real time from a continuous tsunami of incoming data without human mediation. You might be training an AI in a design language you have created rather than directly creating a UI yourself. If you thought maintaining apps on iOS, Android and web browsers has been a challenge, get ready for the world to get a lot more complicated (and exciting) well within the working life of most designers.

These new requirements will require new tools and new design paradigms. The good news is design and development tools continue to evolve, becoming more dynamic, more collaborative and more connected to the whole development process from prototyping to delivering assets and requirements to developers.

“You can’t innovate on products without first innovating the way you build them.” That’s a quote from a series of articles AirBnB shared about their internal design system. The quote makes a critical point. The articles speak to the challenges facing designers and developers today and detail how AirBnB has systematically responded by innovating how they were designing and building their product, from the development of a shared design language and shared components libraries to how they organize assets and what tools they use. It’s a series every designer should read.

Figma brings the cloud based collaboration capabilities we have come to depend on in Google Docs to web and mobile design. This for me is its key advantage over Sketch, the current tool of choice for most mobile and web designers. As we move into an ever more complex and faster moving digital universe, collaboration, crowd-sourcing and interdisciplinary design teams will become the norm. Figma is moving in the right direction in putting collaboration at the core.

Zeplin allows you to export your design file in one click from Sketch, Adobe XD, Figma and Adobe Photoshop CC using Zeplin plugins. Zeplin generates accurate specs, assets and code snippets tailored to web, iOS and Android from your design file. This makes hand-off to development a one click affair with everything developers need to execute your design automatically generated.

Machine learning will certainly play a role in aiding designers and developers to optimize and accelerate the design/development process. Mendix, a major player in low code development, has introduced Mendix Assist, “the first AI-assisted development approach built into a low-code application development platform”. With 10 years of historical data on application models, metrics, user behavior, etc., Mendix was able to train machine learning models to automate and aid in the process of development on the Mendix platform.

According to Mendix: “This first version of Mendix Assist is based upon Machine Learning analysis of over five million anonymized application flows built with Mendix across 15 industries. Mendix Assist provides 90 percent accuracy on next-step suggestions in microflows.”

One could see how AI might aid a designer in taking an abstracted design model of an experience and suggesting best practices and component tailoring for a proliferating array of interfaces with differing capabilities. We can also see the boundaries between designers, domain experts and developers getting fuzzier and more fluid as ever higher level, more abstracted platforms do more and more of the heavy lifting and are augmented with machine learning.

The open source Mat|r Project was created in response to precisely these challenges facing designers and developers:

  • Proliferating connected devices and interfaces beyond web and mobile.
  • The massive amount of actionable insights machine intelligence will generate will completely overwhelm the capability of designers and developers to respond in a timely fashion.
  • The global system of app design and development is incredibly inefficient with redundant work and siloed knowledge hobbling the productivity and potential of designers and developers.

Mat|r is an open source, cloud based application development platform whose goal is to enable the development of apps that run everywhere, connect to anything and auto-update in real time, in an easy to use collaborative development environment accessible not just to professional developers, but also technically inclined, designers, makers, researchers and engineers. Some of the primary features of it’s first iteration are:

  • One code base: Not just for mobile and web — for the next generation of connected devices and interfaces… IoT, Voice, VR, etc.
  • Mat|r|script: The full power of an extensible, high level programming language purpose built for modeling experiences, that is as easy to learn as a drag and drop ‘low code’ GUI.
  • Mat|r|hub: Social collaboration tools (follow, rate, like, comment) for developers plus frictionless code sharing in a cloud-based AppDev environment. Import libraries and apps with no configuration.
  • Self-updating Apps: Machine generated app updates without human mediation.

From a design perspective the key feature of Mat|r is that it moves the level of abstraction one level higher from design to experience. The key task of an architect is not to choose the decorative elements and forms of a structure but to manage spatial relationships to enable positive user experiences. The architect creates an experiential language that the design elements then conform to. Here, we can see a model for designers in the emerging Internet of Everything as they evolve from graphic designers to digital experience architects. In 2020 the Mat|r Project was acquired by Intelifaz. This will open exciting new capabilities in user experience design, low code development and functionality for Intelifaz.

It seems we have the blessing, or curse (depending on your appetite for change) of living in very interesting times. The next decade of design and technology changes is likely to be much more profound than the last. We shall, after 500 years of a page-centric device dependent content world move to an experiential device agnostic world. Maybe seeing all this happening in a decade is overly optimistic or maybe it's too conservative, but design and the profession of designer is going to be very different at the end of this next leap into the future.