ANNA UNIVERSITY, CHENNAI
NON - AUTONOMOUS AFFILIATED COLLEGES
REGULATIONS 2021
CHOICE BASED CREDIT SYSTEM
B.E. COMPUTER SCIENCE AND ENGINEERING
CCS370 UI AND UX DESIGN L T P C
2 0 2 3
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
UNIT I FOUNDATIONS OF DESIGN 6
UI vs. UX Design - Core Stages of Design Thinking - Divergent and Convergent Thinking -
Brainstorming and Game storming - Observational Empathy
UNIT II FOUNDATIONS OF UI DESIGN 6
Visual and UI Principles - UI Elements and Patterns - Interaction Behaviors and Principles –
Branding - Style Guides
UNIT III FOUNDATIONS OF UX DESIGN 6
Introduction to User Experience - Why You Should Care about User Experience - Understanding
User Experience - Defining the UX Design Process and its Methodology - Research in User
Experience Design - Tools and Method used for Research - User Needs and its Goals - Know about
Business Goals
UNIT IV WIREFRAMING, PROTOTYPING AND TESTING 6
Sketching Principles - Sketching Red Routes - Responsive Design – Wireframing - Creating
Wireflows - Building a Prototype - Building High-Fidelity Mockups - Designing Efficiently with Tools
- Interaction Patterns - Conducting Usability Tests - Other Evaluative User Research Methods -
Synthesizing Test Findings - Prototype Iteration
UNIT V RESEARCH, DESIGNING, IDEATING, & INFORMATION ARCHITECTURE 6
Identifying and Writing Problem Statements - Identifying Appropriate Research Methods - Creating
Personas - Solution Ideation - Creating User Stories - Creating Scenarios - Flow Diagrams - Flow
Mapping - Information Architecture
30 PERIODS
LIST OF EXPERIMENTS 30 PERIODS
1. Designing a Responsive layout for an societal application
2. Exploring various UI Interaction Patterns
3. Developing an interface with proper UI Style Guides
4. Developing Wireflow diagram for application using open-source software
5. Exploring various open source collaborative interface Platform
1
6. Hands on Design Thinking Process for a new product
7. Brainstorming feature for proposed product
8. Defining the Look and Feel of the new Project
9. Create a Sample Pattern Library for that product (Mood board, Fonts, Colors based on
UI principles)
10. Identify a customer problem to solve
11. Conduct end-to-end user research - User research, creating personas, Ideation
process (User stories, Scenarios), Flow diagrams, Flow Mapping
12. Sketch, design with popular tool and build a prototype and perform usability testing and
identify improvements
TOTAL: 60 PERIODS
COURSE OUTCOMES:
On completion of the course, the students will be able to:
CO1:Build UI for user Applications
CO2:Evaluate UX design of any product or application
CO3:Demonstrate UX Skills in product development
CO4:Implement Sketching principles
CO5:Create Wireframe and Prototype
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.
CO’s-PO’s & PSO’s MAPPING
CO’s PO’s PSO’s
1 2 3 4 5 6 7 8 9 10 11 12 1 2 3
1 3 1 1 3 1 - - - 3 3 2 1 3 3 1
2 2 3 1 3 2 - - - 1 2 2 2 1 2 2
