Website Wireframing Advice Thread

For true wireframing, I've used Balsamiq which was pretty straightforward and easy to use. I've also used Figma recently to mock up a few ideas — it's definitely way more feature-rich and goes well beyond wireframing.

I'm far from an expert though and am looking forward to other replies.

Wireframing first is great because it gets you thinking about the structure of the page without much sugar / design over the top of it.

If a wireframe looks and feels good, when it then translates to design stage, you can almost be sure it will work well.

We recommend Figma just because it's completely free, it's great for collaboration (real-time collab) and once you've done a wireframe, you can easily create a copy of the document which implements real design elements.

Also, a tip our mentors generally give is to build a low-fidelity version of a design before going all-out on it. Building low fidelity (i.e. all grayscale, stock images) really limits your options and forces you to think about hierarchy properly. This is almost halfway between wireframe and full implementation. Give it a go and you'll see what we mean!

Hope this helps!

I always use Adobe XD for this purpose. I feel like you can prototype anything in the UI, like navigation, animations. Although it's not that fast to transform your ideas if you don't know Adobe tools/keybindings. If I want to go fast I'll go with the classic paper and pen duo.

I personally use Adobe XD since, well, it's free and fairly simple to use. But basically any mockup tool will do the trick (even Google Draw is fine!).

Beyond tools, let me discuss my (amateur) process in the world of web dev:

• I always find it helpful to consider a layout as mobile-friendly first, since it forces me to figure out how to let a user accomplish something with the fewest buttons / clutter possible. For wire framing it, I often just approach it as a mockup without any of the extra design flourishes added (i.e. ignoring animations, not worrying about colors too much, etc.).
• I also try to keep the scope of my wireframes limited so I can sort of design as I go. It's often unclear at the beginning what / where everything should be for a project, especially if I'm working with a client. For example, I might start with just the login / registration flow, then just a view for, say, user account info. After that, I'll get to mocking up and dev-ing, and as more features need to be added, I'll adapt the wireframe to fit those extra options and determine whether I might need a new screen or overlay.

Bottom line is everyone has a different approach, so just go with whatever lets you see the bigger picture without getting overwhelmed! Also try to "accordion" your layouts regularly, meaning grab the corner of your browser window (or wherever your software is running) and scale it around to make sure everything stays adaptive.

Anything that can draw a box and lines and text is fine. I like Keynote for that. Of course it depends on team, workflow etc. but if it‘s for the initial figuring out of stuff anything works. Recently I love iPad + Pencil + Notes for this. Just an endless freehand-note.

I usually buy or just use a free theme. But when I really need to do it I use draw.io, it's free and it does the job

Hello! Creating warframes is relevant during the development process. This allows you to show the customer how close to his idea it is, and whether it is worth making changes.
When creating Wireframe, you must first make a sketch that will show the approximate location of the blocks on the page. Then Wireframe will describe them more precisely - here you specify which elements and where they will be located. The final version of what the page will look like, the application tab - mocap.
And when you want to show how the user will see the application interface, a prototype will be used.
But it can be said that the wireframe is an essential part of creating an application.

More information about the Wireframe and its functions and features can be found in the article.

I use Google Draw, sometimes gomockingbird.com.

One of my friends uses justinmind.com, while another uses iPhone note app!