Rancangan

Multimedia
Berbasis WEB
User Interface (Antarmuka
Pengguna)
User Interface adalah bagian visual dari website, aplikasi software atau
device hardware yang memastikan bagaimana seorang user berinteraksi
dengan aplikasi atau website tersebut serta bagaimana informasi
ditampilkan dilayar nya. User Interface sendiri menggabungkan konsep
design visual, design interaksi dan infrastruktur informasi
Tujuan Pembuatan User
Interface
Memudahkan Input Data Masukan Oleh User
Membuat Program Menjadi Menarik
Menampilkan hasil pemrosesan data oleh program
Memudahkan pembacaan data yang dihasilkan oleh program
Efisiensi kerja yang dilakukan oleh user
Memperkecil kesalahan masukan data yang dilakukan oleh user
Manfaat Antar Muka
(Interface) pengguna
Manfaat User Interface untuk menghubungkan atau penterjemah
informasi antara pengguna dengan system operasi, sehingga computer
dapat digunakan. Dengan demikian, user interface bisa juga diartikan
sebagai mekanisme inter-relasi atau integrasi total dari perangkat keras
dan lunak yang membentuk pengalaman bekomputer. Use interface dari
sisi software bias berbentuk Graphical User Interface (GUI) atau
Command Line Interfae (CLI), sedangkan dari sisi hardware bias
berbentuk Aplle Desktop Bus (ADB), USB, dan fire wire.
FLOWCHART (Bagan Alir)
Flowchart ( Bagan Alir ) adalah bagan (chart) yang menunjukkan alir
(flow) di dalam program atau prosedur sistem secara logika. Bagan alir
(flowchart) digunakan terutama untuk alat bantu komunikasi dan untuk
dokumentasi. Misal nya sebagai sistem informasi perpustakaan,
penggajian karyawan, sistem pergudangan dll.
Jenis Jenis Flowchart
System Flowchart

System flowchart dapat didefinisikan sebagai bagan yang menunjukkan

arus pekerjaan secara keseluruhan dari sistem. Bagan ini menjelaskan
urut-urutan dari prosedur-prosedur yang ada di dalam sistem. Bagan alir
sistem menunjukkan apa yang dikerjakan di sistem.
Document Flowchart
Bagan alir dokumen (document flowchart) atau disebut juga bagan alir
formulir (form flowchart) atau paperwork flowchart merupakan bagan
alir yang menunjukkan arus dari laporan dan formulir termasuk
tembusan-tembusannya.

Schematic Flowchart
Bagan alir skematik (schematic flowchart) merupakan bagan alir yang
mirip dengan bagan alir sistem, yaitu untuk menggambarkan prosedur
di dalam sistem. Perbedaannya adalah, bagan alir skematik selain
menggunakan simbol-simbol bagan alir sistem, juga menggunakan
gambar-gambar komputer dan peralatan lainnya yang digunakan.
Program Flowchart
Bagan alir program (program flowchart) merupakan bagan yang
menjelaskan secara rinci langkah-langkah dari proses program. Bagan alir
program dapat terdiri dari dua macam, yaitu bagan alir logika program
(program logic flowchart) dan bagan alir program komputer terinci
(detailed computer program flowchart). Bagan alir logika program
digunakan untuk menggambarkan tiap-tiap langkah di dalam program
komputer secara logika. Bagan alat- logika program ini dipersiapkan oleh
analis sistem. Bagan alir program komputer terinci (detailed computer
program flow-chart) digunakan untuk menggambarkan instruksi-instruksi
program komputer secara terinci. Bagan alir ini dipersiapkan oleh
pemrograman.

Process Flowchart
Bagan alir proses (process flowchart) merupakan bagan alir yang banyak
digunakan di teknik industri. Bagan alir ini juga berguna bagi analis sistem
untuk menggambarkan proses dalam suatu prosedur.
Simbol – Simbol Flowchart
Contoh Flowchart

Flowchart
Menu Pertama
Contoh Flowchart

Submenu
Program
(Pelanggan)
Contoh Flowchart

Submenu
Program (Buku)
Contoh Flowchart

Submenu
Program (Sewa)
Tahapan Dalam Pembuatan User Interface
Wireframe
Wireframe merupakan sebuah sketsa kasar tampilan aplikasi atau website. Biasanya
digunakan untuk menyusun tata letak awal dalam suatu desain. Wireframe ini bisa
dicoret-coret tangan atau menggunakan tools atau aplikasi khusus bikin wireframe.
Biasanya wireframe dibuat dengan warna hitam putih yang lebih menekankan isi dari
kontennya.
Mockup
Mockup memberikan gambaran secara detail sebelum produk dibuat dengan
menyampaikan aspek desain visual, termasuk gambar, warna, dan tipografi.
Mockup dapat mengorganisir detail dari proyek, menerjemahkan ide ke dalam
bahasa yang dapat dimengerti stakeholders, menyampaikan ide kepada
anggota tim, implementasi desain, dan melihat perspektif user. Mockup
bersifat statis dan tidak bisa dioperasikan.
Prototype
Prototype adalah sebuah simulasi interaksi antara pengguna dan tampilan
(interface) dimana user atau pengguna dapat melihat dan berinteraksi dengan
user interface secara langsung. Mungkin tidak tampak persis seperti produk
akhir, tetapi mendekati desain produk real-nya.