ui-ux-design-concepts

ui-ux-design-concepts

UI UX Design Concepts and Notes

Weekly Sessions

• Complete Course

• Week 1 : Course Introduction

• Week 2 : Key Elements of UI Design Part 1

• Week 3 : Key Elements of UI Design Part 2

• Week 4 : Must Know Principle to Create Awesome UI Design

• Week 5 : UI Design Process and UI Design Research

• Week 6 : Design System

• Week 7 : Hands-on with Figma

• Week 8 : Conclusion

Course Curriculum

Week 1

Agenda

1. Overview of the Course Curriculum

2. Difference between UI and UX

3. What is UI Design, and why is it important?

4. Importance of User Testing in UI Design

5. The importance of User Conventions and Mental Model in UI Design

Pre-reads

• Basic Principles of Design and UX

Class

• Course Introduction

---

Week 2

Agenda

1. What are the Key Elements of UI Design or the Building Blocks of UI Design

2. The Visceral level of Design

3. Color Theory

4. Typography

5. Shapes

Pre-reads

Principle 1 : Colour

• History of Colour

• Colour Psychology

• Science behind how do we differenciate between colours

• Difference between RGB, CMYK, CMYKOGV and SPOT Colours

Principle 2 : Typography

• History of Typography

• Typeface Psychology

• How to choose Typeface in Design Work

Principle 3 : Layouts and Composition

• Design Rules of Layout and Composition

• Principles of Graphic Design

Principle 4 : White Space and Negative Space

• Negative Space

• White Space

Principle 5 : Consistency

• Consistency

Principle 6 : Grid System

• Grid Systems

Class

• Key Elements of UI Design Part 1

---

Week 3

Agenda

1. Navigations

2. Layout and Compositions

3. Surface

4. Grid System

5. Icons, Images and Illustrations

6. Animation

7. Copy

Pre-reads

Class

• Key Elements of UI Design Part 2

---

Week 4

Agenda

1. Simplicity

2. Consistency

3. Usability

4. Accessibility

5. Feedback

6. Visual Hierarchy

7. Contrast

8. White Space

9. Affordance

10. Flexibility

11. Error Prevention and Recovery

12. Skeuomorphism vs Flat Design

Pre-reads

• UI Design Principle

• Gestalt Psychology

• Gestalt Principles : How to apply them in your UX/UI design projects

Class

• Must Know Principle to Create Awesome UI Design

---

Week 5

Agenda

1. UI Design Research

2. How is UI Research different from UX Research

3. UI Design Process

4. Step 1 - Requirement Gathering

5. Step 2 - Empathise

6. Step 3 - Define

7. Step 4 - Ideate

8. Step 5 - Prototype

9. Step 6 - Test

Pre-reads

Class

• UI Design Process and UI Design Research

• Ref video

---

Week 6

Agenda

1. UI Kit is not equal to Design System

2. What is a Design System?

3. Why should we use a Design System?

4. Important Elements of Design Systems?

5. Atomic Design Methodology

6. Examples of Design Systems

7. How to Build a Design Systems?

Pre-reads

Class

• Design System

---

Week 7

Agenda

1. What is Figma and How to Get Started?

2. Download and Explore UI Kits (Due to some technical issue we were not able to perform this)

3. How to creates Your Own Design System

4. Choose Color and Typography

5. Creates Styles for Colors and Typography

6. Create reusable components (Buttons)

7. Create Components Variables (Button)

8. Live User Interface Creation using the above Design System

Pre-reads

Class

• Hands-on with Figma

---

Week 8

Agenda

1. Recap

2. What's next for you

3. What's next for us

4. Capstone

Pre-reads

Class

• Course Conclusion and Next Step

• Capstone Project