To introduce students to systems thinking and its application in design.
To develop understanding about user-centered, human-centered, and life-centered design and its principles.
To enable students to use frameworks to analyze, define, and address design problems in a holistic perspective.
- Teacher: Ms. Monika Sharma
- Teacher: Ms Sri Gayathri Vedula
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.
Level (who can take this course?): Anyone who has a keen interest and passion for designing digital products.
Credit: 6 (90 hrs.)
Evaluation:
Internal Evaluation - 80% (Continuous Evaluation)
External Evaluation - 20% (Jury)
Maximum Number of Students: 50
Course Objectives:
1. Learn how to create user flow/task flow diagrams for a prototype.
2. Learn how to build the information architecture for a prototype.
3. Learn how to build wireframes and prototypes based on information architecture and user flow diagrams.
4. Learn how to create high fidelity prototypes using standard prototyping tools.
5. Learn how to create useful, usable and visually compelling UI design for any kind of app, site or system.
6. Understand and apply the principle of design to arrange UI elements into a unified, consistent experience
7. Understand the rules for designing on various screen sizes and mobile devices.
Prerequisites:
1. Basic Understanding of Design Principles
2. Familiarity with Graphic Design Tools
3. Introduction to Web Development (Optional but Helpful)
4. Basic Knowledge of User Experience (UX) Principles:
5. Familiarity with Mobile App Concepts (for Mobile UI Design)
6. Fundamentals of Typography and Color Theory
7. Awareness of Current UI/UX Trends
8. Basic Digital Illustration Skills (Optional)
9. Introduction to Human-Computer Interaction (HCI)
Course Syllabus:
|
S. No. |
Topic |
Hours |
|
1. |
Creating user flow/task flow diagrams |
5 |
|
2. |
Building an information architecture, Accessibility |
5 |
|
3. |
Wireframing and low fidelity prototype |
5 |
|
4. |
UI design fundamentals, visual hierarchy |
10 |
|
5. |
Color for UI |
10 |
|
6. |
Typography for UI |
10 |
|
7. |
Web UI design |
10 |
|
8. |
Responsive design |
10 |
|
9. |
Mobile App UI design |
10 |
|
10. |
Google Material Design |
5 |
|
11. |
Designing assets for app distribution - icons, app store collateral |
5 |
|
12. |
UI design for other form factors - smart watches, TVs, desktop apps |
5 |
|
|
Total Hours |
90 |
Lesson Plan:
|
S. No. |
Content |
Date |
|
1 |
1. Overview of user/task flows, Importance of user flows in UX design, Key components of flows, Difference between task and user flows, Task flow examples for mobile apps 2. Introduction
to tools (e.g., Figma, Sketch, Photoshop, Illustrator, Fig jam etc.) 3. Review
of flow diagrams 4. Final adjustments and refinements to user/task flows |
9th - 13th September |
|
2 |
1. Key
elements: hierarchies, navigation, content structure 2. Introduction to accessibility (WCAG), Accessibility tools and standards, Evaluating accessibility |
16th September |
|
3 |
1. Wireframing principles, Differences between low and high-fidelity wireframes, Wireframing tools 2. Introduction to visual hierarchy, Key principles: size, color, placement, Optimizing UI for user attention 3. Prototyping principles, Tools for creating interactive prototypes (Figma) |
18th - 20th September |
|
4 |
1. Color psychology and its impact, Color schemes: complementary, analogous, triadic, Accessibility considerations (contrast ratios) 2. Principles of typography in UI, Font choices, size, spacing, line height, Typography accessibility considerations 3. Combining fonts for readability and aesthetic appeal 4. Layouts, grids, navigation, forms for web UI, Responsive web design basics, best practices in typography for UI design. 5. Integrating color and typography into UI, Creating a style guide for consistency |
23rd - 27th September |
|
5 |
1. Responsive design principles, mobile-first design approach, key differences between web UI and mobile 2. UI design, mobile UI patterns (navigation, gestures, touch targets) |
30th September - 1st October |
|
6 |
1. Principles
of Material Design (e.g., cards, buttons, elevation) 2. Best
practices for app icons, splash screens, app store assets |
3rd - 4th October |
Course Outcome:
1. Understand and Create User Flow/Task Flow Diagrams:
2. Build Effective Information Architecture with Accessibility in Mind:
3. Develop Wireframes and Low-Fidelity Prototypes:
4. Apply UI Design Fundamentals and Visual Hierarchy Principles:
5. Utilize Color Theory for Effective UI Design:
6. Implement Typography Best Practices for UI Design:
7. Design Responsive Web UIs:
8. Create Mobile App UI Designs:
9. Master Google Material Design Principles:
10. Design UI Assets for App Distribution and Other Form Factors:
Text Book: Will be suggested based upon personalized teaching and learning requirements.
Reference Book: About Face: The Essentials of Interaction Design, Alan Cooper Mobile First, Luke Wroblewski. Intuitive Design: Eight Steps to an Intuitive UI, Everett N McKay Don’t Make Me Think, Steve Krug
Study Materials: PPTs, Video links and other web references for external research and study.
- Teacher: Ms Shruti Bir