Design Guide — Ableton Extensions SDK

Designing Extensions

Webviews are a flexible and powerful way to create custom user interfaces for your Extension. Since they use standard browser technologies, you can design them to look and feel like a natural part of Ableton Live or create something completely unique.

To help you get started, this guide covers some of the design principles that we have at Ableton, adapted for Extensions. They will help you create user interfaces that are both functional and feel at home in Ableton Live.

General Principles

We use visual hierarchy to indicate sonic importance. Parameters with the greatest impact are visually prominent, secondary parameters are less important. We use smaller sized controls, or reduced contrast. Try quickly scanning your extension with your eyes - do the most important elements stand out?

Choose a focal point. Arrange components around a key element — like a visualization or LCD — to anchor the layout. Choose elements that are primary to the function of the extension, or group of elements and build around them.

Group related parameters. Controls that share a functional purpose should appear together. Use dividers, spacing, or color accents to reinforce these relationships. If your extension has many parameters, organize them into logical groups.

Vary layout and rhythm. Repeating the same control type might make an extension feel mechanical. Look for opportunities to vary controls. Five items could be displayed as a select element or a radio button group.

Use spacing as a design element. Whitespace improves readability and gives controls room to breathe. Check for crowding — if controls feel cramped, increase padding, or margins.

Consider data flow. Arrange components to reflect processing order — top-to-bottom or left-to-right. This matches conventions from music hardware and Ableton Live.

Visualize what you can’t hear. Extensions cannot process real-time audio from Ableton Live. If necessary, and where possible, use visualization to provide a preview of the output when parameters are adjusted.

Show essential controls. If an extension has a lot of controls, it can be difficult to scan. Hide optional, advanced or secondary controls in expandable sections.

Prefer disabling controls over hiding them. Greying out controls using :disabled is recommended, rather than hiding disabled controls.

Stay consistent with Ableton Live. Familiar interaction patterns and terminology keep you in the flow. Consistency and convention make your extension more intuitive.

Color

Ableton Live’s signature control colors, yellow and blue communicate interactivity in a way that is consistent and immediately recognizable.

When using your own colors, aim to meet WCAG accessibility guidelines.

Components

Buttons

• Use action words – verbs – for button labels
• Use toggles or checkmarks for “on and off”
• Single-word labels work best
• Use the same width for each button in one group
• Adapt any confirmation button labels to reflect what will happen when they’re clicked. Use “Cancel” as a label consistently.
• For parameters with on and off states do not use a button, use a checkbox or toggle

Radio Buttons and Select Elements

• Use a group of radio buttons if you have five or fewer options and it is important to see the options immediately.
• Use a select element for four or more items especially when they require longer labels.

Toggles and Checkboxes

• Use a visually prominent toggles for controls that turn something on and off. Toggles invite interaction and experimentation.
• Use standard checkboxes for additional options that are related to a parent control, or a preference, for example, “Save my settings”

Range Sliders

• Use sliders to communicate range and relative position. The slider track gives users a visual reference for where the current value sits within the full range.

• Avoid using sliders for very short discrete ranges. If a parameter has only two steps, a radio group conveys the discrete nature more clearly and avoids implying false continuity.