Designing a Responsive Web App (Project 1)

Assessment Summary Title: Project Proposal: Designing a Responsive Web App (Project 1) Graded out of: 50 Weight: 30% Group:☐ Individual:☒ Due date: Week 5 8:00 pm on Friday Submission: Online:☒ Hardcopy:☐ Instructions: • Students submit using the submission tool located under the week 5 section of Moodle. • NOTE: students will submit the (design of the project)project proposal in Project 1 assessment and will implement the proposed project in Project 2 assessment. Students must NOT change their project theme in project 2 after the submission of Project 1 assessment, thus it is mandatory that you read and understand both project 1 and project 2 requirements before you start working on your project 1. Relevant Content Weeks & ULOs ☒Week 1 ☒Week 2 ☒Week 3 ☒Week 4 ☒Week 5 ☐Week 6 ☐Week 7 ☐Week 8 ☐Week 9 ☐Week 10 ☐Week 11 ☐Week 12 ☒ULO1 ☐ULO2 ☐ULO3 Apply knowledge of responsive web analysis and design skills to create responsive applications. Apply knowledge of app development frameworks such as Vue and application software to create a responsive web app solution. Develop a portfolio that demonstrates evidence of emerging skills in web apps technologies for professional practice. Summary: In this assessment (Project 1), you will create: • A proposal for a responsive web project using HTML • A proof of concept for a responsive web project using HTML and CSS. In project 2, you will build your final project based on the proposal you are creating in this assessment (Project 1). To get a clear picture of Project 1 and Project 2 you should read both assessments’ instructions now (available on Moodle). The project you propose should demonstrate your understanding of the coding concepts and skills developed throughout this trimester in a responsive context. The proposed project may involve implementing algorithms and coding to create a realistic system. You are free to design and think of imaginative behaviours and actions for the responsiveness in your plan that satisfies the requirements below in a creative manner. The project 2 should demonstrate the use of multiple components, composition, reusability, transitions, rendering, scalling up and animations in a larger system of both autonomous and interactive web-based application. The theme of the project is up to the student’s interest. For example, you can create an educational app/game, health-related app/game, sports app/game, entertainment app/game etc. Once you decide your project theme, you must get the approval from your lecturer. It is important to discuss your project theme with your lecturer to check the feasibility of implementing your proposed project using Vue.js framework within the available time frame. Required files: Submit a zip file named as ‘SIT120xxxxxxA1-Project1.zip’ (Replace xxxxxx with your student ID). IT should contain the following folders as shown in the image below. 1. A folder for the project proposal which includes HTML file (In addition, you may require images and fonts). 2. A folder for the proof of concept which includes HTML and CSS files (In addition, you may require images and fonts). Please read the full assignment details as below. Detailed Summary: 1. Project Proposal You will create a proposal web document (in HTML file) of no more than 2000 words to describe and explain the following information clearly and concisely: • Project summary of the intended product. • Project purpose, which should include: o Target audience – Identifying the intended users of your responsive web application/game and why it would appeal to them. o Creativity – Reasoning of how your project demonstrates creativity in its design and will provide something new, unexpected or entertaining for the viewer/user. • Intended behaviour, which should include: o User stories – Create at least FIVE user stories for your proposed responsive web application. o UI/UX design – Create UI/UX design which satisfies the user stories you have mentioned. Furthermore, add technical details on how these components are going to behave according to user story requirement. o Explanation of at least THREE complex components in depth – Provide information on how your web application will behave when its ready. You can explain how your app will fulfil the requirements of (any three)user stories. In addition, This may include an explanation of which of the required “Coding Concepts”(available in Project 2 requirements) will be used for each component. • Asset list – Provide a table of the components for each page/screen you will be creating in your final assessment (Project 2). You should include a description for each asset, including how they will be used in Project 2(e.g. quantity of each, static or moving, either responsive or interactive or passive). • Implementation plan summary, which should include: o Summary of how the web system will function as a cohesive whole. This should be supported by diagrams, charts, risk analysis etc that may help explain your system as easily as possible. For example, you can provide a flowchart with sufficient description. o Implementation plan – Provide information on how are you going to complete the proposed project within the allocated time. For example, you can provide a Gantt chart with sufficient information about your planning. 2. Proof-of-Concept Choose three to five components to be used in your project and demonstrate some aspects of the intended behaviour by creating a proof-of-concept of the functionality for each component using HTML and CSS. Your code must include comments which explain the code. Your HTML and CSS should be carefully designed so that you can reuse the code for other components (e.g. the use of CSS classes and ids). This will demonstrate your understanding of the transferability of coding concepts between User stories, UX/UI plans (blueprints/flowcharts), written code (HTML/CSS) and eventual Vue Blueprints integration for Project 2. Submission: You must submit the zip file to the SIT120 Project 1 submission link available on Moodle under week 5 section, and your submission must include: 1. Project Proposal document as an HTML file(CSS is optional for this part) 2. Proof of concept as an HTML file(HTML and CSS as separate file) Marking rubric: To achieve a particular grade, you must meet all criteria for that grade, as per the table below. Each higher grade requires all features of the previous grade as well. CRITERIA FAIL PASS CREDIT DISTINCTION HIGH DISTINCTION <2.5 POINTS 2.5 POINTS 3 POINTS 3.5 POINTS 4-5 POINTS PROPOSAL DOCUMENT (35 points) Project summary Either absent or missing significant required content. Summary provides general idea of the intended product. Summary provides clear idea of the intended product. Summary provides clear and concise idea of the intended product. Summary provides clear and concise idea of the intended product using evidences such as images, charts, diagrams etc. Project purpose Either absent or missing information on target audience or creativity. Provides basic identification of target audience and creativity. May be lacking some detail or a mismatch between product design and audience. Identifies target audience and creativity. May be lacking some detail but clear evidence of purpose informing design. Identifies clear and detailed target audience and creativity. Strong evidence of purpose informing design. Identifies clear and detailed target audience and thorough justification of creativity. Purpose is highly intertwined with project design. Intended behaviour – explanation May be absent or missing critical information. Component behaviour is explained for at least 3 components but may be somewhat ambiguous or have some conflicts with algorithm UI/UX/flowcharts. Component behaviour is explained clearly for at least 3 complex components. May have some minor conflicts with algorithm UI/UX/flowcharts. Component behaviour is explained clearly between 3 complex and varied components. No notable conflicts with algorithm UI/UX/flowcharts. Interesting component behaviour is thoroughly explained between 3 complex and varied components. Design is insightful with no notable conflicts with algorithm UI/UX/flowcharts. Intended behaviour – User stories and UI/UX design Either absent or missing critical information. Provided but may have some minor omissions or errors. May be some issues that would affect functionality. Provided with minimal omissions or errors. Plans would generally provide good functionality and are communicated well. Provided with minimal omissions or errors. Plans would provide effective functionality and are communicated well. Provided with no notable omissions or errors. Plans would provide effective functionality and are communicated very effectively. Asset list Either absent or missing significant required content. Provided lists of assets without details. Provided lists of assets with partial details. Provided lists of assets with sufficient asset list. Provided lists of assets with highly detailed asset list. Implementation summary Either absent or may be lacking evidence of planning for components as part of a larger system. System summary present with some planning for integrating components as part of a larger system. May appear somewhat disjointed and lacking unity. System summary present with clear planning for integrating components as part of a larger system. Demonstrates simple connections or interactions between components. System summary present with thorough planning for integrating components as part of a larger system. Demonstrates interesting and dynamic connections or interactions between components. System summary present with thorough planning for integrating components as part of a larger system. Demonstrates complex, interesting and dynamic connections or interactions between components that provide a whole greater than the sum of its parts. Communication and presentation May have numerous and significant spelling, grammatical or formatting errors. Some spelling, grammatical or formatting errors throughout. Additional proof-reading is required. Some minor spelling, grammatical or formatting errors throughout. Some additional proof-reading is required. Very few minor spelling, grammatical or formatting errors throughout. Presentation is professional and polished. No notable spelling, grammatical or formatting errors. Presentation is thoroughly professional and polished. PROOF-OF-CONCEPT (10 points) Coding concepts May be missing or with major omissions or errors. May not clearly demonstrate any of the listed components in your proposal document. Simple proof-of-concept functionality provided for at least 2 codingconcepts planned as part of the proposal document. May have minor errors or not be fully representative. Representative proof-ofconcept functionalityprovided for at least 2 coding concepts planned as part ofthe proposal document. Detailed representative proofof-concept functionality provided for at least 3 coding concepts planned as part of the proposal document. Detailed and highly representative proof-ofconcept functionality provided for at least 4 coding concepts planned as part of the proposal document. Communication & structure Commenting may be absent. Code may be very inefficient in structure or have numerous repetitious, unfinished or broken elements. Commenting is present in although may be simplistic or used inconsistently. Code is generally structured appropriately but may have some unfinished elements or messy formatting. Commenting is present throughout and provides acceptable readability of the code for someone unfamiliar with the project. Code is structured and formatted appropriately. Commenting is present and thorough through and is highly readable for a user unfamiliar with the project. Code is structured well with neat formatting and clear sectioning. Commenting is present, thorough and sophisticated throughout without overwhelming the project.The code is very easily readablefor a user unfamiliar with the project. Code is structured well with neat formatting and clearsectioning. OTHER FACTORS (5 points) Creativity & Purpose Does not demonstrate any type of creativity or any new idea in the project. May not be fit for identified target audience. Demonstrates some elements of creativity, although some may not be fully realised or fit for purpose. Demonstrates creativity in some aspects of the project and expands on the new idea. Design is appropriate for the target audience. Demonstratesthorough creativity in most aspects of the project and clearly expands upon the new idea by taking it in a more creative direction. Design is effective for the target audience. Demonstrates exceptional creativity in most aspects of the project and expertly expands upon the new idea by taking it in a highly creative direction as a new product.Design is deeply integrated with the target audience and purpose. OVERALL TOTAL (max: 50 points, converted to 30%) <25.0 points 25.0 to 29.9 points 30 to 34.9 points 35 to 39.5 points 40 to 50 points