MAKALAH INTERAKSI MANUSIA KOMPUTER

Pembuatan Rancangan Program User Experience Design Mockup

Berbasis Web Food

Disusun Oleh:

1. Muhammad Bayu Faqih (17210474)

2. Firqi Argomasetyo (17211019)
3. Anjas Lasuci Prastia (17210378)
4. Syarifah Risyani (17210326)
5. Jesas Kristius Sihotang (17210969)
6. Aditya Putra (17210241)

Kelas : 17.4F.07

Dosen Pengajar : Susi Susilowati, M.Kom

PROGRAM STUDI S1 TEKNOLOGI INFORMASI

FAKULTAS TEKNIK & INFORMATIKA
UNIVERSITAS BINA SARANA INFORMATIKA

JAKARTA
2023
 KATA PENGANTAR

Puji dan Syukur kami panjatkan kehadirat Allah SWT, Tuhan Yang Maha Esa yang
melimpahkan rahmat-Nya, dan nikmat-Nya yang tiada batas karena atas kehendak-Nya kami
dapat menyelesaikan laporan ini tepat pada waktunya. Dalam laporan ini kami membahas
tentang Pembuatan Rancangan Program User Experience Design Mockup Berbasis Web
Food. Laporan ini dibuat dalam rangka memperdalam pemahaman tentang bagaimana User
menggunakan Software atau Aplikasi secara nyaman tanpa terjadinya kendala dan akan kami
bahas secara mendalam dalam laporan ini.

Semoga laporan ini dapat dipergunakan sebagai salah satu acuan, petunjuk maupun
pedoman bagi pembaca. Harapan kami semoga laporan ini dapat membantu menambah
pengetahuan bagi para pembaca.

Dalam kesempatan ini kami juga mengucapkan banyak terimakasih kepada Ibu Susi
Susilowati selaku Dosen Mata Kuliah Interaksi Manusia Komputer, terimakasih juga atas
kerja sama serta kekompakkan dari kelompok ini sehingga kita mampu menyelesaikan
makalah tentang Pembuatan Rancangan Program User Experience Design Mockup
Berbasis Web Food.

Kami menyadari masih banyak kekurangannya, oleh karena itu saya harapkan kepada
para pembaca untuk memberi masukan – masukan yang bersifat membangun untuk
kesempurnaan laporan ini. Sehingga kami dapat memperbaiki bentuk maupun isi laporan ini
agar kedepannya dapat lebih baik. Demikianlah laporan ini kami buat semoga memberikan
manfaat bagi semuanya.

Jakarta, 19 Juni 2023

Penulis

i
 DAFTAR ISI

SAMPUL DEPAN …………………………….. i

KATA PENGANTAR …………………………….. ii

DAFTAR ISI …………………………….. iii

Bab I PENDAHULUAN …………………………...... 1

1.1 Latar Belakang …………………………….. 1
1.2 Rumusan Masalah …………………………….. 1
1.3 Tujuan Pembuatan Makalah …………………………….. 2

Bab II RANCANGAN GAGASAN/KARYA …………………………..... 3

2.1 Penyusunan Konsep …………………………….. 3
2.2 Mock Up ……………………………..

Bab III PENUTUP …………………………......

3.1 Kesimpulan …………………………......
 ii

BAB I
PENDAHULUAN
1.1 Latar Belakang

Pernahkah anda menemukan aplikasi atau website dengan tampilan yang buruk dan
membosankan? Pastinya anda kesal tidak ingin melihat dan juga tidak mau
menggunakannya bukan?. Maka dari itu sebuah website atau aplikasi harus
memperhatikan tampilan User Interface (UI) dan User Experience (UX) agar
menciptakan kesan bagi pengguna saat melihatnya dan memberikan kenyamanan bagi
pengguna saat memakainya.

User Interface yaitu tampilan visual sebuah aplikasi atau website yang
menghubungkan system dengan pengguna (user). Sehingga dalam pembuatan dan
penataan tampilan harus diperhatikan dengan sangat baik seperti Tata letak, Warna,
Tipografi, Grafik, dll.

