DEV Community


Discussion on: Website Wireframing Advice Thread

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.