Step by step menjadi UI UX Designer

Created by Yoki Tyas Riesmana

Transcript

1. MENJADI UI/UX DESIGNER
   S T E P - B Y- S T E P
   

   View Slide

2. Y O K I T YA S R I E S M A N A
   F R E E L A N C E D E S I G N E R , T O P C O D E R M V P
   Freelance Designer: 9+ Tahun
   
   
   Product Planning & Design: 6,5 Tahun
   
   
   Gamer: Lifetime
   

   View Slide

3. View Slide

4. D E S I G N & B U I L D H I G H - Q U A L I T Y
   S O F T WA R E W I T H C R O W D S O U R C I N G
   

   View Slide

5. View Slide

6. View Slide

7. T E N T U K A N T U J U A N M U
   Iseng
   Lagi trend, ikut-ikutan teman, gara2 ada tugas kuliah, dll
   Hobi
   Suka bikin desain gra
   fi
   Freelance Designer
   Pengen cari duit tambahan, kalo bisa sampe bikin studio design sendiri
   Pro Designer
   Kerja profesional, butuh tantangan, pengen nambah ilmu, keren
   

   View Slide

8. Memulai menjadi UI Designer — Bagian 1, Membuat UI by Dwinawan (Medium)
   

   View Slide

9. U I / U X
   I S E N G
   Hunting referensi design
   
   
   Menjiplak
   
   
   ATM (Amati-Tiru-Modi
   fi
   kasi)
   
   
   Kenalan aplikasi dan tool design
   
   
   Ngikutin tutorial
   
   
   Belajar istilah design
   W H AT T O D O
   

   View Slide

10. R E F E R E N S I - D R I B B B L E
    

    View Slide

11. R E F E R E N S I - B E H A N C E
    

    View Slide

12. R E F E R E N S I - P I N T E R E S T
    

    View Slide

13. U I / U X
    I S E N G
    Belajar menggunakan tool aplikasi design
    
    
    Ukuran tiap element (font, icon, button, dll)
    
    
    Cara bikin layer effect (drop shadow, gradient, dll)
    
    
    Penggunaan warna
    
    
    Jenis font (typeface)
    
    
    Komposisi / Layout
    W H AT T O K N O W F R O M M E N J I P L A K D A N AT M
    

    View Slide

14. Job Vacancy Dashboard by Pixelz
    

    View Slide

15. Job Vacancy Dashboard by Pixelz
    U K U R A N T I A P E L E M E N T ( F O N T, I C O N , B U T T O N , S PA C I N G , D L L )
    D R O P S H A D O W
    Layer Effect
    

    View Slide

16. Job Vacancy Dashboard by Pixelz
    U K U R A N T I A P E L E M E N T
    
    
    ( F O N T, I C O N , B U T T O N ,
    S PA C I N G , D L L )
    

    View Slide

17. U I / U X
    I S E N G
    K E N A L A N A P L I K A S I D E S I G N A PA A J A ?
    

    View Slide

18. U I / U X
    I S E N G
    Shape: Rectangle / Oval / Ellipse
    
    
    Pen Tool
    
    
    Alignment
    
    
    Text
    K E N A L A N T O O L D E S I G N A PA A J A ?
    

    View Slide

19. U I / U X
    ATM
    
    
    Ekplorasi (Style, Trend, Warna, dll)
    
    
    Eksploitasi aplikasi design
    
    
    Ngikutin tutorial
    
    
    Belajar fundamental design dan istilah design
    
    
    Hunting referensi design
    W H AT T O D O
    H O B I
    

    View Slide

20. U I / U X
    H O B I
    Adaptasi berbagai style design
    
    
    Membiasakan kerja tepat
    
    
    Melatih muscle memory penggunaan tool design
    
    
    Paham cara membuat design yang “Benar”
    
    
    Mulailah bertanya “Why”
    W H AT T O K N O W F R O M E K S P L O R A S I D A N F U N D A M E N TA L D E S I G N
    

    View Slide

21. Starbeat Header Illustration - Follow The Star by OWW
    Email Client Dashboard by Sulton hand
    A DA P TA S I B E R B AG A I STY L E D E S I G N
    

    View Slide

22. Memulai menjadi UI Designer — Bagian 2, Menyertakan Alasan by Dwinawan (Medium)
    W H Y ?
    Ada dua inputan tanggal,
    tapi kenapa beda ya?
    
    
    Padahal kan sama-sama
    memilih tanggal.
    

    View Slide

23. Adobe Photoshop Tools Common Tools
    M E L AT I H M U S C L E M E M O RY P E N G G U N A A N T O O L D E S I G N
    

    View Slide

24. U I / U X
    Bangun portfolio dan kualitas dulu, bukan hargamu
    
    
    Mencoba kompetisi design online, jualan stockart
    
    
    Ekplorasi (Style, Trend, Warna, dll)
    
    
    Rajin belajar ilmu design (Artikel, study case, dll)
    
    
    Selalu tanya “Why”
    
    
    Kerja cepat dan rapi (karena terbiasa kerja tepat)
    
    
    Love what you do
    
    
    Time management
    
    
    Jangan cepat puas, Terbuka untuk di kritik (Feedback)
    W H AT T O D O
    F R E E L A N C E D E S I G N E R
    

    View Slide

25. View Slide

26. View Slide

27. U I / U X
    Memahami standar suatu design (size, layout, dll)
    
    
    Wawasan luas = project mengalir
    
    
    Membangun komunikasi dengan customer
    
    
    Deliver what customer need
    W H AT T O K N O W F R O M K E E P L E A R N I N G D A N F E E D B A C K
    F R E E L A N C E D E S I G N E R
    

    View Slide

28. D E S I G N S TA N D A R D F O R
    G O O G L E M AT E R I A L A N D
    I O S
    

    View Slide

29. U I / U X
    Understand the problem
    
    
    Give suggestion
    
    
    Problem solver
    
    
    Give “WoW” factor
    
    
    On time delivery
    
    
    Keep learning
    W H AT T O D O
    P R O D E S I G N E R
    

    View Slide

30. View Slide

31. View Slide

32. W H AT M U S T D O ?
    Iseng Designer
    
    
    Hobi Designer
    
    
    Freelance Designer
    
    
    Pro Designer
    Practice and Learn
    
    
    Practice and Learn
    
    
    Practice and Learn
    
    
    Practice and Learn
    

    View Slide