Free Diagraming Tools

Before  worring about the style or appearance of your  new website (color, fonts, images), the first step is to design a wire frame so that you can go over all of the sites functionality of the sites pages.
A wire frame should include primary navigation, a space for a logo, heading, space for the main body of text, and user log in .

Other elements to consider would be ; a place for users to post comments, a search box, a product or feature that is up for a limited time,  a link to blog posts,  location of news, an events calender, or other content appropriate to your websites goals.

Here are some usual links to help you build a wire frame , for free and other tools;
https://gomockingbird.com/mockingbird/

http://webdesignledger.com/tools/10-free-ui-wireframe-kits

http://stackoverflow.com/questions/1827485/free-and-usable-uml-diagrams-editor

http://webdesignledger.com/tools/10-excellent-tools-for-creating-web-design-wireframes