Department Events
UI/UX DESIGN LAB
This course helps students to:
- Learn basic concepts of user experience design and user interface design
- Design, implement and evaluate effective and usable UI/UX using online tools.
Learning Outcome | Learning and Teaching Strategies | Assessment Strategies-
|
The students will: CO56. Identify UI design principles and UI guidelines in different case studies like web applications, mobile applications and desktop applications. CO57 Analyse good and bad UI design in case studies. CO58. Design UI for an application using figma tool. CO59. Create UX designs for an application using figma tool. CO60. Create a storyboard for a real world scenario. | Approach in teaching. Interactive Lectures, Group Discussion, Tutorials, Case Study
Learning activities for the students. Self-learning assignments, Machine Learning exercises, presentations |
Class test, Semester end examinations, Quiz, Practical Assignments, Presentation |
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
- Wilbert O Galitz, “The Essential Guide to User Interface Design”, 2nd Edition John Wiley & Sons Inc., 2002.
- 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.
Suggested Reference Books
- Tenner, Edward. "The design of everyday things by Donald Norman." Technology and Culture 56.3 (2015): 785-787.
- Still, Brian, and Kate Crane. Fundamentals of user-centered design: A practical approach. CRC press, 2017.
E-Resources including links:
- Designing in Figma layouts: https://figmabook.com/
- All Design Lessions:https://hackdesign.org/lessons
- Course on Design Technology and Innovation Swayam portal: https://onlinecourses.swayam2.ac.in/aic20_ed02/course
Reference Journals
- Quality and User Experience, Springer : https://www.springer.com/journal/41233
