Wireframe

A wireframe is used to show the LAYOUT of the page and how different regions are laid out in relation to each other. To create a resonsive layout a "box" model is used, where each box will float depending on the device (and it's width).

A wireframe should be completed for all pages in the proposed website.

Note: This wireframe gives an example of including media types ( images, audio and video).

Creation tools

As mentioned for creating a site map, probably the simplest and most available tools are presentation software like Microsoft's PowerPoint, Google Slides or Apple's Keynote. Some students also use the drawing tools available in a Word-processing app (like MS-Word) or a drawing program like Photoshop. Note that photoshop is a complex tool and unless you have previous experience is not recommended.

There are many online tools that will help you create wireframes, however do be careful as some will allow you to create the wireframes but not save them. While you can always screen shot the results you will have to start again if you need to make any changes.