Instead of mocking pixels, I tend to mock the data model first. UI decisions become clearer after that.

Oooooooo that’s interesting! Do you have an idea of all the features first and then you do data model?

Let‘s say you start designing for a new /users/{user} route. You know you‘ll need the User model. What data do you need from the User record? Name, handle, followers, following, avatar … Great, that‘s the data you‘re going to design with/for.

It works both ways, too: When building out the UI you ‚need‘ something that‘s not in the data mock? Just add it. But then you already know what model and records you‘re referencing.

For me, I start with a core idea/feature and build for that. Eg an app that compiles an image, a video and a sound file into a single asset.. and then along the way I’ll be like “I want filters and fx options” and then I’ll build that.. and just keep adding until it feels right

I don’t code but I always start here anyways. I use something I learned from the book “thinking in systems” called stocks and flows. It helps me a ton to define exactly what needs to display and how each component/data point interacts with each other.

Interesting. Are you considering user interface components as stocks and interactions with them as flows?

Exactly. Will share an example here later if you are interested

Usually jump into code if it’s a clear enough idea in my head

That’s a balance that I could probs get better at ... would save me from smashing keys for hours until something good comes out.

I find a lot of visual finessing (padding, sizing) is easier in code than building all the auto layout stuff in Figma too

Oh totally! And I don’t bother mocking up interactions either .. way easier to explore in code.. and I’m probs more creative with it too

I used to just jump into the code, but I usually create a rough mockup so I see the vision more clearly. Then I clean it up during coding.

But now I usually*

Yeah having a clear vision def helps speed up iteration 👌

Definitely, when I just jumped in without a vision I would encounter even more bugs than I usually would. Plus extra frustation with the result not being as good as I wanted it to be.

Tend to do a few high-fi mocks in figma, then into code, then sometimes back into figma !

Yeah I jump into figma when the thing I’m building starts to look real shitty.. sometimes I should do it a little earlier 😅

There all good materials, you gotta do whatever gets your creative intent out the best.

I used to jump right into code, especially if I had the feeling that the project was simple enough, or already defined in my mind. With time I realized that I work in different “modes”. Now depending on the project, I spend time out of code and focus on explorative design mode

Makes sense! I guess I tend to start creeping in features over time as I’m building .. maybe just a few small things here and there as I’m using the things I’m building. I guess is why I start with code first.. I get more inspired when I have something functional

Yeah, makes sense, that’s also true. I think that’s more an iterative and “continuous improvement” phase. Or at least, it is for me :)

Often I’ll get excited and start coding and then get annoyed that I’m not making it look nice enough so I’ll jump into figma and make a pretty version to keep me going

Me too!

You can iterate significantly faster on paper with simple wireframes.

I design first to get the basics: typography, what stays where, colour and styling. Once these basics are sorted (with as little time as possible, and not geeking much about pixels), every other design that follows is done with code. The browser is my favourite design tool.

It depends what your making but starting with data is almost always the way to go. Then you get a compact piece of code to visually iterate.