Course StructureBCA 155
UX/UI Design
1
Introduction
Overview of UX and UI design, importance, design thinking process, and industry relevance.
UX Design Fundamentals
- Definition of User Experience (UX)
- Importance of UX in product development
- UX vs UI: Key differences
- UX design principles
- UX maturity model
UI Design Fundamentals
- Definition of User Interface (UI)
- Types of user interfaces (GUI, VUI, CLI)
- Visual design principles
- UI design patterns
- Industry relevance and career paths
Design Thinking Process
- Empathize phase
- Define phase
- Ideate phase
- Prototype phase
- Test phase
2
User Interaction Design
Interaction principles, user goals, task flows, mental models, and interaction paradigms.
Interaction Principles
- Affordances and signifiers
- Feedback and response time
- Consistency and standards
- Error prevention and recovery
- User control and freedom
User Goals and Mental Models
- Understanding user goals
- Task analysis
- Mental models vs conceptual models
- Interaction paradigms
- Cognitive load theory
Task Flows and Navigation
- User flow diagrams
- Task flow mapping
- Information architecture
- Navigation patterns
- Wayfinding principles
3
User Interface Design
Visual design principles, layout, typography, color theory, visual hierarchy, and consistency.
Visual Design Principles
- Balance and symmetry
- Contrast and emphasis
- Repetition and pattern
- Proximity and grouping
- Alignment and grid systems
Typography
- Typeface vs font
- Font pairing
- Hierarchy and scale
- Readability and legibility
- Responsive typography
Color Theory
- Color wheel and relationships
- Color psychology
- Color harmony rules
- Accessibility and contrast ratios
- Creating color palettes
Visual Hierarchy
- Size and scale
- Color and contrast
- White space usage
- F-pattern and Z-pattern
- Gestalt principles
4
UI Components
Buttons, forms, navigation, cards, modals, inputs, and component libraries.
Basic Components
- Buttons and CTAs
- Input fields and forms
- Checkboxes and radio buttons
- Dropdowns and selects
- Toggle switches
Navigation Components
- Navigation bars
- Breadcrumbs
- Tabs and pills
- Pagination
- Sidebars and drawers
Content Components
- Cards and tiles
- Lists and tables
- Accordions and collapsibles
- Tooltips and popovers
- Modals and dialogs
Component Libraries
- Design systems
- Material Design
- Apple Human Interface Guidelines
- Building custom component libraries
- Component documentation
5
UI Design Considerations
Accessibility, responsive design, cross-platform considerations, performance, and design systems.
Accessibility
- WCAG guidelines
- Screen reader compatibility
- Keyboard navigation
- Color blindness considerations
- Accessible forms and inputs
Responsive Design
- Mobile-first approach
- Breakpoints and media queries
- Flexible grids and layouts
- Responsive images
- Touch targets and gestures
Cross-Platform Design
- Web vs mobile vs desktop
- Platform-specific patterns
- Adaptive vs responsive design
- Progressive enhancement
- Design tokens
Performance and Design Systems
- Performance budgets
- Design system architecture
- Atomic design methodology
- Version control for design
- Design-to-development handoff
6
Wireframing and Prototyping
Low and high-fidelity wireframes, interactive prototyping, tools, and user testing of prototypes.
Wireframing
- Low-fidelity wireframes
- Mid-fidelity wireframes
- High-fidelity wireframes
- Wireframing tools (Figma, Sketch, Adobe XD)
- Annotation and documentation
Prototyping
- Low-fidelity prototypes
- High-fidelity prototypes
- Interactive prototypes
- Click-through prototypes
- Animated prototypes
User Testing of Prototypes
- Usability testing methods
- A/B testing prototypes
- Gathering feedback
- Iterating on designs
- Prototype fidelity selection
7
Design Evaluations
Usability testing, heuristic evaluation, A/B testing, analytics, and iterative design improvement.
Usability Testing
- Planning usability tests
- Moderated vs unmoderated testing
- Think-aloud protocol
- Task-based testing
- Analyzing usability test results
Heuristic Evaluation
- Nielsen's 10 heuristics
- Severity ratings
- Expert review process
- Heuristic evaluation vs user testing
- Reporting findings
Analytics and Iteration
- Quantitative vs qualitative data
- Heatmaps and click tracking
- Conversion rate optimization
- A/B testing
- Iterative design improvement
8
Advanced Techniques: VUI and NLP based UI
Voice user interfaces, natural language processing in UI, conversational design, and emerging interaction patterns.
Voice User Interfaces (VUI)
- VUI design principles
- Voice assistants and smart speakers
- Conversational design patterns
- Speech recognition basics
- VUI best practices
NLP-Based UI
- Natural language processing basics
- Chatbot design
- Intent recognition
- Entity extraction
- Conversational UI patterns
Emerging Interaction Patterns
- Gesture-based interfaces
- AR/VR interfaces
- Haptic feedback
- Multimodal interfaces
- Future of interaction design