SARDAR RAJA COLLEGE OF ENGINEERING
COURSE: 21AD505 UI AND UX DESIGN LT PC
2 0 2 3
PROGRAMME: ARTIFICIAL INTELLIGENCE AND DATA
DEGREE: B.Tech.
SCIENCE
COURSE: UI AND UX DESIGN SEMESTER: 5 CREDITS: 3
COURSECODE: CCS370 COURSE TYPE: Theory
COURSE AREA/DOMAIN: VISUAL DESIGN CONTACT PERIODS: 6(weekly)
LAB COURSE NAME: UI AND
CORRESPONDING LAB COURSE CODE (IF ANY): CCS370
UX DESIGN
Course Objectives:
To provide a sound knowledge in UI & UX.
To understand the need for UI and UX.
To understand the various Research Methods used in Design.
To explore the various Tools used in UI & UX.
Creating a wireframe and prototype.
Course Outcomes (CO):
C505.1 Build UI for user Applications.
C505.2 Evaluate UX design of any product or application.
C505.3 Demonstrate UX Skills in product development.
C505.4 Implement Sketching principles.
C505.5 Create Wireframe and Prototype.
MAPPING BETWEEN CO AND PO, PSO WITH CORRELATION LEVEL 1/2/3
CCS370 PO1 PO2 PO3 PO4 PO5 PO6 PO7 PO8 PO9 PO10 PO11 PO12 PSO1 PSO2 PSO3
C505.1 3 1 1 3 1 - - - 3 3 2 1 3 3 1
C505.2 2 3 1 3 2 - - - 1 2 2 2 1 2 2
C505.3 1 3 3 2 2 - - - 2 3 1 2 1 3 3
C505.4 1 2 3 3 1 - - - 3 2 1 3 3 3 3
C505.5 1 2 3 2 1 - - - 2 1 1 1 3 2 2
1 - low, 2 - medium, 3 - high, ‘-' - no correlation
Syllabus
DEPARTMENT OF ARTIFICIAL INTELLIGENCE AND DATA SCIENCE Page 1
SARDAR RAJA COLLEGE OF ENGINEERING
UNIT CO MODULE DETAILS PERIODS
FOUNDATIONS OF DESIGN
UI vs. UX Design - Core Stages of Design Thinking -
1 505.1 I 6
Divergent and Convergent Thinking - Brainstorming and
Game storming - Observational Empathy.
FOUNDATIONS OF UI DESIGN
Visual and UI Principles - UI Elements and Patterns -
2 505.2 II 6
Interaction Behaviours and Principles – Branding - Style
Guides.
FOUNDATIONS OF UX DESIGN
Introduction to User Experience - Why You Should Care
about User Experience - Understanding User Experience -
3 505.3 III Defining the UX Design Process and its Methodology - 6
Research in User Experience Design - Tools and Method
used for Research - User Needs and its Goals - Know
about Business Goals.
WIREFRAMING, PROTOTYPING AND TESTING
Sketching Principles - Sketching Red Routes - Responsive
Design – Wireframing - Creating Wireflows - Building a
4 505.4 IV Prototype - Building High-Fidelity Mockups - Designing 6
Efficiently with Tools - Interaction Patterns - Conducting
Usability Tests - Other Evaluative User Research Methods
- Synthesizing Test Findings - Prototype Iteration.
RESEARCH, DESIGNING, IDEATING, &
INFORMATION ARCHITECTURE
Identifying and Writing Problem Statements - Identifying
5 505.5 V Appropriate Research Methods - Creating Personas - 6
Solution Ideation - Creating User Stories - Creating
Scenarios - Flow Diagrams - Flow Mapping - Information
Architecture.
DEPARTMENT OF ARTIFICIAL INTELLIGENCE AND DATA SCIENCE Page 2
SARDAR RAJA COLLEGE OF ENGINEERING
Gap Analysis:
Unit of the
Topic(s) to be included Proposed Action PO Mapping
Syllabus
I Responsive Design Extra Class 1
III Design Thinking Methods Extra Class 1
Topics beyond syllabus/advanced topics:
S. No Description Periods
1 Accessibility Design 1
Web Source References:
S No URL
1 https://www.youtube.com/watch?v=sG2N0ohJ4-U
TEXT BOOKS:
1. Joel Marsh, “UX for Beginners”, O’Reilly , 2022
2. Jon Yablonski, “Laws of UX using Psychology to Design Better Product & Services” O’Reilly
2021
REFERENCES:
1. Jenifer Tidwell, Charles Brewer, Aynne Valencia, “Designing Interface” 3 rd Edition , O’Reilly
2020
2. Steve Schoger, Adam Wathan “Refactoring UI”, 2018
3. Steve Krug, “Don't Make Me Think, Revisited: A Commonsense Approach to Web & Mobile”,
Third Edition, 2015
4. https://www.nngroup.com/articles/
5. https://www.interaction-design.org/literature.
DEPARTMENT OF ARTIFICIAL INTELLIGENCE AND DATA SCIENCE Page 3
SARDAR RAJA COLLEGE OF ENGINEERING
Delivery/Instructional Methodologies
S.No. DESCRIPTION
DIM 1 Chalk and Talk
DIM 2 Power Point Presentation
DIM 3 Problem Solving
DIM 4 Tutorial
DIM 5 Seminar
DIM 6 Programming
DIM 7 Lab Demo
DIM 8 Case Study
Assessment Methodologies
S.NO. DESCRIPTION TYPE
AM 1 Student Assignment Direct
AM 2 MCQ/Tests Direct
AM 3 IAT Direct
AM 4 University Examination Direct
AM 5 Student Feedback Indirect
DEPARTMENT OF ARTIFICIAL INTELLIGENCE AND DATA SCIENCE Page 4
SARDAR RAJA COLLEGE OF ENGINEERING
K1 – Remember, K2 - Understand, K3 – Apply, K4 – Analyze, K5 – Evaluate, K6 - Create
COURSE PLAN
Unit Day Topic Details K levels Period DIM AM Date/Sign
1 UI vs. UX Design K1 1 1
2 Core Stages of Design Thinking K6 8 1
I 3,4 Divergent and Convergent Thinking K6 3 1 1
5 Brainstorming and Game storming K2 7 1 5
6 Observational Empathy K1 7 1 2
7 Visual and UI Principles K2 3 1
8,9 UI Elements and Patterns K2 1 1
Interaction Behaviours and
II 10 K2 8 1 1
Principles
11 Branding K2 3 1
12 Style Guides K1 7 1 3
Introduction to User Experience -
13 Why You Should Care about User K4 7 1
Experience
14 Understanding User Experience K4 3 1
Defining the UX Design Process and
15 K2 1 1
its Methodology
III
Research in User Experience
16 Design- Tools and Method used for K4 8 1
Research
17 User Needs and its Goals K4 3 1 1
18 Know about Business Goals K4 7 1 2
DEPARTMENT OF ARTIFICIAL INTELLIGENCE AND DATA SCIENCE Page 5
SARDAR RAJA COLLEGE OF ENGINEERING
Unit Day Topic Details K levels Period DIM AM Date/Sign
Sketching Principles - Sketching Red
19 K2 7 1
Routes
Responsive Design – Wireframing -
20 K2 3 1
Creating Wireflows
Building a Prototype - Building
21 K2 1 1 1
High-Fidelity Mockups
IV
Designing Efficiently with Tools -
22 K2 8 1
Interaction Patterns
Conducting Usability Tests-Other
23 K2 3 1
Evaluative User Research Methods
Synthesizing Test Findings -
24 K2 7 1 3
Prototype Iteration
Identifying and Writing Problem
25 K2 7 1
Statements
Identifying Appropriate Research
26 K2 3 1
Methods - Creating Personas
Solution Ideation - Creating User
27 K2 1 1
Stories
V
28 Creating Scenarios -Flow Diagrams K2 8 1 1
29 Flow Mapping K2 3 1 5
30 Information Architecture K2 7 1 3
DEPARTMENT OF ARTIFICIAL INTELLIGENCE AND DATA SCIENCE Page 6
