BBD Block-based Design with Figma

Program Overview

Welcome to BBD Block-based Design with Figma! This comprehensive course is designed to equip you with essential UI/UX design skills using Figma. Through 24 carefully structured lessons, you'll learn everything from fundamental design principles to advanced concepts in AI-first application design.

Program Objectives

• Master UI/UX design fundamentals and best practices
• Develop proficiency in using Figma for design and prototyping
• Create professional-grade mobile and web applications
• Build a strong portfolio of design projects
• Understand and implement AI-first design principles

Lesson Structure

BBD Block-based Design with Figma - Session Logistics

Lesson	Topic	Objectives	Notes/File Link	Activities Link	Exit Ticket	Submission Link
1	Introduction to UI/UX Design	• Define UI (User Interface) and UX (User Experience) design • Understand the difference between UI and UX • Recognize the importance of UI/UX in product development • Familiarize with course structure and expectations	Introduction to UI/UX Design	Activity 1	ET-1	Submit
2	Design Principles Part 1 - Color Theory	• Understand the basics of color theory and the color wheel • Learn about color harmony and how to create appealing color palettes • Recognize the psychological effects of colors on user emotions and behavior	Design Principles Part 1 - Color Theory	Activity 2	ET-2	Submit
3	Design Principles Part 2 - Typography	• Understand the fundamentals of typography in design • Learn about font classifications and their appropriate use cases • Grasp the importance of readability, hierarchy, and consistency in typography	Design Principles Part 2 - Typography	Activity 3	ET-3	Submit
4	Design Principles Part 3 - Layout and Composition	• Understand the principles of layout and composition in UI/UX design • Learn about grids, alignment, whitespace, and balance • Apply composition principles to create visually appealing designs	Design Principles Part 3 - Layout and Composition	Activity 4	ET-4	Submit
5	Creating Your Own Brand Guideline	• Understand the importance of brand identity in UI/UX design • Develop comprehensive brand guidelines • Document design decisions for future projects	Creating Your Own Brand Guideline	Activity 5	ET-5	Submit
6	UI/UX Case Studies	• Learn why analyzing UI/UX designs is important • Understand the case study methodology • Analyze successful UI/UX designs • Identify areas for improvement in UI/UX	UI/UX Case Studies	Activity 6	ET-6	Submit
7	Material Design	• Introduction to Material Design Principles • Assess visual design elements and their impact • Learn about Apple Human Interface guidelines	Material Design	Activity 7	ET-7	Submit
8	Project One: Project Documentation	• Understand the importance of project documentation • Learn about feature requirement documents • Explore documentation best practices	Project One: Project Documentation	-	Project-1	Submit
9	User Flow and Wireframe Development	• Understand the concept of User Flow and its importance • Learn how to create User Flow Diagrams • Develop wireframes for key screens	User Flow and Wireframe Development	Activity 8	ET-8	Submit
10	Quiz 1	• Review concepts from Lessons 1-9 • Complete assessment	Quiz 1 Revision	Quiz 1	-	-
11	Mobile App Design Principles	• Understand mobile vs desktop design differences • Learn key principles for optimizing mobile experiences • Explore navigation patterns and accessibility	Mobile App Design Principles	Activity 9	ET-9	Submit
12	Designing Mobile App Screens	• Apply typography, color theory, and layout principles • Create design elements for mobile interfaces • Begin Mini Project 2	Designing Mobile App Screens	Activity 10	ET-10	Submit
13	Project 2: Prototyping Mobile Apps	• Master Figma's prototyping features • Create interactive prototypes • Prepare for user testing	Project 2: Prototyping Mobile Apps	-	Project-2	Submit
14	Web App Design Principles	• Learn responsive design concepts • Understand web accessibility standards • Plan web app structure	Web App Design Principles	Activity 11	ET-11	Submit
15	Designing Web App Screens	• Set up Figma for responsive design • Design for multiple screen sizes • Ensure consistency across platforms	Designing Web App Screens	Activity 12	ET-12	Submit
16	Project 3: Prototyping Web Apps	• Create interactive web prototypes • Simulate user interactions • Prepare for usability testing	Project 3: Prototyping Web Apps	-	Project-3	Submit
17	Introduction to AI-First Applications	• Understand AI-First application concepts • Learn about AI's role in UI/UX design • Explore ethical considerations	Introduction to AI-First Applications	Activity 13	ET-13	Submit
18	AI Application Interfaces	• Study different types of AI applications • Learn to personalize user experiences • Apply ethical design principles	AI Application Interfaces	Activity 14	ET-14	Submit
19	Quiz 2	• Review concepts from Lessons 11-18 • Complete assessment	Quiz 2 Revision	Quiz 2	-	-
20	Final Project (Part 1) - Analysis	• Begin final project planning • Conduct requirements analysis • Define project scope	Final Project (Part 1) - Analysis	-	Project-4-P1	-
21	Final Project (Part 2) - Wireframe	• Create comprehensive wireframes • Apply design system principles • Develop user flows	Final Project (Part 2) - Wireframe	-	Project-4-P2	-
22	Final Project (Part 3) - Portfolio Building	• Organize project documentation • Create portfolio presentations • Document design process	Final Project (Part 3) - Portfolio Building	-	Project-4-P3	-
23	Final Project (Part 4) - Presentation	• Present final project • Demonstrate design decisions • Receive peer feedback	Final Project (Part 4) - Presentation	-	Project-4-P4	Submit
24	Graduation	• Project evaluation • Course completion	Download Graduation Background	Complete Feedback Form	Submit Testimonial	-

Learning Outcomes

• Figma Design Tool
• Course Materials and Presentations
• Case Study Examples
• Design Guidelines and Documentation
• Additional Online Resources