History of Art, Design and Technology

Introduction to UI/UX Design

Course Description cum Session Plan 

DP 2- Introduction to UI/UX Design - DES1107

SEM – I / 1st YEAR


Course Instructor:
Ms. Shruti Bir
Office Number: 530
Phone: 7028015701
Email: shruti.bir@dypiu.ac.in
Office hours:   9:30 am -5:30pm
Location: SID, DYPIU, Akurdi, Pune.

Teaching Assistant
Name: NA
Contact: NA
Office Hours: NA
Location: NA

Level (who can take this course?): 12th pass / Elementary and Intermediate course certificate holder students who has a keen interest and passion for designing digital products.

Credit: 2 (30 hrs.)

Evaluation:

Internal Evaluation - 80% (Continuous Evaluation)
External Evaluation - 20% (Jury)

Maximum Number of Students: 44

Course Objectives:

  1. Introduction to the areas of study categorized under the umbrella of “User Experience” and “User Interface”.
  2. Explain the various design principles that come together to create a user’s experience when using a product or service.
  3. Explain the design thinking process and the various stages that are involved in.
  4. Define and explain the artifacts of the UX design process like wireframes, prototypes
  5. Define the elements of UI design for Web/App design, introduction to design frameworks like Google’s Material Design and Apple’s HIG.
  6. Understand the various UI/UX roles that exist in companies today and the career opportunities for those in the field.

Prerequisites:

  1. Basic reading and comprehension skills
  2. Familiarity with current technologies like mobile apps, websites
  3. Presentation Skills
  4. Familiarity with Mobile App Concepts, an awareness of current UI/UX trends and an introductory knowledge of HCI.

Course Syllabus:

S. No.

Module Topics

Lect.

1

 Overview of User Experience (UX) Work:

1.      Importance of user experience in design.

2.      Main areas of UX work: Graphic Design, UI Design, and UX Design.

3.      Relationships and distinctions between Graphic, UI, and UX Design.

5

2

UX Design Process:

1.      Introduction to the design thinking process.

2.      Stages of the UX design process: Empathize, Define, Ideate, Prototype, Test.

3.      Integration of UI design within the UX design process.

5

3

Foundations of UX Design:

1.      Human-centred design principles.

2.      Importance of user research and usability.

3.      Basics of information architecture.

5

4

Introduction to UI Design:

1.      Elements of UI design: buttons, forms, navigation.

2.      Overview of design frameworks in UI design.

5

5

Digital Display Technology:

1.      Understanding pixels and pixel density.

2.      Adapting UI design for different screen sizes.

5

6

Design Artifacts:

1.      Explanation of design artifacts in the process.

2.      Types of artifacts: User flow diagram, Site map, Information Architecture, Wireframes designs.

3

7

UI/UX Designer Roles:

1.      Responsibilities of UI/UX designers in organizations.

2.      Career path and growth opportunities in the field.

2

 

Total Hours

30


Lessons & Session Plan:

S. No.

Module Content

Dates

1

Module 1: Overview of User Experience Design Work

·        Importance of user experience in design

·        Main areas of UX work: Graphic Design, UI Design, and UX Design

·        Relationships and distinctions between Graphic, UI, and UX Design

·        Overview of the role of UX in digital products

·        Understanding user-centered design vs. technology-centered design

13/09/2024

2

Module 2: UX Design Process

·        Introduction to the design thinking process

·        Stages of the UX design process: Empathize, Define, Ideate, Prototype, Test

·        Integration of UI design within the UX design process

·        Importance of iteration in UX design

·        Techniques for effective user research (e.g., surveys, interviews, observations)

14/09/2024

3

Module 3: Foundations of UX Design

·        Human-centered design principles

·        Importance of user research and usability

·        Basics of information architecture

·        How to create user personas

·        Designing for accessibility and inclusion

15/09/2024

4

Module 4: Introduction to UI Design

·        Elements of UI design: buttons, forms, navigation

·        Overview of design frameworks in UI design

·        Understanding visual hierarchy in UI

·        Best practices in UI design (e.g., consistency, feedback, clarity)

·        Prototyping tools and techniques for UI design

16/09/2024

5

Module 5: Digital Display Technology

·        Understanding pixels and pixel density

·        Adapting UI design for different screen sizes

·        Responsive vs. adaptive design

·        Designing for mobile-first experiences

·        The impact of different operating systems and devices on UI

17/09/2024

6

Module 6: Design Artifacts

·        Explanation of design artifacts in the process

·        Types of artifacts: User flow diagram, Site map, Information Architecture, Wireframes designs

·        Role of wireframes and mockups in the design process

·        How to create and use user flow diagrams effectively

·        Understanding how artifacts communicate design decisions

18/09/2024

7

Module 7: UI/UX Designer Roles

·        Responsibilities of UI/UX designers in organizations

·        Career path and growth opportunities in the field

·        Collaborating with developers and other team members

·        The importance of feedback and iteration in the design process

·        Building a UI/UX portfolio and finding freelance opportunities

19/09/2024

8

Wrap-up and Review and prepare for the final Submission and MCQ

·        Review and Q&A session for all modules covered

·        Recap of key concepts: UX vs. UI, design thinking, responsive design

·        Best practices for starting your UX/UI career

·        Final thoughts on the importance of continuous learning in the design field

·        Open forum for questions and clarifications

20/09/2024


Course Outcome:

  1. Proficiency in UX Design Process
  2. Application of Human-Centred Design Principles
  3. Competence in UI Design and Adaptation for Digital Displays
  4. Effective User Research and Usability Testing
  5. Mastery of Information Architecture
  6. Development of Interactive Prototypes
  7. Application of Responsive Design Principles
  8. Knowledge of Design Systems and Component Libraries
  9. Integration of Accessibility Standards in Design
  10. Become an industry ready UI/UX professional.

 Text Book:

  1. "Don't Make Me Think, Revisited: A Common-Sense Approach to Web Usability" by Steve Krug
  2. "UX Design and Usability Mentor Book" by Emrah Yayici

Reference Book:

  1. "Rocket Surgery Made Easy – Steve Krug
  2. Design for everyday life – Don Norman
  3. Human – computer interaction – Alan Dix
  4. UI is communication: how to design intuitive, user centred interface by focusing on effective communication – Everett Mckay

Study Materials: 

Pdfs, Docs, Exl sheets, PPTs and also supportive internal tutorial Videos will be provided as required alongside the day-to-day lectures to make the learning and teaching more interactive, easy and fun.

Web references for external research and study:

  1. "100 Days of UI/UX: A Complete Guide for Beginners" by Geeks for Geeks
  2. Link: 100 Days of UI/UX: A Complete Guide For Beginners
  3. UI/UX design, web development, and front-end techniques: https://www.smashingmagazine.com
  4. In-depth articles, case studies, and guidelines on topics like usability, user research, interaction design, and accessibility: https://www.nngroup.com

 


Visualization and Representation Techniques

Introduction to Photography

Basic Calligraphy & Letter Design

Sketching and Drawing

Elements of Design and Color Theory

Communication Skills