Introduction to UI UX

1. Intro to UI/UX and How
To Get Started!
by Amal Yulianto // GDSC UII Lead

2. Agenda
UI and UX?
User Experience Breakdown
User Interface Breakdwon
Guide and Roadmap

3. Really, what is
UI/UX?
Give your thoughts! https://bit.ly/gdsc-whatisuiux

4. This is UI

5. This is UX

6. User Interface and User Experience
Source: mindinventory

7. UI and UX? Aren’t they the same thing?!?!
No. Let’s say our product is a home. UX designers will create
the architectural plans for the house and decide where to build it.
UI designers will concentrate on landscaping, what color the
house will be, and other visual decisions.

8. WHY SHOULD WE CARE?

9. User Experience (UX)

10. What we want to achieve in UX?
- Meet user’s need
- Easy to use
- Easy to learn
- Freedom and control for user

11. UX Principles

12. UX Design Steps

13. 1. Discover - THE WHY
- User Research
- Emphatize
- Analysis
- Problem Validation
- User Personas

14. 2. Ideate - THE HOW
- Sketching
- Wireframing
- Information Architecture
- User Flows
- User Journey Writing
- Interaction Design

15. 3. Validate - THE WHAT
- Accessibility
- Usability Testing
- Feedback
- Interactive Design

16. Popular UX Methods
Double Diamond Design Thinking
User-Centered Lean UX

17. User Interface (UI)

18. What we want to achieve in UI?
- Visual Identity
- Aestethics and Look
- Feel

19. Design Principles in UI
Visual Hirarchy, Color, Space, Contrast, Proximity, Negative
Space, Repetition, Content Patterns, Typography, etc.

20. User Interface Steps

21. Guide and Roadmap

22. Your guide to be UI/UX Designer
https://product-design-roadmap.com/
https://bootcamp.uxdesign.cc/the-self-taught-ui-ux-
designer-roadmap-in-2021-aa0f5b62cecb

23. Roles in UI/UX
UX Researcher UX Designer
UX Writer UI Designer

24. How to start?
- Think, think, thnk
- Create some fake projects
- Participate in competition
- Try some real projects
- Iterate!

25. “Most people make the mistake of
thinking design is what it looks like.
People think it’s this veneer – that the
designers are handed this box and
told, ‘Make it look good!’
That’s not what we think design is. It’s
not just what it looks like and feels like.
Design is how it works.”
Steve Jobs

26. Thank You
Amal Yulianto
Google Developer Student Clubs Lead
Universitas Islam Indonesia
Instagram: @amalyulianto
Linkedin: linkedin.com/in/amalyulianto