CE206 – Assignment 2Electronic Submission URL:https://www.essex.ac.uk/e-learning/tools/faserPlease also see your student handbook for rules regarding the late submission of assignmentsOn PlagiarismThe work you submit must be your own. Any material you use, whether it is from textbooks, classmates, the web or any other source must be acknowledged in your work. Also, you are assumed to have read the booklet at http://www.essex.ac.uk/plagiarism/docs/Plagiarism_and_how_to_avoid_it.pdfOBJECTIVE: To develop a live website following HCI criteria and optimised for viewing on mobile phone.SUBMISSION, ASSESSMENT AND RULESThis assignment counts towards 30% of the overall mark for CE206.The assignment is to be done individually. This is not a group assignment.Be sure to put your name and registration number as a comment at the top of all code and other files.The assignment must be submitted in a single zipped archive containing the following subfolders:CE206/assignment2/ All html files (.html) CE206/assignment2/images All website image files (.gif .jpg) CE206/assignment2/css All css files (.css)CE206/assignment2/docs All supporting documents (.doc .pdf .png .jpg .ppt .txt)Storyboards and navigation diagrams to be in .ppt or .pdf or .jpg format.Note: please use the filenames as indicated in the task descriptions below otherwise your work may not be marked.Note: you are free to use any software you like for this assignment, we cannot provide support for packages other than Notepad++, Firefox and Web Development tools (Firefox add-on) on a Windows PC.DESIGN BRIEFA live website optimised for mobile phones.Colin Ritman likes what you’ve done so far but he’s got a number of changes. Firstly, he’s decided he wants a full website, not just a single page. And not only that, he wants it optimised for mobile phone users and accessible to users with visual impairments.[Review the design brief from Assignment 1 if you have not done so already.]The objective of Assignment 2 is to create a live website for Colin which can be visualized and navigated using both a desktop / laptop computer and an iPhone or similar device with a small screen. You can do this using liquid design, adaptive design, or responsive design.Your website should focus on Colin’s skills and experiences to enhance his chances of getting a job in a computer games company, either directly from an employer, through an agency or through freelance work. For example, you could use the website to show off his familiarity with the history of the subject and any interesting or novel technologies he works with (imagine what the technology Colin is working with in 2019 and what is of value to employers). You may use all or parts of the design you developed for Assignment 1 or develop something new.Minimum RequirementsThe site you will design and implement will need to have at least the following:In Task 1, you will reconsider the user experience design and TEST a wireframe prototype of the entire website you plan to build.In Task 2, you will DESIGN a website for Colin. You will design the look and feel for at least 2 pages (the homepage and at least 1 inner page) visible at least with two types of screen: a 960 pixel width screen, and a phone screen with a maximum width of 480 pixels.In Task 3, you should IMPLEMENT in HTML and CSS the liquid, adaptive or responsive design that you proposed in Task 2. Any images must credit the source. Navigation links should follow the site architecture and site text should be real. Your pages must have:multicolour images on each pageat least 5 styled navigation linksat least 3 external linkssuitable coding for accessibilityIn Task 4, you will DEPLOY your website to the University server.In Task 5, you will automatically EVALUATE your website and list changes that will improve your website in order of priority. You will also self-evaluate what you have learnt in CE206.TASK 1: User requirement reviewReview the design brief from Assignment 1 and the requested changes made by Colin above. Based on this you need to specify how the information across the website will be structured. It is a good idea at this stage to produce a site map. In CE206_assignment_2.doc, define the sections of content, what they are used for and what name you will give them. Create several paragraphs of real text for each section of content. Lorum ipsum text MUST NOT be used as this will be a real website.In addition you need to prioritise certain types of users who will access the website and why. You should create new user personas, user stories and user journeys to define their user experience. You should also create a prototype website. This is covered in Lab 5. You may simply copy in digital copies of the paper- based work you have done or you can write it up as a report.TASK 2: A liquid, adaptive or responsive website designYour first task is to consider what the design theme will be and which areas of content you will focus on for the website. Search around the web for websites that will offer you inspiration or have a look at http://designmodo.com/responsive-design-examples/. You may also use some of the design ideas you had from Assignment 1 but you need to show you have researched some different ideas that focus on mobile presentation. List these websites and your thoughts in CE206_assignment_2.doc under Task 2.Based on this research you need to create a liquid, adaptive or responsive design for your website, including choice of fonts, layout, colours, imagery, etc, using a storyboard. This is a visual representation of the design choices you have made, either as a page mockup or written details of the design and layout. You must show a design for at least 2 pages. Your website must display well both on a standard 960 pixels desktop screen and on the original iPhone display of 480 pixels width at 163ppi without horizontally scrolling (i.e., the maximum width is 480 pixels). You can create these on paper and add images to the CE206_assignment_2.doc or this can be done in PowerPoint and saved as images and imported to CE206_assignment_2.doc. In this document you must also indicate why you have designed the page the way you have.TASK 3: CSS-based websiteFor this task, you will implement your design for the homepage (save it as index.html in the “root” level folder, i.e., /CE206/assignment2/) and the inner pages using an external CSS file (called assigment2.css and saved in the CSS subfolder). Refer to Lab 5 HTML examples to get started. You may reuse elements of code from Assignment 1 or develop new code.The crucial point is ensuring that your site fits both a desktop screen and a mobile phone screen. For this stage, use the Firefox Web Developer extension to resize your screen to 480 pixel width. Your design must not scroll horizontally and should be optimised for minimum data transfer.The pages must take the following aspects into account from an HCI point of view:the correct type of graphics files for the images you want to showsuitable font types and sizesappropriate use of colour (including suitable colour depth and issues related to colour- blindness) and contrastfunctional navigation based on a linked unordered listexternal links to other web resourcesavoid text in graphicsadd suitable text tags to hyperlinks and embedded images (for users with restricted vision)include copyright and updating informationYou may use suitable imagery from the web but you MUST credit the source (do this by adding an HTML/CSS comment next to where you add the image). Navigation links should follow the site architecture and any site text must be “real” as the site will be live.In addition, your site should take into account the recommendations for mobile usability discussed in the lectures:avoid functionalities like moving animationslimit content on each pageplan your navigation carefullyYou are encouraged to explore using interactivity by incorporating JavaScript libraries that will enhance the mobile user experience; however, you must document what you are using and why (in the HTML code comments) and you must
ensure that the website it accessible to all ie there must be a non-interactive equivalent in place should the user not have JavaScript enabled.Your HTML and CSS code MUST contain comments explaining what the major parts of your code do. The code should also be properly indented and not contain any “junk code” (this is commonly produced by Visual Studio for example). Your design should work for Firefox 64.0.2 however do check it in other browsers such as Internet Explorer or Safari.TASK 4: Deploy your website to the University server.See the instructions for copying files to the University server in the lab instructions. You must only deploy to the University server. You may convert your website to a PHP/MySQL implementation if you wish.TASK 5: Evaluate your website and propose changes.Now the website is live you should be able to test its functionality using a number of automatic tools. Choose a suitable metric to evaluate the website for at least two of the following evaluation areas (see Lab 6 for examples of how these can be tested):StrategyUsabilityStyleContentSearch engine optimisationNB: Some of these tools mentioned in the lectures/labs require the site to be on a publically-accessible web domain which this Assignment does not require you to do. Therefore focus on using tests that only require a file upload.In a table, list your evaluation metric, the result your website achieved, and what you need to do to improve your evaluation score. Also, indicate on the table the order in which you would fix these issues and write a short paragraph explaining why you prioritised the list in the way you did.NB: Consider Krug’s advice when it comes to improving the usability of websites:Do the least you can do…Tweak don’t redesignTake something away rather than create something newYou are not required to change your website, only to indicate what changes you would make. Finally, perform the same online talent tree you completed in Lab 1: http://www.dungeonsanddevelopers.com/You do not need to add your name into the talent tree. You will not be assessed on what you submit, only that you do submit something. In the final section of Task 5 paste a screenshot of your current talent tree next to your original one.MARKING BREAKDOWN (out of 100%)Task 1. User requirement review (10%)Suitability of design for good HCINavigationTask 2. Website design (10%)Suitability of design for good HCINavigationLayoutColour and contrastAesthetics and imageryQuality and detail of storyboardTask 3. CSS-based website pages (40%)Functionality:Site working and code qualityHCI suitability of the desktop version:NavigationUse of fonts types, colour and contrastHCI suitability of the mobile version:NavigationUse of fonts types, colour and contrastDesign aesthetic:LayoutImagery, etcTask 4. Deploy website (20%)Website deployed to University serverServer-side technology usedTask 5. Website evaluation and self-evaluation (20%)Evaluation areas testedPrioritisation of usability modificationsSelf-evaluation submitted
