Why Not Both?

The web is defined by the interplay of various components: back-end technologies such as servers and databases to support the website itself, client-side technologies to present content and provide interactivity, and the network to deliver the website to the user.

While there are a lot of layers to this medium I want to focus on the presentation layer — HTML, CSS & JS. In this article I am going to be using the shorthand web to refer to this presentational layer. (I realize that is inaccurate but, I don’t have a better word for it.)

The Medium of the Web

Bret Victor in his talk Stop Drawing Dead Fish differentiates computers from other mediums such as drawing, photography or animation. In his opinion, what makes computers different from all these other mediums is the fact that you can create simulations and add interactivity. It is not just a drawing of a fish or an animated fish but, an interactive simulation.

Frank Chimero explored the medium of the web in his article The Web’s Grain. What makes the web truly different from anything else. What are its intrinsic properties? He summarizes it as “an edgeless surface of unknown proportions, comprised of small, individual, and variable elements from multiple vantages assembled into a readable whole that documents a moment.”

For me, the intrinsic qualities of the web are fluidity, responsiveness and dynamism. Or as Jen Simmons puts it much more eloquently:

1. Mix fluid with fixed
2. Four stages of squishiness
3. Truly two-dimensional layouts
4. Nested contexts
5. Ways to contract and expand content
6. Media queries, as needed

Design in the Medium

In the past couple of years, we’ve gone from being excited about CSS Grid Layout to using it in production. However, it seems that there is a bit of inertia when it comes to designers adopting it.

Jen Simmons often speaks about how everything about web design just changed. We are no longer limited to fixed or fluid column-based layouts. Instead, we can design truly two-dimensional layouts. But, do we actually have any tools that allow us to design that way?

When we design in Sketch or Figma, we are designing a snapshot in time and space. You have to create multiple snapshots to describe the responsive behaviour of one screen. Now imagine designing responsive two-dimensional layouts with multiple states and variants: quite tedious.

So what is the answer? Design in the medium. You need to be able to code to design in the medium. Arguably, this barrier to entry is too high. What if you could design in the browser without needing to code?

Tools like Framer, Modulz, Alva and Playroom are bridging this divide. Framer in particular is quite exciting. It allows you to import code components and mix them with design components. You can extend design components with code or even build a custom UI to interact with them.

Designers are equipped with tools that focus on communicating design aesthetic, and developer tools are more geared toward controlling behaviour and functionality.

— Alan B Smith, Component-Based Design

Fundamentally these are still design tools. They are visual code editors with the purpose of building living prototypes not the actual application itself. They don’t allow you to define behaviour and functionality. They are not meant to replace any development tools.

My hope is that we will get something like Unity for the web. Something that both developers and designers can use. A tool that allows us to define both aesthetic and functionality with an intuitive interface. That interface is going to be some combination of GUI and code editor.

Generative Design

The convergence of design and development tools will allow us to discover new and more innovative ways of working. Code is not the most expressive or performative of platforms. In my opinion, describing visual characteristics in code is tedious and not-intuitive. For example, designing an animation with the After Effects timeline panel is a much better experience than doing the same with CSS or a JS library. You can visualize the timeline, adjust curves and iterate much faster.

The Compositor team has been working on some truly interesting tools. Modifying the UI directly or dragging components to create layouts is again a much better developer experience. It also allows you to explore and iterate with very little friction.

Project Phoebe was a brief attempt at using mutative design for UI and Adobe seems to be exploring this space too. But, we are just scratching the surface. What would the UI design equivalent of Real Time Topology Optimization look like? Can we define a set of constraints, allow the UI to morph around it and iterate?

With generative design you can start leveraging the power of the medium. You don’t have to manually create all the possible layouts. You have the ingredients. You can define a recipe and explore all the possible permutations.

Generative design mimics nature’s evolutionary approach to design. Designers or engineers input design goals into generative design software, along with parameters such as materials, manufacturing methods, and cost constraints. The software explores all the possible permutations of a solution, quickly generating design alternatives. It tests and learns from each iteration what works and what doesn’t.

—Autodesk Generative Design

Let’s focus on one category — layout. Much of web design is stuck in the mindset of fixed or fluid columns where content shifts around at breakpoints, almost completely ignoring the two-dimensional nature with the possibility of overlapping content.

Frank describes web design as “creating assemblages of elements, then associating them with the appropriate space”. I did an experiment very much inspired by that statement. Start by defining a high level fluid grid, say 6x4. Take a document and slice up the different sections into components, give them random grid sizing and drop them into the layout. The user can then lock items and continue regenerating the grid until they find a satisfying layout. You can try it yourself in this CodeSandbox.

The results were a lot better than I expected. It has been hard to break out of the twelve column mindset for me. This helped.

These are just a first steps. We could get people to rate these layouts on a scale of 1-10 and use that data to train a machine learning model which could then in-turn generate layouts for us. There is a lot more to explore in the world of generative design. I’m excited to see what else the web design and development community comes up with. Perhaps generative design will be the bridge between design and code?