This user interfaces prototype (or horizontal prototype) has the following goals:
This artefact includes three elements:
The interface's descriptions are presented on the end of the document.
Figure 1: Interface's guidelines.
In this figure some characteristics common to all the pages are highlighted:
A sitemap is a visual representation of the relationship between the different pages of a website that shows how all the information fits together 1).
The sitemap gives the project team an idea of how the website is going to be build by helping to clarify the information hierarchy. [Brown10] .
Figure 2: Sitemap.
Storyboards are presented to represent some of the main interactions with the system using a sequence of interfaces and explaining how navigation is done between them.
Figure 3: Wireflow centered on the user's options.
Figure 4: Wireflow centered on the reader's options.
Figure 5: Wireflow for the sign-in and sign-up interaction.
The following interfaces describe the main content of the web pages and their relative priority and help the project team previewing the features and behaviour of the final product's different screens, both their desktop (left) and mobile (right) versions.
Figure 6: Home page.
Figure 7: About page.
Figure 8: Services page.
Figure 9: FAQ page.
Figure 10: Contact page.
Figure 11: Log in page.
Figure 12: Sign up page.
Figure 13: Error page.
Figure 14: Items page.
Figure 15: Item page.
Figure 16: Search page.
Figure 17: Add item page.
Figure 18: Profile page.