Course Outline

🔹 Day 1: Foundations of UI/UX Design

Session 1: Introduction to UX Design

• What is UX? Key principles and the UX process
• Understanding user goals and empathy mapping
• Usability heuristics and user-centered design

Session 2: UI Design Fundamentals

• Visual hierarchy and layout principles
• Typography, spacing, and color theory
• Design systems and consistency in interfaces

Session 3: User Research and Wireframing

• Basics of user research and personas
• Low-fidelity sketching and digital wireframes
• Tools: Figma, Adobe XD, Balsamiq

Lab Activities:

• Create a user persona and empathy map
• Sketch and digitize a low-fidelity wireframe for a sample app
• Critique and iterate on a wireframe design in groups

🔹 Day 2: From Wireframe to Interactive Design

Session 1: Design Patterns and Interaction Design

• Navigation patterns (top nav, side nav, hamburger menus)
• Forms and input UX
• Buttons, modals, cards, and interactive elements

Session 2: Prototyping and User Flows

• Turning wireframes into interactive prototypes
• Creating user flows and storyboards
• Feedback, microinteractions, and transitions

Session 3: Responsive Design and Accessibility

• Designing for multiple screen sizes
• Mobile-first and fluid layout principles
• Web accessibility fundamentals (WCAG) and ARIA roles

Lab Activities:

• Build an interactive prototype using Figma or Adobe XD
• Design a responsive web interface using CSS grid/flexbox
• Conduct a basic accessibility audit on a sample page

🔹 Day 3: UI/UX Implementation and Handoff to Developers

Session 1: Design to Code Workflow

• Inspecting design assets and using developer tools in Figma
• Exporting design specs and redlines
• Mapping design to HTML/CSS/JS components

Session 2: Applying UI/UX Principles in Code

• Implementing UI/UX design using CSS, Tailwind, or Bootstrap
• Component libraries and design systems (e.g., Material UI, Ant Design)
• Real-world design implementation challenges

Session 3: Usability Testing and Iteration

• Conducting usability tests: methods and tools
• Gathering feedback and refining designs
• Final design review and handoff checklist

Lab Activities:

• Convert a prototype into a working web page using HTML/CSS
• Use a design system or component library to build UI
• Present and test your final interface with peers