From Layer to Objects

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?

More on this soon…

While looking interesting, this would probably be a bad idea in my opinion. This will make an unnecessary shift from easy, understandable concepts into a questionable area of new concepts.

In my own humble opinion, this will not cover all use cases - like general graphics or icon design, but instead will add some mental overhead. That’s what happened in programming, and the main reason FP is to gain popularity again. It’s just much simpler for understanding.

Hey Aaron, welcome to the forum, and thanks for sharing—it’s an interesting thought experiment.

I’m not an expert on the subject, but it seems that symbols or templates could be useful here.

That aside, I think the layers model also has a creative attribute that I really enjoy.

Thanks for the reply, Jonne!

Could you do me a quick favor? I added the images in the wrong order and I’m getting an error if I try to swap them. Are you able to do that as a moderator?

Back on topic:
I agree that that Layers give Sketch a lot of flexibility in illustrating things. I’m wondering how we might be able to give them depth beyond visual attributes.

In the world of software, a “Title” (for example) isn’t just a text with styling, it represents data stored somewhere in the system that has a purpose or intent. It might also have conditional logic or layers of permissions.

Today, we capture tons of visual attributes in a layer. How could we start thinking about those layers as something more than what we see? My approach is to start characterizing them as “objects” that have a visual presence… but like a “symbol”, they represent so much more.

I agree with you that this forced categorization doesn’t work for icons, graphics, and other static artifacts.

How could we create a division within Sketch between those types of outputs vs. building something more dynamic like a screen design or a whole application?

The problem I want to solve is “attributes”. Where do we capture the definition of what a “Title” is along with any logic tied to it? What about roles/permissions for actions? How might we denote which data on a component functions as metadata (users can use it to sort or filter) vs content that’s unique to the object?

The problem is that these are all key parts of designing the actual system and the overall experience, but UX and product designers don’t own the artifacts where those decisions are being made; hence why we’re often viewed by peers as the “stylists” of the software and not participants in the rest of the development process.

Swapped them :white_check_mark: