-------------------- TIME STAMP ---------------- STORYBOARDING AND WIREFRAMING 0:00:00 Introduction 0:02:12 Karen - My path to UX design 0:04:19 Use research to inform ideation 0:08:05 Craig - Research informs ideation in the real world 0:10:44 Create goal statements 0:14:40 Introduction to storyboarding user flows 0:19:22 Understand the two types of storyboards 0:27:15 Introduction to wireframes 0:31:11 Start drawing 0:36:48 Draw you first wireframe 0:38:58 Understand the benefits of wireframing 0:41:24 Wrap-up Storyboarding of wireframing CREATING PAPER AND DIGITAL WIREFRAMES 0:42:25 Welcome to week 2 0:43:20 The basics of information architecture(IA) 0:47:22 Create paper wireframes 0:54:53 Transition from paper to digital wireframes 0:59:56 Introduction to Figma 1:02:18 Create digital wireframes in Figma 1:16:03 Optional - Learn from Figma Create wireframes for an app 1:31:42 Erika - Tools of the trade 1:34:31 Use Gestalt Principles when creating wireframes 1:39:06 Wrap-up Creating paper and digital wireframes BUILDING LOW-FIDELITY PROTOTYPES 1:40:03 Welcome to week 3 1:41:12 Learn about low-fidelity prototypes 1:43:49 Create a paper prototype 1:52:02 Introduction to building low-fidelity prototypes in figma 1:53:27 Build low-fidelity prototypes in figma 2:05:22 Optional - Learn from Figma Create Prototypes 2:12:58 Recognize implicit bias in design 2:18:18 Ayan - Bias in UX design work 2:20:41 Identify deceptive patterns in UX design 2:28:10 Explore the effects of designs that decieve 2:32:31 Congratulations on completing Course 3 Build and low-fidelity
🎯 Key Takeaways for quick navigation: 00:00 🎬 Storyboards, Wireframes, and Low-Fidelity Prototypes 00:42 🧠 Learn to use research for ideation, build storyboards, create wireframes, and low-fidelity prototypes. 01:22 👥 Instructor's background: Karen, Interaction Designer at Google, advocates for underrepresented communities. 03:34 🚀 UX Designer's journey: Transition from diverse backgrounds to UX design. 05:43 🧩 Empathy maps, personas, user stories, and user journey maps aid understanding of user needs. 07:49 📋 These tools help create problem statements and focus on user needs. 11:24 🎯 Transition from problem to solution with a clear goal statement. 14:28 🖼 Storyboarding: Visualize user's experience, use big picture & close-up types. 20:08 📜 Big Picture Storyboard: Focus on user experience, emotions, and product benefits. 23:28 📐 Close-Up Storyboard: Concentrate on product screens, interactions, and practicalities. 25:45 🧩 Understanding big picture and close-up storyboards. 27:35 📊 Fidelity in UX design: low fidelity (lo-fi) vs. high fidelity (hifi) designs. 29:27 📐 Introduction to wireframes: basic outline of a digital experience. 33:46 📝 Creating wireframes step by step using lines, shapes, and text. 41:25 🏗 Organizing content with Information Architecture (IA) for better user understanding. 47:35 ✍ Benefits of paper wireframing: speed, simplicity, and idea exploration. 50:26 📋 Step-by-step process for drawing paper wireframes: list information, create multiple versions. 01:02:34 📱 Wireframes can be transitioned from paper to digital using design tools like Figma, enhancing collaboration and allowing for remote work. 01:05:08 📝 Wireframes should include functional text that clarifies button or section purposes, and placeholders like "lorem ipsum" can be used for non-meaningful content. 01:06:42 🌐 Digital wireframes offer cleaner design, better attention to details, easier sharing, and are valuable in a collaborative environment. 01:10:08 🖌 When creating digital wireframes, tools like Figma can be used to replicate paper wireframes, and text, shapes, and icons can be added for functionality. 01:11:38 📊 Design elements like dividers and placeholders help structure wireframes, and basic styling aids in conveying functionality before adding expressive details. 01:14:49 📸 Creating multiple sections, applying guiding lines for alignment, and copying elements can help replicate wireframe components, speeding up the process. 01:15:43 📝 Figma is a vector design tool that allows brainstorming, iteration, prototyping, and feedback for app design. 01:16:25 📚 This beginner's course covers designing an app in Figma, from wireframes to interactive prototypes, introducing basics and advanced features like auto layout, components, and prototyping. 01:17:09 🌟 Figma offers free and paid team accounts for collaboration, with educational options available. 01:17:39 🤝 Teams can collaborate by creating shared workspaces in Figma, and the platform supports various levels of access for team members. 01:18:05 🖼 Frames are containers for shape, text, and image layers in Figma, and they define the structure of your design. 01:19:19](ruclips.net/video/wJ3vof9Er5c/видео.html) 🔍 You can navigate, pan, and zoom on the canvas in Figma to work on different parts of your design effectively. 01:20:18 🎨 Shapes like rectangles and ellipses in Figma are used to create basic elements of the design, with options for fill, stroke, and size adjustments. 01:21:04 🎈 Utilizing the alignment tools in Figma helps position and align objects precisely in the design. 01:21:45 🌈 You can adjust properties of layers in Figma, such as color fills, gradients, images, and strokes. 01:23:00 ✍ Text layers can be added and aligned using the text tool in Figma, while layers can be grouped or placed within frames to organize the design. 01:25:26 📚 Using component libraries and design systems can streamline design processes and ensure consistency in Figma. 01:27:17 🛠 Components can be copied, pasted, and reused across frames and files in Figma, facilitating design iterations and collaborative work. 01:28:44 📐 Applying constraints to components in Figma allows for responsive design, ensuring elements adapt well to different frame sizes. 01:31:10 💬 Seeking feedback from a team or colleagues during the design process in Figma helps refine wireframes and make informed design decisions. 01:34:23 🌀 Familiarity with design principles like gestalt principles (similarity, proximity, common region) aids in creating intuitive and visually pleasing designs in Figma. 01:38:20 📋 Gestalt principle: Common Region - Elements in the same area are perceived as grouped together. Borders can be used in wireframes for grouping elements. 01:39:02 📝 Recap of principles: Remember the gestalt principles of similarity, proximity, and common region for creating effective wireframes. 01:39:17 📌 Summary of learnings: Covered information architecture, paper and digital wireframes, and gestalt principles (similarity, proximity, common region). 01:40:00 📚 Transition to prototypes: From wireframes to low-fidelity prototypes using interactive representations of design solutions. 01:40:28 🧪 Prototype definition: Interactive representation of design solution, transitioning from wireframes to low-fidelity prototypes. 01:40:56 🖌 Creating paper prototypes: Advantages include low cost, rapid iteration, easy modification, honest feedback, and collaboration. 01:44:45 🧩 Paper prototypes in brainstorming: Ideal for generating and comparing ideas, testing early product concepts, adaptable based on project needs. 01:47:46 📏 Transitioning to digital prototypes: Paper prototypes to low-fidelity digital prototypes using tools like Figma, focusing on interactions. 01:51:03 🛠 Creating digital prototype in Figma: Connecting wireframes, adding interaction nodes, demonstrating user journeys, and testing functionality. 01:54:06 🔗 Connecting elements in Figma: Transforming wireframes into interactive prototypes, showing user navigation and interactions. 01:59:58 🔄 Iterative testing and adjustments: Revisiting connections, ensuring consistent user experience, and addressing missed interactions. 02:01:13 🏃 Back buttons and navigation: Ensuring users can navigate between screens and flows, enhancing user experience. 02:02:34 ➕ Adding new screens: Quickly adding missing screens to account for user interactions, maintaining a coherent user journey. 02:03:00 🏗 A new page is created for user journey. 02:03:25 🏹 Adding connections between pages for improved usability. 02:03:59 ✅ Testing new connections on the prototype. 02:04:26 🐕 Testing interactions on different pages, ensuring functionality. 02:05:08 🔄 Progression to upgrading the low-fidelity prototype to a high-fidelity version. 02:05:40 🌐 Introduction to interactive prototypes and their importance. 02:06:22 🎯 Explanation of prototype connections and components. 02:06:51 🏠 Creating interactions for menu navigation. 02:07:18 ⏩ Using prototype connections to control user flow. 02:08:13 🚀 Exploring advanced animations for better user experience. 02:08:57 👁🗨 Using observation mode for usability testing and feedback collection. 02:09:55 📢 Sharing prototypes with team members for collaborative feedback. 02:10:25 🗣 Using comments for collaborative feedback and improvement. 02:12:48 🛠 Preparing files for sharing assets with writers and developers. 02:13:04 🔍 Recognizing and addressing biases in UX design. 02:13:45 🌐 Importance of inclusivity and diverse perspectives in design. 02:14:39 🔐 Understanding and avoiding deceptive patterns in design. 02:18:10 🌍 The need for more diversity in tech to combat bias and improve design. 02:20:19 👩💻 The impact of bias on a designer's role and the importance of inclusivity. 02:22:28 🚫 Deceptive patterns in UX design and their negative effects on users. 02:26:57 🛑 Identification of common deceptive patterns and their ethical implications. 02:27:11 💰 Companies use deceptive patterns to make money by tricking users into using products, subscribing to services, or sharing personal information. 02:27:38 🚫 Deceptive patterns create a bad user experience and go against the principles of good UX design, which aims to benefit both users and businesses. 02:28:21 🧠 Consumers are impacted by deceptive patterns due to psychological effects, as these patterns are designed to be hard to identify and ignore. 02:29:18 🛍 Deceptive patterns are used in both physical stores and online shopping experiences to manipulate users into making additional purchases or sharing personal information. 02:31:08 📱 Notification tactics, such as red flags, sounds, and motion, trigger dopamine responses in users' brains, creating a sense of urgency and engagement. 02:31:51 😌 As UX designers, it's essential to attract users without using deceptive patterns, focusing on providing a good user experience and raising concerns if you notice deceptive practices. 02:32:33 🎉 Congratulations on completing the course! Recap what you've learned: starting with research, empathizing with users, designing interfaces, creating low-fidelity prototypes, and avoiding deceptive patterns. Made with HARPA AI
Hi! I need help. I couldn’t add the kit to the library. It says that only styles can be moved to library in the free version, I have to pay to move prototypes of the kit to the library. Is it a part of the Figma’s update or I’m doing something wrong
I want to give Google UX some feedback. When the speaker is looking directly at the camera, I feel like she is talking directly to me, and I feel connection to her. When the video switches to the side angle camera, the speaker is no longer looking at me and I feel suddenly somewhat disconnected from her. I have noticed this style of video-making lately, and I hate it. Before this fashion became popular, when the video switched to the side angle camera, the speaker would look at the side angle camera. I wondered if anyone had done any research to see if this new fashion was alienating users besides me. I could not find any research on the Internet.
Being totally open, I don't even look at video, except for the moments I gotta see what they do with tools. Btw, it is not that strange, cause it'd happen even in face to face conversations...my advice is to focus less on the speaker
-------------------- TIME STAMP ----------------
STORYBOARDING AND WIREFRAMING
0:00:00 Introduction
0:02:12 Karen - My path to UX design
0:04:19 Use research to inform ideation
0:08:05 Craig - Research informs ideation in the real world
0:10:44 Create goal statements
0:14:40 Introduction to storyboarding user flows
0:19:22 Understand the two types of storyboards
0:27:15 Introduction to wireframes
0:31:11 Start drawing
0:36:48 Draw you first wireframe
0:38:58 Understand the benefits of wireframing
0:41:24 Wrap-up Storyboarding of wireframing
CREATING PAPER AND DIGITAL WIREFRAMES
0:42:25 Welcome to week 2
0:43:20 The basics of information architecture(IA)
0:47:22 Create paper wireframes
0:54:53 Transition from paper to digital wireframes
0:59:56 Introduction to Figma
1:02:18 Create digital wireframes in Figma
1:16:03 Optional - Learn from Figma Create wireframes for an app
1:31:42 Erika - Tools of the trade
1:34:31 Use Gestalt Principles when creating wireframes
1:39:06 Wrap-up Creating paper and digital wireframes
BUILDING LOW-FIDELITY PROTOTYPES
1:40:03 Welcome to week 3
1:41:12 Learn about low-fidelity prototypes
1:43:49 Create a paper prototype
1:52:02 Introduction to building low-fidelity prototypes in figma
1:53:27 Build low-fidelity prototypes in figma
2:05:22 Optional - Learn from Figma Create Prototypes
2:12:58 Recognize implicit bias in design
2:18:18 Ayan - Bias in UX design work
2:20:41 Identify deceptive patterns in UX design
2:28:10 Explore the effects of designs that decieve
2:32:31 Congratulations on completing Course 3 Build and low-fidelity
🎯 Key Takeaways for quick navigation:
00:00 🎬 Storyboards, Wireframes, and Low-Fidelity Prototypes
00:42 🧠 Learn to use research for ideation, build storyboards, create wireframes, and low-fidelity prototypes.
01:22 👥 Instructor's background: Karen, Interaction Designer at Google, advocates for underrepresented communities.
03:34 🚀 UX Designer's journey: Transition from diverse backgrounds to UX design.
05:43 🧩 Empathy maps, personas, user stories, and user journey maps aid understanding of user needs.
07:49 📋 These tools help create problem statements and focus on user needs.
11:24 🎯 Transition from problem to solution with a clear goal statement.
14:28 🖼 Storyboarding: Visualize user's experience, use big picture & close-up types.
20:08 📜 Big Picture Storyboard: Focus on user experience, emotions, and product benefits.
23:28 📐 Close-Up Storyboard: Concentrate on product screens, interactions, and practicalities.
25:45 🧩 Understanding big picture and close-up storyboards.
27:35 📊 Fidelity in UX design: low fidelity (lo-fi) vs. high fidelity (hifi) designs.
29:27 📐 Introduction to wireframes: basic outline of a digital experience.
33:46 📝 Creating wireframes step by step using lines, shapes, and text.
41:25 🏗 Organizing content with Information Architecture (IA) for better user understanding.
47:35 ✍ Benefits of paper wireframing: speed, simplicity, and idea exploration.
50:26 📋 Step-by-step process for drawing paper wireframes: list information, create multiple versions.
01:02:34 📱 Wireframes can be transitioned from paper to digital using design tools like Figma, enhancing collaboration and allowing for remote work.
01:05:08 📝 Wireframes should include functional text that clarifies button or section purposes, and placeholders like "lorem ipsum" can be used for non-meaningful content.
01:06:42 🌐 Digital wireframes offer cleaner design, better attention to details, easier sharing, and are valuable in a collaborative environment.
01:10:08 🖌 When creating digital wireframes, tools like Figma can be used to replicate paper wireframes, and text, shapes, and icons can be added for functionality.
01:11:38 📊 Design elements like dividers and placeholders help structure wireframes, and basic styling aids in conveying functionality before adding expressive details.
01:14:49 📸 Creating multiple sections, applying guiding lines for alignment, and copying elements can help replicate wireframe components, speeding up the process.
01:15:43 📝 Figma is a vector design tool that allows brainstorming, iteration, prototyping, and feedback for app design.
01:16:25 📚 This beginner's course covers designing an app in Figma, from wireframes to interactive prototypes, introducing basics and advanced features like auto layout, components, and prototyping.
01:17:09 🌟 Figma offers free and paid team accounts for collaboration, with educational options available.
01:17:39 🤝 Teams can collaborate by creating shared workspaces in Figma, and the platform supports various levels of access for team members.
01:18:05 🖼 Frames are containers for shape, text, and image layers in Figma, and they define the structure of your design.
01:19:19](ruclips.net/video/wJ3vof9Er5c/видео.html) 🔍 You can navigate, pan, and zoom on the canvas in Figma to work on different parts of your design effectively.
01:20:18 🎨 Shapes like rectangles and ellipses in Figma are used to create basic elements of the design, with options for fill, stroke, and size adjustments.
01:21:04 🎈 Utilizing the alignment tools in Figma helps position and align objects precisely in the design.
01:21:45 🌈 You can adjust properties of layers in Figma, such as color fills, gradients, images, and strokes.
01:23:00 ✍ Text layers can be added and aligned using the text tool in Figma, while layers can be grouped or placed within frames to organize the design.
01:25:26 📚 Using component libraries and design systems can streamline design processes and ensure consistency in Figma.
01:27:17 🛠 Components can be copied, pasted, and reused across frames and files in Figma, facilitating design iterations and collaborative work.
01:28:44 📐 Applying constraints to components in Figma allows for responsive design, ensuring elements adapt well to different frame sizes.
01:31:10 💬 Seeking feedback from a team or colleagues during the design process in Figma helps refine wireframes and make informed design decisions.
01:34:23 🌀 Familiarity with design principles like gestalt principles (similarity, proximity, common region) aids in creating intuitive and visually pleasing designs in Figma.
01:38:20 📋 Gestalt principle: Common Region - Elements in the same area are perceived as grouped together. Borders can be used in wireframes for grouping elements.
01:39:02 📝 Recap of principles: Remember the gestalt principles of similarity, proximity, and common region for creating effective wireframes.
01:39:17 📌 Summary of learnings: Covered information architecture, paper and digital wireframes, and gestalt principles (similarity, proximity, common region).
01:40:00 📚 Transition to prototypes: From wireframes to low-fidelity prototypes using interactive representations of design solutions.
01:40:28 🧪 Prototype definition: Interactive representation of design solution, transitioning from wireframes to low-fidelity prototypes.
01:40:56 🖌 Creating paper prototypes: Advantages include low cost, rapid iteration, easy modification, honest feedback, and collaboration.
01:44:45 🧩 Paper prototypes in brainstorming: Ideal for generating and comparing ideas, testing early product concepts, adaptable based on project needs.
01:47:46 📏 Transitioning to digital prototypes: Paper prototypes to low-fidelity digital prototypes using tools like Figma, focusing on interactions.
01:51:03 🛠 Creating digital prototype in Figma: Connecting wireframes, adding interaction nodes, demonstrating user journeys, and testing functionality.
01:54:06 🔗 Connecting elements in Figma: Transforming wireframes into interactive prototypes, showing user navigation and interactions.
01:59:58 🔄 Iterative testing and adjustments: Revisiting connections, ensuring consistent user experience, and addressing missed interactions.
02:01:13 🏃 Back buttons and navigation: Ensuring users can navigate between screens and flows, enhancing user experience.
02:02:34 ➕ Adding new screens: Quickly adding missing screens to account for user interactions, maintaining a coherent user journey.
02:03:00 🏗 A new page is created for user journey.
02:03:25 🏹 Adding connections between pages for improved usability.
02:03:59 ✅ Testing new connections on the prototype.
02:04:26 🐕 Testing interactions on different pages, ensuring functionality.
02:05:08 🔄 Progression to upgrading the low-fidelity prototype to a high-fidelity version.
02:05:40 🌐 Introduction to interactive prototypes and their importance.
02:06:22 🎯 Explanation of prototype connections and components.
02:06:51 🏠 Creating interactions for menu navigation.
02:07:18 ⏩ Using prototype connections to control user flow.
02:08:13 🚀 Exploring advanced animations for better user experience.
02:08:57 👁🗨 Using observation mode for usability testing and feedback collection.
02:09:55 📢 Sharing prototypes with team members for collaborative feedback.
02:10:25 🗣 Using comments for collaborative feedback and improvement.
02:12:48 🛠 Preparing files for sharing assets with writers and developers.
02:13:04 🔍 Recognizing and addressing biases in UX design.
02:13:45 🌐 Importance of inclusivity and diverse perspectives in design.
02:14:39 🔐 Understanding and avoiding deceptive patterns in design.
02:18:10 🌍 The need for more diversity in tech to combat bias and improve design.
02:20:19 👩💻 The impact of bias on a designer's role and the importance of inclusivity.
02:22:28 🚫 Deceptive patterns in UX design and their negative effects on users.
02:26:57 🛑 Identification of common deceptive patterns and their ethical implications.
02:27:11 💰 Companies use deceptive patterns to make money by tricking users into using products, subscribing to services, or sharing personal information.
02:27:38 🚫 Deceptive patterns create a bad user experience and go against the principles of good UX design, which aims to benefit both users and businesses.
02:28:21 🧠 Consumers are impacted by deceptive patterns due to psychological effects, as these patterns are designed to be hard to identify and ignore.
02:29:18 🛍 Deceptive patterns are used in both physical stores and online shopping experiences to manipulate users into making additional purchases or sharing personal information.
02:31:08 📱 Notification tactics, such as red flags, sounds, and motion, trigger dopamine responses in users' brains, creating a sense of urgency and engagement.
02:31:51 😌 As UX designers, it's essential to attract users without using deceptive patterns, focusing on providing a good user experience and raising concerns if you notice deceptive practices.
02:32:33 🎉 Congratulations on completing the course! Recap what you've learned: starting with research, empathizing with users, designing interfaces, creating low-fidelity prototypes, and avoiding deceptive patterns.
Made with HARPA AI
use uizard to convert your paper wireframe into digitally quickly
Google UX Design Professional Certificate
ruclips.net/p/PLtS8Ubq2bIlUWixdH_1Q2yzZh8QJSBVmT
they don't work.
she gets through all 3-4 weeks in the same shirt :0
Thank you pirecy god for thy mercy 🙏
I want to create a connection but the pages are not lining up in one page, how do I do that?
Hi! I need help. I couldn’t add the kit to the library. It says that only styles can be moved to library in the free version, I have to pay to move prototypes of the kit to the library. Is it a part of the Figma’s update or I’m doing something wrong
Please where can I get the Reading that follows this video?
I want to give Google UX some feedback. When the speaker is looking directly at the camera, I feel like she is talking directly to me, and I feel connection to her. When the video switches to the side angle camera, the speaker is no longer looking at me and I feel suddenly somewhat disconnected from her. I have noticed this style of video-making lately, and I hate it. Before this fashion became popular, when the video switched to the side angle camera, the speaker would look at the side angle camera. I wondered if anyone had done any research to see if this new fashion was alienating users besides me. I could not find any research on the Internet.
o k...
Being totally open, I don't even look at video, except for the moments I gotta see what they do with tools.
Btw, it is not that strange, cause it'd happen even in face to face conversations...my advice is to focus less on the speaker
Thanks for uploading.
Thank you for the video! Very useful 👍
sorry after creating my profile wireframe when i added my prototype command on the arrow for going back I got no response or interaction
Please can one get the pdf file
Thank you for this vedio
1:31:36 That was so cute =)))
where can we find the course reading ? thanks
Course Material : drive.google.com/file/d/18obbZHa8tDl87avw8LtjN5ewOCrb-Iot/view?usp=sharing
36:00
Please how can i download figma on my laptop
They have it on their website, visit them and download there, either i think you can download it from store.
1:03:51 is funny that she choose android over iphone 😂
😂😂😂that was funny
@@EmeraldFarry yes bro by the way did you completed this course ?
she works at google...they are closer to android?
she likes green a lot lol
Done
she's cute
👍
This is not a practical tutorial, you guys were busy interviewing yourself 🙄🙄
you can watch some practical tutorials on youtube, this course is more theoretical. it is important too