Pertemuan 7

1. Penjelasan tentang tools dalam memuat prototype produk

2. Diskusi Video Pembelajaran
Prototype
 Prototype

Terdapat beberpa Istilah dalam UI/UX Designer diantaranya adalah

sebagai berikut:
1. Wireframe
2. Mockup
3. Prototype

Adapun perbedaan wireframe, mockup dan prototype dapat dilihat

pada slide selanjutnya.
Wireframe
Wireframe adalah Kerangka dasar dari halaman / screen yang akan
dibuat oleh designer. Wireframe digunakan untuk menyusun layout,
navigasi dan organisir konten. Untuk membuat wireframe ini bisa
menggunakan alat gambar sederhana (Kertas & Spidol) atau
menggunakan tools (Balsamiq, Sketch, Figma Dll)
Mockup
Mockup adalah hasil akhir desain yang sudah berisi informasi (
gambar, warna, & tipografi ) dan bentuk elemen dengan tingkat
presisi tinggi. Untuk membuat hasil desain seolah-olah terlihat real
/ nyata. Untuk membuat mockup ini kamu bisa menggunakan tools
(Sketch, Figma, AdobeXD Dll).
Prototype

Prototype adalah Simulasi bagaimana user berinteraksi dengan

User Interface secara nyata. Menunjukkan cara kerja web / aplikasi
yang kita buat. Untuk membangun sebuah prototype kamu bisa
menggunakan tools ( Invision, Marvel, Figma, Adobe XD Dll).
Didalam dunia UI/UX ada istilah prototype. Prototype ini sangat
penting untuk diketahui oleh UI/UX Designer,
karena prototype sendiri selain untuk menguji jalan nya aplikasi
sebelum di develop, prototype juga bisa sebagai bahan untuk demo
ke client.

Prototype ada dua metode, yaitu:

1. Paper Prototyping
2. Digital Prototyping
Paper Prototyping, di dalam metode ini kertas menjadi alat
penting, dimana metode ini menggunakan kertas sebagai wadah
untuk desain. Biasanya butuh 1 kertas untuk 1 desain halaman dan
untuk melakukan perpindahan halaman dengan cara mengganti
kertas tersebut.
Digital Prototyping, metode ini tidak jauh beda dengan Paper Prototyping,
bedanya hanya di cara mengaplikasikan desain tidak menggunakan kertas,
melainkan sudah dengan Tools yang memang bisa di gunakan untuk
melakukan prototype. Beberapa Tools yang mendukung untuk
melakukan prototyping yaitu: Zeplin, Invision, Figma, Adobe XD, dll.
Tools untuk Membuat Prototype
Berikut adalah tools-tools untuk membuat
Prototype:

1. Figma
2. Balsamiq
3. Canva
4. Mockflow
5. Mockplus
6. Framebox
7. Cacoo
8. Wirefy
9. Proto.io
10. AdobeXD
11. InVision
Figma adalah salah satu software mockup atau prototype
website gratis yang bisa digunakan untuk melakukan
wireframing. Figma memberikan kemudahan bagi para web
designer yang ingin membuat mockup atau prototype website
secara Online.

Dengan figma dapat juga melakukan design website, dan

melalukan styling layout dengan mudah. Karena figma memiliki
menu yang sederhana, jadi web desiger awam pun bisa
menggunakan figma dengan mudah tanpa adanya kesulitan.
Balsamiq merupakan salah satu software mockupatau prototype
website paling populer, Alasan utamanya balsamiq Mockups adalah
softwate yang berbasis cloud, disertai dengan aplikasi desktop yang
memungkinkan designer dengan cepat dan mudah membuat
rancangan website.

Software ini sering digunakan untuk fokus pada pengembangan dan

pemecahan masalah UI yang lebih besar. Jadi designer bisa lebih
mudah dalam pengembangan user interface karena konten yang
dibuat di balsamiq mockups seperti dari gambaran tangan. Software
ini lebih berfokus pada pengembangan dan pemecahan masalah UI
yang lebih besar, dari pada pada perincian website.
Canva adalah salah satu software desain yang cukup populer, canva
menyediakan berbagai macam desain yang bisa kamu gunakan salah
satunya membuat desain protype web. Bahkan canva juga
menyediakan template desain sesuai kebutuhan yang bisa kamu edit
dan gunakan.

