The document provides an overview of UI and UX design, emphasizing the differences between user interface aesthetics and user experience interactions. It also highlights trends for 2023, including neumorphism, animations, dark mode, minimalism, and 3D elements, while offering tips on becoming a UI/UX designer. Additionally, it lists tools and resources for design management and educational guidance.

1. INTRODUCTION
UI & UX DESIGN
Basic Concept | Trend Design | Figma

2. https://www.menti.com/alvygfde1pxg

3. DAILY CASE UIUX DESIGN
Good vs Bad UI/UX

4. source : instagram.com/uinterx

5. source : instagram.com/uinterx

6. UIUX DESIGN ANALOGY
User Experience (UX)
User Interface (UI)
- Beautiful
- Handsome
- Body Shape
- Attitude
- Converse
- Treatment

7. X

8. BECOME UI/UX DESIGNER
User/Manager Designer UI/UX Programmer

9. WHAT IS UI/UX DESIGN?
UI refers to the aesthetic elements by
which people interact with a product, while
UX is about the experience a user has with
a product or service.

10. What is the Difference ?
Prototyping
Wireframe
UX
UI
Visual Branding
& Design
Design
Responsiveness
Animation &
Interaction
Competitor
Analysis
Information
Architecture
User Research
Usabilty Testing

11. Some Tips & Trick to Become a UI/UX Designer

12. Become UI/UX Designer
1. Feedback is your Vitamin

13. Become UI/UX Designer
2. Learn the Basic Concepts of UX Design

14. Become UI/UX Designer
3. Develop your eye for good UI/UX Design

15. Become UI/UX Designer
4. Get Hands-On Work Experience

16. TREND DESIGN UI/UX 2023

17. TREND DESIGN UI/UX 2023
1. Neumorphism (Skeumorphism & Flat Design)
source : dribbble

18. TREND DESIGN UI/UX 2023

19. TREND DESIGN UI/UX 2023
2. Animations
source :
https://dribbble.com/shots/108
65609-Travel-App-Concept

20. TREND DESIGN UI/UX 2023
3. Dark Mode

21. TREND DESIGN UI/UX 2023
4. Minimalism and Buttonless
source : uxplanet.org
source : dribbble

22. TREND DESIGN UI/UX 2023
5. 3D Elements
source : dribbble

23. UI & UX Designer Weapons⚔?

24. LIST WEAPONS UIUX DESIGN
Adobe XD Sketch Figma Penpot
Free (Trial) Free (Trial) Free Free
Support Only from
Developer
Support Only from
Developer
Developer and
Community
Developer and
Community
Can Collaborate Can Collaborate Can Collaborate Can Collaborate
Web, Desktop,
Mobile
Web, Desktop,
Mobile
Web, Desktop,
Mobile
Web, Desktop
Source : Website Official (Adobe XD, Sketch, Figma, Penpot)

25. MANAGEMENT FILE IN FIGMA
Use projects to group files in any way that
makes sense to you. A way to make file
management neat, structured and easy to
find.
● File Figjam (Ideation, Research, Flow)
● File Figma (User Interface, Prototype)

26. TODAY CHALLENGE
● Create Account or Sign In
https://www.figma.com/signup
● Install Figma Desktop
https://www.figma.com/downloads/
● Get Verified Figma Student (optional)
https://www.figma.com/education/students/

27. GUIDING RESOURCE
1. https://www.figma.com/blog/
2. https://www.figma.com/resources/learn-design/
3. https://dribbble.com/resources/how-to-become-ui-ux-designer
4. https://www.simplilearn.com/how-to-become-ui-ux-designer-article
5. https://sis.binus.ac.id/2023/02/15/ui-ux-design-trends-2023/
6. ttps://www.patrickhansen.com/wp-content/uploads/2017/09/UI-vs-UX-ketchup_2017_02.jpg
7. https://www.centigrade.de/en/blog/analog-and-digital-material-in-human-centered-design-
processes/

28. Cheers
🍻