Website Wireframing Advice Thread

Andrew on April 10, 2019

How do you wireframe / sketch out a website before you start building it? Do you prefer doing it by hand or do you have some recommended software?

markdown guide
 

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.

 

My girl also used Balsamiq. Will check out Figma thanks :)

 

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.

 

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 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.

 

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

 

Draw.io is great! I think this will be my go-to from now on. Minimalistic, 100% free, and really intuitive. I like it!

 

I use Google Draw, sometimes gomockingbird.com.

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

code of conduct - report abuse