Akira UX: Building an adaptable UI Header Bar

Posted in Updates

Akira, is one of my many life long dreams of having a native UX Design Software for Linux. Last year, I decided to completely switch to Linux by building a custom PC, ditching any proprietary software, and stop using Apple products.

Akira UX Logo

I did some Vlogs about it and I also documented my experience with some reviews and tutorials. So far so good, but the lack of a modern and fast UX Design tool is a huge bummer while working on Linux.

I know that apps like Figma, Gravit Designer, and so on, can be used on Linux, if not via an official packaged App, at least via the browser, but these solutions are not great.

These are all Electron apps, basically web apps built in JavaScript and packaged as native apps, and if you know a little bit about Electron, you know how painfully heavy and resource hogging can be. Since I don’t want to buy 32GB of RAM just to run Slack, Chrome, and a Design tool at once, I absolutely need a native solution.

I’ve been learning Gtk+ and Vala for the past here, and after successfully releasing and maintaining Sequeler, I decided to start coding Akira full time.

Early mock-up for Akira UX

For the sake of keeping this blog post short and on point, I will avoid talking about the technical limitations and struggles that come with this project (because there are a lot), and I will be focusing on a challenge I wasn’t expecting, building an intuitive UI for a UX Design Tool.

What makes an app good or bad? What makes the user say “This is easy to use”? What contributes to a frustration-free experience while using a new tool for the first time? A Good User Interface!

Creating a good UI for a design tool is extremely complicated for the simple fact that not every user reacts in the same way and feels comfortable with the same interface. How many of you likes to use a Dark Theme instead of Light one? Or how many times did you try to update your icon themes to reflect your taste? Other than a simple “I like this style better”, there’s an important reason why users want to update the look and feel of their design software, and that’s improving usability.

I decided to build custom icons in Akira for these primary reasons:

Not relying on the distro icons since they can drastically change or don’t exist at all;
Control the visual consistency across distros;
Strengthening the brand identity of the app.

Having custom icons, also gives me the ability to offer various options and styles without compromising the consistency of the App itself. So, let me show what I did.

Smoothing the learning curve

How many times did you hover over an icon or a button in a new software waiting for the little tooltip to show up and tell you what that weird icon means? Well, that’s annoying, and learning new software should be an easy and smooth experience.

That’s why in Akira, the main tools and options are all properly grouped and organized in the Header Bar. The first time you open the App, you will see these bright filled icons with a label description underneath.

Filled icons with labels

Every set of icon will have its own colour group in order to “teach” the user what kind of tool a button belongs without specifically saying it. With the image above, you immediately understand that purple icons affect the layout, while the slate icon belongs to a system type of action.

Once you get used to the interface, you’ll have the option to toggle the labels off, shrink the Header Bar, and gain extra real estate in your app.

Filled icons without labels

Obviously, these options work exactly the same with the Dark Mode.

Filled icons in dark mode

I could have stopped here, but as I said at the beginning, not every user is comfortable with a specific UI, and I’ll be the first one to admit that these icons I designed are pretty heavy and distracting. You could find yourself wanting to streamline the overall UI once you get comfortable with the App and you don’t need such a heavy icon style.

That’s why I decided to create 2 extra variations and pack everything into an easy and accessible preferences panel to manage the interface.

The Interface Panel

This Panel will give you the option to change icon style between Filled, LineArt, and Symbolic, and of course you can switch On and Off both dark mode and labels with any of the available styles.

Here’s a bunch of screenshots with the different style examples.

Symbolic Ligh
LineArt Light
LineArt Dark

This approach also gives me the flexibility to implement future icon themes and accept contributions from the community.

This is obviously still a work in progress, and things can drastically change from day to day, but I think I’m on the right path of creating a beautiful and useful tool that can adapt to anyone’s taste, without compromising its own brand identity and visual consistency.

You can follow the development of Akira from the official GitHub repository or support the project by becoming a Patron.