Learning To Wire Frame

In every web class I have taken we have had to wireframe our websites first. When I first started wireframing sites I spent more time looking for templates to help me then I actually did framing my websites here is a link with some useful ways to wireframe.

A Collection of Free Wireframe Templates

Navigational Chart and Wireframes

My client is a music school which offers a full range of music programs for children to learn music in classes, private lessons or group lessons. They would like to have a website that will showcase their instructors, classes, events and reputation in the community to potential students and their parents. They also want to provide a place on their website to provide information to current students only.
 Some inspiration found on my pinterest boards
A really good pdf about learning how to make wireframes
I have a Pinterest board dedicated to wireframes.
Navigational Chart
Your chart should clearly illustrate the relationship between your site pages and the navigational flow of the site.

Wireframes
Wireframes should visually represent the placement of your header, navigation (global, local, courtesy, etc.), content (main, secondary, tertiary, etc.), footer and any other sections of the page.


For wireframing and navigational charts I have created a set of brushes for Photoshop that I use to make them.
I know alot of students that are not comfortable with Photoshop yet and either use power point or online tools to help them make wireframes. How to use wireframes.