My general web design methodology has been to develop my ideas with a bit of scribbling on paper, then to build a functional (but probably fairly ugly version) with clean HTML and then to add the styling later to make it pretty as well. I’ve been reconsidering that recently for some of the work projects I’ve been doing. There are several large sites, each with a strong visual identity and I’m working remotely from my colleagues rather than having them in the same building.
The solution I’ve been trying is what I’ve been calling wire-framing although what I’m building is more like facades or “studio flats”. With web developer tools I can manipulate a loaded web page, replacing whole blocks at a time. If I work out the area I need to change, I can pull copies of that code into one or more text files and copy and paste it back in to create the illusion of what I’m after. It helps me develop the ideas within the existing design concept of the site and I can then produce a series of screenshots to share with colleagues.
In turn, that becomes material for further discussions. My colleagues can see what I have in mind and might suggest changes. Sometimes I even find things myself (“aha! I need a button to add a new entry to that table”). Those changes can be quickly implemented to produce another set of mock-ups but, at no point, is there any risk of me breaking the actual website.
I’ve got a couple of such projects that are now almost ready to turn into actual code. It’s possible I might be able to feed the images directly to Cursor, the AI assistant I am using. Even if it can’t grok those, I’ll certainly have a head start on writing detailed and clear prompts so that the system can suggest the necessary updates and, after review, be set to implement them.
So, for some cases, pictures first or perhaps even “fake it until you make it”!

