UI/UX DESIGN (Practical)

Paper Code: 
25CVAA305
Credits: 
6
Contact Hours: 
90.00
Max. Marks: 
100.00
Objective: 

The course will enable the students to learn basic concepts of user experience design and user interface design. The student will 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

25CVAA305

UI/UX Design (Practical)

CO65: Combine knowledge of UI/UX design principles and UI/UX guidelines in different case studies like web applications, mobile applications and desktop applications.

 

CO66: Create a portfolio displaying their UX designs for an application & a storyboard for a real world scenario.  Design UI for an application using figma tool. 

 

CO67: Facilitate creative thinking to enhance vital skills needed to be successful in the market. after analysing good and bad UI/UX design 

 

CO68: Contribute effectively in course-specific interaction

Approach in teaching: Interactive Lectures, Discussion,

Ideation, Tutorials, Assignments, Brainstorming, Demonstration

 

Learning activities for the students: Self-Learning Assignments, Giving Tasks, Visualization, Experimenting, Sketching to Learn, Free Exploration, Focused Exploration.

Layouts & Sketches, Continuous Assessment Test, Semester End  Examinations, Daily Assignments, Observation, Student Teacher Interaction and Final Submissions

COURSE CONTENTS:

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: 
  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 READINGS:

  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.

E-RESOURCES:

  1. Quality and User Experience, Springer : https://www.springer.com/journal/41233
  2. Designing in Figma layouts: https://figmabook.com/
  3. All Design Lessions:https://hackdesign.org/lessons
  4. Course on Design Technology and Innovation Swayam portal: https://onlinecourses.swayam2.ac.in/aic20_ed02/course
Academic Year: 
2025-2026
  • Printer-friendly version
  • PDF version