🎨 UI/UX Design BCA 155 | Semester II
📖 Course Description
This course covers the fundamentals of User Experience (UX) and User Interface (UI) design, including UX principles, user research, interaction design, UI components, wireframing, prototyping, design evaluation, and advanced techniques like VUI and NLP-based interfaces. Students will gain hands-on experience using industry-standard tools such as Figma, Adobe XD, and Sketch.
🎯 Course Objectives (Inferred)
- Understand UX vs UI and core principles of usability, accessibility, and simplicity
- Conduct user research, create personas, journey maps, and ideation techniques
- Design graphical and web user interfaces with proper UI components
- Apply color theory, typography, visual hierarchy, and responsive design
- Create wireframes, mockups, and interactive prototypes
- Perform usability testing and heuristic evaluation
- Explore VUI, conversational UI, and design for wearable devices
📚 Detailed Syllabus
Unit 1: Fundamentals of UX and UI
6 Hrs
- Fundamentals of UX and UI, UX vs UI
- Tasks of UX designer and UI designer
- UX principles: Usability, Accessibility, Simplicity
- Core disciplines of UX: User research, content strategy, Information Architecture, Interaction design, Visual Design, usability evaluation
- User interfaces: CLI, GUI, VUI, Menu-driven, NLP-based
- Properties of good UX/UI design
- UX/UI tools: Figma, Adobe XD, Sketch
Unit 2: User Interaction Design
6 Hrs
- UX design process and user-centered design, Mindmap
- UX research: Conducting user research (Interviews, Surveys, Competitive analysis)
- Creating user personas, user journey mapping
- Ideation techniques: Mood boards, Brainstorming and sketching
Unit 3: User Interface Design
6 Hrs
- Graphical and web user interfaces
- Interaction styles: Command line, Menu selection, Form fill-in, Direct manipulation, Anthropomorphic
- Principles of UI design
- Graphical user interface, UI design process
- Human considerations in interface and screen design
- Technological considerations in interface design
Unit 4: UI Components
12 Hrs
- System menus and functions of menus
- Formatting of menus: Consistency, display, presentation, organization, complexity, item arrangement, ordering, grouping
- Types of menus: Menu bar, pull-down menu, cascading menu, popup menu, tear-off menu, iconic menu
- Selection of Windows and components, window presentation styles: Tiled windows, overlapping windows, cascading windows
- Types of windows: Primary, secondary windows, dialog boxes
- Screen-based controls: Operable controls (Buttons, toolbars), Text entry/Read-only controls (single and multiple line textboxes), Selection controls (radio buttons, checkboxes, palettes, list boxes, list view controls, drop-down/popup list boxes)
- Other operable controls: slider, tabs, date picker, tree view, scroll bars
- Selecting proper controls, Creating meaningful graphics, icons and images
Unit 5: UI Design Considerations
6 Hrs
- Page layout, Color scheme and font selection, typography, screen size and responsive designs, interactive elements
- Visual hierarchy principles: Alignment, Color, Contrast, Proximity, Size, Texture, Time
- Navigation: Global navigation, utility navigation, Associative and Inline Navigation
- Navigational models: Hub and spoke, fully connected, multilevel or tree, stepwise navigation, Pyramid navigation, flat navigation
Unit 6: Wireframing and Prototyping
6 Hrs
- Wireframes and mock-ups
- Prototyping: Low fidelity and high fidelity prototyping, interactive prototyping
- UX storyboarding, mockups
- Software prototyping
- Transition and animation to prototypes
- Creating a simple clickable prototype
Unit 7: Design Evaluations
6 Hrs
- Formative and summative evaluation
- Usability testing: Moderated vs Unmoderated
- Analyzing test results and gathering insights
- Evaluation through expert analysis and user participation, iterative evaluation and evaluation paradigms
- DECIDE evaluation framework, heuristic evaluation
- Task analysis and performance metrics
Unit 8: Advanced Techniques: VUI and NLP based UI
4 Hrs
- Command and control vs Conversational UI
- Personas, Avatars, Actors and Video games
- Speech recognition technology and Dialog management
- Designing for Wearable Devices
🔬 Laboratory Work (48 Hours)
Tools: Figma, Adobe XD, or Sketch
Use basic tools and features for visual designs
Proper page layout, font selection, screen size and responsive designs
Implement color theory and typography in interface designs
Create designs with proper grids and layouts
Integrate interactive elements into designs
Create designs with different types of windows and operable controls
Use different navigational styles in designs
Construct wireframes and prototypes for designs
Create storyboards for interaction designs
Apply different effects, styles, and animations for designs
📌 Final Project: At the end of the semester, students must submit a project that includes basic interface and interaction designs for a chosen topic individually and perform evaluations on the designs.
📚 Required Readings & References
- Galitz, W. O. (2007) – The Essential Guide to User Interface Design (3rd ed.), Wiley
- Gothelf, J., & Seiden, J. (2013) – Lean UX, O’Reilly Media
- Green, T., & Brandon, K. (2024) – UX Design with Figma, Apress
- Tidwell, J., Brewer, C., & Valencia, A. (2020) – Designing Interfaces (3rd ed.), O’Reilly
- Wood, D. (2014) – Interface Design, Bloomsbury Publishing