Materi Pembelajaran

Unit 8
Membuat Mockup / Prototipe / Sketsa / Web Design

A. Pengertian Mockup ?

Dalam proses desain dan pengembangan produk, mockup adalah visualisasi sebuah konsep
desain. bentuk mockup adalah gambaran mid-fidelity ataupun high-fidelity yang menggambarkan
pilihan warna desain, layout, tipografi, iconography, visual navigasi, dan keseluruhan tampilan
produk yang didesain. Ada 4 macam mock up yang kita kenal dalam dunia design yaitu :

1. Sketsa
Sketsa adalah gambar yang bersifat cepat yang menampilkan garis-garis besarnya
saja, yang tidak dimaksudkan sebagai hasil akhir dari suatu karya. Sketsa juga dapat
diartikan sebagai rancangan, denah, bagan dan semacamnya. Pembuatan sketsa
tergolong murah dan cepat, sehingga segera mendapatkan umpan balik dari hasil uji
public.

Sketsa atau Mock up dengan menggunakan gambar / ilustrasi

2. Storyboard
Storyboard adalah suatu sketsa gambar yang disusun secara berurutan sesuai naskah
cerita, dengan storyboard maka pembuat cerita dapat menyampaikan ide cerita secara
lebih mudah kepada orang lain. Storyboard juga dapat diartikan sebagai naskah yang
disajikan dalam bentuk sketsa gambar yang berurutan,
 berguna untuk memudahkan pembuatan alur cerita maupun pengambilan gambar.

Contoh Storyboard
3. Prototipe 1 : 1
Prototipe dengan skala 1 banding 1 merupaka model yang dinuat menyerupai hasil
akhirnya, dengan ukuran, bentuk dan bahan yang sudah menyerupai, namun
dikategorikan sebagai prototype awal karena masih terbukanya ruang untuk perbaikan
jika dirasa masih ada yang kurang saat uji coba public. Setelah membuat sketsa dan
storyboard, siswa dapat membuat prototype final ini.

Pembuatan Prototipe 1:1

 4. Mock up Website / Design Web
Mockup website atau juga bias dikenal dengan design web juga sangat penting dalam
memasarkan sebuah produk, karena dalam pengerjaannya harus sesuai dengan apa yg
diharapkan. Agar ketika orang memasuki website tidak bingung atau gampang
dimengerti.

B. Keuntungan Mockup

1. Mempermudah stakeholder
Mockup menggunakan gambaran high-fidelity, yaitu rencana desain yang sudah menampilkan
informasi secara rinci dan menunjukkan dengan jelas bagaimana sebuah situs atau aplikasi akan
dibuat.
Oleh karena itu, mockup adalah cara sederhana agar stakeholder dapat dengan mudah melihat dan
memahami produk final yang akan dibuat.
Stakeholder juga bisa memberikan masukan dan kritik mengenai desain tersebut sebelum melaju
ke proses selanjutnya.
2. Memberi perspektif realistis
Dengan rancangan mockup, desainer UI dan UX dapat melihat bagaimana semua elemen yang
telah dirancang bekerja serealistis mungkin menyerupai produk final yang direncanakan.
Masalah yang mungkin timbul ketika produk digunakan dapat terlihat dengan desain mockup.
Hal ini sulit diketahui hanya dengan desain di atas kertas seperti pemilihan warna yang kurang
padu, kesulitan navigasi, dan lain-lain.
3. Mempermudah perbaikan
Akan lebih mudah bagi desainer untuk memperbaiki kesalahan atau kekurangan pada desain
sebelum desain tersebut dilanjutkan ke tahap coding.
Ketika sudah masuk tahap coding, perbaikan akan lebih rumit.
Developer web akan dapat mengerjakan coding untuk desain dengan leluasa jika tahu bahwa
desain yang mereka buat kodenya telah benar-benar final

4. Hemat anggaran
Dengan memastikan tidak ada kesalahan lagi saat desain sudah difinalisasi, biaya produksi akan
lebih murah dibanding harus memperbaiki desain dan mengulang coding dari awal jika
melakukan proses desain produk tanpa mockup.
Uang yang dihemat berkat perencanaan yang baik ini bisa dimanfaatkan untuk sektor produksi
lainnya.

C. Mengapa Mockup Penting?

1. Perkiraan waktu pengembangan

