UI/UX DESIGN LAB

Paper Code: 
24DCAI502B
Credits: 
03
Periods/week: 
06
Max. Marks: 
100.00
Objective: 

Course Objectives: 

The course will enable the students to

1. Learn basic concepts of user experience design and user interface design

2.  Design, implement and evaluate effective and usable UI/UX using online tools.

 

Course Outcomes: 

Course

Learning outcome

(at course level)

Learning and teaching strategies

Assessment Strategies

Course Code

Course

title

 

24DCAI 502B

 

UI/UX DESIGN LAB

(PRACTICAL)

CO67. Identify UI design principles and UI guidelines in different case studies like web applications, mobile applications and desktop applications.

CO68. Analyse good and bad UI design in case studies.

CO69. Design UI for an application using figma tool.

CO70. Create UX designs for an application using figma tool.

CO71. Create a storyboard for a real world scenario.

CO72. Contribute effectively in course-specific interaction

 

Approach in teaching:

Interactive Lectures, Discussions, Demonstrations

 

Learning activities for the students:

Self-learning assignments, Practical questions

 

Assessment Strategies

Class tests, Semester end examinations, Quizzes, Assignments, Presentations, Individual and group projects

 

 

Introduction:

  • Introduction and importance of user Interface and user experience – definition, importance of good design. Benefits of good design, Principles of user interface. Compare User Interface and User Experience Design
  • User Interface Design:
  • Design process, Screen Designing, Design goals, Screen planning and   purpose, Principles of visual design, including Gestalt Theory
  • Notion & Figma Setup and Figma Grayscales
  • Colour & typography for UI, Interactions and micro-interactions
  • Understanding various sections of a screen (Web, iOS and Android), organizing   screen elements, ordering of screen data and content, Figma Prototype
  • Menu    and    Navigation    schemes    selection    of     window
  • Converting wireframes into high fidelity visual design
  • Design for devices: understanding web & mobile

 

User Experience Design:

  • Elements of UX and Role of research in the UX design process
  • Overview of research methods
  • Introduction to heuristic testing
  • Story board
  • Reading user personas and empathy maps Information architecture and sitemaps, User journey maps, understanding navigation, flow diagram. Sketch wireframes for the project.
  • Interaction design: task flows
  • Overview of grids & page types, Developing low/high fidelity wireframes

 

ESSENTIAL READINGS: 

Suggested Text Books:

  1. Wilbert O Galitz, “The Essential Guide to User Interface Design”, 2nd Edition John Wiley & Sons Inc., 2002.
  2. Staiano, Fabio. Designing and Prototyping Interfaces with Figma: Learn essential UX/UI design principles by creating interactive prototypes for mobile, tablet, and desktop. Packt Publishing Ltd, 2022.

 

REFERENCES: 

Suggested Reference Books:

  1. Tenner, Edward. "The design of everyday things by Donald Norman." Technology and Culture 56.3 (2015): 785-787.
  2. Still, Brian, and Kate Crane. Fundamentals of user-centered design: A practical approach. CRC press, 2017.

Reference Journals:

  1. Quality and User Experience, Springer : https://www.springer.com/journal/41233

e-Resources including links

  1. Designing in Figma layouts: https://figmabook.com/
  2. All Design Lessions:https://hackdesign.org/lessons
  3. Course on Design Technology and Innovation Swayam portal: https://onlinecourses.swayam2.ac.in/aic20_ed02/course

 

Academic Year: 
2024-25
  • Printer-friendly version