Interaksi Manusia dan

Komputer v2
Ryan Zulham Ramadhani, S.Kom, M.Kom
Membuat dokumen
requirement dari sebuah
product digital
Apa itu Product Requirement
Document (PRD)?
Apa itu Product
Requirement Document ?
● Dokumen yang digunakan untuk menjelaskan kebutuhan dari
produk digital yang kita akan buat
● Dokumen ini berisi penjelasan dari hasil explore atau research
kita sebelum membuat sebuah produk digital
● Dokumen ini bisa digunakan sebagai alat komunikasi antara
team produk, desain, bisnis, engineer bahkan Stakeholder
(management C-Level)
Apa yang harus dilakukan
sebelum membuat PRD?
Step by Step sebelum buat PRD
● Mengerti tujuan produk yang akan dibuat
● Mengerti goal dari bisnis
● Mengerti persona dari pengguna produk kalian
● Mengerti permasalahan yang dihadapi pengguna
● Mengerti dan menjelaskan use case dari pengguna produk
kalian
Struktur Ideal isi dari sebuah
PRD (Product Requirement Document)
Tools apa yang digunakan untuk membuat PRD ?
Contoh PRD
● Menggunakan Notion
● Menggunakan Google Doc
Wireframe
dalam desain software
Wireframe Adalah
● Sebuah wireframe adalah struktur dasar dari sebuah software
● Dalam tahap pengembangan software, wireframe dapat
menetapkan fungsi (sliders, tabs, dan lainnya) tanpa warna atau
desain apapun, hanya structural guidelinesnya saja.
● Wireframing merupakan tahap yang penting dalam proses
perancangan antarmuka
Tujuan membuat wireframe
● Wireframe memungkinkan untuk mendefinisikan information
hierarchy dari desain, sehingga memudahkan kita dalam
perencanaan layout sesuai dengan rencana kita tentang
bagaimana user dapat memproses informasi.
● Wireframe membantu kita untuk mengorganisir dan
menyederhanakan elemen dan isi di dalam software.
Hal - hal yang harus dipertimbangkan, ketika
mendesain halaman suatu software
● Bagaimana halaman tersebut menyesuaikan dengan software
secara keseluruhan
● Apa isi (tulisan, gambar, video, dan lainnya), links, dan interaksi
yang dibutuhkan untuk memenuhi tujuan user dan bisnis
● Bagaimana semua elemen (isi, links, dan widgets) berhubungan
satu sama lain
● Bagaimana halaman tersebut akan terlihat
Wireframe harus menjelaskan beberapa hal,
diantaranya :
● Apa isi yang ada dalam halaman website atau aplikasi
● Bagaimana isi tersebut terorganisir dalam halaman website atau
aplikasi
● Isi mana yang paling penting dalam halaman website atau aplikasi
● Kemana user akan pergi dari halaman website atau aplikasi
● Dimana halaman ini dalam website atau aplikasi
● Bagaimana user akan bergerak di sekitar website atau aplikasi
Keuntungan dalam membuat wireframe

● Memberikan tampilan awal dari website atau aplikasi

● Menginspirasi desainer
● Memberikan gambaran jelas dari elemen tentang bagaimana
developer akan melakukan coding
● Memudahkan pengadaptasian dan memperlihatkan layout
dari banyak bagian dari website atau aplikasi
Banyak cara dalam pembuatan wireframe

● Hand Sketching
● Flowchart atau mind-mapping Software
● Web Wireframing or Prototyping Software
● Graphics Software
● HTML Wireframes
Hand Sketching
Flowchart atau mind-mapping Software

Salah satu contoh dari software ini adalah Visio.

Pilihan dari elemen yang sudah ada dalam software ini

memudahkan kamu untuk membuat flowchart dari wireframe
secara mudah.
Mind-mapping Wireframe Website
Web Wireframing or Prototyping Software

Contoh dari software ini adalah Balsamiq.

https://balsamiq.com/ - Balsamiq

Tools seperti ini dibuat khusus bertujuan untuk generate

wireframes
Hasil Wireframe
dari Balsamiq
Graphics Software

Graphics software seperti Photoshop atau Illustrator dapat

memberikan keuntungan,
yaitu wireframe yang sudah dibuat dapat langsung dikonversi
menjadi graphic mockup.
namun, kekurangannya adalah kamu harus membuat semua
elemennya sendiri.
Graphic Mockup
HTML Wireframes

Wireframe yang dibuat dengan tools ini sudah seperti website

sebenarnya.
Kamu bisa melakukan wireframe dengan code sebelum
menerapkan styles,
atau kamu dapat membuat wireframe yang sudah lengkap
dengan style, high-fidelity layout seperti desain akhir.
Very low-fidelity
HTML Wireframe
 high-fidelity
grayscale

HTML Wireframe