Prototype/Mock-up

A prototype/mockup gives a very accurate GRAPHICAL representation of each of the proposed pages in your site. This allows your client to see what they can expect from your site.

At this point it is likely you will NOT have collected the media elements so you will provide representative elements.

• For text "Lorem Ipsum" is often used, and this is because "a reader will be distracted by the readable content of a page when looking at its layout" (Lorem Ipsum, n.d.).

• For images try and find a image that is relevant to your context.

Note: The index page should follow the previous wireframe. In the example following the video was moved to "Napier.html".

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 prototypes, 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.

Reference

Lorem Ipsum (n.d.) https://www.lipsum.com/