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.
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
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
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.
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.
Obviously, these options work exactly the same with the 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.
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.
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.