Digital Product Design is Not Graphic Design

In 2016, it’s no longer acceptable to have a “looks best at 640x480” footer at the bottom of your web page. But so many digital product designers are still trapped in this mentality—that we’re graphic designers.

It’s not hard to see why: our industry operates on a lineage of graphic design tools like Adobe’s Photoshop. These tools are built around a set of assumptions that just don’t hold for digital:

• We’re designing static graphics. Really, we’re designing interactive systems.

• The flattened graphic is the final product. It’s not; as designers we must communicate a set of visuals, concepts, and interactions that can be implemented to create the final product.

• Our work is done when it goes to “press.” Product development never stops—we’re always adding new features and iterating based on user feedback.

The core challenges of digital product design—building robust artifacts usable by a variety of people in different contexts—are not unprecedented: they’re the same challenges of industrial design. So when Ryan and I set out to create a true digital design tool, we decided to steal as much as possible from the 20+ years of industrial design tools.

This article outlines some of the core ideas we’ve, uh, appropriated.

Layout Intent

With the proliferation of mobile devices, the most glaring mismatch between graphic design tool capabilities and digital design needs is the fixed artboard size.

Fixed sizes make sense for creating a posters or editing photographs. However, when you’re designing something that needs to work well both on lil’ phones and giant tablets, the limitation is stifling. Your only option is to tediously duplicate each application screen for each target device size, manually repositioning every element in the design.

(Or worse, to just design one screen, hand it off to developers, and hope for the best.)

CAD tools have long had the notions of dimensions and constraints, which allow you to better express your design intent.

Consider centering a hole within a block; CAD tools allow us to express our intent by saying “the left and right dimensions are equal”, and the hole stays centered even when we later resize the block:

Likewise in digital, we should be able to express our design intent:

“There should always be a 12px margin between a label and its input.”

“The bar chart bars should take up all of the available space in equal proportion.”

Static Graphics vs. Interactive Systems

Even if you’re designing an app for a single device size, you still need to design multiple application states and screens.

In graphic design tools, this usually means creating an artboard for every possible application screen. But this duplication quickly becomes a nightmare—changing the nav bar color means clicking around every single artboard to make the update. Gross!

CAD tools instead have the notion of reusable “parts” that fit together in “assemblies”. Each instance of a part can be positioned in its unique context, but changes to parts will be propagated:

This model is much closer to what we do as digital product designers: We’re not manipulating the pixels of a photo, we’re creating reusable components and composing them together to form interactive applications.

Really, the true task of the digital product designer is not drawing screens; it’s specifying the individual components—menus, newsfeeds, buttons, etc.—that make up the screens.

While you can always just draw out components and their states in an exhaustive grid…

…a digital design tool should let you both create components and propagate design changes in context.

Multi-disciplinary Communication

These two ideas—capturing layout intent and specifying reusable components—aren’t just about helping individual designers. The true power of these ideas is that they enable communication across entire teams.

Industrial design is an intense collaboration: product designers imagine features, mechanical and electrical engineers figure out how they can work, and machinists actually cut the metal and mold the plastic.

True digital design is just as complex: UI/UX designers organize application features, visual and interaction designers detail usability cues and polish, and developers sling the code.

Both fields require close collaboration; digital product designers can’t throw static graphics “over the wall” and expect developers to build it perfectly any more than industrial designers can render a few 3D graphics and expect a finished product from China four weeks later. (As many Kickstarter projects discover the hard way.)

To collaborate, practitioners need a shared language.

Industrial designers and engineers talk about assemblies, sub-assemblies, parts, and machining operations.

Likewise, digital product designers need tools that understand the language of our field—that our applications consist of screens, reusable components, states, and data.

A tool that captures design intent allows us to produce better work:

• Responsive layout rules let developers understand how designs should adapt to different sizes.

• Style motifs that are named and explicitly associated with elements (e.g., “headline type”, “notification color”) allow visual designers to have a richer conversation with UX designers.

• Reusable components with named states—buttons that are “enabled”, “disabled”, or “pressed”—keep designers and developers on the same semantic page.

Graphic design tools that operate on the level of artboards and pixels can never capture our designs because they don’t speak this language.

Static images can never answer questions like:

• Is this field always supposed to be full-width, or is it just a coincidence on this device size?

• Are these two toggles the same kind?

• What are other valid options in this drop-down menu?

• Is this text part of this form, or is it an overlay?

Only by capturing intent within design artifacts can we move beyond the never-ending “Is this what you meant?” meetings and reviews.

Embrace Change

Apps and webpages, like physical products, aren’t meant to just look nice—they’re meant to be used.

Designing for usage requires prototyping. Full stop.

Just as industrial designers need a good workshop to build and test physical prototypes, digital product designers need tools that enable them to quickly explore design ideas. We should be able to resize an artboard to answer “what breaks when this screen gets smaller?” or to swap datasets and see “what happens in Germany when my labels are three times wider?”

Today’s graphic design tools aren’t up to this challenge—every change must be tediously made across every artboard.

This inflexibility limits exploration; propagating changes is too difficult, tempting us to just stick with the first design that comes to mind.

It’s telling that once an app has gone to production, changes are made by asking the developers nicely—no one ever wants to touch the outdated PSDs or Sketch files again.

But this is as insane way to work, because shipping a design is not the finish line—it’s the start. If you’re lucky enough to have customers you’ll soon be getting plenty of feedback and requests for new features.

Digital products are almost never “finished.” Change is a constant, and our tools must embrace it.

The solid modeling tools used by industrial designers and architects are built for change. If customer feedback shows that a steeper roof is needed to shed rain, architects don’t redraw everything from scratch—they open up their design and tweak a few parameters:

We think digital product designers need tools like this as well.

Our hope is that, by stealing some of the good ideas from CAD tools—layout constraints, reusable components, trees, and hierarchical modeling—digital product designers will have the power they need to do great work.