DESAIN

INTERAKT
IF
 mp o k 4
ma Ke lo
Na
ur h a ni
ad iah N
F i A sih
S ri B u d
Fitria
y a S a ri
Ma
.K h o ir
M
Randy
 3. PRINSIP
UTAMA
MENDESAIN
ANTAR MUKA

2. DESAIN
4. SKENARIO

5. DESAIN
NAVIGASI
1. DASAR
DESAIN
INTERAKTIF
 Apakah yang
an
dimaksud deng
tif?
Desain Interak Desain interaktif didefinisikan
sebagai bidang yang berorientasi
pengguna studi yang berfokus pada
komunikasi yang berarti media
melalui proses siklus dan kolaboratif
antara manusia dan teknologi. desain
interaktif yang sukses sederhananya
memiliki tujuan yang jelas, serta
tujuan yang kuat.
 Apakah yang Perbedaan Desain
Interaktif dan Design Interaksi?

Desain Interaktif Desain Interaksi

• Memberikan tujuan untuk Desain • Membuat perangkat yang
Interaksi melalui pengalaman yang dapat digunakan, bermanfaat
berarti
dan menyenangkan dengan
• Terdiri dari enam komponen utama
fokus pada efisiensi dan
termasuk pengendalian Pengguna,
kemampuan berraksi, waktu nyata perangkat keras intuitif
Interaksi, Keterhubungan, • Sebuah perpaduan dari
Personalisasi, dan Playfulness desain produk, ilmu
• Berfokus pada penggunaan dan komputer dan desain
pengalaman dari perangkat lunak komunikasi
• Mengambil dan memproses • Sebuah proses penyelesaian
informasi melalui permintaan masalah tertentu dilihat dari
responsif
kondisinya
• Bertindak atas informasi untuk
mengubahnya
• Tentang menghubungkan
• Konstanta perubahan informasi dan orang melalui berbagai
media, terlepas dari perubahan produk dan jasa
 DESAIN
Prinsip-prinsip desain
Prinsip-prinsip desain adalah untuk
membantu menggabungkan berbagai elemen
desain ke dalam tata letak yang baik. Ada
empat prinsip desain yaitu:
Keseimbangan ,Irama ,Penekanan ,Kesatuan .

Sumber ide dalam desain

Salah satu sumber ide adalah imajinasi.
Strategy yang membantu kita menggunakan
daya imajinasi, yaitu : Seleksi ,Alteration
(perubahan),Abstraksi,Spontanitas

Tantangan dalam membuat desain

Tantangan bisa diartikan yaitu suatu
rintangan atau suatu hambatan dalam
pembuatan desain. Tantangan dalam
membuat desain antara lain: Proses
pembuatan ,Metode merancang ,Produk yang
dihasilkan (rancangan),Serta disiplin ilmu
yang digunakan (desain).
Contoh desain dalam kehidupan sehari-hari

Gambar, Animasi, Kartun, Lucu

Contoh gambar desain :

PRINSIP UTAMA MENDESAIN ANTARMUKA
(INTERFACE)

1. User compatibility
2. Product compatibility
 it y
s k bil
Ta ti
.
3 m pa
co
4. Work flow
compatibility
 c y
5 . s i st en
C o n
6. Familiarity
 7. ty
lic i
p
Sim
8. Direct
manipulation
 trol
C on
9.
10. WYSIWYG
11. Flexibility
12. Responsiveness
 13. Invisible
Technology
Secara umum, user mempunyai keingintahuan sebuah kecanggihan
dari aplikasi yang digunakannya. Untuk itu aplikasi yang dibuat
hendaknya mempunyai kelebihan yang tersembunyi. Bisa saja
kelebihan itu berhubungan dengan sistem yang melingkupinya atau
bisa saja kecanggihan atau kelebihan itu tidak ada hubungannya.

Contoh: sebuah aplikasi mempunyai voice recognize sebagai media

inputan, pengolah kata yang dilengkapi dengan language
translator.
14. Rebotsness
15. Protection

16. Ease Of Learning And

Ease Of Use
• Kemudahan dalam mengoperasikan software hanya
dengan memandangi atau belajar beberapa jam saja.

• Kemudahan dalam memahami icon, menu-menu, alur

data software, dsb.
 SKENARIO
• Skenario dalam bab ini adalah suatu uraian
interaksi manusia dengan mesin yang membantu
proses desain berfokus pada keperluan user yang
berbeda sehingga dapat digunakan untuk aktivitas
desain. Skenario dapat membantu membatasi
keruwetan pada lapisan teknologi.

• Untuk menuliskan skenario dibutuhkan dasar

pemahaman mengenai tugas yang mendukung
sistem dan pengguna. Skenario dapat diambil dari
hasil pengumpulan data selama proses penelitian
berlangsung. Jika tidak punya akses terhadap data,
dapat ditulis berdasarkan pengetahuan terdahulu
atau dibayangkan. Skenario akan dibaca oleh user
dan akan diberi masukan sehingga berguna untuk
mengambil keputusan dan pendesaianan interface
suatu sistem.
NAVIGASI
A. REVIEW RANCANGAN TAMPILAN

