UI UX DESIGN

Introduction to UI and UX Design

Get an introduction to UI and UX Design and the key methodologies such as Product Design Life Cycle, Double Diamond, and Design Thinking.

• Informational: Welcome to Introduction to UI and UX Design
• Article: What are UI and UX Design?
• Lesson : Key Methodologies of UI and UX Design
• Article: The UI and UX Career Landscape
• Quiz: Introduction to UI and UX Design

Wireframes

Apply design frameworks to create low-fidelity wireframe deliverables.

• Lesson: Wireframes
• Project: Wirecademy: Ridgeline
• Quiz :Wireframes
  

Prototyping with Figma

Transform low-fidelity wireframes into high-fidelity, interactive prototypes using Figma.

• Lesson: Prototyping with Figma
• Article: Sharing and Exporting Figma Files
• Project: Prototype Ridgeline
• Quiz: Prototyping with Figma
• Informational: Intro to UI and UX Design Next Steps

UI and UX Design Course Module

1. Week

   • UX Design Fundamentals

     • Understanding human needs & wants
     • Deconstructing problems
     • Researching competitors

   • Layers & Objects

     • Detailed exploration of layers and their hierarchy.
     • Organizing layers effectively.
     • Smart selection and manipulation techniques.
     • Utilizing vector editing tools.
     • Hands on: Design an icon or small illustration using vector tools.
2. Week

   • Product Discovery & User Research

     • Conducting User Interviews.
     • Deriving insights from user research.
     • Building User Personas.

   • Typography and Text Styling

     • Understanding text layers and properties.
     • Creating and managing text styles.
     • Applying typography best practices.
     • Text effects and advanced styling.
     • Hands on: Design a simple webpage layout with emphasis on
       typography.
3. Week 

   • Problem Framing, Ideation & Validation

     • Framing problem statements
     • Mind mapping solutions
     • Validation techniques

   • Colors, Gradients & Styling

     • Using the color picker and creating palettes.
     • Applying gradients and understanding their properties.
     • Utilizing the Styles feature for consistency.
     • Best practices for maintaining a cohesive design system.
     • Hands on: Design a component with defined color and style
       guidelines.
4. Week

   • Interaction Design

     • Creating User flows.
     • Creating User flows.
     • Building Information architecture.
     • Building lo fi and mid fi wireframes.

   • Colors, Gradients & Styling

     • Introduction to components and their benefits
     • Creating and managing component libraries
     • Using instances for scalable designs
     • Mastering overrides and variations
     • Hands on: Build a simple interactive prototype using components
5. Week

   • Visual Design Fundamentals

     • Mood boarding & Design Systems
     • Learning Typography fundamentals Grids
   • Prototyping
     • Creating links and hotspots for navigation
     • Understanding the prototype settings
     • Testing and iterating on prototypes
     • Hands on: Develop a basic app prototype with interactive elements
6. Week

   • Visual Design Language

     • Understanding UI principles.
     • Colors & Patterns.
     • Layouts.

   • Animation & Micro interactions

     • Micro interactions for enhanced user experience.
     • Integrating animations for a polished prototype.
7. Week

   • Motion Design

     • Motion Design Principles.
     • Adding animations.
     • Creating micro interactions.
   • Adaptive & Responsive Design Techniques.
   • Introduction to responsive design principles.
   • Using constraints for flexible layouts.
   • Designing for various screen sizes.
   • Tips for efficient responsive design in Figma.
   • Hands on: Design a responsive webpage with adaptive
     components.
8. Week

   • UX Design Fundamentals

     • Prototyping app screens.
     • Advanced prototypins.
     • How to do usability testing.

   • Shortcuts & plugins

     • Hidden gems and shortcuts in Figme.
     • Advanced techniques for power users.
     • Integrations with other tools and plugins.
     • Addressing common challenges in Figma projects.
     • Hands on: Solve a complex design problem using advanced
       features.
9. Week

   • UX Design Fundamentals

     • How to build a design portfolio.
     • Interview Prep.
     • Graduation project submission.

   • Collaboration & Version Control

     • Overview of collaboration features in Figme.
     • Real time collaboration with team members.
     • Real time collaboration with team members.
     • Using comments and annotations effectively.
     • Version history and best practices.
     • Hands on: Collaborate on a small project with fellow learners.