Programmers: How do you design and prototype?

Hi Whoof, I'm a programmer with a design background. Creating interfaces in the browser is OK as long as you have it clear what you are aiming for. Being uncertain and already working in the browser is IMO a waste of time. If in doubt, write down all the functionality and information bits that need to be available on the screen and scribble the interface on a piece of paper first, trying out different layouts and making sure that all you need is there. Afterwards, in the browser, utility CSS frameworks (like Tailwind CSS) can speed up prototyping significantly. If you don't want to design your own components, I’d recommend using one of the popular frameworks (Bootstrap, Foundation, Bulma, UI Kit). Without a design background, you won't come up with anything more consistent and streamlined than the components those frameworks offer. By tweaking the colors, their border radius default and choosing a nice ui font they don't need to look like all the other sites built with them. Nothing wrong with using them – especially for Indi Hackers.

I use https://excalidraw.com/ for layout

First, if you're just aiming this at web developers, please rename your question.

I mix stories and visual design. I always start my visual design with at least a throwaway scribble on paper. I've been doing paper prototypes since the early 90's.

I'm a big fan of Bill Buxton's book "Sketching User Experiences" you can read about on his site https://www.billbuxton.com/

I don't do formal use cases (didn't, even when they were popular in OO circles) but write stories about how a product will be used. Imagine you're scripting a 30 second ad that shows the product - what's the story of the ad used to sell the idea.

Those stories are a source of ideas as to what needs to be presented in what order and grouping on the UI and what features are needed. A vital aspect is that the stories are how I can audit the UI - go back and compare what's been prototyped or even fully implemented and see if it matches the story.

As a mobile developer, much of the time I'm using Sketch to do static screen layout then finishing rich prototyping and full code generation using Supernova Studio. In particular, this has allowed me to include animation (tastefully) in my interfaces.

I'm a full stack engineer and aspiring designer. I used to just tweak CSS until it felt right and you know what, I found it's the most unproductive thing you can do. You spend ages getting margins/padding/font perfect on something only to realise it doesn't sit right with the rest of the page.

I now use Sketch to do mock-ups up front and reckon it saves me hours of time. It all depends on how nice you want your page/app to look though. I'm a little OCD with look and feel

Hi Whoof, I'm using Invision Studio. It's easy enough to use. The main things it allows me to build prototypes with animation pretty close to the real apps. I can show the idea to get some feedback on early stages and optimize workflows.

I like to use pencil and paper to sketch out wireframes. There's something about sketching it out away from the computer that I really like as I'm not constrained by code or thinking too hard about the engineering implications. This helps me make purely design based decisions. I try to iterate on the basic layout and then add more detail however hand-wavy it may be. Once I've tried out a few ideas, I'll pick my favorite and start putting together the skeleton code in html/css and then tweak colors, fonts, spacing, etc as I go.