The document discusses how to balance good user interface (UI) design with website speed. It provides tips for speeding up the frontend and backend development processes such as breaking work into small parts, using frameworks and libraries, and optimizing images, JavaScript, CSS and other website resources. When facing errors, the document recommends doing thorough testing across browsers, devices, and operating systems. It also suggests getting familiar with design patterns and finding mentors when feeling stuck on work. The key message is that good design and speed can be achieved by following optimization best practices.

1. UI vs. SPEED
Good UI, Provide Good Speed
Jumat, 31 Januari 2020 | Ngalup Coworking Space
#YangPentingYakin }{acktheraphy/> 03

3. 2013
Tiket.com
Frontend Engineer
2000
Indo.Net
Web Designer
2002
Gracia Design
Graphic Designer
2006
Detail Adv
Utero Adv
Jade
Indopratama
Graphic Designer
2007
iMMediaVisi
Web Designer
2008
iCreativeLabs
Frontend Developer
2009
LP3I
Lecturer
2011
PhaseDev
Frontend Developer
Moch. Zamroni
@pakzam

4. 1. Bagaimana mempercepat proses backend maupun frontend?
2. Cara apa yang digunakan untuk mengatasi error?
3. Cara temukan insight baru ketika merasa stuck dalam pekerjaan?
4. Buat Design bagus tapi ga takut lemot website?
5. Tools apa aja yg digunakan?
Caesario Prima Bahari
Marketing Communication Manager
at Ngalup Coworking Space

5. 1. Bagaimana
mempercepat proses
backend maupun
frontend?

6. Speed Up Web
Development
Process

7. Plan first
Code later

8. The Design Thinking Process

9. Google Design Sprint Process

10. Crazy
Eight
Brainstorming

11. Kanban Boards

12. 1. Break down into
small parts
2. Don’t try to a write
perfect
3. Don’t over-plan
4. Use apps

13. Use The Right
Technology

14. 1. Frameworks
2. Libraries
3. Extension
languages
4. Plugins

15. Pick The Right Tools

16. 1. Use code editors or
powerful IDEs
(Integrated
Development
Environment)
2. Use tools where
you can

17. Improve Quality of Code

18. 1. Use functions, loops,
modules, etc.
2. Create scripts for code
generation
3. Use custom code snippets
4. Simply copy and paste
whenever necessary
5. Unit testing

19. Design
System
Guidelines

20. 1. Pair program with a
colleague / mentors
2. Stay healthy
3. Enjoy your work

21. Speed Page
Load Time
Page Speed

22. Optimize
Images

23. 1. 72 DPI
2. JPG vs GIF vs PNG
3. LazyLoad Images
4. Responsive
5. Correct Dimension
6. Use CDN

24. Optimize
JavaScript

25. 1. Remove unused
code
2. Minify & compress
3. Server modern
code to modern
browser

26. Optimize
CSS

27. 1. Minify CSS
2. Don’t use import
3. Critical vs.
non-critical CSS

28. Optimize
Third-party Resource

29. 1. Not authored by
you
2. Served from
third-party servers

30. Optimize
Web Fonts

31. 1. Default OS font
2. Max 2 fonts
3. Use Google fonts

32. 1. Use a good host
2. Use reliable CMS
3. Use good themes
4. Remove unneeded
plugins
5. Fix all broken link

33. 2. Cara apa yang
digunakan untuk
mengatasi error?

34. 1. Do the best 100%
2. Work according to
design system
__
3. Inspect Element
4. Cross-browser
5. Cross-device
6. Cross-OS
7. Sabar

35. 3. Cara temukan insight
baru ketika merasa
stuck dalam pekerjaan?

36. 1. Get familiar with the UI/UX
design patterns
2. Train your eye for good design
3. Learn by copying top designer
4. Apply what you’ve learned
5. Practice make perfect
6. Find a mentor
7. Do good work and share with
people

37. 4. Buat design bagus tapi
ga takut lemot website?

38. Just Do it

39. 5. Tools apa aja yang
digunakan?

40. Slack
Jira / Trello
Adobe XD / Sketch / Figma
Zeplin
Firefox / Chrome / Safari
Google Pagespeed Insight
Sublime Text / xCode / Visual Studio
Sass / Less
WordPress
Vagrant

41. 6. Good UI,
Provide Good Speed?

42. Thank You
Moch. Zamroni
pakzam@gmail.com
medium.com/@pakzam