Canva memiliki asset gratis namun juga asset yang premium dan
berbayar, Namun tak perlu khawatir, Asset gratis yang disediakan oleh
canva sangat banyak. Didukung adanya template yang disediakan canva
kamu bisa melakukan mockup atau prototype website dengan mencari
inspirasi dari template yang sudah ada.
Mockflow adalah sebuah layanan yang memungkinkan untuk
membuat dan melakukan kolaborasi pada wireframes interaktif dan
prototipe UI untuk situs website dan aplikasi lainnya.

Sama halnya dengan Balsamiq, Mockflow adalah software desktop

lintas platform yang didukung oleh Adobe Air, sehingga designer bisa
membangun konsep User Interface dengan efisien. MockFlow juga
disediadakan fitur dalam 2 pilihan, yaitu free dan berbayar.
MockPlus adalah tools untuk wireframing yang menyediakan fasilitas
bagi para desainer membuat mockup situs web, aplikasi seluler, dll.
Software ini hadir dengan 3.000 lebih ikon dan 200 komponen yang bisa
digunakan untuk membuat mockup.

Dengan menggunakan Mockplus designer bisa melakukan sharing

project atau bisa dikatakan mendukung banyak pengguna yang bekerja
pada proyek yang sama. Cukup dengan satu klik untuk melakukan
sinkron proyek ke cloud dan hasil karya desainer yang berbeda akan
dapat digabungkan.
Cacoo adalah software yang bisa membantu untuk membuat mockup
website, Para desainer bisa membuat gambar rangka situs web yang
penerapannya pada desktop, atau bahkan pada smartphone.

Cacoo terbagi menjadi 2 versi, Versi berbayar dan versi gratis. Versi gratis
memungkinkan dalam membuat mockup website dan untuk ekpsor hasil
pembuatan mockup website hanya dalam format PNG saja.
Wirefy adalah software wireframing online yang dirancang dengan
ide khusus untuk merancang web dan pengembangan alat. Dengan
menggunakan wirefy designer bisa mempercepat proses desain
karena software ini menciptakan transisi yang lebih halus antara
Sketsabawalmdanmhasilmkerja.

Alur kerja dari platform yang sederhana inilah, Sehingga terdefinisi

dengan baik untuk memastikan bahwa UI dapat disatukan secara
cepat. Platform ini memiliki versi premium dan gratis, Versi gratis
memiliki semua alat yang diperlukan untuk membuat mockup dan
prototye website.
Proto.io adalah sebuah platform prototyping yang memang dirancang
khusus untuk mockup aplikasi mobile. Dengan platform ini kamu lebih
mudah dalam membuat mockup melalui media mobile. platform ini juga
akan memberikan kebebasan kepada designer untuk mengatur warna,
font, dan tata letak.

Proto.io sendiri sudah bisa digunakan pada banyak perangkat, Sperti

iPhone, iPad, Android dan sejumlah perangkat lainnya. Designer juga
bisa melakukan Project Sharing atau istilahnya berkolaborasi dengan
desainer lain.
Adobe XD difokuskan pada dua tab yaitu Design dan Prototype. Tab
Design menampilkan tool vektor dan teks sederhana, dan digunakan
untuk membuat desain. Tab Prototype adalah untuk melihat preview, dan
berbagi desain yang telah dibuat. Dengan Adobe, designer dapat
membuat prototype high-fidelity juga pada PC.

Adobe XD dibangun untuk memenuhi kebutuhan UX/UI designers,

dengan tool yang intuitif memberikan ketepatan dan performa yang
membuat tugas sehari-hari terasa mudah. Gunakan fitur hemat waktu
seperti Ulir Bergambar dan artboards yang fleksibel untuk menciptakan
segala sesuatu mulai dari wireframes kesetiaan rendah sampai prototype
interaktif sepenuhnya untuk layar dalam hitungan menit. tools ini
tersedia untuk Mac maupun Windows.
InVision merupakan produk Webby yang memberi UI/UX Designer
kebebasan untuk men-design, me-review, menguji dan membagikannya
dengan developer dan anggota tim lainnya. Keuntungan paling menonjol dari
produk ini yaitu terdapat fitur kolaborasi proyek, yang memungkinkan
semua user memberikan umpan balik, membuat catatan dan melihat
perubahan produk secara real time.

InVision juga menawarkan layanan lengkap untuk

membuat prototype untuk mobile, dengan demikian dapat mensimulasikan
fleksibilitas produk digital dan penggunaannya di ponsel. Tools ini tersedia
untuk Mac maupun Windows.
 Tugas Pertemuan 7
Diskusi Video Pembelajaran

1. Setiap kelompok mencari video yang sesuai dengan materi pada pertemuan 7
2. Setiap kelompok mendiskusikan video tersebut kepada dosen pengampu