COURSE INFORMATION

Course Code & Course Title : CCS370 UI AND UX DESIGN

Academic Year/Sem : 2024-2025 (EVEN)
Offering Semester : VI
Credits (L T P C) :2023
Course in-charge :K.N.Jayapriya AP/CSE

ABOUT THE COURSE & CONTENTS

UX design is all about identifying and solving user problems; UI design is all about
creating intuitive, aesthetically-pleasing, interactive interfaces. UX design usually comes
first in the product development process, followed by UI. UI design Focuses on the visual
elements of a product that users interact with, such as buttons, icons, and navigation
menus. UX designers take a more high-level view, ensuring the user flow is consistent
and meaningful.
Program Outcomes addressed
PO Program Outcome

Engineering knowledge: Apply the knowledge of mathematics, science,

engineering
1
fundamentals, and an engineering specialization to the solution of complex
engineering problems.
Problem analysis: Identify, formulate, review research literature, and analyze
2 complex engineering problems reaching substantiated conclusions using first
principles of mathematics, natural sciences, and engineering sciences.
Design/development of solutions: Design solutions for complex engineering
problems and design system components or processes that meet the specified
3
needs with appropriate consideration for the public health and safety, and the
cultural, societal, and environmental considerations.
Conduct investigations of complex problems: Use research-based
knowledge and research methods including design of experiments, analysis and
4
interpretation of data, and synthesis of the information to provide valid
conclusions.
Modern tool usage: Create, select, and apply appropriate techniques,
resources, and modern engineering and IT tools including prediction and
5
modeling to complex engineering activities with an understanding of the
limitations.
Individual and team work: Function effectively as an individual, and as a
9
member or leader in diverse teams, and in multidisciplinary settings.
10 Communication: Communicate effectively on complex engineering activities
with the engineering community and with society at large, such as, being able to
 comprehend and write effective reports and design documentation ,make
effective presentations, and give and receive clear instructions.
Project management and finance: Demonstrate knowledge and
understanding of the engineering and management principles and apply these
11
to one’s own work, as a member and leader in a team, to manage projects and
in multidisciplinary environments.
Life-long learning: Recognize the need for, and have the preparation and
12 ability to engage in independent and life-long learning in the broadest context
of technological change.

Program Specific Outcomes addressed

Graduates should be able to

PSO 1 Design data structures and database management systems with a recurrent

programming language to provide software solutions.

In the fields of artificial intelligence, big data, and cloud computing, use
PSO 2
problem-solving techniques.

Course Outcomes
At the end of the course students will have the ability to

Class
Session
C
CO Course Outcomes Pos s
L
(approx
.)
CO1 PO1, PO2,
Build UI for user Applications AP 6
PO3,PO5,PSO2
CO2 Construct UX design of any product or PO1, PO2, PO3, PO4,
AP 6
application PO5, PSO2
PO1, PO2, PO3, PO4,
CO3 Demonstrate UX Skills in product
PO5, PO9, PO10, U 6
development PO11,PO12, PSO2
PO1, PO2, PO3, PO4,
CO4 Implement Sketching principles PO5, PO9, PO10, AP 6
PO11, PO12,PSO2
PO1, PO2, PO3, PO4,
CO5 PO5, PO9,
Model Wireframe and Prototype AP 6
PO10,PO11, PO12,
PSO2
Total Hours of instruction 30
 Strength to which POs and PSO are addressed by COs

Course Level
No. of sessions
Program and POx strength
devoted % of classroom
Program Specific (3-strong, 2-
(Maximum 30 sessions are devoted
Outcome moderate, 1-
sessions)
weak)*
30 100 PO1 3
30 100 PO2 3
30 100 PO3 3
24 80 PO4 3
30 100 PO5 3
18 60 PO9 2
18 60 PO10 2
18 60 PO11 2
18 60 PO12 2
30 100 PSO2 3
*Above 70% - Strong (3); 51% to 70% - Moderate (2); 5% to 50% - Weak (1); LT
5% - NIL (0)

Course – PO/PSO Mapping

Course 1 2 3 4 5 9 10 11 12 PSO
2
CCS334 3 3 3 3 3 2 2 2 2 3

Competencies

At the end of the course the student should be able to

Competency CO CL Sessions
(approx.)
C1 To build core stages of Design , Divergent and
Convergent Thinking CO1 AP 3

C2 To develop Brainstorming, Game storming and

Observational Empathy CO1 AP 3

C3 To identify UI principles, UI elements and

Patterns. CO2 AP 3

C4 To experiment with Interaction behaviours and

Principles and Style Guides CO2 AP 3

C5 To interpret User Experience, Design process and

its methodology CO3 U 3

C6 To outline tools and methods used for research

and to understand Business goals CO3 U 3

C7 To model sketching principles ,wire framing and

prototype CO4 AP 2

C8 To build mock-ups, interaction patterns and

usability tests CO4 AP 2

