1. Purpose, goals, objectives, and learning outcomes 1. From top to bottom, as a class and an in-class exercise, recreate, build, and/or construct a hi-fi prototype in a 1366 px wide

(laptop/desktop) viewport parent/device frame for a typical landing webpage that promotes a generic grocery app. 2. Understand: a. What above and below the fold and device viewports (another great source) refer to or are defined as, and their importance in modern day webpages/apps. b. The key ingredients, anatomy, and content hierarchy of a simple landing webpage. c. The advantages and disadvantages (aka pros and cons) between icons, symbols, and/or logos that feature vector path fills and/or strokes. 2. Plagiarism 1. Refer to the Plagiarism and the use of online assets document for more information on this topic. 3. Grading 2. Out of 15 points 4. Rubric 3. Breakdown: a. IA anatomy (13) b. Components (/3) c. Text styles (13) d. Colour styles (13) e. Grid style (/1) f. Overall content and composition quality (13) 4. Side Note: Refer to the Rubric scales and breakdown document for more information on this topic. 5. Timeline and deadline 5. Timeline: Eight business days and two weekends. 6. Deadline: Sunday, January 7 at 11:59 PM./n6. In-class attendance and documented lecture walkthroughs 1. Attending real-time Zoom classes, relying on class recordings, and reaching out to your Instructor offline 7. Refer to the Attending real-time and live Zoom classes, relying on class recordings, support documentation. and reaching out to your Instructor offline via email document for more information on this topic. 2. Documented lecture walkthroughs related to this specific assignment/project 8. Assignment #2: Phase/Version 1 - Lecture notes and step-by-step walkthroughs and/or tutorials 9. See class recordings for more reference, details, context, and/or guidance. 7. Assignment/project requirements/criteria 10. From top to bottom, as a class and an in-class exercise, recreate, build, and/or construct a hi-fi prototype in a 1366 px wide (laptop/desktop) viewport parent/device frame for a typical landing webpage that promotes a generic grocery app. 11. In Figma: a. Download and implement raster and vector assets here, and the Google Play and Apple App Store badges. b. Import provided assets and feel free to use other online image assets for this phase/version of the landing webpage. c. Set up all components, sets, instances, variants, and styles (text, colour, and grid) that are reviewed in class. d. If required, utilize ChatGPT to generate draft copy/text/verbiage that you will eventually refine and polish for the app's promotional landing webpage. 12. The final deliverable/product for this landing web page must contain similar or the same "Non-UI" and "UI" assets, components, sets, instances, variants, styles, elements, interactions, etc. 8. Submission instructions 1. Ensure that your working Figma document is in an active Team project so that you can share it appropriately with others/n1. Ensure that your working Figma document is in an active Team project so that you can share it appropriately with others 1. With your free Figma account, you can only share three active documents with others. If you need to free up space for your working Figma document that you need to share with others, move any unwanted documents to your Draft section/area: a. D Daniel Harris Q Search files, teams, or people Recents 2. Before submitting your working Figma document URL with edit privileges, ensure that your Figma document is in a Team Figma project and NOT in the Draft section/area. If your working Figma document is in your Draft section/area, move the document to a Team project: Your teams Drafts Favorite files Team project - Teams Property Pair Web App Free Portfolio Team project + Create new team C Type, click, FigJam-generate al 49 Drafts + Drafts Deleted Je Property Pair Project Edited 1 month ago Open Open in new tab Add to your favorites Copy link Share Duplicate Move file Property Pair Project Search for a team of project Drafts Property Pair Web App Team project Portfolio Team project + New team/n2. Setting your working Figma document with the proper editing privileges and copying the URL for sharing and final submission 3. If your working Figma working document is in a Team project and is sharable, in your assignment's Figma working document > Share (top righthand corner) > Anyone with the link > can edit > Copy link (bottom left- hand corner of the modal box): a. Email, connes Copyin et embed 3. Submitting the URL for your assignment's working Figma document in D2L and outlining the specific section that houses your two sitemaps 4. In the D2L submission for this assignment, paste the Figma URL from the previous section, and after the sharable URL, provide more context and detail as to the name and/or label of the Figma section that houses the landing page UI and dissection for this assignment. a. The following is an example of a Figma section that houses the landing page UI and dissection for this assignment: Plase 1-in class hi-fi landing webpage exercise Hero Headline - Brand Logo -CTA: Actionable Text 1366 px wide device viewport Everyday low price and the freshest produce CODE JAN24 CTA app Badges 15 Mockup of app Ul