User Experience yaitu hasil dari interaksi setiap pengguna yang mengunjungi maupun
menggunakan aplikasi dan website. User Experience termasuk aspek penting dalam
pengembangan sebuah aplikasi atau website, hal ini sangat berpengaruh terhadap
kepuasan pengguna (user) melalui desain yang ditampilkan termasuk dari segi respons,
emosi, dan persepsi terhadap aplikasi atau website itu sendiri.

Maka dari itu berdasarkan latar belakang tersebut kami menganalisa dan membuat
Rancangan Program User Experience Design Mockup berbasis Web Food yang dibuat
menggunakan aplikasi figma, untuk mempermudah pengguna dalam menggunakan
website atau aplikasi yang ingin dikunjungi.
1.2 Rumusan Masalah

1. Apakah pengguna (user) mudah dalam menggunakan website tersebut.

2. Apakah pengguna (user) nyaman melihat tampilan website tersebut.
3. Bagaimana kepuasan pengguna (user) dalam menggunakan website tersebut.

1.3 Tujuan Pembuatan Makalah

Membantu pengguna (user) dalam memperoleh informasi dan tujuan dalam penggunaan
website, memberikan kemudahan, kenyamanan, serta kepuasan pengguna (user) dalam
menggunakan website secara efisien dan efektif, memberikan pengalaman yang baik dan
menyenangkan bagi para pengguna (user).

BAB II
RANCANGAN GAGASAN/KARYA

2.1 Penyusunan Konsep

Dalam Penyusunan konsep ini kami menyatukan ide-ide dari para anggota kelompok
untuk kemudian disatukan. Kami membuat sebuah rancangan dalam bentuk mock up
dengan aplikasi Figma sehingga akan mempermudah dalam prosespemilihan fitur
apa saja yang perlu ditambahkan atau dikurangi serta memudahkan kami dalam
mendesign layout Web Food ini.Konsep yang kami buat adalah simple, mudah
dipahami dan mudah digunakan. Pada web ini juga cukup memudahkan user untuk
memilih makanan yang ingin dibeli. Design web ini juga memasukan pilihan jadwal yaitu
breakfast, lunch, dan dinner sehingga user bisa memilih waktu kapan ingin makan.

2.2 Mock Up
Nah ini isi design mockup yg udahh ka ica design tolong dimasukin gambar apaa ja yg
terkait dengan mockup atas bantuan dan kerjasama nya saya ucapkan terimakasih
 BAB III
PENUTUP
Dalam penutup ini, kami ingin menyoroti pentingnya mockup sebagai alat yang berharga
dalam proses desain dan pengembangan produk. Melalui penelitian ini, kami telah
menjelajahi konsep dan manfaat mockup serta cara penggunaannya dalam industri kreatif.

Dari penelitian kami, kami menyimpulkan bahwa mockup dapat memberikan banyak
keuntungan. Pertama, mockup memungkinkan desainer untuk memvisualisasikan ide
mereka dengan lebih jelas dan mendapatkan umpan balik yang lebih baik dari klien atau
pengguna potensial. Selain itu, mockup juga membantu dalam pengujian konsep,
mengidentifikasi masalah desain, dan mempercepat proses iterasi desain.

Selama penyusunan makalah ini, kami juga mengidentifikasi beberapa faktor penting
yang perlu diperhatikan dalam penggunaan mockup. Keakuratan, kemudahan
penggunaan, dan kesesuaian dengan platform target merupakan beberapa faktor yang
perlu dipertimbangkan saat memilih alat mockup yang tepat.

Kami berharap makalah ini dapat memberikan wawasan yang berharga bagi para
profesional dan mahasiswa desain tentang penggunaan dan manfaat mockup. Kami
mendorong para pembaca untuk menjelajahi lebih lanjut tentang teknik, alat, dan sumber
daya yang tersedia untuk membuat mockup yang efektif.

Terakhir, kami ingin mengucapkan terima kasih kepada semua sumber daya dan referensi
yang kami gunakan dalam penelitian ini. Tanpa kontribusi mereka, makalah ini tidak akan
terwujud. Kami berharap makalah ini dapat memberikan panduan yang berguna bagi
mereka yang tertarik dengan dunia desain dan pengembangan produk.

Terima kasih.