How do I start planning my website?

Good question! Here is the beginning of a webdesign process. It’s helpful to write down the different ideas and content on indexcards. This makes it much easier to build a good and clear structure and hierarchy. Good planning helps everyone see the big picture, and saves time (and revisions) in the design stage.

The colors show the various areas of the website content and structure.

sitemap
The website’s Sitemap is similar to a blueprint for a house. It is a map of the website structure. Here, before doing any programming, I have laid out index cards on my work desk. This is a powerful hands-on way of planning what goes where on a website. The colors show how I have organized the content on this homepage: The main sections are: Header (orange), Nav bar (red), content (light purple), footer (bright green). A shopping cart is a on separate page, (green) and will have a link from the nav bar (green). A call to action will also be on the page (orange). Once everything is assigned a place, I will begin designing the look and feel of the website.
Only the highlighted area is to become the webpage. This site also needs a Shopping cart, and every website needs a nice 404 page, so users never get to a dead end without being helped back to where they want to be.