O.B. Montessori Center Junior High School ICT 8 3rd Quarter Lecture Guide PDF 2024-2025

O.B. Montessori Center JUNIOR HIGH SCHOOL DEPARTMENT A.Y. 2024–2025 3rd Quarter Lecture Guide – ICT 8 TIME DAY ACTIVITIES/TOPICS FOR THE DAY ALLOTMENT Overview and Importance...

O.B. Montessori Center JUNIOR HIGH SCHOOL DEPARTMENT A.Y. 2024–2025 3rd Quarter Lecture Guide – ICT 8 TIME DAY ACTIVITIES/TOPICS FOR THE DAY ALLOTMENT Overview and Importance 1. Setting Up a Figma Account 2. Navigating the Interface 3. Essential Tools and Features a. Toolbar and Panels b. Layers Panel c. Design Tools: Shapes, Text, and Images Objective: At the end of the lesson student will be able to: Navigate the Figma interface. Understand how to use Toolbar, Layers and Panel. Apply design tools such as Shapes, Text and Image. 15 Mins Introduction: Greet the students and check their attendance. Introduction to Figma and its importance in design Engaging practical activity: Show students a basic design and ask them to identify its different elements. 20 Mins Setting Up a Figma Account 1st Guide Students on how to set up Figma Account 20 Mins Introduction to Figma Interface Present the Figma Interface Discuss the different parts of Figma Interface 20 Mins Navigation to Figma ToolBar and Panels Present the Figma ToolBar and Panels Application of Figma ToolBar and Panels Setting examples 30 Mins Activity: About Me Creation in Figma (Hands on Activity NON GRADED) Students will create an about me output using figma Encourage them to use the design tools such as Shapes, Text and Images 15 Mins Wrap-up: Summarize the key points covered during the two sessions. Have students present their designs to the class and explain their design choices. DARB: Please prepare for SW1 Next meeting.  Page 2, ICT 8 3rd Quarter Lecture Guide SY 2024-2025 Total: 120 Mins What is Figma? Figma Design is for people to create, share, and test designs for websites, mobile apps, and other digital products and experiences. It is a popular tool for designers, product managers, writers and developers and helps anyone involved in the design process contribute, give feedback, and make better decisions, faster. Figma is a collaborative interface design tool. It allows multiple team members to work on the same design file simultaneously. Users can provide instant feedback via comments within the design file. While other design tools now offer collaboration features, Figma pioneered it. OTHER DESIGN TOOL Sketch: A popular vector graphics editor known for its user-friendly interface but has limited animation capabilities. (Mac only) Adobe XD: A powerful design tool from Adobe, offering a comprehensive set of features for UI/UX design, prototyping, and animation. Framer: A design tool with a unique focus on code. Framer allows designers to create interactive prototypes with real code. InVision Studio: A design platform that combines prototyping, design tools, and collaboration features. Setting Up a Figma Account 1. Go to Figma website: Open a web browser and visit the Figma website at https://www.figma.com/. 2. Choose your sign-up method: You have two options: ○ Continue with Google ○ Sign up with email: Email Address Password (Optional) Name 3. Agree to Terms and Conditions. 4. Verify your email (if using email signup) 5. Start using Figma Navigating Figma Interface -  Page 3, ICT 8 3rd Quarter Lecture Guide SY 2024-2025 Figma Interface: TOOL BAR The toolbar is your hub for interacting with—and adding objects—to the canvas. It houses all your tools for selecting objects, moving around the canvas, and creating frames, shapes, text, and other layers ↓. These will be the building blocks of your designs. Figma Interface: LEFT BAR The left sidebar gives you access to layers, pages, assets and is where you can take action on your files. Use the Assets panel to view local components or find components from kits or libraries (requires edit access). Access file-level actions, like moving it, publishing a library, creating a branch, or showing the version history. Use the menu to access more functions, actions, and settings. Or adjust your Preferences, like dark mode or scroll behavior. Figma Interface: RIGHT BAR The right sidebar is where you can access more information about your designs. When you don't have anything selected, you can view local resources, like color or text styles. With a layer selected, you can explore properties of your current selection. Your permissions will determine what you can see in the sidebar, and what actions you can take. The right sidebar is also where you'll find tools to share your designs and work together in real-time. For example, you can share the file, see who else is here, talk over audio, and more. -  Page 4, ICT 8 3rd Quarter Lecture Guide SY 2024-2025 Figma Interface: CANVAS The canvas is your working area where you’ll arrange layers to create your designs. You’ll find lots of room to explore and iterate on your ideas. Pan to move around Pan to move around the file and see what else in on the canvas. Mouse: [left mouse click button icon] Hold down the Space bar, then click and drag to move around the canvas. Trackpad: [two finger drag icon] With two fingers, slide in any direction to pan the canvas. Figma will use your computer’s default scroll direction settings. Zoom in and out Zoom in to take a closer look, or zoom out to see the bigger picture. View the current zoom level in the top-right corner of the screen. Mouse: Hold down ⌘ Command/Ctrl and space and scroll down to zoom in and up to zoom out. Trackpad: Pinch two fingers together to zoom out or stretch two fingers apart to zoom in. TIME DAY ALLOTMENT Basic Design Principles 1. Grids and Layouts 2. Colors and Typography 3. Creating Wireframes Objective: At the end of the lesson student will be able to: 2nd Apply grids and layout to their webpage Understand how to use Color and Typography is creating web page design Apply grids, layout, color and typography to their first webpage 15 Mins Introduction: -  Page 5, ICT 8 3rd Quarter Lecture Guide SY 2024-2025 Greet the students and check their attendance Introduction to the lesson topic and its relevance Show examples of Good and Bad Design Websites 15 Mins Introduction to Grids and Layout in Figma Discuss Grids and Layout in Figma Application of Grids and Layout Setting examples 15 Mins Introducing Color and Typography Discuss Color and Typography in Figma Application of Color and Typography Setting examples 15 Mins What is Wireframe? Discuss the meaning of Wireframe Identify the different types of Wireframe Setting examples 50 Mins Independent Practice: Seatwork 1 Task students with creating a wireframe: Low-fidelity wireframes for a web page layout incorporating grids Instruct students to choose colors and typography that align with a given design Encourage students to apply the principles learned to create a visually appealing webpage 15 Mins Wrap Up: Recap key points on grids, colors, typography, and wireframes Have students share their design projects with the class and explain their design choices DARB: Please prepare for Quiz 1 Next meeting. Total: 120 mins The layout grids, columns, rows and margins are invisible elements in the design. Using these will make your design look more balanced and have consistent negative spacing. Proper use of white space can emphasize the importance of the content. Grid System Setting up a Grid System for your web design is good practice and very helpful when you're designing for various screen sizes. It will help web developers match your design. There are some commonly used Grid Systems you can refer to on the web. -  Page 6, ICT 8 3rd Quarter Lecture Guide SY 2024-2025 Uniform Grids The uniform grid helps arrange items in an evenly-spaced set of rows and columns so that you stay consistent with your spacing and alignment across your design. Column Grids Column grids are the most used form of grid, especially for the web. These grids mostly consist of 12 columns that are evenly spaced to align elements or objects in your design with perfection. The number of the column decreases as the screen size decreases for responsiveness Baseline Grids Baseline grids or Rows help you set up proper horizontal alignment and spacing for your typography or other elements of your design to rest on. These simply are just guides that help you design with consistency. Fixed Layout This layout contains a grid system that retains its width and position regardless of the change in screen size or orientation. This keeps all the elements of your design in a defined space. Flexible Layout Fluid layouts are the exact opposite of fixed as they take advantage of the available screen space. This means the grid width increases and decreases as the screen size changes but the margin and gutter width remains unchanged. APPLICATION OF GRID: -  Page 7, ICT 8 3rd Quarter Lecture Guide SY 2024-2025 1. Navigate to Properties Panel and click on the '+' icon next to Layout Grids 2. By default, it'll apply the Uniform grid. By clicking on the Grid icon, you can select between Grid, Columns and Rows from the drop-down 3. Choose the Column and set the Count to 10 (depending upon how many columns you need) 4. Set the Type to Center, width to 70px and finally, gutter to 30px 5. By clicking on the ': :' icon, you can create a grid style to reuse it later or add it to your design system. Remember that ultimately, you can customize your own Grid System for your design and there’s no limitation to this. REFERENCE: https://designcode.io/figma-handbook-layout-grid Colors and Typography Saving colors, gradients or effects as Styles makes our design process a breeze. By using styles, you can change or edit any colors or effects easily, and by doing so it'll change that style for the whole design at the same time. Backgrounds Texts Buttons Gradients REFERENCES https://designcode.io/figma-handbook-color-styles YOUTUBE: https://www.youtube.com/watch?v=gtQ_A3imzsg Text is the most valuable part of your design. It communicates your idea more than any other element of your design. So understanding text properties can be really helpful as it lets you regulate everything from the look and position of the text to resizing behavior and OpenType features. The text content represents more than 80% of your design. It’s important to learn these text properties and what they mean. This gives a good understanding of typography. Focus on its utility and always put readability first. Typefaces A typeface is a set of characters of the same design. They include letters, numbers, punctuation marks and glyphs. There are thousands of typefaces available, it's important to not mix several typefaces. This can make your design feel fragmented and clumsy, so you have to carefully curate and limit the usage to 2-3 typefaces. Font Weight A typeface can have many different styles or weights. For example, SF Pro comes with nine different weights and in both styles - upright and italic. Font weights can create hierarchy in your typography. Use a larger weight to highlight the most important information and smaller for the less important ones. Font Size This determines the scale and size of your text. Figma represents font size in density-independent pixels. Font sizes can also create hierarchy in your typography, so it's important to pick the right sizes to focus on the right information. Make sure that your text is readable and is never below 10 pt as that would make it unreadable for many of your readers. Line-height Line height controls the gap between lines of text in a paragraph. The line-height should be between 120% to 145% of the font size, making the paragraph more readable. Aim for 45-90 Characters Per Line. When your line is too long, the reader will have a hard time focusing. Letter Spacing -  Page 8, ICT 8 3rd Quarter Lecture Guide SY 2024-2025 Letter spacing determines the space between characters. This can be helpful to set caption texts. Also, don't confuse this with Kerning which is the process to adjust the space between two specific characters. Paragraph spacing Paragraph spacing sets the distance between each paragraph. This can increase or reduce the space between each paragraph. It helps the users to focus by adding regular intervals and making the text more legible as well as readable. Resizing The resizing property measures the given space and shrinks or grows a text layer to fit its information in a given space. Auto Width Auto Height Fixed Size Alignment This determines how you distribute the text within its confined space. Horizontal alignments align your text on the x-axis while the Vertical alignments align your text on the y-axis. REFERENCES: https://designcode.io/figma-handbook-text-properties-and-styles ADDITIONAL YOUTUBE REFERENCE: https://www.youtube.com/watch?v=-7nt67h-Ojc What is Wireframe? A wireframe is a visual representation of a user interface used to plan the layout and functionality of a website or mobile application. A wireframe is a low-fidelity visual representation of a user interface. It typically consists of simple lines and shapes, and is used to show the structure and layout of a user interface, without any visual design elements or branding. Wireframes are often used early in the design process, before more detailed visual design work is done, to help establish the basic structure of the interface and to make sure that all of the necessary elements are included. Wireframes are also useful for getting feedback from stakeholders and users, as they allow people to focus on the functionality and user experience of the interface, rather than getting distracted by visual design details. Types of Wireframes: Low-fidelity wireframes - are simple and often hand-drawn, using basic shapes and lines to represent the structure of the user interface. These wireframes are quick and easy to create, and are useful for early-stage brainstorming and testing of different design concepts. -  Page 9, ICT 8 3rd Quarter Lecture Guide SY 2024-2025 High-fidelity wireframes - are more detailed and polished, and often use computer software to create a more realistic representation of the user interface. These wireframes may include actual images, text, and other visual design elements, and are useful for more advanced design and testing. Wireframe Templates - are pre-made wireframe designs that can be easily customized to fit a specific project. These templates can save time and effort, and are often available for a variety of different platforms and devices. Independent Practice: Seatwork 1: https://docs.google.com/document/d/1i8JLkWhoNAtXd2aFvRUZKalLc-Y3-rNh/edit Quiz 1: Design your Business Landing WebPage Objective: Design a wireframe using High-fidelity wireframes for your business 3rd landing web page layout that incorporates grids, color schemes, and typography choices discussed in class. 5 mins 1. Greeting / Roll Call -  Page 10, ICT 8 3rd Quarter Lecture Guide SY 2024-2025 10 Mins Review of the Previous Lesson/ Motivation 90 Mins Quiz 1: Design your Business Landing WebPage 15 Mins WRAP UP/DARB 1. Discuss to the students about their 3rd Quarter Project 2. Download the PROJECT guidelines. Total: 120 mins Quiz 1: Design your Business Landing WebPage: https://docs.google.com/document/d/1CCPTX9ZYN914ckuWOXm5Ooow4PiGXhHU/edit Project Reference: https://docs.google.com/document/d/15aQIhIhPjxgK9ZFu6zi_PC7kc_1QUDWU/edit TIME DAY ACTIVITIES/TOPICS FOR THE DAY ALLOTMENT Advanced Design Tools 1. Frames and Groups 2. Components and Instances 3. Managing Styles: Colors, Text, Effects Objective: At the end of the lesson student will be able to: Understand how to use Frames and Groups in Web Page design Apply Components and Instances to Web Page Creation Utilize styles such as Color, Text and Effects in creating Web Page Design 15 Mins Introduction: Greet the students and check their attendance Introduction to the lesson topic and its relevance Show examples of Good and Bad Design Websites 4th 15 Mins Introducing Frames and Groups Discuss Frames and Groups Application of Frames and Groups Setting examples 15 Mins Introducing Components and Instances Discuss Components and Instances Comparison with Components and Instances how to apply in Figma Setting examples 15 Mins How to manage using styles such as Color, Text and Effect in Figma Discuss different Color selection Discuss different Text selection Application of Effects in Figma 50 Mins Independent Practice: Seatwork 2 Task student to integrate the first SW1 with Frames and Group The wireframe that they will present will include Components and Instances Encourage student to utilize the color, text and effect to their web page design -  Page 11, ICT 8 3rd Quarter Lecture Guide SY 2024-2025 15 Mins Wrap Up: Recap key points on grids, colors, typography, and wireframes Have students share their design projects with the class and explain their design choices DARB: Please prepare for Quiz 2 Next meeting. Total: 120 mins Group vs Frame GROUP - use to combine elements in the frame together it cannot survive on its own it will be deleted once all the contain element are deleted FRAME - combine elements in the frame together but it can survive on its own even the elements are already deleted Youtube Turorial: https://www.youtube.com/watch?v=uvUnXa_uBNQ Constraints help with making a design responsive. This helps with ensuring that the design looks good across varying screens. In this tutorial, you'll find steps on how to set constraints for an element. Constraints Constraints are used to make the design more flexible and adaptable across various screen sizes. These have two dimensions - vertical and horizontal. Both of these in turn have different options such as - left, right, bottom, center, scale and top & bottom. Constraints can be set for any element. Components and Instances COMPONENT are UI elements that you can reuse across your designs. The MAIN COMPONENT defines the properties of the element. The INSTANCE is a copy of the component you can reuse in your designs. Reference: https://help.figma.com/hc/en-us/articles/360039150173-Create-and-insert-component-instances Reference: https://designcode.io/figma-handbook-components Youtube Tutorial: https://www.youtube.com/watch?v=k74IrUNaJVk Managing Styles: Colors, Text, Effects Saving colors, gradients or effects as Styles makes our design process a breeze. By using styles, you can change or edit any colors or effects easily, and by doing so it'll change that style for the whole design at the same time. Backgrounds Texts Buttons Gradients References: https://designcode.io/figma-handbook-color-styles Youtube Tutorial: https://www.youtube.com/watch?v=gtQ_A3imzsg Text is the most valuable part of your design. It communicates your idea more than any other element of your design. So understanding text properties can be really helpful as it lets you regulate everything from the look and position of the text to resizing behavior and OpenType features. -  Page 12, ICT 8 3rd Quarter Lecture Guide SY 2024-2025 The text content represents more than 80% of your design. It’s important to learn these text properties and what they mean. This gives a good understanding of typography. Focus on its utility and always put readability first. References: https://designcode.io/figma-handbook-text-properties-and-styles Youtube Tutorial: https://www.youtube.com/watch?v=gtQ_A3imzsg&t=204s Independent Practice: Seatwork 2: https://docs.google.com/document/d/14quQTvyKUckunrz6yYhIkzRcT_j7ex-Y/edit TIME DAY ACTIVITIES/TOPICS FOR THE DAY ALLOTMENT Prototyping Basics 1. Creating Interactive Prototypes 2. Adding Interactions and Animations Objective: At the end of the lesson students will be able to: Understand how to use Interactions and Animation to their Web Page Design Apply Interactive Web Page Creation 15 Mins Introduction: Greet the students and check their attendance Introduction to the lesson topic and its relevance 5th 15 Mins Introducing Interactive Prototypes Discuss Interactive Prototype Application of Interactive Prototype in wireframe Setting examples 15 Mins Introducing Interactions and Animations Discuss Interactions and Animations Application of Application of Interaction and Animation Setting examples 60 Mins Quiz 2: Make your Business Webpage Interactive 15 Mins WRAP UP/DARB: 1. Summarize the key points covered during the two sessions. 2. Remind the Student about the Final Assessment Next week 3. Ask about the Update of their Project Total: 120 mins What is Prototyping? Prototyping is an important process of design. Creating a prototype helps your engineers understand how the interactions and animations should work in the final product. Figma makes it super simple to create prototypes using transitions without downloading a third-party app. -  Page 13, ICT 8 3rd Quarter Lecture Guide SY 2024-2025 Animation Transitions Transitions indicate the shift from one action to another. Having detailed transaction eases the user's understanding of your app. Without transitions, it would not be easy to communicate what is happening to the user. Easing Easing or Keyframes define the acceleration of a transition happening between two connected frames. This lets you create very smooth interactions that feel more natural. Linear Ease In Ease Out Ease In And Out Ease In Back Ease Out Back Ease In and Out Back Flow Prototyping Flow prototyping is important as it shows the entire journey that your user experiences. For example, a user logs in on the home page and then, clicks the courses icon which takes him to a list of available courses. What about when the user clicks on the tutorials icon? It is essential to prototype these experiences so that you can test your app before development starts in order to see the setbacks. Youtube Tutorial : https://www.youtube.com/watch?v=-d6zNGeF59M Reference: https://designcode.io/figma-handbook-prototyping -  Page 14, ICT 8 3rd Quarter Lecture Guide SY 2024-2025 Quiz 2: Make your Business Webpage Interactive https://docs.google.com/document/d/111ZTBHkSOfVVo5s3CXIxkXEU04HsSRGP/edit TIME DAY ACTIVITIES/TOPICS FOR THE DAY ALLOTMENT Topic: Third Quarter Final Assessment Completion of Requirements Objectives: Evaluate students knowledge and skills in using FIGMA 6th 5 mins Greeting / Roll Call 5 mins Exam rules and instructions. 20 mins Review of first quarter topics. 90 mins Final Assessment via OB Digital Platform Total: 120 mins Final Assessment link: -