Before you begin any project, you should always prepare a sitemap to plan out your site and keep it organized. Sitemaps are like a family trees consisting of your website pages rather than a list of smelly, distant relatives who send you odd knitted things over the holidays.
Sitemaps show how the visitor will get from one page to the next and back and establishes all of the pages you need to design, which is critical when quoting on a project!
Wireframes are the rough layout of a web page. They help us plan out what does where and is an effective way to communicate our thoughts to the client
Since they are basic line drawings, they get the client to focus on what elements are on the page rather preventing them from getting distracted over nit-picky design issues.
Presenting the Sitemap and Wireframe
Depending on the client and the project budget, you can either present elaborate sitemaps and wireframes done in Photoshop or Illustrator or just sketch one out. Here are some great hand-drawn examples.
Here is a great example of original wireframes and the finished product.