Mockup adalah tahap penting agar front-end developer tidak kesulitan untuk memperkirakan
berapa lama proses pengembangan produk akan berjalan.
Meskipun berupa gambaran statis, tetapi mockup dapat menjelaskan bagian-bagian yang akan
didesain bergerak atau menggunakan animasi.
Dibanding langsung masuk ke proses coding, akan lebih cepat jika menggunakan mockup terlebih
dahulu sehingga developer bisa tahu berapa waktu yang dibutuhkan untuk menerjemahkan
desain mockup menjadi produk nyata.

2. Coding HTML
Para front-end developer membutuhkan mockup untuk mengetahui warna, bentuk, font, serta
elemen lain dalam desain yang diinginkan dan menterjemahkannya ke dalam kode.
Tanpa mockup, akan sulit untuk mengetahui itu semua dan proses perancangan akan menjadi
lebih lama.
3. Mendatangkan investor
Mockup adalah cara awal agar sebuah rancangan produk dilirik investor
Tanpa desain mockup yang bagus dan rinci, investor tidak akan tahu seberapa besar potensi situs
atau aplikasi yang kamu rencanakan, dan tentu saja akan sulit untuk merealisasikan sebuah
proyek tanpa investor dan dana yang cukup.
4. Kenyamanan pengguna
Situs atau aplikasi buatanmu harus terlihat bagus. Selain itu, pengguna harus bisa menemukan
apa yang mereka cari dengan mudah dan bernavigasi tanpa kesulitan.
Tahap paling mudah untuk mengidentifikasi kebutuhan pengguna dan keselarasan fitur serta
desain yang dirancang adalah mockup, oleh karena itu mockup sangatlah penting.

Anatomi Mockup
Anatomi mockup adalah beberapa aspek yang perlu diperhatikan saat membuat mockup sebuah
desain UI/UX.
ini adalah contoh mockup dan bagian-bagiannya.
1. Layout konten
Pikirkan bagaimana konten akan ditampilkan dalam desain mockup, contohnya adalah
menimbang antara F-pattern, Z-pattern, card, atau teks.
Selain itu, penting juga untuk memikirkan ukuran setiap bagian konten pada tampilan antarmuka
dan berapa banyak yang ingin ditampilkan di layar pada satu waktu.
2. Kontras
Kontras tampilan antarmuka sebuah situs atau aplikasi penting untuk dipikirkan untuk
mendukung kenyamanan pengguna.
Tanpa kontras yang baik, pengguna akan kesulitan membaca teks yang ditampilkan.
Kamu bisa menggunakan color contrast tool untuk menguji seberapa mudah tulisan atau teks di
tampilan situs atau aplikasi dapat dibaca.
3. Warna
Warna bisa memengaruhi perasaan pengguna saat berada di situs atau aplikasimu.
Oleh karena itu, penting untuk benar-benar memikirkan warna yang tepat untuk produk yang
kamu kembangkan agar bisa merepresentasikan suasana yang ingin diciptakan.
Penentuan warna dalam proses mockup adalah aspek penting untuk memastikan kenyamanan
pengguna.
4. Tipografi
Dengan mockup, kamu bisa bebas mencoba banyak tipe font, beragam ukuran, style, spacing, dan
lain-lain untuk mendapatkan tampilan yang paling sesuai.

5. Spacing
Space atau ruang kosong yang ada di desain mockup bukan berarti harus diisi. Ruang kosong
justru adalah elemen desain yang bagus.
Sebuah desain harus mempunyai ruangan kosong untuk memudahkan pengguna membaca konten
yang ditampilkan sehingga tidak lelah membaca apa yang ada di tampilan antarmuka.
6. Navigasi
Pengguna harus dapat dengan mudah menjelajahi situs maupun aplikasi yang kamu kembangkan,
maka dari itu perancangan navigasi menjadi sangat penting.
Rancang navigasi yang sederhana untuk dipahami semua orang, padukan warna, tipografi,
dan spacing untuk membuat pengguna dapat berinteraksi dengan semua elemen lebih baik.
ESSAY
1. Apa yg dimaksud dengan mock up?
2. Ada berapa macam mockup sebutkan dan jelaskan ?
3. Apa contoh dari prototipe produk multimedia, Jelaskan?
4. Langkah pembuatan mockup?
5. Apa keuntungan mockup?