How a developer tackles the design phase: my workflow with Figma and Procreate

Here is the second post in this series about creating a side project.

If you haven't read the first one, my goal is to make a mini-series retracing all the steps for creating a relatively basic application: www.coderwatch.io

The main pitch is: learn programming languages and frameworks while playing. You can take quizzes, earn points, and gradually climb the leaderboard against other players while improving your knowledge.

This is an opportunity to learn more about different web professions: designer, PM, backend dev, frontend dev, etc. Because yes, the challenge is to touch on all the professions.

In this post specifically, we're going to talk about UI, UX, and illustration, which is very far from my comfort zone and probably also far from the audience that usually reads this blog. But that's precisely why it might open up new horizons for you.

First step: the wireframe

EDIT 2025: I wouldn't approach the problem the same way now. I'm leaving what I wrote about my approach back then, but you can jump to the last chapter to see a different approach.

Before coding, the ideal is to test several designs. It's probably something I did less a few years ago, as I had a tendency to start developing with a very simple frontend. But I admit that having a good wireframe, starting to represent a user journey, and illustrating transitions is a first step that has many advantages:

It's much faster to iterate on a design than on code
Corollary: we can quickly create user journeys
We can very easily show a "finished" product and collect critical feedback
It's super satisfying to have a finished model at the end of a first iteration rather than ugly pages with ¼ of the features we have in mind (the wireframe can be much more complete)

Example here with two different versions of the Home page.

Finding a theme on Themeforest

My challenge is to do everything from floor to ceiling. But that doesn't prevent me from looking for inspiration elsewhere.

For that, I used Themeforest, which allows you to acquire graphic themes in different formats.

We often know this site for WordPress themes, but you can also find Figma designs there. So I looked for themes to use as a moodboard and selected two for a total cost of $49.

My favorite tool: Figma

I just mentioned Figma without explaining what it is. For me, it's one of the best current tools for creating web designs. It's quite easy to use, even for a beginner like me.

I'm not a Web Designer or Product Designer—I probably used it at less than 10-20% of its capacity—but it's enough for my goals.

Here's a small sample of features I managed to use:

Create reusable styles (especially for fonts and colors)
Component creation (buttons, badges, list items)
Vector drawing and export to SVG

In short, I was able to start from themes purchased on Themeforest, create reference components, introduce a color palette I chose, add illustrations, and ultimately customize everything for my own use.

In the end, it represents about twenty pages, of which here's a small overview:

Illustrations: Procreate

For a game, I wanted to introduce graphic elements and get closer to a retro gaming spirit. I found that flat design was well suited, and I wanted to create my own illustrations.

What I used here is clearly not the right tool. In theory, to do vector graphics, I could have stayed in Figma or used tools created for that (Adobe Illustrator, Inkscape, etc.).

However, I wasn't very comfortable with vector drawing, while I felt rather confident with Procreate, which I already use to draw.

So I used Procreate for all the site's illustrations, the logo, and the badges found in Coderwatch.

On the other hand, these are images, not SVGs, and we completely lose the expected advantage of vector drawing, which should support multiple image sizes without degrading quality. The size of the images above is much too large (around 400kb per image).

Oh yes, and in the future I'd love to use Lottie to add animations at key moments in the game. But I set myself a maximum time on this and preferred to move on.

How to approach design in 2025

This chapter wasn't part of the original article, but I think it's important to update this blog post because things have changed a lot since then.

I still believe it's important to have a design system—a set of components, color rules, typography, etc.

But today, you can quite easily find many starters for that. I currently use Nuxt UI (which also provides a complete Figma design kit).

On top of that, for someone like me who's not particularly strong in design (and that's still the case in 2025), it's fairly easy to use AI to create mockups by specifying the technologies, inspirations, keywords, constraints (like mobile), etc.

Be careful though—it's not magic. For a standard SaaS, it works. But here for Coderwatch, there's still a lot of illustration work that remains very important. However, the work could have cost less with a freelance designer who would have only handled the illustration part and not the entire design system.

Conclusion

In the end, this modeling phase lasted about a week, including theme research, color palette selection, component creation in Figma, assembly, UX research, and illustrations.

A professional would probably have been faster. Or maybe they would have taken the same time, but the result would have been much better:

The Figma would be cleaner, using grid systems, better component and list management, transitions
The UI would certainly be prettier, more coherent, better contrasted
The images would be more optimized

But for a first version at $49, I'll settle for it.

In any case, it's a pretty fun step to do and very satisfying because it allows you to quickly visualize the direction you want to go. It's also a very good medium for getting initial feedback.

And of course, if you want to invest a bit more money, you can easily contact a freelancer in Web Design, illustration, or UI/UX. I might be wrong, but I'd say that for my case—with about twenty pages, a design system to create, and some illustrations—it would have cost between €3,000 and €10,000 approximately?

(I didn't check this number with a freelancer, so if I'm way off, tell me in the comments and I'll fix it)

In the next post, we'll talk about the HTML/CSS/JS integration phase.

See you soon.