DEV Community


Discussion on: Website Wireframing Advice Thread

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!

mykalcodes profile image
Mykal Machon

I second figma! Use it all the time ☺️