</m>still figuring it out.
< back

Sketching before Figma

Today wasn't a coding day. The next thing on my list was the dashboard, but I wasn't ready to build it yet. So I did something different first. I learned some UI/UX principles, and I tried sketching.

Not Figma, at least not to start. Paper and pencil. Quick 8's. Eight fast sketches of the same screen, no overthinking each one. Normally I just open Figma and dabble until it feels right. This time I wanted to slow down before that.

My first sketch was a sidebar, a header bar, "Posts", and a new post button top right. My second was just a sidebar. Third was just a header. Then it clicked. I already have this layout. It's my site. Header at the top, "Posts" as a page title, new post button to the right, list of posts below.

I did a fourth sketch, close to what I already had. Then a fifth, which was really just the fourth again with a different header bar style. That's when I noticed something about Quick 8's. It's not about filling all eight. If you get to five and you're forcing it, that's a signal. Either you've already nailed it, or the idea just isn't there. For me, it was the first one.

I picked my two strongest sketches and drew them out properly to compare. My instinct held. Sketch four was the one. Closest to my current site.

From there I moved into Figma and mocked it up properly, working through the smaller decisions along the way.

The "New Post" button. Plain text felt too flat. It's the primary action on the page, so it needed to look like one. A bordered button made more sense.

That got me thinking about the rest of the site too. The light/dark toggle is just text right now. I mocked it up as icons instead, moon for dark, sun for light. Doesn't change how it works, just adds a bit of life to it.

Last thing was the post list itself. Title on the left, edit and delete on the right. I had these as text first, but same problem, too plain. Trash can for delete, pen for edit felt more universal.

The pen icon has a downside. It could read as annotation or comment instead of edit. But it's my own site, so I'm not too worried about it. Pen it is.

Good session. No code written, but I think the sketching saved me time I'd have otherwise spent dabbling in Figma without knowing what I wanted first.

Posted: 21/08/2026