I'm currently working on a side-project that, for a change, I'd like to fully structure first before diving into the code.<p>I know there are specific UI/UX tools, like Framer, Adobe XD and Sketch. There are also specific methodologies for software architecture, like creating ERDs and flowcharts. Same for the server infrastructure and persistent datastorage.<p>What I'm looking for is one tool that combines all the various domains of a piece of software with varying levels of complexity. So something that gives a full overview that also allows you to 'zoom in' on specific layers for more detail.<p>Is there any tool out there that provides this level of varied complexity and global overview? Of do you use something that's not made for it but works well?
I'm still looking for a software design tool that doesn't suck.<p>In the meantime, I simply use pen, paper and ring-binder. I tend to write with the granularity of a single page. That is, decompose functionality, etc, so that resulting sketches, etc fit on a single page. I don't fear mostly blank pages. Easier to find stuff as I flip through the pages.<p>Once I get down to the granularity of a class, function, module, I implement it and mark the page as <i>done</i> with a date. Any key design decisions, discoveries, etc are transcribed into the comments of that source file.<p>I also use GraphViz to generate some dependency diagrams. SVG files are easy to view with any HTML browser.
I always heavily document before coding. My preferred tool is just Obsidian. I just make a folder and take large numbers of markdown notes for everything.<p>Heirarchal notes let you organize however you want, you can make your own little wiki to handle the zooming.<p>I also am very much considering getting some kind of digital drawing device, like a Boogie Board with the smart pen, or else waiting till there's an affordable stylus phone that I like(The Moto Stylus is the only recent cheap one and that lacks wireless charging).<p>But for now I primarily rely on text for everything, until I'm ready to move into CAD or code or whatever I'm doing.
Paper is great. So is actually coding some part of the front or back end to test it and get it working, even without a great UI or API.<p>Iterative designs, rather than full top-down where everything is figured out in advance, have proven to be more flexible and faster to implement. This is part of the "worse is better" philosophy of software design.
I can't recall a single tool that covers all of the design process, there are just too many industries involved.<p>As for UI/UX, give Figma a try. It's powerful, supports all kinds of design work (workshops, sketching, prototypes, presentations) and has a generous free plan.
State machines, represented as state tables, often arranged in a heirarchy.<p>Not appropriate for everything, but for most things I do, can't be beat.<p>I also wrote my own tool to design/spec/test such designs.