1. RANCANGAN TAMPILAN
BERBASIS TEKS

Contoh : Command Prompt

 2. RANCANGAN
TAMPILAN BERBASIS
GRAFIS

Contoh : Visual Basic

Definisi Visual Basic

Microsoft Visual Basic (sering disingkat sebagai VB saja) merupakan sebuah

bahasa pemrograman yang menawarkan Integrated Development
Environment(IDE) visual untuk membuatprogramperangkat lunak berbasissistem
operasiMicrosoft Windowsdengan menggunakan model pemrograman (COM).

Visual Basic merupakan turunan bahasa pemrograman BASIC dan menawarkan

pengembangan perangkat lunak komputer berbasis grafik dengan cepat.
Beberapa bahasa skrip seperti Visual Basic for
Applications (VBA) dan Visual Basic Scripting Edition
(VBScript), mirip seperti halnya Visual Basic, tetapi cara
kerjanya yang berbeda.

Para programmer dapat membangun aplikasi dengan

menggunakan komponen-komponen yang disediakan
oleh Microsoft Visual Basic Program-program yang
ditulis dengan Visual Basic juga dapat menggunakan
Windows API, tapi membutuhkan deklarasi fungsi luar
tambahan.
Contoh Tampilan
Menu
Navigasi Pada VB
B. Menu Navigasi Pada Website

Navigasi adalah petunjuk posisi dan arah perjalanan. Di dalam dunia

web, navigasi dianggap penting agar user yang sedang berada di
dalam halaman tertentu tidak tersesat dan mudah menemukan
halaman-halaman lain dalam website Anda.

Menu adalah bagian dari website yang berisi link-link utama yang
mengarah pada halaman tertentu di sebuah website. Biasanya, pada
sebuah website, navigasi tertampil pada menu dan link yang
terstruktur.

Menu navigasi adalah sebuah fasilitas yang diberikan oleh si pemilik

situs dimana didalamnya berisi sekumpulan link-link penting. Menu
navigasi juga berfungsi sebagai pemandu kepada pengunjung agar
dapatlebih mudah dalam menentukan kategori yang diinginkan tanpa
harus bersusah payah mencarinya.
• FUNGSI MENU
NAVIGASI
• 1.Mempercepat Untuk
Mendapatkan Sitelink. Dengan
adanya menu navigasi maka
blog/web semakin cepat
mendapatkan sitelink karena
sebagian dari beberapa sitelinknya
berasal dari menu navigasi.
• 2.Dinilai Sebagai Web/Blog
Profesional.. Mengapa dinilai
sebagai profesional ? . karena kita
telah menyusun rapih artikel
artikel kita dan telah mengatur
sekat antara post 1 dan post lainya
serta kita telah mengatur web kita
menjadi user friendly karena
dengan mudah para visitor untuk
menjelajahi blog kita dan dengan
mudah mengunggah daya tarik
pengunjung.
 Contoh Website yang
Memiliki Menu Navigasi
Lengkap
Menu Navigasi terletak pada bagian Header atau atas
daripada situs PLUG AND PLAY tersebut.
Home/ beranda/ halaman
depan. Navigasi menu
"Home/beranda bisa
dikatakan sebagai menu
paling penting karena
saat mengunjungi suatu
website home gunanya
untuk kembali pada
halaman utama.
About atau About Us
yaitu tentang. Daftar
menu "About/tentang"
ini menggambarkan
secara umum dan
khusus sebuah blog
atau web.
Services. Menu ini
berisi apa saja
layanan yang
diberikan oleh
website
Portfolio web biasanya
metode utama untuk
menunjukkan kualitas,
kualifikasi dan
kesungguhan ,
diperlukan untuk
ditampilkan pada
halaman khusus, dan
terus dikembangkan
sepanjang karir
seorang web desainer.
Penyelenggara
platform menyediakan
pengembang
perangkat luna
kdengan kesepakatan
serangkaian kode
logika yang akan
berjalan secara
konsisten sepanjang
platform ini berjalan di
atas platform yang
lainnya
News berfungsi
juga sebagai
notifikasi atau
pemberitahuan
mengenai website
tersebut.
Partners berfungsi
untuk
menampilkan apa-
apa saja yang
menjadi mitra
kerja sebuah
website yang kita
kunjungi.
Contact Pada Navigasi menu
ini berisi tentang alamat admin
blog/web, bisa berupa no telp,
alamat rumah, serta e-mail.
Fungsinya sebagai media
komunikasi duaarah kepada
pengunjung manakala ingin
berkonsultasi atau
menanyakan sesuatu yang
dirasa belum faham terkait
artikel yang terdapat dalam
blog kita. Daftar navigasi
menu ini bisa juga
diintegrasikankedalam menu
about.
Any Ques
ti ons ?