Modul Praktikum Interaksi Manusia dan Komputer
PRAKTIKUM 1
Pengantar Design UI Melalui Figma
1. TUJUAN
▪ Mahasiswa dapat memahami apa itu ui dan figma
▪ Mahasiswa dapat mengetahui fitur – fitur dalam penggunaan figma
▪ Mahasiswa mampu menyelesaikan beberapa permasalahan menggunakan design dari
figma
2. DASAR TEORI
2.1 Apa itu UI
User interface atau UI adalah tampilan yang meliputi bentuk, warna, dan tulisan
yang didesain semenarik mungkin. Nah, karena user interface adalah tampilan sebuah
produk dilihat oleh pengguna, maka harus tampak menarik. Singkatnya, user interface
design itu harus diperhatikan.
Sebagai contoh, Anda pasti pernah melihat tampilan menu-menu aplikasi pada
smartphone Anda, bukan? Jika Anda membuka aplikasi Google Play Store, yang disebut
user interface adalah sebagai berikut:
Gambar 1. User interface dari Google PlayStore
Secara teknis, empat komponen dasar pembentuk user interface adalah:
• Tata letak – penempatan elemen UI yang digunakan
• Warna – warna dari desain antar muka secara umum
• Tipografi – kombinasi huruf yang digunakan di user interface
• Grafik – ikon yang digunakan sebagai ilustrasi penggunaan sistem
Jadi, tampilan UI dirancang dengan desain beberapa aspek di atas. Jadi, layout,
gambar logo, warna, dan typography itu penting. Dengan pemilihan yang tepat dapat
mempercantik tampilan aplikasi.
D3 Teknik Informatika - UNS Kampus Madiun
Modul Praktikum Interaksi Manusia dan Komputer
2.2 Figma
Figma adalah editor grafis vektor dan alat prototyping dengan berbasis web serta
fitur offline tambahan yang diaktifkan oleh aplikasi desktop untuk Mac OS dan Windows.
Aplikasi pendamping Figma Mirror untuk Android dan iOS memungkinkan untuk melihat
prototype Figma pada perangkat seluler. Rangkaian fitur Figma berfokus pada
penggunaan dalam antarmuka pengguna dan desain pengalaman pengguna dengan
penekanan pada kolaborasi waktu nyata (real- time).
Gambar 2. Tampilan Figma
Sederhananya, Figma adalah desain digital dan alat prototyping. Ini adalah aplikasi
desain UI dan UX yang dapat Anda gunakan untuk membuat situs web, aplikasi, atau
komponen antarmuka pengguna yang lebih kecil yang dapat diintegrasikan ke dalam
proyek lain. Dengan alat berbasis vektor yang hidup di cloud, Figma memungkinkan para
penggunanya untuk bekerja di mana saja dari browser. Cara ini termasuk alat zippy yang
dibuat untuk desain, pembuatan prototipe, kolaborasi, dan sistem desain organisasi.
3. LANGKAH PERCOBAAN
3.1. Mengunjungi Laman Figma
• Pergi ke halaman [Link]
D3 Teknik Informatika - UNS Kampus Madiun
Modul Praktikum Interaksi Manusia dan Komputer
• Login dengan menekan tombol Get Started
• Continue with google, lalu gunakan akun pribadi atau akun sso
• Maka tampilan Figma akan menjadi seperti berikut
• Eksplorasi tampilan dan fitur dari halaman awal figma
3.2. Mencari Refrensi Design
• Pergi ke halaman [Link]
D3 Teknik Informatika - UNS Kampus Madiun
Modul Praktikum Interaksi Manusia dan Komputer
• Search ide produk/web anda
• Carilah refrensi dari hasil design yang telah ada
4. LATIHAN MANDIRI
1. Buka [Link]
2. Buat akun di website Figma
3. Analisis apa itu Figma
4. Jelaskan fungsi dari platform Figma
5. Jelaskan semua informasi yang anda dapat melalui website Figma
6. Tentukan ide website dan aplikasi mobile serta lampirkan refrensi dari dribble
5. DEADLINE
Malam ini pukul 23.59
D3 Teknik Informatika - UNS Kampus Madiun