I have been at this point too—sooner or later, you ask yourself how best to plan projects. Especially when you want to implement everything yourself and do not want to spend several hundred euros on Fiverr, you start looking for the most affordable solution possible. You can try relatively complex programs, but you can also simply draw your plan. That works even if you are not particularly talented at drawing. All you need is a little creativity—the ability to imagine what a website might look like later. At the moment, I use Excalidraw and a text editor for this.
What is Excalidraw?
From my perspective, Excalidraw is a simple drawing tool. You can use it to draw and label your app's UI and add color. Because it runs in the browser, it does not matter whether you use it on an iPad or a PC. You can also draw diagrams or other graphical elements and later use them in your projects. Excalidraw is available in both free and paid versions.
Why Excalidraw?
In theory, you can even use Excalidraw on an older iPad with a stylus, although your finger works too. On a PC, it is just as easy to operate with a mouse. Rectangles and other shapes, for example, can be rendered in an appealing hand-drawn style. You can also use arrows to visualize processes or add notes. Once your drawing is finished, you can download it or export it as a .png file. In my opinion, Excalidraw stands out primarily because of its simplicity. It also feels as though you can use it on almost any device. I have only tested it objectively on an iPad and a PC, however. I have not tried it on a phone yet, but I can imagine that it would be less convenient to use there.
Your drawing is stored in LocalStorage in your Browser. (and additionally in the workspace with the paid version). This means your drawings are not automatically available in Excalidraw on every device unless you export them or synchronize them with an account. As far as I know, account synchronization is only available with a paid subscription. In the end, you have a rough—or detailed—draft based on your own ideas. You can add notes directly along the edges, giving you plenty of flexibility. You can also download your drawings easily or create a share link and send it to others.
How far can you take Excalidraw?
Keep in mind that the larger your project becomes, the more complex your planning and drawings will become as well. You should therefore split them into several sections. If one area becomes too text-heavy, it can make sense to shorten the content and keep more detailed explanations in separate text files or documents, including requirement specifications and technical specifications where appropriate. Drawing primarily helps you visualize your project, understand relationships more clearly, and add ideas more easily. In a text editor, numerous edge cases can quickly lead to countless “what if” scenarios. In Excalidraw, you can organize these clearly with arrows, connections, and notes. This makes the plan much easier to understand and supports you throughout development. In other words, you draw in Excalidraw what you would otherwise draw on a whiteboard.
Of course, you can also work with colors. For simplicity and clarity, however, I personally stick to black and white. I only use different shades to distinguish notes visually from the actual drawing. Make sure to download and back up your drawings regularly. This prevents deleted browser data or a device change from costing you valuable work.
What does the paid version of Excalidraw offer?
I do not currently use the paid version myself because I do not need it at the moment. In my opinion, it is mainly of interest to teams—when several people work on a drawing together. The subscription lets you create multiple separate projects. The paid version also includes features such as voice hangouts with screen sharing, presentations, and enhanced AI. There are other features too, but I do not want to cover every one of them. If you are interested, you can review them yourself and decide which option makes the most sense for you. The free version is entirely sufficient for me because I mostly work alone, occasionally share my drawings, and plan projects.
Drawbacks of Excalidraw
One drawback is that the free version does not provide a workspace where all drawings are saved automatically. It also only allows one project to be open at a time. This means that all drawings initially live in a single project. If you want several separate projects, you first have to download the existing drawings and then create a new project or discard the current one. This is not a major issue for my use cases, however, and I have not had any other negative experiences so far.
Why use an editor or notepad as well?
Some people prefer to write everything down first. Others begin by noting that they want to use a database, for example, and then draw its structure. Still others take a completely different approach. You can also record your thoughts directly as text in Excalidraw—in the end, it depends on which workflow suits you best.
Conclusion
Of course, neither option is an enterprise solution. But you also have to ask whether you need one at all, whether you want to spend the money, or whether you would rather keep things simple. In Excalidraw, right in the browser, I can visualize my ideas with very little effort and create a specific design straight away. That will probably be enough for many projects. I then see how the whole thing looks when implemented in reality, with plenty of coding in between. I usually add smaller details in Excalidraw too, so that I have as complete a picture as possible. Incidentally, the image at the beginning shows the original plan for this website's blog. You will notice that some details were implemented almost identically, while others were added or changed during development. Yes, the blog is simple and was ultimately straightforward to implement. I do not need more than that at the moment. Entrepreneurs in particular should focus on what they actually need right now and whether it makes sense to invest time in additional features or in other areas instead.
For larger projects, the drawings naturally become more extensive and the overall planning more complex, both visually and in text form. It is therefore important to divide the project into smaller areas and plan each one individually. Many small, manageable building blocks ultimately form the complete picture and help you stay on top of everything. At the same time, this reduces the risk of feeling overwhelmed by the project's size because every individual process can be defined clearly. Yes, this kind of planning takes more time initially. In return, you end up with a concrete design that you essentially only need to implement. You also avoid having to learn more complex programs and can focus directly on development.
