Like an architect draws a sketch of a building, web and app developers draw wireframes to illustrate the layout, look, and user experience of web pages or phone apps.  Wireframes help developers ensure all of the page’s critical elements have a place before beginning the development process.  They also show the client a prototype of the site before it is built, so they can have a say or provide feedback on certain design elements from the start. We have gathered up the best of the best tools for wireframing to make your next wireframe experience the best yet.

For the traditionalist- 

There will always be those traditional types that turn to pencil and paper before technology, even those that make their career building computer programs or web pages. So for those that are drawing their wireframes by hand, we have found the notebook for you. The Responsive Design Sketchbook by AppSketchbook is grid paper made specifically for responsive wireframe design. It has blueprint grid paper with breakpoints for single-page sketches, but also has broken the devices out into separate blueprints so you can show the layout of a single page on multiple devices all on one page. Got all that? See the picture below for reference. Not worried about responsive design? They have a great web browser blueprint UX sketchbook as well as app sketchbooks for iphone and ipad.

rds

For the occasional designer- 

If you are looking for a web-based wireframe tool that is free and don’t need all the bells and whistles, look no further. Moqups is the Canva of wireframing and there is a free option that allows for “1 active project with at most 300 stencils each and 5 MB of storage.” For the occasional web designer, this is a great option that allows you to create high quality digital wireframes at no cost.

moqups

 

For the spendthrift-

If budget is not an issue, $24 a month gets you Balamiq Mockups, a drag and drop wireframing tool that can be shared with unlimited team members for real time collaboration and 10 active projects per month. This wireframing tool gets rave reviews from UX designers for its simplicity, functionality, and speed. It combines the look and feel of traditional whiteboarding with various widgets for seamless communication of design elements.

balsamiq