Repaint
Building a beautiful website builder
Overview
I founded Repaint with Izak Fritz in May 2023. We're building a website builder with a heavy focus on design.
Visit
Skills
App Design
User Testing
Frontend Development
Graphics Rendering
Tools
Figma
React
WebGL
Team
Me (cofounder, ceo)
Izak Fritz (cofounder, cto)
Design
I'm the sole designer behind Repaint. The whole project is basically one screen.
It's just UI design, but with emphasis on a few skills:
Attention to detail
Designers use Repaint for hours at a time. Minor annoyances comes up over and over. Designing Repaint is about getting a small number of things perfect.
Information Density
My challenge is to add lots of features without cluttering the UI. I condense as much as possible into a small area. It requires iterating on layouts, inputs, and popups ad nauseam.
How does this turn into code?
The user creates a design, and we turn it into code. This means I need to plan how every setting turns into code. And I need to know how the settings will work in our editor. I've spent an incredible amount of time dissecting html & css.
Repaint V3 design system. This is just current designs. The graveyard of discarded designs is x5 larger :,)
User Testing
Over the life of Repaint, I've done over +100 calls with designers. In the early days, I did a ton of cold outreach to get meetings.
I've tried interviews, demos, user testing and other call formats. My process is casual, flexible, and fast. If we want to learn something, I go get calls and test it.
In summary, I have a ton of experience trying to get a new app off the ground.
Testing call with Jenny, a designer making a portfolio website in Repaint
Rendering
We wanted a high performance 2D canvas. To do that, I made a custom rendering engine using WebGL. Essentially, I made a system that turns our data into triangles, and then draws them at +60fps using shaders. Here are some fun moments:
Drawing basic shapes & gradients
Trying to match browser text rendering
Stress testing my text rendering
Funny bug - I forgot to clear between frames
Adding blur rendering
Frontend
I coded the first version of the frontend. The canvas (middle part) is WebGL, and everything else is Typescript + React.
This isn't my main thing. I spend way more time on design and user research. My cofounder took over coding the frontend, and since then he's rewritten most of my original code.
Check it out yourself!
Visit Repaint (It's cool)