Sitemaps and Mockups are important for obvious reasons. The former helps maintain form and structure while the latter helps you to define the system you're building in the most natural way.

But sometimes, you're tempted to jump straight into Photoshop for creating wireframes and to engage in early HTML code. Bad idea. Using simple tools like a sitemap and a set of low fidelity mockups may be the difference between you getting paid by your customer or not.

Need more reasons why you should plan properly?

1) It looks better fleshed out

When presenting a website design, it is always best to pay heed to logic and structure. One of the main anchor points would be the Sitemap. It's at this point that you showcase what the site structure will look like. The client will ‘get it’, and will see the bigger picture helping you identify the optimal site structure.

2) Annotate the pages for their functionality

Mark pages with special functionality, whereas pages that need to be loaded securely can be marked differently to the pages that features video content and so on. Use it as a visual guide to understand collaboratively with the client the real effort involved.

3) Communicate and Collaborate

Getting everyone on board early is key. You could use our own share features, to get and give feedback right throughout the duration of the project. So iterating over sitemaps & software mockups before actually photoshopping and writing code would be (and is) the best case scenario.

4) Mockups help you get on the same page

At the end of the day, clients need to visualize the structure together with the design layout. Put out initial mockups of the pages or even let the client do it themselves. Again, good collaboration comes to play, you can review and comment on the design and quickly agree on the way to move forward.

Image from - http://www.2kgroup.com/EN/services/web-development.html