Intro to UI/UX and How
To Get Started!
by Amal Yulianto // GDSC UII Lead
Agenda
UI and UX?
User Experience Breakdown
User Interface Breakdwon
Guide and Roadmap
Really, what is
UI/UX?
Give your thoughts! https://bit.ly/gdsc-whatisuiux
This is UI
This is UX
User Interface and User Experience
Source: mindinventory
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.
WHY SHOULD WE CARE?
User Experience (UX)
What we want to achieve in UX?
- Meet user’s need
- Easy to use
- Easy to learn
- Freedom and control for user
UX Principles
UX Design Steps
1. Discover - THE WHY
- User Research
- Emphatize
- Analysis
- Problem Validation
- User Personas
2. Ideate - THE HOW
- Sketching
- Wireframing
- Information Architecture
- User Flows
- User Journey Writing
- Interaction Design
3. Validate - THE WHAT
- Accessibility
- Usability Testing
- Feedback
- Interactive Design
Popular UX Methods
Double Diamond Design Thinking
User-Centered Lean UX
User Interface (UI)
What we want to achieve in UI?
- Visual Identity
- Aestethics and Look
- Feel
Design Principles in UI
Visual Hirarchy, Color, Space, Contrast, Proximity, Negative
Space, Repetition, Content Patterns, Typography, etc.
User Interface Steps
Guide and Roadmap
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
Roles in UI/UX
UX Researcher UX Designer
UX Writer UI Designer
How to start?
- Think, think, thnk
- Create some fake projects
- Participate in competition
- Try some real projects
- Iterate!
“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
Thank You
Amal Yulianto
Google Developer Student Clubs Lead
Universitas Islam Indonesia
Instagram: @amalyulianto
Linkedin: linkedin.com/in/amalyulianto

Introduction to UI UX

  • 1.
    Intro to UI/UXand How To Get Started! by Amal Yulianto // GDSC UII Lead
  • 2.
    Agenda UI and UX? UserExperience Breakdown User Interface Breakdwon Guide and Roadmap
  • 3.
    Really, what is UI/UX? Giveyour thoughts! https://bit.ly/gdsc-whatisuiux
  • 4.
  • 5.
  • 6.
    User Interface andUser 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.
  • 9.
  • 10.
    What we wantto achieve in UX? - Meet user’s need - Easy to use - Easy to learn - Freedom and control for user
  • 11.
  • 12.
  • 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 DoubleDiamond Design Thinking User-Centered Lean UX
  • 17.
  • 18.
    What we wantto achieve in UI? - Visual Identity - Aestethics and Look - Feel
  • 19.
    Design Principles inUI Visual Hirarchy, Color, Space, Contrast, Proximity, Negative Space, Repetition, Content Patterns, Typography, etc.
  • 20.
  • 21.
  • 22.
    Your guide tobe 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 UXResearcher 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 makethe 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 GoogleDeveloper Student Clubs Lead Universitas Islam Indonesia Instagram: @amalyulianto Linkedin: linkedin.com/in/amalyulianto