$1($a$)$ Navigable wireframes

Online Solutions have produced wireframes for the club website. The admin team feel that these wireframes help to clarify the overall structure and navigation of the club website, and they would like to see something similar for the admin application. They are keen to know if the requirements they have identified can be rationalised into a coherent set of web pages that illustrate how the various features of the application will be presented to an admin user.

Your task is to create navigable wireframes of your proposed solution for the administration application as it might appear on a laptop or desktop screen $($i$.$e$.1024$px wide, landscape orientation$).$ The wireframes should demonstrate how the different parts of the application are organised, what information is displayed on each page, how navigation works between the pages, and so on$.$ Pages returned by a server in response to specific user input are not required. You should also think carefully how your design will respond when viewed on a mobile device screen $($i$.$e$.375$px wide, portrait orientation$)$ and include two wireframes $($two pages$)$ to illustrate how the solution might appear on a mobile device screen.

Your wireframes must be submitted as a set of one or more HTML files and may also include CSS and image files. You can use Pencil, a text editor, or any other tool with which you are familiar to create these files. You are not required to develop any JavaScript for your wireframe. Submitting your wireframes in any other format will result in a penalty being applied.

Should you decide to use Pencil, you must use the $$Export Document$$ option to export your wireframe as a $$Single web page$$ using the $$Default HTML Template$.$ This creates an HTML file and a folder of images which ensures that the client can review your wireframe without the need to install the Pencil application. You should not make any further changes to these files and make sure to include them all in your submission.

Collect the files that make up your wireframes into a single folder, retaining any folder structure that you may have created $($e$.$g$.$ that was created by Pencil$).$ Please name the folder using your own OUCU $($namely $$OUCU$\_$Q$1),$ record the filename of your wireframe home page for your marker in your EMA document so that your marker can open and test it$,$ and record the folder name as well.

It is essential to keep in mind that a wireframe illustrates successful capture of an application$$s requirements by means of content and information architecture. It is not about implementation or branding, so should not include coloured text or images. The EMA Wireframe Resources page contains simple placeholder images $($bars$,$ squares and rectangles$)$ and a file of $$Latin$$ text that you can use to illustrate how content will be displayed on a page. You can set the image width and height attributes to the size required.

You may find the following pointers useful.

Consider the application from an admin user$$s perspective to see how information might be organised or functionality grouped. There may not be an exact match between pages and features.

Consider how users will navigate around the admin application.

Think about the screen layout and the use of $$white space$$ to separate content.

Read the requirements carefully to ensure the admin team has not omitted important functionality $($e$.$g$.$ it should be possible to edit or update an item after it has been added$).$

Think how your design will respond when viewed on a mobile device screen.