Assignment #2: Phase 2 - Composing and building/constructing a 16:9 aspect ratio mood board presentation deck for the landing wp Assignment #2: Phase 2 - Composing and building/constructing a 16:9 aspect

ratio mood board presentation deck for the in-class exercise landing webpage Table of Contents 1. Purpose, goals, objectives, and learning outcomes 1 2. Plagiarism 3 3. Grades and rubric 1. Phase 2-/18 3 3 4. Timelines and deadlines 3 1. Phase/Version #1 3 5. Requirements/Criteria 4 1. Phase 2 - Hi-fi landing webpage exercise that we build/construct as a class in class 4 6. Submission instructions 1. Phase/Version #1 7 7 1. Purpose, goals, objectives, and learning outcomes 1. Based on the Text styles and sizes set and outlined in our generic landing webpage, we need to upscale all of the text style sizes by -300% to accommodate the required aesthetic text styles for the typical deck presentation medium. 2. All text styles and sizes must be upscaled so that the smallest text style of 14 pixels (e.g., LP - Small Text - v1) will be a minimum of 40 pixels in size when displayed or on-screen within a presentation deck. Please note that These text styles and sizes are specific to the presentation deck medium only and should be separate from the landing webpage text styles. 3. For example, if we were to repurpose all text styles utilized in the landing webpage for a presentation deck, the smallest text style of 14 pixels in size must be upscaled by -300% ( ( 40/14--3)*100) so that the smallest text size is at the minimum of 40 pixels in size when displayed in a presentation deck. 4. To start this process, we would upscale all text styles showcased in the landing webpage by -300%. The following formula helps us manually upscale sizes and values. As an example, the smallest 14-pixel font size and style displayed in the landing webpage must be upscaled for the purpose of a presentation deck: a. (14*300)/100=42 pixels 5. Please note that we will adjust and add new text styles for the presentation deck medium. 6. Additional resources: a. Understanding the 10/20/30 Rule of PowerPoint Presentations b. The text on each slide should be no lower than 30 points or 40 pixels in size. c. PowerPoint Guidelines for Presenters: i. Minimum font size of 24 points or 32 pixels d. Simple rules for better PowerPoint presentations e. 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. 7. In Figma and for phase 2: a. Using 1920x1080 px frames, text and colour styles, text boxes, shapes, component instances, images from online, etc., re b. For guidance and reference, see the 02 - Screen captures of mood board slides or pages for inspiration folder, it contains screenshots/captures of the slides/pages we recreated/built-in class. c. If you decide to import the .png screenshot/capture images into your working Figma document, ensure that you recreate/build all of your mood board slides/pages in Figma using text and colour styles, text boxes, shapes, component instances, images from online, etc. d. Please DO NOT leave the .png screenshot/capture images in your mood board deck frames. Move the .png screenshot/capture images under the mood board deck frames./n2. Plagiarism 8. See the Plagiarism and the use of online assets document for more context. 3. Grades and rubric 1. Phase 2-/18 9. Components (13) 10. Text styles (13) 11. Colour styles (13) 12. Grid style (12) 13. Overall content and composition quality (/3) 4. Timelines and deadlines 1. Phase/Version #1 14. Deadline: Sunday, January 12 at 11:59 PM. 5. Requirements/Criteria 1. Phase 2 - Hi-fi landing webpage exercise that we build/construct as a class in class 15. As a class and in you working grocery app's Figma document: a. Using the Section Tool (Shift + S), draw two sections and label/name them: i. Plase 1- Components, sets, instances, and variants ii. Plase 1 - In-class hi-fi landing webpage exercise b. In the draw a frame 1366 x 768 px laptop/desktop device viewport (another great source). d. c. Download and implement raster and vector assets here, and the Google Play and Apple App Store badges. e. In the Plase 1 - In class hi-fi landing webpage exercise section > Use the rectangle tool (R), apply a dark/light overlay with an -60% opacity fill over the full-width hero image banner. f. Active a mobile phone mockup plugin that/n2. Phase 2 - Your redesigned version of the landing webpage exercise 16. On your own and with your design choices.. More info/details TBD. 17. Feel free to utilize raster and vector images online. 18. The following consists of online logo, icon, and/or symbol libraries that you can explore, examine, and utilize in Figma: a. Icon.ify.design (An easy icon/symbol search) b. Google's Material Symbols (Github account > Code > Download ZIP > Unzip) c. Apple's SF Symbols (second source/reference) (Github account > Code > Download ZIP > Unzip) d. Fontawesome.com (Github account > Code > Download ZIP > Unzip > webfonts folder) e. Tabler (Github account > Code > Download ZIP > Unzip) f. Herolcons (Github account > Code > Download ZIP > Unzip > src folder) g. Unicons (Github account > Code > Download ZIP > Unzip) h. Flaticon (Github account > Code > Download ZIP > Unzip>src folder> uicons > webfonts) i. Ionicons (Github account > Code > Download ZIP > Unzip > src folder) j. Iconify k. See this article for more icon sets. If you can successfully export/pull vector shapes (always test before committing) from icons/symbols in Figma, Figma icon plugins can be a great long-term solution. 19. Issues when attempting to utilize fonts that contain vector logos, icons, and symbols via glyphs in Ai: a. Some fonts (e.g., Font Awesome) that contain logos, icons, and/or symbols via glyphs can be very tricky to implement and work with in Ai. b. If you are experiencing issues when attempting to apply these type of fonts in Ai, the following workaround can assist you: i. Install the font that contains logos, icons, and/or symbols locally via computers that run on macOS/Windows OS. ii. In Ai: 1. Selection tool (V) > Ensure that you have nothing selected. There are many ways to deselect, but I would just left mouse button click outside all elements and ensure that the Window > Layers panel/window does not show (square icon to the right of all layers) that anything is selected. 2. Window > Type > Character > Set the font family to the family that contains logos, icons, and/or symbols (e.g., Font Awesome 5 Brands Regular): Swatchi © Character Paragra OpenTy Transp: Image Q~ Font Awesome 5 Brands Regular Regular a. 3. Type tool (T) > Draw a text box>Delete most of the placeholder lorem ipsum text/copy: 4. Type > Glyphs > Double left mouse click on the glyphs that you want to apply to the text box: Lorem DONDOO -GEEEVOO a. 5. Delete the unwanted text/copy: a. 63 1D D+ AI DE 120 *54 Ch