loading...

Website Wireframing Advice Thread

awwsmm profile image Andrew (he/him) ・1 min read

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?

Discussion

pic
Editor guide
Collapse
matthew_collison profile image
Matthew Collison

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!

Collapse
mykalmachon profile image
Mykal Machon

I second figma! Use it all the time ☺️

Collapse
peter profile image
Peter Kim Frank

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.

Collapse
greenroommate profile image
Haris Secic

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

Collapse
vitorverasm profile image
Vitor Veras

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.

Collapse
niorad profile image
Antonio Radovcic

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.

Collapse
bholmesdev profile image
Ben Holmes

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.

Collapse
denisnutiu profile image
Denis Nuțiu

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

Collapse
awwsmm profile image
Andrew (he/him) Author

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

Collapse
amit_savani profile image
Amit Patel

I use Google Draw, sometimes gomockingbird.com.

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