Wireframes are a wonderful way to focus on clear layouts and communication, before adding any embellishments. Eliminating colors and complex design elements allows you to focus on what is really important, and speed up development time.
Read more about Wireframes in this quick “getting started” article by Medium.com.
Some Good Resources
• Adobe Illustrator is a great tool, as it includes easy tool and symbols library containing common web elements.
• In depth tutorial on how to create Illustrator Wireframes
• Free Illustrator (and omnigraffe) icons from Webalys
• Free wireframing elements from jankoatwarpspeed.com
• Moqups, a free web app that allows you to create wireframes and save them as pdf
• A good primer on creating wireframes
No matter what tool you use, remember to focus on layout and hierarchy, and to leave plenty of negative space.