15 open-source tools to elevate your software design workflow in 2024
Tags: webdev, productivity, opensource, programming
Published: 2024-01-22 11:59:41

Writing code is just one phase of creating software solutions. And while there are many proprietary tools out there, open source is doing a great job of putting great tools into your hands. I've compiled a list of those I liked to work with most during the last five years.

_~ Image generated using Bing Copilot_

Tools
-----

I've organized these tools using the [double-diamond method](https://en.wikipedia.org/wiki/Double_Diamond_(design_process_model)) instead of specific categories. When designing software, it's crucial to know when to deploy each tool. This list helps you navigate each stage, ensuring you choose the right tools at the right time.

### 1) Discover

Tools in this category are meant to help you learn more about your future user and their problems. It includes tools to get in touch with people who deliver base data for your project. They help to keep users engaged during further steps in your development cycle.

#### ⚗️ Clearflask

[Link](https://clearflask.com/) | [Demo](https://clearflask.com/product/demo) | [Github](https://github.com/clearflask/clearflask) | [License](https://github.com/clearflask/clearflask?tab=Apache-2.0-1-ov-file)

Clearflask is a great tool to stay in touch with your audience. It gives your users the chance to submit feedback while keeping them engaged using a public roadmap and announcements. Sleek design and a minimal UI aim to keep user engagement high.

#### 🖼️ Claper

[Link](https://claper.co/) | [Demo (free trial)](https://app.claper.co/users/log_in) | [Github](https://github.com/ClaperCo/Claper) | [License](https://github.com/ClaperCo/Claper?tab=GPL-3.0-1-ov-file#readme)

Upload your Powerpoint or PDF file and make it interactive! Claper allows your attendees to scan a QR code and join your presentation on their own devices. They can then leave messages or submit forms for you to integrate into your presentation. This will be especially helpful for your in-person workshops with a broader audience. The tool also comes in handy for collecting real feedback when brainstorming ideas.

#### ☁️ Nextcloud

[Link](https://nextcloud.com/) | [Demo](https://try.nextcloud.com/) | [Github](https://github.com/nextcloud/all-in-one) | [License](https://github.com/nextcloud/all-in-one?tab=AGPL-3.0-1-ov-file)

Nextcloud and its ecosystem provide the base for collaboration, secure document sharing, as well as apps to schedule calls and meetings. It's the ultimate open-source platform for all internal and external communications. It includes chat and telecommunication, as well as file- and calendar sharing out of the box. And plugins from the official store make it even better. To name a few examples:

*   [Forms](https://apps.nextcloud.com/apps/forms) - Share and create online formulas and questionnaires
*   [Appointments](https://apps.nextcloud.com/apps/appointments) - Integrates self-service booking for your team, users, and stakeholders
*   [Excalidraw Integration](https://apps.nextcloud.com/apps/integration_excalidraw) - Adds a secure, collaborative whiteboard

### 2) Design

Design tools are geared towards planning software architecture, as well as user interfaces. They require a proper understanding of your target audience, as well as the problem you aim to solve.

#### ✍️ Mydraft

[Demo](https://mydraft.cc/) | [Github](https://github.com/mydraft-cc/ui) | [License](https://github.com/mydraft-cc/ui?tab=MIT-1-ov-file)

Mydraft is a great tool for creating first impressions of a user interface. It provides several shapes, icons, and outlines to quickly sketch your ideas. Wireframes can be exported and imported as `.json` files. All in all, it's a great tool to use before bringing out the big guns.

> It also [supports collaboration over a server component](https://github.com/mydraft-cc/server2), which I have not tested while writing this article.

#### 🖌️ Krita

[Link](https://krita.org/en/) | [Download](https://krita.org/en/download/krita-desktop/) | [Github](https://github.com/KDE/krita) | [License](https://github.com/KDE/krita?tab=GPL-3.0-1-ov-file)

I assume you expected [GIMP](https://www.gimp.org/) at this point of the article, didn't you? Yes, It is a great tool. And it gets the job done. But I find its learning curve rather steep. I found Krita fairly simple to get started with.

#### 🧑‍💻 Penpot

[Link](https://help.penpot.app/technical-guide/getting-started/#install-with-docker) | [Free Trial](https://design.penpot.app/#/auth/register) | [Github](https://github.com/penpot/penpot) | [License](https://github.com/penpot/penpot?tab=MPL-2.0-1-ov-file#readme)

You know Figma? Penpot is like that. And open source on top. You can select from a variety of templates and design frameworks such as material design. It facilitates real-time collaboration, supports dynamic prototypes, and an incredible onboarding experience.

### 3) Develop

During this phase, you turn your ideas into a solution. There is a ton of tools to choose when developing. These tools should include a little something for everybody to put to use.

#### 💻 VSCode server

[Install](https://github.com/coder/code-server?tab=readme-ov-file#getting-started) | [Github](https://github.com/coder/code-server) | [License](https://github.com/coder/code-server?tab=MIT-1-ov-file)

No matter what project you're developing on, at some point you'll give VSCode ([or its open source version](https://vscodium.com/)) a try. You can use it to develop in a dedicated dev-environment or debug integration scenarios.

> If you're looking for a collaboration tool, try [Coder](https://github.com/coder/coder).

#### 🗃 DBGate

[Link](https://dbgate.org/) | [Github](https://github.com/dbgate/dbgate) | [License](https://github.com/dbgate/dbgate?tab=MIT-1-ov-file)

As a great alternative to [DBeaver](https://dbeaver.io/), DBGate provides a variety of tools to manage your databases. Besides in built-in support charts and a query builder, you can use Javascript to query data. It even supports NoSQL drivers and native script builders. Give it a try if your project demands simplicity over in-depth features for SQL databases.

#### 🐶 Bruno

[Link](https://www.usebruno.com/) | [Github](https://github.com/usebruno/bruno/) | [License](https://github.com/usebruno/bruno/?tab=MIT-1-ov-file)

In contrast to [Postman](https://www.postman.com/), Bruno aims to be an offline-first API client which stores requests in a local folder. You can still collaborate using Git, but everything else happens on your machine. Bruno turns out to be a great solution when you just want to run HTTP requests. It supports a lot of features you might know from Postman or Insomnia (set environment variables, several authentication methods, and scripted tests, to name a few). Looking at the [roadmap](https://github.com/usebruno/bruno/discussions/384), the amount of these is only going to increase.

### 4) Deliver

Time to shine. You're ready to present your solution to the public. With these tools, you'll capture valuable feedback from your users based on which you'll improve solutions that work and scrap those that don't. This includes the testing itself and documenting your progress.

#### 🐰 Bencher

[Link](https://bencher.dev/) | [Github](https://github.com/bencherdev/bencher) | [License](https://github.com/bencherdev/bencher?tab=License-1-ov-file)

Before shipping anything to your testers, you want to ensure your app peaks in terms of performance. Because as the count of features increases, so does the stress on your hardware (or app service). Bencher keeps you informed about possible [software regression](https://en.wikipedia.org/wiki/Software_regression) before you deploy anything and makes a great addition to your CI/CD workflow.

#### 📊 Umami

[Link](https://umami.is/) | [Demo](https://analytics.umami.is/share/LGazGOecbDtaIwDr/umami.is) | [Github](https://github.com/umami-software/umami) | [License](https://github.com/umami-software/umami?tab=MIT-1-ov-file)

As laws get stricter, you'll need a platform that respects user privacy. [While Google promises to adhere to privacy laws](https://cloud.google.com/privacy/gdpr), you're usually better off being in charge of data you collect yourself. With Umami, you can track user engagement during launch period or your AB tests. Being open source and GDPR/CCPA compliant, it takes away a lot of burden and possibly legal problems when collecting test data from your web application.

#### 📘 Bookstack

[Link](https://www.bookstackapp.com/) | [Demo](https://demo.bookstackapp.com/) | [Github](https://github.com/BookStackApp/BookStack) | [License](https://github.com/BookStackApp/BookStack?tab=MIT-1-ov-file)

After several development cycles, knowledge begins to decay. About the solution and every other kind of data from phases 1-3. Hence you need a solid foundation to build your progress on. And Bookstack is just that, no more, no less. It allows you to separate knowledge into collections called books. These can be tagged, placed onto Shelves (like categories of books) and separated into chapters. Its support for markdown, draw.io sketches and lots of categorization capabilities makes it the perfect choice for a universal knowledge base.

Wrapup
------

Thank you so much for reading to the end. Of all the tools on this site, Penpot is my absolute favorite. Its modern UI and all the amazing tools at the cost of running a single docker command is a real catch! As a thank you, there's another tool I'd like to present. It's called [Dub](https://github.com/dubinc/dub). It's a link-shortener tool with lots of advanced features for marketing teams and a perfect addition for Umami.