We’ve launched a light redesign to our notation editor, with the goals of making it easier to find features and making better use of space. It also sets us up to make more future improvements.

Here’s the old design:

And here’s the new design:

The new design isn’t dramatically different, so there’s not much to relearn, but a few things have moved around. Here’s what’s changed.

Top and left command panels

Previously, most editor functionality lived in the left sidebar. There were nine subsections, which you could toggle through by clicking the left icons:

This got the job done, but there were a few inelegant things about it:

• Those icons on the left are pretty obscure. It’s genuinely hard to come up with a clear icon for something like “Engraving” or “Performance markings.” Why not just use simple text labels?
• The whole sidebar felt oversized and out of proportion, taking up too much space on the screen. Could we make more room for music?
• Our mobile editor already used a totally different layout, with a command panel on top of the screen. Could we be more consistent, always using a panel at the top?
• This design has a natural limit on the number of commands available in each subsection. Could we find a design that let us make more commands available?

Our redesign moves these commands to the top of the screen. This provides more horizontal space for your music, unifies the design with our mobile version, allows for an arbitrary number of commands in each section, and (we hope) makes it easier to find the feature you’re looking for:

To get more vertical space, you can collapse the whole thing by clicking the “X” at far right, or just clicking the name of an open panel:

We’ve kept a left sidebar, too, though it’s much narrower and more focused. It contains the editor search (as before) and the most common/basic commands, such as setting note rhythms:

As a next step, we plan to make the commands in the left sidebar customizable, so that you can put your own frequently used features in there.

Gray panel at bottom

The editor now has a gray panel at the bottom of the screen:

The theme of this area is: general editor functionality that isn’t strongly tied to the particular music you’re looking at. So it’s your unsaved changes count, links to keyboard shortcuts, preferences and ways to toggle various editor options (such as the touchscreen interface).

Our goal here was to simplify the number of buttons at the top of the interface and organize things better. We also like how the gray provides a stronger visual identity for the editor, to make it easier to tell at a glance whether you’re editing or viewing.

Other notes

• The current notations section — which shows you which notations are active on your current selected note(s) — now lives in the left sidebar. Previously it was above the notation.
• The editor search is now available in the mobile version. Finally!
• The current-voice switcher is now available in the mobile version (and uses a new compact design).
• The Instruments button is now visible in the mobile version. Previously it was relatively hidden in the “...” menu.
• The mobile version got a lot of general polish, making better use of space and providing easier access to more functionality.
• For our users with imperfect eyesight: we’ve made sure that the new design works well when you increase your browser’s zoom level. The icons will all get larger, but the overall structure of the page will remain balanced.
• In general, the design has a crisper, more modern aesthetic.

We hope you like the changes! We’ll continue listening to your feedback and working on making this thing better.