Build Wireframes and Low-Fidelity Prototypes | ( Course 3/7 ) Complete Course

Рет қаралды 80,531

Күн бұрын

Пікірлер: 34

@MyLesson007 3 жыл бұрын

-------------------- 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

@MyLesson007 3 жыл бұрын

Google UX Design Professional Certificate kzbin.info/aero/PLtS8Ubq2bIlUWixdH_1Q2yzZh8QJSBVmT

@arpitabaheti9851 2 жыл бұрын

they don't work.

@mrajax_0101 2 жыл бұрын

use uizard to convert your paper wireframe into digitally quickly

@kd6613 Жыл бұрын

🎯 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](kzbin.info/www/bejne/rXuWp6Kcbqqla8U) 🔍 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

@finidyrotah8535 4 ай бұрын

I want to create a connection but the pages are not lining up in one page, how do I do that?

@dayana_pro Жыл бұрын

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

@wizart7249 Жыл бұрын

Thank you pirecy god for thy mercy 🙏

@ighalopeter7555 5 ай бұрын

Please where can I get the Reading that follows this video?

@TechHubwithGhost Жыл бұрын

sorry after creating my profile wireframe when i added my prototype command on the arrow for going back I got no response or interaction

@glueflame6459 Жыл бұрын

she gets through all 3-4 weeks in the same shirt :0

@Motiv8Me-1 Жыл бұрын

Thanks for uploading.

@Bill360360 2 жыл бұрын

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.

@modsbeck Жыл бұрын

o k...

@ericfiumano4694 Жыл бұрын

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