The creative process behind Dash’s UI

Dash is a concept of a Design tool. In this article, I briefly describe my references and show some snapshots of the process behind the final UI.

I’ve always wanted to design advanced UIs for desktop apps, focusing on expert users trying to extract the most of their tools. After years of designing mobile apps for broad audiences, I was having a hard time achieving the results I wanted.

When I challenged myself to design from scratch a concept of a Design app, I knew that I wanted it to not only look good but also to be realistically feasible, and of course, with some serious thought on how it should work.

Sneak peek of the properties and tools panels.

So I came up with Dash, a Design tool focused on productivity and precision, with shortcuts for routine tasks and tools for non-destructive operations.

It is a concept in which I aimed for a modern, sleek, and feasible look. It is the means I’ve found to learn and practice how to design desktop apps.

First attempt: the classic style

Beautiful pieces of software such as Adobe Suite and (the late) Microsoft Expression have always inspired me to learn UI patterns for solving complex problems for designers. And then suddenly Sketch started a revolution that brought tons of great tools such as InVision Studio, Flinto, Framer, and then Figma, and with them a new and flatter UI paradigm.

This small Inkscape "align and distribute" panel redesign was the base for Dash’s UI.

So when I started drafting Dash’s first UI, I tried to blend a classic Adobe & Affinity style with Sketch’s lighter and modern approach, in a way of paying homage to this beloved software, but also bringing a fresher look.

It started with this Dribbble shot where I tried to redesign Inkscape’s align and distribute panel.

The result was a mix of miss-matching styles (although some icons came out really cool).

Later on, I simplified and improved the consistency between icon and panel styles, and came up with Dash’s first UI. I think that I achieved the look I was aiming for (although it was, after all, looking a little outdated).

For this approach, I used highlights and drop shadows to convey affordance on text fields and buttons.

Second attempt: the Figma look-alike style

Revisited icon set with a “flatter” look.

The next iteration was an attempt to modernize the UI for a flatter and contemporary look. I understood that although the classic look was kind of cool, it would not sell the "modern and sleek" feel I was aiming for.

For this approach, I came closer to Figma’s UI style, with some good deal of inspiration from UXPin. The art direction update is quickly noticeable from the icon set to the panels.

I managed to find a distinct yet familiar look.

First iteration with a flatter UI.

I was happy with these results but bothered with the excess of lines and borders enclosing panels. When removing them I couldn’t resist and went too far, ending up with something too close to Figma.

Did you notice something familiar? After a couple of iterations, I came to like this "Figma approach" very much.

When I achieved this look, I started experimenting to see if the UI could get the functionalities I wanted without falling apart. Things like 2D modifiers and a unified panel for fill and stroke. The experiments can be seen in the Dribbble shots below.

Dash has a combined fill & strokes panel!

Using Dash's properties panel to inspect object properties

Yes, we've got 2D modifiers!

Well, the resemblance with Figma’s iconic UI made me think I wasn’t being able to bring something new to the flat UI paradigm. And then I experimented a little more until I came up with the next concept.

The drawing table as a center stage on Dash’s final UI.

The third and final attempt: the drawing table metaphor

Being Dash a Design tool, the metaphor of “drawing table” felt nothing but right. A “center stage” where all action would occur with the main objects and tools in an upper level, while layers and properties, things that most of all give support to whats’s going on in the main area, would be in a lower, less prominent level.

Dash’s final UI, light mode…

… and the dark mode.

The drawing table subtly elevates amongst the other UI panels. At a first look, it is barely noticeable. But after hours of usage, the metaphor get’s stronger and helps users to focus on the main task, while other UI elements behave as supporting tools.

I also refined the grid of the properties panel with a three columns layout, more white space, and more breathing area. This approach finally brought what I was aiming for: a modern, refined, and sleek UI, that looked familiar and yet unique. I got so carried on by it that I also created a dark mode.

This UI paradigm and guidelines felt flexible and robust enough to be extended and support upcoming features without breaking consistency.

Another shot of the panels, because I liked them so much.

I prepared a side by side comparison between the first and final versions. You can check it below ;)

Dash is a work in progress, a pet project I’ve been working on for a couple of years and of course, I would love to see it launched as a real Design tool someday. Until then, I’ll keep trying to evolve it as the tool I wish I had in my hands.