I don't build wireframes or design mockups because they are illusions of progress. The amount of time you pay for them rarely is worth the amount of progress you've actually made on the feature. Once you have a set of design plans done, it seems like the hard work is over and coding ought to be trivial.
We know it's not, but we keep thinking it should be (and hence, feel quite bad when we see the first of many forks in the road).
In traditional architecture, those mockups are valuable because they help model concerns you better get right before hammers hit the nails—like the laws of physics (and the laws of zoning). You need to know where the load-bearing walls are before you build the thing. You need to know the placement of fixtures to know where the electrical and plumbing goes.
These constraints don't exist in software. Wireframes and mockups in software are mostly about look and feel.
But feel is best felt when you're experiencing the real thing. We look at a design mockup as an art piece. We look at a software screen as a place to do work. But it is hard for even the best-intentioned folks to look at a design mockup as a place to do work. So the things we enjoy about a design often don't translate when they go on a screen and we're ready to use them.
So I find it best to start the design in the code. The material that makes up the final output. No mockups. Not Photoshop. Not Sketch. Not Figma. Not the notes that represent the sound. The sound itself. HTML, CSS, and Javascript, the instruments.
Build a few steps, then experience what's there, then add, tweak, remove. A progressive push toward the final thing right from the start. It is easy to move these pieces of code around, to adjust things, and to refactor that code as we go.
Most believe that coding is the thing you do after you've designed something, not during. That designing in code has an unbearable limitation to it like performing surgery with wool mittens. I find the unbearable bit to be the translation between the design tool and the development environment. The management of two media instead of one. The context shifts between here and there.
If you've only ever programmed to a spec, you might find this style of coding reckless. But if you start building software in this way, where the code is the only medium, you'll find the wool mittens have worn down to feel more like surgical gloves. Design translates directly into HTML and CSS without the need for the design file in between.
At the start of design, I have an idea of what I want the thing to look like. Not much of one but enough of one—the broad brushstrokes. Enough to type out a structure of <div>s and <span>s to capture the essence of what I see in my head—each block representing some piece of the still-hazy UI.
I then fill the empty spaces they create with data. Realistic data not the Lorem Ipsum kind. An enjoyment of writing is a good resource here—making up a fake task about a plumbing project gone wrong can liven up the initial design attempts of a task detail page.
I write copy—labels, headings, instructional text—on the screen rather than in a copy doc. Words feel different on screen than they do on a document. I can also see where lines break. The look-and-feel of the words is just as important as the prose itself. I edit copy as I design. Mostly, editing is about reducing words. More on that later.
I don't bother with more semantic markup like <article>, <section>, <main>, or <aside>. This makes more sense for a marketing site or a blog where SEO matters. Without that need, I prefer the meaninglessness and imprecision of the name div.
Since code is where I design, I will likely move pieces around the screen and divs let me do so without worrying about bastardizing their semantic intentions. HTML tags are one of the few places in code where I prefer generic names.
Design feels most natural to me when it is done one move after the next. Really the entire act of building feels most natural to me this way—a move followed by another move followed by another. Each move decisive yet impermanent. A step closer. More done, less to guess about.
Mind, screen, and hands hold onto each other with no script to follow. Instead, I am foraging for a direction that feels good. In the beginning it is about that—going toward a promising place somewhere further down the road than where I am right now. A vector in any direction toward good.
As I lay down the structure, I am feeling out what pieces naturally group together. How elements interact with each other. There is no requirement of going top-down or bottom-up. I may dive deeply into a detail because I can smell the fertile ground. Wherever the interesting nugget lies is where I forage.
At this point, I spend most of my time in CSS, working first on positioning, then on padding, spacing, colors, and the finder details.
Sometimes I am undoing a style the moment I've put it down; It doesn't feel right and I know it. Other times I may add something back to a design that originally hit the cutting room floor because that thing makes so much sense now. Gone again later? Perhaps.
Design for me is a hypnotic meandering flow.
The tangibility of the real thing makes every next move an easy one. Only so many directions it could go from here. But a feeling tugs on my chest when I sense a way that breaks the mold of what's there, something I might not have seen by just dreaming it up someplace away from the real thing.
Eventually one move takes me toward a direction that changes the entire complexion of the feature. Someplace exciting and different. Still doing what we want it to do and improving what we want it to improve but in a way I didn't see before. The magical turning point I mentioned earlier. There is no methodology for this liberty of movement. It's the creative process.
If work indeed expands to fill the time allotted for its completion then excitement has an uncanny way of slowing down that time (or, if you'd like, speeding up the work). It's very hard to visualize excitement in a Gantt chart, which is probably fine since a project managed by one probably has little excitement to offer.
At some point I've landed on the asymptote—each new move struggles to add anything (and usually takes something away from the good that was there). I don't always know when I've reached The Good Place, but landing on the asymptote is a big clue.
In the very early parts of product design—when I still have yet to define the feel of the product—I know I'm at the asymptote when I catch myself fumbling around too much with fonts, shades of gray, and iconography. The cheap tricks of the trade.