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 ‘interactive’ (i.e. navigable) wireframes of your proposed solution for the administration application as it might appear on a laptop or desktop screen (i.e. 1024px 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. 375px wide, portrait orientation) and include two ‘interactive’ 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. 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 a 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 ZIP archive, retaining any folder structure that you may have created (e.g. that created by Pencil). Please name the ZIP file using your own OUCU (namely ‘OUCU_Q1.zip’) and record the filename for your marker in your document.
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 file ‘emaWireframeResources.zip’ 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 ‘whitespace’ 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 your respond when viewed on a mobile device screen.
1(b) Explanation In your document, for the admin team, define what wireframes are and provide a description of their role in web development. Then explain how the design demonstrated by your wireframes fulfills the requirements they have outlined.
Hint: imagine that you meet with the admin team and walk them through the key features of your solution – this is not simply an explanation of what you have done, it is an explanation of why your design is appropriate.