C9 To identify user research methods, test findings 2

and iteration CO4 AP
 C10 To develop problem statements, research
methods and solution ideation. CO5 AP 3

C11 To build user stories, flow diagrams and

scenarios CO5 AP 3

CO Course Outcomes Target

(Class
Average
Marks)
CO1 Build UI for user Applications 65
CO2 Construct UX design of any product or application 65
CO3 65
Demonstrate UX Skills in product development
CO4 65
Implement Sketching principles
CO5 65
Model Wireframe and Prototype

Assessment Pattern

Assessment Instrument Percentage Weightage

Continuous Internal Assessment 50%

Semester End examination 50%

Continuous Internal Assessment (20 marks)

CIA1
AssessmentPattern Marks Weightag
e
CIAtest-1(CIA+Assignment) 50(25%)
CIAtest-2(CIA+Assignment) 50(25%) 50Mark
40 s
CIAtest-3(CIA+Assignment) 100(50% %
)
CIA2
Evaluation of LaboratoryObservation, Record 75
Model Lab Examination 25 60%

THEORY COMPONENT
LECTURE PLAN
TEXTBOOKS
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.

LECTURE PLAN
Tex
Conta
t R
Modules Content Pages ct CO.X
Boo BT
hours
k
CO1 AP
UI vs. UX Design T1 2 1
Core Stages of Design T1 CO1 AP
8 1
UNIT-1 Thinking
FOUNDATION Divergent and Convergent T1 CO1 AP
10 1
S OF DESIGN Thinking
Brainstorming and Game T1 14 2 CO1 AP
storming
Observational Empathy T1 16 1 CO1 AP
Visual and UI Principles T1 24 1 CO2 AP
UI Elements and Patterns T1 26 1 CO2 AP
UNIT II
FOUNDATION Interaction Behaviors and T1 2 CO2 AP
28
S OF UI Principles
DESIGN Branding T1 41 1 CO2 AP
Style Guides T1 45 1 CO2 AP
Introduction to User T1 84 CO3 U
Experience - Why You Should 1
Care about User Experience
Understanding User T1 96 CO3 U
1
UNIT III Experience
FOUNDATION Defining the UX Design T1 100 CO3 U
1
S OF UX Process and its Methodology
DESIGN Research in User Experience T1 112 1 CO3 U
Design
Tools and Method used for T1 116 1 CO3 U
Research
User Needs and its Goals - T1 123 CO3 U
1
Know about Business Goals
Sketching Principles - 128 CO4 AP
Sketching Red Routes - T1 1
Responsive Design
UNIT IV
Wireframing - Creating T1 131 CO4 AP
Wireflows - Building a 1
WIREFRAMIN
Prototype
G,
PROTOTYPING
Building High-Fidelity T1 135 CO4 AP
Mockups - Designing 1
AND TESTING
Efficiently with Tools
Interaction Patterns - T1 158 1 CO4 AP
Conducting Usability Tests
Other Evaluative User T1 162 1 CO4 AP
Research Methods
 Synthesizing Test Findings - T1 168
1
CO4 AP
Prototype Iteration
Identifying and Writing T1 172 CO5 AP
1
Problem Statements
Identifying Appropriate T1 174 1 CO5 AP
Research Methods
Creating Personas - Solution T2 176 1 CO5 AP
UNIT V Ideation
RESEARCH, Creating User Stories - T2 178 1 CO5 AP
DESIGNING, Creating Scenarios
IDEATING, &
INFORMATION
Flow Diagrams - Flow T2 180 CO5 AP
1
ARCHITECTUR Mapping
E Information Architecture T2 184 1 CO5 AP

TOTAL LECTURE
HOURS: 30
Lab Component
Contac
List of Experiments t
CO.X RBT
hours
1. Designing a Responsive layout for an
societal application. 2 CO1 AP

2. Exploring various UI Interaction

Patterns. 2 CO1 AP

3. Developing an interface with proper UI

2
Style Guides CO2 AP
4. Developing Wireflow diagram for
2
application using open source software. CO2 AP
5. Exploring various open source
collaborative interface Platform 2 CO2 AP

6. Hands on Design Thinking Process for a

new product 2 CO3 AP

7. Brainstorming feature for proposed

2 CO3 AP
product
8. Defining the Look and Feel of the new
2 CO4 AP
Project
9. Create a Sample Pattern Library for that
product (Mood board, Fonts, Colors 2 CO4 AP
based on UI principles)
10 Identify a customer problem to solve
3 CO4 AP
.
11 Conduct end-to-end user research - User
. research, creating personas, Ideation
3 CO5 AP
process (User stories, Scenarios), Flow
diagrams, Flow Mapping
12 Sketch, design with popular tool and 3 CO5 AP
. build a prototype and perform usability
 testing and identify improvements

TOTAL HOURS 30

TOTAL PRACTICAL HOURS : 30

COURSE CO-ORDINATOR IQAC HoD

PRINCIPAL