COMP 2772 / COMP 8772 Assignment 1 Due Date: 5pm Friday 20th September (Week 8) Weighting (COMP2772): 20% Weighting (COMP8772): 15% Late penalty: 5% per day late, or part thereof Overview A key aspect of web design is inevitably user experience. Regardless of the backend systems used, be they SPA, dynamically generated or serving static pages, a website’s primary goal is to communicate information to the end user. At the same time, it is important that the key aspects of the company’s product philosophy be front and centre for their web presence. For this assignment you will examine different websites and identify and discuss how their core design facilitates and augments the core intended usability of their web space. This will include a discussion of: • Styles used • Layout design • Versatility • Preferred platform Discussion of these features should utilise source code snippets, examples of display elements and comparison to support your points. Chiefly, your work should examine the elements of each site and argue their choices in direct comparison to the other sites. You are not expected to know exactly how these sites are producing their environment, and discussion should focus on the front end elements employed and how content is displayed. Assignment Specification Web sites are designed for a purpose, but that purpose varies depending on the company’s target audience and on the services they provide. A site whose primary operation is e-commerce will present elements differently and use a different stylistic approach to a company that provides blogging capability. For this assignment you will choose 3 different web sites from the provided list and for each topic discuss different aspects of their design and layout as it pertains to web based systems development. For comparisons choose from the following group. • Reddit (www.reddit.com) • PayPal (www.paypal.com) • You Tube (www.youtube.com) • DuckDuckGo (www.duckduckgo.com) • World of Warcraft (www.worldofwarcraft.com) Each of these websites presents a distinctly different interaction experience looking to engage visitors in a different manner. They also seek to engage different intended audiences with differing services; social discussion, financial management, video streaming service, search engine and gaming. You may choose different web sites for each section. For example, you may choose to use Reddit, You Tube and DuckDuckGo for a comparison of Style, and World of Warcraft, DuckDuckGo, and You Tube for layout comparisons. Your primary analysis should focus on the main landing page for these sites and the experience they seek to generate. For the authentic experience please ensure that you have disabled ad blockers on these sites before reviewing, Ad revenue plays an important role in design consideration and monetisation of some of these sites. Style Style elements are how the websites stylistically display information including their use of graphics, animation, font choices, colour and multimedia. Discussion should include what styles are employed by the websites and how these style elements are supportive of the feel and presentation of the websites. Additionally, consider how multimedia elements employed in the website layout are used to engage the user, how visual flair (or lack thereof) of the site is utilised and how elements are presented to the user in order to engage their attention. You should include specific technical considerations that the website would face including load times, visual clutter where appropriate. Be aware that style involves the graphical colours and designs employed by the site, not where they are placed. Layout design Discussion of layout should focus on the physical layout of the site; how containers and sections are presented to the user both as static and dynamic content. It should include how the intended target audience factored into the layout choices made. What are the key elements in the layout of the website and how are these related to the sites intended function? Responsiveness Responsive websites react well to changes in display, reforming to fit the new dimensions, however this can also lead to distinct changes in how the style, layout and site information is presented. How do the compared websites react to these changes and how does change impact their core functionality? Preferred Platform While during this course development is occurring primarily in a desktop environment, we need to be aware of alternate spaces where content can be viewed. Chief among these is in a mobile environment. With very different viewing dimensions to a traditional browser it is important to consider how the compared websites respond when viewed in a mobile environment. How does the change in device change the viewed website? Do these changes drastically alter the elements discussed above? Deliverable Each section should discuss how each of the websites approaches the topic, and the key elements they present to reach their users. You should ensure your discussion provides some direct comparisons between each of the three sources, and should therefore focus on common shared elements. For example: • Do they require sign in? • Do they have menu navigation? • Do they use multimedia elements? When discussing each point, your arguments should be supported by images and source code snippets that justify your position. Please be aware that in an academic context “argue” does not mean posit which of the comparisons is the best. It means to compare and discuss like features and why those choices were made given the context of the site. Each section should be between half and one page in length excluding code, images and references. The total assignment should not exceed 5 pages of content. Be aware that this is an upper limit, if the content of your position can be justified in less space that is fine. You document should meet the standard for tertiary work including correct numbering, formatting and structure. Text should be in 11point Times New Roman, justified. Headings should be numbered. Figures and examples should be within the body of the text, numbered and referenced. References should appear at the end of the document and use the Harvard author date format. When referencing images and code where the author is not apparent use the publishing company as the author. All submissions should be in PDF format, as a single, non-compressed file and have been submitted through the Turnitin system. Due date: The assignment is due on the 20th of September (Week 8) Marking Rubric Topic 5 10 15 20 Style Layout Responsiveness Platform Document 5 10 15 20 Structure/Formatting Rubric Marking Topic 5 – Provides a basic overview of the topic, and how 3 sites approach it. Provides limited examples to support their argument. 10 – Provides 3 examples for the topic. Provides a comparison of basic functionality for 3 sites with at least 1 direct comparison, including direct referenced comparisons. 15 – Gives comparisons for all sites showing distinct differences. Clearly identifies and explains relevant differences with clear referenced examples of images and/or code. 20 – Clearly identifies and links the different aspects of each site with referenced images and discussion of code examples. Compares all 3 sites and clearly identifies how each approaches the target design aspect. Differences and similarities are clearly identified and articulated. Formatting 5 – Document meets basic formatting standards. Font and structure are consistent. 10 – Document meets basic formatting standards. Structure is consistent. Headings are clearly defined and numbered 15 – Document is formatted correctly, text is justified. Headings are clearly stated and numbered. Document uses correct grammar and spelling. References are correctly formatted and used. 20 – Document is formatted correctly, text is justified. Headings are clearly stated and numbered. Document uses correct grammar and spelling. References are correctly formatted and used. References appear correctly formatted at the end
of the document.
