UI UX Summarize

ringkasan.md

Pardon me for the paper that isn't well formed. Please feel free to add additional information.

default setup UI UX design system guideline:

• typography | max 2 font style (common base style combination are serif (for the content) and sans-serif (for the heading/title)
• color scheme & color theory like gradient | max ?
• icon | max 1 style icon, pick your best!
• consistent components property like:
  • rounded in the shape like card
  • size of headline, content, and etc...

important things (principle?) in design system are:

• consistency
• ...

terminology/istilah pada ui uex:

• design sprint | alur dari sebuah proses desain?
• visual hierarcy | hierarki/urutan komponen yang disort berdasarkan prioritas komponen yang butuh perhatian besar dari user/klien yang mengunjungi site - sampai komponen yang tidak terlalu membutuhkan perhatian user atau hanya sekedar pemanis/semantic? :v ya inti nya untuk menarik fokus pengguna ke elemen/komponen tertentu
• accent design (emphasize/penekanan) berguna untuk menekankan suatu komponen | mungkin berhubungan dengan visual hierarcy?

other theory that support design system:

• golden ratio:
  • layouting
  • sizing:
    • font size
• variable indicator/factor on the visual hierarchy:
  • white space / negative space (grid can improve this aspect)
  • contrast
  • shadow
  • font size
  • font weight
  • transition dapat digunakan pada sebuah state/keadaan (like on hover, etc...) yang memenuhi conditional tertentu
  • animation (kalau like on click biasanya animasi, karena transisinya terdiri dari beberapa frame)

design system is also have maintainability on team work:

- data token

quote:

• ⬆️ it's all about principle | accessibility guideline
• design have two side, objective and subjective! it's all about preference | itu dapat membatasi kreatifitas anda jika terlalu terpaku pada sebuah object (like a golden ratio rule) - cited from the reference below, in video: golden ratio with figma

pro tip, "use figma plugin for your life hack!":

• Stark | rate or guide your accessibility and readability automatically!
• Foundation: Color Generator | automatic generate color scheme for your design system!
• typescale | generate typography with golden ratio!

main/core figma concept that very helpful to speedup your design:

• variant components
• auto layout
• shortcut cheatsheet
• ruler
• grid

reference:

• golden ratio with figma plugin
• Best design system examples, most top standard of design system that can be your guideline

perlu diingat, bahwa ini hanyalah ringkasan keyword-keyword yang menurut saya penting, anda dapat mengekstrak ringkasan ini dengan menggunakan search engine seperti google tetap semangat belajar ges! 🔥