A proposal for improving artboards in design tools

In Sketch, Figma, Adobe XD and others there is this concept called an artboard. It’s basically putting all of your different screens on one mega screen and you organize it as you see fit. You zoom in and out to go to where you want to go. Unfortunately, although its the new cool thing, I find the usability to be terrible. Here is a picture of my current project.

On the left hand side you have your different artboards (or Frames in Figma) and a tree of all the different content. I have an alternative proposal for all of these design tools. Introduce a new object called a “Page” which can contain one or more different artboards. Show one page at a time and organize them in a tree on the left. Here are the benefits:

Performance
It’s slow to have all those layers on the screen at the same time. I don’t need it. I don’t need to scan through them. I work on one screen at a time. By optimizing the content this way, you are loading less information into the browser and can make things work faster.

Linking the prototypes
One might ask how you link the screens together in prototype mode if they aren’t on the same screen. My answer is simple. Just drag the line into the tree and link that way. Let me show you my project with the links turned on.

Are you seriously telling me that this is helpful?  Oh, but wait, maybe if I just turn on the links for a single screen?

Still not helpful!  By having the links go to the tree on the left, then I could collapse the tree nodes to simplify my view.

Finding the screen you want
Once the project hits a certain size, I can’t find anything anymore. Having pages lets me organize my thinking. I would have sections of the application and probably one more layer of sub-sections. Then I would have each use case flow on one page each. Then my single flows are easier to scan and my sections are organized together.  I am planning on moving my artboards around to see if I can do this better, but for now, it’s pretty hard.

This really isn’t any better. I find myself wanting to put giant labels for the sections, which doesn’t help anyway

Summary
There are other minor benefits, but I think it would a major improvement in organization to have pages (and sub-pages) that separate the content in the tree. I would hope that this would actually make the products easier to scale in a performant way.

Sometimes I feel like most designers are using these tools for really simplistic projects, like a basic mobile app. I make big expensive software. I need a design tool that works for many screens.

Leave a Reply