Logo

UX Design

KD 2.1 – Frame & Artboard

01 / 08
Modul Pembelajaran

Frame & Artboard
Aplikasi Mobile

Pelajari cara berpikir seperti seorang UX Designer. Fokus pada interaksi, alur, dan pengalaman pengguna.

Pendahuluan

Mindset UX Designer

Fokus kita adalah pada bagaimana pengguna berinteraksi, bukan sekadar keindahan visual.

UX vs UI

UX (User Experience)

Bagaimana aplikasi bekerja, alur, logika, dan kemudahan penggunaan.

UI (User Interface)

Bagaimana aplikasi terlihat, warna, tipografi, dan estetika visual.

Modul ini fokus 100% pada UX

Frame & Artboard

Wadah utama tempat kita menyusun elemen desain dan merencanakan interaksi.

Frame

Wadah (container) yang merepresentasikan satu layar aplikasi. Berguna untuk merencanakan struktur informasi dan hierarki.

  • Struktur Informasi
  • Hierarki Konten
  • Alur Interaksi

Artboard

Istilah umum area kerja. Di Figma, Frame = Artboard. Berfungsi untuk konsistensi ukuran dan visualisasi flow.

  • Konsistensi Ukuran
  • Visualisasi Alur
  • Testing Prototype

Jenis Layar & Fungsinya

Layar Login

Tujuan UX

  • Akses aman & cepat
  • Opsi recovery password

Elemen Kunci

Input Username Input Password Tombol Masuk

Flow Antar Layar

Splash Login Beranda Detail

Prinsip Flow:

Logis Urutan masuk akal
Efisien Tanpa langkah sia-sia
Jelas Posisi user jelas
Reversible Bisa kembali

Ukuran Layar

Android

360 x 800 px Recommended

Ukuran paling umum dan aman untuk belajar.

iOS

375 x 812 px

iPhone X / 11 Pro / 12 Mini.

Kenapa penting? Agar konten tidak terpotong & area sentuh jempol (min 44px) terpenuhi.

Panduan Wireframe

Sketsa kasar fokus pada struktur & fungsi.

Harus (Do's)

  • Hitam Putih (Grayscale)
  • Kotak untuk placeholder gambar
  • Garis untuk representasi teks
  • Fokus struktur layout
IMG PLACEHOLDER
ACTION BUTTON
WIREFRAME EXAMPLE

Jangan (Don'ts)

  • Menggunakan warna warni
  • Gambar detail / foto asli
  • Font dekoratif berlebihan
  • Terlalu fokus estetika

Tugas Individu

Buatlah wireframe aplikasi mobile (5 Layar)

Daftar Layar

1. Splash Screen Logo App
2. Login Input & Button
3. Beranda List & Nav
4. Detail Visual & Indo
5. Profil Info User

Ketentuan File

  • • Ukuran Frame: 360 x 800 px
  • • Warna: Hitam & Putih Saja
  • • Format: PDF / PNG
  • • Nama File: Tugas_Wireframe_[Nama]

Penilaian Utama

Kelengkapan 5 layar, hierarki jelas, & fungsi UX yang benar.

Terima Kasih

"UX Design bukan tentang membuat aplikasi yang cantik, tapi membuat aplikasi yang mudah digunakan."

Menu Utama