Profile picture of Eden Spivak

6 min read

How we branded Editor X

It's the loose ends in our brand that make room for future growth. Here’s how Editor X came to be — and how it keeps evolving.

A metallic silver X from the Editor X logo on a black background with a grid

Illustrations by {name}

Stay informed on all things design.

Thanks for submitting!

Shaping Design is created on Editor X, the advanced web design platform for professionals. Create your next project on Editor X. 

While branding is mostly about set rules, design systems and consistency, the Editor X brand champions change and agility above all. A little over a year since our launch, we wanted to look back at the branding work that made Editor X what it is, and the ongoing work that allows it to develop into what’s to come.

As an advanced web creation platform built for professionals, Editor X poses a unique challenge and opportunity for the team crafting its visual identity. “As designers ourselves, we’re our own target audience,” says Amit Asulin, Head of Editor X Brand, “so it was important for us that the brand speaks our language and that we truly relate to it.”

"As designers ourselves, we’re our own target audience, so it was important for us that the brand speaks our language and that we truly relate to it.”

- Amit Asulin, Head of Editor X Brand

An agile brand built for scale

Good branding requires the design and content teams to work in close sync and collaboration. In the case of Editor X, all stakeholders involved agreed that the brand should be dynamic from the start.

“As a relatively small team of writers, designers and product specialists, we’re extremely agile,” says Content Lead Maria Hayday. “Our technology is constantly innovating and so are we, so we wanted the brand to reflect that, and feel like it’s ready to evolve at any second.”

This decision led to a somewhat unconventional branding approach, where the color palette, typography and grids didn’t come in until later in the process. “Working as a team, we each poured our hearts and intuition into the work at first, until the most relevant styles just naturally caught on,” says Amit. “The clear rules and brand book followed suit, but when they eventually did come in, it was from a much deeper, well-reasoned place.”

Model and product photography in the Editor X brand

A product-first approach

The team’s first step was carrying out extensive research. Starting with the mandatory competitor analysis, the hunt for inspiration quickly branched out into everything from art to fashion to vintage instruction manuals. “We gathered so much knowledge and tools that we were eager to put into practice, we just didn’t know what shape they’re going to take on just yet,” says Amit.

From looking outwards, came time for introspection. The Editor X product and the creative freedom it offers are the backbone of the work that we do, and the branding had to arise — and keep evolving — from that very core.

The team deliberated over important questions, from deciding on the brand’s name to it’s language and essence, and striking the right balance between its different values and elements — how edgy do we want to be? How technical, or how serious?

These conceptual discussions took on a more concrete form once the first assets came along, followed by design briefs and deadlines. With the product’s launch in New York around the corner, the team got started on a website homepage and the design of a real-life exclusive event. It was time to put theory into practice.

A website design on Editor X

But first, a logo

A logo is, without doubt, the single most important asset for any brand. There can be something intimidating about trying to encapsulate a brand’s mission, values and tone in a design that will sometimes be as small as 20x20 pixels.

The Editor X logo stemmed from the letter X, whose sharp angles and negative-shape triangles feel techy and carry the promise of motion. After multiple iterations, the design team created a right-pointing arrow that seems forward thinking, as if spearing ahead.

From there, they refined and perfected the design with the help of various teams within the company. The team worked with animators to breathe life into the logo, which opened up new interpretations and showed off the versatility of the design.

Together with the UX team, they checked all logo placements within the product, and assessed their various needs accordingly. This led to the creation of several versions of the same logo, which would all coexist under the same brand — a simplified 2D version for web and product, and a more complex 3D logo for social media, live events and more.

Other logo versions include a full wordmark and the isolated X letterform. Coinciding with the vision of the brand as dynamic, a logo that can take on different forms felt only fitting.

The Editor X logo placed on a grid

The Editor X logo shown as a full wordmark and the isolated X letterform

Black and gradients that tell a story

In the same way, the team wanted to create a color palette that’s flexible and can evolve with the brand. Editor X’s primary colors are black and white, creating a sleek and professional appearance. Although our secondary palette is just as clearly defined, the team decided to not seal it off completely.

“Fashion houses introduce a new color annually, with the intent to shake them out of their element somewhat,” says Amit. “As a tech brand, we too can choose a new color to freshen things up every once in a while,” says Amit. With an initially dark and cool palette, the team started experimenting with warmer and lighter versions too, that still feel like they belong under the same brand and open it up to new possibilities.

The Editor X color palette

“When we keep expanding our visual language, it helps us as designers to stay inspired and involved,” says designer Shir Berkovitz. “It freshens things up for both ourselves and the audience, so we’re constantly invested in the work.” Shir explains that the team is encouraged to pitch new ideas and keep pushing the envelope at all times. “The way we see it now, every new design is temporary and will change soon after. The brand is dynamic and always in the works.”

An equal player in the brand’s color palette is its gradients. “For me, gradients are a whole story that unfolds from one color to the other. They give the brand a sense of mystery that’s grown inseparable from the brand itself,” says Amit.

The gradients’ abstraction is an important expressive force in the Editor X brand, and their appearance, too, evolved over time. As part of the constant expanding of the brand’s visual toolbox, the team kept exploring new ways to express them. “Grainy, flowy, 3D or soft — a gradient can take on endless manifestations, really,” says Shir.

Amit explains this by turning to a different kind of abstraction — music. “I tell my team that if the brand was sound it’d be electronic beats, with a bit of spiritual ambient thrown in. But at times, it can be over-the-top pop music.” Just like sound, or gradients, the Editor X brand’s flexibility allows it to highlight various aspects of its character at different occasions.

The use of gradients in the Editor X brand

The use of gradients in the Editor X brand

Defining a brand voice

Alongside the brand’s visual language, its written voice also developed over time. From the very beginning, Editor X’s voice spoke as one designer to another, keeping an eye-level approach.

With time, however, the brand started stripping away its formality and shifted to a more casual and approachable tone.

“Professionalism is one of our core brand values,” says Maria, “but now that the product is not as new, the burden is no longer on the words to show it. At this point, the product can speak for itself and we don’t need to rely on a formal tone to convey its professionalism.”

The Editor X tone can also change and adapt according to its various assets. The brand voice ranges from the emotive, instilling a deep connection with users, to the informative. As an example, we can look at these two texts describing the breakpoint product feature:

“Never compromise on visual harmony, no matter the screen size with custom breakpoints.”

“To style for specific devices, you can jump from desktop to tablet to mobile. You can also create your own custom breakpoints.”

The first is from a brand video, and the second is from an educational Academy X video. While very different, they both contain the same truth about the product and the creative freedom it allows users, and both sound just like Editor X.

Model and product photography in the Editor X brand