Design Better Add-Ons for Adobe Express with Our UX Guidelines
To help you get started with our documentation, we present 5 practical tips for the design of Adobe Express add-ons.
Adobe Express add-ons extend the functionality of our all-in-one creativity app, and there are already more than 60 add-ons in the marketplace. To help you closely align the design of your add-ons with the Adobe Express brand and provide a unified user experience, we have created a set of UX guidelines — a living document that outlines design requirements and best practices for third-party add-ons.
Why we made these guidelines
The process of bringing add-ons to Adobe Express started over a year ago, when we invited a select group of developers to join a closed beta. Our weekly discussions with this initial cohort — including Vision Board’s Walter Kimaro, who wrote about his experience last August — proved wonderfully productive. They also helped clarify best practices for the process of building Adobe Express add-ons while offering Adobe’s team a window into what the first set of add-ons would be like.
During these talks, we noticed that our first dev cohort tended to show up with similar questions:
- “What design assets do I need to include when I submit my add-on?”
- “There are three different variations of [insert Spectrum component] — which one should I be using?”
- “I’m not a designer by trade. How can I level up the user interface and/or user experience of my add-on?”
We felt that our answers to these questions would prove useful for all incoming developers beyond this initial set of partners. And with that, the Adobe team collected the feedback into a single document that could be accessed by future members of the community, with the intention of updating and scaling the guidance over time.
What the guidelines include
Since we see our UX guidelines as a living document, it’s likely that the scope of what we include will grow. For the initial launch we focused on the following:
- Design requirements for submitting your add-on
- A breakdown of patterns, fonts, and components along with usage guidance for each, specifically with the design and development for Adobe Express add-ons in mind
- Links, where applicable, to related web pages of the documentation for Spectrum, Adobe’s design system, including downloadable Spectrum CSS, Spectrum React, and XD components
5 key recommendations for the design of Adobe Express add-ons
Though every add-on has its own specific needs when considering the UI and UX, there are a handful of recommendations you should start with when building your own add-on:
1. Review the guidelines before getting started
Just like reading over a recipe before you start to cook a meal, checking out our guidelines before beginning the design and development process will help orient your thinking.
This is going to be helpful for two reasons: First, you’ll gain a nuanced understanding of the components we often employ for add-ons, each of which has specific use cases. Second, you’ll start to see how components are used — both as standalone components and in relation to one another. Again, this is a bit like referencing a recipe for a meal: Understanding your separate ingredients while also getting a good idea of how they fit together will help you see how the principled use of component-level designs can translate into meaningful results for your add-on.
2. Open Adobe Express and start using add-ons
Using add-ons that are already publicly available will reinforce some of the notions outlined in our first recommendation: You’ll gain an even better understanding of what components we use and how they fit together to generate meaningful feature additions for Adobe Express. Since many of the current add-ons are built on the principles we’ve outlined, they’ll help you visualize what the end result might look like when you align your add-on’s design with our recommendations.
Three specific add-ons which nicely manifest these principles are:
When looking at these three add-ons, pay attention to these details referenced in our guidelines:
- Padding: used in multiples of 8 — typically 8, 16, or 24px — which includes the interior left and right edges of the add-on panel
- Container shapes: have consistent corner rounding — typically 4px or 8px
- The large Spectrum button component: actions typically use the “primary” or “accent” variant
3. Make use of Spectrum, Adobe’s design system
You might be noticing a recurring theme across our recommendations — proper use of Spectrum can significantly enhance the quality of your add-on.
Design systems are great resources for a couple of reasons. First, they reduce the guesswork that often goes into making functional and visual decisions. When starting a design project, it’s natural to have questions like “how should buttons be styled?”, or “what font sizes should I use for my H1, H2, and H3?”. Leaning on a consistent framework for answering those questions, then, makes it easier for us as designers to focus on solving core user problems, rather than getting hyper-focused on component-level details.
End users also benefit significantly from design systems. If you’ve ever opened up an application and felt like every panel, text field, and interaction was designed by a different team, then you may understand why — inconsistency can be jarring. So when designers use systems to frame out their projects, end users reap the benefits by way of having a unified, cohesive experience to explore.
None of this is to say that design systems alone can answer questions regarding visual hierarchy, style, and UX patterns — that, in part, is why the Extensibility team decided to create guidelines specifically for add-ons! But if you use Spectrum while also cross-referencing the documentation for Adobe Express add-ons, then you should be able to generate an add-on that will be intuitive, familiar, and delightful for users.
For more tips on how to use Spectrum to build better Adobe Express add-ons, watch this 10-minute workshop hosted by our designer Stephanie Corrales and check out her slides for reference:
4. Be mindful of space
Constraints are a natural part of creating any user experience; while not always ideal, the limitations we face as designers not only shape the things we make, they can also clarify our objectives.
The add-on panels — which are a structural extension of the editor panels in Adobe Express — have some clear limitations with regard to width and height. That’s intentional: Since we want to make as much room as possible for users to focus on the content they are designing — i.e., the pages central to each project — we want our side panels to be narrow enough to not get in the way.
The main container for add-ons maintains a consistent 320px width, while the height remains dependent on the browser. Those dimensions — which typically render as a tall rectangle — require you as a designer to think specifically about how to organize your add-on so that the experience for users is intuitive.
Here are some things to keep in mind:
- Buttons — especially ones for primary actions — should be visible to the user, and ought not display “below the fold”, i.e. past the default visible area of a scrollable interface.
- Long sections of scrollable information aren’t always bad — browsing icons or illustrations with unlimited scroll is a fairly standard navigational paradigm — but if you have distinct sections of content, then you may want to break things up by way of component-level implementation.
- Tabs and accordions can help; the former allows the user to click between different sections of content, while the latter makes it possible for the user to expand and collapse information at will.
- Allowing the user to click through to lower levels of the panel can also help organize the add-on experience. This is a common pattern within Adobe Express — for example, when browsing images in the Media panel, clicking on a “View all” link associated with a carousel of content for “Beauty and fashion” will click the user through to a dedicated panel of images for that section of images.
When considered alongside consistent use of Spectrum and adherence to our UX guidelines, it’s possible to see the constraints of your add-on panel as an opportunity to better design the experience!
5. Make something focused and distinctive
Many of our early dev partners came to the Adobe Express office hours with add-ons that served several use cases all at once: For example, imagine an add-on that allows users to browse a library of pre-made icons, and generate photo-realistic images by way of AI, and help users generate illustrative patterns, and…
To be clear, these are all great ideas. However, we’ve found that the most successful add-ons tend to do one or two things really well, rather than tackling many different use cases at once. With that in mind:
- When starting with a set of ideas, ask yourself — do these concepts fall under the same order of feature? For example, libraries of icons and illustrations are a match, while a library of icons and a pattern generator are fairly different.
- When two ideas are dissimilar in a way that feels noticeable, then consider splitting into two separate add-ons.
- When two ideas seem to fall under a similar order of things, then a single add-on might work, however stay mindful of how to organize these features by way of component-level separation (i.e. two different tabs).
Another thing we really try to push by way of extensibility is the notion of a distinguishable feature. The core Adobe Express team is always working to launch functionality that our users want, however it’s not possible for us to tackle every single user request. Here’s where our partner community can really shine!
If you want to build an add-on but don’t know what you should build, then look around for features that you want to see in Adobe Express but which don’t yet exist. Our Behance showcase is also another great resource for finding add-ons inspiration.
Here are a couple of add-ons we love that managed to offer something both focused and distinctive:
- Attention Insight — this AI add-on helps users understand which aspects of a design catch a viewer’s attention. Clicking through the user interaction allows the user to see their design composition overlaid with heatmap-style visuals that indicate where eyes are likely to gravitate.
- Color Blindness Simulator — this add-on simulates various kinds of color blindness including red-green, blue-green, and full colorblindness. Designing with accessibility in mind is really important, and this particular add-on does a nice job of bringing a necessary feature to Adobe Express.
What’s next
Our UX guidelines help you understand Adobe Express users and their specific needs, while also providing UX best practices and ensuring add-ons appear more cohesive with the overall Adobe Express product experience.
As the guidelines are an ever-changing living document, you can expect regular updates and additions that will help you create cohesive add-ons that strengthen the ecosystem around Adobe Express. So check in periodically to review what’s new and incorporate it in your add-on design process.
We’d also love to hear what you think: Your feedback is critical in shaping our design best practices for add-ons, a fact that aligns with Adobe’s Open Developer Platform Principles, which influence the creation of more thoughtful add-ons for Adobe Express.
To let us know how our UX guidelines help you build add-ons for Adobe Express and to provide feedback, come and talk to us directly in our Discord community and connect with us at our bi-weekly Office Hour sessions.
