Course Description
This 3-day course bridges the gap between development and design by teaching web developers the fundamentals of UI (User Interface) and UX (User Experience) design. Participants will learn how to create user-centered designs, apply visual hierarchy, design with consistency, and use modern tools to build wireframes and prototypes. The course combines design theory with practical implementation using HTML, CSS, and front-end frameworks.
Duration: 3 Days
Format: Instructor-led, hands-on workshops, design critiques, prototyping labs, and real-world examples
Description
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
