Design Tools other than Figma

[mrparker]

Hello everyone,

I am new to these forums and I was just wondering, are there any other design tools other than Figma that are good? To be honest, Figma is really complex and seems like to me it has a steep learning curve, and I simply don't want to deal with that.

I was thinking of simply using a photo editor like maybe Gimp or even Affinity to do mockups, but those seem a little overkill.

I was wondering if anyone had any ideas other than what I currently do, and that is writing code, refreshing the page and going back and forth between an editor and a browser. It's really tedious and tiring for me and I'd much rather just make a design, iterate through it visually and then write the code to implement it.

Thanks.

[Melooon]

Ive spoken about it before, but i tend to draft things out on paper first. Firstly with sketches, then I make paper cutouts so I can move things around see how they feel in different formats.

I actually think drafting out sites physically is much better than doing things all digitally because you get a more natural touch to it. However really you could do this step in any vector or layer based image/graphics editor.

After that I block things out in code with basic colour blocks for the key divs and areas on the page. Then I move on to content and design and I mostly use the process you describe of making edits and reloading. I enjoy that process a lot, but it is helpful to go into it with a clear plan, rather than starting blind at that code stage.

I dont do everything like this of course, simple pages are just direct coded, but anything larger gets a page plan of some sort. 

[Future Roxy]

In my previous study, we used a program that kinda does the same thing melon is talking about but online; wireframe.cc! It's very low fidelity; I'm not sure if you can even do colours on it, but it's very useful for figuring what kind of layout you want. There's a paid version which is supposed to save your designs to the cloud, but I never quite got it to work for me. So I actually prefer the free version  
The free version saves a unique url for your wireframe, you just gotta not lose that url. I think I used to have a .txt file with all my wireframe.cc links..
As for the learning curve, I really couldn't say; I am already somewhat used to this program so I'm unsure how intuitive it actually is to use..

But then again, doing the same thing with bits of paper does seem really fun! And you can actually draw things on the paper, so that might actually be a more pwerful tool than my suggestion 

[littlelum]

In college, I took a UI design class. Our professor had us start out with paper, cutting out buttons with scissors and handwriting text, stuff like that. We then tested out "prototype" with random students in a coffee shop, having them "click" on the paper, and rearranging things to respond to their "input". It was a fun class. (At one point my group was considering making one prototype on the GameBoy, but practical considerations stopped us from that.)

As for actual software, though, I don't have any recommendations for that, unfortunately.

[Dan Q]

Like @Melooon, I often start with a piece of paper. Just a sketch at this point: what will be laid out where, real "wireframey" stuff.

But beyond that... I normally use my web browser! I start by taking the "blocks" I've drawn on my piece of paper and translating them into a basic tree of (semantic) HTML elements. And then I open that up in my browser and use the debug tools to move things around, size them, and colour them until they're starting to look vaguely right. So I guess... CSS is my design tool of choice!

The big benefit is that I can just copy-paste the output from my "Inspector > Changes" panel right into my CSS file, refresh the page, and then carry on. (I'm aware that many browsers will allow you to automatically sync your changes into a CSS file and save it for you, but I've been burned by these tools messing-up too many times to trust them, now!)

This approach works for big things, like a whole page, but also for smaller things like a component on a blog post. Just make sure the copy you're working on isn't "live" to the world and you can modify it in your browser, which helps you make absolutely sure it'll look like you intend.

I don't know if that approach works for anybody else, but it works for me. I can probably do a screen-recording/video demo of how I work, if it's useful.