UX/UI Design Process For dbKoda.

Kalid Hosni
dbKoda
Published in
4 min readApr 3, 2018
dbKoda UI Design: Exploded View.

At dbKoda, we had the ambition to create a free, open-source, database development tool that has a wide array of features. A challenge we have relished! To do this, we have painstakingly delved into other apps on the market that serve a similar purpose. Through analysis, we determined how to build on the work of developers before us while maintaining our unique point of view. A perspective of simplicity, ingenuity and fun.

One of the main features we noticed in our review was that code based products trend heavily towards a utilitarian interface. Too spartan, too drab. Most products are monochromatic and don’t embrace much in the way of design flair. We don’t assume this to be a mistake either. When you are creating a product that is code heavy, it leaves little room for unnecessary fancy details that can distract, or create noise. However, walls of white and black, monotonous interfaces, and constant uniformity were not part of our vision.

When building dbKoda, we wanted to see if there was any merit to defying this. To put the fun back into fun-ction. Experimenting with colour palettes, wireframes and layouts, we found that we could allow for a visual language to emerge without getting in the way of the technical details. By doing so, we were able to create a much more informative and intuitive experience for end users. You don’t have to be Yoda to use dbKoda.

Day to day we come across a variety of user interfaces that are strategically loaded with implicit design language, and we felt to ignore this technique for dbKoda was to disadvantage our users. Our interface is intentionally crafted to have the look and feel of other kinds of more simplistic and approachable applications. Think of us as more Hemingway than Tolstoy.

dbKoda: Development Process.

We have experimented widely (and continue to do so) with the colours of the app. This process began with our signature dbKoda purple, forming our starting point. Building on that, with much discussion, we settled on a series of shades and pastel colours that do not overpower the page or distract from other information. Intended to bring calm and order. They suggest navigation and provide subtle distinction from one feature to the next. We added noticeable icons to create a visual shorthand for ease of use and productivity. Each icon is recognisable and unmistakable for another. Our goal was to give you features galore à la Starship Enterprise, but sans hundreds of unlabelled controls.

dbKoda: Aggregate Builder.
dbKoda: Drill-down View.

All of this culminates in one of our latest features, the performance panel. Here at a glance and in distinct colours, you can see the most necessary details in a moment. All the figures and intricacies at the back end of your product morphed into clear insights. Data transformed into information. Using a familiar blend of graphs and tables, with our love of intelligent layouts, we have a page that bursts with acumen.

dbKoda: Performance Panel.

The feedback that we have on our design approach has been incredibly affirming. It was always our hope that our vision and style would resonate with users. The positive responses have further cemented our commitment to a simple language that allows you to fully realise the possibilities inherent in dbKoda. As we continue to grow and refine our product we are deeply thankful that many of you are finding it not only a useful experience but a pleasurable one.

Thanks for Reading!

If you have any questions, queries or feature requests, please comment below!

dbKoda is completely free and open source on Mac, Linux and Windows. Download the app here and let us know what you think.

--

--

Kalid Hosni
dbKoda
Writer for

In UX, UI, Graphic Design, and Illustration. James Bond enthusiast, film aficionado, and comic book geek from Melbourne, Australia. Portfolio: www.licencetocre