Inside Sketch: An introduction to semantic design
Take a peek at what it’s like to design for Sketch — in Sketch
At Sketch, designers from different teams regularly catch up to share and discuss new ideas. In one of our sessions, former Sketch product designer André Gonçalves and I kicked off a conversation about prototyping and designing with meaning. Our discussion quickly turned into a fully formed concept that we now use to design new features at Sketch. We call it semantic design.
In this post, I’ll be talking about our initial approach to semantic design and how it’s influenced some of our new features.
What is semantic design?
Semantic design is an approach that focuses on adding a layer of meaning to the tools and features we use for crafting user interfaces. For us, it means building our design platform with a comprehensive understanding of what the designer needs.
For example, what if we gave meaning to what’s on the Canvas? What if Sketch could understand that a rectangle is actually a button or that the image in a group is actually a profile picture?
The goal of asking this question is to make Sketch easier to use by improving communication between the platform and the designer — in both directions. While it’s important that the tools are intuitive to use, we also wanted to start designing features that were better at anticipating the user’s needs.
Our discussion quickly turned into a fully formed concept that we now use to design new features at Sketch. We call it semantic design.
Semantic design influences
To help paint the picture, let’s talk about inspiration. We first got the idea for semantic design from the use of semantics in language and technology.
HTML and markdown, for example, are great at translating abstract concepts from code into titles, paragraphs, and inputs that browsers can then turn into documents or websites.
By applying semantics to code, screen readers can interpret what’s on a page and make it accessible for people with functional diversity.
Semantic design layers
While the payoff is worth it, understanding and applying semantic design can be complex. You have to work against preexisting logic and strike a balance between doing and overdoing.
For example, while we all know a red hexagon sign means we need to stop our car, accidents still happen. But would swapping the stop sign for a flashier visual cue be more effective — or would it lead to confusion?
There are also multiple layers to how we understand and inform meaning. When we bring semantics into design, the process itself turns into a system. Because I’m a product designer, I like to call this three-layered system the design stack.
You can also think of the stack as the building blocks of semantic meaning.
To give you a better understanding before we move on, let’s break down each of these design stack layers, starting from the bottom.
You have to work against preexisting logic and strike a balance between doing and overdoing.
Data
Data is made up of every written or variable content that is part of the Artboard. This includes Images like avatars and headers, and text, such as titles, paragraphs and labels.
Visual
Visuals add context, rhythm and structure to your data. They are the most essential elements of the design stack. Visuals can be Components, shapes, colors, and icons — essentially all sorts of individual layers or complex groups of layers such as Symbols.
Prototyping
The prototyping layer connects visuals and Artboards to create a narrative through interactions. It does this by linking components, text and Artboards to communicate with the user.
Next, let’s take a look at some applications of semantic design.
Examples of semantic design in Sketch
Semantic design is still in its early days at Sketch, but there are already a few features making use of it. Let’s look at two examples.
Overlays
In semantic design, elements on an Artboard should be aware of their purpose. A good example of applied semantic design inside Sketch is the ability to turn Artboards into overlays.
When toggling from Screen to Overlay, Sketch shows you a new set of options to help you design more realistic prototypes. This dynamism is also great for handoff since developers can fully visualize and understand interactions before coding.
You can easily toggle between Screen and Overlay to customize different behaviors depending on the Artboard type you choose.
Color Tokens
Color Tokens translate your document’s Color Variables into JSON or CSS formats so you can use them directly in your codebase. By enabling communication between design and code, there’s already a layer of semantics involved.
We took it a step further by allowing you to give Color Tokens descriptive titles. For example, say you’re using the color black in your design. You can go from a #000000 hex or 0, 0, 0, 1 RGBA code to something like ‘foreground.primary.1’.
When you add this Color Token to your code, it’ll be clear to developers, browsers and screen readers that your page’s foreground is meant to be black. On the design side, it’s also easier to make changes once you’ve properly identified your colors.
With Color Tokens, you can use any descriptive text such as a color (Green) or a purpose (Brand) to communicate their meaning.
Semantic design rules
While bringing semantics into your designs can be a great asset, it’s easy to get carried away and start changing everything. So, before implementing any new semantic feature, make sure it:
- Doesn’t take away from the designer’s creative freedom
- Is backed by research that proves the new model aligns with how people already use the tool
- Truly belongs in your platform’s ecosystem because it adds tangible, measurable value.
Because semantic design often affects more than one feature, it’s trickier to disable or tweak the feature once it’s out. That’s why it’s important to remember that the ultimate goal of semantic design is to communicate better.
In our case, since we’re working with a design tool, our goal is to improve communication between:
- Designer ↔ Designer
- Designer ↔ Stakeholders and developers
- Designer ↔ Tool
Remember that the ultimate goal of semantic design is to communicate better.
Semantic design beyond the UI
Adding semantic design functionalities to tools like Sketch can help designers create more realistic experiences and communicate better with other stakeholders.
But it doesn’t end there. One may argue that semantic design extends to other areas of our lives: on the road, at the airport, in the mall, and even at home.
Can you think of other tools or features that could benefit from a touch of semantic design magic? Let us know on Twitter or Instagram!
