With object-oriented design rapidly growing in popularity as a means of combining important context and UI components, it would be amazing to see a drawing tool like Sketch begin to depart from the traditional “layers” model to something that offers designers a way to both draw and define objects.
Example
Let’s consider a recipe card design.
Today, in Sketch, we’d draw this using primative shapes, frames, groups, and text elements.
What if, instead we construct a recipe object from a Title, Thumbnail, Description, and other content/metadata tied to definitions and requirements in the tool.
What problem are we solving?
In this example, the designer is starting with the question: What is a recipe? …and then moving through asking what data the user needs to identify one, how someone might decide which one to engage with, and other key user-centric questions as they define the outline of their object.
This part of the process is happening outside of our drawing tools (if it happens at all), creating separate technical and business artifacts driving how development teams build the product. This can often leave UI design as finishing work at the end and leave designers out of discussions making key design decisions.
My aim with this concept is to nudge our drawing tools towards facilitating the definition of the objects that make up the software we design in addition to the styling.
When Layers Become Objects
In concept, I’d love to see the Layers panel organized into the elements that make up an object. If we use terminology from Object-oriented UX (OOUX), these would be Content, Metadata, and Actions.
This would help designers make initial considerations for what type of elements they’re putting on the screen as they build their objects.
What’s interesting about this approach is that it organizes elements based on their real-world relationships rather than strictly their orientation or groupings in the screen layout. How could this impact design decisions? Will this feel natural or awkward when arranging elements on the screen? I’d love to find out.
Next, we also need a way to assign attributes to a layer beyond style. Why type of element is it? Where does the data come from? What relationship does it have to other elements? Is it part of this object or inherited from another nested object?
